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

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
+<div class="Item">
+  <span class="Item__label">Item</span>
+</div>
+```
+
+Item with icon example:
+
+```html
+<div 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>
+</div>
+```
+
+Item in selected state example:
+
+```html
+<div 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>
+</div>
+```
+
+Item with Helper text example:
+
+```html
+<div class="Item">
+  <span class="Item__label">Item</span>
+  <span class="Item__helper">Helper text</span>
+</div>
+```
+
+Item in disabled state example:
+
+```html
+<div class="Item Item--disabled">
+  <span class="Item__label">Item</span>
+</div>
+```
+
+Item with icon and helper text in selected state example:
+
+```html
+<div 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__helper">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>
+</div>
+```
+
+Item as a link example:
+
+```html
+<a href="#" class="Item">
+  <span class="Item__label">Item</span>
+</a>
+```
+
+Item as a Radio:
 
 ```html
 <label for="radioItem" class="Radio Radio--item">
@@ -13,7 +91,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.
+Item as a Checkbox:
 
 ```html
 <label for="checkboxItem" class="Checkbox Checkbox--item">
@@ -23,3 +101,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

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;
+}

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;

packages/web/src/scss/components/Item/index.html

@@ -1,5 +1,120 @@
 {{#> layout/plain }}
 
+<section class="docs-Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Item">
+      <span class="Item__label">Item label</span>
+    </div>
+
+    <a href="https://www.example.com" class="Item">
+      <span class="Item__label">Item label</span>
+    </a>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Selected</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div 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>
+    </div>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Disabled</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Item Item--disabled">
+      <span class="Item__label">Item label</span>
+    </div>
+
+  </div>
+</section>
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <div class="Item Item--disabled">
+      <span class="Item__label">Item label</span>
+    </div>
+
+    <div 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>
+    </div>
+
+    <div class="Item">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+    </div>
+
+    <div 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>
+    </div>
+
+    <div class="Item Item--disabled">
+      <span class="Item__label">Item label</span>
+      <span class="Item__helperText">Helper text</span>
+    </div>
+
+    <div 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>
+    </div>
+
+    <div 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>
+    </div>
+
+    <div 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>
+    </div>
+
+  </div>
+</section>
+
 <section class="docs-Section">
   <h2 class="docs-Heading">Checkbox Item</h2>
   <div class="docs-Stack docs-Stack--start">

packages/web/src/scss/components/Item/index.scss

@@ -0,0 +1 @@
+@forward 'Item';

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';