add example pattern for documentation (#2834)

* add example pattern for documentation * remove unused imports * approve visual tests * approve visual tests * resolve Pr comments * approve visual tests * update test
ONSdigital · Oct 16, 2023 · 5e7296a · 5e7296a
1 parent 2cf9dd7
commit 5e7296a
Show file tree

Hide file tree

Showing 37 changed files with 113 additions and 58 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/...atterns_error-status-pages_example-access-denied-error_0_document_0_desktop.png b/...atterns_error-status-pages_example-access-denied-error_0_document_0_desktop.png
diff --git a/...patterns_error-status-pages_example-access-denied-error_0_document_1_tablet.png b/...patterns_error-status-pages_example-access-denied-error_0_document_1_tablet.png
diff --git a/...patterns_error-status-pages_example-access-denied-error_0_document_2_mobile.png b/...patterns_error-status-pages_example-access-denied-error_0_document_2_mobile.png
diff --git a/..._error-status-pages_example-browser-incompatible-error_0_document_0_desktop.png b/..._error-status-pages_example-browser-incompatible-error_0_document_0_desktop.png
diff --git a/...s_error-status-pages_example-browser-incompatible-error_0_document_1_tablet.png b/...s_error-status-pages_example-browser-incompatible-error_0_document_1_tablet.png
diff --git a/...s_error-status-pages_example-browser-incompatible-error_0_document_2_mobile.png b/...s_error-status-pages_example-browser-incompatible-error_0_document_2_mobile.png
diff --git a/...patterns_error-status-pages_example-maintenance-notice_0_document_0_desktop.png b/...patterns_error-status-pages_example-maintenance-notice_0_document_0_desktop.png
diff --git a/..._patterns_error-status-pages_example-maintenance-notice_0_document_1_tablet.png b/..._patterns_error-status-pages_example-maintenance-notice_0_document_1_tablet.png
diff --git a/..._patterns_error-status-pages_example-maintenance-notice_0_document_2_mobile.png b/..._patterns_error-status-pages_example-maintenance-notice_0_document_2_mobile.png
diff --git a/...or-status-pages_example-page-not-found-error-with-code_0_document_0_desktop.png b/...or-status-pages_example-page-not-found-error-with-code_0_document_0_desktop.png
diff --git a/...ror-status-pages_example-page-not-found-error-with-code_0_document_1_tablet.png b/...ror-status-pages_example-page-not-found-error-with-code_0_document_1_tablet.png
diff --git a/...ror-status-pages_example-page-not-found-error-with-code_0_document_2_mobile.png b/...ror-status-pages_example-page-not-found-error-with-code_0_document_2_mobile.png
diff --git a/...tterns_error-status-pages_example-page-not-found-error_0_document_0_desktop.png b/...tterns_error-status-pages_example-page-not-found-error_0_document_0_desktop.png
diff --git a/...atterns_error-status-pages_example-page-not-found-error_0_document_1_tablet.png b/...atterns_error-status-pages_example-page-not-found-error_0_document_1_tablet.png
diff --git a/...atterns_error-status-pages_example-page-not-found-error_0_document_2_mobile.png b/...atterns_error-status-pages_example-page-not-found-error_0_document_2_mobile.png
diff --git a/...test__patterns_error-status-pages_example-server-error_0_document_0_desktop.png b/...test__patterns_error-status-pages_example-server-error_0_document_0_desktop.png
diff --git a/...-test__patterns_error-status-pages_example-server-error_0_document_1_tablet.png b/...-test__patterns_error-status-pages_example-server-error_0_document_1_tablet.png
diff --git a/...-test__patterns_error-status-pages_example-server-error_0_document_2_mobile.png b/...-test__patterns_error-status-pages_example-server-error_0_document_2_mobile.png
diff --git a/...ror-status-pages_example-timed-out-error-not-signed-in_0_document_0_desktop.png b/...ror-status-pages_example-timed-out-error-not-signed-in_0_document_0_desktop.png
diff --git a/...rror-status-pages_example-timed-out-error-not-signed-in_0_document_1_tablet.png b/...rror-status-pages_example-timed-out-error-not-signed-in_0_document_1_tablet.png
diff --git a/...rror-status-pages_example-timed-out-error-not-signed-in_0_document_2_mobile.png b/...rror-status-pages_example-timed-out-error-not-signed-in_0_document_2_mobile.png
diff --git a/...t__patterns_error-status-pages_example-timed-out-error_0_document_0_desktop.png b/...t__patterns_error-status-pages_example-timed-out-error_0_document_0_desktop.png
diff --git a/...st__patterns_error-status-pages_example-timed-out-error_0_document_1_tablet.png b/...st__patterns_error-status-pages_example-timed-out-error_0_document_1_tablet.png
diff --git a/...st__patterns_error-status-pages_example-timed-out-error_0_document_2_mobile.png b/...st__patterns_error-status-pages_example-timed-out-error_0_document_2_mobile.png
diff --git a/...oduction-page_example-survey-section-introduction-page_0_document_0_desktop.png b/...oduction-page_example-survey-section-introduction-page_0_document_0_desktop.png
diff --git a/...roduction-page_example-survey-section-introduction-page_0_document_1_tablet.png b/...roduction-page_example-survey-section-introduction-page_0_document_1_tablet.png
diff --git a/...roduction-page_example-survey-section-introduction-page_0_document_2_mobile.png b/...roduction-page_example-survey-section-introduction-page_0_document_2_mobile.png
diff --git a/src/patterns/error-status-pages/example-access-denied-error.njk b/src/patterns/error-status-pages/example-access-denied-error.njk
@@ -12,5 +12,5 @@ layout: ~
 } %}
 {% block main %}
     <h1>Sorry, there is a problem</h1>
