Feat(web): Introduce Item component #DS-1047

lmc-eu · Nov 23, 2023 · 4d98af2 · 4d98af2
1 parent ac0fec6
commit 4d98af2
Show file tree

Hide file tree

Showing 7 changed files with 309 additions and 8 deletions.
diff --git a/packages/web/src/scss/components/Item/README.md b/packages/web/src/scss/components/Item/README.md
@@ -1,10 +1,90 @@
 # 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
+<button type="button" class="Item">
+  <span class="Item__label">Item</span>
+</button>
+```
+
+Item with icon example:
+
+```html
+<button type="button" class="Item">
+  <span class="Item__icon Item__icon--start">
+    <svg width="24" height="24" aria-hidden="true">
+      <use xlink:href="/icons/svg/sprite.svg#search" />
+    </svg>
+  </span>
+  <span class="Item__label">Item</span>
+</button>
+```
+
+Item in selected state example:
+
+```html
+<button type="button" class="Item Item--selected">
+  <span class="Item__label">Item</span>
+  <span class="Item__icon Item__icon--end">
+    <svg width="24" height="24" aria-hidden="true">
+      <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+    </svg>
+  </span>
+</button>
+```
+
+Item with Helper text example:
+
+```html
+<button type="button" class="Item">
+  <span class="Item__label">Item</span>
+  <span class="Item__helperText">Helper text</span>
+</button>
+```
+
+Item in disabled state example:
+
+```html
+<button type="button" class="Item Item--disabled">
+  <span class="Item__label">Item</span>
+</button>
+```
+
+Item with icon and helper text in selected state example:
+
+```html
+<button type="button" class="Item Item--selected">
+  <span class="Item__icon Item__icon--start">
+    <svg width="24" height="24" aria-hidden="true">
+      <use xlink:href="/icons/svg/sprite.svg#search" />
+    </svg>
+  </span>
+  <span class="Item__label">Item</span>
+  <span class="Item__helperText">Helper text</span>
+  <span class="Item__icon Item__icon--end">
+    <svg width="24" height="24" aria-hidden="true">
+      <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+    </svg>
+  </span>
+</button>
+```
+
+Item as a link example:
+
+```html
+<a href="#" class="Item">
+  <span class="Item__label">Item</span>
+</a>
+```
+
+ℹ️ Active style is visible only when the root element can obtain active state.
+
+Radio as a Item:
 
 ```html
 <label for="radioItem" class="Radio Radio--item">
@@ -13,7 +93,7 @@ So, to create an Item of Radio content, you need to add `Radio--item` modifier c
 </label>
 ```
 
-And to create an Item of Checkbox content, you need to add `Checkbox--item` modifier class.
+Checkbox as a Item:
 
 ```html
 <label for="checkboxItem" class="Checkbox Checkbox--item">
@@ -23,3 +103,6 @@ And to create an Item of Checkbox content, you need to add `Checkbox--item` modi
   </span>
 </label>
 ```
+
+[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
@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use 'theme';
+@use '../../settings/cursors';
+@use '../../tools/form-fields';
+@use '../../tools/reset';
+@use '../../tools/typography';
+
+.Item:where(button) {
+    @include reset.button();
+
+    text-align: left;
+}
+
+.Item {
+    @include form-fields.item();
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+
+    @media (hover: hover) {
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    &:active,
+    &:has(:active) {
+        text-decoration: none;
+    }
+}
+
+.Item__label {
+    @include form-fields.inline-field-label();
+
+    grid-column: 2;
+}
+
+.Item__helperText {
+    @include form-fields.helper-text();
+    @include form-fields.item-helper-text();
+
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.Item__icon {
+    display: flex;
+    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 form-fields.item-label-checked();
+}
+
+.Item--disabled {
+    @include form-fields.item-disabled();
+
+    user-select: none;
+    pointer-events: none;
+    cursor: cursors.$disabled;
+}
+
+.Item--disabled .Item__label {
+    @include form-fields.label-disabled();
+}
+
+.Item--disabled .Item__helperText {
+    @include form-fields.helper-text-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
@@ -0,0 +1,5 @@
+@use '@tokens' as tokens;
+
+$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
@@ -1,5 +1,126 @@
 {{#> layout/plain }}
 
+<section class="docs-Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button type="button" class="Item">
+      <span class="Item__label">Item label</span>
+    </button>
+
+    <a href="https://www.example.com" class="Item">
+      <span class="Item__label">Item label</span>
+    </a>
+
+    <div class="Item">
+      <span class="Item__label">Item label</span>
+    </div>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Selected</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button type="button" class="Item Item--selected">
+      <span class="Item__label">Item label</span>
+      <span class="Item__icon Item__icon--end">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+        </svg>
+      </span>
+    </button>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Disabled</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button type="button" class="Item Item--disabled">
+      <span class="Item__label">Item label</span>
+    </button>
+
+    <button type="button" class="Item Item--disabled Item--selected">
+      <span class="Item__label">Item label</span>
+      <span class="Item__icon Item__icon--end">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+        </svg>
+      </span>
+    </button>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Helper Text</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button type="button" class="Item">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+    </button>
+
+    <button type="button" class="Item Item--selected">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+      <span class="Item__icon Item__icon--end">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+        </svg>
+      </span>
+    </button>
+
+    <button type="button" class="Item Item--disabled">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+    </button>
+
+    <button type="button" class="Item Item--disabled Item--selected">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+      <span class="Item__icon Item__icon--end">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+        </svg>
+      </span>
+    </button>
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Icon</h2>
+  <div class="docs-Stack docs-Stack--start">
+
+    <button type="button" class="Item">
+      <span class="Item__icon Item__icon--start">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#search" />
+        </svg>
+      </span>
+      <span class="Item__label">Item label</span>
+    </button>
+
+    <button type="button" class="Item Item--selected">
+      <span class="Item__icon Item__icon--start">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#search" />
+        </svg>
+      </span>
+      <span class="Item__label">Item label</span>
+      <span class="Item__icon Item__icon--end">
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#check-plain" />
+        </svg>
+      </span>
+    </button>
+
+  </div>
+</section>
+
 <section class="docs-Section">
   <h2 class="docs-Heading">Checkbox Item</h2>
   <div class="docs-Stack docs-Stack--start">

diff --git a/packages/web/src/scss/components/Item/index.scss 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
@@ -10,6 +10,7 @@
 @forward 'FileUploader';
 @forward 'Grid';
 @forward 'Header';
+@forward 'Item';
 @forward 'Modal';
 @forward 'Pagination';
 @forward 'Pill';

diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss
@@ -188,10 +188,10 @@
         &:hover {
             background-color: form-fields-theme.$item-background-color-hover;
         }
+    }
 
-        &:active {
-            background-color: form-fields-theme.$item-background-color-active;
-        }
+    &:active {
+        background-color: form-fields-theme.$item-background-color-active;
     }
 }