Feat(web,web-react,web-twig): Allow multiline message in TextArea #DS…

…-738
lmc-eu · May 25, 2023 · 9759666 · 9759666
1 parent fd01166
commit 9759666
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 11 deletions.
diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md
@@ -24,7 +24,7 @@ and show if the textarea is required.
 | `placeholder`           | `string`                                                             | -       | no       | Textarea placeholder                                                                                                               |
 | `value`                 | `string`                                                             | -       | no       | Textarea value                                                                                                                     |
 | `maxLength`             | `number`                                                             | -       | no       | Maximum number of characters                                                                                                       |
-| `message`               | `string`                                                             | -       | no       | Validation message                                                                                                                 |
+| `message`               | `string`, `string[]`                                                 | -       | no       | Validation message                                                                                                                 |
 | `rows`                  | `number`                                                             | -       | no       | Number of visible rows                                                                                                             |
 | `ref`                   | `ForwardedRef<HTMLTextAreaElement>`                                  | -       | no       | Textarea element reference                                                                                                         |
 | `validationState`       | [Validation dictionary][dictionary-validation], `error` (deprecated) | -       | no       | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |

diff --git a/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/web-react/src/components/TextArea/__tests__/TextArea.test.tsx
@@ -5,6 +5,7 @@ import { classNamePrefixProviderTest } from '../../../../tests/providerTests/cla
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { validationStatePropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
+import { validationTextPropsTest } from '../../../../tests/providerTests/validationTextPropsTest';
 import TextArea from '../TextArea';
 
 describe('TextArea', () => {
@@ -16,6 +17,8 @@ describe('TextArea', () => {
 
   validationStatePropsTest(TextArea, 'TextArea--');
 
+  validationTextPropsTest(TextArea, '.TextArea__message');
+
   it('should have label classname', () => {
     const dom = render(<TextArea id="textarea" label="Label" />);
 
@@ -44,13 +47,6 @@ describe('TextArea', () => {
     expect(element).toHaveClass('TextArea__input');
   });
 
-  it('should have message', () => {
-    const dom = render(<TextArea id="textarea" label="Label" message="text" />);
-
-    const element = dom.container.querySelector('.TextArea__message') as HTMLElement;
-    expect(element.textContent).toBe('text');
-  });
-
   it('should have helper text', () => {
     const dom = render(<TextArea id="textarea" label="Label" helperText="helper text" />);
 

diff --git a/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx b/packages/web-react/src/components/TextArea/stories/TextAreaValidationState.tsx
@@ -22,7 +22,7 @@ const Story = (props: unknown) => (
     <TextArea
       id="textarea-danger"
       label="Validation danger"
-      message="Danger message"
+      message={['Danger message', 'Second Danger message']}
       name="textarea-danger"
       validationState="danger"
     />

diff --git a/packages/web-react/src/components/TextArea/stories/argTypes.ts b/packages/web-react/src/components/TextArea/stories/argTypes.ts
@@ -58,9 +58,11 @@ export default {
   },
   message: {
     control: {
-      type: 'text',
+      type: 'object',
     },
     defaultValue: '',
+    description:
+      'The validation message. Use a string `"foo"` for single message or an array for multiple messages `["foo", "bar"]`.',
   },
   helperText: {
     control: {

diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md
@@ -53,7 +53,7 @@ Without lexer:
 | `isRequired`      | `bool`                                                               | `false` | no       | If true, TextArea is required                                                                                                      |
 | `label`           | `string`                                                             | —       | yes      | Label text                                                                                                                         |
 | `maxLength`       | `number`                                                             | `null`  | no       | Maximum number of characters                                                                                                       |
-| `message`         | `string`                                                             | `null`  | no       | Validation message                                                                                                                 |
+| `message`         | `string`, `string[]`                                                 | `null`  | no       | Validation message                                                                                                                 |
 | `name`            | `string`                                                             | `null`  | no       | TextArea name                                                                                                                      |
 | `placeholder`     | `string`                                                             | `null`  | no       | TextArea placeholder                                                                                                               |
 | `rows`            | `number`                                                             | `null`  | no       | Number of visible rows                                                                                                             |

diff --git a/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig
@@ -10,6 +10,9 @@
         {# TextArea Message #}
         {% include '@components/TextArea/stories/TextAreaMessage.twig' %}
 
+        {# TextArea Message #}
+        {% include '@components/TextArea/stories/TextAreaMessageMultiple.twig' %}
+
         {# TextArea Validation State #}
         {% include '@components/TextArea/stories/TextAreaValidationState.twig' %}
 

diff --git a/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaMessageMultiple.twig b/packages/web-twig/src/Resources/components/TextArea/stories/TextAreaMessageMultiple.twig
@@ -0,0 +1,6 @@
+<TextArea
+    id="textareaMessage"
+    label="Label"
+    message="{{ ['Danger validation message', 'Second danger validation message'] }}"
+    validationState="danger"
+></TextArea>
diff --git a/...ts__/ComponentsSnapshotTest__test with data set textAreaWithMultilineMessage.twig__1.html b/...ts__/ComponentsSnapshotTest__test with data set textAreaWithMultilineMessage.twig__1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <div class="TextArea TextArea--danger">
+      <label for="example" class="TextArea__label">TextArea</label> 
+      <textarea id="example" name="" class="TextArea__input"></textarea>
+      <ul class="TextArea__message">
+        <li>Danger validation message
+        </li>
+        <li>Second danger validation message
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-twig/tests/components-fixtures/textAreaWithMultilineMessage.twig b/packages/web-twig/tests/components-fixtures/textAreaWithMultilineMessage.twig
@@ -0,0 +1,6 @@
+<TextArea
+    id="example"
+    label="TextArea"
+    message="{{ ['Danger validation message', 'Second danger validation message'] }}"
+    validationState="danger"
+/>
diff --git a/packages/web/src/scss/components/TextArea/README.md b/packages/web/src/scss/components/TextArea/README.md
@@ -26,6 +26,14 @@ Additional message:
   <textarea id="TextArea3" class="TextArea__input" placeholder="Placeholder"></textarea>
   <div class="TextArea__message">Message</div>
 </div>
+<div class="TextArea">
+  <label for="TextArea3" class="TextArea__label">Label of textarea with message</label>
+  <textarea id="TextArea3" class="TextArea__input" placeholder="Placeholder"></textarea>
+  <ul class="TextArea__message">
+    <li>First Message</li>
+    <li>Second Message</li>
+  </ul>
+</div>
 ```
 
 Hidden label:

diff --git a/packages/web/src/scss/components/TextArea/index.html b/packages/web/src/scss/components/TextArea/index.html
@@ -28,6 +28,14 @@
     <textarea id="textareaDangerMessage" class="TextArea__input" placeholder="Placeholder">Filled</textarea>
     <div class="TextArea__message">Validation message</div>
   </div>
+  <div class="TextArea">
+    <label for="textareaDangerMultilineMessage" class="TextArea__label">Label</label>
+    <textarea id="textareaDangerMultilineMessage" class="TextArea__input" placeholder="Placeholder"></textarea>
+    <ul class="TextArea__message">
+      <li>Validation Message</li>
+      <li>Second Validation Message</li>
+    </ul>
+  </div>
   <div class="TextArea TextArea--success">
     <label for="textareaSuccess" class="TextArea__label TextArea__label--required">Label</label>
     <textarea id="textareaSuccess" class="TextArea__input" placeholder="Placeholder">Filled</textarea>