diff --git a/components/Molecules/Button/Button.stories.js b/components/Molecules/Button/Button.stories.js index 8c8755d..037f482 100644 --- a/components/Molecules/Button/Button.stories.js +++ b/components/Molecules/Button/Button.stories.js @@ -1,29 +1,35 @@ -import Button from './Button.twig'; +import Compact from './Classic.twig'; export default { title: 'Design System/Molecules/Button' }; -export const base = { - render: (args) => Button(args), +const types = ['primary', 'secondary', 'tertiary', 'destructive']; +const icons = ['copy', 'eye', 'edit', 'close']; + +export const classic = { + render: (args) => Compact(args), args: { - text: 'Button', - level: 'primary', - href: '#', - target: '_self', - type: 'button', - tag: 'button' + customText: 'Button', + variant: 'primary', + icon_left: 'none', + icon_right: 'none' }, - argTypes: { - text: { control: 'text' }, - level: { - control: 'select', - options: ['primary', 'secondary', 'link', 'small'] + variant: { + options: types, + control: { type: 'radio' } + }, + icon_left: { + options: ['none', ...icons], + control: { type: 'radio' } + }, + icon_right: { + options: ['none', ...icons], + control: { type: 'radio' } }, - href: { control: 'text' }, - target: { control: 'select', options: ['_self', '_blank'] }, - type: { control: 'select', options: ['button', 'submit', 'reset'] }, - tag: { control: 'select', options: ['button', 'a'] } + href: { + control: { type: 'text' } + } } }; diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.twig index 74c57f6..2a9b0a2 100644 --- a/components/Molecules/Button/Button.twig +++ b/components/Molecules/Button/Button.twig @@ -1,19 +1,14 @@ -{% set tag = tag|default('a') %} -{% set classes = 'Button' %} +{% set classes = classes|default('') %} +{% if variant %}{% set classes = classes ~ ' Button--' ~ variant %}{% endif %} +{% set tag = 'button' %} +{% if href %}{% set tag = 'a' %}{% endif %} -{% if level is defined %} - {% set classes = classes ~ ' Button--' ~ level %} -{% endif %} - -{% if class is defined %} - {% set classes = classes ~ ' ' ~ class %} -{% endif %} - -<{{ tag }} - class="{{ classes }}" - {% if href is defined %}href="{{ href }}"{% endif %} - {% if target is defined %}target="{{ target }}"{% endif %} - {% if type is defined and type == 'submit' %}type="submit"{% endif %} -> - {{ text }} +<{{ tag }} class='Button {{ classes }}' {% if disabled %}disabled{% endif %} {% if href %}href='{{ href }}'{% else %}type='{{ type|default('button') }}'{% endif %}> + {% if icon_left %} + <span class='icon icon-left'>{{ source("/icons/"~ icon_left ~".svg") }}</span> + {% endif %} + {{ text|striptags('<span>')|raw }} + {% if icon_right %} + <span class='icon icon-right'>{{ source("/icons/"~ icon_right ~".svg") }}</span> + {% endif %} </{{ tag }}> diff --git a/components/Molecules/Button/Classic.twig b/components/Molecules/Button/Classic.twig new file mode 100644 index 0000000..3a8ba7a --- /dev/null +++ b/components/Molecules/Button/Classic.twig @@ -0,0 +1,34 @@ +{% set iconLeft = icon_left == 'none' ? '' : icon_left %} +{% set iconRight = icon_right == 'none' ? '' : icon_right %} + +<div class="mb-8"> + <div class='h4-desktop mb-5'>XL</div> + <div class='flex gap-4'> + {% include './Button.twig' with {disabled: false, classes: 'Button--xl', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + {% include './Button.twig' with {disabled: true, classes: 'Button--xl', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + </div> +</div> + +<div class="mb-8"> + <div class='h4-desktop mb-5'>Large</div> + <div class='flex gap-4'> + {% include './Button.twig' with {disabled: false, classes: 'Button--large', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + {% include './Button.twig' with {disabled: true, classes: 'Button--large', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + </div> +</div> + +<div class="mb-8"> + <div class='h4-desktop my-5'>Medium</div> + <div class='flex gap-4'> + {% include './Button.twig' with {disabled: false, classes: 'Button--medium', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + {% include './Button.twig' with {disabled: true, classes: 'Button--medium', text:customText, icon_left: iconLeft, icon_right: iconRight} %} + </div> +</div> + +<div class="mb-8"> + <div class='h4-desktop my-5'>Small</div> + <div class='flex gap-4'> + {% include './Button.twig' with {disabled: false, classes: 'Button--small', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + {% include './Button.twig' with {disabled: true, classes: 'Button--small', variant: variant, text: customText, icon_left: iconLeft, icon_right: iconRight} %} + </div> +</div> diff --git a/components/Molecules/Button/button.css b/components/Molecules/Button/button.css index 5e99517..b407008 100644 --- a/components/Molecules/Button/button.css +++ b/components/Molecules/Button/button.css @@ -1,25 +1,125 @@ .Button { - @apply font-medium; + display: inline-flex; + padding: rem-convert(12px) rem-convert(24px); + align-items: center; + justify-content: center; + border-radius: rem-convert(8px); + background: var(--black); + color: var(--white); + text-align: center; + text-transform: uppercase; + kerning: 5%; + font-size: var(--font-size-button-large); + font-family: var(--font-family-button-large); + font-weight: var(--font-weight-button-large); + line-height: var(--line-height-button-large); + + cursor: pointer; + text-decoration: none; + + & > span.icon { + @apply w-5 h-5; + &-left { + padding-right: rem-convert(6px); + } + &-right { + padding-left: rem-convert(6px); + } + } + + &--xl { + width: 100%; + } + + &--large, + &--xl { + padding: 16px 24px; + } + + &--medium { + padding: 8px 16px; + } + + &--small { + padding: 8px; + font-size: var(--font-size-button-small); + font-family: var(--font-family-button-small); + font-weight: var(--font-weight-button-small); + line-height: var(--line-height-button-small); + } &--primary { - @apply bg-vermillon-light hover:bg-vermillon-light text-gray-200 rounded-lg shadow-lg p-3; + background: var(--black); + color: var(--white); + + &:hover { + background: var(--grey-dark); + } + + &:disabled { + background: var(--grey-lighter); + color: var(--white); + } + + &:focus-visible { + outline: 2px solid var(--vermillon-medium); + } } &--secondary { - @apply bg-transparent hover:bg-vermillon-light border-vermillon-light border-2 text-gray-200 rounded-lg shadow-lg p-3; + background: var(--white); + color: var(--black); + border: 1px solid var(--black); + + &:hover { + border-color: var(--grey-dark); + color: var(--grey-dark); + } + + &:disabled { + border-color: var(--grey-lighter); + color: var(--grey-lighter); + } + + &:focus-visible { + outline: 2px solid var(--vermillon-medium); + } } - &--link { - @apply text-vermillon-light; + &--tertiary { + background: none; + color: var(--black); + + &:hover { + color: var(--grey-dark); + } + + &:disabled { + background: var(--white); + color: var(--grey-lighter); + } + + &:focus-visible { + outline: none; + background: var(--vermillon-lightest); + } } - &--small { - &-primary { - @apply bg-vermillon-light hover:bg-vermillon-light p-4 flex items-center justify-center text-gray-200 rounded-full; + &--destructive { + background: var(--error); + color: var(--white); + + &:hover { + background: var(--error-dark); + } + + &:disabled { + background: var(--error-lightest); + color: var(--white); } - &-secondary { - @apply flex items-center justify-center w-10 h-10 p-4 font-medium rounded-full bg-grey-medium hover:bg-charcoal-medium hover:text-grey-medium text-charcoal-medium; + &:focus-visible { + outline: 2px solid var(--error-darkest); } } } diff --git a/components/variables.css b/components/variables.css index dc42378..1510c1e 100644 --- a/components/variables.css +++ b/components/variables.css @@ -104,13 +104,14 @@ --font-family-paragraph-6: 'Roboto Condensed'; --font-family-paragraph-7: 'Roboto Condensed'; - --font-size-button-large: var(--font-size-sm); - --font-size-button-medium: var(--font-size-xs); - --font-size-button-small: var(--font-size-2xs); + --font-size-button-large: rem-convert(14px); + --font-size-button-small: rem-convert(12px); - --font-weight-button-large: 500; - --font-weight-button-medium: 500; - --font-weight-button-small: 400; + --line-height-button-large: rem-convert(19px); + --line-height-button-small: rem-convert(16px); + + --font-weight-button-large: 600; + --font-weight-button-small: 600; --font-family-button-large: 'Poppins'; --font-family-button-medium: 'Poppins';