govuk_publishing_components 12.20.0 → 12.21.0

data/node_modules/govuk-frontend/components/date-input/template.njk

@@ -45,6 +45,7 @@
   {{ govukErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
     html: params.errorMessage.html,
     text: params.errorMessage.text
   }) | indent(2) | trim }}

data/node_modules/govuk-frontend/components/details/README.md

@@ -1,139 +1,15 @@
 # Details
 
-## Introduction
+## Installation
 
-Component for conditionally revealing content, using the details HTML element.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
 
-## Guidance
+## Guidance and Examples
 
 Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).
 
-## Quick start examples
-
-### Details
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/preview)
-
-#### Markup
-
-    <details class="govuk-details">
-      <summary class="govuk-details__summary">
-        <span class="govuk-details__summary-text">
-          Help with nationality
-        </span>
-      </summary>
-      <div class="govuk-details__text">
-        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
-      </div>
-    </details>
-
-#### Macro
-
-    {% from "details/macro.njk" import govukDetails %}
-
-    {{ govukDetails({
-      "summaryText": "Help with nationality",
-      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
-    }) }}
-
-### Details expanded
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/expanded/preview)
-
-#### Markup
-
-    <details id="help-with-nationality" class="govuk-details" open>
-      <summary class="govuk-details__summary">
-        <span class="govuk-details__summary-text">
-          Help with nationality
-        </span>
-      </summary>
-      <div class="govuk-details__text">
-        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
-      </div>
-    </details>
-
-#### Macro
-
-    {% from "details/macro.njk" import govukDetails %}
-
-    {{ govukDetails({
-      "id": "help-with-nationality",
-      "summaryText": "Help with nationality",
-      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
-      "open": true
-    }) }}
-
-### Details with html
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/with-html/preview)
-
-#### Markup
-
-    <details class="govuk-details">
-      <summary class="govuk-details__summary">
-        <span class="govuk-details__summary-text">
-          Where to find your National Insurance Number
-        </span>
-      </summary>
-      <div class="govuk-details__text">
-        Your National Insurance number can be found on
-    <ul>
-      <li>your National Insurance card</li>
-      <li>your payslip</li>
-      <li>P60</li>
-      <li>benefits information</li>
-      <li>tax return</li>
-    </ul>
-
-      </div>
-    </details>
-
-#### Macro
-
-    {% from "details/macro.njk" import govukDetails %}
-
-    {{ govukDetails({
-      "summaryText": "Where to find your National Insurance Number",
-      "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n"
-    }) }}
-
-## Requirements
-
-### Build tool configuration
-
-When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
-
-    .pipe(sass({
-      includePaths: 'node_modules/'
-    }))
-
-### Static asset path configuration
-
-In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
-
-    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
-
 ## Component options
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/details/#options-example-default) for details.
-
-### Setting up Nunjucks views and paths
-
-Below is an example setup using express configure views:
-
-    nunjucks.configure('node_modules/govuk-frontend/components', {
-      autoescape: true,
-      cache: false,
-      express: app
-    })
-
-## Contribution
-
-Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
-
-## License
-
-MIT
+See [options table](https://design-system.service.gov.uk/components/details/#options-example-default) for details.

data/node_modules/govuk-frontend/components/error-message/README.md

@@ -1,69 +1,15 @@
 # Error message
 
-## Introduction
+## Installation
 
-Component to show a red error message - used for form validation. Use inside a label or legend.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
 
-## Guidance
+## Guidance and Examples
 
 Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
 
-## Quick start examples
-
-### Error message
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-message/preview)
-
-#### Markup
-
-    <span class="govuk-error-message">
-      Error message about full name goes here
-    </span>
-
-#### Macro
-
-    {% from "error-message/macro.njk" import govukErrorMessage %}
-
-    {{ govukErrorMessage({
-      "text": "Error message about full name goes here"
-    }) }}
-
-## Requirements
-
-### Build tool configuration
-
-When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
-
-    .pipe(sass({
-      includePaths: 'node_modules/'
-    }))
-
-### Static asset path configuration
-
-In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
-
-    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
-
 ## Component options
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.
-
-### Setting up Nunjucks views and paths
-
-Below is an example setup using express configure views:
-
-    nunjucks.configure('node_modules/govuk-frontend/components', {
-      autoescape: true,
-      cache: false,
-      express: app
-    })
-
-## Contribution
-
-Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
-
-## License
-
-MIT
+See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.

