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

govuk_publishing_components 12.20.0 → 12.21.0

Files changed (62) hide show

data/node_modules/govuk-frontend/components/character-count/template.njk CHANGED Viewed

@@ -1,6 +1,3 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
-{% from "../hint/macro.njk" import govukHint %}
-{% from "../label/macro.njk" import govukLabel %}
 {% from "../textarea/macro.njk" import govukTextarea %}
 <div class="govuk-character-count" data-module="character-count"

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

@@ -1,716 +1,15 @@
 # Checkboxes
-## Introduction
+## Installation
-Let users select one or more options.
+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 checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
-## Quick start examples
-### Checkboxes
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <fieldset class="govuk-fieldset" aria-describedby="nationality-hint">
-      <legend class="govuk-fieldset__legend">
-        What is your nationality?
-      </legend>
-      <span id="nationality-hint" class="govuk-hint">
-        If you have dual nationality, select all options that are relevant to you.
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="british">
-          <label class="govuk-label govuk-checkboxes__label" for="nationality-1">
-            British
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
-          <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
-            Irish
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
-          <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
-            Citizen of another country
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "idPrefix": "nationality",
-      "name": "nationality",
-      "fieldset": {
-        "legend": {
-          "text": "What is your nationality?"
-        }
-      },
-      "hint": {
-        "text": "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"
-        }
-      ]
-    }) }}
-### Checkboxes with id and name
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-id-and-name/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <fieldset class="govuk-fieldset" aria-describedby="undefined-hint">
-      <legend class="govuk-fieldset__legend">
-        What is your nationality?
-      </legend>
-      <span id="undefined-hint" class="govuk-hint">
-        If you have dual nationality, select all options that are relevant to you.
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="item_british" name="british" type="checkbox" value="yes">
-          <label class="govuk-label govuk-checkboxes__label" for="item_british">
-            British
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="item_irish" name="irish" type="checkbox" value="irish">
-          <label class="govuk-label govuk-checkboxes__label" for="item_irish">
-            Irish
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "fieldset": {
-        "legend": {
-          "text": "What is your nationality?"
-        }
-      },
-      "hint": {
-        "text": "If you have dual nationality, select all options that are relevant to you."
-      },
-      "items": [
-        {
-          "name": "british",
-          "id": "item_british",
-          "value": "yes",
-          "text": "British"
-        },
-        {
-          "name": "irish",
-          "id": "item_irish",
-          "value": "irish",
-          "text": "Irish"
-        }
-      ]
-    }) }}
-### Checkboxes with hints on items
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-hints-on-items/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <fieldset class="govuk-fieldset">
-      <legend class="govuk-fieldset__legend">
-        <h1 class="govuk-fieldset__heading">
-          How do you want to sign in?
-        </h1>
-      </legend>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint">
-          <label class="govuk-label govuk-checkboxes__label" for="government-gateway">
-            Sign in with Government Gateway
-          </label>
-          <span id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
-            You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
-          </span>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" aria-describedby="govuk-verify-item-hint">
-          <label class="govuk-label govuk-checkboxes__label" for="govuk-verify">
-            Sign in with GOV.UK Verify
-          </label>
-          <span id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
-            You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
-          </span>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "fieldset": {
-        "legend": {
-          "text": "How do you want to sign in?",
-          "isPageHeading": true
-        }
-      },
-      "items": [
-        {
-          "name": "gateway",
-          "id": "government-gateway",
-          "value": "gov-gateway",
-          "text": "Sign in with Government Gateway",
-          "hint": {
-            "text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
-          }
-        },
-        {
-          "name": "verify",
-          "id": "govuk-verify",
-          "value": "gov-verify",
-          "text": "Sign in with GOV.UK Verify",
-          "hint": {
-            "text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
-          }
-        }
-      ]
-    }) }}
-### Checkboxes with disabled item
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled-item/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
-          <label class="govuk-label govuk-checkboxes__label" for="colours-1">
-            Red
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
-          <label class="govuk-label govuk-checkboxes__label" for="colours-2">
-            Green
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
-          <label class="govuk-label govuk-checkboxes__label" for="colours-3">
-            Blue
-          </label>
-        </div>
-      </div>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "name": "colours",
-      "items": [
-        {
-          "value": "red",
-          "text": "Red"
-        },
-        {
-          "value": "green",
-          "text": "Green"
-        },
-        {
-          "value": "blue",
-          "text": "Blue",
-          "disabled": true
-        }
-      ]
-    }) }}
-### Checkboxes with legend as a page heading
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-legend-as-a-page-heading/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-        <h1 class="govuk-fieldset__heading">
-          Which types of waste do you transport regularly?
-        </h1>
-      </legend>
-      <span id="waste-hint" class="govuk-hint">
-        Select all that apply
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-1">
-            Waste from animal carcasses
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-2">
-            Waste from mines or quarries
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-3">
-            Farm or agricultural waste
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "name": "waste",
-      "fieldset": {
-        "legend": {
-          "text": "Which types of waste do you transport regularly?",
-          "classes": "govuk-fieldset__legend--l",
-          "isPageHeading": true
-        }
-      },
-      "hint": {
-        "text": "Select all that apply"
-      },
-      "items": [
-        {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
-        },
-        {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
-        },
-        {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
-        }
-      ]
-    }) }}
-### Checkboxes with a medium legend
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-a-medium-legend/preview)
-#### Markup
-    <div class="govuk-form-group govuk-form-group--error">
-      <fieldset class="govuk-fieldset" aria-describedby="waste-hint waste-error">
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-        Which types of waste do you transport regularly?
-      </legend>
-      <span id="waste-hint" class="govuk-hint">
-        Select all that apply
-      </span>
-      <span id="waste-error" class="govuk-error-message">
-        Select which types of waste you transport regularly
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-1">
-            Waste from animal carcasses
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-2">
-            Waste from mines or quarries
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-3">
-            Farm or agricultural waste
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "name": "waste",
-      "fieldset": {
-        "legend": {
-          "text": "Which types of waste do you transport regularly?",
-          "classes": "govuk-fieldset__legend--m"
-        }
-      },
-      "hint": {
-        "text": "Select all that apply"
-      },
-      "errorMessage": {
-        "text": "Select which types of waste you transport regularly"
-      },
-      "items": [
-        {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
-        },
-        {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
-        },
-        {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
-        }
-      ]
-    }) }}
-### Checkboxes without fieldset
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/without-fieldset/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
-          <label class="govuk-label govuk-checkboxes__label" for="colours-1">
-            Red
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
-          <label class="govuk-label govuk-checkboxes__label" for="colours-2">
-            Green
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue">
-          <label class="govuk-label govuk-checkboxes__label" for="colours-3">
-            Blue
-          </label>
-        </div>
-      </div>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "name": "colours",
-      "items": [
-        {
-          "value": "red",
-          "text": "Red"
-        },
-        {
-          "value": "green",
-          "text": "Green"
-        },
-        {
-          "value": "blue",
-          "text": "Blue"
-        }
-      ]
-    }) }}
-### Checkboxes with all fieldset attributes
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-all-fieldset-attributes/preview)
-#### Markup
-    <div class="govuk-form-group govuk-form-group--error">
-      <fieldset class="govuk-fieldset app-fieldset--custom-modifier" aria-describedby="example-hint example-error" data-attribute="value" data-second-attribute="second-value">
-      <legend class="govuk-fieldset__legend">
-        What is your nationality?
-      </legend>
-      <span id="example-hint" class="govuk-hint">
-        If you have dual nationality, select all options that are relevant to you.
-      </span>
-      <span id="example-error" class="govuk-error-message">
-        Please select an option
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="example-1" name="example" type="checkbox" value="british">
-          <label class="govuk-label govuk-checkboxes__label" for="example-1">
-            British
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="example-2" name="example" type="checkbox" value="irish">
-          <label class="govuk-label govuk-checkboxes__label" for="example-2">
-            Irish
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="example-3" name="example" type="checkbox" value="other">
-          <label class="govuk-label govuk-checkboxes__label" for="example-3">
-            Citizen of another country
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "idPrefix": "example",
-      "name": "example",
-      "fieldset": {
-        "classes": "app-fieldset--custom-modifier",
-        "attributes": {
-          "data-attribute": "value",
-          "data-second-attribute": "second-value"
-        },
-        "legend": {
-          "text": "What is your nationality?"
-        }
-      },
-      "hint": {
-        "text": "If you have dual nationality, select all options that are relevant to you."
-      },
-      "errorMessage": {
-        "text": "Please select an option"
-      },
-      "items": [
-        {
-          "value": "british",
-          "text": "British"
-        },
-        {
-          "value": "irish",
-          "text": "Irish"
-        },
-        {
-          "value": "other",
-          "text": "Citizen of another country"
-        }
-      ]
-    }) }}
-### Checkboxes with error message
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-error-message/preview)
-#### Markup
-    <div class="govuk-form-group govuk-form-group--error">
-      <fieldset class="govuk-fieldset" aria-describedby="waste-error">
-      <legend class="govuk-fieldset__legend">
-        Which types of waste do you transport regularly?
-      </legend>
-      <span id="waste-error" class="govuk-error-message">
-        Please select an option
-      </span>
-      <div class="govuk-checkboxes">
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-1">
-            Waste from animal carcasses
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-2">
-            Waste from mines or quarries
-          </label>
-        </div>
-        <div class="govuk-checkboxes__item">
-          <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
-          <label class="govuk-label govuk-checkboxes__label" for="waste-3">
-            Farm or agricultural waste
-          </label>
-        </div>
-      </div>
-      </fieldset>
-    </div>
-#### Macro
-    {% from "checkboxes/macro.njk" import govukCheckboxes %}
-    {{ govukCheckboxes({
-      "name": "waste",
-      "errorMessage": {
-        "text": "Please select an option"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "Which types of waste do you transport regularly?"
-        }
-      },
-      "items": [
-        {
-          "value": "animal",
-          "text": "Waste from animal carcasses"
-        },
-        {
-          "value": "mines",
-          "text": "Waste from mines or quarries"
-        },
-        {
-          "value": "farm",
-          "text": "Farm or agricultural waste"
-        }
-      ]
-    }) }}
-## 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/checkboxes/#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/checkboxes/#options-example-default) for details.