Merge pull request #99 from alphagov/examples-updates-19

Add "READY" content and examples

src/components/back-link/default.njk

@@ -0,0 +1,9 @@
+---
+layout: layout-example.njk
+---
+{% from "back-link/macro.njk" import govukBackLink %}
+
+{{ govukBackLink({
+  "text": "Back",
+  "href": "#"
+}) }}

src/components/back-link/index.md.njk

@@ -0,0 +1,37 @@
+---
+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 2 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.

src/components/breadcrumbs/index.md.njk

@@ -26,7 +26,7 @@ If you’re using other navigational devices on the page, such as a sidebar, con
 
 The Breadcrumbs component should include the user’s current page, which should be visually different from the other pages linked to in the breadcrumb.
 
-There are two ways to use the Breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the GOV.UK Prototype Kit, you can use the Breadcrumbs macro.
+There are 2 ways to use the Breadcrumbs component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the GOV.UK Prototype Kit, you can use the Breadcrumbs macro.
 
 {{ example({group: 'components', item: 'breadcrumbs', example: 'default', html: true, nunjucks: true, open: true}) }}
 

src/components/button/default.njk

@@ -0,0 +1,8 @@
+---
+layout: layout-example.njk
+---
+{% from "button/macro.njk" import govukButton %}
+
+{{ govukButton({
+  "text": "Save and continue"
+}) }}

src/components/button/disabled.njk

@@ -0,0 +1,27 @@
+---
+layout: layout-example.njk
+---
+{% from "button/macro.njk" import govukButton %}
+
+<h3 class="govuk-heading-m">Input button</h3>
+
+{{ govukButton({
+  "text": "Disabled button",
+  "disabled": true
+}) }}
+
+<h3 class="govuk-heading-m">Link button</h3>
+
+{{ govukButton({
+  "text": "Disabled link button",
+  "href": "/",
+  "disabled": true
+}) }}
+
+<h3 class="govuk-heading-m">&lt;button&gt;</h3>
+
+{{ govukButton({
+  "text": "Disabled &lt;button&gt;",
+  "element": "button",
+  "disabled": true
+}) }}

src/components/button/index.md.njk

@@ -0,0 +1,44 @@
+---
+title: Button
+description: GOV.UK Button
+section: Components
+aliases:
+layout: layout-components.njk
+---
+
+{% from "_example.njk" import example %}
+
+{{ example({group: 'components', item: 'button', example: 'default'}) }}
+
+## When to use this component
+
+Use the Button component to help users carry out an action on a GOV.UK page like starting an application or saving their progress.
+
+## How it works
+
+Write button text in sentence case, describing the action it performs. For example ‘Save and continue’ or ‘Start now’.
+
+Align the primary action button to the left edge of your form.
+
+There are 2 ways to use the Button 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 Button macro.
+
+{{ example({group: 'components', item: 'button', example: 'primary', html: true, nunjucks: true, open: true}) }}
+
+
+## Start buttons
+
+Use a start button as the main call to action on your service’s start page.
+
+{{ example({group: 'components', item: 'button', example: 'start', html: true, nunjucks: true, open: false}) }}
+
+### Disabled buttons
+
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+Only use disabled buttons if research shows it makes the user interface easier to understand.
+
+{{ example({group: 'components', item: 'button', example: 'disabled', html: true, nunjucks: true, open: false}) }}
+
+## 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.

src/components/button/primary.njk

@@ -0,0 +1,25 @@
+---
+layout: layout-example.njk
+---
+{% from "button/macro.njk" import govukButton %}
+
+<h3 class="govuk-heading-m">Input button</h3>
+
+{{ govukButton({
+  "text": "Save and continue"
+}) }}
+
+<h3 class="govuk-heading-m">Link button</h3>
+
+{{ govukButton({
+  "text": "Link button",
+  "href": "#"
+}) }}
+
+<h3 class="govuk-heading-m">&lt;button&gt;</h3>
+
+{{ govukButton({
+  "name": "button",
+  "text": "Save and continue",
+  "element": "button"
+}) }}

src/components/button/start.njk

@@ -0,0 +1,19 @@
+---
+layout: layout-example.njk
+---
+{% from "button/macro.njk" import govukButton %}
+
+<h3 class="govuk-heading-m">Input Start button</h3>
+
+{{ govukButton({
+  "text": "Start now button",
+  "classes": "govuk-c-button--start"
+}) }}
+
+<h3 class="govuk-heading-m">Link Start button</h3>
+
+{{ govukButton({
+  "text": "Start now link button",
+  "href": "#",
+  "classes": "govuk-c-button--start"
+}) }}

src/components/checkboxes/default.njk

@@ -0,0 +1,28 @@
+---
+layout: layout-example.njk
+---
+
+{% from 'checkbox/macro.njk' import govukCheckbox %}
+
+{{ govukCheckbox({
+  "idPrefix": "nationality",
+  "name": "nationality",
+  "fieldset": {
+    "legendHtml": '<h1 class="govuk-heading-xl">What is your nationality?</h1>',
+    "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"
+    }
+  ]
+}) }}

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
@@ -21,11 +25,10 @@ Don’t use the Checkboxes component if users can only choose one option from a
 
 ## How it works
 
-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.
+There are 2 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
 
 Read a blog post about [updates to the Radios and Checkboxes components](https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/).
-

