[refs #206] add all GOV.UK form elements

Add all of the GOV.UK form elements with individual examples, macros and documentation. Ready for overlaying the NHS styles to create our own form elements.
nhsuk · Nov 15, 2018 · d7cb2ba · d7cb2ba
1 parent c6e34e8
commit d7cb2ba
Show file tree

Hide file tree

Showing 103 changed files with 5,143 additions and 9 deletions.
diff --git a/docs/_templates/forms.njk b/docs/_templates/forms.njk
@@ -0,0 +1,23 @@
+{% from 'components/header/macro.njk' import header %}
+{% from 'components/skip-link/macro.njk' import skipLink %}
+
+{% extends 'layout.njk' %}
+
+{% block header %}
+{% endblock %}
+
+
+{% block body %}
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {% block content %}{% endblock %}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/back-link/index.njk b/docs/components/back-link/index.njk
@@ -0,0 +1,23 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Back link' %}
+{% from 'components/back-link/macro.njk' import backLink %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ backLink({
+            "href": "#",
+            "text": "Back to home"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/disabled.njk b/docs/components/button/disabled.njk
@@ -0,0 +1,22 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button disabled' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Disabled button",
+            "disabled": true
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/index.njk b/docs/components/button/index.njk
@@ -0,0 +1,21 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Save and continue"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/reverse-disabled.njk b/docs/components/button/reverse-disabled.njk
@@ -0,0 +1,25 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button reverse' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <style>body { background-color: #005eb8; }</style>
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Save and continue",
+            "classes": "nhsuk-button--reverse",
+            "disabled": true
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/reverse.njk b/docs/components/button/reverse.njk
@@ -0,0 +1,24 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button reverse' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <style>body { background-color: #005eb8; }</style>
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Save and continue",
+            "classes": "nhsuk-button--reverse"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/secondary-disabled.njk b/docs/components/button/secondary-disabled.njk
@@ -0,0 +1,23 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button secondary disabled' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Find my location",
+            "classes": "nhsuk-button--secondary",
+            "disabled": true
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/button/secondary.njk b/docs/components/button/secondary.njk
@@ -0,0 +1,22 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Button secondary' %}
+{% from 'components/button/macro.njk' import button %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ button({
+            "text": "Find my location",
+            "classes": "nhsuk-button--secondary"
+          }) }}
+        </div>
+      </div>
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/checkboxes/disabled.njk b/docs/components/checkboxes/disabled.njk
@@ -0,0 +1,37 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Checkboxes with disabled item' %}
+{% from 'components/checkboxes/macro.njk' import checkboxes %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ checkboxes({
+            "name": "colours",
+            "items": [
+              {
+                "value": "red",
+                "text": "Red"
+              },
+              {
+                "value": "green",
+                "text": "Green"
+              },
+              {
+                "value": "blue",
+                "text": "Blue",
+                "disabled": true
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/checkboxes/error.njk b/docs/components/checkboxes/error.njk
@@ -0,0 +1,44 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Checkboxes with error messages' %}
+{% from 'components/checkboxes/macro.njk' import checkboxes %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ checkboxes({
+            "name": "waste",
+            "errorMessage": {
+              "text": "Please select an option"
+            },
+            "fieldset": {
+              "legend": {
+                "text": "Which types of waste do you transport regularly?"
+              }
+            },
+            "items": [
+              {
+                "value": "animal",
+                "text": "Waste from animal carcasses"
+              },
+              {
+                "value": "mines",
+                "text": "Waste from mines or quarries"
+              },
+              {
+                "value": "farm",
+                "text": "Farm or agricultural waste"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/checkboxes/hint.njk b/docs/components/checkboxes/hint.njk
@@ -0,0 +1,47 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Checkboxes with hint text' %}
+{% from 'components/checkboxes/macro.njk' import checkboxes %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ checkboxes({
+            "fieldset": {
+              "legend": {
+                "text": "How do you want to sign in?",
+                "isPageHeading": true
+              }
+            },
+            "items": [
+              {
+                "name": "gateway",
+                "id": "government-gateway",
+                "value": "gov-gateway",
+                "text": "Sign in with Government Gateway",
+                "hint": {
+                  "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
+                }
+              },
+              {
+                "name": "verify",
+                "id": "nhsuk-login",
+                "value": "nhsuk-verify",
+                "text": "Sign in with NHS.UK Login",
+                "hint": {
+                  "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+                }
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}
diff --git a/docs/components/checkboxes/index.njk b/docs/components/checkboxes/index.njk
@@ -0,0 +1,45 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Checkboxes' %}
+{% from 'components/checkboxes/macro.njk' import checkboxes %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main id="maincontent" class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ checkboxes({
+            "idPrefix": "nationality",
+            "name": "nationality",
+            "fieldset": {
+              "legend": {
+                "text": "What is your nationality?"
+              }
+            },
+            "hint": {
+              "text": "If you have dual nationality, select all options that are relevant to you."
+            },
+            "items": [
+              {
+                "value": "british",
+                "text": "British"
+              },
+              {
+                "value": "irish",
+                "text": "Irish"
+              },
+              {
+                "value": "other",
+                "text": "Citizen of another country"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}