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 <[email protected]> * Update src/patterns/names/example-name-multiple-input-field.njk Co-authored-by: rmccar <[email protected]> * Update src/patterns/names/example-name-single-input-field.njk Co-authored-by: rmccar <[email protected]> * Update src/patterns/names/example-name-single-input-field.njk Co-authored-by: rmccar <[email protected]> --------- Co-authored-by: rmccar <[email protected]>
ONSdigital · Dec 7, 2023 · 053db27 · 053db27
1 parent a96779c
commit 053db27
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 6 deletions.
diff --git a/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
diff --git a/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
diff --git a/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
diff --git a/...test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png b/...test__patterns_names_example-name-multiple-input-field_0_document_0_desktop.png
diff --git a/...-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png b/...-test__patterns_names_example-name-multiple-input-field_0_document_1_tablet.png
diff --git a/...-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png b/...-test__patterns_names_example-name-multiple-input-field_0_document_2_mobile.png
diff --git a/...r-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png b/...r-test__patterns_names_example-name-single-input-field_0_document_0_desktop.png
diff --git a/...vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png b/...vr-test__patterns_names_example-name-single-input-field_0_document_1_tablet.png
diff --git a/...vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png b/...vr-test__patterns_names_example-name-single-input-field_0_document_2_mobile.png
diff --git a/src/patterns/names/example-name-multiple-input-field.njk 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
@@ -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 %}