Feat(web-twig): Introduce ValidationText has Icons #DS-1676

lmc-eu · Feb 21, 2025 · 8075777 · 8075777
1 parent b85aa9d
commit 8075777
Show file tree

Hide file tree

Showing 31 changed files with 214 additions and 27 deletions.
diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _helperText = props.helperText | default(null) -%}
+{%- set _hasValidationIcon = props.hasValidationIcon | default(false) -%}
 {%- set _id = props.id -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) -%}
@@ -29,6 +30,7 @@
 {%- set _textClassName = _spiritClassPrefix ~ 'Checkbox__text' -%}
 {%- set _helperTextClassName = _spiritClassPrefix ~ 'Checkbox__helperText' -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'Checkbox__validationText' -%}
+{%- set _validationTextIconClassName = _hasValidationIcon ? _validationTextClassName ~ '--hasIcon' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -38,6 +40,7 @@
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 {%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
 {%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+{%- set _validationTextClassNames = [ _validationTextClassName, _validationTextIconClassName ] | join (' ') -%}
 
 {# Attributes #}
 {%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
@@ -76,8 +79,9 @@
             UNSAFE_helperText="{{ _unsafeHelperText }}"
         />
         <ValidationText
-            className="{{ _validationTextClassName }}"
+            className="{{ _validationTextClassNames }}"
             elementType="span"
+            hasIcon="{{ _hasValidationIcon }}"
             id="{{ _validationTextId }}"
             validationState="{{ _validationState }}"
             validationText="{{ _validationText }}"

diff --git a/packages/web-twig/src/Resources/components/Checkbox/README.md b/packages/web-twig/src/Resources/components/Checkbox/README.md
@@ -12,6 +12,7 @@ Advanced example usage:
 
 ```twig
 <Checkbox
+  hasValidationIcon
   id="checkbox-advanced"
   isChecked
   isRequired
@@ -41,6 +42,7 @@ Without lexer:
 | Name                    | Type                                           | Default | Required | Description                                          |
 | ----------------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------- |
 | `autocomplete`          | `string`                                       | `null`  | ✕        | [Automated assistance in filling][autocomplete-attr] |
+| `hasValidationIcon`     | `boolean`                                      | `false` | ✕        | Whether to show validation icon                      |
 | `helperText`            | `string`                                       | `null`  | ✕\*\*    | Custom helper text                                   |
 | `id`                    | `string`                                       | `null`  | ✕        | Input and label identification                       |
 | `inputProps`            | `string[]`                                     | `[]`    | ✕        | Pass additional attributes to the input element      |

diff --git a/...es/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig b/...es/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig
@@ -30,6 +30,7 @@
 <!-- Render with all props -->
 {% set inputProps = { "data-validate": "true" } %}
 <Checkbox
+    hasValidationIcon
     helperText="Example helper text"
     id="example-id-all"
     inputProps={ inputProps }

diff --git a/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
@@ -17,7 +17,8 @@
     label</span></span></label> <!-- Render with all props -->
      <label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" class="Checkbox__input" checked disabled name="example-name" required="" value="" aria-describedby="example-id-all-helper-text example-id-all-validation-text"> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE
     label</span> <span class="Checkbox__helperText" id="example-id-all-helper-text">UNSAFE helper text</span>
-    <span class="Checkbox__validationText" id="example-id-all-validation-text">Example validation
-    text</span></span></label>
+    <span class="Checkbox__validationText Checkbox__validationText--hasIcon" id="example-id-all-validation-text"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" id="svg_818352dc5f3affd6ed66bec207e78207" aria-hidden="true">
+    <path d="M2.73004 21.0001H21.26C22.03 21.0001 22.51 20.1701 22.13 19.5001L12.86 3.50006C12.47 2.83006 11.51 2.83006 11.13 3.50006L1.86004 19.5001C1.48004 20.1701 1.96004 21.0001 2.73004 21.0001ZM13 18.0001H11V16.0001H13V18.0001ZM12 14.0001C11.45 14.0001 11 13.5501 11 13.0001V11.0001C11 10.4501 11.45 10.0001 12 10.0001C12.55 10.0001 13 10.4501 13 11.0001V13.0001C13 13.5501 12.55 14.0001 12 14.0001Z" fill="currentColor">
+    </path></svg> <span>Example validation text</span></span></span></label>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxValidation.twig b/packages/web-twig/src/Resources/components/Checkbox/stories/CheckboxValidation.twig
@@ -30,3 +30,14 @@
     name="checkboxWarningHelperText"
     validationState="warning"
 />
+
+<Checkbox
+    hasValidationIcon
+    helperText="Helper text"
+    id="checkbox-warning-icon-text"
+    isChecked
+    label="Checkbox Label"
+    validationText="Warning validation text with icon"
+    name="checkboxWarningHelperText"
+    validationState="warning"
+/>
diff --git a/packages/web-twig/src/Resources/components/Field/ValidationText.twig b/packages/web-twig/src/Resources/components/Field/ValidationText.twig
@@ -2,41 +2,68 @@
 {%- set props = props | default([]) -%}
 {%- set _className = props.className -%}
 {%- set _elementType = props.elementType | default('div') -%}
+{%- set _hasIcon = props.hasIcon | default(false) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _unsafeValidationText = props.UNSAFE_validationText | default(null) -%}
 {%- set _validationState = props.validationState | default(null) -%}
 {%- set _validationText = props.validationText | default(null) -%}
+{%- set _validationIconNames = {
+    success: 'check-plain',
+    warning: 'warning',
+    danger: 'danger',
+} %}
+{%- set _validationIconName = _validationIconNames[_validationState]|default(null) -%}
 
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 
 {% if _validationState and _validationText and not _unsafeValidationText %}
     {%- if _validationText is iterable -%}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
-            <ul>
-                {% for _validationTextItem in _validationText %}
-                    <li>{{ _validationTextItem }}</li>
-                {% endfor %}
-            </ul>
+        {% if _hasIcon %}
+            <Icon name={_validationIconName} boxSize="20"/>
+        {% endif %}
+        <ul>
+            {% for _validationTextItem in _validationText %}
+                <li>{{ _validationTextItem }}</li>
+            {% endfor %}
+        </ul>
         </{{ _elementType }}>
     {% else %}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
+        {% if _hasIcon %}
+            <Icon name={_validationIconName} boxSize="20"/>
+            <{{ _elementType }}>
             {{ _validationText }}
+            </{{ _elementType }}>
+        {% else %}
+            {{ _validationText }}
+        {% endif %}
         </{{ _elementType }}>
     {%- endif -%}
 {% endif %}
 {% if _validationState and _unsafeValidationText %}
     {%- if _unsafeValidationText is iterable -%}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
-            <ul>
-                {% for _validationTextItem in _unsafeValidationText %}
-                    <li>{{ _validationTextItem | raw }}</li>
-                {% endfor %}
-            </ul>
+        {% if _hasIcon %}
+            <Icon name={_validationIconName} boxSize="20"/>
+        {% endif %}
+        <ul>
+            {% for _validationTextItem in _unsafeValidationText %}
+                <li>{{ _validationTextItem | raw }}</li>
+            {% endfor %}
+        </ul>
         </{{ _elementType }}>
     {% else %}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
+        {% if _hasIcon %}
+            <Icon name={_validationIconName} boxSize="20"/>
+            <{{ _elementType }}>
+            {{ _unsafeValidationText | raw }}
+            </{{ _elementType }}>
+        {% else %}
             {{ _unsafeValidationText | raw }}
+        {% endif %}
         </{{ _elementType }}>
     {%- endif -%}
 {% endif %}
diff --git a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
@@ -1,5 +1,6 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _hasValidationIcon = props.hasValidationIcon | default(false) -%}
 {%- set _helperText = props.helperText | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
@@ -22,6 +23,7 @@
 {%- set _labelClassName = _spiritClassPrefix ~ 'FieldGroup__label' -%}
 {%- set _labelRequiredClassName = _isRequired ? _spiritClassPrefix ~ 'FieldGroup__label--required' : null -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'FieldGroup__validationText' -%}
+{%- set _validationTextIconClassName = _hasValidationIcon ? _validationTextClassName ~ '--hasIcon' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%} {# Must be (anywhere) before _rootClassNames #}
@@ -32,6 +34,7 @@
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['aria-describedby']) -%}
 {%- set _rootClassNames = [ _rootClassName, _rootFluidClassName, _rootValidationStateClassName, _styleProps.className ] -%}
 {%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+{%- set _validationTextClassNames = [ _validationTextClassName, _validationTextIconClassName ] | join (' ') -%}
 {%- set _labelRendered -%}
     {%- if _label -%}
         {{ _label }}
@@ -74,7 +77,8 @@
         UNSAFE_helperText="{{ _unsafeHelperText }}"
     />
     <ValidationText
-        className="{{ _validationTextClassName }}"
+        className="{{ _validationTextClassNames }}"
+        hasIcon="{{ _hasValidationIcon }}"
         id="{{ _validationTextId }}"
         validationState="{{ _validationState }}"
         validationText="{{ _validationText }}"

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/README.md b/packages/web-twig/src/Resources/components/FieldGroup/README.md
@@ -103,6 +103,7 @@ When validated on server:
 | Name                    | Type                                           | Default | Required | Description                                                |
 | ----------------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
 | `form`                  | `string`                                       | `null`  | ✕        | Parent form ID                                             |
+| `hasValidationIcon`     | `boolean`                                      | `false` | ✕        | Whether to show validation icon                            |
 | `helperText`            | `string`                                       | `null`  | ✕\*\*    | Custom helper text                                         |
 | `id`                    | `string`                                       | —       | ✓        | Group and label identification                             |
 | `isDisabled`            | `bool`                                         | `false` | ✕        | If true, the group is disabled                             |

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__fixtures__/fieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__fixtures__/fieldGroup.twig
@@ -51,6 +51,7 @@
 
 <!-- Render with all props -->
 <FieldGroup
+    hasValidationIcon
     helperText="Helper text"
     id="field-group-validation-success"
     isDisabled

diff --git a/...wig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html b/...wig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html
@@ -124,8 +124,13 @@
         <span>UNSAFE helper text</span>
       </div>
 
-      <div class="FieldGroup__validationText" id="field-group-validation-success-validation-text">
-        <span>UNSAFE validation text</span>
+      <div class="FieldGroup__validationText FieldGroup__validationText--hasIcon" id="field-group-validation-success-validation-text">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" id="svg_833d7a3fb59897a2c5963b1f3c0c3d5e" aria-hidden="true">
+        <path d="M9.00012 16.5448L5.50012 13.0448C5.11012 12.6548 4.49012 12.6548 4.10012 13.0448C3.71012 13.4348 3.71012 14.0548 4.10012 14.4448L8.29012 18.6348C8.68012 19.0248 9.31012 19.0248 9.70012 18.6348L20.3001 8.04479C20.6901 7.65479 20.6901 7.03479 20.3001 6.64479C19.9101 6.25479 19.2901 6.25479 18.9001 6.64479L9.00012 16.5448Z" fill="currentColor">
+        </path></svg>
+        <div>
+          <span>UNSAFE validation text</span>
+        </div>
       </div>
     </fieldset>
   </body>

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/stories/FieldGroupValidation.twig b/packages/web-twig/src/Resources/components/FieldGroup/stories/FieldGroupValidation.twig
@@ -30,3 +30,15 @@
         <DocsBox>Item</DocsBox>
     {% endfor %}
 </FieldGroup>
+
+<FieldGroup
+    hasValidationIcon
+    id="field-group-validation-warning-icon"
+    label="Label"
+    validationState="warning"
+    validationText="Validation text with icon"
+>
+    {% for i in 1..3 %}
+        <DocsBox>Item</DocsBox>
+    {% endfor %}
+</FieldGroup>
diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
@@ -1,6 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _dragAndDropText = props.dragAndDropText | default('or drag and drop here') -%}
+{%- set _hasValidationIcon = props.hasValidationIcon | default(false) -%}
 {%- set _helperText = props.helperText | default(null) -%}
 {%- set _iconName = props.iconName | default('upload') -%}
 {%- set _id = props.id -%}
@@ -35,6 +36,7 @@
 {%- set _linkPrimaryClassName = _spiritClassPrefix ~ 'link-primary' -%}
 {%- set _linkUnderlinedClassName = _spiritClassPrefix ~ 'link-underlined' -%}
 {%- set _validationTextClassName = _spiritClassPrefix ~ 'FileUploaderInput__validationText' -%}
+{%- set _validationTextIconClassName = _hasValidationIcon ? _validationTextClassName ~ '--hasIcon' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -44,6 +46,7 @@
 {%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-element', 'id']) -%}
 {%- set _rootClassNames = [ _rootClassName, _rootDisabledClassName, _rootValidationStateClassName, _styleProps.className ] -%}
 {%- set _validationTextId = _validationText or _unsafeValidationText ? _id ~ '-validation-text' : null -%}
+{%- set _validationTextClassNames = [ _validationTextClassName, _validationTextIconClassName ] | join (' ') -%}
 
 {# Attributes #}
 {%- set _ariaDescribedByAttr = _helperTextId or _validationTextId ? 'aria-describedby="' ~ [ _helperTextId, _validationTextId ] | join (' ') | trim ~ '"' : null -%}
@@ -97,7 +100,8 @@
         />
     </div>
     <ValidationText
-        className="{{ _validationTextClassName }}"
+        className="{{ _validationTextClassNames }}"
+        hasIcon="{{ _hasValidationIcon }}"
         id="{{ _validationTextId }}"
         validationState="{{ _validationState }}"
         validationText="{{ _validationText }}"

diff --git a/packages/web-twig/src/Resources/components/FileUploader/README.md b/packages/web-twig/src/Resources/components/FileUploader/README.md
@@ -183,6 +183,7 @@ When validated on server:
 
 ```twig
 <FileUploaderInput
+  hasValidationIcon
   id="example-validation-success"
   label="Label"
   validationState="success"
@@ -208,6 +209,7 @@ To mark the input as disabled, simply add the `isDisabled` attribute:
 | ----------------------- | ---------------------------------------------- | ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ |
 | `accept`                | `string`                                       | `null`                  | ✕        | Allowed file types                                                                                                 |
 | `dragAndDropText`       | `string`                                       | `or drag and drop here` | ✕        | Text shown in the drop zone if drag-and-drop is enabled on the device                                              |
+| `hasValidationIcon`     | `boolean`                                      | `false`                 | ✕        | Whether to show validation icon                                                                                    |
 | `helperText`            | `string`                                       | `null`                  | ✕\*\*    | Custom helper text                                                                                                 |
 | `iconName`              | `string`                                       | `upload`                | ✕        | Icon used in the drop zone                                                                                         |
 | `id`                    | `string`                                       | —                       | ✓        | Input and label identification                                                                                     |

diff --git a/...-twig/src/Resources/components/FileUploader/__tests__/__fixtures__/fileUploaderInput.twig b/...-twig/src/Resources/components/FileUploader/__tests__/__fixtures__/fileUploaderInput.twig
@@ -34,6 +34,7 @@
 
 <!-- Render with all props -->
 <FileUploaderInput
+    hasValidationIcon
     dragAndDropText="or drop it here"
     helperText="helper text"
     iconName="add"

diff --git a/...esources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html b/...esources/components/FileUploader/__tests__/__snapshots__/fileUploaderInput.twig.snap.html
@@ -85,8 +85,13 @@
         </div>
       </div>
 
-      <div class="FileUploaderInput__validationText" id="example-input-all-props-validation-text">
-        <span>UNSAFE validation text</span>
+      <div class="FileUploaderInput__validationText FileUploaderInput__validationText--hasIcon" id="example-input-all-props-validation-text">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" id="svg_818352dc5f3affd6ed66bec207e78207" aria-hidden="true">
+        <path d="M2.73004 21.0001H21.26C22.03 21.0001 22.51 20.1701 22.13 19.5001L12.86 3.50006C12.47 2.83006 11.51 2.83006 11.13 3.50006L1.86004 19.5001C1.48004 20.1701 1.96004 21.0001 2.73004 21.0001ZM13 18.0001H11V16.0001H13V18.0001ZM12 14.0001C11.45 14.0001 11 13.5501 11 13.0001V11.0001C11 10.4501 11.45 10.0001 12 10.0001C12.55 10.0001 13 10.4501 13 11.0001V13.0001C13 13.5501 12.55 14.0001 12 14.0001Z" fill="currentColor">
+        </path></svg>
+        <div>
+          <span>UNSAFE validation text</span>
+        </div>
       </div>
     </div>
   </body>

diff --git a/...twig/src/Resources/components/FileUploader/stories/FileUploaderInputValidationStates.twig b/...twig/src/Resources/components/FileUploader/stories/FileUploaderInputValidationStates.twig
@@ -45,3 +45,20 @@
     />
     <FileUploaderList headingId="attachments-example-validation-danger" />
 </FileUploader>
+
+<FileUploader data-spirit-toggle="fileUploader">
+    <template data-spirit-snippet="item">
+        <FileUploaderAttachment />
+    </template>
+    <FileUploaderInput
+        hasValidationIcon
+        helperText="Max file size is 10 MB"
+        id="example-validation-warning-icon"
+        isRequired
+        label="Label"
+        name="example-validation-warning"
+        validationState="warning"
+        validationText="Warning validation text with icon"
+    />
+    <FileUploaderList headingId="attachments-example-validation-warning" />
+</FileUploader>
diff --git a/packages/web-twig/src/Resources/components/Select/README.md b/packages/web-twig/src/Resources/components/Select/README.md
@@ -26,6 +26,25 @@ Usage with `isRequired` attribute:
 </Select>
 ```
 
+Advanced example usage:
+
+```twig
+<Select
+  hasValidationIcon
+  id="select-required"
+  isRequired
+  helperText="Helper text"
+  label="Label"
+  name="selectRequired"
+  validationState="warning"
+  validationText="Validation text"
+>
+  <option value="" selected disabled>Placeholder</option>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+</Select>
+```
+
 Without lexer:
 
 ```twig
@@ -47,6 +66,7 @@ Without lexer:
 
 | Name                    | Type                                           | Default | Required | Description                                                |
 | ----------------------- | ---------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
+| `hasValidationIcon`     | `boolean`                                      | `false` | ✕        | Whether to show validation icon                            |
 | `helperText`            | `string`                                       | `null`  | ✕        | Custom helper text                                         |
 | `id`                    | `string`                                       | —       | ✓        | Select and label identification                            |
 | `inputProps`            | `string[]`                                     | `[]`    | ✕        | Pass additional attributes to the select element           |