From c7c3fc5f547cf75bce6fea654667c40f4fd0d8d1 Mon Sep 17 00:00:00 2001 From: Dave House Date: Sat, 23 Dec 2017 09:53:33 +0000 Subject: [PATCH 01/41] Radios example --- src/components/radios/default.md.njk | 25 +++++++++++++++++++++++++ src/components/radios/index.md.njk | 10 ++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 src/components/radios/default.md.njk diff --git a/src/components/radios/default.md.njk b/src/components/radios/default.md.njk new file mode 100644 index 0000000000..8e0a8aa785 --- /dev/null +++ b/src/components/radios/default.md.njk @@ -0,0 +1,25 @@ +--- +layout: layout-example.njk +--- + +{% from 'radio/macro.njk' import govukRadio %} + +{{ govukRadio({ + "idPrefix": "example", + "name": "example", + "fieldset": { + "legendHtml": "

Have you changed your name?

", + "legendHintText": "This includes changing your last name or spelling your name differently." + }, + "items": [ + { + "value": "yes", + "text": "Yes" + }, + { + "value": "no", + "text": "No", + "checked": true + } + ] +}) }} diff --git a/src/components/radios/index.md.njk b/src/components/radios/index.md.njk index 5438a75827..309df9c9bf 100644 --- a/src/components/radios/index.md.njk +++ b/src/components/radios/index.md.njk @@ -7,7 +7,9 @@ layout: layout-components.njk --- -[Example of radios] +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'radios', example: 'default'}) }} ## When to use this component @@ -25,13 +27,13 @@ There are two ways to use the Radios component. You can use HTML or, if you are When there are more than two options, radios should be stacked, like so: -[Example of stacked radios] +{{ example({group: 'components', item: 'radios', example: 'default', html: true, nunjucks: true, open: true}) }} -### Inline radios + ## Research on this component From 15ff3d5ee8ba18a38d58917c3ebb57ae980117f2 Mon Sep 17 00:00:00 2001 From: Dave House Date: Sat, 23 Dec 2017 10:00:42 +0000 Subject: [PATCH 02/41] Add checkboxes example --- src/components/checkboxes/default.md.njk | 28 ++++++++++++++++++++++++ src/components/checkboxes/index.md.njk | 6 ++++- 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/components/checkboxes/default.md.njk diff --git a/src/components/checkboxes/default.md.njk b/src/components/checkboxes/default.md.njk new file mode 100644 index 0000000000..95369113bc --- /dev/null +++ b/src/components/checkboxes/default.md.njk @@ -0,0 +1,28 @@ +--- +layout: layout-example.njk +--- + +{% from 'checkbox/macro.njk' import govukCheckbox %} + +{{ govukCheckbox({ + "idPrefix": "nationality", + "name": "nationality", + "fieldset": { + "legendHtml": "

What is your nationality?

", + "legendHintText": "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" + } + ] +}) }} diff --git a/src/components/checkboxes/index.md.njk b/src/components/checkboxes/index.md.njk index 370c8aef1c..867ffd2c51 100644 --- a/src/components/checkboxes/index.md.njk +++ b/src/components/checkboxes/index.md.njk @@ -6,6 +6,10 @@ aliases: layout: layout-components.njk --- +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'checkboxes', example: 'default'}) }} + Let users select one or more options by using the Checkboxes component. ## When to use this component @@ -23,7 +27,7 @@ Don’t use the Checkboxes component if users can only choose one option from a There are two ways to use the Checkboxes component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](Insert URL), you can use the Checkboxes macro. -[Live example with codeblock] +{{ example({group: 'components', item: 'checkboxes', example: 'default', html: true, nunjucks: true, open: true}) }} ## Research on this component From d052784f302c27bef9b0623dcd9a623ede92de04 Mon Sep 17 00:00:00 2001 From: Dave House Date: Sat, 23 Dec 2017 10:04:00 +0000 Subject: [PATCH 03/41] Update date input example --- src/components/date-input/default.md.njk | 2 +- src/components/date-input/error.md.njk | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/date-input/default.md.njk b/src/components/date-input/default.md.njk index 21562c4bfe..b1f1992a83 100644 --- a/src/components/date-input/default.md.njk +++ b/src/components/date-input/default.md.njk @@ -6,7 +6,7 @@ layout: layout-example.njk {{- govukDateInput({ fieldset: { - legendText: 'What is your date of birth?', + legendHtml: '

What is your date of birth?

', legendHintText: 'For example, 31 3 1980' }, id: 'dob', diff --git a/src/components/date-input/error.md.njk b/src/components/date-input/error.md.njk index efd405fb91..0881beaa8c 100644 --- a/src/components/date-input/error.md.njk +++ b/src/components/date-input/error.md.njk @@ -6,7 +6,7 @@ layout: layout-example.njk {{- govukDateInput({ fieldset: { - legendText: 'What is your date of birth?', + legendHtml: '

What is your date of birth?

', legendHintText: 'For example, 31 3 1980' }, "errorMessage": { From 05be2f1937a4bc7e36c8ade985f7751a59336c16 Mon Sep 17 00:00:00 2001 From: Dave House Date: Sat, 23 Dec 2017 10:05:47 +0000 Subject: [PATCH 04/41] Fix confirmation page link example --- src/patterns/confirmation-pages/default.md.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/confirmation-pages/default.md.njk b/src/patterns/confirmation-pages/default.md.njk index 5a2b4ed2aa..98f9efe962 100644 --- a/src/patterns/confirmation-pages/default.md.njk +++ b/src/patterns/confirmation-pages/default.md.njk @@ -18,4 +18,4 @@ layout: layout-example.njk

They will contact you either to confirm your registration, or to ask for more information.

-

What did you think of this service? (takes 30 seconds)

\ No newline at end of file +

What did you think of this service? (takes 30 seconds)

\ No newline at end of file From a7636fc31c8b84ce242514d363c30a576b80adad Mon Sep 17 00:00:00 2001 From: Dave House Date: Sun, 24 Dec 2017 09:40:47 +0000 Subject: [PATCH 05/41] Add question page examples --- src/patterns/question-pages/default.md.njk | 43 ++++++++++++++++ src/patterns/question-pages/index.md.njk | 9 ++-- src/patterns/question-pages/passport.md.njk | 51 +++++++++++++++++++ src/patterns/question-pages/postcode.md.njk | 30 +++++++++++ .../question-pages/section-headings.md.njk | 8 +++ 5 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 src/patterns/question-pages/default.md.njk create mode 100644 src/patterns/question-pages/passport.md.njk create mode 100644 src/patterns/question-pages/postcode.md.njk create mode 100644 src/patterns/question-pages/section-headings.md.njk diff --git a/src/patterns/question-pages/default.md.njk b/src/patterns/question-pages/default.md.njk new file mode 100644 index 0000000000..65665d8e9a --- /dev/null +++ b/src/patterns/question-pages/default.md.njk @@ -0,0 +1,43 @@ +--- +layout: layout-example.njk +--- + + + +{% from "back-link/macro.njk" import govukBackLink %} +{% from "date-input/macro.njk" import govukDateInput %} +{% from "button/macro.njk" import govukButton %} + +{{ govukBackLink({ + "text": "Back" +}) }} + +
+ + {{ govukDateInput({ + fieldset: { + legendHtml: '

What is your date of birth?

', + legendHintText: 'For example, 31 3 1980' + }, + id: 'dob', + name: 'dob', + items:[ + { + name: 'day' + }, + { + name: 'month' + }, + { + name: 'year' + } + ] + }) + }} + + {{ govukButton({ + "text": "Continue", + "classes": "example-class" + }) }} + +
\ No newline at end of file diff --git a/src/patterns/question-pages/index.md.njk b/src/patterns/question-pages/index.md.njk index ee887c917e..84a0f8c49e 100644 --- a/src/patterns/question-pages/index.md.njk +++ b/src/patterns/question-pages/index.md.njk @@ -7,8 +7,9 @@ aliases: layout: layout-patterns.njk --- +{% from "_example.njk" import example %} -[Example of a question page] +{{ example({group: 'patterns', item: 'question-pages', example: 'default', html: true, nunjucks: true, open: false}) }} ## When to use this pattern @@ -34,25 +35,27 @@ Make sure the back link takes users to the previous page and that it still works ### Page headings - Page headings can be statements or questions. If you’re only asking for one piece of information on a page, make the question the page heading. For example ‘What is your home postcode?’ +{{ example({group: 'patterns', item: 'question-pages', example: 'postcode', html: true, nunjucks: true, open: false}) }} If you need to ask for multiple related things on a page, use a statement as the heading. This example uses ‘Passport details’ to describe the related questions: +{{ example({group: 'patterns', item: 'question-pages', example: 'passport', html: true, nunjucks: true, open: false}) }} + Don’t duplicate the same page heading across multiple pages. The page heading should relate specifically to the information being asked for on the current page, not any higher-level section the page is part of. If you need to show the high-level section, you can use the 'secondary-heading' style. For example, ‘About you’: - +{{ example({group: 'patterns', item: 'question-pages', example: 'section-headings', html: true, nunjucks: true, open: false}) }} ### Continue button diff --git a/src/patterns/question-pages/passport.md.njk b/src/patterns/question-pages/passport.md.njk new file mode 100644 index 0000000000..1ba3e290e9 --- /dev/null +++ b/src/patterns/question-pages/passport.md.njk @@ -0,0 +1,51 @@ +--- +layout: layout-example.njk +--- + +{% from "back-link/macro.njk" import govukBackLink %} +{% from "input/macro.njk" import govukInput %} +{% from "date-input/macro.njk" import govukDateInput %} +{% from "button/macro.njk" import govukButton %} + +{{ govukBackLink({ + "text": "Back" +}) }} + +
+ +

Passport details

+ + {{ govukInput({ + label: { + "html": '

Passport number

', + "hintText": "For example, 502135326" + }, + id: "input-1", + name: "test-name" + }) }} + + + {{ govukDateInput({ + fieldset: { + legendHtml: '

Expiry date

', + legendHintText: 'For example, 08 2014' + }, + id: 'dob', + name: 'dob', + items:[ + { + name: 'month' + }, + { + name: 'year' + } + ] + }) + }} + + {{ govukButton({ + "text": "Continue", + "classes": "example-class" + }) }} + +
\ No newline at end of file diff --git a/src/patterns/question-pages/postcode.md.njk b/src/patterns/question-pages/postcode.md.njk new file mode 100644 index 0000000000..ae56dbda76 --- /dev/null +++ b/src/patterns/question-pages/postcode.md.njk @@ -0,0 +1,30 @@ +--- +layout: layout-example.njk +--- + + + +{% from "back-link/macro.njk" import govukBackLink %} +{% from "input/macro.njk" import govukInput %} +{% from "button/macro.njk" import govukButton %} + +{{ govukBackLink({ + "text": "Back" +}) }} + +
+ + {{ govukInput({ + "label": { + "html": '

What is your home postcode?

' + }, + "id": "input-1", + "name": "test-name" + }) }} + + {{ govukButton({ + "text": "Continue", + "classes": "example-class" + }) }} + +
\ No newline at end of file diff --git a/src/patterns/question-pages/section-headings.md.njk b/src/patterns/question-pages/section-headings.md.njk new file mode 100644 index 0000000000..2cd889a40f --- /dev/null +++ b/src/patterns/question-pages/section-headings.md.njk @@ -0,0 +1,8 @@ +--- +layout: layout-example.njk +--- + +

+ About you + What is your home adddress? +

From 595559cda1039db821fa521902081d6466f55b10 Mon Sep 17 00:00:00 2001 From: Dave House Date: Sun, 24 Dec 2017 09:42:09 +0000 Subject: [PATCH 06/41] Add wrapper to confimration page example --- .../confirmation-pages/default.md.njk | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/patterns/confirmation-pages/default.md.njk b/src/patterns/confirmation-pages/default.md.njk index 98f9efe962..758e6b1c30 100644 --- a/src/patterns/confirmation-pages/default.md.njk +++ b/src/patterns/confirmation-pages/default.md.njk @@ -4,18 +4,22 @@ layout: layout-example.njk {% from "panel/macro.njk" import govukPanel %} -{{ govukPanel({ - "titleText": "Application complete", - "html": "Your reference number
HDJ2123F" -}) -}} +
-

We have sent you a confirmation email.

+ {{ govukPanel({ + "titleText": "Application complete", + "html": "Your reference number
HDJ2123F" + }) + }} -

What happens next

+

We have sent you a confirmation email.

-

We've sent your application to Hackney Electoral Register Office.

+

What happens next

-

They will contact you either to confirm your registration, or to ask for more information.

+

We've sent your application to Hackney Electoral Register Office.

-

What did you think of this service? (takes 30 seconds)

\ No newline at end of file +

They will contact you either to confirm your registration, or to ask for more information.

+ +

What did you think of this service? (takes 30 seconds)

+ +
\ No newline at end of file From 3b461e966aa56a07201447ee11647f9f9291de81 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 07:40:15 +0000 Subject: [PATCH 07/41] Add back link --- src/components/back-link/default.md.njk | 9 ++++++ src/components/back-link/index.md.njk | 40 +++++++++++++++++++++++++ views/partials/_toc-components.njk | 3 ++ 3 files changed, 52 insertions(+) create mode 100644 src/components/back-link/default.md.njk create mode 100644 src/components/back-link/index.md.njk diff --git a/src/components/back-link/default.md.njk b/src/components/back-link/default.md.njk new file mode 100644 index 0000000000..73b33d50f8 --- /dev/null +++ b/src/components/back-link/default.md.njk @@ -0,0 +1,9 @@ +--- +layout: layout-example.njk +--- +{% from "back-link/macro.njk" import govukBackLink %} + +{{ govukBackLink({ + "text": "Back", + "href": "#" +}) }} diff --git a/src/components/back-link/index.md.njk b/src/components/back-link/index.md.njk new file mode 100644 index 0000000000..44ad29244b --- /dev/null +++ b/src/components/back-link/index.md.njk @@ -0,0 +1,40 @@ +--- +title: Back link +description: Use the Back link component to help users go back to the previous page in a multi-page transaction. +section: Components +aliases: +layout: layout-components.njk +--- + +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'back-link', example: 'default'}) }} + +Use the Back link component to help users go back to the previous page in a multi-page transaction. + +## When to use this component + +Always include the Back link component on GOV.UK [Question pages](../../patterns/question-pages). + +You can include a back link on other pages within a multi-page transaction, if it makes sense to do so. + +### When not to use this component + +Don’t use the Back link component together with [Breadcrumbs](../breadcrumbs). If necessary, you should do research with your users to find out which they find more helpful in your service. + +## How it works + +Back links must always go at the top of a page. + +Make sure the link takes users to the previous page, and that it works even when JavaScript isn’t available. + +There are two ways to use the Back link component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](Insert prototype kit URL), you can use the Back link macro. + +{{ example({group: 'components', item: 'back-link', example: 'default', html: true, nunjucks: true, open: true}) }} + +## Research on this component + +If you’ve used this component, [get in touch](Anchor link to Get in touch panel at bottom of page) to share your user research findings. + + + diff --git a/views/partials/_toc-components.njk b/views/partials/_toc-components.njk index b00468c4ea..7436f38c2b 100644 --- a/views/partials/_toc-components.njk +++ b/views/partials/_toc-components.njk @@ -1,5 +1,8 @@ From 9cc1a9cc9fe7b86e035797c77a3ba95525d794ee Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 08:51:44 +0000 Subject: [PATCH 12/41] Add text input --- src/components/text-input/default.md.njk | 13 +++++++ src/components/text-input/index.md.njk | 46 ++++++++++++++++++++++++ views/partials/_toc-components.njk | 3 ++ 3 files changed, 62 insertions(+) create mode 100644 src/components/text-input/default.md.njk create mode 100644 src/components/text-input/index.md.njk diff --git a/src/components/text-input/default.md.njk b/src/components/text-input/default.md.njk new file mode 100644 index 0000000000..7cca1d387a --- /dev/null +++ b/src/components/text-input/default.md.njk @@ -0,0 +1,13 @@ +--- +layout: layout-example.njk +--- +{% from "input/macro.njk" import govukInput %} + +{{ govukInput({ + "label": { + "text": "National insurance number", + "hintText": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." + }, + "id": "input-2", + "name": "test-name-2" +}) }} \ No newline at end of file diff --git a/src/components/text-input/index.md.njk b/src/components/text-input/index.md.njk new file mode 100644 index 0000000000..be88cb3ad4 --- /dev/null +++ b/src/components/text-input/index.md.njk @@ -0,0 +1,46 @@ +--- +title: Text input +description: Help users enter information with the Text input component. +section: Components +aliases: +layout: layout-components.njk +--- + +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'text-input', example: 'default'}) }} + + +## When to use this component + +Use the Text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number. + +### When not to use this component + +Don’t use the Text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the [Textarea component](Insert link for Textarea component. + +## How it works + +There are two ways to use the Text input component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the GOV.UK Prototype Kit, you can use the Text input macro. + +{{ example({group: 'components', item: 'text-input', example: 'default', html: true, nunjucks: true, open: true}) }} + +### Label text inputs + +All text inputs, must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users click on the text input. + +Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Don’t use colons at the end of labels. + +### Use appropriately-sized text inputs + +Make text inputs the right size for the content they’re intended for. Postcode inputs should be postode-sized, telephone number inputs should be telephone number-sized. + +Ensure that users can still easily enter the information they need on smaller screens by snapping text inputs to 100% width at smaller screen sizes. + +### Don’t disable copy and paste + +Users often need to copy and paste information into a text input, so you shouldn’t prevent them from doing this. + +## Research on this component + +If you’ve used this component, [get in touch](Anchor link to Get in touch panel at bottom of page) to share your user research findings. diff --git a/views/partials/_toc-components.njk b/views/partials/_toc-components.njk index f071554dae..d4f5b903e2 100644 --- a/views/partials/_toc-components.njk +++ b/views/partials/_toc-components.njk @@ -42,5 +42,8 @@
  • Textarea
    • +
  • + Text input +
    • From 3d3994a7298c3ec60cb7ffcb860bf22ac26430b4 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 09:07:16 +0000 Subject: [PATCH 13/41] Update fill in a form with progress indicator section --- src/patterns/fill-in-a-form/index.md.njk | 29 ++++++++++++++++++ src/patterns/fill-in-a-form/progress.md.njk | 8 +++++ .../progress_indicators_horizontal.png | Bin 0 -> 27242 bytes 3 files changed, 37 insertions(+) create mode 100644 src/patterns/fill-in-a-form/progress.md.njk create mode 100644 src/patterns/fill-in-a-form/progress_indicators_horizontal.png diff --git a/src/patterns/fill-in-a-form/index.md.njk b/src/patterns/fill-in-a-form/index.md.njk index 374ba2085e..d53fed5a4c 100644 --- a/src/patterns/fill-in-a-form/index.md.njk +++ b/src/patterns/fill-in-a-form/index.md.njk @@ -111,6 +111,35 @@ Use the Details component to make your page easier to scan, but don’t hide hel Make sure the link text is written so that users can quickly work out if they need to click on it. + + + +### Using progress indicators + +Start by testing your form without a progress indicator to see if it’s simple enough that users don’t need them. + +Try improving the order, type or number of questions before adding a progress indicator. If people still have difficulty, try adding a simple step or question indicator like this one. + +{{ example({group: 'patterns', item: 'fill-in-a-form', example: 'progress', html: true, nunjucks: true, open: false}) }} + +Only include the total number of questions if you can do so reliably. As the user moves through the form, make sure the indicator updates to tell them which question they are on and the total number remaining. + +Don’t use this type of progress indicator: + +![Horizontal progress indicator](progress_indicators_horizontal.png) + +These can be problematic because they: +- are often not noticed +- take up lots of space +- don’t scale well on small screens +- can distract and confuse some users +- make it hard to write good labels for the steps +- make it hard to handle conditional sections + +A number of GOV.UK services have removed this style of progress indicator without any negative effects. +Read a blog post about [how the Carer’s Allowance team removed a 12-step progress indicator](https://designnotes.blog.gov.uk/2014/07/07/do-less-problems-as-shared-spaces/) with no effect on completion rates or times. + + ## Research on this pattern Learn more about the [question protocol](https://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php). Read a blog post about how the [‘Register to vote’ service used forms](https://designnotes.blog.gov.uk/2014/07/14/things-we-learnt-designing-register-to-vote/). diff --git a/src/patterns/fill-in-a-form/progress.md.njk b/src/patterns/fill-in-a-form/progress.md.njk new file mode 100644 index 0000000000..c74ec32c6c --- /dev/null +++ b/src/patterns/fill-in-a-form/progress.md.njk @@ -0,0 +1,8 @@ +--- +layout: layout-example.njk +--- + +

    + Question 3 of 9 + Your details +

    diff --git a/src/patterns/fill-in-a-form/progress_indicators_horizontal.png b/src/patterns/fill-in-a-form/progress_indicators_horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..3db4ff3fe3f7651106bf72d3e5193993f9421c19 GIT binary patch literal 27242 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 literal 0 HcmV?d00001 From c51361328ba6ad05bb55c543ef774a1713d55e03 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 09:21:38 +0000 Subject: [PATCH 14/41] Add dates pattern --- src/patterns/dates/default.md.njk | 26 ++++++++++ src/patterns/dates/index.md.njk | 83 +++++++++++++++++++++++++++++++ views/partials/_toc-patterns.njk | 3 ++ 3 files changed, 112 insertions(+) create mode 100644 src/patterns/dates/default.md.njk create mode 100644 src/patterns/dates/index.md.njk diff --git a/src/patterns/dates/default.md.njk b/src/patterns/dates/default.md.njk new file mode 100644 index 0000000000..b1f1992a83 --- /dev/null +++ b/src/patterns/dates/default.md.njk @@ -0,0 +1,26 @@ +--- +layout: layout-example.njk +--- + +{% from "date-input/macro.njk" import govukDateInput %} + +{{- govukDateInput({ + fieldset: { + legendHtml: '

    What is your date of birth?

    ', + legendHintText: 'For example, 31 3 1980' + }, + id: 'dob', + name: 'dob', + items:[ + { + name: 'day' + }, + { + name: 'month' + }, + { + name: 'year' + } + ] + }) +-}} \ No newline at end of file diff --git a/src/patterns/dates/index.md.njk b/src/patterns/dates/index.md.njk new file mode 100644 index 0000000000..df9c77acdc --- /dev/null +++ b/src/patterns/dates/index.md.njk @@ -0,0 +1,83 @@ +--- +title: Dates +description: Help users enter or select a date. +section: Patterns +theme: Ask users for... +aliases: +layout: layout-patterns.njk +--- + +{% from "_example.njk" import example %} + +Help users enter or select a date. + +{{ example({group: 'patterns', item: 'dates', example: 'default'}) }} + +## When to use this pattern + +Follow this pattern whenever you need users to provide or select a date as part of your service. + +## How it works + +The way you should ask users for dates depends on the types of date you’re asking for. + +Dates you may need, include: +- memorable dates - like a date of birth or marriage +- dates from documents or cards - like a passport or credit card +- approximate dates - like ‘December 2017’ +- relative dates - like ‘4 days from today’ + +In some cases, you might need users to pick a date. + +### Asking for memorable dates + +Ask for memorable dates, like dates of birth using the [Date input component](../../components/date-input). + +{{ example({group: 'patterns', item: 'dates', example: 'default', html: true, nunjucks: true, open: false}) }} + +### Asking for dates from documents and cards + +When asking for a date exactly as it’s shown on a passport, credit card or other document, make the fields match the format of the original. This makes it easier for users to copy the date across accurately. + +### Asking for approximate dates + +Allow users to enter an approximate date when you are asking them for information they may not know or struggle to remember. For example, allow users to enter ‘December 2017’ for a field that says ‘the date you lost your passport’. + +### Asking for relative dates + +You may need to ask for dates that are relative to today’s date or another date - this is common if a user is setting a reminder. + +To do this let users enter or select relative dates like ‘tomorrow’ or ‘1 day before’. If the day of the week is important, show this as well. + +### Helping users to pick a date + +Users might need to pick a date from a selection, for example, to book an appointment. + +To do this, you can present dates in a calendar format using a calendar control. Users are typically shown one month’s worth of dates at a time, and can skip through months and years. + +Only use a calendar control if users need to: + +- pick a date in the near future or recent past +- know the day of the week - or the week of the month - as well as the date +- be able to see dates in relation to other dates + +Never make a calendar control that depends on JavaScript as the only input option. Allow users to enter the date into a Textarea as well as use the control. + +### How to check that dates are valid + +To check that the dates users give you are valid, make sure that: + +- it’s a real date, for example, not 54 July +- past dates are in the past +- future dates are in the future +- the first date in a date range is before the second + +### How to write dates + +See the [GOV.UK style for writing dates](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates) and [date ranges]( https://www.gov.uk/guidance/content-design/writing-for-gov-uk#date-ranges). + +## Research on this pattern + +If you’ve used this pattern, [get in touch](Anchor link to Get in touch panel at bottom of page) to share your user research findings. + +More research is needed to determine the extent to which users struggle to enter months as numbers, and whether allowing them to enter months as text is helpful. diff --git a/views/partials/_toc-patterns.njk b/views/partials/_toc-patterns.njk index 2fa9a7a519..8afa661167 100644 --- a/views/partials/_toc-patterns.njk +++ b/views/partials/_toc-patterns.njk @@ -21,6 +21,9 @@
  • Create accounts
    • +
  • + Dates +
  • Email addresses
    • From 88269add6e866ebcf76e90d4c1800493bea99f11 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 13:07:10 +0000 Subject: [PATCH 15/41] Set up styles section and add Typography page --- src/styles/typography/body.md.njk | 5 + src/styles/typography/captions.md.njk | 8 ++ src/styles/typography/default.md.njk | 3 + src/styles/typography/font-size.md.njk | 12 +++ src/styles/typography/font-weight.md.njk | 6 ++ src/styles/typography/headings.md.njk | 8 ++ src/styles/typography/index.md.njk | 121 +++++++++++++++++++++++ src/styles/typography/lead.md.njk | 5 + src/styles/typography/link.md.njk | 7 ++ src/styles/typography/list-bullet.md.njk | 9 ++ src/styles/typography/list-number.md.njk | 9 ++ src/styles/typography/list.md.njk | 18 ++++ src/styles/typography/prose-scope.md.njk | 23 +++++ src/styles/typography/small.md.njk | 5 + views/layouts/layout-styles.njk | 9 ++ views/partials/_toc-styles.njk | 7 ++ 16 files changed, 255 insertions(+) create mode 100644 src/styles/typography/body.md.njk create mode 100644 src/styles/typography/captions.md.njk create mode 100644 src/styles/typography/default.md.njk create mode 100644 src/styles/typography/font-size.md.njk create mode 100644 src/styles/typography/font-weight.md.njk create mode 100644 src/styles/typography/headings.md.njk create mode 100644 src/styles/typography/index.md.njk create mode 100644 src/styles/typography/lead.md.njk create mode 100644 src/styles/typography/link.md.njk create mode 100644 src/styles/typography/list-bullet.md.njk create mode 100644 src/styles/typography/list-number.md.njk create mode 100644 src/styles/typography/list.md.njk create mode 100644 src/styles/typography/prose-scope.md.njk create mode 100644 src/styles/typography/small.md.njk create mode 100644 views/layouts/layout-styles.njk create mode 100644 views/partials/_toc-styles.njk diff --git a/src/styles/typography/body.md.njk b/src/styles/typography/body.md.njk new file mode 100644 index 0000000000..b3e02ebf8e --- /dev/null +++ b/src/styles/typography/body.md.njk @@ -0,0 +1,5 @@ +--- +layout: layout-example.njk +--- + +

    govuk-body

    diff --git a/src/styles/typography/captions.md.njk b/src/styles/typography/captions.md.njk new file mode 100644 index 0000000000..fafbd3ef49 --- /dev/null +++ b/src/styles/typography/captions.md.njk @@ -0,0 +1,8 @@ +--- +layout: layout-example.njk +--- + +

    govuk-heading-xl

    +

    govuk-heading-l

    +

    govuk-heading-m

    +

    govuk-heading-s

    \ No newline at end of file diff --git a/src/styles/typography/default.md.njk b/src/styles/typography/default.md.njk new file mode 100644 index 0000000000..46c79fc50c --- /dev/null +++ b/src/styles/typography/default.md.njk @@ -0,0 +1,3 @@ +--- +layout: layout-example.njk +--- diff --git a/src/styles/typography/font-size.md.njk b/src/styles/typography/font-size.md.njk new file mode 100644 index 0000000000..ec6dfb046e --- /dev/null +++ b/src/styles/typography/font-size.md.njk @@ -0,0 +1,12 @@ +--- +layout: layout-example.njk +--- + +

    govuk-!-f-80

    +

    govuk-!-f-48

    +

    govuk-!-f-36

    +

    govuk-!-f-27

    +

    govuk-!-f-24

    +

    govuk-!-f-19

    +

    govuk-!-f-16

    +

    govuk-!-f-14

    diff --git a/src/styles/typography/font-weight.md.njk b/src/styles/typography/font-weight.md.njk new file mode 100644 index 0000000000..d2970a4f71 --- /dev/null +++ b/src/styles/typography/font-weight.md.njk @@ -0,0 +1,6 @@ +--- +layout: layout-example.njk +--- + +

    govuk-!-w-regular

    +

    govuk-!-w-bold

    \ No newline at end of file diff --git a/src/styles/typography/headings.md.njk b/src/styles/typography/headings.md.njk new file mode 100644 index 0000000000..fafbd3ef49 --- /dev/null +++ b/src/styles/typography/headings.md.njk @@ -0,0 +1,8 @@ +--- +layout: layout-example.njk +--- + +

    govuk-heading-xl

    +

    govuk-heading-l

    +

    govuk-heading-m

    +

    govuk-heading-s

    \ No newline at end of file diff --git a/src/styles/typography/index.md.njk b/src/styles/typography/index.md.njk new file mode 100644 index 0000000000..1c20edf70e --- /dev/null +++ b/src/styles/typography/index.md.njk @@ -0,0 +1,121 @@ +--- +title: Typography +description: GOV.UK Typography +section: Styles +layout: layout-styles.njk +--- + +{% from "_example.njk" import example %} + +## Font + +If your service is on the service.gov.uk sub-domain you must use the GDS Transport Website font. + +You should use an alternative typeface like Helvetica or Arial for services publicly available on different domains + +If you’re not sure whether you should be using GDS Transport, read the Service manual guide on [making your service look like GOV.UK](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk) or [contact the Design System team](Insert anchor link to Get in touch panel at bottom of page). + +## Headings + +Use headings consistently to create a clear hierarchy throughout your service. + +Markup headings semantically using the appropriate level HTML element and use the corresponding heading class to apply the GOV.UK styling. + +Write all headings in sentence case. + +{{ example({group: 'styles', item: 'typography', example: 'headings', html: true, nunjucks: true, open: true}) }} + +### Headings with captions + +Sometimes you may need to make it clear that a heading is part of a larger section or group. You can use a heading with a caption, for this. + +{{ example({group: 'styles', item: 'typography', example: 'captions', html: true, nunjucks: true, open: false}) }} + +## Paragraphs + +### Body + +The default paragraph font-size is 19px on large screens and 16px on small screens. + +{{ example({group: 'styles', item: 'typography', example: 'body', html: true, nunjucks: true, open: false}) }} + +You can also add classes to create lead paragraphs and smaller body copy to convey hierarchy in your page. + +### Lead paragraph + +A lead paragraph is an introductory paragraph that you can use to summarise the content of the page below. Lead paragraphs use 24px type on desktop and should only be used once per page if needed. + +{{ example({group: 'styles', item: 'typography', example: 'lead', html: true, nunjucks: true, open: false}) }} + +### Body small + +You can use the body small class to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens. + +Generally, you should only use body small for supporting content like the ‘Related items’ navigation on GOV.UK. Use body small sparingly. + +The majority of your body copy should use the standard 19px paragraph size. + +{{ example({group: 'styles', item: 'typography', example: 'small', html: true, nunjucks: true, open: false}) }} + +## Font override classes and typography mixins + +You might need to set the font size or font weight of an element outside of the predefined heading and paragraph classes. For this you can use the font utility classes in your HTML or reference the typography mixins in your own components. + +### Font size + +The full GOV.UK typography scale goes from 14px up to 80px on large screens. You can add these font-size override classes to any other typographic class or element and they will change the font size. + +{{ example({group: 'styles', item: 'typography', example: 'font-size', html: true, nunjucks: true, open: false}) }} + +### Font weight + +As with the font size, you can add a font-weight override class to any other typographic class or element to change the font weight to regular or bold weight. + +{{ example({group: 'styles', item: 'typography', example: 'font-weight', html: true, nunjucks: true, open: false}) }} + +## Links + +Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text doesn’t include the full stop. + +{{ example({group: 'styles', item: 'typography', example: 'link', html: true, nunjucks: true, open: false}) }} + [Show :hover / :active / :visited states] + +## Lists + +Use lists to make blocks of text easier to read, and to break information into smaller, manageable chunks. + +{{ example({group: 'styles', item: 'typography', example: 'list', html: true, nunjucks: true, open: false}) }} + +### Bulleted lists + +Introduce bulleted lists with a lead in line ending in a colon. Start each item with a lowercase letter, and don’t use a full stop at the end. + +{{ example({group: 'styles', item: 'typography', example: 'list-bullet', html: true, nunjucks: true, open: false}) }} + +### Numbered lists + +Use numbered lists instead of bulleted lists when the order of the items is relevant. + +You don’t need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence. + +{{ example({group: 'styles', item: 'typography', example: 'list-number', html: true, nunjucks: true, open: false}) }} + +## Prose scope + +You can use the govuk-prose-scope class to apply GOV.UK styles to a block of text. This means you don’t need to apply classes to the individual elements. + +Prose scope is designed to be used with text content only. Don’t use it to style a section containing other elements, for example form inputs. + +govuk-prose-scope will apply GOV.UK styles to: + +- headings +- paragraphs +- bold text +- lists + +{{ example({group: 'styles', item: 'typography', example: 'prose-scope', html: true, nunjucks: true, open: false}) }} + + + + + diff --git a/src/styles/typography/lead.md.njk b/src/styles/typography/lead.md.njk new file mode 100644 index 0000000000..a552844206 --- /dev/null +++ b/src/styles/typography/lead.md.njk @@ -0,0 +1,5 @@ +--- +layout: layout-example.njk +--- + +

    govuk-body-l

    diff --git a/src/styles/typography/link.md.njk b/src/styles/typography/link.md.njk new file mode 100644 index 0000000000..94c5a9c365 --- /dev/null +++ b/src/styles/typography/link.md.njk @@ -0,0 +1,7 @@ +--- +layout: layout-example.njk +--- + +Broken + +govuk-link diff --git a/src/styles/typography/list-bullet.md.njk b/src/styles/typography/list-bullet.md.njk new file mode 100644 index 0000000000..fb12a79a14 --- /dev/null +++ b/src/styles/typography/list-bullet.md.njk @@ -0,0 +1,9 @@ +--- +layout: layout-example.njk +--- + +
      +
    • Apples
      • +
    • Oranges
      • +
    • Pears
      • +
    diff --git a/src/styles/typography/list-number.md.njk b/src/styles/typography/list-number.md.njk new file mode 100644 index 0000000000..bcc1b6131c --- /dev/null +++ b/src/styles/typography/list-number.md.njk @@ -0,0 +1,9 @@ +--- +layout: layout-example.njk +--- + +
      +
    1. Delivery address
      2. +
    2. Payment
      3. +
    3. Confirmation
      4. +
    diff --git a/src/styles/typography/list.md.njk b/src/styles/typography/list.md.njk new file mode 100644 index 0000000000..edf74cc368 --- /dev/null +++ b/src/styles/typography/list.md.njk @@ -0,0 +1,18 @@ +--- +layout: layout-example.njk +--- + + \ No newline at end of file diff --git a/src/styles/typography/prose-scope.md.njk b/src/styles/typography/prose-scope.md.njk new file mode 100644 index 0000000000..a3db06638c --- /dev/null +++ b/src/styles/typography/prose-scope.md.njk @@ -0,0 +1,23 @@ +--- +layout: layout-example.njk +--- + +
    +# H1 heading + +A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping. + +# H2 heading + +A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping. + +Unordered list (ul): +- apples +- oranges +- pears + +Ordered list (ol): +Register your details. +Make your application. +Send your application. +
    diff --git a/src/styles/typography/small.md.njk b/src/styles/typography/small.md.njk new file mode 100644 index 0000000000..8de34b2b9d --- /dev/null +++ b/src/styles/typography/small.md.njk @@ -0,0 +1,5 @@ +--- +layout: layout-example.njk +--- + +

    govuk-body-s

    diff --git a/views/layouts/layout-styles.njk b/views/layouts/layout-styles.njk new file mode 100644 index 0000000000..be0a5f6bec --- /dev/null +++ b/views/layouts/layout-styles.njk @@ -0,0 +1,9 @@ +{% extends "layout-pane.njk" %} + +{% block toc %} + {% include "../partials/_toc-styles.njk" %} +{% endblock %} + +{% block endtoc %} + {% include "../partials/_toc-styles.njk" %} +{% endblock %} \ No newline at end of file diff --git a/views/partials/_toc-styles.njk b/views/partials/_toc-styles.njk new file mode 100644 index 0000000000..e74f3a3cae --- /dev/null +++ b/views/partials/_toc-styles.njk @@ -0,0 +1,7 @@ + From 0b1b2d042ed2f62da209c318ba71182c959386f4 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 13:19:19 +0000 Subject: [PATCH 16/41] fix details example --- src/patterns/fill-in-a-form/details.md.njk | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/patterns/fill-in-a-form/details.md.njk b/src/patterns/fill-in-a-form/details.md.njk index 602032618a..9c698cc6fe 100644 --- a/src/patterns/fill-in-a-form/details.md.njk +++ b/src/patterns/fill-in-a-form/details.md.njk @@ -4,8 +4,8 @@ layout: layout-example.njk {% from "details/macro.njk" import govukDetails %} -{{- govukDetails({ - "summary": "Help with nationality", +{{ govukDetails({ + "summaryText": "Help with nationality", "text": "If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card." }) --}} +}} From f96faf80f73fc4a04727e81850a0e7fcd4ca92ac Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 13:24:04 +0000 Subject: [PATCH 17/41] Add captions to typography page --- src/styles/typography/captions.md.njk | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/styles/typography/captions.md.njk b/src/styles/typography/captions.md.njk index fafbd3ef49..2a0cce004c 100644 --- a/src/styles/typography/captions.md.njk +++ b/src/styles/typography/captions.md.njk @@ -2,7 +2,18 @@ layout: layout-example.njk --- -

    govuk-heading-xl

    -

    govuk-heading-l

    -

    govuk-heading-m

    -

    govuk-heading-s

    \ No newline at end of file +

    + govuk-caption-xl + govuk-heading-xl +

    + + +

    + govuk-caption-l + govuk-heading-l +

    + +

    + govuk-caption-m + govuk-heading-m +

    \ No newline at end of file From a2cedaa88aeb2b139809cc230d7417726248edc0 Mon Sep 17 00:00:00 2001 From: Dave House Date: Tue, 2 Jan 2018 14:31:24 +0000 Subject: [PATCH 18/41] Update address example --- src/components/fieldset/address-group.md.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fieldset/address-group.md.njk b/src/components/fieldset/address-group.md.njk index f5a2807a30..1507e46224 100644 --- a/src/components/fieldset/address-group.md.njk +++ b/src/components/fieldset/address-group.md.njk @@ -5,7 +5,7 @@ layout: layout-example.njk
    -

    What is your address

    +

    What is your address?
    \ No newline at end of file + diff --git a/src/patterns/confirmation-pages/default.md.njk b/src/patterns/confirmation-pages/default.md.njk index 8828f956e5..6e89105047 100644 --- a/src/patterns/confirmation-pages/default.md.njk +++ b/src/patterns/confirmation-pages/default.md.njk @@ -24,4 +24,4 @@ layout: layout-example.njk

    What did you think of this service? (takes 30 seconds)

    - \ No newline at end of file + diff --git a/src/patterns/dates/default.md.njk b/src/patterns/dates/default.md.njk index b2d8305b1f..d817819ede 100644 --- a/src/patterns/dates/default.md.njk +++ b/src/patterns/dates/default.md.njk @@ -23,4 +23,4 @@ layout: layout-example.njk } ] }) -}} \ No newline at end of file +}} diff --git a/src/patterns/email-addresses/default.md.njk b/src/patterns/email-addresses/default.md.njk index 9019c356dc..03ff615d81 100644 --- a/src/patterns/email-addresses/default.md.njk +++ b/src/patterns/email-addresses/default.md.njk @@ -12,4 +12,3 @@ layout: layout-example.njk id: "input-1", name: "test-name" }) }} - diff --git a/src/patterns/fill-in-a-form/hint.md.njk b/src/patterns/fill-in-a-form/hint.md.njk index 1242d92669..4017f8fbb7 100644 --- a/src/patterns/fill-in-a-form/hint.md.njk +++ b/src/patterns/fill-in-a-form/hint.md.njk @@ -11,4 +11,4 @@ layout: layout-example.njk }, id: "input-1", name: "test-name" -}) }} \ No newline at end of file +}) }} diff --git a/src/patterns/national-insurance-numbers/default.md.njk b/src/patterns/national-insurance-numbers/default.md.njk index dba8a68280..4017f8fbb7 100644 --- a/src/patterns/national-insurance-numbers/default.md.njk +++ b/src/patterns/national-insurance-numbers/default.md.njk @@ -12,4 +12,3 @@ layout: layout-example.njk id: "input-1", name: "test-name" }) }} - diff --git a/src/patterns/question-pages/default.md.njk b/src/patterns/question-pages/default.md.njk index 32acc8ed01..09ef38aadf 100644 --- a/src/patterns/question-pages/default.md.njk +++ b/src/patterns/question-pages/default.md.njk @@ -42,4 +42,4 @@ layout: layout-example.njk }) }} - \ No newline at end of file + diff --git a/src/patterns/question-pages/passport.md.njk b/src/patterns/question-pages/passport.md.njk index 8d4a461095..e85f236e09 100644 --- a/src/patterns/question-pages/passport.md.njk +++ b/src/patterns/question-pages/passport.md.njk @@ -51,4 +51,4 @@ layout: layout-example.njk - \ No newline at end of file + diff --git a/src/patterns/question-pages/postcode.md.njk b/src/patterns/question-pages/postcode.md.njk index e05486b82e..04ca7d2c06 100644 --- a/src/patterns/question-pages/postcode.md.njk +++ b/src/patterns/question-pages/postcode.md.njk @@ -29,4 +29,4 @@ layout: layout-example.njk }) }} - \ No newline at end of file + diff --git a/src/styles/typography/captions.md.njk b/src/styles/typography/captions.md.njk index 2a0cce004c..cb4c6974a3 100644 --- a/src/styles/typography/captions.md.njk +++ b/src/styles/typography/captions.md.njk @@ -16,4 +16,4 @@ layout: layout-example.njk

    govuk-caption-m govuk-heading-m -

    \ No newline at end of file + diff --git a/src/styles/typography/font-weight.md.njk b/src/styles/typography/font-weight.md.njk index d2970a4f71..c2e4bffaf3 100644 --- a/src/styles/typography/font-weight.md.njk +++ b/src/styles/typography/font-weight.md.njk @@ -3,4 +3,4 @@ layout: layout-example.njk ---

    govuk-!-w-regular

    -

    govuk-!-w-bold

    \ No newline at end of file +

    govuk-!-w-bold

    diff --git a/src/styles/typography/headings.md.njk b/src/styles/typography/headings.md.njk index fafbd3ef49..d24faaa5c2 100644 --- a/src/styles/typography/headings.md.njk +++ b/src/styles/typography/headings.md.njk @@ -5,4 +5,4 @@ layout: layout-example.njk

    govuk-heading-xl

    govuk-heading-l

    govuk-heading-m

    -

    govuk-heading-s

    \ No newline at end of file +

    govuk-heading-s

    diff --git a/src/styles/typography/list.md.njk b/src/styles/typography/list.md.njk index edf74cc368..0c038a2076 100644 --- a/src/styles/typography/list.md.njk +++ b/src/styles/typography/list.md.njk @@ -15,4 +15,4 @@ layout: layout-example.njk
  • More
    • - \ No newline at end of file + From ae0f1fd1308f969840554db4c264d2712a1699f4 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 3 Jan 2018 12:37:47 +0000 Subject: [PATCH 23/41] Fix Start link button --- src/components/button/start.md.njk | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/button/start.md.njk b/src/components/button/start.md.njk index 153c056f8b..838746782b 100644 --- a/src/components/button/start.md.njk +++ b/src/components/button/start.md.njk @@ -13,6 +13,7 @@ layout: layout-example.njk

    Link Start button

    {{ govukButton({ - "text": "Start now button", + "text": "Start now link button", + "href": "/", "classes": "govuk-c-button--start" }) }} From 419b30d962276e098b0884e3075e672049a542a3 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 3 Jan 2018 12:49:14 +0000 Subject: [PATCH 24/41] Remove spaces from fieldset index page --- src/components/fieldset/index.md.njk | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/fieldset/index.md.njk b/src/components/fieldset/index.md.njk index 2679e117f9..04d136e3b4 100644 --- a/src/components/fieldset/index.md.njk +++ b/src/components/fieldset/index.md.njk @@ -34,10 +34,3 @@ Include any general help text which is important for filling in the form and can If you’ve used this component, [get in touch](Anchor link to Get in touch panel at bottom of page) to share your user research findings. - - - - - - - From c97733cde5ad5de892b1f85b79c027ca80be8766 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 3 Jan 2018 12:59:07 +0000 Subject: [PATCH 25/41] Fix prose scope example on typography page --- src/styles/typography/prose-scope.md.njk | 29 ++++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/styles/typography/prose-scope.md.njk b/src/styles/typography/prose-scope.md.njk index a3db06638c..f78b58ad16 100644 --- a/src/styles/typography/prose-scope.md.njk +++ b/src/styles/typography/prose-scope.md.njk @@ -3,21 +3,26 @@ layout: layout-example.njk ---
    -# H1 heading +

    H1 heading

    -A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping. +

    A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.

    -# H2 heading +

    H2 heading

    -A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping. +

    A paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.

    -Unordered list (ul): -- apples -- oranges -- pears +

    Unordered list (ul):

    +
      +
    • apples
      • +
    • oranges
      • +
    • pears
      • +
    -Ordered list (ol): -Register your details. -Make your application. -Send your application. +

    Ordered list (ol):

    + +
      +
    1. Register your details.
      2. +
    2. Make your application.
      3. +
    3. Send your application.
      4. +
    From df91ffd2f574893223c6bb32cd6424df22c77ff1 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 3 Jan 2018 13:44:27 +0000 Subject: [PATCH 26/41] Don't run examples through markdown processor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The examples do not contain markdown - they're pure nunjucks / HTML – so let's skip that step. This will also help us to avoid unwanted styling - e.g. the markdown processor deciding that because some code is indented it should go in a code block. --- src/components/back-link/{default.md.njk => default.njk} | 0 src/components/breadcrumbs/{default.md.njk => default.njk} | 0 src/components/button/{default.md.njk => default.njk} | 0 src/components/button/{disabled.md.njk => disabled.njk} | 0 src/components/button/{primary.md.njk => primary.njk} | 0 src/components/button/{start.md.njk => start.njk} | 0 src/components/checkboxes/{default.md.njk => default.njk} | 0 src/components/date-input/{default.md.njk => default.njk} | 0 src/components/date-input/{error.md.njk => error.njk} | 0 .../fieldset/{address-group.md.njk => address-group.njk} | 0 src/components/fieldset/{default.md.njk => default.njk} | 0 src/components/file-upload/{default.md.njk => default.njk} | 0 src/components/panel/{default.md.njk => default.njk} | 0 src/components/phase-banner/{beta.md.njk => beta.njk} | 0 src/components/phase-banner/{default.md.njk => default.njk} | 0 src/components/radios/{default.md.njk => default.njk} | 0 src/components/select/{default.md.njk => default.njk} | 0 src/components/skip-link/{default.md.njk => default.njk} | 0 src/components/tag/{default.md.njk => default.njk} | 0 src/components/text-input/{default.md.njk => default.njk} | 0 src/components/textarea/{default.md.njk => default.njk} | 0 src/patterns/addresses/{multiple.md.njk => multiple.njk} | 0 src/patterns/addresses/{textarea.md.njk => textarea.njk} | 0 src/patterns/confirmation-pages/{default.md.njk => default.njk} | 0 src/patterns/dates/{default.md.njk => default.njk} | 0 src/patterns/email-addresses/{default.md.njk => default.njk} | 0 src/patterns/fill-in-a-form/{details.md.njk => details.njk} | 0 src/patterns/fill-in-a-form/{hint.md.njk => hint.njk} | 0 src/patterns/fill-in-a-form/{progress.md.njk => progress.njk} | 0 src/patterns/names/{default.md.njk => default.njk} | 0 .../national-insurance-numbers/{default.md.njk => default.njk} | 0 src/patterns/question-pages/{default.md.njk => default.njk} | 0 src/patterns/question-pages/{passport.md.njk => passport.njk} | 0 src/patterns/question-pages/{postcode.md.njk => postcode.njk} | 0 .../{section-headings.md.njk => section-headings.njk} | 0 src/styles/typography/{body.md.njk => body.njk} | 0 src/styles/typography/{captions.md.njk => captions.njk} | 0 src/styles/typography/{default.md.njk => default.njk} | 0 src/styles/typography/{font-size.md.njk => font-size.njk} | 0 src/styles/typography/{font-weight.md.njk => font-weight.njk} | 0 src/styles/typography/{headings.md.njk => headings.njk} | 0 src/styles/typography/{lead.md.njk => lead.njk} | 0 src/styles/typography/{link.md.njk => link.njk} | 0 src/styles/typography/{list-bullet.md.njk => list-bullet.njk} | 0 src/styles/typography/{list-number.md.njk => list-number.njk} | 0 src/styles/typography/{list.md.njk => list.njk} | 0 src/styles/typography/{prose-scope.md.njk => prose-scope.njk} | 0 src/styles/typography/{small.md.njk => small.njk} | 0 views/partials/_example.njk | 2 +- 49 files changed, 1 insertion(+), 1 deletion(-) rename src/components/back-link/{default.md.njk => default.njk} (100%) rename src/components/breadcrumbs/{default.md.njk => default.njk} (100%) rename src/components/button/{default.md.njk => default.njk} (100%) rename src/components/button/{disabled.md.njk => disabled.njk} (100%) rename src/components/button/{primary.md.njk => primary.njk} (100%) rename src/components/button/{start.md.njk => start.njk} (100%) rename src/components/checkboxes/{default.md.njk => default.njk} (100%) rename src/components/date-input/{default.md.njk => default.njk} (100%) rename src/components/date-input/{error.md.njk => error.njk} (100%) rename src/components/fieldset/{address-group.md.njk => address-group.njk} (100%) rename src/components/fieldset/{default.md.njk => default.njk} (100%) rename src/components/file-upload/{default.md.njk => default.njk} (100%) rename src/components/panel/{default.md.njk => default.njk} (100%) rename src/components/phase-banner/{beta.md.njk => beta.njk} (100%) rename src/components/phase-banner/{default.md.njk => default.njk} (100%) rename src/components/radios/{default.md.njk => default.njk} (100%) rename src/components/select/{default.md.njk => default.njk} (100%) rename src/components/skip-link/{default.md.njk => default.njk} (100%) rename src/components/tag/{default.md.njk => default.njk} (100%) rename src/components/text-input/{default.md.njk => default.njk} (100%) rename src/components/textarea/{default.md.njk => default.njk} (100%) rename src/patterns/addresses/{multiple.md.njk => multiple.njk} (100%) rename src/patterns/addresses/{textarea.md.njk => textarea.njk} (100%) rename src/patterns/confirmation-pages/{default.md.njk => default.njk} (100%) rename src/patterns/dates/{default.md.njk => default.njk} (100%) rename src/patterns/email-addresses/{default.md.njk => default.njk} (100%) rename src/patterns/fill-in-a-form/{details.md.njk => details.njk} (100%) rename src/patterns/fill-in-a-form/{hint.md.njk => hint.njk} (100%) rename src/patterns/fill-in-a-form/{progress.md.njk => progress.njk} (100%) rename src/patterns/names/{default.md.njk => default.njk} (100%) rename src/patterns/national-insurance-numbers/{default.md.njk => default.njk} (100%) rename src/patterns/question-pages/{default.md.njk => default.njk} (100%) rename src/patterns/question-pages/{passport.md.njk => passport.njk} (100%) rename src/patterns/question-pages/{postcode.md.njk => postcode.njk} (100%) rename src/patterns/question-pages/{section-headings.md.njk => section-headings.njk} (100%) rename src/styles/typography/{body.md.njk => body.njk} (100%) rename src/styles/typography/{captions.md.njk => captions.njk} (100%) rename src/styles/typography/{default.md.njk => default.njk} (100%) rename src/styles/typography/{font-size.md.njk => font-size.njk} (100%) rename src/styles/typography/{font-weight.md.njk => font-weight.njk} (100%) rename src/styles/typography/{headings.md.njk => headings.njk} (100%) rename src/styles/typography/{lead.md.njk => lead.njk} (100%) rename src/styles/typography/{link.md.njk => link.njk} (100%) rename src/styles/typography/{list-bullet.md.njk => list-bullet.njk} (100%) rename src/styles/typography/{list-number.md.njk => list-number.njk} (100%) rename src/styles/typography/{list.md.njk => list.njk} (100%) rename src/styles/typography/{prose-scope.md.njk => prose-scope.njk} (100%) rename src/styles/typography/{small.md.njk => small.njk} (100%) diff --git a/src/components/back-link/default.md.njk b/src/components/back-link/default.njk similarity index 100% rename from src/components/back-link/default.md.njk rename to src/components/back-link/default.njk diff --git a/src/components/breadcrumbs/default.md.njk b/src/components/breadcrumbs/default.njk similarity index 100% rename from src/components/breadcrumbs/default.md.njk rename to src/components/breadcrumbs/default.njk diff --git a/src/components/button/default.md.njk b/src/components/button/default.njk similarity index 100% rename from src/components/button/default.md.njk rename to src/components/button/default.njk diff --git a/src/components/button/disabled.md.njk b/src/components/button/disabled.njk similarity index 100% rename from src/components/button/disabled.md.njk rename to src/components/button/disabled.njk diff --git a/src/components/button/primary.md.njk b/src/components/button/primary.njk similarity index 100% rename from src/components/button/primary.md.njk rename to src/components/button/primary.njk diff --git a/src/components/button/start.md.njk b/src/components/button/start.njk similarity index 100% rename from src/components/button/start.md.njk rename to src/components/button/start.njk diff --git a/src/components/checkboxes/default.md.njk b/src/components/checkboxes/default.njk similarity index 100% rename from src/components/checkboxes/default.md.njk rename to src/components/checkboxes/default.njk diff --git a/src/components/date-input/default.md.njk b/src/components/date-input/default.njk similarity index 100% rename from src/components/date-input/default.md.njk rename to src/components/date-input/default.njk diff --git a/src/components/date-input/error.md.njk b/src/components/date-input/error.njk similarity index 100% rename from src/components/date-input/error.md.njk rename to src/components/date-input/error.njk diff --git a/src/components/fieldset/address-group.md.njk b/src/components/fieldset/address-group.njk similarity index 100% rename from src/components/fieldset/address-group.md.njk rename to src/components/fieldset/address-group.njk diff --git a/src/components/fieldset/default.md.njk b/src/components/fieldset/default.njk similarity index 100% rename from src/components/fieldset/default.md.njk rename to src/components/fieldset/default.njk diff --git a/src/components/file-upload/default.md.njk b/src/components/file-upload/default.njk similarity index 100% rename from src/components/file-upload/default.md.njk rename to src/components/file-upload/default.njk diff --git a/src/components/panel/default.md.njk b/src/components/panel/default.njk similarity index 100% rename from src/components/panel/default.md.njk rename to src/components/panel/default.njk diff --git a/src/components/phase-banner/beta.md.njk b/src/components/phase-banner/beta.njk similarity index 100% rename from src/components/phase-banner/beta.md.njk rename to src/components/phase-banner/beta.njk diff --git a/src/components/phase-banner/default.md.njk b/src/components/phase-banner/default.njk similarity index 100% rename from src/components/phase-banner/default.md.njk rename to src/components/phase-banner/default.njk diff --git a/src/components/radios/default.md.njk b/src/components/radios/default.njk similarity index 100% rename from src/components/radios/default.md.njk rename to src/components/radios/default.njk diff --git a/src/components/select/default.md.njk b/src/components/select/default.njk similarity index 100% rename from src/components/select/default.md.njk rename to src/components/select/default.njk diff --git a/src/components/skip-link/default.md.njk b/src/components/skip-link/default.njk similarity index 100% rename from src/components/skip-link/default.md.njk rename to src/components/skip-link/default.njk diff --git a/src/components/tag/default.md.njk b/src/components/tag/default.njk similarity index 100% rename from src/components/tag/default.md.njk rename to src/components/tag/default.njk diff --git a/src/components/text-input/default.md.njk b/src/components/text-input/default.njk similarity index 100% rename from src/components/text-input/default.md.njk rename to src/components/text-input/default.njk diff --git a/src/components/textarea/default.md.njk b/src/components/textarea/default.njk similarity index 100% rename from src/components/textarea/default.md.njk rename to src/components/textarea/default.njk diff --git a/src/patterns/addresses/multiple.md.njk b/src/patterns/addresses/multiple.njk similarity index 100% rename from src/patterns/addresses/multiple.md.njk rename to src/patterns/addresses/multiple.njk diff --git a/src/patterns/addresses/textarea.md.njk b/src/patterns/addresses/textarea.njk similarity index 100% rename from src/patterns/addresses/textarea.md.njk rename to src/patterns/addresses/textarea.njk diff --git a/src/patterns/confirmation-pages/default.md.njk b/src/patterns/confirmation-pages/default.njk similarity index 100% rename from src/patterns/confirmation-pages/default.md.njk rename to src/patterns/confirmation-pages/default.njk diff --git a/src/patterns/dates/default.md.njk b/src/patterns/dates/default.njk similarity index 100% rename from src/patterns/dates/default.md.njk rename to src/patterns/dates/default.njk diff --git a/src/patterns/email-addresses/default.md.njk b/src/patterns/email-addresses/default.njk similarity index 100% rename from src/patterns/email-addresses/default.md.njk rename to src/patterns/email-addresses/default.njk diff --git a/src/patterns/fill-in-a-form/details.md.njk b/src/patterns/fill-in-a-form/details.njk similarity index 100% rename from src/patterns/fill-in-a-form/details.md.njk rename to src/patterns/fill-in-a-form/details.njk diff --git a/src/patterns/fill-in-a-form/hint.md.njk b/src/patterns/fill-in-a-form/hint.njk similarity index 100% rename from src/patterns/fill-in-a-form/hint.md.njk rename to src/patterns/fill-in-a-form/hint.njk diff --git a/src/patterns/fill-in-a-form/progress.md.njk b/src/patterns/fill-in-a-form/progress.njk similarity index 100% rename from src/patterns/fill-in-a-form/progress.md.njk rename to src/patterns/fill-in-a-form/progress.njk diff --git a/src/patterns/names/default.md.njk b/src/patterns/names/default.njk similarity index 100% rename from src/patterns/names/default.md.njk rename to src/patterns/names/default.njk diff --git a/src/patterns/national-insurance-numbers/default.md.njk b/src/patterns/national-insurance-numbers/default.njk similarity index 100% rename from src/patterns/national-insurance-numbers/default.md.njk rename to src/patterns/national-insurance-numbers/default.njk diff --git a/src/patterns/question-pages/default.md.njk b/src/patterns/question-pages/default.njk similarity index 100% rename from src/patterns/question-pages/default.md.njk rename to src/patterns/question-pages/default.njk diff --git a/src/patterns/question-pages/passport.md.njk b/src/patterns/question-pages/passport.njk similarity index 100% rename from src/patterns/question-pages/passport.md.njk rename to src/patterns/question-pages/passport.njk diff --git a/src/patterns/question-pages/postcode.md.njk b/src/patterns/question-pages/postcode.njk similarity index 100% rename from src/patterns/question-pages/postcode.md.njk rename to src/patterns/question-pages/postcode.njk diff --git a/src/patterns/question-pages/section-headings.md.njk b/src/patterns/question-pages/section-headings.njk similarity index 100% rename from src/patterns/question-pages/section-headings.md.njk rename to src/patterns/question-pages/section-headings.njk diff --git a/src/styles/typography/body.md.njk b/src/styles/typography/body.njk similarity index 100% rename from src/styles/typography/body.md.njk rename to src/styles/typography/body.njk diff --git a/src/styles/typography/captions.md.njk b/src/styles/typography/captions.njk similarity index 100% rename from src/styles/typography/captions.md.njk rename to src/styles/typography/captions.njk diff --git a/src/styles/typography/default.md.njk b/src/styles/typography/default.njk similarity index 100% rename from src/styles/typography/default.md.njk rename to src/styles/typography/default.njk diff --git a/src/styles/typography/font-size.md.njk b/src/styles/typography/font-size.njk similarity index 100% rename from src/styles/typography/font-size.md.njk rename to src/styles/typography/font-size.njk diff --git a/src/styles/typography/font-weight.md.njk b/src/styles/typography/font-weight.njk similarity index 100% rename from src/styles/typography/font-weight.md.njk rename to src/styles/typography/font-weight.njk diff --git a/src/styles/typography/headings.md.njk b/src/styles/typography/headings.njk similarity index 100% rename from src/styles/typography/headings.md.njk rename to src/styles/typography/headings.njk diff --git a/src/styles/typography/lead.md.njk b/src/styles/typography/lead.njk similarity index 100% rename from src/styles/typography/lead.md.njk rename to src/styles/typography/lead.njk diff --git a/src/styles/typography/link.md.njk b/src/styles/typography/link.njk similarity index 100% rename from src/styles/typography/link.md.njk rename to src/styles/typography/link.njk diff --git a/src/styles/typography/list-bullet.md.njk b/src/styles/typography/list-bullet.njk similarity index 100% rename from src/styles/typography/list-bullet.md.njk rename to src/styles/typography/list-bullet.njk diff --git a/src/styles/typography/list-number.md.njk b/src/styles/typography/list-number.njk similarity index 100% rename from src/styles/typography/list-number.md.njk rename to src/styles/typography/list-number.njk diff --git a/src/styles/typography/list.md.njk b/src/styles/typography/list.njk similarity index 100% rename from src/styles/typography/list.md.njk rename to src/styles/typography/list.njk diff --git a/src/styles/typography/prose-scope.md.njk b/src/styles/typography/prose-scope.njk similarity index 100% rename from src/styles/typography/prose-scope.md.njk rename to src/styles/typography/prose-scope.njk diff --git a/src/styles/typography/small.md.njk b/src/styles/typography/small.njk similarity index 100% rename from src/styles/typography/small.md.njk rename to src/styles/typography/small.njk diff --git a/views/partials/_example.njk b/views/partials/_example.njk index b672d30d5d..86fdaa1356 100644 --- a/views/partials/_example.njk +++ b/views/partials/_example.njk @@ -1,6 +1,6 @@ {% macro example(params) %} -{% set examplePath = "src/" + params.group + "/" + params.item + "/" + params.example + ".md.njk" %} +{% set examplePath = "src/" + params.group + "/" + params.item + "/" + params.example + ".njk" %} {% set exampleURL = "/" + params.group + "/" + params.item + "/" + params.example + "/index.html" %} {% set examplePrefix = params.item + "-" + params.example + "-" %} From 44a267f5ee8298d5f62484f0c20a57503556cee5 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 3 Jan 2018 13:59:58 +0000 Subject: [PATCH 27/41] Fix indentation of confirmation page --- src/patterns/confirmation-pages/default.njk | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/patterns/confirmation-pages/default.njk b/src/patterns/confirmation-pages/default.njk index 6e89105047..ce2ce03bb0 100644 --- a/src/patterns/confirmation-pages/default.njk +++ b/src/patterns/confirmation-pages/default.njk @@ -7,21 +7,21 @@ layout: layout-example.njk
    - {{ govukPanel({ - "titleText": "Application complete", - "html": "Your reference number
    HDJ2123F" - }) - }} + {{ govukPanel({ + "titleText": "Application complete", + "html": "Your reference number
    HDJ2123F" + }) + }} -

    We have sent you a confirmation email.

    +

    We have sent you a confirmation email.

    -

    What happens next

    +

    What happens next

    -

    We've sent your application to Hackney Electoral Register Office.

    +

    We've sent your application to Hackney Electoral Register Office.

    -

    They will contact you either to confirm your registration, or to ask for more information.

    +

    They will contact you either to confirm your registration, or to ask for more information.

    -

    What did you think of this service? (takes 30 seconds)

    +

    What did you think of this service? (takes 30 seconds)

    From bacba6f7cd15ec6621381ef20e6a143a75c52714 Mon Sep 17 00:00:00 2001 From: Dave House Date: Wed, 3 Jan 2018 14:16:04 +0000 Subject: [PATCH 28/41] Update fieldset address example to use realisitc ids --- src/components/fieldset/address-group.njk | 25 ++++++++++++---------- src/patterns/addresses/multiple.njk | 26 ++++++++++++----------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/components/fieldset/address-group.njk b/src/components/fieldset/address-group.njk index 1507e46224..9b7caa6def 100644 --- a/src/components/fieldset/address-group.njk +++ b/src/components/fieldset/address-group.njk @@ -8,26 +8,29 @@ layout: layout-example.njk

    What is your address?

    - - - +
    + + Building and street + + + + +
    -