Feat(web-twig): Introduce HelperText component

lmc-eu · Aug 15, 2023 · d2ab6d1 · d2ab6d1
1 parent f8e5ee4
commit d2ab6d1
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/packages/web-twig/src/Resources/components/Field/HelperText.twig b/packages/web-twig/src/Resources/components/Field/HelperText.twig
@@ -0,0 +1,25 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _className = props.className -%}
+{%- set _elementType = props.elementType | default('div') -%}
+{%- set _helperText = props.helperText | default(null) -%}
+{%- set _id = props.id | default(null) -%}
+{%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}
+
+{# Attributes #}
+{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
+
+{# Deprecations #}
+{% if not _id %}
+    {% deprecated 'HelperText: The "id" property will be required starting from the next major version.' %}
+{% endif %}
+
+{% if _helperText or _unsafeHelperText %}
+    <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
+        {% if _helperText and not _unsafeHelperText %}
+            {{ _helperText }}
+        {% elseif _unsafeHelperText %}
+            {{ _unsafeHelperText | raw }}
+        {% endif %}
+    </{{ _elementType }}>
+{% endif %}
diff --git a/packages/web-twig/src/Resources/twig-components/helperText.twig b/packages/web-twig/src/Resources/twig-components/helperText.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Field/HelperText.twig' %}
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
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT render without children --><!-- Render with plain helper text --><html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="myClass" id="validationText">
+      Helper text
+    </div>
+    <!-- Render with all props -->
+     <span class="myClass" id="helperTextAllProps"><span>Unsafe helper text</span></span>
+  </body>
+</html>
diff --git a/packages/web-twig/tests/components-fixtures/helperText.twig b/packages/web-twig/tests/components-fixtures/helperText.twig
@@ -0,0 +1,18 @@
+<!-- DO NOT render without children -->
+<HelperText />
+
+<!-- Render with plain helper text -->
+<HelperText
+    className="myClass"
+    helperText="Helper text"
+    id="validationText"
+/>
+
+<!-- Render with all props -->
+<HelperText
+    className="myClass"
+    elementType="span"
+    helperText="Helper text"
+    id="helperTextAllProps"
+    UNSAFE_helperText="<span>Unsafe helper text</span>"
+/>