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/button/README.md CHANGED Viewed

@@ -1,185 +1,15 @@
 # Button
-## Introduction
+## Installation
-A button is an element that allows users to carry out an action on a GOV.UK page. Common use cases include allowing a user to **Start** an application or **Save and continue** their progress. A button should have a short text snippet that describes what it will do.
+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 button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).
-## Quick start examples
-Buttons are configured to perform an action and they can have a different look. For example, they can be disabled until a valid action has been performed by the user.
-### Button
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/preview)
-#### Markup
-    <button type="submit" class="govuk-button">
-      Save and continue
-    </button>
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "text": "Save and continue"
-    }) }}
-### Button disabled
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/disabled/preview)
-#### Markup
-    <button type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled">
-      Disabled button
-    </button>
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "text": "Disabled button",
-      "disabled": true
-    }) }}
-### Button link
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link/preview)
-#### Markup
-    <a href="/" role="button" draggable="false" class="govuk-button">
-      Link button
-    </a>
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "text": "Link button",
-      "href": "/"
-    }) }}
-### Button link disabled
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link-disabled/preview)
-#### Markup
-    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled">
-      Disabled link button
-    </a>
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "text": "Disabled link button",
-      "href": "/",
-      "disabled": true
-    }) }}
-### Button start link
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/start-link/preview)
-#### Markup
-    <a href="/" role="button" draggable="false" class="govuk-button govuk-button--start">
-      Start now link button
-    </a>
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "text": "Start now link button",
-      "href": "/",
-      "classes": "govuk-button--start"
-    }) }}
-### Button input
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input/preview)
-#### Markup
-    <input value="Start now" name="start-now" type="submit" class="govuk-button">
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "element": "input",
-      "name": "start-now",
-      "text": "Start now"
-    }) }}
-### Button input disabled
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input-disabled/preview)
-#### Markup
-    <input value="Explicit input button disabled" type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled">
-#### Macro
-    {% from "button/macro.njk" import govukButton %}
-    {{ govukButton({
-      "element": "input",
-      "text": "Explicit input button disabled",
-      "disabled": 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/button/#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/button/#options-example-default) for details.

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

@@ -1,351 +1,15 @@
 # Character count
-## Introduction
+## Installation
-Help users enter text within a limited number of characters
+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 character count component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/character-count).
-## Quick start examples
-### Character count
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="more-detail">
-        Can you provide more detail?
-      </label>
-      <textarea class="govuk-textarea js-character-count " id="more-detail" name="more-detail" rows="5"></textarea>
-    </div>
-      <span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "name": "more-detail",
-      "id": "more-detail",
-      "maxlength": 10,
-      "label": {
-        "text": "Can you provide more detail?"
-      }
-    }) }}
-### Character count with hint
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-hint/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="with-hint">
-        Can you provide more detail?
-      </label>
-      <span id="with-hint-hint" class="govuk-hint">
-        Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
-      </span>
-      <textarea class="govuk-textarea js-character-count " id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-hint"></textarea>
-    </div>
-      <span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "name": "with-hint",
-      "id": "with-hint",
-      "maxlength": 10,
-      "label": {
-        "text": "Can you provide more detail?"
-      },
-      "hint": {
-        "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
-      }
-    }) }}
-### Character count with default value
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="100">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="with-default-value">
-        Full address
-      </label>
-      <textarea class="govuk-textarea js-character-count " id="with-default-value" name="default-value" rows="5">221B Baker Street
-    London
-    NW1 6XE
-    </textarea>
-    </div>
-      <span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 100 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "with-default-value",
-      "name": "default-value",
-      "maxlength": 100,
-      "label": {
-        "text": "Full address"
-      },
-      "value": "221B Baker Street\nLondon\nNW1 6XE\n"
-    }) }}
-### Character count with default value exceeding limit
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value-exceeding-limit/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
-    <div class="govuk-form-group govuk-form-group--error">
-      <label class="govuk-label" for="exceeding-characters">
-        Full address
-      </label>
-      <span id="exceeding-characters-error" class="govuk-error-message">
-        Please do not exceed the maximum allowed limit
-      </span>
-      <textarea class="govuk-textarea govuk-textarea--error js-character-count  govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-error">221B Baker Street
-    London
-    NW1 6XE
-    </textarea>
-    </div>
-      <span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "exceeding-characters",
-      "name": "exceeding",
-      "maxlength": 10,
-      "value": "221B Baker Street\nLondon\nNW1 6XE\n",
-      "label": {
-        "text": "Full address"
-      },
-      "errorMessage": {
-        "text": "Please do not exceed the maximum allowed limit"
-      }
-    }) }}
-### Character count with custom rows
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-custom-rows/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="custom-rows">
-        Full address
-      </label>
-      <textarea class="govuk-textarea js-character-count " id="custom-rows" name="custom" rows="8"></textarea>
-    </div>
-      <span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "custom-rows",
-      "name": "custom",
-      "maxlength": 10,
-      "label": {
-        "text": "Full address"
-      },
-      "rows": 8
-    }) }}
-### Character count with label as page heading
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-label-as-page-heading/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10">
-    <div class="govuk-form-group">
-      <h1 class="govuk-label-wrapper">
-        <label class="govuk-label" for="textarea-with-page-heading">
-          Full address
-        </label>
-      </h1>
-      <textarea class="govuk-textarea js-character-count " id="textarea-with-page-heading" name="address" rows="5"></textarea>
-    </div>
-      <span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "textarea-with-page-heading",
-      "name": "address",
-      "maxlength": 10,
-      "label": {
-        "text": "Full address",
-        "isPageHeading": true
-      }
-    }) }}
-### Character count with word count
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-word-count/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxwords="10">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="word-count">
-        Full address
-      </label>
-      <textarea class="govuk-textarea js-character-count " id="word-count" name="word-count" rows="5"></textarea>
-    </div>
-      <span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 words
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "word-count",
-      "name": "word-count",
-      "maxwords": 10,
-      "label": {
-        "text": "Full address"
-      }
-    }) }}
-### Character count with threshold
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-threshold/preview)
-#### Markup
-    <div class="govuk-character-count" data-module="character-count" data-maxlength="10" data-threshold="75">
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="with-threshold">
-        Full address
-      </label>
-      <textarea class="govuk-textarea js-character-count " id="with-threshold" name="with-threshold" rows="5"></textarea>
-    </div>
-      <span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-        You can enter up to 10 characters
-      </span>
-    </div>
-#### Macro
-    {% from "character-count/macro.njk" import govukCharacterCount %}
-    {{ govukCharacterCount({
-      "id": "with-threshold",
-      "name": "with-threshold",
-      "maxlength": 10,
-      "threshold": 75,
-      "label": {
-        "text": "Full address"
-      }
-    }) }}
-## 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/character-count/#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/character-count/#options-example-default) for details.