diff --git a/packages/web-twig/src/Resources/components/Item/Item.stories.twig b/packages/web-twig/src/Resources/components/Item/Item.stories.twig index 9bf319942d..d44ea94b4f 100644 --- a/packages/web-twig/src/Resources/components/Item/Item.stories.twig +++ b/packages/web-twig/src/Resources/components/Item/Item.stories.twig @@ -2,6 +2,26 @@ {% block content %} + + {% include '@components/Item/stories/ItemDefault.twig' %} + + + + {% include '@components/Item/stories/ItemSelected.twig' %} + + + + {% include '@components/Item/stories/ItemDisabled.twig' %} + + + + {% include '@components/Item/stories/ItemHelperText.twig' %} + + + + {% include '@components/Item/stories/ItemIcon.twig' %} + + {% include '@components/Item/stories/CheckboxItem.twig' %} diff --git a/packages/web-twig/src/Resources/components/Item/Item.twig b/packages/web-twig/src/Resources/components/Item/Item.twig new file mode 100644 index 0000000000..f820e9d437 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/Item.twig @@ -0,0 +1,70 @@ +{# API #} +{%- set props = props | default([]) -%} +{%- set _elementType = props.elementType | default('button') -%} +{%- set _helperText = props.helperText | default(null) -%} +{%- set _href = props.href | default(null) -%} +{%- set _iconName = props.iconName | default(null) -%} +{%- set _isDisabled = props.isDisabled | default(null) -%} +{%- set _isSelected = props.isSelected | default(null) -%} +{%- set _label = props.label | default('') -%} +{%- set _target = props.target | default(null) -%} +{%- set _type = props.type | default('button') -%} +{%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%} +{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%} + +{# Class names #} +{%- set _rootClassName = _spiritClassPrefix ~ 'Item' -%} +{%- set _disabledClassName = _isDisabled ? _spiritClassPrefix ~ 'Item--disabled' : null -%} +{%- set _selectedClassName = _isSelected ? _spiritClassPrefix ~ 'Item--selected' : null -%} +{%- set _iconClassName = _spiritClassPrefix ~ 'Item__icon' -%} +{%- set _startIconClassName = _iconClassName ~ ' ' ~ _spiritClassPrefix ~ 'Item__icon--start' -%} +{%- set _endIconClassName = _iconClassName ~ ' ' ~ _spiritClassPrefix ~ 'Item__icon--end' -%} +{%- set _helperTextClassName = _spiritClassPrefix ~ 'Item__helperText' -%} +{%- set _labelClassName = _spiritClassPrefix ~ 'Item__label' -%} + +{# Attributes #} +{%- set _ariaSelectedAttr = 'aria-selected="' ~ (_isSelected ? 'true' : 'false') ~ '"' -%} +{%- set _buttonDisabledAttr = (_elementType == 'button' and _isDisabled) ? 'disabled' : null -%} +{%- set _hrefAttr = (_elementType == 'a' and _href) ? 'href=' ~ _href : null -%} +{%- set _targetAttr = (_elementType == 'a' and _target) ? 'target=' ~ _target | escape('html_attr') : null -%} +{%- set _typeAttr = (_elementType == 'button' and _type) ? 'type=' ~ _type : null -%} + +{# Miscellaneous #} +{%- set _styleProps = useStyleProps(props) -%} +{%- set _classNames = [ _rootClassName, _disabledClassName, _selectedClassName, _styleProps.className ] -%} +{%- set _selectedIconName = 'check-plain' -%} + +<{{ _elementType }} + {{ mainProps(props) }} + {{ styleProp(_styleProps) }} + {{ classProp(_classNames) }} + {{ _hrefAttr }} + {{ _targetAttr }} + {{ _typeAttr }} + {{ _buttonDisabledAttr }} + {{ _ariaSelectedAttr | raw }} +> + {% if _iconName %} + + + + {% endif %} + + {%- if _unsafeLabel -%} + {{ _unsafeLabel | raw }} + {%- else -%} + {{ _label }} + {%- endif -%} + + + {% if _isSelected %} + + + + {% endif %} + diff --git a/packages/web-twig/src/Resources/components/Item/README.md b/packages/web-twig/src/Resources/components/Item/README.md index 846fea67f3..8cfba74b73 100644 --- a/packages/web-twig/src/Resources/components/Item/README.md +++ b/packages/web-twig/src/Resources/components/Item/README.md @@ -1,8 +1,90 @@ # Item -To implement Item component with content of `Radio` or `Checkbox`, -you need to use directly these components with prop `isItem`. +The Item component is used to display a single item in a list. It can be used in Dropdown or similar. -See `web` package [Item documentation][item-documentation] for more info. +To use Item with checkbox or radio please use components [Checkbox][checkbox] or [Radio][radio] +with `isItem` property. We do this to avoid repeating the same code and to simplify the API. -[item-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Item/README.md +Simple Item example: + +```twig +; +``` + +Item with icon example: + +```twig +; +``` + +Item in selected state example: + +```twig +; +``` + +Item with Helper text example: + +```twig +; +``` + +Item in disabled state example: + +```twig +; +``` + +Item with icon and helper text in selected state example: + +```twig +; +``` + +Item as a link example: + +```twig +; +``` + +Radio as Item: + +```twig +; +``` + +Checkbox as Item: + +```twig +; +``` + +## API + +| Name | Type | Default | Required | Description | +| ------------------- | --------------- | -------- | -------- | ------------------------------------- | +| `elementType` | `ElementType` | `button` | ✕ | Type of element used as wrapper | +| `helperText` | `string` | — | ✕\*\* | Custom helper text | +| `href` | `string` | — | ✕ | Link URL if element type is anchor | +| `iconName` | `string` | — | ✕ | Icon used in item | +| `isDisabled` | `bool` | `false` | ✕ | Whether is the item disabled | +| `isSelected` | `bool` | `false` | ✕ | Whether is the item selected | +| `label` | `string` | - | ✔\* | Label of the item | +| `target` | `string` | — | ✕ | Target prop if element type is anchor | +| `type` | `string` | `button` | ✕ | Input type if element type is button | +| `UNSAFE_className` | `string` | — | ✕ | Wrapper custom class name | +| `UNSAFE_helperText` | `string` | — | ✕\*\* | Unescaped custom helper text | +| `UNSAFE_label` | `string` | — | ✕ | Unescaped label text (allows HTML) | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Wrapper custom style | + +(\*) Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content. +(\*\*) Props with and without `UNSAFE_` prefix are mutually exclusive. + +On top of the API options, you can add `data-*` or `aria-*` attributes to +further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, +see the [Escape hatches][escape-hatches] section in README to learn how and when to use them. +These attributes will be passed to the topmost HTML element of the component. + +[checkbox]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Checkbox/README.md +[radio]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Radio/README.md +[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/ItemSnapshotTest.php b/packages/web-twig/src/Resources/components/Item/__tests__/ItemSnapshotTest.php new file mode 100644 index 0000000000..1ffd8435dc --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/ItemSnapshotTest.php @@ -0,0 +1,11 @@ + + + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemDisabled.twig b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemDisabled.twig new file mode 100644 index 0000000000..0595263c02 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemDisabled.twig @@ -0,0 +1,2 @@ + + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemHelperText.twig b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemHelperText.twig new file mode 100644 index 0000000000..a20c6b8d8d --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemHelperText.twig @@ -0,0 +1 @@ + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemIcon.twig b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemIcon.twig new file mode 100644 index 0000000000..52a1e120cb --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemIcon.twig @@ -0,0 +1 @@ + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemSelected.twig b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemSelected.twig new file mode 100644 index 0000000000..cda89d6d3a --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__fixtures__/itemSelected.twig @@ -0,0 +1 @@ + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDefault.twig.snap.html new file mode 100644 index 0000000000..1231c867bf --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDefault.twig.snap.html @@ -0,0 +1,15 @@ + + + + + + + + + Item + label +
+ Item label +
+ + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDisabled.twig.snap.html b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDisabled.twig.snap.html new file mode 100644 index 0000000000..c9874ca333 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemDisabled.twig.snap.html @@ -0,0 +1,10 @@ + + + + + + + + Item label + + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemHelperText.twig.snap.html b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemHelperText.twig.snap.html new file mode 100644 index 0000000000..a16903e158 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemHelperText.twig.snap.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemIcon.twig.snap.html b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemIcon.twig.snap.html new file mode 100644 index 0000000000..b37a4db130 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemIcon.twig.snap.html @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemSelected.twig.snap.html b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemSelected.twig.snap.html new file mode 100644 index 0000000000..e8235f5724 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/__tests__/__snapshots__/itemSelected.twig.snap.html @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemDefault.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemDefault.twig new file mode 100644 index 0000000000..59f4883211 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/stories/ItemDefault.twig @@ -0,0 +1,3 @@ + + + diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemDisabled.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemDisabled.twig new file mode 100644 index 0000000000..ec99e3aeb6 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/stories/ItemDisabled.twig @@ -0,0 +1,2 @@ + + diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemHelperText.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemHelperText.twig new file mode 100644 index 0000000000..7205f22eb4 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/stories/ItemHelperText.twig @@ -0,0 +1,4 @@ + + + + diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemIcon.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemIcon.twig new file mode 100644 index 0000000000..43d73c79d5 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/stories/ItemIcon.twig @@ -0,0 +1,2 @@ + + diff --git a/packages/web-twig/src/Resources/components/Item/stories/ItemSelected.twig b/packages/web-twig/src/Resources/components/Item/stories/ItemSelected.twig new file mode 100644 index 0000000000..cda89d6d3a --- /dev/null +++ b/packages/web-twig/src/Resources/components/Item/stories/ItemSelected.twig @@ -0,0 +1 @@ + diff --git a/packages/web-twig/src/Resources/twig-components/item.twig b/packages/web-twig/src/Resources/twig-components/item.twig new file mode 100644 index 0000000000..6db78290ad --- /dev/null +++ b/packages/web-twig/src/Resources/twig-components/item.twig @@ -0,0 +1 @@ +{% extends '@spirit/Item/Item.twig' %}