Pattern/1643/confirmation page (#2723)

* feat: pattern skeleton built out * feat: added components to complete pattern * test: new visual regression reference images
ONSdigital · Jul 17, 2023 · 9d249d2 · 9d249d2
1 parent 1e295b3
commit 9d249d2
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/...__patterns_confirmation-page_example-confirmation-page_0_document_0_desktop.png b/...__patterns_confirmation-page_example-confirmation-page_0_document_0_desktop.png
diff --git a/...t__patterns_confirmation-page_example-confirmation-page_0_document_1_tablet.png b/...t__patterns_confirmation-page_example-confirmation-page_0_document_1_tablet.png
diff --git a/...t__patterns_confirmation-page_example-confirmation-page_0_document_2_mobile.png b/...t__patterns_confirmation-page_example-confirmation-page_0_document_2_mobile.png
diff --git a/src/patterns/confirmation-page/example-confirmation-page.njk b/src/patterns/confirmation-page/example-confirmation-page.njk
@@ -0,0 +1,69 @@
+---
+title: "Example: Conformation page"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/feedback/_macro.njk" import onsFeedback %}
+
+{% set pageConfig = {
+        "header": {
+            "title": "Online Household Study"
+        },
+        "footer": {
+            "rows": [
+                {
+                    "itemsList": [
+                        {
+                            "text": "Accessibility",
+                            "url": "#0"
+                        },
+                        {
+                            "text": "Privacy",
+                            "url": "#0"
+                        }
+                    ]
+                }
+            ]
+        }
+    } 
+%}
+
+{% block main %}
+    <div class="ons-page__body">
+
+        {% call onsPanel({
+                "type": 'success',
+                "id": 'success-id',
+                "iconType": 'check',
+                "iconSize": "l"
+            })
+        %}
+        <h2>Thank you for completing the Online Household Study</h2>
+        <p>Your answers have been submitted</p>
+        {% endcall %}
+
+        {% call onsPanel({
+                "type": 'bare',
+                "iconType": 'lock'
+            })
+        %}
+        <p>Your personal information is protected by law and will be kept confidential</p>
+        {% endcall %}
+
+        <div class="ons-grid ons-u-mt-l">
+            <div class="ons-grid__col ons-col-8@m">
+                {{
+                    onsFeedback({
+                        "heading": "What do you think about this service?",
+                        "headingClasses": 'test',
+                        "content": "Your comments will help us make improvements",
+                        "url": "#0",
+                        "linkText": "Give feedback"
+                    })
+                }}
+            </div>
+        </div>
+
+    </div>
+{% endblock %}