From b25918d717eaf6ae417a190c9926037a6cfab3de Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Tue, 28 Nov 2023 21:34:03 +0100 Subject: [PATCH] fixup! Feat(web-twig): Introduce Item component #DS-1049 --- .../src/Resources/components/Item/Item.twig | 18 ++++++------ .../src/Resources/components/Item/README.md | 29 ++++++++++--------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Item/Item.twig b/packages/web-twig/src/Resources/components/Item/Item.twig index 559b186f70..6bf90688bf 100644 --- a/packages/web-twig/src/Resources/components/Item/Item.twig +++ b/packages/web-twig/src/Resources/components/Item/Item.twig @@ -1,26 +1,26 @@ {# API #} {%- set props = props | default([]) -%} {%- set _elementType = props.elementType | default('button') -%} -{%- set _label = props.label | default('') -%} -{%- set _unsafeLabel = props.UNSAFE_label | default(null) -%} {%- 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 _unsafeHelperText = props.UNSAFE_helperText | default(null) -%} -{%- set _href = props.href | default(null) -%} +{%- set _label = props.label | default('') -%} {%- set _target = props.target | default(null) -%} -{%- set _type = props.type | 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 = _iconName ? _iconClassName ~ ' ' ~ _spiritClassPrefix ~ 'Item__icon--start' -%} -{%- set _endIconClassName = _isSelected ? _iconClassName ~ ' ' ~ _spiritClassPrefix ~ 'Item__icon--end' -%} -{%- set _helperTextClassName = _spiritClassPrefix ~ 'Item__helperText' -%} -{%- set _labelClassName = _spiritClassPrefix ~ 'Item__label' -%} +{%- 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') ~ '"' -%} diff --git a/packages/web-twig/src/Resources/components/Item/README.md b/packages/web-twig/src/Resources/components/Item/README.md index d4af8188a1..8cfba74b73 100644 --- a/packages/web-twig/src/Resources/components/Item/README.md +++ b/packages/web-twig/src/Resources/components/Item/README.md @@ -1,4 +1,4 @@ -#Item +# Item The Item component is used to display a single item in a list. It can be used in Dropdown or similar. @@ -61,18 +61,21 @@ Checkbox as Item: ## API -| Name | Type | Default | Required | Description | -| ------------------- | --------------- | -------- | -------- | ---------------------------------- | -| `elementType` | `ElementType` | `button` | ✕ | Type of element used as wrapper | -| `helperText` | `string` | — | ✕\*\* | Custom helper text | -| `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 | -| `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 | +| 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.