From 587b6e758180bb747b33ac6489f73a58e47dc26d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 4 Aug 2023 08:48:09 +0100 Subject: [PATCH 1/2] Read component data from built `fixtures.json` --- .../components/components.template.test.js | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/src/govuk/components/components.template.test.js b/src/govuk/components/components.template.test.js index 14d70b5ccd..fef99875dd 100644 --- a/src/govuk/components/components.template.test.js +++ b/src/govuk/components/components.template.test.js @@ -3,7 +3,7 @@ const { join } = require('path') const { paths } = require('govuk-frontend-config') const { nunjucksEnv, renderHTML } = require('govuk-frontend-helpers/nunjucks') const { - getComponentsData, + getComponentsFixtures, getComponentNames } = require('govuk-frontend-lib/files') const { HtmlValidate } = require('html-validate') @@ -30,19 +30,29 @@ describe('Components', () => { describe('Nunjucks environment', () => { it('renders template for each component', () => { return Promise.all( - componentNames.map((componentName) => { - const viewPath = `govuk/components/${componentName}/template.njk` - return expect(nunjucksEnvDefault.render(viewPath, {})).resolves - }) + componentNames.map( + (componentName) => + expect( + nunjucksEnvDefault.render( + `govuk/components/${componentName}/template.njk`, + {} + ) + ).resolves + ) ) }) it('renders template for each component (different base path)', () => { return Promise.all( - componentNames.map((componentName) => { - const viewPath = `components/${componentName}/template.njk` - return expect(nunjucksEnvCustom.render(viewPath, {})).resolves - }) + componentNames.map( + (componentName) => + expect( + nunjucksEnvCustom.render( + `components/${componentName}/template.njk`, + {} + ) + ).resolves + ) ) }) }) @@ -122,13 +132,13 @@ describe('Components', () => { }) it('renders valid HTML for each component example', async () => { - const componentsData = await getComponentsData() + const componentsFixtures = await getComponentsFixtures() // Validate component examples - for (const { name: componentName, examples } of componentsData) { - const exampleTasks = examples.map( - async ({ name: exampleName, data }) => { - const html = renderHTML(componentName, data) + for (const { component: componentName, fixtures } of componentsFixtures) { + const fixtureTasks = fixtures.map( + async ({ name: exampleName, options }) => { + const html = renderHTML(componentName, options) // Validate HTML return expect({ @@ -144,7 +154,7 @@ describe('Components', () => { ) // Validate all component examples in parallel - await Promise.all(exampleTasks) + await Promise.all(fixtureTasks) } }, 30000) }) From 08f16058b6ce78c94e372c7f55ec3a76edcd53e5 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 4 Aug 2023 08:48:22 +0100 Subject: [PATCH 2/2] Align component examples with fixture types --- src/govuk/components/accordion/accordion.yaml | 26 +++--- src/govuk/components/back-link/back-link.yaml | 14 +-- .../components/breadcrumbs/breadcrumbs.yaml | 24 ++--- src/govuk/components/button/button.yaml | 76 +++++++-------- .../character-count/character-count.yaml | 46 +++++----- .../components/checkboxes/checkboxes.yaml | 92 +++++++++---------- .../cookie-banner/cookie-banner.yaml | 46 +++++----- .../components/date-input/date-input.yaml | 50 +++++----- src/govuk/components/details/details.yaml | 20 ++-- .../error-message/error-message.yaml | 18 ++-- .../error-summary/error-summary.yaml | 36 ++++---- .../exit-this-page/exit-this-page.yaml | 8 +- src/govuk/components/fieldset/fieldset.yaml | 36 ++++---- .../components/file-upload/file-upload.yaml | 26 +++--- src/govuk/components/footer/footer.yaml | 46 +++++----- src/govuk/components/header/header.yaml | 42 ++++----- src/govuk/components/hint/hint.yaml | 12 +-- src/govuk/components/input/input.yaml | 82 ++++++++--------- .../components/inset-text/inset-text.yaml | 12 +-- src/govuk/components/label/label.yaml | 34 +++---- .../notification-banner.yaml | 48 +++++----- .../components/pagination/pagination.yaml | 30 +++--- src/govuk/components/panel/panel.yaml | 18 ++-- .../components/phase-banner/phase-banner.yaml | 14 +-- src/govuk/components/radios/radios.yaml | 90 +++++++++--------- src/govuk/components/select/select.yaml | 38 ++++---- src/govuk/components/skip-link/skip-link.yaml | 18 ++-- .../components/summary-list/summary-list.yaml | 62 ++++++------- src/govuk/components/table/table.yaml | 40 ++++---- src/govuk/components/tabs/tabs.yaml | 28 +++--- src/govuk/components/tag/tag.yaml | 28 +++--- src/govuk/components/task-list/task-list.yaml | 18 ++-- src/govuk/components/textarea/textarea.yaml | 34 +++---- .../components/warning-text/warning-text.yaml | 16 ++-- 34 files changed, 614 insertions(+), 614 deletions(-) diff --git a/src/govuk/components/accordion/accordion.yaml b/src/govuk/components/accordion/accordion.yaml index 5fb4a973a5..6e54638800 100644 --- a/src/govuk/components/accordion/accordion.yaml +++ b/src/govuk/components/accordion/accordion.yaml @@ -94,7 +94,7 @@ params: examples: - name: default - data: + options: id: default-example items: - heading: @@ -110,7 +110,7 @@ examples: - name: with additional descriptions - data: + options: id: with-descriptions items: - heading: @@ -136,7 +136,7 @@ examples: - name: with long content and description - data: + options: id: with-long-content-and-description items: - heading: @@ -159,7 +159,7 @@ examples: - name: with one section open - data: + options: id: one-section-open-example items: - heading: @@ -179,7 +179,7 @@ examples: - name: with all sections already open - data: + options: id: all-sections-open-example items: - heading: @@ -200,7 +200,7 @@ examples: - name: with focusable elements inside - data: + options: id: with-focusable-elements items: - heading: @@ -213,7 +213,7 @@ examples: html: Link B - name: with translations - data: + options: id: with-translations hideAllSectionsText: Collapse all sections showAllSectionsText: Expand all sections @@ -237,7 +237,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: accordion-classes classes: myClass items: @@ -247,7 +247,7 @@ examples: text: Some content - name: attributes hidden: true - data: + options: id: accordion-attributes attributes: data-attribute: value @@ -258,7 +258,7 @@ examples: text: Some content - name: custom heading level hidden: true - data: + options: id: accordion-heading headingLevel: 3 items: @@ -268,7 +268,7 @@ examples: text: Some content - name: heading html hidden: true - data: + options: id: accordion-heading-html items: - heading: @@ -277,7 +277,7 @@ examples: text: Some content - name: with falsey values hidden: true - data: + options: id: accordion-falsey items: - heading: @@ -293,7 +293,7 @@ examples: text: Some content - name: with remember expanded off hidden: true - data: + options: id: accordion-remember-expanded-off rememberExpanded: false items: diff --git a/src/govuk/components/back-link/back-link.yaml b/src/govuk/components/back-link/back-link.yaml index 0f86dcfac2..cb97d1d900 100644 --- a/src/govuk/components/back-link/back-link.yaml +++ b/src/govuk/components/back-link/back-link.yaml @@ -22,38 +22,38 @@ params: examples: - name: default - data: + options: href: '#' - name: with custom text - data: + options: href: '#' text: Back to home - name: inverse previewLayoutModifiers: - inverse - data: + options: classes: govuk-back-link--inverse href: '#' # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: classes: app-back-link--custom-class href: '#' - name: html as text hidden: true - data: + options: text: Home href: '#' - name: html hidden: true - data: + options: html: Back href: '#' - name: attributes hidden: true - data: + options: href: '#' html: Back to home attributes: diff --git a/src/govuk/components/breadcrumbs/breadcrumbs.yaml b/src/govuk/components/breadcrumbs/breadcrumbs.yaml index 5550e3a4b5..2020bf5bcd 100644 --- a/src/govuk/components/breadcrumbs/breadcrumbs.yaml +++ b/src/govuk/components/breadcrumbs/breadcrumbs.yaml @@ -35,19 +35,19 @@ params: examples: - name: default - data: + options: items: - text: Section href: '/section' - text: Sub-section href: '/section/sub-section' - name: with one level - data: + options: items: - text: Section href: '/section' - name: with multiple levels - data: + options: items: - text: Home href: '/' @@ -58,14 +58,14 @@ examples: - text: Sub Sub-section href: '/section/sub-section/sub-sub-section' - name: without the home section - data: + options: items: - text: Service Manual href: '/service-manual' - text: Agile Delivery href: '/service-manual/agile-delivery' - name: with last breadcrumb as current page - data: + options: items: - text: Home href: '/' @@ -73,7 +73,7 @@ examples: href: '/browse/abroad' - text: Travel abroad - name: with collapse on mobile - data: + options: collapseOnMobile: true items: - text: Home @@ -86,7 +86,7 @@ examples: description: Breadcrumbs that appear on dark backgrounds previewLayoutModifiers: - inverse - data: + options: classes: govuk-breadcrumbs--inverse items: - text: Home @@ -98,13 +98,13 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: classes: app-breadcrumbs--custom-modifier items: - text: Home - name: attributes hidden: true - data: + options: attributes: id: my-navigation role: navigation @@ -112,7 +112,7 @@ examples: - text: Home - name: item attributes hidden: true - data: + options: items: - text: Section 1 href: /section @@ -121,12 +121,12 @@ examples: data-attribute-2: my-attribute-2 - name: html as text hidden: true - data: + options: items: - text: Section 1 - name: html hidden: true - data: + options: items: - html: Section 1 - html: Section 2 diff --git a/src/govuk/components/button/button.yaml b/src/govuk/components/button/button.yaml index dd46c5a9ae..e22a33b8b1 100644 --- a/src/govuk/components/button/button.yaml +++ b/src/govuk/components/button/button.yaml @@ -54,91 +54,91 @@ params: examples: - name: default - data: + options: text: Save and continue - name: disabled - data: + options: text: Disabled button disabled: true - name: link - data: + options: text: Link button href: '/' - name: start - data: + options: text: Start now button isStartButton: true - name: start link - data: + options: text: Start now link button href: '/' isStartButton: true - name: input - data: + options: element: input name: start-now text: Start now - name: input disabled - data: + options: element: input text: Explicit input button disabled disabled: true - name: prevent double click - data: + options: text: Submit preventDoubleClick: true - name: with active state description: Simulate triggering the :active CSS pseudo-class, not available in the production build. - data: + options: name: active text: Active classes: :active - name: with hover state description: Simulate triggering the :hover CSS pseudo-class, not available in the production build. - data: + options: name: hover text: Hovered classes: :hover - name: with focus state description: Simulate triggering the :focus CSS pseudo-class, not available in the production build. - data: + options: name: focus text: Focussed classes: :focus - name: secondary description: A button for secondary actions - data: + options: name: secondary text: Secondary button classes: govuk-button--secondary - name: secondary disabled - data: + options: name: secondary text: Secondary button disabled classes: govuk-button--secondary disabled: true - name: secondary link description: A link button for secondary actions - data: + options: name: secondary text: Secondary button href: '/' classes: govuk-button--secondary - name: warning description: A button for actions that need a warning - data: + options: name: Warning text: Warning button classes: govuk-button--warning - name: warning disabled - data: + options: name: warning text: Warning button disabled classes: govuk-button--warning disabled: true - name: warning link description: A link button for actions that need a warning - data: + options: name: Warning text: Warning button href: '/' @@ -147,14 +147,14 @@ examples: description: A button that appears on dark backgrounds previewLayoutModifiers: - inverse - data: + options: name: Inverse text: Inverse button classes: govuk-button--inverse - name: inverse disabled previewLayoutModifiers: - inverse - data: + options: name: Inverse text: Inverse button disabled classes: govuk-button--inverse @@ -163,7 +163,7 @@ examples: description: A link button for actions that appear on dark backgrounds previewLayoutModifiers: - inverse - data: + options: name: Inverse text: Inverse button href: '/' @@ -172,7 +172,7 @@ examples: description: A start button that appears on dark backgrounds previewLayoutModifiers: - inverse - data: + options: name: Inverse text: Inverse start button href: '/' @@ -182,7 +182,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: element: button text: Submit attributes: @@ -190,7 +190,7 @@ examples: data-tracking-dimension: 123 - name: link attributes hidden: true - data: + options: element: a text: Submit attributes: @@ -198,7 +198,7 @@ examples: data-tracking-dimension: 123 - name: input attributes hidden: true - data: + options: element: input text: Submit attributes: @@ -206,79 +206,79 @@ examples: data-tracking-dimension: 123 - name: classes hidden: true - data: + options: text: Submit element: button classes: app-button--custom-modifier - name: link classes hidden: true - data: + options: text: Submit element: a classes: app-button--custom-modifier - name: input classes hidden: true - data: + options: text: Submit element: input classes: app-button--custom-modifier - name: name hidden: true - data: + options: text: Submit element: button name: start-now - name: type hidden: true - data: + options: text: Submit element: button type: button - name: input type hidden: true - data: + options: text: Submit element: input type: button - name: explicit link hidden: true - data: + options: element: a href: / text: Continue - name: no href hidden: true - data: + options: text: Submit element: a - name: value hidden: true - data: + options: text: Submit element: button value: start - name: html hidden: true - data: + options: text: Submit element: button html: Start now - name: no type hidden: true - data: + options: text: Button! - name: no data-prevent-double-click hidden: true - data: + options: text: Submit - name: don't prevent double click hidden: true - data: + options: text: Submit preventDoubleClick: false - name: id hidden: true - data: + options: text: Submit element: input id: submit diff --git a/src/govuk/components/character-count/character-count.yaml b/src/govuk/components/character-count/character-count.yaml index e330a61f95..cf201b72a2 100644 --- a/src/govuk/components/character-count/character-count.yaml +++ b/src/govuk/components/character-count/character-count.yaml @@ -103,7 +103,7 @@ params: examples: - name: default - data: + options: name: more-detail id: more-detail maxlength: 10 @@ -112,7 +112,7 @@ examples: - name: with custom textarea description description: with textarea description translated into Welsh - data: + options: name: custom-textarea-description id: custom-textarea-description maxlength: 10 @@ -121,7 +121,7 @@ examples: textareaDescriptionText: Gallwch ddefnyddio hyd at %{count} nod - name: with hint - data: + options: name: with-hint id: with-hint maxlength: 10 @@ -132,7 +132,7 @@ examples: National Insurance number or credit card details. - name: with default value - data: + options: id: with-default-value name: default-value maxlength: 100 @@ -144,7 +144,7 @@ examples: NW1 6XE - name: with default value exceeding limit - data: + options: id: exceeding-characters name: exceeding maxlength: 10 @@ -158,7 +158,7 @@ examples: text: Please do not exceed the maximum allowed limit - name: with custom rows - data: + options: id: custom-rows name: custom maxlength: 10 @@ -167,7 +167,7 @@ examples: rows: 8 - name: with label as page heading - data: + options: id: textarea-with-page-heading name: address maxlength: 10 @@ -177,7 +177,7 @@ examples: isPageHeading: true - name: with word count - data: + options: id: word-count name: word-count maxwords: 10 @@ -185,7 +185,7 @@ examples: text: Full address - name: with threshold - data: + options: id: with-threshold name: with-threshold maxlength: 10 @@ -194,7 +194,7 @@ examples: text: Full address - name: with translations - data: + options: id: with-translations name: with-translations maxlength: 10 @@ -218,7 +218,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: with-classes name: with-classes maxlength: 10 @@ -227,7 +227,7 @@ examples: classes: app-character-count--custom-modifier - name: attributes hidden: true - data: + options: id: with-attributes name: with-attributes maxlength: 10 @@ -237,7 +237,7 @@ examples: data-attribute: my data value - name: formGroup with classes hidden: true - data: + options: id: with-formgroup name: with-formgroup maxlength: 10 @@ -247,7 +247,7 @@ examples: classes: app-character-count--custom-modifier - name: custom classes on countMessage hidden: true - data: + options: id: with-custom-countmessage-class name: with-custom-countmessage-class maxlength: 10 @@ -257,7 +257,7 @@ examples: classes: app-custom-count-message - name: spellcheck enabled hidden: true - data: + options: id: with-spellcheck name: with-spellcheck maxlength: 10 @@ -266,7 +266,7 @@ examples: spellcheck: true - name: spellcheck disabled hidden: true - data: + options: id: without-spellcheck name: without-spellcheck maxlength: 10 @@ -275,7 +275,7 @@ examples: spellcheck: false - name: custom classes with error message hidden: true - data: + options: id: with-custom-error-class name: with-custom-error-class maxlength: 10 @@ -286,7 +286,7 @@ examples: text: Error message - name: with id starting with number hidden: true - data: + options: name: more-detail id: 1_more-detail maxlength: 10 @@ -294,7 +294,7 @@ examples: text: Can you provide more detail? - name: with id with special characters hidden: true - data: + options: id: user1.profile[address] name: address maxlength: 10 @@ -302,7 +302,7 @@ examples: text: Full address - name: with textarea maxlength attribute hidden: true - data: + options: id: maxlength-should-be-removed name: address maxlength: 10 @@ -312,14 +312,14 @@ examples: text: Full address - name: to configure in JavaScript hidden: true - data: + options: id: to-configure-in-javascript name: address label: text: Full address - name: when neither maxlength nor maxwords are set hidden: true - data: + options: id: no-maximum name: no-maximum label: @@ -327,7 +327,7 @@ examples: textareaDescriptionText: 'No more than %{count} characters' - name: when neither maxlength/maxwords nor textarea description are set hidden: true - data: + options: id: no-maximum name: no-maximum label: diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml index e84d62a7c9..7f74e082a2 100644 --- a/src/govuk/components/checkboxes/checkboxes.yaml +++ b/src/govuk/components/checkboxes/checkboxes.yaml @@ -124,7 +124,7 @@ accessibilityCriteria: | examples: - name: default - data: + options: name: nationality items: - value: british @@ -135,7 +135,7 @@ examples: text: Citizen of another country - name: with pre-checked values - data: + options: name: nationality items: - value: british @@ -157,7 +157,7 @@ examples: - other - name: with divider and None - data: + options: name: with-divider-and-none fieldset: legend: @@ -177,7 +177,7 @@ examples: behaviour: exclusive - name: with divider, None and conditional items - data: + options: name: with-divider-and-none-and-conditional-items fieldset: legend: @@ -203,7 +203,7 @@ examples: behaviour: exclusive - name: with id and name - data: + options: name: with-id-and-name fieldset: legend: @@ -224,7 +224,7 @@ examples: value: scottish - name: with hints on items - data: + options: name: with-hints-on-items fieldset: legend: @@ -246,7 +246,7 @@ examples: 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. - name: with disabled item - data: + options: name: sign-in fieldset: legend: @@ -269,7 +269,7 @@ examples: disabled: true - name: with legend as a page heading - data: + options: name: waste fieldset: legend: @@ -287,7 +287,7 @@ examples: text: Farm or agricultural waste - name: with a medium legend - data: + options: name: waste fieldset: legend: @@ -306,7 +306,7 @@ examples: text: Farm or agricultural waste - name: without fieldset - data: + options: name: colours items: - value: red @@ -317,7 +317,7 @@ examples: text: Blue - name: with single option set 'aria-describedby' on input - data: + options: name: t-and-c errorMessage: text: Please accept the terms and conditions @@ -326,7 +326,7 @@ examples: text: I agree to the terms and conditions - name: with single option (and hint) set 'aria-describedby' on input - data: + options: name: t-and-c-with-hint errorMessage: text: Please accept the terms and conditions @@ -337,7 +337,7 @@ examples: text: Go on, you know you want to! - name: with fieldset and error message - data: + options: name: nationality errorMessage: text: Please accept the terms and conditions @@ -353,7 +353,7 @@ examples: text: Citizen of another country - name: with error message - data: + options: name: waste errorMessage: text: Please select an option @@ -369,7 +369,7 @@ examples: text: Farm or agricultural waste - name: with error message and hints on items - data: + options: name: waste errorMessage: text: Please select an option @@ -391,7 +391,7 @@ examples: text: Nullam id dolor id nibh ultricies vehicula ut id elit. - name: with very long option text - data: + options: name: waste hint: text: Nullam id dolor id nibh ultricies vehicula ut id elit. @@ -426,7 +426,7 @@ examples: Donec sed odio dui. Sed posuere consectetur est at lobortis. - name: with conditional items - data: + options: name: with-conditional-items idPrefix: how-contacted fieldset: @@ -453,7 +453,7 @@ examples: - name: with conditional items with special characters - data: + options: name: contact-prefs idPrefix: user.profile[contact-prefs] fieldset: @@ -480,7 +480,7 @@ examples: - name: with conditional item checked - data: + options: name: how-contacted-checked idPrefix: how-contacted-checked fieldset: @@ -508,7 +508,7 @@ examples: - name: with optional form-group classes showing group error - data: + options: name: how-contacted-checked idPrefix: how-contacted-checked formGroup: @@ -539,7 +539,7 @@ examples: - name: small - data: + options: idPrefix: nationality name: nationality classes: govuk-checkboxes--small @@ -555,7 +555,7 @@ examples: text: this thing - name: small with long text - data: + options: idPrefix: nationality name: nationality classes: govuk-checkboxes--small @@ -588,7 +588,7 @@ examples: Donec sed odio dui. Sed posuere consectetur est at lobortis. - name: small with error - data: + options: idPrefix: nationality name: nationality classes: govuk-checkboxes--small @@ -606,7 +606,7 @@ examples: text: this thing - name: small with hint - data: + options: idPrefix: nationality name: nationality classes: govuk-checkboxes--small @@ -624,7 +624,7 @@ examples: text: this thing - name: small with disabled - data: + options: idPrefix: nationality name: nationality classes: govuk-checkboxes--small @@ -641,7 +641,7 @@ examples: disabled: true - name: small with conditional reveal - data: + options: name: how-contacted idPrefix: how-contacted classes: govuk-checkboxes--small @@ -661,7 +661,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with idPrefix hidden: true - data: + options: name: example-name idPrefix: nationality items: @@ -671,7 +671,7 @@ examples: text: Option 2 - name: with falsey values hidden: true - data: + options: name: example-name items: - value: 1 @@ -683,7 +683,7 @@ examples: text: Option 2 - name: classes hidden: true - data: + options: name: example-name classes: app-checkboxes--custom-modifier items: @@ -693,7 +693,7 @@ examples: text: Option 2 - name: with fieldset describedBy hidden: true - data: + options: name: example-name fieldset: describedBy: some-id @@ -708,7 +708,7 @@ examples: text: If you have dual nationality, select all options that are relevant to you. - name: attributes hidden: true - data: + options: name: example-name attributes: data-attribute: value @@ -720,7 +720,7 @@ examples: text: Option 2 - name: with checked item hidden: true - data: + options: name: example-name items: - value: 1 @@ -733,7 +733,7 @@ examples: checked: true - name: items with attributes hidden: true - data: + options: name: example-name items: - value: 1 @@ -748,7 +748,7 @@ examples: data-second-attribute: JKL - name: empty conditional hidden: true - data: + options: name: example-conditional items: - value: foo @@ -757,7 +757,7 @@ examples: html: false - name: with label classes hidden: true - data: + options: name: example-label-classes items: - value: yes @@ -766,7 +766,7 @@ examples: classes: bold - name: multiple hints hidden: true - data: + options: name: example-multiple-hints hint: text: If you have dual nationality, select all options that are relevant to you. @@ -783,7 +783,7 @@ examples: text: Hint for other option here - name: with error message and hint hidden: true - data: + options: name: example items: - value: british @@ -799,7 +799,7 @@ examples: text: If you have dual nationality, select all options that are relevant to you. - name: with error, hint and fieldset describedBy hidden: true - data: + options: name: example errorMessage: text: Please select an option @@ -816,7 +816,7 @@ examples: text: Irish - name: label with attributes hidden: true - data: + options: name: example-name items: - value: 1 @@ -827,7 +827,7 @@ examples: data-second-attribute: second-value - name: fieldset params hidden: true - data: + options: name: example-name errorMessage: text: Please select an option @@ -845,7 +845,7 @@ examples: text: Irish - name: fieldset html params hidden: true - data: + options: name: example-name fieldset: legend: @@ -857,7 +857,7 @@ examples: text: Irish - name: with single option set 'aria-describedby' on input, and describedBy hidden: true - data: + options: describedBy: some-id name: t-and-c errorMessage: @@ -867,7 +867,7 @@ examples: text: I agree to the terms and conditions - name: with single option (and hint) set 'aria-describedby' on input, and describedBy hidden: true - data: + options: describedBy: some-id name: t-and-c-with-hint errorMessage: @@ -879,7 +879,7 @@ examples: text: Go on, you know you want to! - name: with error and idPrefix hidden: true - data: + options: name: name-of-checkboxes errorMessage: text: Please select an option @@ -889,7 +889,7 @@ examples: text: Waste from animal carcasses - name: with error message and fieldset describedBy hidden: true - data: + options: name: example errorMessage: text: Please select an option @@ -905,7 +905,7 @@ examples: - name: item checked overrides values hidden: true - data: + options: name: colors items: - value: red diff --git a/src/govuk/components/cookie-banner/cookie-banner.yaml b/src/govuk/components/cookie-banner/cookie-banner.yaml index 0c1dc2dc83..ec1149e612 100644 --- a/src/govuk/components/cookie-banner/cookie-banner.yaml +++ b/src/govuk/components/cookie-banner/cookie-banner.yaml @@ -88,7 +88,7 @@ params: examples: - name: default - data: + options: messages: - headingText: Cookies on this government service text: We use analytics cookies to help understand how users use our service. @@ -105,7 +105,7 @@ examples: href: /cookie-preferences - name: accepted confirmation banner - data: + options: messages: - text: Your cookie preferences have been saved. You have accepted cookies. role: alert @@ -114,7 +114,7 @@ examples: type: button - name: rejected confirmation banner - data: + options: messages: - text: Your cookie preferences have been saved. You have rejected cookies. role: alert @@ -123,7 +123,7 @@ examples: type: button - name: client-side implementation - data: + options: messages: - headingText: Cookies on this service text: We use cookies to help understand how users use our service. @@ -152,7 +152,7 @@ examples: type: button - name: with html - data: + options: messages: - headingHtml: Cookies on my service html:

We use cookies in our service.

We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.

@@ -171,62 +171,62 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: heading html hidden: true - data: + options: messages: - headingHtml: Cookies on my service - name: heading html as text hidden: true - data: + options: messages: - headingText: Cookies on my service - name: html hidden: true - data: + options: messages: - html:

We use cookies in our service.

- name: classes hidden: true - data: + options: messages: - classes: 'app-my-class' - name: attributes hidden: true - data: + options: messages: - attributes: 'data-attribute': 'my-value' - name: custom aria label hidden: true - data: + options: ariaLabel: 'Cookies on GOV.UK' messages: - text: 'We use cookies on GOV.UK' - name: hidden hidden: true - data: + options: messages: - hidden: true - name: hidden false hidden: true - data: + options: messages: - hidden: false - name: default action hidden: true - data: + options: messages: - actions: - text: This is a button - name: link hidden: true - data: + options: messages: - actions: - text: This is a link href: /link - name: link with false button options hidden: true - data: + options: messages: - actions: - text: This is a link @@ -235,7 +235,7 @@ examples: name: link - name: link as a button hidden: true - data: + options: messages: - actions: - text: This is a link @@ -243,21 +243,21 @@ examples: type: button - name: type hidden: true - data: + options: messages: - actions: - text: Button type: button - name: button classes hidden: true - data: + options: messages: - actions: - text: Button with custom classes classes: 'my-button-class app-button-class' - name: button attributes hidden: true - data: + options: messages: - actions: - text: Button with attributes @@ -265,7 +265,7 @@ examples: 'data-button-attribute': 'my-value' - name: link classes hidden: true - data: + options: messages: - actions: - text: Link with custom classes @@ -273,7 +273,7 @@ examples: classes: 'my-link-class app-link-class' - name: link attributes hidden: true - data: + options: messages: - actions: - text: Link with attributes @@ -282,7 +282,7 @@ examples: 'data-link-attribute': 'my-value' - name: full banner hidden hidden: true - data: + options: hidden: true classes: hide-cookie-banner attributes: diff --git a/src/govuk/components/date-input/date-input.yaml b/src/govuk/components/date-input/date-input.yaml index 6c9282acaa..f5397859f8 100644 --- a/src/govuk/components/date-input/date-input.yaml +++ b/src/govuk/components/date-input/date-input.yaml @@ -79,10 +79,10 @@ params: examples: - name: default - data: + options: id: dob - name: complete question - data: + options: id: dob namePrefix: dob fieldset: @@ -98,7 +98,7 @@ examples: - name: year classes: govuk-input--width-4 - name: with errors only - data: + options: id: dob-errors fieldset: legend: @@ -113,7 +113,7 @@ examples: - name: year classes: govuk-input--width-4 govuk-input--error - name: with errors and hint - data: + options: id: dob-errors fieldset: legend: @@ -130,7 +130,7 @@ examples: - name: year classes: govuk-input--width-4 govuk-input--error - name: with error on day input - data: + options: id: dob-day-error namePrefix: dob-day-error fieldset: @@ -148,7 +148,7 @@ examples: - name: year classes: govuk-input--width-4 - name: with error on month input - data: + options: id: dob-month-error namePrefix: dob-month-error fieldset: @@ -166,7 +166,7 @@ examples: - name: year classes: govuk-input--width-4 - name: with error on year input - data: + options: id: dob-year-error namePrefix: dob-year-error fieldset: @@ -184,7 +184,7 @@ examples: - name: year classes: govuk-input--width-4 govuk-input--error - name: with default items - data: + options: id: dob namePrefix: dob fieldset: @@ -193,7 +193,7 @@ examples: hint: text: For example, 31 3 1980 - name: with optional form-group classes - data: + options: id: dob namePrefix: dob fieldset: @@ -204,7 +204,7 @@ examples: formGroup: classes: extra-class - name: with autocomplete values - data: + options: id: dob-with-autocomplete-attribute namePrefix: dob-with-autocomplete fieldset: @@ -223,7 +223,7 @@ examples: classes: govuk-input--width-4 autocomplete: bday-year - name: with input attributes - data: + options: id: dob-with-input-attributes namePrefix: dob-with-input-attributes fieldset: @@ -248,30 +248,30 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: with-classes classes: app-date-input--custom-modifier - name: attributes hidden: true - data: + options: id: with-attributes attributes: data-attribute: my data value - name: with empty items hidden: true - data: + options: id: with-empty-items items: [] - name: custom pattern hidden: true - data: + options: id: with-custom-pattern items: - name: day pattern: '[0-8]*' - name: custom inputmode hidden: true - data: + options: id: with-custom-inputmode items: - name: day @@ -279,7 +279,7 @@ examples: inputmode: 'text' - name: with nested name hidden: true - data: + options: id: with-nested-name items: - name: day[dd] @@ -287,7 +287,7 @@ examples: - name: year[yyyy] - name: with id on items hidden: true - data: + options: id: with-item-id items: - id: day @@ -298,7 +298,7 @@ examples: name: year - name: suffixed id hidden: true - data: + options: id: my-date-input items: - name: day @@ -306,7 +306,7 @@ examples: - name: year - name: with values hidden: true - data: + options: id: with-values items: - id: day @@ -318,7 +318,7 @@ examples: value: 2018 - name: with hint and describedBy hidden: true - data: + options: id: dob-errors fieldset: describedBy: some-id @@ -328,7 +328,7 @@ examples: text: For example, 31 3 1980 - name: with error and describedBy hidden: true - data: + options: id: dob-errors fieldset: describedBy: some-id @@ -338,14 +338,14 @@ examples: text: Error message goes here - name: fieldset html hidden: true - data: + options: id: with-fieldset-html fieldset: legend: html: What is your date of birth? - name: items with classes hidden: true - data: + options: id: with-item-classes items: - name: day @@ -356,7 +356,7 @@ examples: classes: app-date-input__year - name: items without classes hidden: true - data: + options: id: without-item-classes items: - name: day diff --git a/src/govuk/components/details/details.yaml b/src/govuk/components/details/details.yaml index 46d35f473e..1a7006d8a8 100644 --- a/src/govuk/components/details/details.yaml +++ b/src/govuk/components/details/details.yaml @@ -38,13 +38,13 @@ params: examples: - name: default - data: + options: 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. - name: expanded - data: + options: id: help-with-nationality summaryText: Help with nationality text: We need to know your nationality so we can work out which elections @@ -52,7 +52,7 @@ examples: you’ll have to send copies of identity documents through the post. open: true - name: with html - data: + options: summaryText: Where to find your National Insurance Number html: | Your National Insurance number can be found on @@ -67,39 +67,39 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: id hidden: true - data: + options: id: my-details-element summaryText: Expand this section text: Here are some more details - name: html as text hidden: true - data: + options: summaryText: Expand this section text: More about the greater than symbol (>) - name: html hidden: true - data: + options: summaryText: Expand this section html: More about bold text - name: summary html as text hidden: true - data: + options: summaryText: The greater than symbol (>) is the best text: Here are some more details - name: summary html hidden: true - data: + options: summaryHtml: Use bold text sparingly text: Here are some more details - name: classes hidden: true - data: + options: classes: some-additional-class text: Here are some more details summaryText: Expand me - name: attributes hidden: true - data: + options: text: Here are some more details summaryText: Expand me attributes: diff --git a/src/govuk/components/error-message/error-message.yaml b/src/govuk/components/error-message/error-message.yaml index 12602df7cc..1a546b6d72 100644 --- a/src/govuk/components/error-message/error-message.yaml +++ b/src/govuk/components/error-message/error-message.yaml @@ -40,47 +40,47 @@ accessibilityCriteria: | examples: - name: default - data: + options: text: Error message about full name goes here - name: translated - data: + options: visuallyHiddenText: '' html: Gwall: Neges gwall am yr enw llawn yn mynd yma # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: id hidden: true - data: + options: id: my-error-message-id text: This is an error message - name: classes hidden: true - data: + options: classes: custom-class text: This is an error message - name: html as text hidden: true - data: + options: text: Unexpected > in body - name: html hidden: true - data: + options: html: Unexpected bold text in body copy - name: attributes hidden: true - data: + options: text: This is an error message attributes: data-test: attribute id: my-error-message - name: with visually hidden text hidden: true - data: + options: text: Rhowch eich enw llawn visuallyHiddenText: Gwall - name: visually hidden text removed hidden: true - data: + options: text: There is an error on line 42 visuallyHiddenText: '' diff --git a/src/govuk/components/error-summary/error-summary.yaml b/src/govuk/components/error-summary/error-summary.yaml index 82edcbea17..b10c558bae 100644 --- a/src/govuk/components/error-summary/error-summary.yaml +++ b/src/govuk/components/error-summary/error-summary.yaml @@ -58,7 +58,7 @@ accessibilityCriteria: | examples: - name: default - data: + options: titleText: There is a problem errorList: - text: The date your passport was issued must be in the past @@ -66,19 +66,19 @@ examples: - text: Enter a postcode, like AA1 1AA href: '#example-error-2' - name: without links - data: + options: titleText: There is a problem errorList: - text: Invalid username or password - name: mixed with and without links - data: + options: titleText: There is a problem errorList: - text: Invalid username or password - text: Agree to the terms of service to log in href: '#example-error-1' - name: with everything - data: + options: titleText: There is a problem descriptionText: Please fix the errors below. errorList: @@ -89,47 +89,47 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: html as titleText hidden: true - data: + options: titleText: Alert, alert errorList: - text: Invalid username or password - name: title html hidden: true - data: + options: titleHtml: Alert, alert errorList: - text: Invalid username or password - name: description hidden: true - data: + options: titleText: There is a problem descriptionText: Lorem ipsum errorList: - text: Invalid username or password - name: html as descriptionText hidden: true - data: + options: titleText: There is a problem descriptionText: See errors below (>) errorList: - text: Invalid username or password - name: description html hidden: true - data: + options: titleText: There is a problem descriptionHtml: See errors below errorList: - text: Invalid username or password - name: classes hidden: true - data: + options: titleText: There is a problem classes: extra-class one-more-class errorList: - text: Invalid username or password - name: attributes hidden: true - data: + options: titleText: There is a problem attributes: first-attribute: 'foo' @@ -138,7 +138,7 @@ examples: - text: Invalid username or password - name: error list with attributes hidden: true - data: + options: titleText: There is a problem errorList: - text: Error-1 @@ -148,37 +148,37 @@ examples: data-attribute-2: my-attribute-2 - name: error list with html as text hidden: true - data: + options: titleText: There is a problem errorList: - text: Descriptive link to the question with an error - name: error list with html hidden: true - data: + options: titleText: There is a problem errorList: - html: The date your passport was issued must be in the past - name: error list with html link hidden: true - data: + options: titleText: There is a problem errorList: - html: Descriptive link to the question with an error href: '#error-1' - name: error list with html as text link hidden: true - data: + options: titleText: There is a problem errorList: - text: Descriptive link to the question with an error href: '#error-1' - name: autofocus disabled hidden: true - data: + options: titleText: There is a problem disableAutoFocus: true - name: autofocus explicitly enabled hidden: true - data: + options: titleText: There is a problem disableAutoFocus: false diff --git a/src/govuk/components/exit-this-page/exit-this-page.yaml b/src/govuk/components/exit-this-page/exit-this-page.yaml index a55cabf399..9f099a37cd 100644 --- a/src/govuk/components/exit-this-page/exit-this-page.yaml +++ b/src/govuk/components/exit-this-page/exit-this-page.yaml @@ -42,14 +42,14 @@ params: examples: - name: default - data: + options: redirectUrl: '/full-page-examples/announcements' id: null classes: null attributes: {} - name: translated - data: + options: text: Gadael y dudalen activatedText: Tudalen ymadael timedOutText: Wedi'i amseru @@ -59,7 +59,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: testing hidden: true - data: + options: text: 'Exit this test' redirectUrl: 'https://www.test.co.uk' id: 'test-id' @@ -68,5 +68,5 @@ examples: test-attribute: true - name: testing-html hidden: true - data: + options: html: 'Exit this test' diff --git a/src/govuk/components/fieldset/fieldset.yaml b/src/govuk/components/fieldset/fieldset.yaml index 74300bfcc5..4a12c41e9e 100644 --- a/src/govuk/components/fieldset/fieldset.yaml +++ b/src/govuk/components/fieldset/fieldset.yaml @@ -47,55 +47,55 @@ params: examples: - name: default - data: + options: legend: text: What is your address? - name: styled as xl text - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--xl - name: styled as large text - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--l - name: styled as medium text - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--m - name: styled as small text - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--s - name: as page heading xl - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--xl isPageHeading: true - name: as page heading l - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--l isPageHeading: true - name: as page heading m - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--m isPageHeading: true - name: as page heading s - data: + options: legend: text: What is your address? classes: govuk-fieldset__legend--s isPageHeading: true - name: as page heading without class - data: + options: legend: text: What is your address? isPageHeading: true @@ -103,7 +103,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: html fieldset content hidden: true - data: + options: legend: text: What is your address? html: | @@ -112,41 +112,41 @@ examples: - name: with describedBy hidden: true - data: + options: describedBy: some-id legend: text: Which option? - name: html as text hidden: true - data: + options: legend: text: What is your address? - name: html hidden: true - data: + options: legend: html: What is your address? - name: legend classes hidden: true - data: + options: legend: text: What is your address? classes: my-custom-class - name: classes hidden: true - data: + options: classes: app-fieldset--custom-modifier legend: text: Which option? - name: role hidden: true - data: + options: role: group legend: text: Which option? - name: attributes hidden: true - data: + options: attributes: data-attribute: value legend: diff --git a/src/govuk/components/file-upload/file-upload.yaml b/src/govuk/components/file-upload/file-upload.yaml index 500a3ccf37..0540681bd7 100644 --- a/src/govuk/components/file-upload/file-upload.yaml +++ b/src/govuk/components/file-upload/file-upload.yaml @@ -54,13 +54,13 @@ params: examples: - name: default - data: + options: id: file-upload-1 name: file-upload-1 label: text: Upload a file - name: with hint text - data: + options: id: file-upload-2 name: file-upload-2 label: @@ -68,7 +68,7 @@ examples: hint: text: Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto. - name: with error message and hint - data: + options: id: file-upload-3 name: file-upload-3 label: @@ -78,14 +78,14 @@ examples: errorMessage: text: Error message goes here - name: with value - data: + options: id: file-upload-4 name: file-upload-4 value: C:\fakepath\myphoto.jpg label: text: Upload a photo - name: with label as page heading - data: + options: id: file-upload-1 name: file-upload-1 label: @@ -93,7 +93,7 @@ examples: classes: govuk-label--l isPageHeading: true - name: with optional form-group classes - data: + options: id: file-upload-1 name: file-upload-1 label: @@ -104,7 +104,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: id: file-upload-attributes name: file-upload-attributes label: @@ -113,7 +113,7 @@ examples: accept: .jpg, .jpeg, .png - name: classes hidden: true - data: + options: id: file-upload-classes name: file-upload-classes label: @@ -121,7 +121,7 @@ examples: classes: app-file-upload--custom-modifier - name: with describedBy hidden: true - data: + options: id: file-upload-describedby name: file-upload-describedby label: @@ -129,7 +129,7 @@ examples: describedBy: some-id - name: with hint and describedBy hidden: true - data: + options: id: file-upload-hint-describedby name: file-upload-hint-describedby label: @@ -139,7 +139,7 @@ examples: text: Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto. - name: error hidden: true - data: + options: id: file-upload-with-error name: file-upload-with-error label: @@ -148,7 +148,7 @@ examples: text: Error message - name: with error and describedBy hidden: true - data: + options: id: file-upload-error-describedby name: file-upload-error-describedby label: @@ -158,7 +158,7 @@ examples: text: Error message - name: with error, describedBy and hint hidden: true - data: + options: id: file-upload-error-describedby-hint name: file-upload-error-describedby-hint label: diff --git a/src/govuk/components/footer/footer.yaml b/src/govuk/components/footer/footer.yaml index a1297877f4..40e32ad28e 100644 --- a/src/govuk/components/footer/footer.yaml +++ b/src/govuk/components/footer/footer.yaml @@ -140,11 +140,11 @@ accessibilityCriteria: | examples: - name: default - data: {} + options: {} - name: with custom HTML content licence and copyright notice description: Open Government Licence and Crown copyright notice translated into Welsh - data: + options: contentLicence: html: 'Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol' copyright: @@ -152,7 +152,7 @@ examples: - name: with custom text content licence and copyright notice description: Open Government Licence and Crown copyright notice translated into Welsh - data: + options: contentLicence: text: 'Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol' copyright: @@ -160,7 +160,7 @@ examples: - name: with meta description: Secondary navigation with meta information relating to the site - data: + options: meta: visuallyHiddenTitle: Items items: @@ -173,13 +173,13 @@ examples: - name: with custom meta description: Custom meta section - data: + options: meta: text: GOV.UK Prototype Kit v7.0.1 - name: with meta links and meta content description: Secondary navigation links and custom meta text - data: + options: meta: items: - href: '#1' @@ -202,12 +202,12 @@ examples: - name: with custom meta description: Custom meta section - data: + options: meta: text: GOV.UK Prototype Kit v7.0.1 - name: with default width navigation (one column) - data: + options: navigation: - title: Navigation section items: @@ -225,7 +225,7 @@ examples: text: Navigation item 6 - name: with default width navigation (two columns) - data: + options: navigation: - title: Navigation section columns: 2 @@ -244,7 +244,7 @@ examples: text: Navigation item 6 - name: with navigation - data: + options: navigation: - title: Two column list width: two-thirds @@ -274,7 +274,7 @@ examples: - name: Full GDS example description: A full example based on GOV.UK's current footer - data: + options: navigation: - title: Coronavirus (COVID-19) width: two-thirds @@ -353,7 +353,7 @@ examples: - name: Three equal columns description: A full example to demonstrate three equal width columns - data: + options: navigation: - title: Single column list 1 width: one-third @@ -407,47 +407,47 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: attributes: data-test-attribute: value data-test-attribute-2: value-2 - name: classes hidden: true - data: + options: classes: app-footer--custom-modifier - name: with container classes hidden: true - data: + options: containerClasses: app-width-container - name: with HTML passed as text content hidden: true - data: + options: contentLicence: text: 'Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol' copyright: text: 'Hawlfraint y Goron' - name: with empty meta hidden: true - data: + options: meta: {} - name: with empty meta items hidden: true - data: + options: meta: items: [] - name: meta html as text hidden: true - data: + options: meta: text: GOV.UK Prototype Kit v7.0.1 - name: with meta html hidden: true - data: + options: meta: html: GOV.UK Prototype Kit v7.0.1 - name: with meta item attributes hidden: true - data: + options: meta: items: - href: '#1' @@ -457,11 +457,11 @@ examples: data-attribute-2: my-attribute-2 - name: with empty navigation hidden: true - data: + options: navigation: [] - name: with navigation item attributes hidden: true - data: + options: navigation: - title: Single column list 1 items: diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml index 86c4baa41a..9bca5090be 100644 --- a/src/govuk/components/header/header.yaml +++ b/src/govuk/components/header/header.yaml @@ -96,20 +96,20 @@ accessibilityCriteria: | examples: - name: default description: The standard header as used on information pages on GOV.UK - data: {} + options: {} - name: with service name description: If your service is more than a few pages long, you can help users understand where they are by adding the service name. - data: + options: serviceName: Service Name serviceUrl: '/components/header' - name: with service name but no service url - data: + options: serviceName: Service Name - name: with navigation - data: + options: navigation: - href: '#1' text: Navigation item 1 @@ -122,7 +122,7 @@ examples: text: Navigation item 4 - name: with custom navigation label - data: + options: navigationLabel: Custom navigation label navigation: - href: '#1' @@ -137,7 +137,7 @@ examples: - name: with custom menu button text description: Button translated into Welsh - data: + options: menuButtonText: Dewislen navigation: - href: '#1' @@ -151,7 +151,7 @@ examples: text: Eitem llywio 4 - name: with custom menu button label - data: + options: menuButtonLabel: Custom button label navigation: - href: '#1' @@ -166,7 +166,7 @@ examples: - name: with service name and navigation description: If you need to include basic navigation, contact or account management links. - data: + options: serviceName: Service Name serviceUrl: '/components/header' navigation: @@ -182,7 +182,7 @@ examples: - name: with large navigation description: An edge case example with a large number of navitation items with long names used to test wrapping - data: + options: navigation: - href: '/browse/benefits' text: Benefits @@ -218,18 +218,18 @@ examples: text: Working, jobs and pensions - name: with product name - data: + options: navigationClasses: govuk-header__navigation--end productName: Product Name - name: full width - data: + options: containerClasses: govuk-header__container--full-width navigationClasses: govuk-header__navigation--end productName: Product Name - name: full width with navigation - data: + options: containerClasses: govuk-header__container--full-width navigationClasses: govuk-header__navigation--end productName: Product Name @@ -243,7 +243,7 @@ examples: text: Navigation item 3 - name: navigation item with html - data: + options: serviceName: Service Name serviceUrl: '/components/header' navigation: @@ -256,7 +256,7 @@ examples: html: Navigation item 3 - name: navigation item with text without link - data: + options: serviceName: Service Name serviceUrl: '/components/header' navigation: @@ -267,21 +267,21 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: attributes: data-test-attribute: value data-test-attribute-2: value-2 - name: classes hidden: true - data: + options: classes: app-header--custom-modifier - name: custom homepage url hidden: true - data: + options: homepageUrl: / - name: navigation item with attributes hidden: true - data: + options: navigation: - href: /link text: Item @@ -290,7 +290,7 @@ examples: data-attribute-2: my-attribute-2 - name: navigation item with html as text hidden: true - data: + options: serviceName: Service Name serviceUrl: '/components/header' navigation: @@ -303,7 +303,7 @@ examples: text: Navigation item 3 - name: navigation item with html without link hidden: true - data: + options: serviceName: Service Name serviceUrl: '/components/header' navigation: @@ -313,7 +313,7 @@ examples: - html: Navigation item 3 - name: with custom navigation label and custom menu button text hidden: true - data: + options: menuButtonText: Custom menu button text navigationLabel: Custom navigation label navigation: diff --git a/src/govuk/components/hint/hint.yaml b/src/govuk/components/hint/hint.yaml index de018f637f..a09a1f5940 100644 --- a/src/govuk/components/hint/hint.yaml +++ b/src/govuk/components/hint/hint.yaml @@ -36,12 +36,12 @@ accessibilityCriteria: | examples: - name: default - data: + options: text: | It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'. - name: with html - data: + options: html: | It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'. @@ -49,22 +49,22 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: example-hint classes: app-hint--custom-modifier text: It's on your National Insurance card, benefit letter, payslip or P60. - name: id hidden: true - data: + options: id: my-hint text: It's on your National Insurance card, benefit letter, payslip or P60. - name: html as text hidden: true - data: + options: text: Unexpected bold text in body - name: attributes hidden: true - data: + options: text: It's on your National Insurance card, benefit letter, payslip or P60. attributes: data-attribute: my data value diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml index a468e0743d..1c4b6e0fbe 100644 --- a/src/govuk/components/input/input.yaml +++ b/src/govuk/components/input/input.yaml @@ -116,13 +116,13 @@ params: examples: - name: default - data: + options: label: text: National Insurance number id: input-example name: test-name - name: with hint text - data: + options: label: text: National insurance number hint: @@ -130,7 +130,7 @@ examples: id: input-with-hint-text name: test-name-2 - name: with error message - data: + options: label: text: National Insurance number hint: @@ -140,7 +140,7 @@ examples: errorMessage: text: Error message goes here - name: with width-2 class - data: + options: label: text: National insurance number hint: @@ -149,7 +149,7 @@ examples: name: test-width-2 classes: govuk-input--width-2 - name: with width-3 class - data: + options: label: text: National insurance number hint: @@ -158,7 +158,7 @@ examples: name: test-width-3 classes: govuk-input--width-3 - name: with width-4 class - data: + options: label: text: National insurance number hint: @@ -167,7 +167,7 @@ examples: name: test-width-4 classes: govuk-input--width-4 - name: with width-5 class - data: + options: label: text: National insurance number hint: @@ -176,7 +176,7 @@ examples: name: test-width-5 classes: govuk-input--width-5 - name: with width-10 class - data: + options: label: text: National insurance number hint: @@ -185,7 +185,7 @@ examples: name: test-width-10 classes: govuk-input--width-10 - name: with width-20 class - data: + options: label: text: National insurance number hint: @@ -194,7 +194,7 @@ examples: name: test-width-20 classes: govuk-input--width-20 - name: with width-30 class - data: + options: label: text: National insurance number hint: @@ -203,7 +203,7 @@ examples: name: test-width-30 classes: govuk-input--width-30 - name: with label as page heading - data: + options: label: text: National Insurance number classes: govuk-label--l @@ -211,7 +211,7 @@ examples: id: input-with-page-heading name: test-name - name: with optional form-group classes - data: + options: label: text: National Insurance number id: input-example @@ -219,14 +219,14 @@ examples: formGroup: classes: extra-class - name: with autocomplete attribute - data: + options: label: text: Postcode id: input-with-autocomplete-attribute name: postcode autocomplete: postal-code - name: with pattern attribute - data: + options: label: text: Numbers only id: input-with-pattern-attribute @@ -234,7 +234,7 @@ examples: type: number pattern: '[0-9]*' - name: with spellcheck enabled - data: + options: label: text: Spellcheck is enabled id: input-with-spellcheck-enabled @@ -242,7 +242,7 @@ examples: type: text spellcheck: true - name: with spellcheck disabled - data: + options: label: text: Spellcheck is disabled id: input-with-spellcheck-disabled @@ -251,7 +251,7 @@ examples: spellcheck: false - name: with prefix - data: + options: label: text: Amount, in pounds id: input-with-prefix @@ -260,7 +260,7 @@ examples: text: £ - name: with suffix - data: + options: label: text: Weight, in kilograms id: input-with-suffix @@ -269,7 +269,7 @@ examples: text: kg - name: with prefix and suffix - data: + options: label: text: Cost per item, in pounds id: input-with-prefix-suffix @@ -279,7 +279,7 @@ examples: suffix: text: per item - name: with prefix and long suffix - data: + options: label: text: Cost per item, in pounds, per household member id: input-with-prefix-suffix @@ -289,7 +289,7 @@ examples: suffix: text: per household member - name: with prefix and suffix and error - data: + options: label: text: Cost per item, in pounds id: input-with-prefix-suffix @@ -301,7 +301,7 @@ examples: errorMessage: text: Error message goes here - name: with prefix and suffix and width modifier - data: + options: label: text: Cost per item, in pounds id: input-with-prefix-suffix @@ -312,7 +312,7 @@ examples: suffix: text: per item - name: with extra letter spacing - data: + options: id: input-with-extra-letter-spacing label: text: National insurance number @@ -322,7 +322,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: with-classes name: with-classes label: @@ -330,7 +330,7 @@ examples: classes: app-input--custom-modifier - name: custom type hidden: true - data: + options: id: with-custom-type name: with-custom-type label: @@ -338,7 +338,7 @@ examples: type: number - name: value hidden: true - data: + options: id: with-value name: with-value label: @@ -346,7 +346,7 @@ examples: value: QQ 12 34 56 C - name: with describedBy hidden: true - data: + options: id: with-describedby name: with-describedby label: @@ -354,7 +354,7 @@ examples: describedBy: some-id - name: attributes hidden: true - data: + options: id: with-attributes name: with-attributes label: @@ -363,7 +363,7 @@ examples: data-attribute: my data value - name: hint with describedBy hidden: true - data: + options: id: with-hint-describedby name: with-hint-describedby label: @@ -373,7 +373,7 @@ examples: text: It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. - name: error with describedBy hidden: true - data: + options: id: with-error-describedby name: with-error-describedby label: @@ -383,7 +383,7 @@ examples: text: Error message - name: with error and hint hidden: true - data: + options: id: with-error-hint name: with-error-hint label: @@ -394,7 +394,7 @@ examples: text: Hint - name: with error, hint and describedBy hidden: true - data: + options: id: with-error-hint-describedby name: with-error-hint-describedby label: @@ -406,7 +406,7 @@ examples: describedBy: some-id - name: inputmode hidden: true - data: + options: id: with-inputmode name: with-inputmode label: @@ -415,7 +415,7 @@ examples: - name: with prefix with html as text hidden: true - data: + options: label: text: Amount, in pounds id: input-with-prefix @@ -424,7 +424,7 @@ examples: text: £ - name: with prefix with html hidden: true - data: + options: label: html: Amount, in pounds id: input-with-prefix @@ -433,7 +433,7 @@ examples: html: £ - name: with prefix with classes hidden: true - data: + options: label: text: Amount, in pounds id: input-with-prefix-element @@ -443,7 +443,7 @@ examples: classes: app-input__prefix--custom-modifier - name: with prefix with attributes hidden: true - data: + options: label: text: Amount, in pounds id: input-with-prefix-element @@ -455,7 +455,7 @@ examples: - name: with suffix with html as text hidden: true - data: + options: label: text: Weight, in kilograms id: input-with-suffix @@ -464,7 +464,7 @@ examples: text: kg - name: with suffix with html hidden: true - data: + options: label: text: Weight, in kilograms id: input-with-suffix @@ -473,7 +473,7 @@ examples: html: kg - name: with suffix with classes hidden: true - data: + options: label: text: Weight, in kilograms id: input-with-suffix @@ -483,7 +483,7 @@ examples: classes: app-input__suffix--custom-modifier - name: with suffix with attributes hidden: true - data: + options: label: text: Weight, in kilograms id: input-with-suffix diff --git a/src/govuk/components/inset-text/inset-text.yaml b/src/govuk/components/inset-text/inset-text.yaml index ea0b45de84..f6ee82d310 100644 --- a/src/govuk/components/inset-text/inset-text.yaml +++ b/src/govuk/components/inset-text/inset-text.yaml @@ -26,10 +26,10 @@ params: examples: - name: default - data: + options: text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. - name: with html - data: + options: html: |

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

@@ -44,21 +44,21 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: classes: app-inset-text--custom-modifier text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. - name: id hidden: true - data: + options: id: my-inset-text text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. - name: html as text hidden: true - data: + options: text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. - name: attributes hidden: true - data: + options: text: It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. attributes: data-attribute: my data value diff --git a/src/govuk/components/label/label.yaml b/src/govuk/components/label/label.yaml index 9d77c451bf..d0f6953030 100644 --- a/src/govuk/components/label/label.yaml +++ b/src/govuk/components/label/label.yaml @@ -26,78 +26,78 @@ params: examples: - name: default - data: + options: text: National Insurance number - name: with bold text - data: + options: classes: govuk-label--s text: National Insurance number - name: styled as xl text - data: + options: text: National Insurance number classes: govuk-label--xl - name: styled as large text - data: + options: text: National Insurance number classes: govuk-label--l - name: styled as medium text - data: + options: text: National Insurance number classes: govuk-label--m - name: styled as small text - data: + options: text: National Insurance number classes: govuk-label--s - name: as page heading xl - data: + options: text: National Insurance number classes: govuk-label--xl isPageHeading: true - name: as page heading l - data: + options: text: National Insurance number classes: govuk-label--l isPageHeading: true - name: as page heading m - data: + options: text: National Insurance number classes: govuk-label--m isPageHeading: true - name: as page heading s - data: + options: text: National Insurance number classes: govuk-label--s isPageHeading: true - name: as page heading without class - data: + options: text: National Insurance number isPageHeading: true # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: empty hidden: true - data: {} + options: {} - name: classes hidden: true - data: + options: text: National Insurance number classes: extra-class one-more-class - name: html as text hidden: true - data: + options: text: National Insurance number, NINO - name: html hidden: true - data: + options: html: National Insurance number NINO - name: for hidden: true - data: + options: for: '#dummy-input' text: National Insurance number - name: attributes hidden: true - data: + options: text: National Insurance number attributes: first-attribute: 'foo' diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml index a55536eb2e..ef274c7e5e 100644 --- a/src/govuk/components/notification-banner/notification-banner.yaml +++ b/src/govuk/components/notification-banner/notification-banner.yaml @@ -54,26 +54,26 @@ params: examples: - name: default - data: + options: text: This publication was withdrawn on 7 March 2014. - name: paragraph as html heading - data: + options: html:

You have 9 days to send a response.

- name: with text as html - data: + options: html: |

This publication was withdrawn on 7 March 2014

Archived and replaced by the new planning guidance launched 6 March 2014 on an external website

- name: with type as success - data: + options: type: success text: Email sent to example@email.com - name: success with custom html - data: + options: type: success html: |

4 files uploaded

- name: with a list - data: + options: html: |

4 files uploaded

- name: with long heading - data: + options: text: This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters. - name: with lots of content - data: + options: html: >

Check if you need to apply the reverse charge to this application @@ -101,22 +101,22 @@ examples: - name: auto-focus disabled, with type as success - data: + options: type: success disableAutoFocus: true text: Email sent to example@email.com - name: auto-focus explicitly enabled, with type as success - data: + options: type: success disableAutoFocus: false text: Email sent to example@email.com - name: role=alert overridden to role=region, with type as success - data: + options: type: success role: region text: Email sent to example@email.com - name: custom tabindex - data: + options: type: success text: Email sent to example@email.com attributes: @@ -126,65 +126,65 @@ examples: - name: custom title hidden: true - data: + options: titleText: Important information text: This publication was withdrawn on 7 March 2014. - name: title as html hidden: true - data: + options: titleHtml: Important information text: This publication was withdrawn on 7 March 2014. - name: title html as text hidden: true - data: + options: titleText: Important information text: This publication was withdrawn on 7 March 2014. - name: custom title heading level hidden: true - data: + options: titleHeadingLevel: 3 text: This publication was withdrawn on 7 March 2014. - name: custom title id hidden: true - data: + options: titleId: my-id text: This publication was withdrawn on 7 March 2014. - name: custom title id with type as success hidden: true - data: + options: type: success titleId: my-id text: Email sent to example@email.com - name: custom text hidden: true - data: + options: text: This publication was withdrawn on 7 March 2014. - name: html as text hidden: true - data: + options: text: This publication was withdrawn on 7 March 2014. - name: custom role hidden: true - data: + options: role: banner text: This publication was withdrawn on 7 March 2014. - name: classes hidden: true - data: + options: text: This publication was withdrawn on 7 March 2014. classes: app-my-class - name: attributes hidden: true - data: + options: text: This publication was withdrawn on 7 March 2014. attributes: my-attribute: value - name: with invalid type hidden: true - data: + options: type: some-type text: This publication was withdrawn on 7 March 2014. diff --git a/src/govuk/components/pagination/pagination.yaml b/src/govuk/components/pagination/pagination.yaml index 600d3b1970..cef703046c 100644 --- a/src/govuk/components/pagination/pagination.yaml +++ b/src/govuk/components/pagination/pagination.yaml @@ -93,7 +93,7 @@ params: examples: - name: default - data: + options: previous: href: '/previous' next: @@ -107,7 +107,7 @@ examples: - number: 3 href: '/page/3' - name: with custom navigation landmark - data: + options: previous: href: '/previous' next: @@ -122,7 +122,7 @@ examples: - number: 3 href: '/page/3' - name: with custom link and item text - data: + options: previous: href: '/previous' text: 'Previous page' @@ -138,7 +138,7 @@ examples: - number: 'three' href: '/page/3' - name: with custom accessible labels on item links - data: + options: previous: href: '/previous' next: @@ -155,7 +155,7 @@ examples: href: '/page/3' visuallyHiddenText: '3rd page' - name: with many pages - data: + options: previous: href: '/previous' next: @@ -179,7 +179,7 @@ examples: - number: 40 href: '/page/40' - name: first page - data: + options: next: href: '/next' items: @@ -191,7 +191,7 @@ examples: - number: 3 href: '/page/3' - name: last page - data: + options: previous: href: '/previous' items: @@ -203,13 +203,13 @@ examples: href: '/page/3' current: true - name: with prev and next only - data: + options: previous: href: '/previous' next: href: '/next' - name: with prev and next only and labels - data: + options: previous: text: 'Previous page' labelText: 'Paying VAT and duty' @@ -219,7 +219,7 @@ examples: labelText: 'Registering an imported vehicle' href: '/next' - name: with prev and next only and very long labels - data: + options: previous: text: 'Previous page' labelText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' @@ -229,7 +229,7 @@ examples: labelText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' href: '/next' - name: with prev and next only in a different language - data: + options: previous: text: 'précédente' href: '/previous' @@ -237,17 +237,17 @@ examples: text: 'suivante' href: '/next' - name: with previous only - data: + options: previous: href: '/previous' - name: with next only - data: + options: next: href: '/next' # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with custom classes hidden: true - data: + options: classes: my-custom-class previous: href: '/previous' @@ -263,7 +263,7 @@ examples: href: '/page/3' - name: with custom attributes hidden: true - data: + options: attributes: data-attribute-1: value-1 data-attribute-2: value-2 diff --git a/src/govuk/components/panel/panel.yaml b/src/govuk/components/panel/panel.yaml index d8d83bc4df..11c42f891b 100644 --- a/src/govuk/components/panel/panel.yaml +++ b/src/govuk/components/panel/panel.yaml @@ -34,11 +34,11 @@ params: examples: - name: default - data: + options: titleHtml: Application complete text: 'Your reference number: HDJ2123F' - name: custom heading level - data: + options: titleText: Application complete headingLevel: 2 text: 'Your reference number: HDJ2123F' @@ -46,33 +46,33 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: title html as text hidden: true - data: + options: titleText: Application not complete text: Please complete form 1 - name: title html hidden: true - data: + options: titleHtml: Application not complete html: Please complete form 1 - name: body html as text hidden: true - data: + options: titleText: Application complete text: Your reference number
HDJ2123F - name: body html hidden: true - data: + options: titleText: Application complete html: Your reference number
HDJ2123F - name: classes hidden: true - data: + options: titleText: Application complete text: Your reference number is HDJ2123F classes: extra-class one-more-class - name: attributes hidden: true - data: + options: titleText: Application complete text: Your reference number is HDJ2123F attributes: @@ -80,5 +80,5 @@ examples: second-attribute: bar - name: title with no body text hidden: true - data: + options: titleText: Application complete diff --git a/src/govuk/components/phase-banner/phase-banner.yaml b/src/govuk/components/phase-banner/phase-banner.yaml index 315b2f5b4e..6b0216f858 100644 --- a/src/govuk/components/phase-banner/phase-banner.yaml +++ b/src/govuk/components/phase-banner/phase-banner.yaml @@ -23,7 +23,7 @@ params: examples: - name: default - data: + options: tag: text: Alpha html: This is a new service - your feedback will help us to improve it. @@ -31,33 +31,33 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: text: This is a new service – your feedback will help us to improve it classes: extra-class one-more-class - name: text hidden: true - data: + options: text: This is a new service – your feedback will help us to improve it - name: html as text hidden: true - data: + options: text: This is a new service - your feedback will help us to improve it. - name: attributes hidden: true - data: + options: text: This is a new service – your feedback will help us to improve it attributes: first-attribute: foo second-attribute: bar - name: tag html hidden: true - data: + options: text: This is a new service – your feedback will help us to improve it tag: html: Alpha - name: tag classes hidden: true - data: + options: text: This is a new service – your feedback will help us to improve it tag: classes: govuk-tag--grey diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml index 509abbdd30..d76b749809 100644 --- a/src/govuk/components/radios/radios.yaml +++ b/src/govuk/components/radios/radios.yaml @@ -112,7 +112,7 @@ accessibilityCriteria: | examples: - name: default - data: + options: name: example-default hint: text: This includes changing your last name or spelling your name differently. @@ -123,7 +123,7 @@ examples: text: No - name: inline - data: + options: idPrefix: example classes: govuk-radios--inline name: example @@ -140,7 +140,7 @@ examples: checked: true - name: with disabled - data: + options: idPrefix: gov name: gov fieldset: @@ -162,7 +162,7 @@ examples: disabled: true - name: with legend as page heading - data: + options: idPrefix: housing-act name: housing-act fieldset: @@ -183,7 +183,7 @@ examples: For properties that are within a geographical area defined by a local council - name: with a medium legend - data: + options: idPrefix: housing-act name: housing-act fieldset: @@ -203,7 +203,7 @@ examples: For properties that are within a geographical area defined by a local council - name: with a divider - data: + options: idPrefix: example-divider name: example fieldset: @@ -219,7 +219,7 @@ examples: text: Create an account - name: with hints on items - data: + options: idPrefix: gov name: gov fieldset: @@ -240,7 +240,7 @@ examples: 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. - name: without fieldset - data: + options: name: colours items: - value: red @@ -251,7 +251,7 @@ examples: text: Blue - name: with fieldset and error message - data: + options: idPrefix: example name: example errorMessage: @@ -267,7 +267,7 @@ examples: checked: true - name: with very long option text - data: + options: name: waste hint: text: Nullam id dolor id nibh ultricies vehicula ut id elit. @@ -302,7 +302,7 @@ examples: Donec sed odio dui. Sed posuere consectetur est at lobortis. - name: with conditional items - data: + options: idPrefix: how-contacted name: how-contacted fieldset: @@ -329,7 +329,7 @@ examples: - name: with conditional items with special characters - data: + options: idPrefix: user.profile[contact-prefs] name: contact-prefs fieldset: @@ -356,7 +356,7 @@ examples: - name: with conditional item checked - data: + options: idPrefix: 'how-contacted-checked' name: 'how-contacted-checked' fieldset: @@ -384,7 +384,7 @@ examples: - name: prechecked - data: + options: name: example-default hint: text: This includes changing your last name or spelling your name differently. @@ -396,7 +396,7 @@ examples: checked: true - name: prechecked using value - data: + options: name: example-default items: - value: yes @@ -406,7 +406,7 @@ examples: value: no - name: with conditional items and pre-checked value - data: + options: idPrefix: 'how-contacted-checked' name: 'how-contacted-checked' fieldset: @@ -434,7 +434,7 @@ examples: value: text - name: with optional form-group classes showing group error - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -465,7 +465,7 @@ examples: - name: small - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -482,7 +482,7 @@ examples: text: Text message - name: small with long text - data: + options: idPrefix: foo name: foo classes: govuk-radios--small @@ -515,7 +515,7 @@ examples: Donec sed odio dui. Sed posuere consectetur est at lobortis. - name: small with error - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -534,7 +534,7 @@ examples: text: Text message - name: small with hint - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -553,7 +553,7 @@ examples: text: Text message - name: small with disabled - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -571,7 +571,7 @@ examples: disabled: true - name: small with conditional reveal - data: + options: idPrefix: 'how-contacted-2' name: 'how-contacted-2' formGroup: @@ -592,7 +592,7 @@ examples: text: Text message - name: small inline - data: + options: idPrefix: sort classes: govuk-radios--small govuk-radios--inline name: example @@ -608,7 +608,7 @@ examples: text: created - name: small inline extreme - data: + options: idPrefix: sort classes: govuk-radios--small govuk-radios--inline name: example @@ -638,7 +638,7 @@ examples: text: funkiness - name: small with a divider - data: + options: idPrefix: example-small-divider name: example fieldset: @@ -656,7 +656,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with idPrefix - data: + options: name: example-radio idPrefix: example-id-prefix items: @@ -666,7 +666,7 @@ examples: text: No - name: minimal items and name hidden: true - data: + options: name: example-name items: - value: yes @@ -675,7 +675,7 @@ examples: text: No - name: with falsey items hidden: true - data: + options: name: example-name items: - value: yes @@ -686,7 +686,7 @@ examples: text: No - name: fieldset with describedBy hidden: true - data: + options: name: example-name fieldset: describedBy: some-id @@ -699,7 +699,7 @@ examples: text: No - name: attributes hidden: true - data: + options: name: example-name attributes: data-attribute: value @@ -711,7 +711,7 @@ examples: text: No - name: items with attributes hidden: true - data: + options: name: example-name items: - value: yes @@ -726,7 +726,7 @@ examples: data-second-attribute: JKL - name: with empty conditional hidden: true - data: + options: name: example-conditional items: - value: yes @@ -737,7 +737,7 @@ examples: text: No - name: label with classes hidden: true - data: + options: name: example-label-classes items: - value: yes @@ -746,7 +746,7 @@ examples: classes: bold - name: with hints on parent and items hidden: true - data: + options: name: example-multiple-hints fieldset: legend: @@ -764,7 +764,7 @@ examples: text: Hint for no option here - name: with describedBy and hint hidden: true - data: + options: name: example-hint-describedby fieldset: describedBy: some-id @@ -779,7 +779,7 @@ examples: text: No - name: with error message hidden: true - data: + options: name: example-error-message errorMessage: text: Please select an option @@ -790,7 +790,7 @@ examples: text: No - name: with error message and idPrefix hidden: true - data: + options: name: example-error-message idPrefix: id-prefix errorMessage: @@ -802,7 +802,7 @@ examples: text: No - name: with hint and error message hidden: true - data: + options: name: example-error-message-hint errorMessage: text: Please select an option @@ -818,7 +818,7 @@ examples: text: No - name: with hint, error message and describedBy hidden: true - data: + options: name: example-error-message-hint errorMessage: text: Please select an option @@ -835,7 +835,7 @@ examples: text: No - name: label with attributes hidden: true - data: + options: name: with-label-attributes items: - value: yes @@ -846,7 +846,7 @@ examples: data-second-attribute: second-value - name: fieldset params hidden: true - data: + options: name: example-fieldset-params fieldset: classes: app-fieldset--custom-modifier @@ -864,7 +864,7 @@ examples: text: No - name: fieldset with html hidden: true - data: + options: name: with-fieldset-html fieldset: legend: @@ -876,7 +876,7 @@ examples: text: No - name: with fieldset, error message and describedBy hidden: true - data: + options: idPrefix: example name: example errorMessage: @@ -894,7 +894,7 @@ examples: - name: item checked overrides value hidden: true - data: + options: name: colors items: - value: red diff --git a/src/govuk/components/select/select.yaml b/src/govuk/components/select/select.yaml index da5ffcee1a..c8fa0a74a1 100644 --- a/src/govuk/components/select/select.yaml +++ b/src/govuk/components/select/select.yaml @@ -79,7 +79,7 @@ params: examples: - name: default - data: + options: id: select-1 name: select-1 label: @@ -94,14 +94,14 @@ examples: text: GOV.UK frontend option 3 disabled: true - name: with no items - data: + options: id: select-1 name: select-1 label: text: Horse with no name items: [] - name: with selected value - data: + options: id: select-1 name: select-1 label: @@ -116,7 +116,7 @@ examples: disabled: true value: 2 - name: with hint text and error message - data: + options: id: select-2 name: select-2 label: @@ -133,7 +133,7 @@ examples: - value: 3 text: GOV.UK frontend option 3 - name: with label as page heading - data: + options: id: select-3 name: select-3 label: @@ -150,7 +150,7 @@ examples: text: GOV.UK frontend option 3 disabled: true - name: with full width override - data: + options: id: select-1 name: select-1 classes: govuk-!-width-full @@ -166,7 +166,7 @@ examples: text: GOV.UK frontend option 3 disabled: true - name: with optional form-group classes - data: + options: id: select-1 name: select-1 classes: govuk-!-width-full @@ -187,7 +187,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: with describedBy hidden: true - data: + options: id: with-describedby name: with-describedby label: @@ -200,7 +200,7 @@ examples: describedBy: some-id - name: attributes hidden: true - data: + options: id: with-attributes name: with-attributes label: @@ -214,7 +214,7 @@ examples: data-attribute: my data value - name: attributes on items hidden: true - data: + options: id: with-item-attributes name: with-item-attributes label: @@ -233,7 +233,7 @@ examples: data-second-attribute: JKL - name: with falsey items hidden: true - data: + options: id: with-falsey-items name: with-falsey-items label: @@ -248,7 +248,7 @@ examples: value: 2 - name: hint hidden: true - data: + options: id: select-with-hint name: select-with-hint label: @@ -257,7 +257,7 @@ examples: text: Hint text goes here - name: hint and describedBy hidden: true - data: + options: id: select-with-hint name: select-with-hint label: @@ -272,7 +272,7 @@ examples: text: GOV.UK frontend option 2 - name: error hidden: true - data: + options: id: select-with-error name: select-with-error label: @@ -286,7 +286,7 @@ examples: text: GOV.UK frontend option 2 - name: error and describedBy hidden: true - data: + options: id: select-with-error name: select-with-error label: @@ -302,7 +302,7 @@ examples: - name: without values hidden: true - data: + options: name: colors id: colors label: @@ -314,7 +314,7 @@ examples: - name: without values with selected value hidden: true - data: + options: name: colors id: colors label: @@ -327,7 +327,7 @@ examples: - name: with falsey values hidden: true - data: + options: name: falsey-values id: falsey-values label: @@ -342,7 +342,7 @@ examples: - name: item selected overrides value hidden: true - data: + options: name: colors id: colors label: diff --git a/src/govuk/components/skip-link/skip-link.yaml b/src/govuk/components/skip-link/skip-link.yaml index abf2e9d9f5..58fa1f7ef1 100644 --- a/src/govuk/components/skip-link/skip-link.yaml +++ b/src/govuk/components/skip-link/skip-link.yaml @@ -22,13 +22,13 @@ params: examples: - name: default - data: + options: text: Skip to main content href: '#content' - name: with focus description: Simulate triggering the :focus CSS pseudo-class, not available in the production build. - data: + options: classes: :focus text: Skip to main content href: '#content' @@ -36,33 +36,33 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: no href hidden: true - data: + options: text: Skip to main content - name: custom href hidden: true - data: + options: text: Skip to custom content href: '#custom' - name: custom text hidden: true - data: + options: text: skip - name: html as text hidden: true - data: + options: text:

skip

- name: html hidden: true - data: + options: html:

skip

- name: classes hidden: true - data: + options: text: Skip link classes: app-skip-link--custom-class - name: attributes hidden: true - data: + options: text: Skip link attributes: data-test: attribute diff --git a/src/govuk/components/summary-list/summary-list.yaml b/src/govuk/components/summary-list/summary-list.yaml index 17caca1300..82dfdd83f8 100644 --- a/src/govuk/components/summary-list/summary-list.yaml +++ b/src/govuk/components/summary-list/summary-list.yaml @@ -163,7 +163,7 @@ params: examples: - name: default - data: + options: rows: - key: text: Name @@ -188,7 +188,7 @@ examples: Address line 5

- name: with actions - data: + options: rows: - key: text: Name @@ -234,7 +234,7 @@ examples: text: Change visuallyHiddenText: contact information - name: translated - data: + options: rows: - key: text: Enw @@ -277,7 +277,7 @@ examples: html: Golygu gwybodaeth cyswllt visuallyHiddenText: '' - name: with some actions - data: + options: rows: - key: text: Name @@ -310,7 +310,7 @@ examples: Address line 5

- name: with no first action - data: + options: rows: - key: text: Name @@ -360,7 +360,7 @@ examples: text: Change visuallyHiddenText: licence period - name: no-border - data: + options: classes: govuk-summary-list--no-border rows: - key: @@ -386,7 +386,7 @@ examples: Address line 5

- name: no-border on last row - data: + options: rows: - key: text: Name @@ -412,7 +412,7 @@ examples:

classes: govuk-summary-list__row--no-border - name: overridden-widths - data: + options: rows: - key: classes: govuk-!-width-one-half @@ -461,7 +461,7 @@ examples: text: Change visuallyHiddenText: contact information - name: check-your-answers - data: + options: rows: - key: text: Name @@ -548,7 +548,7 @@ examples: text: Change visuallyHiddenText: licence period - name: extreme - data: + options: rows: - key: text: Name @@ -727,7 +727,7 @@ examples: - href: '#' text: Format - name: as a summary card with a text header - data: + options: card: title: text: Undergraduate teaching assistant @@ -741,7 +741,7 @@ examples: value: text: 13/08/1980 - name: as a summary card with a custom header level - data: + options: card: title: text: Undergraduate teaching assistant @@ -756,7 +756,7 @@ examples: value: text: 13/08/1980 - name: as a summary card with a html header - data: + options: card: title: html: Undergraduate teaching assistant @@ -770,7 +770,7 @@ examples: value: text: 13/08/1980 - name: as a summary card with actions - data: + options: card: title: text: Undergraduate teaching assistant @@ -790,7 +790,7 @@ examples: value: text: 13/08/1980 - name: as a summary card with actions plus summary list actions - data: + options: card: title: text: Undergraduate teaching assistant @@ -825,7 +825,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: rows: - key: text: Name @@ -836,7 +836,7 @@ examples: data-attribute-2: value-2 - name: with falsey values hidden: true - data: + options: rows: - key: text: Name @@ -851,7 +851,7 @@ examples: text: Firstname2 Lastname2 - name: key with html hidden: true - data: + options: rows: - key: html: Name @@ -859,7 +859,7 @@ examples: html: Firstname Lastname - name: key with classes hidden: true - data: + options: rows: - key: text: Name @@ -868,7 +868,7 @@ examples: text: Firstname Lastname - name: value with html hidden: true - data: + options: rows: - key: text: Name @@ -876,7 +876,7 @@ examples: html: email@email.com - name: actions href hidden: true - data: + options: rows: - key: text: Name @@ -888,7 +888,7 @@ examples: text: Go to GOV.UK - name: actions with html hidden: true - data: + options: rows: - key: text: Name @@ -900,7 +900,7 @@ examples: href: '#' - name: actions with classes hidden: true - data: + options: rows: - key: text: Name @@ -913,7 +913,7 @@ examples: href: '/edit' - name: actions with attributes hidden: true - data: + options: rows: - key: text: Name @@ -928,7 +928,7 @@ examples: data-test-attribute-2: value-2 - name: single action with anchor hidden: true - data: + options: rows: - key: text: Name @@ -940,7 +940,7 @@ examples: href: '#' - name: classes on items hidden: true - data: + options: rows: - key: text: Name @@ -953,7 +953,7 @@ examples: classes: govuk-link--no-visited-state - name: empty items array hidden: true - data: + options: rows: - key: text: Name @@ -963,7 +963,7 @@ examples: items: [] - name: rows with classes hidden: true - data: + options: rows: - key: text: Name @@ -972,7 +972,7 @@ examples: classes: app-custom-class - name: summary card with custom classes hidden: true - data: + options: card: classes: custom-class rows: @@ -986,7 +986,7 @@ examples: text: 13/08/1980 - name: summary card with custom attributes hidden: true - data: + options: card: attributes: data-attribute-1: value-1 @@ -1002,7 +1002,7 @@ examples: text: 13/08/1980 - name: summary card with only 1 action hidden: true - data: + options: card: title: text: Undergraduate teaching assistant diff --git a/src/govuk/components/table/table.yaml b/src/govuk/components/table/table.yaml index 9493bc7e17..7577ab290e 100644 --- a/src/govuk/components/table/table.yaml +++ b/src/govuk/components/table/table.yaml @@ -88,7 +88,7 @@ params: examples: - name: default - data: + options: rows: - - text: January - text: £85 @@ -106,7 +106,7 @@ examples: - text: £125 format: numeric - name: table with head - data: + options: head: - text: Month you apply - text: Rate for bicycles @@ -130,7 +130,7 @@ examples: - text: £125 format: numeric - name: table with head and caption - data: + options: caption: 'Caption 1: Months and rates' captionClasses: govuk-heading-m firstCellIsHeader: true @@ -160,14 +160,14 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: classes: custom-class-goes-here rows: - - text: Jan - text: Feb - name: attributes hidden: true - data: + options: attributes: data-foo: bar rows: @@ -175,21 +175,21 @@ examples: - text: Feb - name: html as text hidden: true - data: + options: head: - text: Foo rows: - - text: Foo - name: html hidden: true - data: + options: head: - html: Foo bar rows: - - html: Foo bar - name: head with classes hidden: true - data: + options: head: - text: Foo classes: my-custom-class @@ -198,7 +198,7 @@ examples: - text: Feb - name: head with rowspan and colspan hidden: true - data: + options: head: - text: Foo rowspan: 2 @@ -208,7 +208,7 @@ examples: - text: Feb - name: head with attributes hidden: true - data: + options: head: - text: Foo attributes: @@ -218,7 +218,7 @@ examples: - text: Feb - name: with firstCellIsHeader true hidden: true - data: + options: firstCellIsHeader: true rows: - - text: January @@ -238,26 +238,26 @@ examples: format: numeric - name: firstCellIsHeader with classes hidden: true - data: + options: firstCellIsHeader: true rows: - - text: Foo classes: my-custom-class - name: firstCellIsHeader with html hidden: true - data: + options: firstCellIsHeader: true rows: - - html: Foo bar - name: firstCellIsHeader with html as text hidden: true - data: + options: firstCellIsHeader: true rows: - - text: Foo - name: firstCellIsHeader with rowspan and colspan hidden: true - data: + options: firstCellIsHeader: true rows: - - text: Foo @@ -265,7 +265,7 @@ examples: colspan: 2 - name: firstCellIsHeader with attributes hidden: true - data: + options: firstCellIsHeader: true rows: - - text: Foo @@ -273,7 +273,7 @@ examples: data-fizz: buzz - name: with falsey items hidden: true - data: + options: rows: - - text: A - text: 1 @@ -285,20 +285,20 @@ examples: - text: 3 - name: rows with classes hidden: true - data: + options: rows: - - text: Foo classes: my-custom-class - name: rows with rowspan and colspan hidden: true - data: + options: rows: - - text: Foo rowspan: 2 colspan: 2 - name: rows with attributes hidden: true - data: + options: rows: - - text: Foo attributes: diff --git a/src/govuk/components/tabs/tabs.yaml b/src/govuk/components/tabs/tabs.yaml index 2285e3f1f6..9c03426b17 100644 --- a/src/govuk/components/tabs/tabs.yaml +++ b/src/govuk/components/tabs/tabs.yaml @@ -56,7 +56,7 @@ params: examples: - name: default - data: + options: items: - label: Past day id: past-day @@ -158,7 +158,7 @@ examples: - name: tabs-with-anchor-in-panel description: Ensure that anchors that are in tab panels work correctly - data: + options: items: - label: Tab 1 id: tab-1 @@ -177,7 +177,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: classes: app-tabs--custom-modifier items: - label: Tab 1 @@ -186,7 +186,7 @@ examples: text: Information about tabs - name: id hidden: true - data: + options: id: my-tabs items: - label: Tab 1 @@ -195,7 +195,7 @@ examples: text: Information about tabs - name: title hidden: true - data: + options: title: Custom title for Contents items: - label: Tab 1 @@ -204,7 +204,7 @@ examples: text: Information about tabs - name: attributes hidden: true - data: + options: attributes: data-attribute: my data value items: @@ -214,7 +214,7 @@ examples: text: Information about tabs - name: item with attributes hidden: true - data: + options: items: - id: tab-1 label: Tab 1 @@ -225,7 +225,7 @@ examples: data-attribute-2: my-attribute-2 - name: panel with attributes hidden: true - data: + options: items: - id: tab-1 label: Tab 1 @@ -236,16 +236,16 @@ examples: data-attribute-2: my-attribute-2 - name: no item list hidden: true - data: + options: id: my-tabs classes: app-tabs--custom-modifier - name: empty item list hidden: true - data: + options: items: [] - name: with falsey values hidden: true - data: + options: items: - label: Tab 1 id: tab-1 @@ -260,7 +260,7 @@ examples: text: Panel 2 content - name: idPrefix hidden: true - data: + options: idPrefix: custom items: - label: Tab 1 @@ -271,7 +271,7 @@ examples: text: Panel 2 content - name: html as text hidden: true - data: + options: items: - label: Tab 1 id: tab-1 @@ -283,7 +283,7 @@ examples: text:

Panel 2 content

- name: html hidden: true - data: + options: items: - label: Tab 1 id: tab-1 diff --git a/src/govuk/components/tag/tag.yaml b/src/govuk/components/tag/tag.yaml index bdfe6bc960..17924434fc 100644 --- a/src/govuk/components/tag/tag.yaml +++ b/src/govuk/components/tag/tag.yaml @@ -18,62 +18,62 @@ params: examples: - name: default - data: + options: text: Alpha - name: grey - data: + options: text: Grey classes: govuk-tag--grey - name: blue - data: + options: text: Blue classes: govuk-tag--blue - name: light blue - data: + options: text: Light blue classes: govuk-tag--light-blue - name: turquoise - data: + options: text: Turquoise classes: govuk-tag--turquoise - name: green - data: + options: text: Green classes: govuk-tag--green - name: purple - data: + options: text: Purple classes: govuk-tag--purple - name: pink - data: + options: text: Pink classes: govuk-tag--pink - name: red - data: + options: text: Red classes: govuk-tag--red - name: orange - data: + options: text: Orange classes: govuk-tag--orange - name: yellow - data: + options: text: Yellow classes: govuk-tag--yellow # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: text: Tag with attributes attributes: data-test: attribute id: my-tag - name: html as text hidden: true - data: + options: text: Alpha - name: html hidden: true - data: + options: html: Alpha diff --git a/src/govuk/components/task-list/task-list.yaml b/src/govuk/components/task-list/task-list.yaml index 0ee59c3437..e82a9b7a4e 100644 --- a/src/govuk/components/task-list/task-list.yaml +++ b/src/govuk/components/task-list/task-list.yaml @@ -79,7 +79,7 @@ params: examples: - name: default - data: + options: items: - title: text: Company Directors @@ -104,7 +104,7 @@ examples: classes: govuk-tag--blue - name: example with 3 states - data: + options: items: - title: text: Company Directors @@ -134,7 +134,7 @@ examples: classes: govuk-tag--light-blue - name: example with hint text and additional states - data: + options: items: - title: text: Company Directors @@ -180,7 +180,7 @@ examples: classes: govuk-task-list__status--cannot-start-yet - name: example with all possible colours - data: + options: items: - title: text: Task A @@ -267,7 +267,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: custom classes hidden: true - data: + options: classes: custom-class-on-component items: - title: @@ -290,7 +290,7 @@ examples: - name: custom attributes hidden: true - data: + options: attributes: data-custom-attribute: custom-value items: @@ -305,7 +305,7 @@ examples: - name: custom id prefix hidden: true - data: + options: idPrefix: my-custom-id items: - title: @@ -319,7 +319,7 @@ examples: - name: html passed as text hidden: true - data: + options: idPrefix: my-custom-id items: - title: @@ -337,7 +337,7 @@ examples: - name: html hidden: true - data: + options: idPrefix: my-custom-id items: - title: diff --git a/src/govuk/components/textarea/textarea.yaml b/src/govuk/components/textarea/textarea.yaml index e59f6be98c..48d5793539 100644 --- a/src/govuk/components/textarea/textarea.yaml +++ b/src/govuk/components/textarea/textarea.yaml @@ -66,13 +66,13 @@ params: examples: - name: default - data: + options: name: more-detail id: more-detail label: text: Can you provide more detail? - name: with hint - data: + options: name: more-detail id: more-detail label: @@ -81,7 +81,7 @@ examples: text: Don't include personal or financial information, eg your National Insurance number or credit card details. - name: with error message - data: + options: name: no-ni-reason id: no-ni-reason label: @@ -90,7 +90,7 @@ examples: text: You must provide an explanation - name: with default value - data: + options: id: full-address name: address value: | @@ -101,7 +101,7 @@ examples: text: Full address - name: with custom rows - data: + options: id: full-address name: address label: @@ -109,7 +109,7 @@ examples: rows: 8 - name: with label as page heading - data: + options: id: textarea-with-page-heading name: address label: @@ -118,7 +118,7 @@ examples: isPageHeading: true - name: with optional form-group classes - data: + options: id: textarea-with-page-heading name: address label: @@ -127,7 +127,7 @@ examples: classes: extra-class - name: with autocomplete attribute - data: + options: id: textarea-with-autocomplete-attribute name: address label: @@ -135,7 +135,7 @@ examples: autocomplete: street-address - name: with spellcheck enabled - data: + options: label: text: Spellcheck is enabled id: textarea-with-spellcheck-enabled @@ -143,7 +143,7 @@ examples: spellcheck: true - name: with spellcheck disabled - data: + options: label: text: Spellcheck is disabled id: textarea-with-spellcheck-disabled @@ -153,7 +153,7 @@ examples: # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes hidden: true - data: + options: id: with-classes name: with-classes label: @@ -161,7 +161,7 @@ examples: classes: app-textarea--custom-modifier - name: attributes hidden: true - data: + options: id: with-attributes name: with-attributes label: @@ -170,7 +170,7 @@ examples: data-attribute: my data value - name: with describedBy hidden: true - data: + options: id: with-describedby name: with-describedby label: @@ -178,7 +178,7 @@ examples: describedBy: some-id - name: with hint and described by hidden: true - data: + options: id: with-hint-describedby name: with-hint-describedby label: @@ -188,7 +188,7 @@ examples: text: It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. - name: with error message and described by hidden: true - data: + options: name: textarea-with-error label: text: Textarea with error @@ -198,7 +198,7 @@ examples: text: Error message - name: with hint and error message hidden: true - data: + options: id: with-hint-error name: with-hint-error label: @@ -209,7 +209,7 @@ examples: text: Hint - name: with hint, error message and described by hidden: true - data: + options: id: with-hint-error-describedby name: with-hint-error-describedby label: diff --git a/src/govuk/components/warning-text/warning-text.yaml b/src/govuk/components/warning-text/warning-text.yaml index 0d886113ba..75fb675eba 100644 --- a/src/govuk/components/warning-text/warning-text.yaml +++ b/src/govuk/components/warning-text/warning-text.yaml @@ -22,41 +22,41 @@ params: examples: - name: default - data: + options: text: You can be fined up to £5,000 if you don’t register. iconFallbackText: Warning - name: multiple lines - data: + options: text: 'If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.' iconFallbackText: Warning # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: attributes hidden: true - data: + options: text: You can be fined up to £5,000 if you don’t register. attributes: id: my-warning-text data-test: attribute - name: classes hidden: true - data: + options: text: Warning text classes: govuk-warning-text--custom-class - name: html hidden: true - data: + options: text: You can be fined up to £5,000 if you don’t register. html: Some custom warning text - name: html as text hidden: true - data: + options: text: Some custom warning text - name: icon fallback text only hidden: true - data: + options: iconFallbackText: Some custom fallback text - name: no icon fallback text hidden: true - data: + options: text: This is a warning