footballrs.net

Copy: Light 

<span class="typo light">Perferendis provident repudiandae repellendus at optio non. Magni ullam tempore eos. Deleniti sint ipsa dolor enim impedit labore exercitationem. Optio ad sit repellendus similique eligendi esse magni eius aut. Aspernatur aliquid sequi cumque accusamus et. Impedit dolorum aspernatur atque quo deleniti adipisci maiores maiores.</span>
 
{# ! HAS VUE COMPONENT ! #}

{% set className = className is not empty ? ' ' ~ className : '' %}
{% set variant = variant ? ' ' ~ variant : '' %}
{% set type = type ?? 'span' %}
<{{ type }} class="typo{{ className ~ variant }}">{{ text|raw }}</{{ type }}>
 
{
  "text": "Perferendis provident repudiandae repellendus at optio non. Magni ullam tempore eos. Deleniti sint ipsa dolor enim impedit labore exercitationem. Optio ad sit repellendus similique eligendi esse magni eius aut. Aspernatur aliquid sequi cumque accusamus et. Impedit dolorum aspernatur atque quo deleniti adipisci maiores maiores.",
  "className": "light"
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\copy;

use ACFToolkit\FieldClasses\Select;
use ACFToolkit\FieldClasses\Wysiwyg;
use ACFToolkit\Traits\SetConditionalLogic;
use ACFToolkit\Traits\SetWrapperWidth;
use ACFToolkit\Types\CustomAtom;

class Copy extends CustomAtom
{
    use SetWrapperWidth, SetConditionalLogic;

    public string $label = 'Copy';
    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, [
            (Select::getInstance('variant', 'Copy type'))
                ->addChoices([
                    '' => 'Default (16px)',
                    'small' => 'Small (14px)',
                    'light' => 'Light (10px)',
                ]),
            (Wysiwyg::getInstance('text', $title))
                ->setWrapperWidth($this->wrapperWidth)
        ]));
    }
}
  • URL: /components/raw/copy/Copy.php
  • Filesystem Path: resources/Views/Atoms/copy/Copy.php
  • Size: 998 Bytes
  • Content: 
    <?php

namespace Theme\Views\Atoms\copy;

use ACFToolkit\ViewModels\BaseViewModel;

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

    public function variant()
    {
        return $this->getData('variant');
    }
}
  • URL: /components/raw/copy/CopyViewModel.php
  • Filesystem Path: resources/Views/Atoms/copy/CopyViewModel.php
  • Size: 293 Bytes
  • Content: 
    .typo {
  @apply font-ubuntu-regular leading-loose;

  strong {
    @apply block font-roboto-bold;
  }

  &.small {
    font-size: 14px;
  }

  &.light {
    font-size: 10px;
    @apply font-roboto-light;
  }
}
  • URL: /components/raw/copy/copy.scss
  • Filesystem Path: resources/Views/Atoms/copy/copy.scss
  • Size: 210 Bytes
  • Content: 
    <template>
  <component :is="type" :class="getClasses" v-html="text"/>
</template>
<script>

export default {
  name: 'Copy',
  props: {
    className: {
      type: String,
      default: ''
    },
    variant: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'span'
    },
    text: {
      type: String
    }
  },
  computed: {
    getClasses(){
      const className = this.className !== '' ? ' ' + this.className : ''
      const variant = this.variant !== '' ? ' ' + this.variant : ''
      return `typo${className}${variant}`
    }
  }
}
</script>
  • URL: /components/raw/copy/copy.vue
  • Filesystem Path: resources/Views/Atoms/copy/copy.vue
  • Size: 599 Bytes

No notes defined.