Feat(web,web-react,web-twig): Allow multiline message in CheckboxFiel…

…d #DS-735
lmc-eu · May 25, 2023 · 395af3d · 395af3d
1 parent 6724d7a
commit 395af3d
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 29 deletions.
diff --git a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx b/packages/web-react/src/components/CheckboxField/CheckboxField.tsx
@@ -2,23 +2,40 @@ import classNames from 'classnames';
 import React from 'react';
 import { useDeprecationMessage, useStyleProps } from '../../hooks';
 import { SpiritCheckboxFieldProps } from '../../types';
+import { useValidationText } from '../Field';
 import { useCheckboxFieldStyleProps } from './useCheckboxFieldStyleProps';
 
 export const CheckboxField = (props: SpiritCheckboxFieldProps): JSX.Element => {
   const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props);
-  const { id, label, message, helperText, value, isDisabled, isRequired, isChecked, ...restProps } = modifiedProps;
+  const { id, label, message, helperText, validationState, value, isDisabled, isRequired, isChecked, ...restProps } =
+    modifiedProps;
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   useDeprecationMessage({
     method: 'property',
-    trigger: props?.validationState === 'error',
+    trigger: validationState === 'error',
     componentName: 'CheckboxField',
     propertyProps: {
       deprecatedValue: 'error',
       newValue: 'danger',
       propertyName: 'validationState',
     },
   });
