-
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
jordi hermes babalako
committed
Jun 24, 2024
1 parent
94891f6
commit 3789c4b
Showing
11 changed files
with
324 additions
and
3 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,12 @@ | ||
| <label class="Checkbox {{ classes|default('') }} {{ error ? 'error' : ''}}"> | ||
| <input type="checkbox" | ||
| name='{{ name }}' | ||
| value='{{ value }}' | ||
| {% if disabled %}disabled{% endif %} | ||
| {% if checked %}checked{% endif %} | ||
| > | ||
| <div class="flex items-center justify-center checkmark"> | ||
| <span class="w-[10px] h-[10px] text-white">{{ source("/icons/check.svg") }}</span> | ||
| </div> | ||
| <span>{{ label }}</span> | ||
| </label> |
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,7 @@ | ||
| <div> | ||
| {% include './Checkbox.twig' with {label: 'Unchecked',disabled: disabled, error:error} %} | ||
| {% include './Checkbox.twig' with {label: 'Checked',disabled: disabled, error:error, checked:true} %} | ||
| {% include './Checkbox.twig' with | ||
| {label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'} | ||
| %} | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import Checkbox from './Checkboxs.twig'; | ||
| import Radio from './Radios.twig'; | ||
| import Toggle from './Toggles.twig'; | ||
| import './checkbox.css'; | ||
| import './toggle.css'; | ||
|
|
||
| export default { | ||
| title: 'Design System/Atoms/Form' | ||
| }; | ||
|
|
||
| const commonProps = { | ||
| args: { | ||
| error: false, | ||
| disabled: false | ||
| }, | ||
| argTypes: { | ||
| error: { | ||
| control: { type: 'boolean' } | ||
| }, | ||
| disabled: { | ||
| control: { type: 'boolean' } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export const checkbox = { | ||
| render: (args) => Checkbox(args), | ||
|
|
||
| play: ({ canvasElement, ...props }) => { | ||
| const checkbox = canvasElement.querySelector( | ||
| '.Checkbox.indeterminate input' | ||
| ); | ||
| checkbox.indeterminate = true; | ||
| }, | ||
| ...commonProps | ||
| }; | ||
|
|
||
| export const radio = { | ||
| render: (args) => Radio(args), | ||
| ...commonProps | ||
| }; | ||
|
|
||
| export const toggle = { | ||
| render: (args) => Toggle(args), | ||
| args: { | ||
| disabled: false | ||
| }, | ||
| argTypes: { | ||
| disabled: { | ||
| control: { type: 'boolean' } | ||
| } | ||
| } | ||
| }; |
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,13 @@ | ||
| {% set type = type|default('label') %} | ||
| <{{ type }} class="Radio {{ classes|default('') }} {{ error|default(0) ? 'error' : ''}}"> | ||
| <input | ||
| type="radio" | ||
| name='{{ name }}' | ||
| value='{{ value|default('') }}' | ||
| {% if id %}id='{{ id }}'{% endif %} | ||
| {% if disabled %}disabled{% endif %} | ||
| {% if checked %}checked{% endif %} | ||
| > | ||
| <span class="checkmark"></span> | ||
| <span>{{ label }}</span> | ||
| </{{ type }}> |
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,5 @@ | ||
| <div> | ||
| {% include './Radio.twig' with {label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %} | ||
| {% include './Radio.twig' with {label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %} | ||
| {% include './Radio.twig' with {label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %} | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <label class="ToggleButton {{ classes|default('') }} {{ error ? 'error' : ''}}"> | ||
| <input type="checkbox" | ||
| name='{{ name }}' | ||
| value='{{ value }}' | ||
| tabindex="-1" | ||
| {% if disabled %}disabled{% endif %} | ||
| {% if checked %}checked{% endif %} | ||
| > | ||
| {% if labelOff %} | ||
| <span class="ToggleButton-uncheckedLabel">{{ labelOff }}</span> | ||
| {% endif %} | ||
| <span class="ToggleButton-wrapper" tabindex="0"> | ||
| <span></span> | ||
| </span> | ||
| {% if labelOn %} | ||
| <span class="ToggleButton-checkedLabel">{{ labelOn }}</span> | ||
| {% endif %} | ||
| </label> |
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,4 @@ | ||
| {% include './Toggle.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %} | ||
| <div class="mt-5"> | ||
| {% include './Toggle.twig' with {disabled: disabled, error:error, checked:true} %} | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| .Checkbox, .Radio { | ||
| display: flex; | ||
| align-items: center; | ||
| position: relative; | ||
| cursor: pointer; | ||
| gap: 0.5rem; | ||
| --current-checkbox-color: var(--black); | ||
| --current-checkbox-hover: var(--grey-dark); | ||
| --current-checkbox-disabled: var(--grey-lighter); | ||
| --checkbox-focus: var(--vermillon); | ||
| &.error { | ||
| --current-checkbox-color: var(--error-dark); | ||
| --current-checkbox-hover: var(--error-darkest); | ||
| --checkbox-focus: var(--error); | ||
| } | ||
| input { | ||
| position: absolute; | ||
| opacity: 0; | ||
| cursor: pointer; | ||
| height: 0; | ||
| width: 0; | ||
|
|
||
| &:focus-visible{ | ||
| & ~ .checkmark { | ||
| outline: var(--checkbox-focus) solid 1px; | ||
| outline-offset: 1px; | ||
| } | ||
| } | ||
| } | ||
| .checkmark { | ||
| width: 16px; | ||
| height: 16px; | ||
| background: var(--white); | ||
| border: 1px solid var(--current-checkbox-color); | ||
| border-radius: 2px; | ||
| position: relative; | ||
| span { | ||
| display: none; | ||
| } | ||
| } | ||
| input:disabled ~ .checkmark { | ||
| border: 1px solid var(--current-checkbox-disabled); | ||
| } | ||
|
|
||
| &:hover input:not(:disabled) { | ||
| & ~ .checkmark { | ||
| border: 1px solid var(--current-checkbox-hover); | ||
| } | ||
| &:indeterminate ~ .checkmark { | ||
| background-color: var(--grey-lightest); | ||
| &:after { | ||
| background: var(--current-checkbox-hover); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .Checkbox { | ||
| input { | ||
| &:indeterminate { | ||
| ~ .checkmark { | ||
| &:after { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 8px; | ||
| height: 2px; | ||
| left: 3px; | ||
| top: 6px; | ||
| background: var(--current-checkbox-color); | ||
| } | ||
| } | ||
| &:disabled { | ||
| & ~ .checkmark:after { | ||
| background: var(--current-checkbox-disabled); | ||
| } | ||
| } | ||
| } | ||
| &:checked { | ||
| & ~ .checkmark { | ||
| background-color: var(--current-checkbox-color); | ||
| span { | ||
| display: block; | ||
| } | ||
| } | ||
| &:disabled { | ||
| & ~ .checkmark { | ||
| background-color: var(--current-checkbox-disabled); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| &:hover input:not(:disabled) { | ||
| &:checked ~ .checkmark { | ||
| background-color: var(--current-checkbox-hover); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .Radio { | ||
| .checkmark { | ||
| border-radius: 555rem; | ||
| width: 14px; | ||
| height: 14px; | ||
| } | ||
| input { | ||
| &:checked { | ||
| & ~ .checkmark:after { | ||
| content: ""; | ||
| position: absolute; | ||
| border-radius: 555rem; | ||
| top:2px; | ||
| bottom:2px; | ||
| left:2px; | ||
| right:2px; | ||
| background-color: var(--current-checkbox-color); | ||
| } | ||
| } | ||
| &:disabled { | ||
| & ~ .checkmark:after { | ||
| background: var(--current-checkbox-disabled); | ||
| } | ||
| } | ||
| } | ||
| } |
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,74 @@ | ||
| .ToggleButton { | ||
| --on-color: var(--black); | ||
| --off-color: var(--grey); | ||
| --on-color-hover: var(--grey-dark); | ||
| --off-color-hover: var(--black); | ||
| --color-disabled: var(--grey-lighter); | ||
| --checkbox-focus: var(--vermillon) | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| gap: 0.5rem; | ||
| &-wrapper { | ||
| background: var(--off-color); | ||
| width: 25px; | ||
| height: 14px; | ||
| position: relative; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| flex-shrink: 0; | ||
| border-color: transparent; | ||
| @apply rounded-full transition-colors duration-200 ease-in-out; | ||
| span { | ||
| width: 10px; | ||
| height: 10px; | ||
| display: inline-block; | ||
| background: var(--white); | ||
| @apply translate-x-[0.1rem]; | ||
| @apply rounded-full transition duration-200 ease-in-out; | ||
| } | ||
| } | ||
| input { | ||
| position: absolute; | ||
| opacity: 0; | ||
| height: 0; | ||
| width: 0; | ||
| } | ||
| input:checked { | ||
| & ~ .ToggleButton { | ||
| &-wrapper { | ||
| background: var(--on-color); | ||
| span { | ||
| @apply translate-x-[0.8rem]; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| input:focus-visible{ | ||
| & ~ .ToggleButton-wrapper { | ||
| outline: var(--checkbox-focus) solid 1px; | ||
| outline-offset: 1px; | ||
| } | ||
| } | ||
| input:disabled { | ||
| & ~ .ToggleButton-wrapper { | ||
| background: var(--color-disabled); | ||
| } | ||
| } | ||
| &:hover { | ||
| .ToggleButton-wrapper { | ||
| background: var(--off-color-hover); | ||
| } | ||
| input:checked { | ||
| & ~ .ToggleButton-wrapper { | ||
| background: var(--on-color-hover); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .ToggleButton-wrapper:focus-visible { | ||
| outline: var(--vermillon) solid 1px; | ||
| outline-offset: 1px; | ||
| } |
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