RubyGems - govuk_publishing_components - Versions diffs - 12.20.0 → 12.21.0 - Mend

govuk_publishing_components 12.20.0 → 12.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

data/node_modules/govuk-frontend/components/hint/README.md CHANGED Viewed

@@ -1,87 +1,15 @@
 # Hint
-## Introduction
+## Installation
-Use hint text for supporting contextual help
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-## Quick start examples
+## Guidance and Examples
-### Hint
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
-#### Markup
-    <span class="govuk-hint">
-      It’s on your National Insurance card, benefit letter, payslip or P60.
-    For example, ‘QQ 12 34 56 C’.
-    </span>
-#### Macro
-    {% from "hint/macro.njk" import govukHint %}
-    {{ govukHint({
-      "text": "It’s on your National Insurance card, benefit letter, payslip or P60.\nFor example, ‘QQ 12 34 56 C’.\n"
-    }) }}
-### Hint with html
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/with-html/preview)
-#### Markup
-    <span class="govuk-hint">
-      It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
-    For example, ‘QQ 12 34 56 C’.
-    </span>
-#### Macro
-    {% from "hint/macro.njk" import govukHint %}
-    {{ govukHint({
-      "html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, ‘QQ 12 34 56 C’.\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')))
+The label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/#using-hint-text).
 ## 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--hint) 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--hint) for details.

data/node_modules/govuk-frontend/components/input/README.md CHANGED Viewed

@@ -1,418 +1,15 @@
 # Input
-## Introduction
+## Installation
-A single-line text field.
+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 input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/text-input).
-## Quick start examples
-### Input
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-example">
-        National Insurance number
-      </label>
-      <input class="govuk-input" id="input-example" name="test-name" type="text">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National Insurance number"
-      },
-      "id": "input-example",
-      "name": "test-name"
-    }) }}
-### Input with hint text
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-with-hint-text">
-        National insurance number
-      </label>
-      <span id="input-with-hint-text-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-with-hint-text",
-      "name": "test-name-2"
-    }) }}
-### Input with error message
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
-#### Markup
-    <div class="govuk-form-group govuk-form-group--error">
-      <label class="govuk-label" for="input-with-error-message">
-        National Insurance number
-      </label>
-      <span id="input-with-error-message-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <span id="input-with-error-message-error" class="govuk-error-message">
-        Error message goes here
-      </span>
-      <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National Insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-with-error-message",
-      "name": "test-name-3",
-      "errorMessage": {
-        "text": "Error message goes here"
-      }
-    }) }}
-### Input with width-2 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-2-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-2">
-        National insurance number
-      </label>
-      <span id="input-width-2-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-2",
-      "name": "test-width-2",
-      "classes": "govuk-input--width-2"
-    }) }}
-### Input with width-3 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-3-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-3">
-        National insurance number
-      </label>
-      <span id="input-width-3-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-3",
-      "name": "test-width-3",
-      "classes": "govuk-input--width-3"
-    }) }}
-### Input with width-4 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-4-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-4">
-        National insurance number
-      </label>
-      <span id="input-width-4-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-4",
-      "name": "test-width-4",
-      "classes": "govuk-input--width-4"
-    }) }}
-### Input with width-5 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-5-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-5">
-        National insurance number
-      </label>
-      <span id="input-width-5-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-5",
-      "name": "test-width-5",
-      "classes": "govuk-input--width-5"
-    }) }}
-### Input with width-10 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-10-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-10">
-        National insurance number
-      </label>
-      <span id="input-width-10-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-10",
-      "name": "test-width-10",
-      "classes": "govuk-input--width-10"
-    }) }}
-### Input with width-20 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-20-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-20">
-        National insurance number
-      </label>
-      <span id="input-width-20-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-20",
-      "name": "test-width-20",
-      "classes": "govuk-input--width-20"
-    }) }}
-### Input with width-30 class
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-30-class/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="input-width-30">
-        National insurance number
-      </label>
-      <span id="input-width-30-hint" class="govuk-hint">
-        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
-      </span>
-      <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National insurance number"
-      },
-      "hint": {
-        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
-      },
-      "id": "input-width-30",
-      "name": "test-width-30",
-      "classes": "govuk-input--width-30"
-    }) }}
-### Input with label as page heading
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <h1 class="govuk-label-wrapper">
-        <label class="govuk-label" for="input-with-page-heading">
-          National Insurance number
-        </label>
-      </h1>
-      <input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
-    </div>
-#### Macro
-    {% from "input/macro.njk" import govukInput %}
-    {{ govukInput({
-      "label": {
-        "text": "National Insurance number",
-        "isPageHeading": true
-      },
-      "id": "input-with-page-heading",
-      "name": "test-name"
-    }) }}
-## 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/text-input/#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/text-input/#options-example-default) for details.