From 92dd5d9e9eadf958cf48a72d4cc330cbf877d448 Mon Sep 17 00:00:00 2001 From: Artem Chekhovych Date: Tue, 3 May 2022 17:53:32 +0300 Subject: [PATCH] select-error-label--basic-components --- .../atoms/error-message/_a-error-message.css | 36 ++++ .../atoms/error-message/_variables.css | 107 +++++++++++ .../error-message/a-error-message.html.twig | 1 + .../atoms/error-message/a-error-message.json | 5 + .../atoms/error-message/a-error-message.md | 3 + .../error-message/a-error-message.stories.js | 28 +++ .../atoms/error-message/error-message.css | 17 ++ .../atoms/label/_a-label.css | 15 ++ .../atoms/label/_variables.css | 107 +++++++++++ .../atoms/label/a-label.html.twig | 1 + .../atoms/label/a-label.json | 5 + .../atoms/label/a-label.md | 3 + .../atoms/label/a-label.stories.js | 32 ++++ .../atoms/label/label.css | 13 ++ .../atoms/select/_a-select.css | 173 ++++++++++++++++++ .../atoms/select/_variables.css | 107 +++++++++++ .../atoms/select/a-select.html.twig | 27 +++ .../atoms/select/a-select.js | 36 ++++ .../atoms/select/a-select.json | 65 +++++++ .../atoms/select/a-select.md | 3 + .../atoms/select/a-select.stories.js | 129 +++++++++++++ .../atoms/select/package.json | 9 + .../atoms/select/select.css | 122 ++++++++++++ .../atoms/select/select_external.css | 1 + 24 files changed, 1045 insertions(+) create mode 100644 packages/kaizen-basic-components/atoms/error-message/_a-error-message.css create mode 100644 packages/kaizen-basic-components/atoms/error-message/_variables.css create mode 100644 packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig create mode 100644 packages/kaizen-basic-components/atoms/error-message/a-error-message.json create mode 100644 packages/kaizen-basic-components/atoms/error-message/a-error-message.md create mode 100644 packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js create mode 100644 packages/kaizen-basic-components/atoms/error-message/error-message.css create mode 100644 packages/kaizen-basic-components/atoms/label/_a-label.css create mode 100644 packages/kaizen-basic-components/atoms/label/_variables.css create mode 100644 packages/kaizen-basic-components/atoms/label/a-label.html.twig create mode 100644 packages/kaizen-basic-components/atoms/label/a-label.json create mode 100644 packages/kaizen-basic-components/atoms/label/a-label.md create mode 100644 packages/kaizen-basic-components/atoms/label/a-label.stories.js create mode 100644 packages/kaizen-basic-components/atoms/label/label.css create mode 100755 packages/kaizen-basic-components/atoms/select/_a-select.css create mode 100644 packages/kaizen-basic-components/atoms/select/_variables.css create mode 100755 packages/kaizen-basic-components/atoms/select/a-select.html.twig create mode 100755 packages/kaizen-basic-components/atoms/select/a-select.js create mode 100755 packages/kaizen-basic-components/atoms/select/a-select.json create mode 100755 packages/kaizen-basic-components/atoms/select/a-select.md create mode 100755 packages/kaizen-basic-components/atoms/select/a-select.stories.js create mode 100644 packages/kaizen-basic-components/atoms/select/package.json create mode 100755 packages/kaizen-basic-components/atoms/select/select.css create mode 100644 packages/kaizen-basic-components/atoms/select/select_external.css diff --git a/packages/kaizen-basic-components/atoms/error-message/_a-error-message.css b/packages/kaizen-basic-components/atoms/error-message/_a-error-message.css new file mode 100644 index 0000000..dc10d85 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/_a-error-message.css @@ -0,0 +1,36 @@ +%a-error-message { + display: block; + letter-spacing: initial; + text-transform: none; + color: var(--color-secondary-4); + font-size: var(--font-size--xxs); + font-weight: var(--font-weight--medium); + line-height: var(--line-height--base); + + &__ul { + margin-top: 0; + margin-bottom: 0; + } + + &--top { + padding-top: 0; + padding-bottom: 0.5rem; + } + + &--bottom { + padding-top: 0.5rem; + padding-bottom: 0; + } + + &__link { + color: var(--color-secondary-4); + + &--hover { + color: var(--color-text); + + &--light { + color: var(--color-grey-utility-color); + } + } + } +} diff --git a/packages/kaizen-basic-components/atoms/error-message/_variables.css b/packages/kaizen-basic-components/atoms/error-message/_variables.css new file mode 100644 index 0000000..ee4ad53 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/_variables.css @@ -0,0 +1,107 @@ +/* Variables just for example. */ + +:root { + --color-primary: #0e4e95; + --color-primary-2: #126ae1; + --color-primary-3: #f3f7fa; + --color-primary-4: #566069; + --color-primary-5: #29b9e8; + --color-secondary: #43b0b1; + --color-secondary-2: #56ccf2; + --color-secondary-3: #f26f21; + --color-secondary-4: #c52254; + --color-secondary-5: #f2f2f2; + + /* Not pallet colors */ + --color-secondary-6: #008dbf; + --color-secondary-7: #e4e4e4; + --color-black: #000; + --color-white: #fff; + --color-border: var(--color-secondary-7); + --color-grey-utility-color: #cfd7db; + + /* Disabled colors */ + --color-primary-disabled: #a1d7d8; + --color-secondary-disabled: #88b4f0; + --color-bg: var(--color-white); + --color-text: var(--color-primary-4); + --color-disabled: var(--color-primary-4); /* old #8ca6c7 */ + --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */ + --window-height: 100vh; + --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */ + --root-font-size--default: 100%; + --root-font-size--medium: calc(16 * (1vw / 14.4)); + --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */ + /* font-sizes */ + --font-size--xxxxxl: 48px; + --font-size--xxxxl: 40px; + --font-size--xxxl: 36px; + --font-size--xxl: 30px; + --font-size--xl: 24px; + --font-size--m: 20px; + --font-size--l: 18px; + --font-size--base: 16px; + --font-size--s: 14px; + --font-size--xs: 13px; + --font-size--xxs: 12px; + --font-size--xxxs: 11px; + /* font families */ + --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + /* font-weight */ + --font-weight--base: var(--font-weight--regular); + --font-weight--regular: 400; + --font-weight--medium: 500; + --font-weight--bold: 700; + /* line height */ + --line-height--xxxxl: 2.25; + --line-height--xxxl: 2; + --line-height--xxl: 1.75; + --line-height--xl: 1.7; + --line-height--l: 1.6; + --line-height--base: 1.5; + --line-height--s: 1.385; + --line-height--xs: 1.333; + --line-height--xxs: 1.25; + --line-height--xxxm: 1.14; + --line-height--xxxs: 1.1667; + --line-height--xxxxs: 1; + /* letter-spacing */ + --letter-spacing--xl: 1.4px; + --letter-spacing--l: 0.05rem; /* 0.8px */ + --letter-spacing--s: 0.04063rem; /* 0.65px */ + /* site sizes */ + --site-max-width: 1920px; /* 1920px */ + --content-max-width: 1264px; /* 1216px + 48 padding */ + --content-max-width--mobile: 768px; + --content-max-width--w: 1488px; + --content-max-width--ls: 1056px; /* 1008px + 48 padding */ + --content-max-width--s: 53rem; /* 800px + 48 padding */ + --content-max-width--xs: 46.5rem; + --mobile-header-height: 64px; + --desktop-sticky-main-menu-height: 59px; + /* container */ + --container-padding: 24px; + /* z-index */ + --z-index-header: 500; + --z-index-header-bottom: 510; + --z-index-header-top: 515; + --z-index-sticky: 520; + --z-index-modal: 600; + --z-index-selects: 700; + --z-index-dialog-overlay: 799; + --z-index-dialog: 800; + /* transitions */ + --transition-duration: 0.3s; + --transition-timing-function: ease; + --transition-hover: var(--transition-duration) var(--transition-timing-function); + --transition-collapse: var(--transition-duration) var(--transition-timing-function); + /* border-radius */ + --border-radius-circle: 50%; + --border-radius-xl: 8px; + --border-radius-base: 4px; + --border-radius-s: 3px; + --border-radius-xs: 2px; + /* other */ + --input-height: 48px; + --input-secondary-height: 48px; +} diff --git a/packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig b/packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig new file mode 100644 index 0000000..9beeef7 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/a-error-message.html.twig @@ -0,0 +1 @@ +
{{ text }}
diff --git a/packages/kaizen-basic-components/atoms/error-message/a-error-message.json b/packages/kaizen-basic-components/atoms/error-message/a-error-message.json new file mode 100644 index 0000000..1453c3d --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/a-error-message.json @@ -0,0 +1,5 @@ +{ + "content": { + "error_text": "Error message" + } +} diff --git a/packages/kaizen-basic-components/atoms/error-message/a-error-message.md b/packages/kaizen-basic-components/atoms/error-message/a-error-message.md new file mode 100644 index 0000000..fcd395e --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/a-error-message.md @@ -0,0 +1,3 @@ +# Atom / Error message + +Error message diff --git a/packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js b/packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js new file mode 100644 index 0000000..e241071 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/a-error-message.stories.js @@ -0,0 +1,28 @@ +import './_variables.css'; +import './error-message.css'; +import drupalAttribute from 'drupal-attribute'; +import componentNotes from './a-error-message.md'; + +const template = require('./a-error-message.html.twig'); +const data = require('./a-error-message.json'); + +const component = { + title: 'atoms/error message', +}; + +if (componentNotes.length) { + component.parameters = { notes: componentNotes }; +} + +export default component; + +export const basic = ({ + modifier_class = '', + text = '', + }) => { + const normailzedText = !text ? data.content.error_text : text; + data.attributes = new drupalAttribute(); + data.attributes.addClass(modifier_class); + data.text = normailzedText; + return template(data); +}; diff --git a/packages/kaizen-basic-components/atoms/error-message/error-message.css b/packages/kaizen-basic-components/atoms/error-message/error-message.css new file mode 100644 index 0000000..e5edc17 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/error-message/error-message.css @@ -0,0 +1,17 @@ +@import "_a-error-message"; + +.a-error-message { + @extend %a-error-message; + + a { + @extend %a-error-message__link; + + &:hover { + @extend %a-error-message__link--hover; + } + } + + ul { + @extend %a-error-message__ul; + } +} diff --git a/packages/kaizen-basic-components/atoms/label/_a-label.css b/packages/kaizen-basic-components/atoms/label/_a-label.css new file mode 100644 index 0000000..6832e04 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/_a-label.css @@ -0,0 +1,15 @@ +%a-label { + letter-spacing: 0.05em; + text-transform: uppercase; + font-size: var(--font-size--xs); + font-weight: var(--font-weight--medium); + line-height: var(--line-height--xxs); + + &--required { + display: inline-block; + width: 6px; + height: 6px; + margin: 0 0.3em; + content: "*"; + } +} diff --git a/packages/kaizen-basic-components/atoms/label/_variables.css b/packages/kaizen-basic-components/atoms/label/_variables.css new file mode 100644 index 0000000..ee4ad53 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/_variables.css @@ -0,0 +1,107 @@ +/* Variables just for example. */ + +:root { + --color-primary: #0e4e95; + --color-primary-2: #126ae1; + --color-primary-3: #f3f7fa; + --color-primary-4: #566069; + --color-primary-5: #29b9e8; + --color-secondary: #43b0b1; + --color-secondary-2: #56ccf2; + --color-secondary-3: #f26f21; + --color-secondary-4: #c52254; + --color-secondary-5: #f2f2f2; + + /* Not pallet colors */ + --color-secondary-6: #008dbf; + --color-secondary-7: #e4e4e4; + --color-black: #000; + --color-white: #fff; + --color-border: var(--color-secondary-7); + --color-grey-utility-color: #cfd7db; + + /* Disabled colors */ + --color-primary-disabled: #a1d7d8; + --color-secondary-disabled: #88b4f0; + --color-bg: var(--color-white); + --color-text: var(--color-primary-4); + --color-disabled: var(--color-primary-4); /* old #8ca6c7 */ + --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */ + --window-height: 100vh; + --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */ + --root-font-size--default: 100%; + --root-font-size--medium: calc(16 * (1vw / 14.4)); + --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */ + /* font-sizes */ + --font-size--xxxxxl: 48px; + --font-size--xxxxl: 40px; + --font-size--xxxl: 36px; + --font-size--xxl: 30px; + --font-size--xl: 24px; + --font-size--m: 20px; + --font-size--l: 18px; + --font-size--base: 16px; + --font-size--s: 14px; + --font-size--xs: 13px; + --font-size--xxs: 12px; + --font-size--xxxs: 11px; + /* font families */ + --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + /* font-weight */ + --font-weight--base: var(--font-weight--regular); + --font-weight--regular: 400; + --font-weight--medium: 500; + --font-weight--bold: 700; + /* line height */ + --line-height--xxxxl: 2.25; + --line-height--xxxl: 2; + --line-height--xxl: 1.75; + --line-height--xl: 1.7; + --line-height--l: 1.6; + --line-height--base: 1.5; + --line-height--s: 1.385; + --line-height--xs: 1.333; + --line-height--xxs: 1.25; + --line-height--xxxm: 1.14; + --line-height--xxxs: 1.1667; + --line-height--xxxxs: 1; + /* letter-spacing */ + --letter-spacing--xl: 1.4px; + --letter-spacing--l: 0.05rem; /* 0.8px */ + --letter-spacing--s: 0.04063rem; /* 0.65px */ + /* site sizes */ + --site-max-width: 1920px; /* 1920px */ + --content-max-width: 1264px; /* 1216px + 48 padding */ + --content-max-width--mobile: 768px; + --content-max-width--w: 1488px; + --content-max-width--ls: 1056px; /* 1008px + 48 padding */ + --content-max-width--s: 53rem; /* 800px + 48 padding */ + --content-max-width--xs: 46.5rem; + --mobile-header-height: 64px; + --desktop-sticky-main-menu-height: 59px; + /* container */ + --container-padding: 24px; + /* z-index */ + --z-index-header: 500; + --z-index-header-bottom: 510; + --z-index-header-top: 515; + --z-index-sticky: 520; + --z-index-modal: 600; + --z-index-selects: 700; + --z-index-dialog-overlay: 799; + --z-index-dialog: 800; + /* transitions */ + --transition-duration: 0.3s; + --transition-timing-function: ease; + --transition-hover: var(--transition-duration) var(--transition-timing-function); + --transition-collapse: var(--transition-duration) var(--transition-timing-function); + /* border-radius */ + --border-radius-circle: 50%; + --border-radius-xl: 8px; + --border-radius-base: 4px; + --border-radius-s: 3px; + --border-radius-xs: 2px; + /* other */ + --input-height: 48px; + --input-secondary-height: 48px; +} diff --git a/packages/kaizen-basic-components/atoms/label/a-label.html.twig b/packages/kaizen-basic-components/atoms/label/a-label.html.twig new file mode 100644 index 0000000..51879c7 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/a-label.html.twig @@ -0,0 +1 @@ + diff --git a/packages/kaizen-basic-components/atoms/label/a-label.json b/packages/kaizen-basic-components/atoms/label/a-label.json new file mode 100644 index 0000000..0669e9c --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/a-label.json @@ -0,0 +1,5 @@ +{ + "content": { + "label_text": "Input label text" + } +} diff --git a/packages/kaizen-basic-components/atoms/label/a-label.md b/packages/kaizen-basic-components/atoms/label/a-label.md new file mode 100644 index 0000000..55104a6 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/a-label.md @@ -0,0 +1,3 @@ +# Atom / Input label + +Input label diff --git a/packages/kaizen-basic-components/atoms/label/a-label.stories.js b/packages/kaizen-basic-components/atoms/label/a-label.stories.js new file mode 100644 index 0000000..bcd5144 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/a-label.stories.js @@ -0,0 +1,32 @@ +import './_variables.css'; +import './label.css'; +import drupalAttribute from 'drupal-attribute'; +import componentNotes from './a-label.md'; + +const template = require('./a-label.html.twig'); +const data = require('./a-label.json'); + +const component = { + title: 'atoms/label', +}; + +if (componentNotes.length) { + component.parameters = { notes: componentNotes }; +} + +export default component; + +export const basic = (args = {}) => { + const modifier_class = args ? args.modifier_class : ''; + const text = args ? args.text : ''; + const label_for = args ? args.label_for : ''; + const normailzedText = !text ? data.content.label_text : text; + data.attributes = new drupalAttribute(); + data.attributes.addClass('a-label'); + data.attributes.addClass(modifier_class); + data.text = normailzedText; + if (label_for) { + data.attributes.setAttribute('for', label_for); + } + return template(data); +}; diff --git a/packages/kaizen-basic-components/atoms/label/label.css b/packages/kaizen-basic-components/atoms/label/label.css new file mode 100644 index 0000000..bd2aa12 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/label/label.css @@ -0,0 +1,13 @@ +@import "_a-label"; + +.a-label { + @extend %a-label; + + &--secondary { + @extend %a-label--secondary; + } + + &.form-required::after { + @extend %a-label--required; + } +} diff --git a/packages/kaizen-basic-components/atoms/select/_a-select.css b/packages/kaizen-basic-components/atoms/select/_a-select.css new file mode 100755 index 0000000..6b34ce4 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/_a-select.css @@ -0,0 +1,173 @@ +%a-select { + &__wrapper { + &--inline { + display: block; + + @db l { + display: flex; + align-items: center; + } + } + } + + &__content { + flex: 1; + } + + &__container { + width: 100%; + margin: 0; + } + + &__angle { + display: inline-block; + margin-top: -0.125rem; + padding: 0.25rem; + content: ""; + transition: transform var(--transition-hover); + transform: rotate(45deg); + border: solid var(--color-primary-4); + border-width: 0 2px 2px 0; + + &--disabled { + border-color: var(--color-grey-utility-color); + } + + &--hover { + border-color: var(--color-primary-2); + } + + &--open { + margin-top: 0.125rem; + transform: rotate(-135deg); + border-color: var(--color-primary-2); + } + } + + &__button { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: var(--input-height); + padding: 16px; + transition: background-color var(--transition-hover), border-color var(--transition-hover); + color: var(--color-primary-4); + border: 1px solid var(--color-grey-utility-color); + border-radius: var(--border-radius-s); + background-color: var(--color-bg); + font-family: var(--font-family--base); + font-size: var(--font-size--s); + font-weight: var(--font-weight--base); + line-height: var(--line-height--xxxs); + gap: 10px; + + @db l { + font-size: var(--font-size--base); + } + + &--disabled { + cursor: not-allowed; + color: var(--color-grey-utility-color); + border-color: var(--color-secondary-5); + background-color: var(--color-secondary-5); + } + + &--error { + padding: 15px; + color: var(--color-secondary-4); + border-width: 2px; + border-color: var(--color-secondary-4); + } + + &--hover { + border-color: var(--color-primary-4); + background-color: var(--color-primary-3); + } + + &--focus { + outline: 2px solid var(--color-primary-2); + background-color: var(--color-bg); + } + + &--open { + border-color: var(--color-primary-2); + border-bottom: 1px solid transparent; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + outline: none; + + &--flipped { + border-color: var(--color-primary-2); + border-bottom: 1px solid var(--color-primary-2); + border-radius: 0 0 var(--border-radius-s) var(--border-radius-s); + } + } + + &--secondary { + height: var(--input-secondary-height); + font-weight: var(--font-weight--medium); + } + } + + &__button-content { + width: calc(100% - 24px); + } + + &__button-content-text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__dropdown { + z-index: var(--z-index-selects); + } + + &__list { + max-height: calc((24px + var(--font-size--s) * var(--line-height--base)) * 5); + + @db l { + max-height: calc((24px + var(--font-size--base) * var(--line-height--base)) * 5); + } + } + + &__label { + display: flex; + margin-bottom: 0.5rem; + + &--inline { + flex-shrink: 0; + margin-right: 0; + + @db l { + margin-right: 19px; + margin-bottom: 0; + } + } + } + + &__link { + padding: 12px 16px; + transition: color var(--transition-hover), background-color var(--transition-hover); + color: var(--color-primary-4); + background-color: var(--color-bg); + font-family: var(--font-family--base); + font-size: var(--font-size--s); + font-weight: var(--font-weight--base); + line-height: var(--line-height--base); + + @db l { + font-size: var(--font-size--base); + } + + &--hover { + color: var(--color-primary); + } + + &--selected { + color: var(--color-primary); + background-color: var(--color-primary-3); + } + } +} diff --git a/packages/kaizen-basic-components/atoms/select/_variables.css b/packages/kaizen-basic-components/atoms/select/_variables.css new file mode 100644 index 0000000..ee4ad53 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/_variables.css @@ -0,0 +1,107 @@ +/* Variables just for example. */ + +:root { + --color-primary: #0e4e95; + --color-primary-2: #126ae1; + --color-primary-3: #f3f7fa; + --color-primary-4: #566069; + --color-primary-5: #29b9e8; + --color-secondary: #43b0b1; + --color-secondary-2: #56ccf2; + --color-secondary-3: #f26f21; + --color-secondary-4: #c52254; + --color-secondary-5: #f2f2f2; + + /* Not pallet colors */ + --color-secondary-6: #008dbf; + --color-secondary-7: #e4e4e4; + --color-black: #000; + --color-white: #fff; + --color-border: var(--color-secondary-7); + --color-grey-utility-color: #cfd7db; + + /* Disabled colors */ + --color-primary-disabled: #a1d7d8; + --color-secondary-disabled: #88b4f0; + --color-bg: var(--color-white); + --color-text: var(--color-primary-4); + --color-disabled: var(--color-primary-4); /* old #8ca6c7 */ + --color-disabled-bg: var(--color-secondary-5); /* old #f3f6f9 */ + --window-height: 100vh; + --base-root-font-mobile: 4.278vw; /* Mobile design width is 375px, so everything below should be scaled proportionally */ + --root-font-size--default: 100%; + --root-font-size--medium: calc(16 * (1vw / 14.4)); + --root-font-size--large: calc(16 * (1vw / 14.4)); /* 16 on 1440 and 21.3 on 1920 */ + /* font-sizes */ + --font-size--xxxxxl: 48px; + --font-size--xxxxl: 40px; + --font-size--xxxl: 36px; + --font-size--xxl: 30px; + --font-size--xl: 24px; + --font-size--m: 20px; + --font-size--l: 18px; + --font-size--base: 16px; + --font-size--s: 14px; + --font-size--xs: 13px; + --font-size--xxs: 12px; + --font-size--xxxs: 11px; + /* font families */ + --font-family--base: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + /* font-weight */ + --font-weight--base: var(--font-weight--regular); + --font-weight--regular: 400; + --font-weight--medium: 500; + --font-weight--bold: 700; + /* line height */ + --line-height--xxxxl: 2.25; + --line-height--xxxl: 2; + --line-height--xxl: 1.75; + --line-height--xl: 1.7; + --line-height--l: 1.6; + --line-height--base: 1.5; + --line-height--s: 1.385; + --line-height--xs: 1.333; + --line-height--xxs: 1.25; + --line-height--xxxm: 1.14; + --line-height--xxxs: 1.1667; + --line-height--xxxxs: 1; + /* letter-spacing */ + --letter-spacing--xl: 1.4px; + --letter-spacing--l: 0.05rem; /* 0.8px */ + --letter-spacing--s: 0.04063rem; /* 0.65px */ + /* site sizes */ + --site-max-width: 1920px; /* 1920px */ + --content-max-width: 1264px; /* 1216px + 48 padding */ + --content-max-width--mobile: 768px; + --content-max-width--w: 1488px; + --content-max-width--ls: 1056px; /* 1008px + 48 padding */ + --content-max-width--s: 53rem; /* 800px + 48 padding */ + --content-max-width--xs: 46.5rem; + --mobile-header-height: 64px; + --desktop-sticky-main-menu-height: 59px; + /* container */ + --container-padding: 24px; + /* z-index */ + --z-index-header: 500; + --z-index-header-bottom: 510; + --z-index-header-top: 515; + --z-index-sticky: 520; + --z-index-modal: 600; + --z-index-selects: 700; + --z-index-dialog-overlay: 799; + --z-index-dialog: 800; + /* transitions */ + --transition-duration: 0.3s; + --transition-timing-function: ease; + --transition-hover: var(--transition-duration) var(--transition-timing-function); + --transition-collapse: var(--transition-duration) var(--transition-timing-function); + /* border-radius */ + --border-radius-circle: 50%; + --border-radius-xl: 8px; + --border-radius-base: 4px; + --border-radius-s: 3px; + --border-radius-xs: 2px; + /* other */ + --input-height: 48px; + --input-secondary-height: 48px; +} diff --git a/packages/kaizen-basic-components/atoms/select/a-select.html.twig b/packages/kaizen-basic-components/atoms/select/a-select.html.twig new file mode 100755 index 0000000..81ab6b5 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/a-select.html.twig @@ -0,0 +1,27 @@ +{% spaceless %} +
+ {% if content.label %} + + {% endif %} + +
+ + + {% if error %} + {{ content.error_message }} + {% endif %} +
+
+{% endspaceless %} diff --git a/packages/kaizen-basic-components/atoms/select/a-select.js b/packages/kaizen-basic-components/atoms/select/a-select.js new file mode 100755 index 0000000..72294b0 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/a-select.js @@ -0,0 +1,36 @@ +/** + * @file + * This is component sctipt template. + */ +import Choices from 'choices.js'; + +export default ({ + className = 'a-select', + classNameProcessed = `${className}--processed`, + context = document, + options = { + searchEnabled: false, + itemSelectText: '', + shouldSort: false, + classNames: { + containerOuter: 'choices a-select__container', + containerInner: 'a-select__button', + listSingle: 'a-select__button-content', + listDropdown: 'a-select__dropdown', + itemChoice: 'a-select__link', + }, + }, +} = {}) => { + const items = context.querySelectorAll( + `.${className}:not(.${classNameProcessed})`, + ); + + items.forEach((el) => { + options = { + ...options, + }; + // eslint-disable-next-line no-unused-vars + const select = new Choices(el, options); + el.classList.add(classNameProcessed); + }); +}; diff --git a/packages/kaizen-basic-components/atoms/select/a-select.json b/packages/kaizen-basic-components/atoms/select/a-select.json new file mode 100755 index 0000000..cd20037 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/a-select.json @@ -0,0 +1,65 @@ +{ + "content": { + "id": 1, + "placeholder": "Placeholder text" + }, + "options": [ + { + "type": "option", + "value": "option text 1", + "label": "option label 1" + }, + { + "type": "option", + "value": "option text 2", + "label": "option label 2" + }, + { + "type": "option", + "value": "option text 3", + "label": "option label 3" + }, + { + "type": "option", + "value": "option text 4", + "label": "option label 4" + }, + { + "type": "option", + "value": "option text 5", + "label": "option label 5" + }, + { + "type": "option", + "value": "option text 6", + "label": "option label 6" + }, + { + "type": "option", + "value": "option text 7", + "label": "option label 7" + }, + { + "type": "option", + "value": "option text 8", + "label": "option label 8" + } + ], + "optionsLanguage": [ + { + "type": "option", + "value": "English", + "label": "English" + }, + { + "type": "option", + "value": "Français", + "label": "Français" + }, + { + "type": "option", + "value": "体中文", + "label": "体中文" + } + ] +} diff --git a/packages/kaizen-basic-components/atoms/select/a-select.md b/packages/kaizen-basic-components/atoms/select/a-select.md new file mode 100755 index 0000000..a49567d --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/a-select.md @@ -0,0 +1,3 @@ +# Atom / Select + +Input select diff --git a/packages/kaizen-basic-components/atoms/select/a-select.stories.js b/packages/kaizen-basic-components/atoms/select/a-select.stories.js new file mode 100755 index 0000000..d66ad29 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/a-select.stories.js @@ -0,0 +1,129 @@ +import './_variables.css'; +import './select_external.css'; +import './select.css'; +import drupalAttribute from 'drupal-attribute'; +import { useEffect, useState, useRef } from '@storybook/client-api'; +import componentNotes from './a-select.md'; +import script from './a-select'; +import { basic as label } from '../label/a-label.stories'; +import { basic as error_message } from '../error-message/a-error-message.stories'; + +const template = require('./a-select.html.twig'); +const data = require('./a-select.json'); + +function useEffectOnUpdate( + update = () => {}, + dependecies = null +) { + const isFirstRun = useRef(true); + + useEffect(() => { + if (!isFirstRun.current) { + update(); + } else { + isFirstRun.current = false; + } + }, dependecies); +} + +export default { + title: 'atoms/select', + parameters: { notes: componentNotes }, + argTypes: { + disabled: { + options: [true], + control: { type: 'check' }, + }, + error: { + options: [true], + control: { type: 'check' }, + }, + inlineLabel: { + options: [true], + control: { type: 'check' }, + }, + }, +}; + +export const basic = (args = {}) => { + useEffect(() => { + script(); + }, []); + + useEffectOnUpdate(() => { + script(); + }); + + const placeholderText = !args.placeholder + ? data.content.placeholder + : args.placeholder; + const idNormalized = !args.id ? `a-select-${data.content.id}` : args.id; + data.wrapper_attributes = new drupalAttribute(); + data.label_attributes = new drupalAttribute(); + data.select_attributes = new drupalAttribute(); + + data.wrapper_attributes + .addClass('a-select__wrapper') + .addClass(args.wrapper_modifier_class); + data.label_attributes + .setAttribute('for', idNormalized) + .addClass('a-select__label'); + data.select_attributes + .setAttribute('id', idNormalized) + .addClass(args.modifier_class); + + if (args.disabled && args.disabled[0]) { + data.select_attributes + .setAttribute('disabled') + .addClass('a-select--disabled'); + data.wrapper_attributes.addClass('a-select__wrapper-disabled'); + } else { + data.select_attributes + .removeAttribute('disabled') + .removeClass('a-select--disabled'); + data.wrapper_attributes.removeClass('a-select__wrapper-disabled'); + } + + if (args.error && args.error[0]) { + data.error = true; + data.select_attributes.addClass('a-select--error'); + data.wrapper_attributes.addClass('a-select__wrapper-error'); + } else { + data.error = false; + data.select_attributes.removeClass('a-select--error'); + data.wrapper_attributes.removeClass('a-select__wrapper-error'); + } + + if (args.error_message_text) { + data.content.error_message = `${error_message({ + text: args.error_message_text, + })}`; + } else { + data.content.error_message = `${error_message({})}`; + } + + if (args.inlineLabel && args.inlineLabel[0]) { + data.wrapper_attributes.addClass('a-select__wrapper--inline'); + } else { + data.wrapper_attributes.removeClass('a-select__wrapper--inline'); + } + + if (!args.hideLabel) { + if (args.label_text) { + data.content.label = `${label({ + text: args.label_text, + modifier_class: args.label_modifierClass, + })}`; + } else { + data.content.label = `${label({ + modifier_class: args.label_modifierClass, + })}`; + } + } + const options = args.options || data.options; + return template({ + ...data, + options: [...options], + }); +}; + diff --git a/packages/kaizen-basic-components/atoms/select/package.json b/packages/kaizen-basic-components/atoms/select/package.json new file mode 100644 index 0000000..45343a8 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/package.json @@ -0,0 +1,9 @@ +{ + "name": "@themetest/components", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "dependencies": { + "choices.js": "^10.1.0" + } +} diff --git a/packages/kaizen-basic-components/atoms/select/select.css b/packages/kaizen-basic-components/atoms/select/select.css new file mode 100755 index 0000000..c49bef3 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/select.css @@ -0,0 +1,122 @@ +@import "_a-select"; +@import "../error-message/_a-error-message"; + +.a-select { + &__wrapper { + &--inline { + @extend %a-select__wrapper--inline; + } + + .a-error-message { + @extend %a-error-message--top; + } + } + + &__button { + @extend %a-select__button; + + &:after { + @extend %a-select__angle; + } + + &:hover { + @extend %a-select__button--hover; + + &:after { + @extend %a-select__angle--hover; + } + } + + .is-focused & { + @extend %a-select__button--focus; + } + + .is-open & { + @extend %a-select__button--open; + + &:after { + @extend %a-select__angle--open; + } + } + + .is-open.is-flipped & { + @extend %a-select__button--open--flipped; + } + + .is-disabled &, + .is-disabled &:hover { + @extend %a-select__button--disabled; + + &:after { + @extend %a-select__angle--disabled; + } + } + + .a-select__wrapper-error & { + @extend %a-select__button--error; + } + } + + &__button-content { + @extend %a-select__button-content; + + .choices__item, + .choices__item--selectable { + @extend %a-select__button-content-text; + } + } + + &__dropdown { + @extend %a-select__dropdown; + + &, + &[aria-expanded] { + .choices__list { + @extend %a-select__list; + } + } + } + + &__label { + @extend %a-select__label; + + .a-select__wrapper--inline & { + @extend %a-select__label--inline; + } + } + + &__link { + &, + .a-select__dropdown[aria-expanded] & { + @extend %a-select__link; + + &.is-selected { + @extend %a-select__link--selected; + } + + &:hover { + @extend %a-select__link--hover; + } + } + } + + &__content { + @extend %a-select__content; + } + + &__container { + @extend %a-select__container; + + &[data-type*=select-one]:after { + display: none; + } + + & ~ .a-error-message { + @extend %a-error-message--bottom; + } + } +} + +.choices[data-type*=select-one]:after { + display: none; +} diff --git a/packages/kaizen-basic-components/atoms/select/select_external.css b/packages/kaizen-basic-components/atoms/select/select_external.css new file mode 100644 index 0000000..e46bc89 --- /dev/null +++ b/packages/kaizen-basic-components/atoms/select/select_external.css @@ -0,0 +1 @@ +@import "choices.js/public/assets/styles/choices.min.css";