From e406a333c5932e34f84645e06bcb03d96a88a264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Wed, 15 Nov 2023 11:59:36 +0100 Subject: [PATCH] Feat(web): Introduce Item component #DS-1047 --- .../web/src/scss/components/Item/README.md | 91 +++++++++++++- .../web/src/scss/components/Item/_Item.scss | 85 +++++++++++++ .../web/src/scss/components/Item/_theme.scss | 21 ++++ .../web/src/scss/components/Item/index.html | 115 ++++++++++++++++++ .../web/src/scss/components/Item/index.scss | 1 + packages/web/src/scss/components/index.scss | 1 + 6 files changed, 309 insertions(+), 5 deletions(-) create mode 100644 packages/web/src/scss/components/Item/_Item.scss create mode 100644 packages/web/src/scss/components/Item/_theme.scss create mode 100644 packages/web/src/scss/components/Item/index.scss diff --git a/packages/web/src/scss/components/Item/README.md b/packages/web/src/scss/components/Item/README.md index a10bfda422..1065348b9c 100644 --- a/packages/web/src/scss/components/Item/README.md +++ b/packages/web/src/scss/components/Item/README.md @@ -1,10 +1,88 @@ # Item -The Item component is used to display a single item in a list. Currently we support -two types of item content: Radio and Checkbox. In order to unify and simplify -API of these components and also to avoid repeating ourselves, we use Item as their modifier. +The Item component is used to display a single item in a list. It can be used in Dropdown or similar. +To use Item with checkbox or radio please use components [Checkbox][checkbox] or [Radio][radio] +with `item` modifier. We do this to avoid repeating the same code and to simplify the API. -So, to create an Item of Radio content, you need to add `Radio--item` modifier class. +Simple Item example: + +```html +
+ Item +
+``` + +Item with icon example: + +```html +
+ + + + Item +
+``` + +Item in selected state example: + +```html +
+ Item + + + +
+``` + +Item with Helper text example: + +```html +
+ Item + Helper text +
+``` + +Item in disabled state example: + +```html +
+ Item +
+``` + +Item with icon and helper text in selected state example: + +```html +
+ + + + Item + Helper text + + + +
+``` + +Item as a link example: + +```html + + Item + +``` + +Item as a Radio: ```html ``` -And to create an Item of Checkbox content, you need to add `Checkbox--item` modifier class. +Item as a Checkbox: ```html ``` + +[checkbox]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Checkbox/README.md +[radio]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Radio/README.md diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss new file mode 100644 index 0000000000..1955c3488d --- /dev/null +++ b/packages/web/src/scss/components/Item/_Item.scss @@ -0,0 +1,85 @@ +@use 'sass:map'; +@use 'theme'; +@use '../../settings/cursors'; +@use '../../tools/typography'; + +.Item { + display: grid; + grid-template-columns: auto 1fr auto; + padding: theme.$padding; + border-radius: theme.$border-radius; + background-color: theme.$background-default; + cursor: pointer; + + @media (hover: hover) { + &:hover { + text-decoration: none; + background-color: theme.$background-hover; + } + + &:active { + text-decoration: none; + background-color: theme.$background-active; + } + } +} + +.Item__label { + @include typography.generate(theme.$label-typography); + + display: inline-block; + grid-column: 2; + color: theme.$label-color-default; +} + +.Item__helperText { + @include typography.generate(theme.$helper-text-typography); + + display: block; + grid-column: 2; + grid-row: 2; + margin-top: theme.$helper-text-margin-top; + color: theme.$helper-text-color-default; +} + +.Item__icon { + grid-row: 1; + color: theme.$icon-color-default; +} + +.Item__icon--start { + grid-column: 1; + margin-inline-end: theme.$icon-spacing; +} + +.Item__icon--end { + grid-column: 3; + margin-inline-start: theme.$icon-spacing; +} + +.Item--selected .Item__label { + @include typography.generate(theme.$label-typography-selected); +} + +.Item--disabled { + background-color: theme.$background-default; + pointer-events: none; + cursor: cursors.$disabled; +} + +.Item--disabled .Item__label { + color: theme.$label-color-disabled; +} + +.Item--disabled .Item__helperText { + color: theme.$helper-text-color-disabled; +} + +.Item:not(.Item--disabled):hover .Item__helperText, +.Item:not(.Item--disabled):active .Item__helperText { + color: inherit; +} + +.Item--disabled .Item__icon { + color: theme.$icon-color-disabled; +} diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss new file mode 100644 index 0000000000..f3b4a97ea3 --- /dev/null +++ b/packages/web/src/scss/components/Item/_theme.scss @@ -0,0 +1,21 @@ +@use '@tokens' as tokens; + +$padding: tokens.$space-400; +$border-radius: tokens.$radius-100; +$background-default: tokens.$background-interactive-default; +$background-hover: tokens.$background-interactive-hover; +$background-active: tokens.$background-interactive-active; + +$label-typography: tokens.$body-medium-text-regular; +$label-typography-selected: tokens.$body-medium-text-bold; +$label-color-default: tokens.$text-primary-default; +$label-color-disabled: tokens.$text-primary-disabled; + +$helper-text-typography: tokens.$body-small-text-regular; +$helper-text-margin-top: tokens.$space-300; +$helper-text-color-default: tokens.$text-secondary-default; +$helper-text-color-disabled: tokens.$text-secondary-disabled; + +$icon-spacing: tokens.$space-400; +$icon-color-default: tokens.$action-selected-default; +$icon-color-disabled: tokens.$action-selected-disabled; diff --git a/packages/web/src/scss/components/Item/index.html b/packages/web/src/scss/components/Item/index.html index 763ee2e4da..192564f9ea 100644 --- a/packages/web/src/scss/components/Item/index.html +++ b/packages/web/src/scss/components/Item/index.html @@ -1,5 +1,120 @@ {{#> layout/plain }} +
+

Default

+
+ +
+ Item label +
+ + + Item label + + +
+
+ +
+

Selected

+
+ +
+ Item label + + + +
+ +
+
+ +
+

Disabled

+
+ +
+ Item label +
+ +
+
+ +
+

Default

+
+ +
+ Item label +
+ +
+ Item label + + + +
+ +
+ Item label + Helper text +
+ +
+ Item label + Helper text + + + +
+ +
+ Item label + Helper text +
+ +
+ Item label + Helper text + + + +
+ +
+ + + + Item label +
+ +
+ + + + Item label + + + +
+ +
+
+

Checkbox Item

diff --git a/packages/web/src/scss/components/Item/index.scss b/packages/web/src/scss/components/Item/index.scss new file mode 100644 index 0000000000..fe859e7349 --- /dev/null +++ b/packages/web/src/scss/components/Item/index.scss @@ -0,0 +1 @@ +@forward 'Item'; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 0331a49bc8..8e4644a793 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -10,6 +10,7 @@ @forward 'FileUploader'; @forward 'Grid'; @forward 'Header'; +@forward 'Item'; @forward 'Modal'; @forward 'Pagination'; @forward 'Pill';