data/node_modules/govuk-frontend/components/error-summary/README.md

@@ -1,105 +1,15 @@
 # Error summary
 
-## Introduction
+## Installation
 
-Component to show an error summary box - used at the top of the page, to summarise validation errors.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
 
-## Guidance
+## Guidance and Examples
 
 Find out when to use the error summary component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-summary).
 
-## Quick start examples
-
-### Error summary
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-summary/preview)
-
-#### Markup
-
-    <div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
-      <h2 class="govuk-error-summary__title" id="error-summary-title">
-        Message to alert the user to a problem goes here
-      </h2>
-      <div class="govuk-error-summary__body">
-
-        <p>
-          Optional description of the errors and how to correct them
-        </p>
-
-        <ul class="govuk-list govuk-error-summary__list">
-
-          <li>
-
-            <a href="#example-error-1">Descriptive link to the question with an error</a>
-
-          </li>
-
-          <li>
-
-            <a href="#example-error-1">Descriptive link to the question with an error</a>
-
-          </li>
-
-        </ul>
-      </div>
-    </div>
-
-#### Macro
-
-    {% from "error-summary/macro.njk" import govukErrorSummary %}
-
-    {{ govukErrorSummary({
-      "titleText": "Message to alert the user to a problem goes here",
-      "descriptionText": "Optional description of the errors and how to correct them",
-      "classes": "optional-extra-class",
-      "errorList": [
-        {
-          "text": "Descriptive link to the question with an error",
-          "href": "#example-error-1"
-        },
-        {
-          "text": "Descriptive link to the question with an error",
-          "href": "#example-error-1"
-        }
-      ]
-    }) }}
-
-## Requirements
-
-### Build tool configuration
-
-When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
-
-    .pipe(sass({
-      includePaths: 'node_modules/'
-    }))
-
-### Static asset path configuration
-
-In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
-
-    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
-
 ## Component options
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example-default) for details.
-
-### Setting up Nunjucks views and paths
-
-Below is an example setup using express configure views:
-
-    nunjucks.configure('node_modules/govuk-frontend/components', {
-      autoescape: true,
-      cache: false,
-      express: app
-    })
-
-## Contribution
-
-Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
-
-## License
-
-MIT
+See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example-default) for details.

data/node_modules/govuk-frontend/components/fieldset/README.md

@@ -1,103 +1,15 @@
 # Fieldset
 
-## Introduction
+## Installation
 
-The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
 
-## Guidance
+## Guidance and Examples
 
 Find out when to use the fieldset component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/fieldset).
 
-## Quick start examples
-
-### Fieldset
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/preview)
-
-#### Markup
-
-    <fieldset class="govuk-fieldset">
-
-      <legend class="govuk-fieldset__legend">
-        What is your address?
-      </legend>
-
-    </fieldset>
-
-#### Macro
-
-    {% from "fieldset/macro.njk" import govukFieldset %}
-
-    {{ govukFieldset({
-      "legend": {
-        "text": "What is your address?"
-      }
-    }) }}
-
-### Fieldset as page heading
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/as-page-heading/preview)
-
-#### Markup
-
-    <fieldset class="govuk-fieldset">
-
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
-        <h1 class="govuk-fieldset__heading">
-          What is your address?
-        </h1>
-      </legend>
-
-    </fieldset>
-
-#### Macro
-
-    {% from "fieldset/macro.njk" import govukFieldset %}
-
-    {{ govukFieldset({
-      "legend": {
-        "text": "What is your address?",
-        "classes": "govuk-fieldset__legend--xl",
-        "isPageHeading": true
-      }
-    }) }}
-
-## Requirements
-
-### Build tool configuration
-
-When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
-
-    .pipe(sass({
-      includePaths: 'node_modules/'
-    }))
-
-### Static asset path configuration
-
-In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
-
-    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
-
 ## Component options
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example-default) for details.
-
-### Setting up Nunjucks views and paths
-
-Below is an example setup using express configure views:
-
-    nunjucks.configure('node_modules/govuk-frontend/components', {
-      autoescape: true,
-      cache: false,
-      express: app
-    })
-
-## Contribution
-
-Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
-
-## License
-
-MIT
+See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example-default) for details.

