fixup! Refactor(web-twig): Use new HelperText component in all form…

… fields
lmc-eu · Aug 15, 2023 · 581ae34 · 581ae34
1 parent 0df0fbd
commit 581ae34
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 55 deletions.
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/...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,11 +1,11 @@
 <!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 all props -->

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,15 +1,15 @@
-<!-- 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"
 />