[refs #206] Form elements styling

Started to add new NHS form styles to the form elements. Created a test page 'forms.njk' to replicate the teams designs.
nhsuk · Nov 20, 2018 · cdbb413 · cdbb413
1 parent 6446084
commit cdbb413
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 21 deletions.
diff --git a/docs/_templates/forms.njk b/docs/_templates/forms.njk
@@ -1,5 +1,6 @@
 {% from 'components/header/macro.njk' import header %}
 {% from 'components/skip-link/macro.njk' import skipLink %}
+{% from 'components/footer/macro.njk' import footer %}
 
 {% extends 'layout.njk' %}
 
@@ -9,7 +10,7 @@
 
 {% block body %}
   <div class="nhsuk-width-container">
-    <main id="maincontent" class="nhsuk-main-wrapper">
+    <main id="maincontent" class="nhsuk-main-wrapper {{ mainWrapperClass }}">
 
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
@@ -21,3 +22,42 @@
   </div>
 
 {% endblock %}
+
+{% block footer %}
+
+  {{ footer({
+    "primaryLinks": [
+      {
+        "URL": "https://www.nhs.uk/Pages/nhs-sites.aspx",
+        "label": "NHS sites"
+      },
+      {
+        "URL": "https://www.nhs.uk/about-us",
+        "label": "About us"
+      },
+      {
+        "URL": "https://www.nhs.uk/contact-us/",
+        "label": "Contact us"
+      },
+      {
+        "URL": "https://www.nhs.uk/Personalisation/Login.aspx",
+        "label": "Profile editor login"
+      }
+    ],
+    "secondaryLinks": [
+      {
+        "URL": "https://www.nhs.uk/about-us/sitemap/",
+        "label": "Sitemap"
+      },
+      {
+        'URL': 'https://www.nhs.uk/accessibility/',
+        'label': 'Accessibility'
+      },
+      {
+        "URL": "https://www.nhs.uk/our-policies/",
+        "label": "Our policies"
+      }
+    ]
+  })}}
+
+{% endblock %}
diff --git a/docs/pages/transactional-test-pages/index.njk b/docs/pages/transactional-test-pages/index.njk
@@ -0,0 +1,85 @@
+{% set title = 'Transactional test page - NHS.UK Frontend' %}
+{% from 'components/button/macro.njk' import button %}
+{% from 'components/details/macro.njk' import details %}
+{% from 'components/fieldset/macro.njk' import fieldset %}
+{% from 'components/hint/macro.njk' import hint %}
+{% from 'components/radios/macro.njk' import radios %}
+
+{% extends 'forms.njk' %}
+
+{% set mainWrapperClass = 'nhsuk-main-wrapper--s' %}
+
+{% block header %}
+  <!-- Skip link -->
+  {{ skipLink({
+    "URL": "#maincontent",
+    "heading": "Skip to main content"
+  }) }}
+
+  <!-- Header -->
+  {{ header({
+      "showNav": "false",
+      "showSearch": "false"
+    })
+  }}
+{% endblock %}
+
+{% block content %}
+
+<form>
+
+  <div class="nhsuk-form-group">
+
+    {{ fieldset({
+      "legend": {
+        "text": "Do you know your NHS number?",
+        "classes": "nhsuk-fieldset__legend--l",
+        "isPageHeading": true
+      }
+    }) }}
+
+    {{ details({
+      "classes": "nhsuk-!-margin-bottom-5",
+      "text": "Why we ask you for your number",
+      "HTML": "
+      <p>Only Rose Medical Practice sees the personal information you put in this application.</p>
+      "
+    }) }}
+
+    {{ hint({
+      "text": "This is a 10 digit number, like 485 777 3456."
+    }) }}
+
+    {{ hint({
+      "classes": "nhsuk-!-margin-bottom-5",
+      "text": "You can find it on any letter the NHS has sent you, on a prescription, or by logging in to a GP practice online service."
+    }) }}
+
+    {{ radios({
+      "idPrefix": "example",
+      "name": "example",
+      "items": [
+        {
+          "value": "yes",
+          "text": "Yes"
+        },
+        {
+          "value": "no",
+          "text": "No",
+          "checked": true
+        }
+      ]
+    }) }}
+
+  </div>
+
+  {{ button({
+    "text": "Continue"
+  }) }}
+
+  <p class="nhsuk-!-margin-bottom-0"><a href="#">Change my previous answer</a></p>
+
+</form>
+
+{% endblock %}
+
diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss
@@ -17,7 +17,7 @@ $button-shadow-size: 4px;
 .nhsuk-button {
   @include nhsuk-font(19);
   @include nhsuk-focusable;
-  @include nhsuk-responsive-margin(6, 'bottom', $adjustment: $button-shadow-size); // s1
+  @include nhsuk-responsive-margin(5, 'bottom', $adjustment: $button-shadow-size); // s1
 
   -webkit-appearance: none;
   background-color: $nhsuk-button-colour;
@@ -30,15 +30,11 @@ $button-shadow-size: 4px;
   display: inline-block;
   font-weight: 600;
   margin-top: 0;
-  padding: (nhsuk-spacing(2) - $nhsuk-border-width-form-element - ($button-shadow-size / 2)) nhsuk-spacing(2); // s2
+  padding: (nhsuk-spacing(3) - $nhsuk-border-width-form-element - ($button-shadow-size / 2)) nhsuk-spacing(3); // s2
   position: relative;
   text-align: center;
   vertical-align: top;
-  width: 100%;
-
-  @include mq($from: tablet) {
-    width: auto;
-  }
+  width: auto;
 
   /* 2 */
   &:link,

diff --git a/packages/components/checkboxes/_checkboxes.scss b/packages/components/checkboxes/_checkboxes.scss
@@ -54,8 +54,8 @@ $nhsuk-checkboxes-label-padding-left-right: nhsuk-spacing(3);
 }
 
 .nhsuk-checkboxes__input + .nhsuk-checkboxes__label::before {
-  background: transparent;
-  border: $nhsuk-border-width-form-element solid $color_nhsuk-black;
+  background: $nhsuk-form-element-background-color;
+  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
   box-sizing: border-box;
   content: '';
   height: $nhsuk-checkboxes-size;
@@ -129,7 +129,7 @@ $conditional-padding-left: $conditional-border-padding + $nhsuk-checkboxes-label
 
 .nhsuk-checkboxes__conditional {
   @include nhsuk-responsive-margin(4, 'bottom');
-  border-left: $conditional-border-width solid $color_nhsuk-black;
+  border-left: $conditional-border-width solid $nhsuk-form-border-color;
   margin-left: $conditional-margin-left;
   padding-left: $conditional-padding-left;
 

diff --git a/packages/components/details/_details.scss b/packages/components/details/_details.scss
@@ -19,7 +19,7 @@
 
 .nhsuk-details {
   @include nhsuk-text-color;
-  @include nhsuk-responsive-margin(6, 'bottom');
+  @include nhsuk-responsive-margin(4, 'bottom');
   @include nhsuk-typography-responsive(19);
   display: block;
 }

diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss
@@ -52,7 +52,7 @@
   font-weight: $nhsuk-font-bold;
   margin-top: 0;
 
-  @include nhsuk-responsive-margin(4, 'bottom');
+  @include nhsuk-responsive-margin(5, 'bottom');
 }
 
 .nhsuk-fieldset__legend--m {

diff --git a/packages/components/radios/_radios.scss b/packages/components/radios/_radios.scss
@@ -8,7 +8,7 @@
  */
 
 $nhsuk-radios-size: nhsuk-spacing(6);
-$nhsuk-radios-label-padding-left-right: nhsuk-spacing(3);
+$nhsuk-radios-label-padding-left-right: nhsuk-spacing(2);
 // When the default focus width is used on a curved edge it looks visually smaller.
 // So for the circular radios we bump the default to make it look visually consistent.
 $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
@@ -57,8 +57,8 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
 }
 
 .nhsuk-radios__input + .nhsuk-radios__label::before {
-  background: transparent;
-  border: $nhsuk-border-width-form-element solid $color_nhsuk-black;
+  background: $nhsuk-form-element-background-color;
+  border: $nhsuk-border-width-form-element solid $nhsuk-form-border-color;
   border-radius: 50%;
   box-sizing: border-box;
   content: '';
@@ -70,8 +70,8 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
 }
 
 .nhsuk-radios__input + .nhsuk-radios__label::after {
-  background: $color_nhsuk-black;
-  border: 10px solid $color_nhsuk-black;
+  background: $nhsuk-form-border-color;
+  border: 10px solid $nhsuk-text-color;
   border-radius: 50%;
   content: '';
   height: 0;
@@ -144,7 +144,7 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
   $nhsuk-divider-size: $nhsuk-radios-size !default;
   @include nhsuk-font(19);
 
-  color: $color_nhsuk-black;
+  color: $nhsuk-text-color;
   margin-bottom: nhsuk-spacing(2);
   text-align: center;
   width: $nhsuk-divider-size;
@@ -162,7 +162,7 @@ $conditional-padding-left: $conditional-border-padding + $nhsuk-radios-label-pad
 
 .nhsuk-radios__conditional {
   @include nhsuk-responsive-margin(4, 'bottom');
-  border-left: $conditional-border-width solid $color_nhsuk-black;
+  border-left: $conditional-border-width solid $nhsuk-form-border-color;
   margin-left: $conditional-margin-left;
   padding-left: $conditional-padding-left;
 

diff --git a/packages/core/objects/_form-group.scss b/packages/core/objects/_form-group.scss
@@ -1,5 +1,5 @@
 .nhsuk-form-group {
-  @include nhsuk-responsive-margin(6, 'bottom');
+  @include nhsuk-responsive-margin(5, 'bottom');
 
   .nhsuk-form-group:last-of-type {
     margin-bottom: 0; // Remove margin from last item in nested groups

diff --git a/packages/core/objects/_main-wrapper.scss b/packages/core/objects/_main-wrapper.scss
@@ -24,6 +24,7 @@
 @mixin govuk-main-wrapper {
   @include nhsuk-responsive-padding(7, 'top');
   @include nhsuk-responsive-padding(7, 'bottom');
+  @include top-and-bottom();
   display: block; /* [1] */
 }
 
@@ -39,4 +40,10 @@
   .nhsuk-main-wrapper {
     @include govuk-main-wrapper;
   }
+  .nhsuk-main-wrapper--l {
+    @include govuk-main-wrapper--l;
+  }
+  .nhsuk-main-wrapper--s {
+    @include govuk-main-wrapper--s;
+  }
 }
diff --git a/packages/core/settings/_colours.scss b/packages/core/settings/_colours.scss
@@ -133,6 +133,7 @@ $nhsuk-box-shadow-color: $color_nhsuk-grey-1-rgb;
 
 $nhsuk-error-color: $color_nhsuk-red;
 $nhsuk-form-border-color: $color_nhsuk-grey-1;
+$nhsuk-form-element-background-color: $color_nhsuk-white;
 
 //
 // Buttons