data/node_modules/govuk-frontend/components/file-upload/README.md

@@ -1,210 +1,15 @@
 # File upload
 
-## Introduction
+## Installation
 
-The HTML `<input>` element with type="file" lets a user pick one or more files, to upload to a server.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
 
-## Guidance
+## Guidance and Examples
 
 Find out when to use the file upload component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/file-upload).
 
-## Quick start examples
-
-### File upload
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/preview)
-
-#### Markup
-
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="file-upload-1">
-        Upload a file
-      </label>
-
-      <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
-    </div>
-
-#### Macro
-
-    {% from "file-upload/macro.njk" import govukFileUpload %}
-
-    {{ govukFileUpload({
-      "id": "file-upload-1",
-      "name": "file-upload-1",
-      "label": {
-        "text": "Upload a file"
-      }
-    }) }}
-
-### File upload with hint text
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-hint-text/preview)
-
-#### Markup
-
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="file-upload-2">
-        Upload your photo
-      </label>
-
-      <span id="file-upload-2-hint" class="govuk-hint">
-        Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
-      </span>
-
-      <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
-    </div>
-
-#### Macro
-
-    {% from "file-upload/macro.njk" import govukFileUpload %}
-
-    {{ govukFileUpload({
-      "id": "file-upload-2",
-      "name": "file-upload-2",
-      "label": {
-        "text": "Upload your photo"
-      },
-      "hint": {
-        "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
-      }
-    }) }}
-
-### File upload with error message
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-error-message/preview)
-
-#### Markup
-
-    <div class="govuk-form-group govuk-form-group--error">
-      <label class="govuk-label" for="file-upload-3">
-        Upload a file
-      </label>
-
-      <span id="file-upload-3-hint" class="govuk-hint">
-        Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
-      </span>
-
-      <span id="file-upload-3-error" class="govuk-error-message">
-        Error message goes here
-      </span>
-
-      <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
-    </div>
-
-#### Macro
-
-    {% from "file-upload/macro.njk" import govukFileUpload %}
-
-    {{ govukFileUpload({
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Upload a file"
-      },
-      "hint": {
-        "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
-      },
-      "errorMessage": {
-        "text": "Error message goes here"
-      }
-    }) }}
-
-### File upload with value and attributes
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-value-and-attributes/preview)
-
-#### Markup
-
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="file-upload-4">
-        Upload a photo
-      </label>
-
-      <input class="govuk-file-upload" id="file-upload-4" name="file-upload-4" type="file" value="C:\fakepath\myphoto.jpg" accept=".jpg, .jpeg, .png">
-    </div>
-
-#### Macro
-
-    {% from "file-upload/macro.njk" import govukFileUpload %}
-
-    {{ govukFileUpload({
-      "id": "file-upload-4",
-      "name": "file-upload-4",
-      "value": "C:\\fakepath\\myphoto.jpg",
-      "label": {
-        "text": "Upload a photo"
-      },
-      "attributes": {
-        "accept": ".jpg, .jpeg, .png"
-      }
-    }) }}
-
-### File upload with label as page heading
-
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-label-as-page-heading/preview)
-
-#### Markup
-
-    <div class="govuk-form-group">
-      <h1 class="govuk-label-wrapper">
-        <label class="govuk-label" for="file-upload-1">
-          Upload a file
-        </label>
-
-      </h1>
-
-      <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
-    </div>
-
-#### Macro
-
-    {% from "file-upload/macro.njk" import govukFileUpload %}
-
-    {{ govukFileUpload({
-      "id": "file-upload-1",
-      "name": "file-upload-1",
-      "label": {
-        "text": "Upload a file",
-        "isPageHeading": true
-      }
-    }) }}
-
-## Requirements
-
-### Build tool configuration
-
-When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
-
-    .pipe(sass({
-      includePaths: 'node_modules/'
-    }))
-
-### Static asset path configuration
-
-In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
-
-    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
-
 ## Component options
 
 Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
 
-See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default) for details.
-
-### Setting up Nunjucks views and paths
-
-Below is an example setup using express configure views:
-
-    nunjucks.configure('node_modules/govuk-frontend/components', {
-      autoescape: true,
-      cache: false,
-      express: app
-    })
-
-## Contribution
-
-Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
-
-## License
-
-MIT
+See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default) for details.