From 35fc21c0eb96a7795cd72136b7e2193cff5f4834 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Mon, 24 Jun 2024 16:07:15 +0200 Subject: [PATCH 01/11] feat(fields): wip, need tooltips and buttons --- .../Molecules/Fields/FieldInput/FieldInput.js | 15 ++ .../Fields/FieldInput/FieldInput.stories.js | 74 ++++++++ .../Fields/FieldInput/FieldInput.twig | 50 +++++ .../Fields/FieldInput/fieldInput.css | 172 ++++++++++++++++++ .../Fields/FieldNumber/FieldNumber.js | 15 ++ .../Fields/FieldNumber/FieldNumber.stories.js | 27 +++ .../Fields/FieldNumber/FieldNumber.twig | 19 ++ .../Fields/FieldNumber/fieldNumber.css | 77 ++++++++ .../Fields/FieldSelect/FieldSelect.js | 15 ++ .../Fields/FieldSelect/FieldSelect.stories.js | 40 ++++ .../Fields/FieldSelect/FieldSelect.twig | 38 ++++ .../Fields/FieldSelect/fieldSelect.css | 114 ++++++++++++ 12 files changed, 656 insertions(+) create mode 100644 components/Molecules/Fields/FieldInput/FieldInput.js create mode 100644 components/Molecules/Fields/FieldInput/FieldInput.stories.js create mode 100644 components/Molecules/Fields/FieldInput/FieldInput.twig create mode 100644 components/Molecules/Fields/FieldInput/fieldInput.css create mode 100644 components/Molecules/Fields/FieldNumber/FieldNumber.js create mode 100644 components/Molecules/Fields/FieldNumber/FieldNumber.stories.js create mode 100644 components/Molecules/Fields/FieldNumber/FieldNumber.twig create mode 100644 components/Molecules/Fields/FieldNumber/fieldNumber.css create mode 100644 components/Molecules/Fields/FieldSelect/FieldSelect.js create mode 100644 components/Molecules/Fields/FieldSelect/FieldSelect.stories.js create mode 100644 components/Molecules/Fields/FieldSelect/FieldSelect.twig create mode 100644 components/Molecules/Fields/FieldSelect/fieldSelect.css diff --git a/components/Molecules/Fields/FieldInput/FieldInput.js b/components/Molecules/Fields/FieldInput/FieldInput.js new file mode 100644 index 0000000..80b0f23 --- /dev/null +++ b/components/Molecules/Fields/FieldInput/FieldInput.js @@ -0,0 +1,15 @@ +const fieldInputFunction = () => { + const input = document.querySelector('input'); + + if (input) { + input.addEventListener('input', function () { + if (input.value.trim() !== '') { + input.classList.add('FieldInput-input--filled'); + } else { + input.classList.remove('FieldInput-input--filled'); + } + }); + } +}; + +export default fieldInputFunction; diff --git a/components/Molecules/Fields/FieldInput/FieldInput.stories.js b/components/Molecules/Fields/FieldInput/FieldInput.stories.js new file mode 100644 index 0000000..ee41f60 --- /dev/null +++ b/components/Molecules/Fields/FieldInput/FieldInput.stories.js @@ -0,0 +1,74 @@ +import FieldInput from './FieldInput.twig'; +import fieldInputFunction from './FieldInput.js'; + +export default { + title: 'Design System/Molecules/Fields/FieldInput' +}; + +export const Base = { + render: (args) => FieldInput(args), + play: () => { + fieldInputFunction(); + }, + args: { + name: 'indication', + type: '', + label: 'Indication', + placeholder: 'Ex. Nom', + iconButtonLeft: false, + min: '', + max: '', + error: '', + unit: '', + tooltip: '', + iconButton: '' + }, + argTypes: { + disabled: { + control: { type: 'boolean' } + }, + required: { + control: { type: 'boolean' } + }, + success: { + control: { type: 'boolean' } + }, + size: { + options: ['large', 'small'], + control: { type: 'select' } + } + } +}; + +export const WithButton = { + render: (args) => FieldInput(args), + play: () => { + fieldInputFunction(); + }, + args: { + name: 'promoCode', + type: 'text', + label: '', + placeholder: 'Code Promo', + min: '', + max: '', + error: '', + tooltip: '', + button: 'Appliquer' + }, + argTypes: { + disabled: { + control: { type: 'boolean' } + }, + required: { + control: { type: 'boolean' } + }, + success: { + control: { type: 'boolean' } + }, + size: { + options: ['large', 'small'], + control: { type: 'select' } + } + } +}; diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.twig new file mode 100644 index 0000000..d7e2953 --- /dev/null +++ b/components/Molecules/Fields/FieldInput/FieldInput.twig @@ -0,0 +1,50 @@ +{% set classes = '' %} +{% if error %} + {% set classes = classes ~ ' FieldInput--error' %} +{% endif %} +{% if success %} + {% set classes = classes ~ ' FieldInput--success' %} +{% endif %} +{% if size %} + {% set classes = classes ~ ' FieldInput--' ~ size %} +{% endif %} +{% if button %} + {% set classes = classes ~ ' FieldInput--withButton' %} +{% endif %} + + +
+
+ + {% if tooltip %} + {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% endif %} +
+
+ + {% if unit %}{{ unit }}{% endif %} + {% if iconButton %} +
+ +
+ {% endif %} + {% if button %} +
+ {% include '../../Button/Button.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %} +
+ {% endif %} +
+ {% if error %}{{ error }}{% endif %} +
diff --git a/components/Molecules/Fields/FieldInput/fieldInput.css b/components/Molecules/Fields/FieldInput/fieldInput.css new file mode 100644 index 0000000..a2973be --- /dev/null +++ b/components/Molecules/Fields/FieldInput/fieldInput.css @@ -0,0 +1,172 @@ +.FieldInput { + display: flex; + flex-direction: column; + gap: rem-convert(4px); + + &-header { + display: flex; + justify-content: space-between; + } + + &-label { + @apply paragraph-5; + color: var(--black); + } + + &-help { + width: rem-convert(18px); + width: rem-convert(18px); + height: rem-convert(18px); + color: var(--black); + } + + &-blockInput { + position: relative; + } + + &-input { + @apply paragraph-4; + border: 1px solid var(--theme-medium); + border-radius: 8px; + color: var(--black); + width: 100%; + padding: rem-convert(16px) rem-convert(10px); + transition: 0.2s ease all; + + &:hover { + background-color: var(--theme-lightest); + } + + &:focus-visible { + outline-offset: 2px; + outline: 1px solid var(--theme); + } + + &--filled { + border-color: var(--theme); + } + + &--unit { + padding-right: rem-convert(50px); + } + } + + &-unit { + position: absolute; + right: rem-convert(10px); + bottom: 0; + top: 0; + display: flex; + align-items: center; + pointer-events: none; + font-size: var(--font-size-paragraph-4); + font-family: var(--font-family-paragraph-5); + line-height: var(--line-height-paragraph-4); + } + + &--small { + .FieldInput-input { + padding: rem-convert(10px); + + &--unit { + padding-right: rem-convert(50px); + } + } + } + + &--error { + .FieldInput-label { + color: var(--error-dark); + } + + .FieldInput-input { + border: 1px solid var(--error-light); + color: var(--error); + + &:hover { + background-color: var(--error-lightest); + } + + &:focus-visible { + outline: 1px solid var(--error-dark); + } + } + + ::placeholder { + color: var(--error); + } + } + + &-error { + @apply paragraph-5; + color: var(--error-dark); + font-style: italic; + } + + &--success { + .FieldInput-input { + border: 1px solid var(--success); + background: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0 top 50%; + } + } + + &[disabled] { + .FieldInput-label { + color: var(--grey); + } + + .FieldInput-input { + border: 1px solid var(--grey); + color: var(--grey); + cursor: not-allowed; + background-color: var(--grey-lightest); + } + + .FieldInput-help { + color: var(--grey); + } + + ::placeholder { + color: var(--grey); + } + } + + &--withButton { + .FieldInput-input { + padding-right: 25%; + } + } + + &-button { + position: absolute; + top: 50%; + right: 4px; + transform: translateY(-50%); + } + + &-buttonIcon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + width: rem-convert(20px); + height: rem-convert(20px); + } + + ::placeholder { + color: var(--grey-dark); + font-style: italic; + } + + &-blockInputIconLeft { + .FieldInput-buttonIcon { + right: 0; + left: 10px; + } + .FieldInput-input { + padding-left: rem-convert(40px); + } + } +} diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.js b/components/Molecules/Fields/FieldNumber/FieldNumber.js new file mode 100644 index 0000000..230f2b8 --- /dev/null +++ b/components/Molecules/Fields/FieldNumber/FieldNumber.js @@ -0,0 +1,15 @@ +const fieldNumberFunction = () => { + const input = document.querySelector('input'); + + if (input) { + input.addEventListener('input', function () { + if (input.value.trim() !== '') { + input.classList.add('FieldNumber-input--filled'); + } else { + input.classList.remove('FieldNumber-input--filled'); + } + }); + } +}; + +export default fieldNumberFunction; diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js new file mode 100644 index 0000000..9a50d7e --- /dev/null +++ b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js @@ -0,0 +1,27 @@ +import FieldNumber from './FieldNumber.twig'; +import fieldNumberFunction from './FieldNumber.js'; + +export default { + title: 'Design System/Molecules/Fields/FieldNumber' +}; + +export const Base = { + render: (args) => FieldNumber(args), + play: () => { + fieldNumberFunction(); + }, + args: { + name: 'Indication', + min: '', + max: '', + error: '' + }, + argTypes: { + disabled: { + control: { type: 'boolean' } + }, + required: { + control: { type: 'boolean' } + } + } +}; diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.twig b/components/Molecules/Fields/FieldNumber/FieldNumber.twig new file mode 100644 index 0000000..e872cd3 --- /dev/null +++ b/components/Molecules/Fields/FieldNumber/FieldNumber.twig @@ -0,0 +1,19 @@ +{% set classes = '' %} +{% if error %} + {% set classes = classes ~ ' FieldNumber--error' %} +{% endif %} + +
+ + {% if error %}{{ error }}{% endif %} +
diff --git a/components/Molecules/Fields/FieldNumber/fieldNumber.css b/components/Molecules/Fields/FieldNumber/fieldNumber.css new file mode 100644 index 0000000..a26aff4 --- /dev/null +++ b/components/Molecules/Fields/FieldNumber/fieldNumber.css @@ -0,0 +1,77 @@ +.FieldNumber { + display: flex; + flex-direction: column; + gap: rem-convert(4px); + + &-input { + @apply paragraph-4; + border: 1px solid var(--theme-medium); + border-radius: 8px; + color: var(--black); + padding: rem-convert(16px) rem-convert(10px); + transition: 0.2s ease all; + width: rem-convert(48px); + text-align: center; + + &:hover { + background-color: var(--theme-lightest); + } + + &:focus-visible { + outline-offset: 2px; + outline: 1px solid var(--theme); + } + + &--filled { + border-color: var(--theme); + } + } + + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + appearance: none; + } + + &--error { + .FieldNumber-input { + border: 1px solid var(--error-light); + color: var(--error); + + &:hover { + background-color: var(--error-lightest); + } + + &:focus-visible { + outline: 1px solid var(--error-dark); + } + } + + ::placeholder { + color: var(--error); + } + } + + &-error { + @apply paragraph-5; + color: var(--error-dark); + font-style: italic; + } + + &[disabled] { + .FieldNumber-input { + border: 1px solid var(--grey); + color: var(--grey); + cursor: not-allowed; + background-color: var(--grey-lightest); + } + + ::placeholder { + color: var(--grey); + } + } + + ::placeholder { + color: var(--grey-dark); + font-style: italic; + } +} diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.js b/components/Molecules/Fields/FieldSelect/FieldSelect.js new file mode 100644 index 0000000..80b0f23 --- /dev/null +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.js @@ -0,0 +1,15 @@ +const fieldInputFunction = () => { + const input = document.querySelector('input'); + + if (input) { + input.addEventListener('input', function () { + if (input.value.trim() !== '') { + input.classList.add('FieldInput-input--filled'); + } else { + input.classList.remove('FieldInput-input--filled'); + } + }); + } +}; + +export default fieldInputFunction; diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js b/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js new file mode 100644 index 0000000..b1a7190 --- /dev/null +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js @@ -0,0 +1,40 @@ +import FieldSelect from './FieldSelect.twig'; +import fieldSelectFunction from './FieldSelect.js'; + +export default { + title: 'Design System/Molecules/Fields/FieldSelect' +}; + +export const Base = { + render: (args) => FieldSelect(args), + play: () => { + fieldSelectFunction(); + }, + args: { + name: 'Indication', + options: [ + { value: 1, label: 'selecteur 1' }, + { value: 2, label: 'selecteur 2' }, + { value: 3, label: 'selecteur 3' } + ], + label: 'Indication', + placeholder: 'Ex. Nom', + error: '', + tooltip: '' + }, + argTypes: { + disabled: { + control: { type: 'boolean' } + }, + success: { + control: { type: 'boolean' } + }, + size: { + options: ['large', 'small'], + control: { type: 'select' } + }, + required: { + control: { type: 'boolean' } + } + } +}; diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.twig new file mode 100644 index 0000000..64fdb96 --- /dev/null +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.twig @@ -0,0 +1,38 @@ +{% set classes = '' %} +{% if error %} + {% set classes = classes ~ ' FieldSelect--error' %} +{% endif %} +{% if success %} + {% set classes = classes ~ ' FieldSelect--success' %} +{% endif %} +{% if size %} + {% set classes = classes ~ ' FieldSelect--' ~ size %} +{% endif %} + +
+
+ + {% if tooltip %} + {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% endif %} +
+ + {% if error %}{{ error }}{% endif %} +
diff --git a/components/Molecules/Fields/FieldSelect/fieldSelect.css b/components/Molecules/Fields/FieldSelect/fieldSelect.css new file mode 100644 index 0000000..169730e --- /dev/null +++ b/components/Molecules/Fields/FieldSelect/fieldSelect.css @@ -0,0 +1,114 @@ +.FieldSelect { + display: flex; + flex-direction: column; + gap: rem-convert(4px); + + &-header { + display: flex; + justify-content: space-between; + } + + &-label { + @apply paragraph-5; + color: var(--black); + } + + &-help { + width: rem-convert(18px); + height: rem-convert(18px); + color: var(--black); + } + + &-select { + @apply paragraph-4; + border: 1px solid var(--theme-medium); + border-radius: 8px; + color: var(--grey-dark); + font-style: italic; + width: 100%; + padding: rem-convert(16px) rem-convert(10px); + appearance: none; + background: url('/assets/icons/chevron-small-down.svg'); + background-repeat: no-repeat; + background-position: right 0 top 50%; + background-size: rem-convert(40px) auto; + transition: 0.2s ease all; + + &:hover { + background-color: var(--theme-lightest); + } + + &:focus-visible { + outline-offset: 2px; + outline: 1px solid var(--theme); + } + + &--filled { + border-color: var(--theme); + color: var(--black); + font-style: normal; + } + } + + &-placeholder { + color: var(--grey-dark); + font-style: italic; + } + + &--small { + .FieldSelect-select { + padding: rem-convert(10px); + } + } + + &--error { + .FieldSelect-label { + color: var(--error-dark); + } + + .FieldSelect-select { + border: 1px solid var(--error-light); + color: var(--error); + + &:hover { + background-color: var(--error-lightest); + } + + &:focus-visible { + outline: 1px solid var(--error-dark); + } + } + } + + &-error { + @apply paragraph-5; + color: var(--error-dark); + font-style: italic; + } + + &--success { + .FieldSelect-select { + border: 1px solid var(--success); + background: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 0 top 50%; + } + } + + &[disabled] { + .FieldSelect-label { + color: var(--grey); + } + + .FieldSelect-select { + border: 1px solid var(--grey); + color: var(--grey); + cursor: not-allowed; + background-color: var(--grey-lightest); + } + + .FieldSelect-help { + color: var(--grey); + } + } +} From 3c8746e6e1e6114179b1b73268ad5df63ae07fdf Mon Sep 17 00:00:00 2001 From: jordi hermes babalako Date: Fri, 28 Jun 2024 10:42:51 +0200 Subject: [PATCH 02/11] feat(Forms) --- components/Molecules/Form/Checkbox.twig | 12 +++ components/Molecules/Form/Checkboxs.twig | 7 ++ components/Molecules/Form/Form.stories.js | 53 +++++++++ components/Molecules/Form/Radio.twig | 13 +++ components/Molecules/Form/Radios.twig | 5 + components/Molecules/Form/Toggle.twig | 18 ++++ components/Molecules/Form/Toggles.twig | 4 + components/Molecules/Form/checkbox.css | 124 ++++++++++++++++++++++ components/Molecules/Form/toggle.css | 74 +++++++++++++ 9 files changed, 310 insertions(+) create mode 100644 components/Molecules/Form/Checkbox.twig create mode 100644 components/Molecules/Form/Checkboxs.twig create mode 100644 components/Molecules/Form/Form.stories.js create mode 100644 components/Molecules/Form/Radio.twig create mode 100644 components/Molecules/Form/Radios.twig create mode 100644 components/Molecules/Form/Toggle.twig create mode 100644 components/Molecules/Form/Toggles.twig create mode 100644 components/Molecules/Form/checkbox.css create mode 100644 components/Molecules/Form/toggle.css diff --git a/components/Molecules/Form/Checkbox.twig b/components/Molecules/Form/Checkbox.twig new file mode 100644 index 0000000..bd5dfe9 --- /dev/null +++ b/components/Molecules/Form/Checkbox.twig @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/components/Molecules/Form/Checkboxs.twig b/components/Molecules/Form/Checkboxs.twig new file mode 100644 index 0000000..f9cc2c9 --- /dev/null +++ b/components/Molecules/Form/Checkboxs.twig @@ -0,0 +1,7 @@ +
+ {% 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'} + %} +
\ No newline at end of file diff --git a/components/Molecules/Form/Form.stories.js b/components/Molecules/Form/Form.stories.js new file mode 100644 index 0000000..121d466 --- /dev/null +++ b/components/Molecules/Form/Form.stories.js @@ -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/Molecules/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' } + } + } +}; \ No newline at end of file diff --git a/components/Molecules/Form/Radio.twig b/components/Molecules/Form/Radio.twig new file mode 100644 index 0000000..ab9bd7c --- /dev/null +++ b/components/Molecules/Form/Radio.twig @@ -0,0 +1,13 @@ +{% set type = type|default('label') %} +<{{ type }} class="Radio {{ classes|default('') }} {{ error|default(0) ? 'error' : ''}}"> + + + {{ label }} + \ No newline at end of file diff --git a/components/Molecules/Form/Radios.twig b/components/Molecules/Form/Radios.twig new file mode 100644 index 0000000..6beea27 --- /dev/null +++ b/components/Molecules/Form/Radios.twig @@ -0,0 +1,5 @@ +
+ {% 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} %} +
\ No newline at end of file diff --git a/components/Molecules/Form/Toggle.twig b/components/Molecules/Form/Toggle.twig new file mode 100644 index 0000000..76bc8ab --- /dev/null +++ b/components/Molecules/Form/Toggle.twig @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/components/Molecules/Form/Toggles.twig b/components/Molecules/Form/Toggles.twig new file mode 100644 index 0000000..303bbcf --- /dev/null +++ b/components/Molecules/Form/Toggles.twig @@ -0,0 +1,4 @@ +{% include './Toggle.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %} +
+ {% include './Toggle.twig' with {disabled: disabled, error:error, checked:true} %} +
\ No newline at end of file diff --git a/components/Molecules/Form/checkbox.css b/components/Molecules/Form/checkbox.css new file mode 100644 index 0000000..03538d2 --- /dev/null +++ b/components/Molecules/Form/checkbox.css @@ -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); + } + } + } + } \ No newline at end of file diff --git a/components/Molecules/Form/toggle.css b/components/Molecules/Form/toggle.css new file mode 100644 index 0000000..1c01aaa --- /dev/null +++ b/components/Molecules/Form/toggle.css @@ -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; + } \ No newline at end of file From f55dedd7cc0786869f16c1ffd635f0a1a63059f2 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Wed, 3 Jul 2024 16:48:07 +0200 Subject: [PATCH 03/11] feat(saving-bar): wip --- .../Organisms/SavingBar/SavingBar.stories.js | 36 +++++++++++++++++++ components/Organisms/SavingBar/SavingBar.twig | 28 +++++++++++++++ components/Organisms/SavingBar/savingBar.css | 20 +++++++++++ 3 files changed, 84 insertions(+) create mode 100644 components/Organisms/SavingBar/SavingBar.stories.js create mode 100644 components/Organisms/SavingBar/SavingBar.twig create mode 100644 components/Organisms/SavingBar/savingBar.css diff --git a/components/Organisms/SavingBar/SavingBar.stories.js b/components/Organisms/SavingBar/SavingBar.stories.js new file mode 100644 index 0000000..ca0bc2a --- /dev/null +++ b/components/Organisms/SavingBar/SavingBar.stories.js @@ -0,0 +1,36 @@ +import SavingBar from './SavingBar.twig'; + +export default { + title: 'Design System/Organisms/SavingBar' +}; + +export const base = { + render: (args) => SavingBar(args), + args: { + action: { + label: 'Enregistrer', + variant: 'primary' + }, + secondaryAction: { + label: 'Prévisualiser', + variant: 'secondary', + iconLeft: 'eye' + }, + tertiaryAction: { + label: 'Fermer', + variant: 'tertiary', + iconLeft: 'close' + } + }, + argTypes: { + action: { + control: { type: 'object' } + }, + secondaryAction: { + control: { type: 'object' } + }, + tertiaryAction: { + control: { type: 'object' } + } + } +}; diff --git a/components/Organisms/SavingBar/SavingBar.twig b/components/Organisms/SavingBar/SavingBar.twig new file mode 100644 index 0000000..4bd87cb --- /dev/null +++ b/components/Organisms/SavingBar/SavingBar.twig @@ -0,0 +1,28 @@ +
+ {% if tertiaryAction %} + {% include '../../Molecules/Button/Button.twig' with { + variant: tertiaryAction.variant, + text: tertiaryAction.label, + icon_left: tertiaryAction.iconLeft, + classes: 'Button--large', + } %} + {% endif %} + + {% if secondaryAction %} + {% include '../../Molecules/Button/Button.twig' with { + variant: secondaryAction.variant, + text: secondaryAction.label, + icon_left: secondaryAction.iconLeft, + classes: 'Button--large', + } %} + {% endif %} + + {% if action %} + {% include '../../Molecules/Button/Button.twig' with { + variant: action.variant, + text: action.label, + icon_left: action.iconLeft, + classes: 'Button--large', + } %} + {% endif %} +
diff --git a/components/Organisms/SavingBar/savingBar.css b/components/Organisms/SavingBar/savingBar.css new file mode 100644 index 0000000..6d77e1c --- /dev/null +++ b/components/Organisms/SavingBar/savingBar.css @@ -0,0 +1,20 @@ +.SavingBar { + display: flex; + justify-content: flex-end; + gap: 9px; + align-items: center; + padding: 13px 98px; + min-height: rem-convert(80px); + background-color: var(--grey-lightest); + border-top: 1px solid var(--grey); + + @media (max-width: 600px) { + justify-content: center; + padding: 13px 35px; + flex-wrap: wrap; + } + + @media (max-width: 400px) { + padding: 13px 23px; + } +} From b706511021febc836b75f850955d822095e4bcde Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Fri, 5 Jul 2024 14:36:08 +0200 Subject: [PATCH 04/11] fix(fields): updated colors --- .../Fields/FieldInput/FieldInput.stories.js | 33 --------- .../Fields/FieldInput/FieldInput.twig | 68 ++++++++----------- .../Fields/FieldInput/fieldInput.css | 17 ++--- .../Fields/FieldNumber/fieldNumber.css | 10 ++- .../Fields/FieldSelect/FieldSelect.twig | 60 ++++++++-------- .../Fields/FieldSelect/fieldSelect.css | 13 ++-- 6 files changed, 77 insertions(+), 124 deletions(-) diff --git a/components/Molecules/Fields/FieldInput/FieldInput.stories.js b/components/Molecules/Fields/FieldInput/FieldInput.stories.js index ee41f60..856a742 100644 --- a/components/Molecules/Fields/FieldInput/FieldInput.stories.js +++ b/components/Molecules/Fields/FieldInput/FieldInput.stories.js @@ -39,36 +39,3 @@ export const Base = { } } }; - -export const WithButton = { - render: (args) => FieldInput(args), - play: () => { - fieldInputFunction(); - }, - args: { - name: 'promoCode', - type: 'text', - label: '', - placeholder: 'Code Promo', - min: '', - max: '', - error: '', - tooltip: '', - button: 'Appliquer' - }, - argTypes: { - disabled: { - control: { type: 'boolean' } - }, - required: { - control: { type: 'boolean' } - }, - success: { - control: { type: 'boolean' } - }, - size: { - options: ['large', 'small'], - control: { type: 'select' } - } - } -}; diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.twig index d7e2953..d0c0ea6 100644 --- a/components/Molecules/Fields/FieldInput/FieldInput.twig +++ b/components/Molecules/Fields/FieldInput/FieldInput.twig @@ -1,50 +1,42 @@ {% set classes = '' %} {% if error %} - {% set classes = classes ~ ' FieldInput--error' %} + {% set classes = classes ~ ' FieldInput--error' %} {% endif %} {% if success %} - {% set classes = classes ~ ' FieldInput--success' %} + {% set classes = classes ~ ' FieldInput--success' %} {% endif %} {% if size %} - {% set classes = classes ~ ' FieldInput--' ~ size %} + {% set classes = classes ~ ' FieldInput--' ~ size %} {% endif %} {% if button %} - {% set classes = classes ~ ' FieldInput--withButton' %} + {% set classes = classes ~ ' FieldInput--withButton' %} {% endif %} -
-
- - {% if tooltip %} - {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} - {% endif %} -
-
- - {% if unit %}{{ unit }}{% endif %} - {% if iconButton %} -
- -
- {% endif %} - {% if button %} -
- {% include '../../Button/Button.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %} -
- {% endif %} -
- {% if error %}{{ error }}{% endif %} +
+
+ + {# {% if tooltip %} + {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% endif %} #} +
+
+ + {% if unit %} + {{ unit }} + {% endif %} + {% if iconButton %} +
+ +
+ {% endif %} +
+ {% if error %} + {{ error }} + {% endif %}
diff --git a/components/Molecules/Fields/FieldInput/fieldInput.css b/components/Molecules/Fields/FieldInput/fieldInput.css index a2973be..6849ec6 100644 --- a/components/Molecules/Fields/FieldInput/fieldInput.css +++ b/components/Molecules/Fields/FieldInput/fieldInput.css @@ -9,7 +9,6 @@ } &-label { - @apply paragraph-5; color: var(--black); } @@ -25,8 +24,7 @@ } &-input { - @apply paragraph-4; - border: 1px solid var(--theme-medium); + border: 1px solid var(--vermillon-medium); border-radius: 8px; color: var(--black); width: 100%; @@ -34,16 +32,16 @@ transition: 0.2s ease all; &:hover { - background-color: var(--theme-lightest); + background-color: var(--vermillon-lightest); } &:focus-visible { outline-offset: 2px; - outline: 1px solid var(--theme); + outline: 1px solid var(--vermillon); } &--filled { - border-color: var(--theme); + border-color: var(--vermillon); } &--unit { @@ -59,9 +57,9 @@ display: flex; align-items: center; pointer-events: none; - font-size: var(--font-size-paragraph-4); - font-family: var(--font-family-paragraph-5); - line-height: var(--line-height-paragraph-4); + font-size: var(--font-size-paragraph-3); + font-family: var(--font-family-paragra3); + line-height: var(--line-height-paragraph-3); } &--small { @@ -98,7 +96,6 @@ } &-error { - @apply paragraph-5; color: var(--error-dark); font-style: italic; } diff --git a/components/Molecules/Fields/FieldNumber/fieldNumber.css b/components/Molecules/Fields/FieldNumber/fieldNumber.css index a26aff4..022e1a8 100644 --- a/components/Molecules/Fields/FieldNumber/fieldNumber.css +++ b/components/Molecules/Fields/FieldNumber/fieldNumber.css @@ -4,8 +4,7 @@ gap: rem-convert(4px); &-input { - @apply paragraph-4; - border: 1px solid var(--theme-medium); + border: 1px solid var(--vermillon-medium); border-radius: 8px; color: var(--black); padding: rem-convert(16px) rem-convert(10px); @@ -14,16 +13,16 @@ text-align: center; &:hover { - background-color: var(--theme-lightest); + background-color: var(--vermillon-lightest); } &:focus-visible { outline-offset: 2px; - outline: 1px solid var(--theme); + outline: 1px solid var(--vermillon); } &--filled { - border-color: var(--theme); + border-color: var(--vermillon); } } @@ -52,7 +51,6 @@ } &-error { - @apply paragraph-5; color: var(--error-dark); font-style: italic; } diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.twig index 64fdb96..f51655b 100644 --- a/components/Molecules/Fields/FieldSelect/FieldSelect.twig +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.twig @@ -1,38 +1,40 @@ {% set classes = '' %} {% if error %} - {% set classes = classes ~ ' FieldSelect--error' %} + {% set classes = classes ~ ' FieldSelect--error' %} {% endif %} {% if success %} - {% set classes = classes ~ ' FieldSelect--success' %} + {% set classes = classes ~ ' FieldSelect--success' %} {% endif %} {% if size %} - {% set classes = classes ~ ' FieldSelect--' ~ size %} + {% set classes = classes ~ ' FieldSelect--' ~ size %} {% endif %} -
-
- - {% if tooltip %} - {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} - {% endif %} -
- - {% if error %}{{ error }}{% endif %} +
+
+ + {# {% if tooltip %} + {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} + {% endif %} #} +
+ + {% if error %} + {{ error }} + {% endif %}
diff --git a/components/Molecules/Fields/FieldSelect/fieldSelect.css b/components/Molecules/Fields/FieldSelect/fieldSelect.css index 169730e..23aeca8 100644 --- a/components/Molecules/Fields/FieldSelect/fieldSelect.css +++ b/components/Molecules/Fields/FieldSelect/fieldSelect.css @@ -9,7 +9,6 @@ } &-label { - @apply paragraph-5; color: var(--black); } @@ -20,31 +19,30 @@ } &-select { - @apply paragraph-4; - border: 1px solid var(--theme-medium); + border: 1px solid var(--vermillon-medium); border-radius: 8px; color: var(--grey-dark); font-style: italic; width: 100%; padding: rem-convert(16px) rem-convert(10px); appearance: none; - background: url('/assets/icons/chevron-small-down.svg'); + background: url('/assets/icons/chevron-down.svg'); background-repeat: no-repeat; background-position: right 0 top 50%; background-size: rem-convert(40px) auto; transition: 0.2s ease all; &:hover { - background-color: var(--theme-lightest); + background-color: var(--vermillon-lightest); } &:focus-visible { outline-offset: 2px; - outline: 1px solid var(--theme); + outline: 1px solid var(--vermillon); } &--filled { - border-color: var(--theme); + border-color: var(--vermillon); color: var(--black); font-style: normal; } @@ -81,7 +79,6 @@ } &-error { - @apply paragraph-5; color: var(--error-dark); font-style: italic; } From 3dbceb76603fc7fea3865f301575d43492b2f978 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Wed, 10 Jul 2024 10:06:22 +0200 Subject: [PATCH 05/11] feat(fields): add tooltip --- components/Molecules/Fields/FieldInput/FieldInput.twig | 6 +++--- components/Molecules/Fields/FieldSelect/FieldSelect.twig | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.twig index d0c0ea6..f6dd261 100644 --- a/components/Molecules/Fields/FieldInput/FieldInput.twig +++ b/components/Molecules/Fields/FieldInput/FieldInput.twig @@ -21,9 +21,9 @@ * {% endif %} - {# {% if tooltip %} - {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} - {% endif %} #} + {% if tooltip %} + {% include '../../../Atoms/Tooltip/Tooltip-Icon.twig' with {text: tooltip, position: 'bottom'} %} + {% endif %}
diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.twig index f51655b..cc1481a 100644 --- a/components/Molecules/Fields/FieldSelect/FieldSelect.twig +++ b/components/Molecules/Fields/FieldSelect/FieldSelect.twig @@ -17,9 +17,9 @@ * {% endif %} - {# {% if tooltip %} - {% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %} - {% endif %} #} + {% if tooltip %} + {% include '../../../Atoms/Tooltip/Tooltip-Icon.twig' with {text: tooltip, position: 'bottom'} %} + {% endif %}
-
- {{ source("/icons/check.svg") }} -
- {{ label }} - \ No newline at end of file + diff --git a/components/Molecules/Form/Checkboxs.twig b/components/Molecules/Form/Checkboxs.twig index f9cc2c9..fc8b4ea 100644 --- a/components/Molecules/Form/Checkboxs.twig +++ b/components/Molecules/Form/Checkboxs.twig @@ -1,7 +1,5 @@
- {% 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'} - %} -
\ No newline at end of file + {% include './Checkbox.twig' with {name: "a", label: 'Unchecked',disabled: disabled, error:error} %} + {% include './Checkbox.twig' with {name: "b", label: 'Checked',disabled: disabled, error:error, checked:true} %} + {% include './Checkbox.twig' with {name: "c", label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'} %} +
diff --git a/components/Molecules/Form/Form.stories.js b/components/Molecules/Form/Form.stories.js index 121d466..a83c800 100644 --- a/components/Molecules/Form/Form.stories.js +++ b/components/Molecules/Form/Form.stories.js @@ -50,4 +50,4 @@ export const toggle = { control: { type: 'boolean' } } } -}; \ No newline at end of file +}; diff --git a/components/Molecules/Form/Radio.twig b/components/Molecules/Form/Radio.twig index ab9bd7c..5afe8b0 100644 --- a/components/Molecules/Form/Radio.twig +++ b/components/Molecules/Form/Radio.twig @@ -1,13 +1,6 @@ {% set type = type|default('label') %} -<{{ type }} class="Radio {{ classes|default('') }} {{ error|default(0) ? 'error' : ''}}"> - - - {{ label }} - \ No newline at end of file +<{{type}} class="Radio {{ classes|default('') }} {{ error|default(0) ? 'error' : ''}}" for='{{ name }}'> + + + {{ label }} + diff --git a/components/Molecules/Form/Radios.twig b/components/Molecules/Form/Radios.twig index 6beea27..7464fd0 100644 --- a/components/Molecules/Form/Radios.twig +++ b/components/Molecules/Form/Radios.twig @@ -1,5 +1,5 @@
- {% 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} %} -
\ No newline at end of file + {% include './Radio.twig' with {name:"a", label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %} + {% include './Radio.twig' with {name:"b", label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %} + {% include './Radio.twig' with {name:"c", label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %} + diff --git a/components/Molecules/Form/Toggle.twig b/components/Molecules/Form/Toggle.twig index 76bc8ab..9f8d539 100644 --- a/components/Molecules/Form/Toggle.twig +++ b/components/Molecules/Form/Toggle.twig @@ -1,18 +1,12 @@ - \ No newline at end of file + From 40aa14baf82decffddac2097d0520413f94fc022 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Wed, 10 Jul 2024 10:29:35 +0200 Subject: [PATCH 07/11] feat(forms): remove name on toggles --- components/Molecules/Form/Toggle.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Molecules/Form/Toggle.twig b/components/Molecules/Form/Toggle.twig index 9f8d539..65facd9 100644 --- a/components/Molecules/Form/Toggle.twig +++ b/components/Molecules/Form/Toggle.twig @@ -1,4 +1,4 @@ -