footballrs.net

Button: Bold / Light 

<button class="x-btn"><span class="font-teko-bold">fugit </span> <span class="font-teko-light">nam</span></button>
 
{# ! HAS VUE COMPONENT ! #}

{% set isSubmit = submit is defined %}
{% set isBack = back is defined %}
{% set type = type ? ' ' ~ type : '' %}
{% set className = className is not empty ? type ~ ' ' ~ className : type %}
{% set target = isExternal ? ' target="_blank"' : '' %}
{% if href is defined and href.url is not empty %}
    <a href="{{ href.url }}"{% if href.title is not empty %} title="{{ href.title }}" {% endif%}class="x-btn{{ className }}"{{ target }}>{% if cta is defined and cta != '' %}{{ cta|raw }}{% endif %}</a>
{% else %}
    <button{% if isSubmit %} type="submit"{% endif %}{% if isBack %} onclick="history.back()"{% endif %}{% if href.title is not empty %} title="{{ href.title }}"{% endif%} class="x-btn{{ className }}">{% if cta is defined and cta != '' %}{{ cta|raw }}{% endif %}</button>
{% endif %}
 
{
  "cta": "<span class=\"font-teko-bold\">fugit </span> <span class=\"font-teko-light\">nam</span>"
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\button;

use ACFToolkit\FieldClasses\Link;
use ACFToolkit\FieldClasses\Message;
use ACFToolkit\FieldClasses\Select;
use ACFToolkit\FieldClasses\Text;
use ACFToolkit\Traits\SetConditionalLogic;
use ACFToolkit\Types\CustomAtom;

class Button extends CustomAtom
{
    use SetConditionalLogic;

    public string $label = 'Button';
    public int $needsJs = 0;
    public int $needsVue = 0;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        parent::__construct($name, $title);
        $this->addChildren(array_merge($children, [
            (Message::getInstance('button_info', 'Button configuration')),
            (Select::getInstance('type', 'Button type'))
                ->setWrapperWidth(100 / 3)
                ->addChoices([
                    '' => 'Default (Grey BG / Primary Text)',
                    'small' => 'Default Small (Grey BG / Primary Text)',
                    'x-btn--primary' => 'Primary (BG Primary / Text White)',
                    'x-btn--primary small' => 'Primary Small (BG Primary / Text White)',
                    'x-btn--outline' => 'Outlined (BG Transparent Border Primary / Text Primary)',
                    'x-btn--outline small' => 'Outlined Small (BG Transparent Border Primary / Text Primary)',
                    'x-btn--white' => 'White (BG White / Text Primary)',
                    'x-btn--white small' => 'White Small (BG White / Text Primary)',
                    'x-btn--accent' => 'Accent (BG Accent / Text Primary)',
                    'x-btn--accent small' => 'Accent Small (BG Accent / Text Primary)',
                ]),
            (Text::getInstance('cta', 'CTA'))
                ->setWrapperWidth(100 / 3),
            (Link::getInstance('href', 'Link'))
                ->setWrapperWidth(100 / 3),

        ]));
    }
}
  • URL: /components/raw/button/Button.php
  • Filesystem Path: resources/Views/Atoms/button/Button.php
  • Size: 1.9 KB
  • Content: 
    <?php

namespace Theme\Views\Atoms\button;

use ACFToolkit\ViewModels\BaseViewModel;

class ButtonViewModel extends BaseViewModel
{
    public function type()
    {
        return $this->getData('type');
    }

    public function cta()
    {
        return $this->getData('cta');
    }

    public function href()
    {
        return $this->getData('href');
    }
}
  • URL: /components/raw/button/ButtonViewModel.php
  • Filesystem Path: resources/Views/Atoms/button/ButtonViewModel.php
  • Size: 368 Bytes
  • Content: 
    /* ATOMS */

/* MODULES */

/* BLOCKS */
];
  • URL: /components/raw/button/button.js
  • Filesystem Path: resources/Views/Atoms/button/button.js
  • Size: 44 Bytes
  • Content: 
    {
  "button": {
    "cta": "",
    "href": {
      "url": "#",
      "title": "title",
      "target": ""
    },
    "className": ""
  }
}
  • URL: /components/raw/button/button.json
  • Filesystem Path: resources/Views/Atoms/button/button.json
  • Size: 139 Bytes
  • Content: 
    a.x-btn, button.x-btn {
  @apply inline-flex w-full text-center justify-center sm:w-auto grow-0 items-center gap-x-0.25 cursor-pointer no-underline transition-colors uppercase font-teko-bold focus:outline-none bg-lighter text-primary hover:bg-primary hover:text-white;

  border-radius: 24px;
  height: 48px;
  padding-top: 3px;

  @apply px-5;

  &.x-small {
    height: 32px;
    @apply px-1;
  }

  &.small {
    height: 32px;
    @apply px-2;
  }

  svg {
    display: inherit;
  }

  .font-teko-light {
    line-height: 1.2;
  }

  i, svg {
    font-size: 20px;
  }

  &.full {
    @apply w-full;
  }

  &--default {
    @apply border-lighter border transition-colors bg-lighter text-primary hover:bg-primary hover:text-white;
  }

  &--primary {
    @apply bg-primary border-primary border text-white transition-colors hover:bg-white-transparent hover:text-primary;
  }

  &--white {
    @apply bg-white text-primary transition-colors hover:bg-primary hover:text-white;
  }

  &--accent {
    @apply bg-accent text-primary transition-colors hover:bg-primary hover:text-accent;
  }

  &--error {
    @apply bg-red border-red border text-white transition-colors hover:bg-white hover:text-red;
  }

  &--outline {
    @apply border-primary border bg-white-transparent text-primary transition-colors hover:bg-primary hover:text-white;
  }

  &--outline-white {
    @apply border-white border bg-white-transparent text-white transition-colors hover:bg-primary hover:text-white;
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: resources/Views/Atoms/button/button.scss
  • Size: 1.5 KB
  • Content: 
    <template>
  <a v-if="getHref !== false" :href="getHref" :class="'x-btn ' + getClass">
    <template v-if="loading">
      <Loading_swirl/>
    </template>
    <template v-if="!loading">
      {{ cta }}
    </template>
  </a>
  <button v-else :class="'x-btn ' + getClass">
    <template v-if="loading">
      <Loading_swirl/>
    </template>
    <template v-if="!loading">
      {{ cta }}
    </template>
  </button>
</template>
<script>
import Loading_swirl from '../loadingSwirl/loading_swirl.vue';

export default {
  name: 'CustomButton',
  components: {
    Loading_swirl
  },
  props: {
    loading: {
      type: Boolean
    },
    type: {
      type: String
    },
    cta: {
      type: String
    },
    href: {
      type: String
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    getClass(){
        return [this.type, this.className].join(' ')
    },
    getHref(){
      if(!this.href){
        return false
      }
      return this.href.url ? this.href.url : this.href
    },
  }
}
</script>
  • URL: /components/raw/button/button.vue
  • Filesystem Path: resources/Views/Atoms/button/button.vue
  • Size: 1 KB

No notes defined.