+  useDeprecationMessage({
+    method: 'custom',
+    trigger: !!(props?.message && !validationState),
+    componentName: 'CheckboxField',
+    customText:
+      '`message` prop without `validationState` prop will be unsupported in the next version. Use `helperText` instead.',
+  });
+
+  const renderValidationText = useValidationText({
+    validationTextClassName: classProps.message,
+    validationState,
+    validationText: message,
+    validationElementType: 'span',
+    requireValidationState: false,
+  });
 
   return (
     <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
@@ -35,7 +52,7 @@ export const CheckboxField = (props: SpiritCheckboxFieldProps): JSX.Element => {
       <span className={classProps.text}>
         <span className={classProps.label}>{label}</span>
         {helperText && <span className={classProps.helperText}>{helperText}</span>}
-        {message && <span className={classProps.message}>{message}</span>}
+        {renderValidationText}
       </span>
     </label>
   );

diff --git a/packages/web-react/src/components/CheckboxField/README.md b/packages/web-react/src/components/CheckboxField/README.md
@@ -12,17 +12,17 @@ and show if the input is required.
 
 | Prop name         | Type                                                                 | Default | Required | Description                                                                                                                        |
 | ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `id`              | string                                                               | -       | yes      | Input and label identification                                                                                                     |
-| `name`            | string                                                               | -       | no       | Input name                                                                                                                         |
-| `label`           | string                                                               | -       | no       | Label text                                                                                                                         |
-| `value`           | string                                                               | -       | no       | Input value                                                                                                                        |
-| `message`         | string                                                               | -       | no       | Validation or help message                                                                                                         |
+| `id`              | `string`                                                             | -       | yes      | Input and label identification                                                                                                     |
+| `name`            | `string`                                                             | -       | no       | Input name                                                                                                                         |
+| `label`           | `string`                                                             | -       | no       | Label text                                                                                                                         |
+| `value`           | `string`                                                             | -       | no       | Input value                                                                                                                        |
+| `message`         | `string`, `string[]`                                                 | -       | no       | Validation or help message                                                                                                         |
 | `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". |
-| `isDisabled`      | boolean                                                              | -       | no       | Whether is field disabled                                                                                                          |
-| `isItem`          | boolean                                                              | -       | no       | To render in [Item][item] mode                                                                                                     |
-| `isRequired`      | boolean                                                              | -       | no       | Whether is field required                                                                                                          |
-| `isChecked`       | boolean                                                              | -       | no       | Whether is field checked                                                                                                           |
-| `isLabelHidden`   | boolean                                                              | -       | no       | Whether is label hidden                                                                                                            |
+| `isDisabled`      | `boolean`                                                            | -       | no       | Whether is field disabled                                                                                                          |
+| `isItem`          | `boolean`                                                            | -       | no       | To render in [Item][item] mode                                                                                                     |
+| `isRequired`      | `boolean`                                                            | -       | no       | Whether is field required                                                                                                          |
+| `isChecked`       | `boolean`                                                            | -       | no       | Whether is field checked                                                                                                           |
+| `isLabelHidden`   | `boolean`                                                            | -       | no       | Whether is label hidden                                                                                                            |
 
 ## Custom component
 

diff --git a/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx b/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -6,6 +6,7 @@ import { itemPropsTest } from '../../../../tests/providerTests/itemPropsTest';
 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 CheckboxField from '../CheckboxField';
 
 describe('CheckboxField', () => {
@@ -19,6 +20,8 @@ describe('CheckboxField', () => {
 
   validationStatePropsTest(CheckboxField, 'CheckboxField--');
 
+  validationTextPropsTest(CheckboxField, '.CheckboxField__message');
+
   it('should have text classname', () => {
     const dom = render(<CheckboxField id="checkbox" label="Label" />);
 
@@ -60,11 +63,4 @@ describe('CheckboxField', () => {
     const element = dom.container.querySelector('.CheckboxField__helperText') as HTMLElement;
     expect(element.textContent).toBe('text');
   });
-
-  it('should have validation message', () => {
-    const dom = render(<CheckboxField id="checkbox" label="Label" message="text" />);
-
-    const element = dom.container.querySelector('.CheckboxField__message') as HTMLElement;
-    expect(element.textContent).toBe('text');
-  });
 });
diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx b/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx
@@ -22,7 +22,7 @@ const Story = () => (
       label="Checkbox danger"
       name="example"
       validationState="danger"
-      message="Danger validation message"
+      message={['Danger validation message', 'Danger validation message']}
     />
   </div>
 );

diff --git a/packages/web-react/src/components/CheckboxField/stories/argTypes.ts b/packages/web-react/src/components/CheckboxField/stories/argTypes.ts
@@ -64,9 +64,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-react/tests/providerTests/validationTextPropsTest.tsx b/packages/web-react/tests/providerTests/validationTextPropsTest.tsx
@@ -5,7 +5,7 @@ import { TextFieldType } from '../../src';
 export const validationTextPropsTest = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Component: ComponentType<any>,
-  className: string,
+  selector: string,
   type: TextFieldType | null = null,
 ) => {
   it('should have message', async () => {
@@ -22,7 +22,7 @@ export const validationTextPropsTest = (
     );
 
     await waitFor(() => {
-      const element = dom.container.querySelector(className) as HTMLElement;
+      const element = dom.container.querySelector(selector) as HTMLElement;
       expect(element.textContent).toBe('text');
     });
   });
@@ -41,7 +41,7 @@ export const validationTextPropsTest = (
     );
 
     await waitFor(() => {
-      const element = dom.container.querySelector(className) as HTMLElement;
+      const element = dom.container.querySelector(selector) as HTMLElement;
       expect(element.tagName.toLowerCase()).toBe('ul');
     });
   });

diff --git a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
@@ -62,7 +62,31 @@
         <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 %}
-        {% if _message and not _unsafeMessage %}<span class="{{ _messageClassName }}">{{ _message }}</span>{% endif %}
-        {% if _unsafeMessage %}<span class="{{ _messageClassName }}">{{ _unsafeMessage | raw }}</span>{% endif %}
+        {% if _message and not _unsafeMessage %}
+            {%- if _message is iterable -%}
+                <ul class="{{ _messageClassName }}">
+                    {% for _messageItem in _message %}
+                        <li>{{ _messageItem }}</li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <span class="{{ _messageClassName }}">
+                    {{ _message }}
+                </span>
+            {%- endif -%}
+        {% endif %}
+        {% if _unsafeMessage %}
+            {%- if _unsafeMessage is iterable -%}
+                <ul class="{{ _messageClassName }}">
+                    {% for _messageItem in _unsafeMessage %}
+                    <li>{{ _messageItem | raw }}</li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <span class="{{ _messageClassName }}">
+                    {{ _unsafeMessage | raw }}
+                </span>
+            {%- endif -%}
+        {% endif %}
     </span>
 </label>
diff --git a/packages/web-twig/src/Resources/components/CheckboxField/README.md b/packages/web-twig/src/Resources/components/CheckboxField/README.md
@@ -48,8 +48,8 @@ Without lexer:
 | `isRequired`        | `bool`                                                               | `false` | no       | If true, input is required                                                                                                         |
 | `label`             | `string`                                                             | —       | yes\*    | Label text                                                                                                                         |
 | `UNSAFE_label`      | `string`                                                             | —       | yes\*    | Unescaped label text (allows HTML)                                                                                                 |
-| `message`           | `string`                                                             | `null`  | no\*\*   | Validation message                                                                                                                 |
-| `UNSAFE_message`    | `string`                                                             | `null`  | no\*\*   | Unescaped validation message                                                                                                       |
+| `message`           | `string`, `string[]`                                                 | `null`  | no\*\*   | Validation message                                                                                                                 |
+| `UNSAFE_message`    | `string`, `string[]`                                                 | `null`  | no\*\*   | Unescaped validation message                                                                                                       |
 | `helperText`        | `string`                                                             | `null`  | no\*\*   | Custom helper text                                                                                                                 |
 | `UNSAFE_helperText` | `string`                                                             | `null`  | no\*\*   | Unescaped custom helper text                                                                                                       |
 | `name`              | `string`                                                             | `null`  | no       | Input name                                                                                                                         |

diff --git a/...web-twig/src/Resources/components/CheckboxField/stories/CheckboxFieldValidationState.twig b/...web-twig/src/Resources/components/CheckboxField/stories/CheckboxFieldValidationState.twig
@@ -63,3 +63,13 @@
     name="checkboxfield11_3"
     validationState="warning"
 />
+<CheckboxField
+    helperText="Helper text"
+    id="checkboxfield11_4"
+    isChecked
+    isItem
+    label="Label of item with warning"
+    message="{{ ['Warning validation message', 'Second warning validation message'] }}"
+    name="checkboxfield11_3"
+    validationState="warning"
+/>
diff --git a/packages/web/src/scss/components/CheckboxField/README.md b/packages/web/src/scss/components/CheckboxField/README.md
@@ -32,6 +32,16 @@
     <span class="CheckboxField__message">Message</span>
   </span>
 </label>
+<label for="checkboxfield2" class="CheckboxField">
+  <input type="checkbox" id="checkboxfield2" class="CheckboxField__input" />
+  <span class="CheckboxField__text">
+    <span class="CheckboxField__label">Checkbox unselected</span>
+    <ul class="CheckboxField__message">
+      <li>Message</li>
+      <li>Message</li>
+    </ul>
+  </span>
+</label>
 ```
 
 ## Hidden label:

diff --git a/packages/web/src/scss/components/CheckboxField/index.html b/packages/web/src/scss/components/CheckboxField/index.html
@@ -118,6 +118,17 @@
       <span class="CheckboxField__message">Warning validation message</span>
     </span>
   </label>
+  <label for="checkboxfield15_4" class="CheckboxField CheckboxField--warning">
+    <input type="checkbox" id="checkboxfield15_4" class="CheckboxField__input" value="Filled" />
+    <span class="CheckboxField__text">
+      <span class="CheckboxField__label">Label of input with warning</span>
+      <span class="CheckboxField__helperText">Helper text</span>
+      <ul class="CheckboxField__message">
+        <li>Warning validation message</li>
+        <li>Second warning validation message</li>
+      </ul>
+    </span>
+  </label>
   <label for="checkboxfield16" class="CheckboxField CheckboxField--disabled">
     <input type="checkbox" id="checkboxfield16" class="CheckboxField__input" value="Filled" disabled />
     <span class="CheckboxField__text">