-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
187 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' } | ||
| } | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters