From 5809edb21ef2724517b6a14cb625f2a0b0ccf7f8 Mon Sep 17 00:00:00 2001
From: Will Cowen <131372109+willcAND@users.noreply.github.com>
Date: Fri, 28 Jul 2023 13:50:28 +0100
Subject: [PATCH] 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 <angus.goody@gmail.com>
---
 ...ple-address-input_0_document_0_desktop.png |  2 +-
 ...nput-non-editable_0_document_0_desktop.png |  4 +--
 ...mple-conversation_0_document_0_desktop.png |  4 +--
 ...ample-conversation_0_document_1_tablet.png |  4 +--
 ...ample-conversation_0_document_2_mobile.png |  4 +--
 src/components/reply/_macro-options.md        | 28 +++++++++++++------
 src/components/reply/_macro.njk               |  7 +++--
 src/components/reply/_macro.spec.js           |  8 +++++-
 .../example-conversation.njk                  |  9 +++++-
 9 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png
index 7e1e9cd8a9..0e4dde8f24 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_address-input_example-address-input_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:adbc655989c6f476668ab856e7406fedf388bfd248217d1753f808dfe8065a9a
+oid sha256:6aefd9431b89251c3b90e1a85c1f8bc357dace7b48e2a429f6f243b86ccbb6de
 size 25118
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png
index 6ccb7415ea..ad6ce1470f 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_addresses_example-address-input-non-editable_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c8ba5da87ec7d1344fb9c1f699ea26f3a1f0509082a2b01c7470e8353b3f21e5
-size 46082
+oid sha256:ad63e16ff1f136f2fdf96f33cc1babcdddae1ec3bb0f9835683ae39423c0ce0f
+size 46079
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png
index ed31c41fb9..315efb4e4f 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bba1af30973fc1e3c043334d9b4db9d97f0465da48209d46c63cbf9abe1a60c9
-size 139118
+oid sha256:92f6c44b0d95451046cdb195d1adafd35b8a859c1dd35712bf1793f1308fe9a2
+size 143866
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png
index ae22d46f03..a2184576a9 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cf0bfb82b247b2adc109df0d601e203cf53a01794dfb7624a2c91073d874fb80
-size 142548
+oid sha256:ccdec5b3a8444a73b39a7aa4fe110cdc929e76cc61f0d261ba520c12f1a867d6
+size 147346
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png
index cad9dcb8a4..315e5cc38a 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_send-and-reply-to-messages_example-conversation_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddcc4826107a23c016eda57272325b6fb66642f2789aa60ca53a7c79280f4670
-size 138524
+oid sha256:aefc265e1a334feabc520bec2f925cf7cfad4e68cd5e69b9f90541b1bd63f9e5
+size 143426
diff --git a/src/components/reply/_macro-options.md b/src/components/reply/_macro-options.md
index 4673d213c2..40a851ec09 100644
--- 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
index 3f5c2656e9..1a93b643be 100644
--- 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
index 0081ec14cc..e785627fcc 100644
--- 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
index 9aa986d803..d4af1729e4 100644
--- 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": {