fixup! Feat(web-twig): Introduce Item component #DS-1049

lmc-eu · Nov 28, 2023 · b25918d · b25918d
1 parent 676a896
commit b25918d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git 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
@@ -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.