-    <p>To access this page you need to <a href="#0">sign in</a>.</p>
+    <p>To access this page, you need to <a href="#0">sign in</a>.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-browser-incompatible-error.njk b/src/patterns/error-status-pages/example-browser-incompatible-error.njk
@@ -14,5 +14,5 @@ layout: ~
     <h1>There is a problem with your browser</h1>
     <p>Try updating your browser to a new version.</p>
     <p>If the problem still occurs, try using a different browser or device.</p>
-    <p><a href="#0">Contact us</a> if you need help.</p>
+    <p>If you need help, <a href="#0">contact us</a>.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-maintenance-notice.njk b/src/patterns/error-status-pages/example-maintenance-notice.njk
@@ -14,5 +14,5 @@ layout: ~
     <h1>This service is temporarily unavailable</h1>
     <p>We are undergoing planned maintenance.</p>
     <p>You will be able to use this service again from:<br><strong>9am on Monday 19 November 2019</strong></p>
-    <p><a href="#0">Contact us</a> if you need to speak to someone about your survey.</p>
+    <p>If you need to speak to someone about your survey, <a href="#0">contact us</a>.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-page-not-found-error-with-code.njk b/src/patterns/error-status-pages/example-page-not-found-error-with-code.njk
@@ -17,7 +17,7 @@ layout: ~
     <h1>Page not found</h1>
     <p>If you entered a web address, check it is correct.</p>
     <p>If you pasted the web address, check you copied the whole address.</p>
-    <p>If the web address is correct or you selected a link or button, <a href="#0">contact us</a> for more help.</p>
+    <p>If the web address is correct, or you selected a link or button, <a href="#0">contact us</a>.</p>
 
     {% call onsPanel() %}
         <p>You will need the following reference code when you contact us:

diff --git a/src/patterns/error-status-pages/example-page-not-found-error.njk b/src/patterns/error-status-pages/example-page-not-found-error.njk
@@ -14,5 +14,5 @@ layout: ~
     <h1>Page not found</h1>
     <p>If you entered a web address, check it is correct.</p>
     <p>If you pasted the web address, check you copied the whole address.</p>
-    <p>If the web address is correct or you selected a link or button, <a href="#0">contact us</a> for more help.</p>
+    <p>If the web address is correct, or you selected a link or button, <a href="#0">contact us</a>.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-server-error.njk b/src/patterns/error-status-pages/example-server-error.njk
@@ -14,5 +14,5 @@ layout: ~
     <h1>Sorry, there is a problem with the service</h1>
     <p>Try again later.</p>
     <p>If you have started a survey, your answers have been saved.</p>
-    <p><a href="#0">Contact us</a> if you need to speak to someone about your survey.</p>
+    <p>If you need to speak to someone about your survey, <a href="#0">contact us</a>.</p>
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-timed-out-error-not-signed-in.njk b/src/patterns/error-status-pages/example-timed-out-error-not-signed-in.njk
@@ -32,6 +32,6 @@ layout: ~
         })
     }}
 
-    <p>You need to <a href="#0">start again</a> to request a new access code</p>
+    <p>To request a new access code, you need to <a href="#0">start again</a>.</p>
 
 {% endblock %}
diff --git a/src/patterns/error-status-pages/example-timed-out-error.njk b/src/patterns/error-status-pages/example-timed-out-error.njk
@@ -35,6 +35,6 @@ layout: ~
         })
     }}
 
-    <p>You will need to <a href="#0">sign back in</a> to access your account</p>
+    <p>To access your account, you will need to <a href="#0">sign back in</a>.</p>
 
 {% endblock %}
diff --git a/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk b/src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk
@@ -0,0 +1,46 @@
+---
+title: "Example: Survey section introduction page"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/button/_macro.njk" import onsButton %}
+
+{% set pageConfig = {
+        "header": {
+            "title": "Service name"
+        },
+        "footer": {
+            "rows": [
+                {
+                    "itemsList": [
+                        {
+                            "text": "Accessibility",
+                            "url": "#0"
+                        },
+                        {
+                            "text": "Privacy",
+                            "url": "#0"
+                        }
+                    ]
+                }
+            ]
+        }
+    } 
+%}
+
+{% block main %}
+    <div class="ons-page__body">
+        <h1 class="ons-u-fs-xxl">Income</h1>
+
+        <p>This section asks for information regarding your business's income. This includes questions about total turnover and environmental turnover.</p>
+        <p>This section requires figures for business activity within <strong>GB</strong>. Exclude Nothern Ireland business activity.</p>
+
+        {{ 
+            onsButton({
+            "classes": 'ons-u-mb-m ons-u-mt-l',
+            "text": 'Continue'
+            }) 
+        }}
+
+    </div>
+{% endblock %}