To view the Skip link component click inside this example and press tab
+ +{% from "skip-link/macro.njk" import govukSkipLink %} + +{{ govukSkipLink({ + "text": "Skip to main content", + "href": "#content" +}) }} diff --git a/src/components/skip-link/index.md.njk b/src/components/skip-link/index.md.njk new file mode 100644 index 0000000000..c8a0c3d807 --- /dev/null +++ b/src/components/skip-link/index.md.njk @@ -0,0 +1,33 @@ +--- +title: Skip link +description: Use the Skip link component to help keyboard-only users skip to the main content on a page. +section: Components +aliases: +layout: layout-components.njk +--- + +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'skip-link', example: 'default'}) }} + +Use the Skip link component to help keyboard-only users skip to the main content on a page. + +## When to use this component + +All GOV.UK pages must have include a Skip link in the header. + +## How it works + +Some people use the tab key on their keyboard to navigate through the links and form elements on a web page. + +Including the Skip link component gives users the option to bypass the top-level navigation links and jump to the main content on a page. + +The Skip link component is visually hidden until a keyboard press activates it. + +There are 2 ways to use the Skip 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 Skip link macro. + +{{ example({group: 'components', item: 'skip-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/src/components/tag/default.md.njk b/src/components/tag/default.njk similarity index 85% rename from src/components/tag/default.md.njk rename to src/components/tag/default.njk index 471395d51f..30dc226f81 100644 --- a/src/components/tag/default.md.njk +++ b/src/components/tag/default.njk @@ -4,9 +4,8 @@ layout: layout-example.njk {%- from "tag/macro.njk" import govukTag -%} -{{- govukTag( +{{ govukTag( { "text": "alpha" }) --}} - +}} diff --git a/src/components/tag/index.md.njk b/src/components/tag/index.md.njk index 74eea15881..7e8046da33 100644 --- a/src/components/tag/index.md.njk +++ b/src/components/tag/index.md.njk @@ -16,13 +16,10 @@ Use the Tag component to indicate the status of something, such as an item on a ## How it works -There are two ways to implement the Tag 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 Tag macro. +There are 2 ways to use the Tag 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 Tag macro. {{ example({group: 'components', item: 'tag', 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/src/components/text-input/default.njk b/src/components/text-input/default.njk new file mode 100644 index 0000000000..05779891b3 --- /dev/null +++ b/src/components/text-input/default.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: "national-insurance-number", + name: "national-insurance-number" +}) }} diff --git a/src/components/text-input/index.md.njk b/src/components/text-input/index.md.njk new file mode 100644 index 0000000000..9d38e5bae2 --- /dev/null +++ b/src/components/text-input/index.md.njk @@ -0,0 +1,45 @@ +--- +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 2 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/src/components/textarea/default.njk b/src/components/textarea/default.njk new file mode 100644 index 0000000000..f33abc3245 --- /dev/null +++ b/src/components/textarea/default.njk @@ -0,0 +1,13 @@ +--- +layout: layout-example.njk +--- +{% from "textarea/macro.njk" import govukTextarea %} + +{{ govukTextarea({ + "name": "more-detail", + "id": "more-detail", + "label": { + "text": "Can you provide more detail?", + "hintText": "Don't include personal or financial information, eg your National Insurance number or credit card details." + } +}) }} diff --git a/src/components/textarea/index.md.njk b/src/components/textarea/index.md.njk new file mode 100644 index 0000000000..acffdb2191 --- /dev/null +++ b/src/components/textarea/index.md.njk @@ -0,0 +1,43 @@ +--- +title: Textarea +description: Help users provide detailed information using the Textarea component. +section: Components +aliases: +layout: layout-components.njk +--- + +{% from "_example.njk" import example %} + +{{ example({group: 'components', item: 'textarea', example: 'default'}) }} + +## When to use this component + +Use the Textarea component when you need to let users enter an amount of text that’s longer than a single line. + +### When not to use this component + +Don’t use the Textarea component if you need to let users enter shorter answers no longer than a single line, such as a phone number or name. In this case, you should use the [Text input component](../text-input). + +## How it works + +There are 2 ways to use the Textarea 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 Textarea macro. + +{{ example({group: 'components', item: 'textarea', example: 'default', html: true, nunjucks: true, open: true}) }} + +### Label textareas + +You must label textareas. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea. + +Labels must be aligned above the textarea 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 textareas + +Make the height of a textarea proportional to the amount of text you expect users to enter. + +### Don’t disable copy and paste + +Users will often need to copy and paste information into a textarea, 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/src/patterns/addresses/index.md.njk b/src/patterns/addresses/index.md.njk index 0610f59fc6..e139014031 100644 --- a/src/patterns/addresses/index.md.njk +++ b/src/patterns/addresses/index.md.njk @@ -7,6 +7,7 @@ aliases: layout: layout-patterns.njk --- +{% from "_example.njk" import example %} Help users provide an address using one of the following: @@ -16,8 +17,7 @@ Help users provide an address using one of the following: ## Address lookups -Example -[live example] + ### When to use an address lookup @@ -39,7 +39,7 @@ When using an address lookup, you should: ## Multiple text inputs -[Live example of multiple text inputs] +{{ example({group: 'patterns', item: 'addresses', example: 'multiple', html: true, nunjucks: true, open: false}) }} ### When to use multiple text inputs @@ -72,7 +72,7 @@ Royal Mail doesn’t need a county as long as the town and postcode are included ## Text areas -[Live example text area] +{{ example({group: 'patterns', item: 'addresses', example: 'textarea', html: true, nunjucks: true, open: false}) }} ### When to use text areas diff --git a/src/patterns/addresses/multiple.njk b/src/patterns/addresses/multiple.njk new file mode 100644 index 0000000000..d28fbb67e4 --- /dev/null +++ b/src/patterns/addresses/multiple.njk @@ -0,0 +1,34 @@ +--- +layout: layout-example.njk +--- + + diff --git a/src/patterns/addresses/passports-address-lookup-1_.gif b/src/patterns/addresses/passports-address-lookup-1_.gif new file mode 100644 index 0000000000..9417eb252b Binary files /dev/null and b/src/patterns/addresses/passports-address-lookup-1_.gif differ diff --git a/src/patterns/addresses/textarea.njk b/src/patterns/addresses/textarea.njk new file mode 100644 index 0000000000..e903eed36d --- /dev/null +++ b/src/patterns/addresses/textarea.njk @@ -0,0 +1,14 @@ +--- +layout: layout-example.njk +--- + + +{% from "textarea/macro.njk" import govukTextarea %} + +{{ govukTextarea({ + "name": "address", + "id": "address", + "label": { + "text": "What is your address?" + } +}) }} diff --git a/src/patterns/check-a-service-is-suitable/index.md.njk b/src/patterns/check-a-service-is-suitable/index.md.njk index 9a1b588a30..a754a7981b 100644 --- a/src/patterns/check-a-service-is-suitable/index.md.njk +++ b/src/patterns/check-a-service-is-suitable/index.md.njk @@ -7,7 +7,6 @@ aliases: layout: layout-patterns.njk --- - Ask users questions to help them work out if they can or should use your service. Doing this helps users save time as it tells them upfront whether they are eligible to use it and if they need it. diff --git a/src/patterns/check-answers/index.md.njk b/src/patterns/check-answers/index.md.njk index 564292b20d..d6bd2c9016 100644 --- a/src/patterns/check-answers/index.md.njk +++ b/src/patterns/check-answers/index.md.njk @@ -7,7 +7,6 @@ aliases: layout: layout-patterns.njk --- - Let users check their answers before submitting information to a service.  diff --git a/src/patterns/confirm-an-email-address/index.md.njk b/src/patterns/confirm-an-email-address/index.md.njk index b880cb18e0..42a1122bba 100644 --- a/src/patterns/confirm-an-email-address/index.md.njk +++ b/src/patterns/confirm-an-email-address/index.md.njk @@ -7,7 +7,6 @@ aliases: layout: layout-patterns.njk --- - Use an email confirmation loop to check that a user has access to a specific email account. ## When to use this pattern diff --git a/src/patterns/confirmation-pages/default.md.njk b/src/patterns/confirmation-pages/default.md.njk deleted file mode 100644 index 5a2b4ed2aa..0000000000 --- a/src/patterns/confirmation-pages/default.md.njk +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: layout-example.njk ---- - -{% from "panel/macro.njk" import govukPanel %} - -{{ govukPanel({ - "titleText": "Application complete", - "html": "Your reference numberWe have sent you a confirmation email.
- -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.
- -What did you think of this service? (takes 30 seconds)
\ No newline at end of file diff --git a/src/patterns/confirmation-pages/default.njk b/src/patterns/confirmation-pages/default.njk new file mode 100644 index 0000000000..ce2ce03bb0 --- /dev/null +++ b/src/patterns/confirmation-pages/default.njk @@ -0,0 +1,27 @@ +--- +layout: layout-example.njk +--- + +{% from "panel/macro.njk" import govukPanel %} + +We have sent you a confirmation email.
+ +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.
+ +What did you think of this service? (takes 30 seconds)
+govuk-body
diff --git a/src/styles/typography/captions.njk b/src/styles/typography/captions.njk new file mode 100644 index 0000000000..cb4c6974a3 --- /dev/null +++ b/src/styles/typography/captions.njk @@ -0,0 +1,19 @@ +--- +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.njk b/src/styles/typography/font-weight.njk new file mode 100644 index 0000000000..c2e4bffaf3 --- /dev/null +++ b/src/styles/typography/font-weight.njk @@ -0,0 +1,6 @@ +--- +layout: layout-example.njk +--- + +govuk-!-w-regular
+govuk-!-w-bold
diff --git a/src/styles/typography/headings.njk b/src/styles/typography/headings.njk new file mode 100644 index 0000000000..d24faaa5c2 --- /dev/null +++ b/src/styles/typography/headings.njk @@ -0,0 +1,8 @@ +--- +layout: layout-example.njk +--- + +govuk-body-l
diff --git a/src/styles/typography/link.njk b/src/styles/typography/link.njk new file mode 100644 index 0000000000..fc7690a851 --- /dev/null +++ b/src/styles/typography/link.njk @@ -0,0 +1,5 @@ +--- +layout: layout-example.njk +--- + +govuk-link diff --git a/src/styles/typography/list-bullet.njk b/src/styles/typography/list-bullet.njk new file mode 100644 index 0000000000..58190b1633 --- /dev/null +++ b/src/styles/typography/list-bullet.njk @@ -0,0 +1,9 @@ +--- +layout: layout-example.njk +--- + +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):
+Ordered list (ol):
+ +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/_example.njk b/views/partials/_example.njk index 7dc2564674..1522682767 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 + "-" %} diff --git a/views/partials/_toc-components.njk b/views/partials/_toc-components.njk index b00468c4ea..d4f5b903e2 100644 --- a/views/partials/_toc-components.njk +++ b/views/partials/_toc-components.njk @@ -1,14 +1,23 @@ 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 @@