src/components/date-input/default.md.njk → src/components/date-input/default.njk

@@ -4,9 +4,9 @@ layout: layout-example.njk
 
 {% from "date-input/macro.njk" import govukDateInput %}
 
-{{- govukDateInput({
+{{ govukDateInput({
   fieldset: {
-    legendText: 'What is your date of birth?',
+    legendHtml: '<h1 class="govuk-heading-xl">What is your date of birth?</h1>',
     legendHintText: 'For example, 31 3 1980'
   },
   id: 'dob',
@@ -23,4 +23,4 @@ layout: layout-example.njk
     }
   ]
   })
--}}
+}}

src/components/date-input/error.md.njk → src/components/date-input/error.njk

@@ -4,9 +4,9 @@ layout: layout-example.njk
 
 {% from "date-input/macro.njk" import govukDateInput %}
 
-{{- govukDateInput({
+{{ govukDateInput({
   fieldset: {
-    legendText: 'What is your date of birth?',
+    legendHtml: '<h1 class="govuk-heading-xl">What is your date of birth?</h1>',
     legendHintText: 'For example, 31 3 1980'
   },
     "errorMessage": {
@@ -26,4 +26,4 @@ layout: layout-example.njk
     }
   ]
   })
--}}
+}}

src/components/date-input/index.md.njk

@@ -26,7 +26,7 @@ Read more about how to [ask users for dates](Insert URL for Dates pattern).
 
 The Date input component consists of 3 fields to let users enter a day, month and year.
 
-There are two ways to use the Date input 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 Date input macro.
+There are 2 ways to use the Date input 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 Date input macro.
 
 {{ example({group: 'components', item: 'date-input', example: 'default', html: true, nunjucks: true, open: true}) }}
 
@@ -44,5 +44,3 @@ Check that a valid date is entered by the user. Invalid dates should be shown to
 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.
-
-

src/components/fieldset/address-group.njk

@@ -0,0 +1,34 @@
+---
+layout: layout-example.njk
+---
+
+<fieldset class="govuk-c-fieldset">
+  <legend class="govuk-c-fieldset__legend">
+    <h1 class="govuk-heading-xl">What is your address?</h1>
+  </legend>
+
+  <label class="govuk-c-label" for="address-line-1">
+    Building and street <span class="govuk-h-visually-hidden">line 1 of 2</span>
+  </label>
+  <input class="govuk-c-input" id="address-line-1" name="address-line-1" type="text">
+
+  <label class="govuk-c-label govuk-h-visually-hidden" for="address-street">
+    Building and street line 2 of 2
+  </label>
+  <input class="govuk-c-input" id="address-line-2" name="address-line-2" type="text">
+
+  <label class="govuk-c-label" for="address-town">
+    Town or city
+  </label>
+  <input class="govuk-c-input" id="address-town" name="address-town" type="text">
+
+  <label class="govuk-c-label" for="address-county">
+    County
+  </label>
+  <input class="govuk-c-input" id="address-county" name="address-county" type="text">
+
+  <label class="govuk-c-label" for="address-postcode">
+    Postcode
+  </label>
+  <input class="govuk-c-input" id="address-postcode" name="address-postcode" type="text">
+</fieldset>

src/components/fieldset/default.njk

@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+{% from "fieldset/macro.njk" import govukFieldset %}
+
+{{ govukFieldset({
+  "legendHtml": '<h1 class="govuk-heading-xl">Legend text goes here</h1>',
+  "legendHintText": "Legend hint text goes here"
+}) }}

src/components/fieldset/index.md.njk

@@ -0,0 +1,35 @@
+---
+title: Fieldset
+description: Use the Fieldset component to group related form inputs.
+section: Components
+aliases:
+layout: layout-components.njk
+---
+
+{% from "_example.njk" import example %}
+
+{{ example({group: 'components', item: 'fieldset', example: 'default'}) }}
+
+Use the Fieldset component to group related form inputs.
+
+## When to use this component
+
+Use the Fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address](../../patterns/addresses).
+
+{{ example({group: 'components', item: 'fieldset', example: 'address-group', html: true, nunjucks: true, open: true}) }}
+
+If you’re using the examples or macros for [Radios](../radios), [Checkboxes](../checkboxes) or [Date input](../date-input), the fieldset will already be included.
+
+## How it works
+
+The first element inside a fieldset must be a `legend` which describes the group of inputs. This could be a question, such as ‘What is your current address?’ or a statement like ‘Personal details’.
+
+{{ example({group: 'components', item: 'fieldset', example: 'default', html: true, nunjucks: true, open: false}) }}
+
+On [Question pages](../../patterns/question-pages) containing a group of inputs, including the question as the legend helps users of screenreaders to understand that the inputs are all related to that question.
+
+Include any general help text which is important for filling in the form and can’t be written as [hint text](Link to hint text section of help users Fill in a form) in the legend, but try to keep it as concise as possible.
+
+## 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.

src/components/file-upload/default.md.njk → src/components/file-upload/default.njk

@@ -4,11 +4,10 @@ layout: layout-example.njk
 
 {% from "file-upload/macro.njk" import govukFileUpload %}
 
-{{- govukFileUpload({
+{{ govukFileUpload({
   id: 'file-upload-1',
   name: 'file-upload-1',
   label: {
     text: 'Upload a file'
   }
-}) -}}
-
+}) }}