From cdbb413b45acd0a27190ac767ba2e41aff47852a Mon Sep 17 00:00:00 2001 From: davidhunter08 Date: Tue, 20 Nov 2018 18:09:01 +0000 Subject: [PATCH] [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. --- docs/_templates/forms.njk | 42 ++++++++- docs/pages/transactional-test-pages/index.njk | 85 +++++++++++++++++++ packages/components/button/_button.scss | 10 +-- .../components/checkboxes/_checkboxes.scss | 6 +- packages/components/details/_details.scss | 2 +- packages/components/fieldset/_fieldset.scss | 2 +- packages/components/radios/_radios.scss | 14 +-- packages/core/objects/_form-group.scss | 2 +- packages/core/objects/_main-wrapper.scss | 7 ++ packages/core/settings/_colours.scss | 1 + 10 files changed, 150 insertions(+), 21 deletions(-) create mode 100644 docs/pages/transactional-test-pages/index.njk diff --git a/docs/_templates/forms.njk b/docs/_templates/forms.njk index 258441b76..03e1704ff 100644 --- 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 %}
-
+
@@ -21,3 +22,42 @@
{% 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 new file mode 100644 index 000000000..d52c57944 --- /dev/null +++ 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 %} + + {{ skipLink({ + "URL": "#maincontent", + "heading": "Skip to main content" + }) }} + + + {{ header({ + "showNav": "false", + "showSearch": "false" + }) + }} +{% endblock %} + +{% block content %} + +
+ +
+ + {{ 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": " +

Only Rose Medical Practice sees the personal information you put in this application.

+ " + }) }} + + {{ 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 + } + ] + }) }} + +
+ + {{ button({ + "text": "Continue" + }) }} + +

Change my previous answer

+ +
+ +{% endblock %} + diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss index 514e11145..6b4347a23 100644 --- 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 index d637fa6e6..492efd895 100644 --- 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 index f68b1809e..d13899a00 100644 --- 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 index e22255cc8..4cbcb06e2 100644 --- 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 index aedbb39d3..2e01fe34a 100644 --- 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 index bb5c07bff..3e259b425 100644 --- 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 index 923e0cdf6..711d9b589 100644 --- 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 index 7cb36a8bc..78ea30eb3 100644 --- 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