govuk_publishing_components 62.0.0 → 62.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/option-select.js +4 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/filter-list.js +48 -0
- data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +373 -245
- data/app/assets/stylesheets/component_guide/application.scss +1 -42
- data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +5 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +6 -11
- data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss +2 -2
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +6 -38
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +6 -1
- data/app/controllers/govuk_publishing_components/applications_page_controller.rb +50 -0
- data/app/models/govuk_publishing_components/applications_page.rb +64 -0
- data/app/views/govuk_publishing_components/applications_page/_table-content.html.erb +39 -0
- data/app/views/govuk_publishing_components/applications_page/show.html.erb +37 -0
- data/app/views/govuk_publishing_components/audit/show.html.erb +5 -1
- data/app/views/govuk_publishing_components/component_guide/_component_list.html.erb +14 -0
- data/app/views/govuk_publishing_components/component_guide/example.html.erb +3 -3
- data/app/views/govuk_publishing_components/component_guide/index.html.erb +50 -75
- data/app/views/govuk_publishing_components/component_guide/show.html.erb +7 -7
- data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb +27 -25
- data/app/views/govuk_publishing_components/components/docs/govspeak.yml +6 -0
- data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +7 -1
- data/config/routes.rb +1 -0
- data/lib/govuk_publishing_components/minitest/component_guide_test.rb +1 -1
- data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb +7 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/dist/govuk/all.bundle.js +37 -133
- data/node_modules/govuk-frontend/dist/govuk/all.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/all.bundle.mjs +37 -133
- data/node_modules/govuk-frontend/dist/govuk/all.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/common/govuk-frontend-version.mjs +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss +4 -4
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/breadcrumbs/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/button/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/components/button/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json +34 -29
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/macro-options.json +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-default.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-conditional-reveal.html +21 -21
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-divider-and-none.html +30 -30
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-error.html +26 -26
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-hint.html +25 -25
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-long-text.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-small.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items.html +35 -35
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-and-none.html +30 -30
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html +40 -40
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-error-message.html +32 -32
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-hint.html +25 -25
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-hints-on-items.html +21 -21
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-legend-as-a-page-heading.html +27 -27
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-optional-form-group-classes-showing-group-error.html +36 -36
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html +35 -35
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-very-long-option-text.html +25 -25
- data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template.njk +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss +2 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js +36 -132
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs +36 -132
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs +35 -6
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/fixtures.json +17 -0
- data/node_modules/govuk-frontend/dist/govuk/components/file-upload/template-enhanced-multiple-files.html +10 -0
- data/node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss +4 -4
- data/node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss +20 -20
- data/node_modules/govuk-frontend/dist/govuk/components/header/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss +7 -15
- data/node_modules/govuk-frontend/dist/govuk/components/input/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss +4 -2
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/fixtures.json +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/template-with-many-pages.html +2 -2
- data/node_modules/govuk-frontend/dist/govuk/components/pagination/template.njk +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs +1 -126
- data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/radios/fixtures.json +36 -31
- data/node_modules/govuk-frontend/dist/govuk/components/radios/macro-options.json +3 -3
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-default.html +17 -17
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-inline.html +19 -19
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-inline.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-with-a-divider.html +24 -24
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-with-conditional-reveal.html +27 -27
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-with-error.html +26 -26
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-with-hint.html +25 -25
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small-with-long-text.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-small.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-a-divider.html +24 -24
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-conditional-item-checked.html +35 -35
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-and-pre-checked-value.html +35 -35
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html +35 -35
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-fieldset-and-error-message.html +20 -20
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-hint.html +19 -19
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-hints-on-items.html +23 -23
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-legend-as-page-heading.html +21 -21
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-optional-form-group-classes-showing-group-error.html +36 -36
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template-with-very-long-option-text.html +28 -28
- data/node_modules/govuk-frontend/dist/govuk/components/radios/template.njk +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss +1 -7
- data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss +5 -5
- data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss +16 -16
- data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/table/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/table/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/tabs/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/tabs/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/task-list/fixtures.json +46 -0
- data/node_modules/govuk-frontend/dist/govuk/components/task-list/template-forced-hover-state.html +37 -0
- data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss +1 -7
- data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/core/_typography.scss +3 -3
- data/node_modules/govuk-frontend/dist/govuk/core/_typography.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css +2 -2
- data/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js +1 -1
- data/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_focused.scss +34 -0
- data/node_modules/govuk-frontend/dist/govuk/helpers/_focused.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss +172 -33
- data/node_modules/govuk-frontend/dist/govuk/helpers/_media-queries.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss +4 -4
- data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/i18n.mjs +1 -126
- data/node_modules/govuk-frontend/dist/govuk/i18n.mjs.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_button-group.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_button-group.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_main-wrapper.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_main-wrapper.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/objects/_width-container.scss +2 -2
- data/node_modules/govuk-frontend/dist/govuk/objects/_width-container.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/overrides/_display.scss +1 -1
- data/node_modules/govuk-frontend/dist/govuk/overrides/_display.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/overrides/_width.scss +5 -5
- data/node_modules/govuk-frontend/dist/govuk/overrides/_width.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/settings/_media-queries.scss +7 -0
- data/node_modules/govuk-frontend/dist/govuk/settings/_media-queries.scss.map +1 -1
- data/node_modules/govuk-frontend/dist/govuk/tools/_px-to-em.scss +4 -2
- data/node_modules/govuk-frontend/dist/govuk/tools/_px-to-em.scss.map +1 -1
- data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +1 -1
- data/node_modules/govuk-frontend/package.json +9 -8
- metadata +9 -4
- data/app/assets/javascripts/component_guide/filter-components.js +0 -35
- data/node_modules/govuk-frontend/dist/govuk/vendor/_sass-mq.scss +0 -349
- data/node_modules/govuk-frontend/dist/govuk/vendor/_sass-mq.scss.map +0 -1
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"description": "",
|
|
30
30
|
"pageTemplateOptions": {},
|
|
31
31
|
"screenshot": true,
|
|
32
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
32
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"name": "with hint",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"description": "",
|
|
63
63
|
"pageTemplateOptions": {},
|
|
64
64
|
"screenshot": false,
|
|
65
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-hint\">\n
|
|
65
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <div id=\"nationality-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
"name": "with pre-checked values",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"no-js"
|
|
112
112
|
]
|
|
113
113
|
},
|
|
114
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
114
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" checked data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n</fieldset>\n</div>"
|
|
115
115
|
},
|
|
116
116
|
{
|
|
117
117
|
"name": "with divider and None",
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
"description": "",
|
|
150
150
|
"pageTemplateOptions": {},
|
|
151
151
|
"screenshot": true,
|
|
152
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
152
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Which types of waste do you transport regularly?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none\">\n Waste from animal carcasses\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-2\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-2\">\n Waste from mines or quarries\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-3\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-3\">\n Farm or agricultural waste\n </label>\n </div>\n <div class=\"govuk-checkboxes__divider\">or</div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-5\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-5\">\n None of these\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
153
153
|
},
|
|
154
154
|
{
|
|
155
155
|
"name": "with divider, None and conditional items",
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
"description": "",
|
|
195
195
|
"pageTemplateOptions": {},
|
|
196
196
|
"screenshot": false,
|
|
197
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
197
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Do you have any access needs?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"accessible-toilets\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items\">\n Accessible toilets available\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-2\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"braille\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-2\">\n Braille translation service available\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-3\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"disabled-car-parking\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-3\">\n Disabled car parking available\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-4\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"another-access-need\" data-aria-controls=\"conditional-with-divider-and-none-and-conditional-items-4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-4\">\n Another access need\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-with-divider-and-none-and-conditional-items-4\">\n <label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n </div>\n <div class=\"govuk-checkboxes__divider\">or</div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-6\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-6\">\n None of these\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
198
198
|
},
|
|
199
199
|
{
|
|
200
200
|
"name": "with hints on items",
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
"description": "",
|
|
231
231
|
"pageTemplateOptions": {},
|
|
232
232
|
"screenshot": false,
|
|
233
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
233
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to sign in?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"government-gateway\" name=\"gateway\" type=\"checkbox\" value=\"gov-gateway\" aria-describedby=\"government-gateway-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"government-gateway\">\n Sign in with Government Gateway\n </label>\n <div id=\"government-gateway-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.\n </div>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"govuk-verify\" name=\"verify\" type=\"checkbox\" value=\"gov-verify\" aria-describedby=\"govuk-verify-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"govuk-verify\">\n Sign in with GOV.UK Verify\n </label>\n <div id=\"govuk-verify-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
234
234
|
},
|
|
235
235
|
{
|
|
236
236
|
"name": "with legend as a page heading",
|
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
"description": "",
|
|
266
266
|
"pageTemplateOptions": {},
|
|
267
267
|
"screenshot": false,
|
|
268
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint\">\n
|
|
268
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"govuk-fieldset__heading\">\n Which types of waste do you transport regularly?\n </h1>\n </legend>\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
269
269
|
},
|
|
270
270
|
{
|
|
271
271
|
"name": "with error message",
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
"description": "",
|
|
308
308
|
"pageTemplateOptions": {},
|
|
309
309
|
"screenshot": false,
|
|
310
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n
|
|
310
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n <legend class=\"govuk-fieldset__legend\">\n Which types of waste do you transport regularly?\n </legend>\n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\" aria-describedby=\"waste-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n <div id=\"waste-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\" aria-describedby=\"waste-2-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n <div id=\"waste-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\" aria-describedby=\"waste-3-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n <div id=\"waste-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
311
311
|
},
|
|
312
312
|
{
|
|
313
313
|
"name": "with very long option text",
|
|
@@ -340,7 +340,7 @@
|
|
|
340
340
|
"description": "",
|
|
341
341
|
"pageTemplateOptions": {},
|
|
342
342
|
"screenshot": false,
|
|
343
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint\">\n
|
|
343
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint\">\n <legend class=\"govuk-fieldset__legend\">\n Maecenas faucibus mollis interdum?\n </legend>\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
344
344
|
},
|
|
345
345
|
{
|
|
346
346
|
"name": "with conditional items",
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
"description": "",
|
|
381
381
|
"pageTemplateOptions": {},
|
|
382
382
|
"screenshot": false,
|
|
383
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
383
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"with-conditional-items\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"with-conditional-items\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-3\" name=\"with-conditional-items\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n</fieldset>\n</div>"
|
|
384
384
|
},
|
|
385
385
|
{
|
|
386
386
|
"name": "with optional form-group classes showing group error",
|
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
"description": "",
|
|
425
425
|
"pageTemplateOptions": {},
|
|
426
426
|
"screenshot": false,
|
|
427
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
427
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n</fieldset>\n</div>"
|
|
428
428
|
},
|
|
429
429
|
{
|
|
430
430
|
"name": "small",
|
|
@@ -456,7 +456,7 @@
|
|
|
456
456
|
"description": "",
|
|
457
457
|
"pageTemplateOptions": {},
|
|
458
458
|
"screenshot": true,
|
|
459
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
459
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Filter by\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
460
460
|
},
|
|
461
461
|
{
|
|
462
462
|
"name": "small with long text",
|
|
@@ -488,7 +488,7 @@
|
|
|
488
488
|
"description": "",
|
|
489
489
|
"pageTemplateOptions": {},
|
|
490
490
|
"screenshot": false,
|
|
491
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
491
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Filter by\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
492
492
|
},
|
|
493
493
|
{
|
|
494
494
|
"name": "small with error",
|
|
@@ -523,7 +523,7 @@
|
|
|
523
523
|
"description": "",
|
|
524
524
|
"pageTemplateOptions": {},
|
|
525
525
|
"screenshot": false,
|
|
526
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n
|
|
526
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n <legend class=\"govuk-fieldset__legend\">\n Filter by\n </legend>\n <p id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </p>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
527
527
|
},
|
|
528
528
|
{
|
|
529
529
|
"name": "small with hint",
|
|
@@ -558,7 +558,7 @@
|
|
|
558
558
|
"description": "",
|
|
559
559
|
"pageTemplateOptions": {},
|
|
560
560
|
"screenshot": false,
|
|
561
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
561
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Filter by\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\" aria-describedby=\"nationality-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n <div id=\"nationality-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n hint for a thing\n </div>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
562
562
|
},
|
|
563
563
|
{
|
|
564
564
|
"name": "small with conditional reveal",
|
|
@@ -589,7 +589,7 @@
|
|
|
589
589
|
"description": "",
|
|
590
590
|
"pageTemplateOptions": {},
|
|
591
591
|
"screenshot": false,
|
|
592
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
592
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"checkbox\" value=\"a\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n a thing\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n another thing\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
593
593
|
},
|
|
594
594
|
{
|
|
595
595
|
"name": "small with divider and None",
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
"description": "",
|
|
629
629
|
"pageTemplateOptions": {},
|
|
630
630
|
"screenshot": false,
|
|
631
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
631
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Which types of waste do you transport regularly?\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"small-with-divider-and-none\" name=\"small-with-divider-and-none\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"small-with-divider-and-none\">\n Waste from animal carcasses\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"small-with-divider-and-none-2\" name=\"small-with-divider-and-none\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"small-with-divider-and-none-2\">\n Waste from mines or quarries\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"small-with-divider-and-none-3\" name=\"small-with-divider-and-none\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"small-with-divider-and-none-3\">\n Farm or agricultural waste\n </label>\n </div>\n <div class=\"govuk-checkboxes__divider\">or</div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"small-with-divider-and-none-5\" name=\"small-with-divider-and-none\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"small-with-divider-and-none-5\">\n None of these\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
632
632
|
},
|
|
633
633
|
{
|
|
634
634
|
"name": "with id and name",
|
|
@@ -666,7 +666,7 @@
|
|
|
666
666
|
"description": "",
|
|
667
667
|
"pageTemplateOptions": {},
|
|
668
668
|
"screenshot": false,
|
|
669
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"with-id-and-name-hint\">\n
|
|
669
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"with-id-and-name-hint\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <div id=\"with-id-and-name-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"item_british\" name=\"british\" type=\"checkbox\" value=\"yes\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"item_british\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"item_irish\" name=\"irish\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"item_irish\">\n Irish\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-id-and-name-3\" name=\"custom-name-scottish\" type=\"checkbox\" value=\"scottish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-id-and-name-3\">\n Scottish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
670
670
|
},
|
|
671
671
|
{
|
|
672
672
|
"name": "with disabled item",
|
|
@@ -705,7 +705,7 @@
|
|
|
705
705
|
"description": "",
|
|
706
706
|
"pageTemplateOptions": {},
|
|
707
707
|
"screenshot": false,
|
|
708
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
708
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n <h1 class=\"govuk-fieldset__heading\">\n How do you want to sign in?\n </h1>\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"government-gateway\" name=\"gateway\" type=\"checkbox\" value=\"gov-gateway\" aria-describedby=\"government-gateway-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"government-gateway\">\n Sign in with Government Gateway\n </label>\n <div id=\"government-gateway-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.\n </div>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"govuk-verify\" name=\"verify\" type=\"checkbox\" value=\"gov-verify\" disabled aria-describedby=\"govuk-verify-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"govuk-verify\">\n Sign in with GOV.UK Verify\n </label>\n <div id=\"govuk-verify-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
709
709
|
},
|
|
710
710
|
{
|
|
711
711
|
"name": "with idPrefix",
|
|
@@ -803,7 +803,7 @@
|
|
|
803
803
|
"description": "",
|
|
804
804
|
"pageTemplateOptions": {},
|
|
805
805
|
"screenshot": false,
|
|
806
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-name-hint\">\n
|
|
806
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-name-hint\">\n <legend class=\"govuk-fieldset__legend\">\n Which option?\n </legend>\n <div id=\"example-name-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
807
807
|
},
|
|
808
808
|
{
|
|
809
809
|
"name": "attributes",
|
|
@@ -998,7 +998,7 @@
|
|
|
998
998
|
"description": "",
|
|
999
999
|
"pageTemplateOptions": {},
|
|
1000
1000
|
"screenshot": false,
|
|
1001
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
1001
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1002
1002
|
},
|
|
1003
1003
|
{
|
|
1004
1004
|
"name": "with error message and hint",
|
|
@@ -1030,7 +1030,7 @@
|
|
|
1030
1030
|
"description": "",
|
|
1031
1031
|
"pageTemplateOptions": {},
|
|
1032
1032
|
"screenshot": false,
|
|
1033
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint example-error\">\n
|
|
1033
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint example-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1034
1034
|
},
|
|
1035
1035
|
{
|
|
1036
1036
|
"name": "with error, hint and fieldset describedBy",
|
|
@@ -1063,7 +1063,7 @@
|
|
|
1063
1063
|
"description": "",
|
|
1064
1064
|
"pageTemplateOptions": {},
|
|
1065
1065
|
"screenshot": false,
|
|
1066
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-hint example-error\">\n
|
|
1066
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-hint example-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1067
1067
|
},
|
|
1068
1068
|
{
|
|
1069
1069
|
"name": "label with attributes",
|
|
@@ -1120,7 +1120,7 @@
|
|
|
1120
1120
|
"description": "",
|
|
1121
1121
|
"pageTemplateOptions": {},
|
|
1122
1122
|
"screenshot": false,
|
|
1123
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-name-error\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n
|
|
1123
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-name-error\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <p id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1124
1124
|
},
|
|
1125
1125
|
{
|
|
1126
1126
|
"name": "fieldset html params",
|
|
@@ -1146,7 +1146,7 @@
|
|
|
1146
1146
|
"description": "",
|
|
1147
1147
|
"pageTemplateOptions": {},
|
|
1148
1148
|
"screenshot": false,
|
|
1149
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
1149
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n What is your <b>nationality</b>?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1150
1150
|
},
|
|
1151
1151
|
{
|
|
1152
1152
|
"name": "with single option set 'aria-describedby' on input, and describedBy",
|
|
@@ -1242,7 +1242,7 @@
|
|
|
1242
1242
|
"description": "",
|
|
1243
1243
|
"pageTemplateOptions": {},
|
|
1244
1244
|
"screenshot": false,
|
|
1245
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-error\">\n
|
|
1245
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"test-target-element example-error\">\n <legend class=\"govuk-fieldset__legend\">\n What is your nationality?\n </legend>\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1246
1246
|
},
|
|
1247
1247
|
{
|
|
1248
1248
|
"name": "with conditional item checked",
|
|
@@ -1283,7 +1283,7 @@
|
|
|
1283
1283
|
"description": "",
|
|
1284
1284
|
"pageTemplateOptions": {},
|
|
1285
1285
|
"screenshot": false,
|
|
1286
|
-
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n
|
|
1286
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n How do you want to be contacted?\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1287
1287
|
},
|
|
1288
1288
|
{
|
|
1289
1289
|
"name": "item checked overrides values",
|
|
@@ -1319,12 +1319,17 @@
|
|
|
1319
1319
|
"name": "textarea in conditional",
|
|
1320
1320
|
"options": {
|
|
1321
1321
|
"name": "conditional",
|
|
1322
|
+
"fieldset": {
|
|
1323
|
+
"legend": {
|
|
1324
|
+
"text": "Test"
|
|
1325
|
+
}
|
|
1326
|
+
},
|
|
1322
1327
|
"items": [
|
|
1323
1328
|
{
|
|
1324
1329
|
"value": "other",
|
|
1325
1330
|
"text": "Other",
|
|
1326
1331
|
"conditional": {
|
|
1327
|
-
"html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea
|
|
1332
|
+
"html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n"
|
|
1328
1333
|
}
|
|
1329
1334
|
}
|
|
1330
1335
|
]
|
|
@@ -1333,7 +1338,7 @@
|
|
|
1333
1338
|
"description": "",
|
|
1334
1339
|
"pageTemplateOptions": {},
|
|
1335
1340
|
"screenshot": false,
|
|
1336
|
-
"html": "<div class=\"govuk-form-group\">\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"conditional\" name=\"conditional\" type=\"checkbox\" value=\"other\" data-aria-controls=\"conditional-conditional\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"conditional\">\n Other\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea
|
|
1341
|
+
"html": "<div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend\">\n Test\n </legend>\n <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"conditional\" name=\"conditional\" type=\"checkbox\" value=\"other\" data-aria-controls=\"conditional-conditional\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"conditional\">\n Other\n </label>\n </div>\n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1337
1342
|
}
|
|
1338
1343
|
]
|
|
1339
1344
|
}
|
|
@@ -224,6 +224,6 @@
|
|
|
224
224
|
"name": "attributes",
|
|
225
225
|
"type": "object",
|
|
226
226
|
"required": false,
|
|
227
|
-
"description": "HTML attributes (for example data attributes) to add to the
|
|
227
|
+
"description": "HTML attributes (for example data attributes) to add to the checkboxes container."
|
|
228
228
|
}
|
|
229
229
|
]
|