From 053db2785e9c38b5cfbb076a9773ef4ea1fc150e Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya
 <86783201+precious-onyenaucheya-ons@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:53:01 +0000
Subject: [PATCH] add example for names pattern (#2972)

* add example and update visual tests

* add example and update visual tests

* remove page config from example and update visual tests

* Update src/patterns/names/example-name-multiple-input-field.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* Update src/patterns/names/example-name-multiple-input-field.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* Update src/patterns/names/example-name-single-input-field.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* Update src/patterns/names/example-name-single-input-field.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

---------

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
---
 ...h-timeout-warning_0_document_0_desktop.png |  4 +-
 ...th-timeout-warning_0_document_1_tablet.png |  4 +-
 ...th-timeout-warning_0_document_2_mobile.png |  4 +-
 ...tiple-input-field_0_document_0_desktop.png |  3 ++
 ...ltiple-input-field_0_document_1_tablet.png |  3 ++
 ...ltiple-input-field_0_document_2_mobile.png |  3 ++
 ...ingle-input-field_0_document_0_desktop.png |  3 ++
 ...single-input-field_0_document_1_tablet.png |  3 ++
 ...single-input-field_0_document_2_mobile.png |  3 ++
 .../example-name-multiple-input-field.njk     | 40 +++++++++++++++++++
 .../names/example-name-single-input-field.njk | 23 +++++++++++
 11 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png
 create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png
 create mode 100644 src/patterns/names/example-name-multiple-input-field.njk
 create mode 100644 src/patterns/names/example-name-single-input-field.njk

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
index 7f20b39e92..6ff63d5d1d 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67986068c453ec5534fd2138bd3974e43a6b837e2603416495be0e48679a66d6
-size 17441
+oid sha256:47df53d9a4630fa991d39f9420d0920c814cbf2b78891da45b678b1f45452b04
+size 17486
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
index e57dee7bd7..38d3cec173 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8cb52531d1d281043cf0541c3c8d2a5b93bbc00c3d2a60d1244b4949a954c265
-size 13505
+oid sha256:255ba5261f88e83a8fb612ac518ba06379e3d196a20b65f9d17e2b856fe84124
+size 13594
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
index 2695f0770a..f0f681a56c 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca21587d7e4bf313e46414c7c484509716ee93ad9d66e7b02efc844b2757bb25
-size 13752
+oid sha256:f67e4ca5163a3770c17f4768fd548fc4e4ac0099d5cef4330b6176ee7c5174f2
+size 13805
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png
new file mode 100644
index 0000000000..b8b8e13564
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:20a88d21ba4dc29f691143935a403d717a641bef0b315c00b09a1b945ff5d6e7
+size 26155
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png
new file mode 100644
index 0000000000..bf6c615823
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c0741c7b50209324925b579a434737a359a84d757b6ad4da7901d9edc571ba59
+size 20540
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png
new file mode 100644
index 0000000000..90e245f11a
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a340c50c984b516c7a7ac9a615f4234f11b70d102e4e332b24c500896c3e4609
+size 16169
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png
new file mode 100644
index 0000000000..b211db2697
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fca69e3ae1a55079af59383132b0159a5bfbb83e0b23287a7a328fee38944838
+size 21419
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png
new file mode 100644
index 0000000000..b2c6e359ea
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d1ca41d90253bb1984f33d73ee4387e01ffe97b39e4234f42d996c6bdf37ffe6
+size 16035
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png
new file mode 100644
index 0000000000..fa0140fd3d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13241d948ca30af948e2fe7b2aba7df71bffe746de10a7128b4739903c69dcb9
+size 11940
diff --git a/src/patterns/names/example-name-multiple-input-field.njk b/src/patterns/names/example-name-multiple-input-field.njk
new file mode 100644
index 0000000000..4186b09691
--- /dev/null
+++ b/src/patterns/names/example-name-multiple-input-field.njk
@@ -0,0 +1,40 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": "What is your name?",
+        "legendIsQuestionTitle": true,
+        "submitButton": true
+    }) %}
+        <form action="#0">
+            {{
+                onsInput({
+                    "id": "first-name",
+                    "name": "first-name",
+                    "label": {
+                        "text": "First name"
+                    }
+                })
+            }}
+            {{
+                onsInput({
+                    "id": "middle-names",
+                    "type": "middle-names",
+                    "label": {
+                        "text": "Middle names"
+                    }
+                })
+            }}
+            {{
+                onsInput({
+                    "id": "last-name",
+                    "name": "last-name",
+                    "label": {
+                        "text": "Last name"
+                    }
+                })
+            }}
+        </form>
+    {% endcall %}
+{% endblock %}
diff --git a/src/patterns/names/example-name-single-input-field.njk b/src/patterns/names/example-name-single-input-field.njk
new file mode 100644
index 0000000000..f25cedb2b9
--- /dev/null
+++ b/src/patterns/names/example-name-single-input-field.njk
@@ -0,0 +1,23 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": "What is your name?",
+        "legendIsQuestionTitle": true,
+        "submitButton": true
+    }) %}
+        <form action="#0">
+            {{
+                onsInput({
+                    "id": "fullname-example-input",
+                    "type": "full-name",
+                    "autocomplete": "full-name",
+                    "label": {
+                        "text": "Full name"
+                    }
+                })
+            }}
+        </form>
+    {% endcall %}
+{% endblock %}