Enhancement/2176/options for reply component (#2761)

* Added extra text area params inside reply component * removed char check counter from example * fixing VR snaps * added description and charcheck limit * fixing VR tests --------- Co-authored-by: Angus Goody <[email protected]>
ONSdigital · Jul 28, 2023 · 5809edb · 5809edb
1 parent d2ce3aa
commit 5809edb
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 21 deletions.
diff --git a/...r-test__components_address-input_example-address-input_0_document_0_desktop.png b/...r-test__components_address-input_example-address-input_0_document_0_desktop.png
diff --git a/..._patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png b/..._patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png
diff --git a/...tterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png b/...tterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png
diff --git a/...atterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png b/...atterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png
diff --git a/...atterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png b/...atterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png
diff --git a/src/components/reply/_macro-options.md b/src/components/reply/_macro-options.md
@@ -7,17 +7,20 @@
 
 ## Textarea
 
-| Name  | Type            | Required | Description                                                                                                          |
-| ----- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| id    | string          | true     | The HTML `id` of the textarea. This used for the label’s `for` attribute.                                            |
-| name  | string          | false    | The HTML `name` attribute for the textarea                                                                           |
-| label | `Object<Label>` | true     | Settings for the input [label](#label). The HTML `for` attribute will automatically be set to match the textarea id. |
+| Name           | Type                     | Required | Description                                                                                                          |
+| -------------- | ------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------- |
+| id             | string                   | true     | The HTML `id` of the textarea. This used for the label’s `for` attribute.                                            |
+| name           | string                   | false    | The HTML `name` attribute for the textarea                                                                           |
+| label          | `Object<Label>`          | true     | Settings for the input [label](#label). The HTML `for` attribute will automatically be set to match the textarea id. |
+| rows           | integer                  | false    | Sets the height of the textarea by number of rows. Defaults to “8”.                                                  |
+| charCheckLimit | Object`<CharCheckLimit>` | false    | Settings for the textarea [character limit counter](#charchecklimit)                                                 |
 
 ## Label
 
-| Name | Type   | Required | Description                   |
-| ---- | ------ | -------- | ----------------------------- |
-| text | string | true     | The text content of the label |
+| Name        | Type   | Required | Description                               |
+| ----------- | ------ | -------- | ----------------------------------------- |
+| text        | string | true     | The text content of the label             |
+| description | string | false    | Hint text to help users fill in the input |
 
 ## Button
 
@@ -27,3 +30,12 @@
 | type    | string | false    | Sets the HTML `type` attribute for the `<button>`. Can be set to either: “button”, “submit” or “reset”. Defaults to “submit”. |
 | id      | string | false    | Sets the HTML `id` attribute for the button                                                                                   |
 | classes | string | false    | Classes to add to the button component                                                                                        |
+
+## CharCheckLimit
+
+| Name              | Type    | Required | Description                                                                                                                                                                                        |
+| ----------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| id                | string  | true     | The HTML `id` of the component                                                                                                                                                                     |
+| limit             | integer | true     | The maximum number of characters allowed in the input                                                                                                                                              |
+| charCountPlural   | string  | true     | The string displayed when multiple characters can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} characters remaining”. |
+| charCountSingular | string  | true     | The string displayed when one more character can be entered before the limit is reached. Set `{x}` in the string to be replaced with the number, for example “You have {x} character remaining”.   |
diff --git a/src/components/reply/_macro.njk b/src/components/reply/_macro.njk
@@ -7,8 +7,11 @@
                 "id": params.textarea.id,
                 "name": params.textarea.name,
                 "label": {
-                    "text": params.textarea.label.text
-                }
+                    "text": params.textarea.label.text,
+                    "description": params.textarea.label.description
+                },
+                "charCheckLimit": params.textarea.charCheckLimit,
+                "rows": params.textarea.rows
             })
         }}
         <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">

diff --git a/src/components/reply/_macro.spec.js b/src/components/reply/_macro.spec.js
@@ -10,7 +10,14 @@ const EXAMPLE_TEXTAREA = {
   name: 'reply',
   label: {
     text: 'Reply',
+    description: 'Reply description',
   },
+  charCheckLimit: {
+      limit: 300,
+      charCountSingular: '{x} more character needed',
+      charCountPlural: '{x} more characters needed',
+  },
+  rows: 5,
 };
 
 const EXAMPLE_BUTTON = {
@@ -40,7 +47,6 @@ describe('macro: reply', () => {
     const textareaSpy = faker.spy('textarea');
 
     cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
-
     expect(textareaSpy.occurrences[0]).toEqual(EXAMPLE_TEXTAREA);
   });
 

diff --git a/src/patterns/send-and-reply-to-messages/example-conversation.njk b/src/patterns/send-and-reply-to-messages/example-conversation.njk
@@ -104,7 +104,14 @@
                         "id": "reply",
                         "name": "reply",
                         "label": {
-                            "text": "Reply"
+                            "text": "Reply",
+                            "description": "Maximum 300 characters"
+                        },
+                        "rows": 3,
+                        "charCheckLimit": {
+                            "limit": 300,
+                            "charCountSingular": "You have {x} character remaining",
+                            "charCountPlural": "You have {x} characters remaining"
                         }
                     },
                     "button": {