nhsuk-frontend 10.2.0 → 10.2.2
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.
- package/dist/nhsuk/common/nhsuk-frontend-version.js +1 -1
- package/dist/nhsuk/common/nhsuk-frontend-version.mjs +1 -1
- package/dist/nhsuk/components/card/_index.scss +8 -8
- package/dist/nhsuk/components/card/_index.scss.map +1 -1
- package/dist/nhsuk/components/card/fixtures.json +61 -5
- package/dist/nhsuk/components/character-count/template.njk +2 -5
- package/dist/nhsuk/components/checkboxes/fixtures.json +8 -8
- package/dist/nhsuk/components/checkboxes/template.njk +2 -2
- package/dist/nhsuk/components/date-input/template.njk +2 -2
- package/dist/nhsuk/components/fieldset/template.njk +1 -1
- package/dist/nhsuk/components/input/template.njk +4 -4
- package/dist/nhsuk/components/password-input/template.njk +2 -5
- package/dist/nhsuk/components/radios/fixtures.json +16 -16
- package/dist/nhsuk/components/radios/template.njk +2 -2
- package/dist/nhsuk/components/select/template.njk +2 -2
- package/dist/nhsuk/components/summary-list/_index.scss +17 -0
- package/dist/nhsuk/components/summary-list/_index.scss.map +1 -1
- package/dist/nhsuk/components/textarea/template.njk +2 -2
- package/dist/nhsuk/core/_nhsuk-frontend-properties.scss +1 -1
- package/dist/nhsuk/nhsuk-frontend.css +34 -21
- package/dist/nhsuk/nhsuk-frontend.css.map +1 -1
- package/dist/nhsuk/nhsuk-frontend.js +1 -1
- package/dist/nhsuk/nhsuk-frontend.min.css +1 -1
- package/dist/nhsuk/nhsuk-frontend.min.css.map +1 -1
- package/dist/nhsuk/nhsuk-frontend.min.js +1 -1
- package/package.json +1 -1
- package/src/nhsuk/components/card/_index.scss +8 -8
- package/src/nhsuk/components/character-count/template.njk +2 -5
- package/src/nhsuk/components/checkboxes/template.njk +2 -2
- package/src/nhsuk/components/date-input/template.njk +2 -2
- package/src/nhsuk/components/fieldset/template.njk +1 -1
- package/src/nhsuk/components/input/template.njk +4 -4
- package/src/nhsuk/components/password-input/template.njk +2 -5
- package/src/nhsuk/components/radios/template.njk +2 -2
- package/src/nhsuk/components/select/template.njk +2 -2
- package/src/nhsuk/components/summary-list/_index.scss +17 -0
- package/src/nhsuk/components/textarea/template.njk +2 -2
|
@@ -177,14 +177,14 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
|
|
|
177
177
|
@include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
.nhsuk-card--feature .nhsuk-card__heading,
|
|
180
|
+
.nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,
|
|
181
181
|
// Deprecated, to be removed in v11.0
|
|
182
182
|
.nhsuk-card__heading--feature {
|
|
183
183
|
@include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.nhsuk-card--feature .nhsuk-card__heading-container,
|
|
187
|
-
.nhsuk-card--feature .nhsuk-card__content,
|
|
186
|
+
.nhsuk-card--feature > .nhsuk-card__heading-container,
|
|
187
|
+
.nhsuk-card--feature > .nhsuk-card__content,
|
|
188
188
|
// Deprecated, to be removed in v11.0
|
|
189
189
|
.nhsuk-card__content--feature {
|
|
190
190
|
padding: 0; // [7]
|
|
@@ -197,7 +197,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
|
|
|
197
197
|
@include nhsuk-responsive-margin(7, "top");
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
-
.nhsuk-card--care .nhsuk-card__heading-container,
|
|
200
|
+
.nhsuk-card--care > .nhsuk-card__heading-container,
|
|
201
201
|
// Deprecated, to be removed in v11.0
|
|
202
202
|
.nhsuk-card--care__heading-container {
|
|
203
203
|
position: relative;
|
|
@@ -206,7 +206,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
|
|
|
206
206
|
border-bottom: 1px solid transparent;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
-
.nhsuk-card--care .nhsuk-card__heading,
|
|
209
|
+
.nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,
|
|
210
210
|
// Deprecated, to be removed in v11.0
|
|
211
211
|
.nhsuk-card--care__heading {
|
|
212
212
|
margin: 0;
|
|
@@ -315,7 +315,7 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
|
|
|
315
315
|
|
|
316
316
|
// Card primary
|
|
317
317
|
|
|
318
|
-
.nhsuk-card--primary .nhsuk-card__content,
|
|
318
|
+
.nhsuk-card--primary > .nhsuk-card__content,
|
|
319
319
|
// Deprecated, to be removed in v11.0
|
|
320
320
|
.nhsuk-card__content--primary {
|
|
321
321
|
@include nhsuk-responsive-spacing(5, "padding", $direction: "right", $adjustment: nhsuk-spacing(7));
|
|
@@ -355,8 +355,8 @@ $card-border-hover-colour: $nhsuk-card-border-hover-colour;
|
|
|
355
355
|
background: transparent;
|
|
356
356
|
}
|
|
357
357
|
|
|
358
|
-
.nhsuk-card--secondary .nhsuk-card__heading-container,
|
|
359
|
-
.nhsuk-card--secondary .nhsuk-card__content,
|
|
358
|
+
.nhsuk-card--secondary > .nhsuk-card__heading-container,
|
|
359
|
+
.nhsuk-card--secondary > .nhsuk-card__content,
|
|
360
360
|
// Deprecated, to be removed in v11.0
|
|
361
361
|
.nhsuk-card__content--secondary {
|
|
362
362
|
padding-top: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,+BAA+B;AAC/B,4BAA4B;AAC5B,8BAA8B;AAC9B,kCAAkC;;AAElC,GAAG;AACH,iBAAiB;AACjB,EAAE;AACF,iFAAiF;AACjF,kEAAkE;AAClE,uBAAuB;AACvB,qDAAqD;AACrD,sEAAsE;AACtE,sEAAsE;AACtE,iEAAiE;AACjE,4EAA4E;AAC5E,mEAAmE;AACnE,oDAAoD;AACpD,uEAAuE;AACvE,mEAAmE;AACnE,+CAA+C;AAC/C,4DAA4D;AAC5D,uEAAuE;AACvE,6EAA6E;AAC7E,6CAA6C;AAC7C,uFAAuF;AACvF,qGAAqG;AACrG,wFAAwF;AACxF,wFAAwF;AACxF,EAAE;AACF,yBAAyB;AACzB,GAAG;;AAEH,6BAA6B;AAC7B,iDAAiD;AACjD,+CAA+C;AAC/C,2DAA2D;;AAE3D,oCAAoC;AACpC,4CAA4C;AAC5C,0DAA0D;AAC1D,6CAA6C;AAC7C,8CAA8C;AAC9C,yDAAyD;AACzD,0DAA0D;;AAE1D;EACE;IACE,sBAAsB;IACtB,kBAAkB,EAAE,KAAK;IACzB,WAAW;;IAEX,kGAAkG;EACpG;;EAEA;IACE,cAAc;IACd,WAAW;IACX,oEAAoE,EAAE,KAAK;;IAE3E,yBAAyB;EAC3B;;EAEA;IACE,6BAA6B;IAC7B,oCAAoC;EACtC;;EAEA;IACE,+BAA+B;;IAE/B;MACE,gBAAgB;IAClB;EACF;;EAEA;;;IAGE,oCAAoC;EACtC;;EAEA;IACE;MACE,6BAA6B;IAC/B;;IAEA;MACE,iBAAiB;IACnB;;IAEA;MACE,cAAc;IAChB;EACF;;EAEA;IACE,gBAAgB;EAClB;;EAEA,gBAAgB;;EAEhB;IACE,oDAAoD;;IAEpD;;MAEE;QACE,WAAW;;QAEX,cAAc;;QAEd,kBAAkB;QAClB,MAAM;QACN,QAAQ;QACR,SAAS;QACT,OAAO;;QAEP,wCAAwC,EAAE,MAAM;MAClD;IACF;;IAEA;MACE,iCAAiC,EAAE,KAAK;MACxC,6CAA6C;IAC/C;EACF;;EAEA,YAAY;EACZ,CAAC;EACD,oCAAoC;EACpC,6DAA6D;;EAE7D;IACE,+BAA+B;IAC/B,UAAU;;IAEV,mBAAmB;;IAEnB;MACE,+BAA+B;IACjC;;IAEA;;;;MAIE,cAAc,EAAE,KAAK;IACvB;EACF;;EAEA;IACE,gBAAgB;IAChB,qBAAqB;;IAErB,wBAAwB;;IAExB;MACE,+BAA+B;IACjC;;IAEA;MACE;QACE,+BAA+B;MACjC;;MAEA;QACE,gBAAgB;MAClB;IACF;EACF;;EAEA,cAAc;;EAEd;IACE,6GAA6G;EAC/G;;EAEA;;;IAGE,6EAA6E;EAC/E;;EAEA;;;;IAIE,UAAU,EAAE,KAAK;EACnB;;EAEA,WAAW;;EAEX;IACE,8EAA8E,EAAE,KAAK;IACrF,0CAA0C;EAC5C;;EAEA;;;IAGE,kBAAkB;IAClB,6BAA6B;IAC7B,sCAAsC;IACtC,oCAAoC;EACtC;;EAEA;;;IAGE,SAAS;IACT,cAAc,EAAE,MAAM;;IAEtB,sCAAsC;IACtC,2BAA2B;EAC7B;;EAEA;IACE,cAAc;;IAEd,kBAAkB;IAClB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,MAAM;;IAElB,WAAW,EAAE,KAAK;IAClB,YAAY,EAAE,KAAK;;IAEnB,gBAAgB;;IAEhB,wBAAwB;IACxB,yBAAyB;;IAEzB;MACE,UAAU,EAAE,MAAM;IACpB;;IAEA;;MAEE,WAAW;;MAEX,cAAc;;MAEd,kBAAkB;MAClB,MAAM;;MAEN,QAAQ;MACR,SAAS;;MAET,wBAAwB,EAAE,MAAM;;MAEhC,sCAAsC,EAAE,KAAK;IAC/C;EACF;;EAEA;IACE,2CAA2C;EAC7C;;EAEA;IACE,8EAA8E;;IAE9E;MACE;;QAEE,iCAAiC;MACnC;IACF;EACF;;EAEA;IACE,8EAA8E;;IAE9E;MACE;;QAEE,iCAAiC;MACnC;IACF;;IAEA;MACE,gBAAgB,EAAE,MAAM;MACxB,SAAS;MACT,iCAAiC;MACjC,uCAAuC;;MAEvC;QACE,+BAA+B;MACjC;;MAEA;QACE,+CAA+C;MACjD;IACF;;IAEA;;MAEE,iCAAiC;IACnC;;IAEA;MACE;QACE,iCAAiC;MACnC;;MAEA;QACE,+BAA+B;MACjC;IACF;;IAEA;MACE,gCAAgC,EAAE,MAAM;IAC1C;EACF;;EAEA,cAAc;;EAEd;;;IAGE,mGAAmG;;IAEnG;MACE,YAAY;IACd;EACF;;EAEA;;;IAGE;MACE,cAAc;;MAEd,kBAAkB;MAClB,QAAQ;;MAER,8CAA8C;MAC9C,+CAA+C;MAC/C,4DAA4D;;MAE5D,oBAAoB;;MAEpB,wBAAwB;MACxB,6CAA6C;IAC/C;EACF;;EAEA,gBAAgB;;EAEhB;IACE,aAAa;IACb,eAAe;IACf,8EAA8E;IAC9E,cAAc;IACd,uBAAuB;EACzB;;EAEA;;;;IAIE,cAAc;IACd,gBAAgB;IAChB,eAAe;EACjB;AACF","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n/// box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n/// using the @mixin care-card tools/_mixins.scss.\n/// The same mixin is used for each care card, setting the background\n/// colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1);\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: $nhsuk-border-hover-colour;\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n .nhsuk-card {\n box-sizing: border-box;\n position: relative; // [1]\n width: 100%;\n\n @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n }\n\n .nhsuk-card__img {\n display: block;\n width: 100%;\n border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n\n @include nhsuk-print-hide;\n }\n\n .nhsuk-card__content {\n @include nhsuk-top-and-bottom;\n @include nhsuk-responsive-padding(5);\n }\n\n .nhsuk-card__heading {\n margin-bottom: nhsuk-spacing(3);\n\n &:has(+ .nhsuk-icon) {\n margin-bottom: 0;\n }\n }\n\n .nhsuk-card__heading-container,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading-container {\n @include nhsuk-responsive-padding(5);\n }\n\n .nhsuk-card__heading-container {\n &:last-child {\n @include nhsuk-top-and-bottom;\n }\n\n &:not(:last-child) {\n padding-bottom: 0;\n }\n\n + .nhsuk-card__content {\n padding-top: 0;\n }\n }\n\n .nhsuk-card__description {\n margin-bottom: 0;\n }\n\n // Clickable card\n\n .nhsuk-card--clickable {\n border-bottom-width: $nhsuk-card-border-bottom-width;\n\n .nhsuk-card__heading a,\n .nhsuk-card__link {\n &::before {\n content: \"\";\n\n display: block;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n background-color: rgba(255, 255, 255, 0); // [17]\n }\n }\n\n &:active {\n bottom: -$nhsuk-card-border-width; // [3]\n border-color: $nhsuk-card-border-hover-colour;\n }\n }\n\n // Card group\n //\n // Allows you to have a row of cards.\n // Flexbox is used to make each card in a row the same height.\n\n .nhsuk-card-group {\n margin-bottom: nhsuk-spacing(3);\n padding: 0;\n\n @include nhsuk-flex;\n\n @include nhsuk-media-query($until: desktop) {\n margin-bottom: nhsuk-spacing(6);\n }\n\n + h2,\n + .nhsuk-heading-l,\n + h3,\n + .nhsuk-heading-m {\n padding-top: 0; // [4]\n }\n }\n\n .nhsuk-card-group__item {\n margin-bottom: 0;\n list-style-type: none;\n\n @include nhsuk-flex-item;\n\n .nhsuk-card {\n margin-bottom: nhsuk-spacing(5);\n }\n\n @include nhsuk-media-query($until: desktop) {\n .nhsuk-card {\n margin-bottom: nhsuk-spacing(3);\n }\n\n &:last-child .nhsuk-card {\n margin-bottom: 0;\n }\n }\n }\n\n // Card feature\n\n .nhsuk-card--feature {\n @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n }\n\n .nhsuk-card--feature .nhsuk-card__heading,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__heading--feature {\n @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n }\n\n .nhsuk-card--feature .nhsuk-card__heading-container,\n .nhsuk-card--feature .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--feature {\n padding: 0; // [7]\n }\n\n // Care card\n\n .nhsuk-card--care {\n @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n @include nhsuk-responsive-margin(7, \"top\");\n }\n\n .nhsuk-card--care .nhsuk-card__heading-container,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading-container {\n position: relative;\n padding-top: nhsuk-spacing(3);\n padding-bottom: nhsuk-spacing(3) - 1px;\n border-bottom: 1px solid transparent;\n }\n\n .nhsuk-card--care .nhsuk-card__heading,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading {\n margin: 0;\n padding-top: 0; // [13]\n\n @include nhsuk-font(26, $weight: bold);\n @include nhsuk-print-colour;\n }\n\n .nhsuk-card--care__arrow {\n display: block;\n\n position: absolute;\n bottom: -11px; // [9]\n left: 30px; // [10]\n\n width: 20px; // [9]\n height: 20px; // [9]\n\n overflow: hidden;\n\n transform: rotate(45deg);\n @include nhsuk-print-hide;\n\n @include nhsuk-media-query($from: tablet) {\n left: 38px; // [10]\n }\n\n &::before,\n &::after {\n content: \"\";\n\n display: block;\n\n position: absolute;\n top: 0;\n\n width: 0;\n height: 0;\n\n transform: rotate(45deg); // [12]\n\n border: solid 32px $nhsuk-brand-colour; // [9]\n }\n }\n\n .nhsuk-card--care .nhsuk-card__content {\n @include nhsuk-responsive-padding(5, \"top\");\n }\n\n .nhsuk-card--care--urgent {\n @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n .nhsuk-card--care__arrow {\n &::before,\n &::after {\n border-color: nhsuk-colour(\"red\");\n }\n }\n }\n\n .nhsuk-card--care--emergency {\n @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n .nhsuk-card--care__arrow {\n &::before,\n &::after {\n border-color: nhsuk-colour(\"red\");\n }\n }\n\n .nhsuk-card__content {\n position: static; // [15]\n border: 0;\n color: $nhsuk-reverse-text-colour;\n background-color: nhsuk-colour(\"black\");\n\n a:not(.nhsuk-action-link):not(.nhsuk-button) {\n @include nhsuk-link-style-white;\n }\n\n @include nhsuk-print-colour {\n background-color: $nhsuk-card-background-colour;\n }\n }\n\n .nhsuk-details,\n .nhsuk-details__summary {\n color: $nhsuk-reverse-text-colour;\n }\n\n .nhsuk-details__summary {\n &:hover {\n color: $nhsuk-reverse-text-colour;\n }\n\n &:focus {\n color: $nhsuk-focus-text-colour;\n }\n }\n\n .nhsuk-action-link__link .nhsuk-icon {\n fill: $nhsuk-reverse-text-colour; // [14]\n }\n }\n\n // Card primary\n\n .nhsuk-card--primary .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--primary {\n @include nhsuk-responsive-spacing(5, \"padding\", $direction: \"right\", $adjustment: nhsuk-spacing(7));\n\n @include nhsuk-media-query($from: desktop) {\n height: 100%;\n }\n }\n\n .nhsuk-card--primary,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--primary {\n .nhsuk-icon {\n display: block;\n\n position: absolute;\n top: 50%;\n\n width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n margin-top: math.floor(math.div($nhsuk-icon-size-large, -2));\n\n pointer-events: none;\n\n fill: $nhsuk-link-colour;\n @include nhsuk-responsive-spacing(5, \"right\");\n }\n }\n\n // Card secondary\n\n .nhsuk-card--secondary {\n border-top: 0;\n border-right: 0;\n border-bottom: $nhsuk-card-border-bottom-width solid $nhsuk-card-border-colour;\n border-left: 0;\n background: transparent;\n }\n\n .nhsuk-card--secondary .nhsuk-card__heading-container,\n .nhsuk-card--secondary .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--secondary {\n padding-top: 0;\n padding-right: 0;\n padding-left: 0;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/nhsuk/components/card/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../../core/styles/icons\";\n\n////\n/// Card component\n///\n/// 1. Is needed for the :active top positioning, and invisible clickable overlay.\n/// 2. Border is used to create a divider between the white content\n/// box and an image.\n/// 3. Creates the 'pressed down' effect when clicked.\n/// 4. Removes padding-top from headings directly after the card group.\n/// 5. Includes the border width to achieve the correct left alignment.\n/// 6. Stops the heading from spanning the full width of the card.\n/// 7. Removes padding as added to container by nhsuk-panel-with-label mixin.\n/// 8. Default care card colour set to blue (non-urgent care card) -\n/// using the @mixin care-card tools/_mixins.scss.\n/// The same mixin is used for each care card, setting the background\n/// colour,text colour and print border width with the variables.\n/// 9. 'Random number' for the heading triangle.\n/// 10. 'Random number' for the heading triangle positioning.\n/// 11. 'Random number' used for spacing to compensate for the triangle.\n/// 12. Needed to enable the triangle to show correctly in high contrast mode.\n/// 13. Prevent additional padding on headings\n/// 14. Give the action link icon sufficient contrast when used in the emergency variant\n/// 15. Reset the positioning to the default [1] to display heading triangle on a coloured background.\n/// 16. Emergency care card <a> needs to be white because the background colour is black.\n/// 17. Trick IE10 into rendering the invisible clickable area. Without this it does not.\n///\n/// @group components/card\n////\n\n$nhsuk-card-border-width: 1px;\n$nhsuk-card-border-bottom-width: nhsuk-spacing(1);\n$nhsuk-card-border-colour: $nhsuk-border-colour;\n$nhsuk-card-border-hover-colour: $nhsuk-border-hover-colour;\n\n// @deprecated To be removed in v11.0\n$card-border-width: $nhsuk-card-border-width;\n$card-border-bottom-width: $nhsuk-card-border-bottom-width;\n$card-border-color: $nhsuk-card-border-colour;\n$card-border-colour: $nhsuk-card-border-colour;\n$card-border-hover-color: $nhsuk-card-border-hover-colour;\n$card-border-hover-colour: $nhsuk-card-border-hover-colour;\n\n@include nhsuk-exports(\"nhsuk/components/card\") {\n .nhsuk-card {\n box-sizing: border-box;\n position: relative; // [1]\n width: 100%;\n\n @include nhsuk-panel($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n }\n\n .nhsuk-card__img {\n display: block;\n width: 100%;\n border-bottom: $nhsuk-card-border-width solid nhsuk-colour(\"grey-5\"); // [2]\n\n @include nhsuk-print-hide;\n }\n\n .nhsuk-card__content {\n @include nhsuk-top-and-bottom;\n @include nhsuk-responsive-padding(5);\n }\n\n .nhsuk-card__heading {\n margin-bottom: nhsuk-spacing(3);\n\n &:has(+ .nhsuk-icon) {\n margin-bottom: 0;\n }\n }\n\n .nhsuk-card__heading-container,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading-container {\n @include nhsuk-responsive-padding(5);\n }\n\n .nhsuk-card__heading-container {\n &:last-child {\n @include nhsuk-top-and-bottom;\n }\n\n &:not(:last-child) {\n padding-bottom: 0;\n }\n\n + .nhsuk-card__content {\n padding-top: 0;\n }\n }\n\n .nhsuk-card__description {\n margin-bottom: 0;\n }\n\n // Clickable card\n\n .nhsuk-card--clickable {\n border-bottom-width: $nhsuk-card-border-bottom-width;\n\n .nhsuk-card__heading a,\n .nhsuk-card__link {\n &::before {\n content: \"\";\n\n display: block;\n\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n background-color: rgba(255, 255, 255, 0); // [17]\n }\n }\n\n &:active {\n bottom: -$nhsuk-card-border-width; // [3]\n border-color: $nhsuk-card-border-hover-colour;\n }\n }\n\n // Card group\n //\n // Allows you to have a row of cards.\n // Flexbox is used to make each card in a row the same height.\n\n .nhsuk-card-group {\n margin-bottom: nhsuk-spacing(3);\n padding: 0;\n\n @include nhsuk-flex;\n\n @include nhsuk-media-query($until: desktop) {\n margin-bottom: nhsuk-spacing(6);\n }\n\n + h2,\n + .nhsuk-heading-l,\n + h3,\n + .nhsuk-heading-m {\n padding-top: 0; // [4]\n }\n }\n\n .nhsuk-card-group__item {\n margin-bottom: 0;\n list-style-type: none;\n\n @include nhsuk-flex-item;\n\n .nhsuk-card {\n margin-bottom: nhsuk-spacing(5);\n }\n\n @include nhsuk-media-query($until: desktop) {\n .nhsuk-card {\n margin-bottom: nhsuk-spacing(3);\n }\n\n &:last-child .nhsuk-card {\n margin-bottom: 0;\n }\n }\n }\n\n // Card feature\n\n .nhsuk-card--feature {\n @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-card-border-colour);\n }\n\n .nhsuk-card--feature > .nhsuk-card__content > .nhsuk-card__heading,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__heading--feature {\n @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);\n }\n\n .nhsuk-card--feature > .nhsuk-card__heading-container,\n .nhsuk-card--feature > .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--feature {\n padding: 0; // [7]\n }\n\n // Care card\n\n .nhsuk-card--care {\n @include nhsuk-care-card($nhsuk-brand-colour, $nhsuk-reverse-text-colour, 4px); // [8]\n @include nhsuk-responsive-margin(7, \"top\");\n }\n\n .nhsuk-card--care > .nhsuk-card__heading-container,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading-container {\n position: relative;\n padding-top: nhsuk-spacing(3);\n padding-bottom: nhsuk-spacing(3) - 1px;\n border-bottom: 1px solid transparent;\n }\n\n .nhsuk-card--care > .nhsuk-card__heading-container > .nhsuk-card__heading,\n // Deprecated, to be removed in v11.0\n .nhsuk-card--care__heading {\n margin: 0;\n padding-top: 0; // [13]\n\n @include nhsuk-font(26, $weight: bold);\n @include nhsuk-print-colour;\n }\n\n .nhsuk-card--care__arrow {\n display: block;\n\n position: absolute;\n bottom: -11px; // [9]\n left: 30px; // [10]\n\n width: 20px; // [9]\n height: 20px; // [9]\n\n overflow: hidden;\n\n transform: rotate(45deg);\n @include nhsuk-print-hide;\n\n @include nhsuk-media-query($from: tablet) {\n left: 38px; // [10]\n }\n\n &::before,\n &::after {\n content: \"\";\n\n display: block;\n\n position: absolute;\n top: 0;\n\n width: 0;\n height: 0;\n\n transform: rotate(45deg); // [12]\n\n border: solid 32px $nhsuk-brand-colour; // [9]\n }\n }\n\n .nhsuk-card--care .nhsuk-card__content {\n @include nhsuk-responsive-padding(5, \"top\");\n }\n\n .nhsuk-card--care--urgent {\n @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 6px);\n\n .nhsuk-card--care__arrow {\n &::before,\n &::after {\n border-color: nhsuk-colour(\"red\");\n }\n }\n }\n\n .nhsuk-card--care--emergency {\n @include nhsuk-care-card(nhsuk-colour(\"red\"), $nhsuk-reverse-text-colour, 8px);\n\n .nhsuk-card--care__arrow {\n &::before,\n &::after {\n border-color: nhsuk-colour(\"red\");\n }\n }\n\n .nhsuk-card__content {\n position: static; // [15]\n border: 0;\n color: $nhsuk-reverse-text-colour;\n background-color: nhsuk-colour(\"black\");\n\n a:not(.nhsuk-action-link):not(.nhsuk-button) {\n @include nhsuk-link-style-white;\n }\n\n @include nhsuk-print-colour {\n background-color: $nhsuk-card-background-colour;\n }\n }\n\n .nhsuk-details,\n .nhsuk-details__summary {\n color: $nhsuk-reverse-text-colour;\n }\n\n .nhsuk-details__summary {\n &:hover {\n color: $nhsuk-reverse-text-colour;\n }\n\n &:focus {\n color: $nhsuk-focus-text-colour;\n }\n }\n\n .nhsuk-action-link__link .nhsuk-icon {\n fill: $nhsuk-reverse-text-colour; // [14]\n }\n }\n\n // Card primary\n\n .nhsuk-card--primary > .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--primary {\n @include nhsuk-responsive-spacing(5, \"padding\", $direction: \"right\", $adjustment: nhsuk-spacing(7));\n\n @include nhsuk-media-query($from: desktop) {\n height: 100%;\n }\n }\n\n .nhsuk-card--primary,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--primary {\n .nhsuk-icon {\n display: block;\n\n position: absolute;\n top: 50%;\n\n width: nhsuk-px-to-rem($nhsuk-icon-size-large);\n height: nhsuk-px-to-rem($nhsuk-icon-size-large);\n margin-top: math.floor(math.div($nhsuk-icon-size-large, -2));\n\n pointer-events: none;\n\n fill: $nhsuk-link-colour;\n @include nhsuk-responsive-spacing(5, \"right\");\n }\n }\n\n // Card secondary\n\n .nhsuk-card--secondary {\n border-top: 0;\n border-right: 0;\n border-bottom: $nhsuk-card-border-bottom-width solid $nhsuk-card-border-colour;\n border-left: 0;\n background: transparent;\n }\n\n .nhsuk-card--secondary > .nhsuk-card__heading-container,\n .nhsuk-card--secondary > .nhsuk-card__content,\n // Deprecated, to be removed in v11.0\n .nhsuk-card__content--secondary {\n padding-top: 0;\n padding-right: 0;\n padding-left: 0;\n }\n}\n"]}
|
|
@@ -36,6 +36,42 @@
|
|
|
36
36
|
"options": {},
|
|
37
37
|
"html": "<div class=\"nhsuk-card\">\n <div class=\"nhsuk-card__content\">\n <h3 class=\"nhsuk-card__heading\">\n Help from NHS 111\n </h3>\n <p class=\"nhsuk-body\">If you're worried about a symptom and not sure what help you need, NHS 111 can tell you what to do next.</p>\n<p class=\"nhsuk-body\">Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a>.</p>\n<p class=\"nhsuk-body\">For a life-threatening emergency call 999.</p>\n </div>\n</div>"
|
|
38
38
|
},
|
|
39
|
+
{
|
|
40
|
+
"name": "basic with heading link",
|
|
41
|
+
"context": {
|
|
42
|
+
"heading": "Introduction to care and support",
|
|
43
|
+
"headingClasses": "nhsuk-heading-m",
|
|
44
|
+
"headingLevel": 3,
|
|
45
|
+
"href": "#",
|
|
46
|
+
"description": "A quick guide for people who have care and support needs and their carers"
|
|
47
|
+
},
|
|
48
|
+
"screenshot": false,
|
|
49
|
+
"options": {},
|
|
50
|
+
"html": "<div class=\"nhsuk-card\">\n <div class=\"nhsuk-card__content\">\n <h3 class=\"nhsuk-card__heading nhsuk-heading-m\">\n <a class=\"nhsuk-card__link\" href=\"#\">Introduction to care and support</a>\n </h3>\n <p class=\"nhsuk-card__description\">A quick guide for people who have care and support needs and their carers</p>\n </div>\n</div>"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "basic with summary list",
|
|
54
|
+
"context": {
|
|
55
|
+
"heading": "Regional Manager",
|
|
56
|
+
"headingLevel": 3
|
|
57
|
+
},
|
|
58
|
+
"callBlock": "<dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n",
|
|
59
|
+
"screenshot": false,
|
|
60
|
+
"options": {},
|
|
61
|
+
"html": "<div class=\"nhsuk-card\">\n <div class=\"nhsuk-card__content\">\n <h3 class=\"nhsuk-card__heading\">\n Regional Manager\n </h3>\n <dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n </div>\n</div>"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "basic with summary list and heading link",
|
|
65
|
+
"context": {
|
|
66
|
+
"heading": "Regional Manager",
|
|
67
|
+
"headingLevel": 3,
|
|
68
|
+
"href": "#"
|
|
69
|
+
},
|
|
70
|
+
"callBlock": "<dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n",
|
|
71
|
+
"screenshot": false,
|
|
72
|
+
"options": {},
|
|
73
|
+
"html": "<div class=\"nhsuk-card\">\n <div class=\"nhsuk-card__content\">\n <h3 class=\"nhsuk-card__heading\">\n <a class=\"nhsuk-card__link\" href=\"#\">Regional Manager</a>\n </h3>\n <dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n </div>\n</div>"
|
|
74
|
+
},
|
|
39
75
|
{
|
|
40
76
|
"name": "clickable",
|
|
41
77
|
"context": {
|
|
@@ -89,9 +125,7 @@
|
|
|
89
125
|
"name": "feature",
|
|
90
126
|
"context": {
|
|
91
127
|
"feature": true,
|
|
92
|
-
"href": "#",
|
|
93
128
|
"heading": "Feature card heading",
|
|
94
|
-
"headingClasses": "nhsuk-heading-m",
|
|
95
129
|
"description": "Feature card description."
|
|
96
130
|
},
|
|
97
131
|
"screenshot": {
|
|
@@ -102,7 +136,29 @@
|
|
|
102
136
|
]
|
|
103
137
|
},
|
|
104
138
|
"options": {},
|
|
105
|
-
"html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading
|
|
139
|
+
"html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading\">\n Feature card heading\n </h2>\n <p class=\"nhsuk-card__description\">Feature card description.</p>\n </div>\n</div>"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "feature with nested card and summary list",
|
|
143
|
+
"context": {
|
|
144
|
+
"feature": true,
|
|
145
|
+
"heading": "Flu: Follow-up requested"
|
|
146
|
+
},
|
|
147
|
+
"callBlock": "<p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>\n<a class=\"nhsuk-button nhsuk-button--secondary\" href=\"#\">Record a new consent response</a>\n\n<h3 class=\"nhsuk-heading-s\">Consent responses</h3>\n\n<div class=\"nhsuk-card nhsuk-card--clickable\">\n <div class=\"nhsuk-card__content\">\n <h4 class=\"nhsuk-card__heading\">\n <a class=\"nhsuk-card__link\" href=\"#\">Sarah Philips (Mum)</a>\n </h4>\n <dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Email address\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n sarah.philips@example.com\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 25 August 2025 at 4:04 pm\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n <dt class=\"nhsuk-summary-list__key\">\n Response\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n <strong class=\"nhsuk-tag nhsuk-tag--orange\">\n Follow up requested\n </strong>\n </dd>\n </div>\n</dl>\n </div>\n</div>\n",
|
|
148
|
+
"screenshot": false,
|
|
149
|
+
"options": {},
|
|
150
|
+
"html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading\">\n Flu: Follow-up requested\n </h2>\n <p>Sarah Philips (Mum) would like to speak to a member of the team about other options for their child's vaccination.</p>\n<a class=\"nhsuk-button nhsuk-button--secondary\" href=\"#\">Record a new consent response</a>\n\n<h3 class=\"nhsuk-heading-s\">Consent responses</h3>\n\n<div class=\"nhsuk-card nhsuk-card--clickable\">\n <div class=\"nhsuk-card__content\">\n <h4 class=\"nhsuk-card__heading\">\n <a class=\"nhsuk-card__link\" href=\"#\">Sarah Philips (Mum)</a>\n </h4>\n <dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Email address\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n sarah.philips@example.com\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 25 August 2025 at 4:04 pm\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row nhsuk-summary-list__row--no-border\">\n <dt class=\"nhsuk-summary-list__key\">\n Response\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n <strong class=\"nhsuk-tag nhsuk-tag--orange\">\n Follow up requested\n </strong>\n </dd>\n </div>\n</dl>\n </div>\n</div>\n </div>\n</div>"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"name": "feature with summary list",
|
|
154
|
+
"context": {
|
|
155
|
+
"feature": true,
|
|
156
|
+
"heading": "Feature card heading"
|
|
157
|
+
},
|
|
158
|
+
"callBlock": "<dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n",
|
|
159
|
+
"screenshot": false,
|
|
160
|
+
"options": {},
|
|
161
|
+
"html": "<div class=\"nhsuk-card nhsuk-card--feature\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading\">\n Feature card heading\n </h2>\n <dl class=\"nhsuk-summary-list\">\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Name\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n Karen Francis\n </dd>\n </div>\n <div class=\"nhsuk-summary-list__row\">\n <dt class=\"nhsuk-summary-list__key\">\n Date of birth\n </dt>\n <dd class=\"nhsuk-summary-list__value\">\n 15 March 1984\n </dd>\n </div>\n</dl>\n </div>\n</div>"
|
|
106
162
|
},
|
|
107
163
|
{
|
|
108
164
|
"name": "primary (with chevron)",
|
|
@@ -170,7 +226,7 @@
|
|
|
170
226
|
"secondary": true,
|
|
171
227
|
"heading": "Why we are reinvesting in the NHS Prototype kit",
|
|
172
228
|
"headingClasses": "nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2",
|
|
173
|
-
"descriptionHtml": "<p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p
|
|
229
|
+
"descriptionHtml": "<p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p>\n<p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>"
|
|
174
230
|
},
|
|
175
231
|
"screenshot": {
|
|
176
232
|
"viewports": [
|
|
@@ -180,7 +236,7 @@
|
|
|
180
236
|
]
|
|
181
237
|
},
|
|
182
238
|
"options": {},
|
|
183
|
-
"html": "<div class=\"nhsuk-card nhsuk-card--secondary\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2\">\n <a class=\"nhsuk-card__link\" href=\"#\">Why we are reinvesting in the NHS Prototype kit</a>\n </h2>\n <p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p
|
|
239
|
+
"html": "<div class=\"nhsuk-card nhsuk-card--secondary\">\n <div class=\"nhsuk-card__content\">\n <h2 class=\"nhsuk-card__heading nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2\">\n <a class=\"nhsuk-card__link\" href=\"#\">Why we are reinvesting in the NHS Prototype kit</a>\n </h2>\n <p class=\"nhsuk-body-s nhsuk-u-margin-bottom-2\">21 July 2025</p>\n <p class=\"nhsuk-card__description\">Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping in code and how digital teams in the NHS can get started using it.</p>\n </div>\n</div>"
|
|
184
240
|
},
|
|
185
241
|
{
|
|
186
242
|
"name": "top task",
|
|
@@ -84,12 +84,9 @@
|
|
|
84
84
|
key: "words-over-limit",
|
|
85
85
|
messages: params.wordsOverLimitText
|
|
86
86
|
}) -}}
|
|
87
|
-
{% endset -%}
|
|
88
87
|
|
|
89
|
-
{
|
|
90
|
-
{
|
|
91
|
-
{% set attributesHtml = attributesHtml ~ " " ~ name | escape ~ '="' ~ value | escape ~ '"' %}
|
|
92
|
-
{% endfor -%}
|
|
88
|
+
{{- nhsukAttributes(params.formGroup.attributes) -}}
|
|
89
|
+
{% endset -%}
|
|
93
90
|
|
|
94
91
|
{{ textarea({
|
|
95
92
|
id: id,
|
|
@@ -929,7 +929,7 @@
|
|
|
929
929
|
},
|
|
930
930
|
"screenshot": false,
|
|
931
931
|
"options": {},
|
|
932
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
932
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n <h1 class=\"nhsuk-fieldset__heading\">\n Venenatis Condimentum\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text\" name=\"example\" type=\"checkbox\" value=\"nullam\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\n quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\n Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida\n at eget metus.\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text-2\" name=\"example\" type=\"checkbox\" value=\"aenean\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\n vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\n nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\n natoque penatibus et magnis dis parturient montes, nascetur ridiculus\n mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\n venenatis vestibulum. Cras mattis consectetur purus sit amet\n fermentum.\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text-3\" name=\"example\" type=\"checkbox\" value=\"fusce\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\n nibh, ut fermentum massa justo sit amet risus. Etiam porta sem\n malesuada magna mollis euismod. Praesent commodo cursus magna, vel\n scelerisque nisl consectetur et. Etiam porta sem malesuada magna\n mollis euismod. Etiam porta sem malesuada magna mollis euismod.\n Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
933
933
|
},
|
|
934
934
|
{
|
|
935
935
|
"name": "with long text",
|
|
@@ -962,7 +962,7 @@
|
|
|
962
962
|
},
|
|
963
963
|
"screenshot": false,
|
|
964
964
|
"options": {},
|
|
965
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
965
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--m\">\n <h1 class=\"nhsuk-fieldset__heading\">\n Venenatis Condimentum\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes nhsuk-checkboxes--small\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text\" name=\"example\" type=\"checkbox\" value=\"nullam\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo\n quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.\n Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida\n at eget metus.\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text-2\" name=\"example\" type=\"checkbox\" value=\"aenean\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis\n vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus,\n nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis\n natoque penatibus et magnis dis parturient montes, nascetur ridiculus\n mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam\n venenatis vestibulum. Cras mattis consectetur purus sit amet\n fermentum.\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-long-text-3\" name=\"example\" type=\"checkbox\" value=\"fusce\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-long-text-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum\n nibh, ut fermentum massa justo sit amet risus. Etiam porta sem\n malesuada magna mollis euismod. Praesent commodo cursus magna, vel\n scelerisque nisl consectetur et. Etiam porta sem malesuada magna\n mollis euismod. Etiam porta sem malesuada magna mollis euismod.\n Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
966
966
|
},
|
|
967
967
|
{
|
|
968
968
|
"name": "with \"none of the above\" option",
|
|
@@ -1010,7 +1010,7 @@
|
|
|
1010
1010
|
},
|
|
1011
1011
|
"screenshot": false,
|
|
1012
1012
|
"options": {},
|
|
1013
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1013
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n <h1 class=\"nhsuk-fieldset__heading\">\n How do you want to be contacted about this?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional\" name=\"example\" type=\"checkbox\" value=\"email\" aria-controls=\"conditional-conditional\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional\">\n Email\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"email\" name=\"email\" type=\"text\" spellcheck=\"false\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-2\" name=\"example\" type=\"checkbox\" value=\"phone\" aria-controls=\"conditional-conditional-2\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-2\">\n Phone\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-2\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"phone\" name=\"phone\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-3\" name=\"example\" type=\"checkbox\" value=\"text\" aria-controls=\"conditional-conditional-3\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-3\">\n Text message\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-3\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"mobile\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"mobile\" name=\"mobile\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__divider\">or</div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-5\" name=\"example\" type=\"checkbox\" value=\"none\" data-checkbox-exclusive>\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-5\">\n None of the above\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1014
1014
|
},
|
|
1015
1015
|
{
|
|
1016
1016
|
"name": "with \"none of the above\" option",
|
|
@@ -1060,7 +1060,7 @@
|
|
|
1060
1060
|
},
|
|
1061
1061
|
"screenshot": false,
|
|
1062
1062
|
"options": {},
|
|
1063
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1063
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--m\">\n <h1 class=\"nhsuk-fieldset__heading\">\n How do you want to be contacted about this?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes nhsuk-checkboxes--small\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional\" name=\"example\" type=\"checkbox\" value=\"email\" aria-controls=\"conditional-conditional\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional\">\n Email\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"email\" name=\"email\" type=\"text\" spellcheck=\"false\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-2\" name=\"example\" type=\"checkbox\" value=\"phone\" aria-controls=\"conditional-conditional-2\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-2\">\n Phone\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-2\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"phone\" name=\"phone\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-3\" name=\"example\" type=\"checkbox\" value=\"text\" aria-controls=\"conditional-conditional-3\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-3\">\n Text message\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-3\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"mobile\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"mobile\" name=\"mobile\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__divider\">or</div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-5\" name=\"example\" type=\"checkbox\" value=\"none\" data-checkbox-exclusive>\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-5\">\n None of the above\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1064
1064
|
},
|
|
1065
1065
|
{
|
|
1066
1066
|
"name": "with \"none of the above\" option (named group)",
|
|
@@ -1120,7 +1120,7 @@
|
|
|
1120
1120
|
"options": {
|
|
1121
1121
|
"hidden": true
|
|
1122
1122
|
},
|
|
1123
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1123
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n <h1 class=\"nhsuk-fieldset__heading\">\n How do you want to be contacted about this?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional\" name=\"example\" type=\"checkbox\" value=\"email\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional\">\n Email\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"email\" name=\"email\" type=\"text\" spellcheck=\"false\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-2\" name=\"example\" type=\"checkbox\" value=\"phone\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional-2\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-2\">\n Phone\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-2\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"phone\" name=\"phone\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-3\" name=\"example\" type=\"checkbox\" value=\"text\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional-3\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-3\">\n Text message\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-3\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"mobile\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"mobile\" name=\"mobile\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__divider\">or</div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-5\" name=\"example\" type=\"checkbox\" value=\"none\" data-checkbox-exclusive data-checkbox-exclusive-group=\"communication-preferences\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-5\">\n None of the above\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1124
1124
|
},
|
|
1125
1125
|
{
|
|
1126
1126
|
"name": "with \"none of the above\" option (named group, unique)",
|
|
@@ -1177,7 +1177,7 @@
|
|
|
1177
1177
|
"options": {
|
|
1178
1178
|
"hidden": true
|
|
1179
1179
|
},
|
|
1180
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1180
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n <h1 class=\"nhsuk-fieldset__heading\">\n How do you want to be contacted about this?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional\" name=\"preference-email\" type=\"checkbox\" value=\"yes\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional\">\n Email\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"email\">\n Email address\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"email\" name=\"email\" type=\"text\" spellcheck=\"false\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-2\" name=\"preference-phone\" type=\"checkbox\" value=\"yes\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional-2\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-2\">\n Phone\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-2\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"phone\">\n Phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"phone\" name=\"phone\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-3\" name=\"preference-text\" type=\"checkbox\" value=\"yes\" data-checkbox-exclusive-group=\"communication-preferences\" aria-controls=\"conditional-conditional-3\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-3\">\n Text message\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__conditional nhsuk-checkboxes__conditional--hidden\" id=\"conditional-conditional-3\">\n <div class=\"nhsuk-form-group\">\n <label class=\"nhsuk-label\" for=\"mobile\">\n Mobile phone number\n </label>\n <input class=\"nhsuk-input nhsuk-u-width-two-thirds\" id=\"mobile\" name=\"mobile\" type=\"tel\">\n</div>\n </div>\n <div class=\"nhsuk-checkboxes__divider\">or</div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"conditional-5\" name=\"preference-none\" type=\"checkbox\" value=\"yes\" data-checkbox-exclusive data-checkbox-exclusive-group=\"communication-preferences\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"conditional-5\">\n None of the above\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1181
1181
|
},
|
|
1182
1182
|
{
|
|
1183
1183
|
"name": "without fieldset",
|
|
@@ -1335,7 +1335,7 @@
|
|
|
1335
1335
|
},
|
|
1336
1336
|
"screenshot": false,
|
|
1337
1337
|
"options": {},
|
|
1338
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1338
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--l\">\n <h1 class=\"nhsuk-fieldset__heading\">\n What is your nationality?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values\" name=\"example\" type=\"checkbox\" value=\"british\" checked>\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values\">\n British\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values-2\">\n Irish\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values-3\" name=\"example\" type=\"checkbox\" value=\"other\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values-3\">\n Citizen of another country\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1339
1339
|
},
|
|
1340
1340
|
{
|
|
1341
1341
|
"name": "with pre-checked values",
|
|
@@ -1371,7 +1371,7 @@
|
|
|
1371
1371
|
},
|
|
1372
1372
|
"screenshot": false,
|
|
1373
1373
|
"options": {},
|
|
1374
|
-
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\"
|
|
1374
|
+
"html": "<div class=\"nhsuk-form-group\">\n <fieldset class=\"nhsuk-fieldset\">\n <legend class=\"nhsuk-fieldset__legend nhsuk-fieldset__legend--m\">\n <h1 class=\"nhsuk-fieldset__heading\">\n What is your nationality?\n </h1>\n </legend>\n <div class=\"nhsuk-checkboxes nhsuk-checkboxes--small\" data-module=\"nhsuk-checkboxes\">\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values\" name=\"example\" type=\"checkbox\" value=\"british\" checked>\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values\">\n British\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values-2\">\n Irish\n </label>\n </div>\n <div class=\"nhsuk-checkboxes__item\">\n <input class=\"nhsuk-checkboxes__input\" id=\"with-values-3\" name=\"example\" type=\"checkbox\" value=\"other\">\n <label class=\"nhsuk-label nhsuk-checkboxes__label\" for=\"with-values-3\">\n Citizen of another country\n </label>\n </div>\n </div>\n</fieldset>\n</div>"
|
|
1375
1375
|
}
|
|
1376
1376
|
]
|
|
1377
1377
|
}
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
{% set innerHtml %}
|
|
73
73
|
{% if params.hint %}
|
|
74
74
|
{% set hintId = idPrefix ~ "-hint" %}
|
|
75
|
-
{% set describedBy = describedBy ~ " " ~ hintId
|
|
75
|
+
{% set describedBy = (describedBy ~ " " ~ hintId) | trim %}
|
|
76
76
|
{{ hint({
|
|
77
77
|
id: hintId,
|
|
78
78
|
classes: params.hint.classes,
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
{% endif %}
|
|
84
84
|
{% if params.errorMessage %}
|
|
85
85
|
{% set errorId = idPrefix ~ "-error" %}
|
|
86
|
-
{% set describedBy = describedBy ~ " " ~ errorId
|
|
86
|
+
{% set describedBy = (describedBy ~ " " ~ errorId) | trim %}
|
|
87
87
|
{{ errorMessage({
|
|
88
88
|
id: errorId,
|
|
89
89
|
classes: params.errorMessage.classes,
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
{% set innerHtml %}
|
|
38
38
|
{% if params.hint %}
|
|
39
39
|
{% set hintId = params.id ~ "-hint" %}
|
|
40
|
-
{% set describedBy = describedBy ~ " " ~ hintId
|
|
40
|
+
{% set describedBy = (describedBy ~ " " ~ hintId) | trim %}
|
|
41
41
|
{{ hint({
|
|
42
42
|
id: hintId,
|
|
43
43
|
classes: params.hint.classes,
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
{% endif %}
|
|
49
49
|
{% if params.errorMessage %}
|
|
50
50
|
{% set errorId = params.id ~ "-error" %}
|
|
51
|
-
{% set describedBy = describedBy ~ " " ~ errorId
|
|
51
|
+
{% set describedBy = (describedBy ~ " " ~ errorId) | trim %}
|
|
52
52
|
{{ errorMessage({
|
|
53
53
|
id: errorId,
|
|
54
54
|
classes: params.errorMessage.classes,
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
{#- a record of other elements that we need to associate with the input using
|
|
29
29
|
aria-describedby – for example hints or error messages -#}
|
|
30
|
-
{% set describedBy = params.describedBy if params.describedBy else
|
|
30
|
+
{% set describedBy = params.describedBy if params.describedBy else "" -%}
|
|
31
31
|
{%- set id = params.id if params.id else params.name -%}
|
|
32
32
|
|
|
33
33
|
{%- set hasPrefix = true if prefix and (prefix.text or prefix.html) else false %}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
optional: true
|
|
58
58
|
},
|
|
59
59
|
"aria-describedby": {
|
|
60
|
-
value: describedBy,
|
|
60
|
+
value: describedBy if describedBy else false,
|
|
61
61
|
optional: true
|
|
62
62
|
},
|
|
63
63
|
autocomplete: {
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
}) | trim | indent(2) }}
|
|
101
101
|
{% if params.hint %}
|
|
102
102
|
{% set hintId = id ~ "-hint" %}
|
|
103
|
-
{% set describedBy = describedBy ~ " " ~ hintId
|
|
103
|
+
{% set describedBy = (describedBy ~ " " ~ hintId) | trim %}
|
|
104
104
|
{{ hint({
|
|
105
105
|
id: hintId,
|
|
106
106
|
classes: params.hint.classes,
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
{% endif %}
|
|
112
112
|
{% if params.errorMessage %}
|
|
113
113
|
{% set errorId = id ~ "-error" %}
|
|
114
|
-
{% set describedBy = describedBy ~ " " ~ errorId
|
|
114
|
+
{% set describedBy = (describedBy ~ " " ~ errorId) | trim %}
|
|
115
115
|
{{ errorMessage({
|
|
116
116
|
id: errorId,
|
|
117
117
|
classes: params.errorMessage.classes,
|
|
@@ -37,12 +37,9 @@
|
|
|
37
37
|
key: 'password-hidden-announcement',
|
|
38
38
|
message: params.passwordHiddenAnnouncementText
|
|
39
39
|
}) -}}
|
|
40
|
-
{%- endset -%}
|
|
41
40
|
|
|
42
|
-
{
|
|
43
|
-
{%-
|
|
44
|
-
{% set attributesHtml = attributesHtml ~ " " ~ name | escape ~ '="' ~ value | escape ~ '"' %}
|
|
45
|
-
{% endfor -%}
|
|
41
|
+
{{- nhsukAttributes(params.formGroup.attributes) -}}
|
|
42
|
+
{%- endset -%}
|
|
46
43
|
|
|
47
44
|
{%- set buttonHtml %}
|
|
48
45
|
{{ button({
|