Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 30, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 88 additions & 5 deletions packages/web/src/scss/components/Item/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
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">
Expand All @@ -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">
Expand All @@ -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
90 changes: 90 additions & 0 deletions packages/web/src/scss/components/Item/_Item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
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;
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
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;
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
}

.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;
}
5 changes: 5 additions & 0 deletions packages/web/src/scss/components/Item/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
121 changes: 121 additions & 0 deletions packages/web/src/scss/components/Item/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/scss/components/Item/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@forward 'Item';
1 change: 1 addition & 0 deletions packages/web/src/scss/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@forward 'FileUploader';
@forward 'Grid';
@forward 'Header';
@forward 'Item';
@forward 'Modal';
@forward 'Pagination';
@forward 'Pill';
Expand Down
6 changes: 3 additions & 3 deletions packages/web/src/scss/tools/_form-fields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down