Refactor(web-twig): Use new HelperText component in all form fields

lmc-eu · Aug 15, 2023 · e1b90d1 · e1b90d1
1 parent 79e650b
commit e1b90d1
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 84 deletions.
diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -61,9 +61,19 @@
         {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
     />
     <span class="{{ _textClassName }}">
-        <span {{ classProp(_labelClassName) }}>{% if _unsafeLabel %}{{ _unsafeLabel | raw }}{% else %}{{ _label }}{% endif %}</span>
-        {% if _helperText and not _unsafeHelperText %}<span class="{{ _helperTextClassName }}">{{ _helperText }}</span>{% endif %}
-        {% if _unsafeHelperText %}<span class="{{ _helperTextClassName }}">{{ _unsafeHelperText | raw }}</span>{% endif %}
+        <span {{ classProp(_labelClassName) }}>
+            {%- if _unsafeLabel -%}
+                {{ _unsafeLabel | raw }}
+            {%- else -%}
+                {{ _label }}
+            {%- endif -%}
+        </span>
+        <HelperText
+            className="{{ _helperTextClassName }}"
+            elementType="span"
+            helperText="{{ _helperText }}"
+            UNSAFE_helperText="{{ _unsafeHelperText }}"
+        />
         <ValidationText
             className="{{ _validationTextClassName }}"
             elementType="span"

diff --git a/packages/web-twig/src/Resources/components/Field/HelperText.twig b/packages/web-twig/src/Resources/components/Field/HelperText.twig
@@ -18,7 +18,7 @@
     <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
         {% if _helperText and not _unsafeHelperText %}
             {{ _helperText }}
-        {% elseif _unsafeHelperText %}
+        {% else %}
             {{ _unsafeHelperText | raw }}
         {% endif %}
     </{{ _elementType }}>

diff --git a/packages/web-twig/src/Resources/components/Field/README.md b/packages/web-twig/src/Resources/components/Field/README.md
@@ -1,46 +1,3 @@
-# ValidationText
+# Form Field Subcomponents
 
-The validationText subcomponent displays validation texts for Field components like TextField, TextArea, Checkbox, FileUploader, etc.
-
-Basic example usage:
-
-```twig
-<ValidationText
-    className="Component__validationText"
-    validationState="danger"
-    validationText="Danger validation text"
-/>
-```
-
-Advanced example:
-
-```twig
-<ValidationText
-    className="Component__validationText"
-    elementType="span"
-    validationState="danger"
-    UNSAFE_validationText="Danger <strong>validation</strong> text"
-/>
-```
-
-Without lexer:
-
-```twig
-{% embed "@spirit/validationText.twig" with { props: {
-    className: 'Component__validationText',
-    validationState: 'danger',
-    validationText: 'Danger validation text'
-}} %}{% endembed %}
-```
-
-## API
-
-| Prop name               | Type                 | Default | Required | Description                                                                   |
-| ----------------------- | -------------------- | ------- | -------- | ----------------------------------------------------------------------------- |
-| `className`             | `string`             | -       | yes      | ClassName of the ValidationText                                               |
-| `elementType`           | `string`             | `div`   | no       | HTML tag to render, except if text is an array, then the root element is `ul` |
-| `validationState`       | `string`             | `null`  | no       | Validation State is used to determine if the component should be rendered     |
-| `validationText`        | `string`, `string[]` | -       | yes\*    | Validation text                                                               |
-| `UNSAFE_validationText` | `string`, `string[]` | -       | yes\*    | Validation text with HTML tags                                                |
-
-\*: ValidationText is required. You can use the `validationText` for simple text or `UNSAFE_validationText` for HTML content.
+⚠️ All components in this directory are private and should not be used outside of Spirit components.
diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderInput.twig
@@ -85,15 +85,11 @@
                 {{- _dragAndDropText -}}
             </span>
         </label>
-        {% if _helperText or _unsafeHelperText %}
-            <div class="{{ _helperTextClassName }}">
-                {% if _helperText %}
-                    {{ _helperText }}
-                {% else %}
-                    {{ _unsafeHelperText | raw }}
-                {% endif %}
-            </div>
-        {% endif %}
+        <HelperText
+            className="{{ _helperTextClassName }}"
+            helperText="{{ _helperText }}"
+            UNSAFE_helperText="{{ _unsafeHelperText }}"
+        />
     </div>
     <ValidationText
         className="{{ _validationTextClassName }}"

diff --git a/packages/web-twig/src/Resources/components/Radio/Radio.twig b/packages/web-twig/src/Resources/components/Radio/Radio.twig
@@ -56,8 +56,18 @@
         {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
     />
     <span class="{{ _textClassName }}">
-        <span {{ classProp(_labelClassName) }}>{% if _unsafeLabel %}{{ _unsafeLabel | raw }}{% else %}{{ _label }}{% endif %}</span>
-        {% if _helperText and not _unsafeHelperText %}<span class="{{ _helperTextClassName }}">{{ _helperText }}</span>{% endif %}
-        {% if _unsafeHelperText %}<span class="{{ _helperTextClassName }}">{{ _unsafeHelperText | raw }}</span>{% endif %}
+        <span {{ classProp(_labelClassName) }}>
+            {%- if _unsafeLabel -%}
+                {{ _unsafeLabel | raw }}
+            {%- else -%}
+                {{ _label }}
+            {%- endif -%}
+        </span>
+        <HelperText
+            className="{{ _helperTextClassName }}"
+            elementType="span"
+            helperText="{{ _helperText }}"
+            UNSAFE_helperText="{{ _unsafeHelperText }}"
+        />
     </span>
 </label>
diff --git a/packages/web-twig/src/Resources/components/Select/Select.twig b/packages/web-twig/src/Resources/components/Select/Select.twig
@@ -63,8 +63,11 @@
             <Icon name="chevron-down" />
         </div>
     </div>
-    {% if _helperText and not _unsafeHelperText %}<div class="{{ _helperTextClassName }}">{{ _helperText }}</div>{% endif %}
-    {% if _unsafeHelperText %}<div class="{{ _helperTextClassName }}">{{ _unsafeHelperText | raw }}</div>{% endif %}
+    <HelperText
+        className="{{ _helperTextClassName }}"
+        helperText="{{ _helperText }}"
+        UNSAFE_helperText="{{ _unsafeHelperText }}"
+    />
     <ValidationText
         className="{{ _validationTextClassName }}"
         validationState="{{ _validationState }}"

diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -118,16 +118,11 @@
             />
         {% endif %}
     {% endif %}
-    {% if _helperText and not _unsafeHelperText %}
-        <div class="{{ _helperTextClassName }}">
-            {{ _helperText }}
-        </div>
-    {% endif %}
-    {% if _unsafeHelperText %}
-        <div class="{{ _helperTextClassName }}">
-            {{ _unsafeHelperText | raw }}
-        </div>
-    {% endif %}
+    <HelperText
+        className="{{ _helperTextClassName }}"
+        helperText="{{ _helperText }}"
+        UNSAFE_helperText="{{ _unsafeHelperText }}"
+    />
     <ValidationText
         className="{{ _validationTextClassName }}"
         validationState="{{ _validationState }}"

diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set fileUploaderInput.twig__1.html
@@ -73,7 +73,7 @@
         <path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="currentColor">
         </path></svg> <label for="example-input-all-props" class="FileUploaderInput__dropZoneLabel"><span class="FileUploaderInput__link link-primary link-underlined">Pick a file</span> <span class="FileUploaderInput__dragAndDropLabel">or drop it here</span></label>
         <div class="FileUploaderInput__helperText">
-          helper text
+          <span>UNSAFE helper text</span>
         </div>
       </div>
 

diff --git a/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set helperText.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set helperText.twig__1.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<!-- DO NOT render without children --><!-- Render with plain helper text --><html xmlns="http://www.w3.org/1999/xhtml">
+<!-- DO NOT render when there is nothing to display --><!-- Render with plain helper text --><html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>
     </title>
   </head>
   <body>
-    <div class="myClass" id="validationText">
+    <div class="myClass">
       Helper text
     </div>
     <!-- Render with all props -->

diff --git a/...ests/__snapshots__/ComponentsSnapshotTest__test with data set validationText.twig__1.html b/...ests/__snapshots__/ComponentsSnapshotTest__test with data set validationText.twig__1.html
@@ -1,13 +1,22 @@
 <!DOCTYPE html>
-<!-- DO NOT render without children --><!-- DO NOT render when validationState is not set --><!-- Render with plain validation text --><html xmlns="http://www.w3.org/1999/xhtml">
+<!-- DO NOT render when there is nothing to display --><!-- DO NOT render when validationState is not set --><!-- Render with plain validation text --><html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>
     </title>
   </head>
   <body>
-    <div class="myClass" id="validationText">
+    <div class="myClass">
       Validation text
     </div>
+    <!-- Render with iterable validation text -->
+
+    <ul class="myClass">
+      <li>Validation text 1
+      </li>
+
+      <li>Validation text 2
+      </li>
+    </ul>
     <!-- Render with all props -->
      <span class="myClass" id="validationTextAllProps"><span>Unsafe validation text</span></span>
   </body>

diff --git a/packages/web-twig/tests/components-fixtures/helperText.twig b/packages/web-twig/tests/components-fixtures/helperText.twig
@@ -1,11 +1,10 @@
-<!-- DO NOT render without children -->
-<HelperText />
+<!-- DO NOT render when there is nothing to display -->
+<HelperText className="myClass" />
 
 <!-- Render with plain helper text -->
 <HelperText
     className="myClass"
     helperText="Helper text"
-    id="validationText"
 />
 
 <!-- Render with all props -->

diff --git a/packages/web-twig/tests/components-fixtures/validationText.twig b/packages/web-twig/tests/components-fixtures/validationText.twig
@@ -1,19 +1,26 @@
-<!-- DO NOT render without children -->
-<ValidationText />
+<!-- DO NOT render when there is nothing to display -->
+<ValidationText className="myClass" />
 
 <!-- DO NOT render when validationState is not set -->
 <ValidationText
+    className="myClass"
     validationText="Validation text"
 />
 
 <!-- Render with plain validation text -->
 <ValidationText
     className="myClass"
-    id="validationText"
     validationState="success"
     validationText="Validation text"
 />
 
+<!-- Render with iterable validation text -->
+<ValidationText
+    className="myClass"
+    validationState="success"
+    validationText="{{ ['Validation text 1', 'Validation text 2'] }}"
+/>
+
 <!-- Render with all props -->
 <ValidationText
     className="myClass"