Add interruption panel - add actions option#7262
Open
romaricpascal wants to merge 2 commits into
Open
Conversation
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 2e0d429e3..3ce5f12e3 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4277,11 +4277,22 @@ screen and (forced-colors:active) {
}
}
+.govuk-panel__actions>:last-child,
.govuk-panel__body>:last-child,
.govuk-panel__title:last-child {
margin-bottom: 0
}
+@media (min-width:40.0625em) {
+ .govuk-panel__actions>.govuk-button-group:last-child {
+ margin-bottom: -10px
+ }
+}
+
+.govuk-panel__body:not(:last-child) {
+ margin-bottom: 40px
+}
+
.govuk-panel--confirmation {
background: var(--govuk-success-colour, #0f7a52)
}
@@ -4314,19 +4325,7 @@ screen and (forced-colors:active) {
font-size: 24pt;
line-height: 1.05
}
-}
-.govuk-panel--interruption .govuk-panel__body>.govuk-button-group:last-child {
- margin-top: 40px
-}
-
-@media (min-width:40.0625em) {
- .govuk-panel--interruption:has(.govuk-panel__body>.govuk-button-group:last-child) {
- padding-bottom: 25px
- }
-}
-
-@media print {
.govuk-panel {
--govuk-text-colour: inherit;
border-color: currentcolor;
Action run for ff38e9e |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html
index de598d817..edf984265 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html
@@ -7,13 +7,11 @@
<p class="govuk-body">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>
<p class="govuk-body">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>
<p class="govuk-body">You can go back to undo this change.</p>
- <div class="govuk-button-group">
- <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ </div>
+ <div class="govuk-panel__actions"><div class="govuk-button-group">
+ <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button" form="the-form-id">
Are you sure you want to change this?
</button>
- <a href="#" class="govuk-link govuk-link--inverse">
- Go back to application
- </a>
- </div>
- </div>
+ <a class="govuk-link govuk-link--inverse" href="#">Go back to application</a>
+ </div></div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html
index 882342102..c13f728a7 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html
@@ -13,13 +13,6 @@
<li>enter their custody information</li>
<li>update the licence conditions section</li>
</ul>
- <div class="govuk-button-group">
- <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
- Continue to other sections
- </button>
- <a href="#" class="govuk-link govuk-link--inverse">
- Go back to application
- </a>
- </div>
</div>
+ <div class="govuk-panel__actions"></div>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html
index 86bb0e5c3..f095ed646 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html
@@ -4,11 +4,11 @@
</h1>
<div class="govuk-panel__body">
<p class="govuk-body">You entered your age as <strong>109</strong>.</p>
- <div class="govuk-button-group">
- <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ </div>
+ <div class="govuk-panel__actions"><div class="govuk-button-group">
+ <button type="button" class="govuk-button govuk-button--inverse" data-module="govuk-button">
Yes, this is correct
</button>
- <a href="#" class="govuk-link govuk-link--inverse">Change my age</a>
- </div>
- </div>
+ <a class="govuk-link govuk-link--inverse" href="#">Change my age</a>
+ </div></div>
</div>
Action run for ff38e9e |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
index d3973740c..13bc5a122 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
@@ -43,13 +43,29 @@
margin-bottom: base.govuk-spacing(6);
}
- // Remove bottom spacing from anything at the end of the Panel's body
+ // Remove bottom spacing from anything at the end of the Panel's content
// to stop the Panel's padding spacing from becoming too large.
.govuk-panel__title:last-child,
- .govuk-panel__body > :last-child {
+ .govuk-panel__body > :last-child,
+ .govuk-panel__actions > :last-child {
margin-bottom: 0;
}
+ // On larger screens if the Panel actions have a button group,
+ // then we want to adjust the spacing a bit to avoid the button group
+ // making the Panel's padding spacing being too large.
+ @media #{base.govuk-from-breakpoint(tablet)} {
+ .govuk-panel__actions > .govuk-button-group:last-child {
+ margin-bottom: -1 * base.govuk-spacing(2);
+ }
+ }
+
+ // When the panel shows some actions, make sure they have some spacing
+ // from the panel's content
+ .govuk-panel__body:not(:last-child) {
+ margin-bottom: base.govuk-spacing(7);
+ }
+
.govuk-panel--confirmation {
--govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
background: base.govuk-functional-colour(success);
@@ -65,21 +81,6 @@
@include base.govuk-font-size($size: 36);
margin-bottom: base.govuk-spacing(3);
}
-
- // When the Button group is at the end of the Panel's body then,
- // make sure it has some spacing away from the other body content.
- .govuk-panel__body > .govuk-button-group:last-child {
- margin-top: base.govuk-spacing(7);
- }
-
- // On larger screens if the Interruption panel has a Button group at the end of the Panel's body,
- // then we want to adjust the spacing a bit to avoid the Button group
- // making the Panel's padding spacing being too large.
- @media #{base.govuk-from-breakpoint(tablet)} {
- &:has(.govuk-panel__body > .govuk-button-group:last-child) {
- padding-bottom: base.govuk-spacing(5);
- }
- }
}
@media print {
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
index a4436b2ee..186ca9cab 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
@@ -18,39 +18,76 @@
"options": {
"classes": "govuk-panel--interruption",
"titleText": "Is your age correct?",
- "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n<div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Yes, this is correct\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">Change my age</a>\n</div>\n"
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n",
+ "actions": {
+ "items": [
+ {
+ "type": "button",
+ "text": "Yes, this is correct"
+ },
+ {
+ "href": "#",
+ "text": "Change my age"
+ }
+ ]
+ }
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Yes, this is correct\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">Change my age</a>\n </div>\n </div>\n</div>"
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n <button type=\"button\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Yes, this is correct\n </button>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Change my age</a>\n </div></div>\n</div>"
},
{
"name": "interruption-with-content-with-long-line-length",
"options": {
"classes": "govuk-panel--interruption",
"titleText": "Are you sure you want to change this?",
- "html": "<p class=\"govuk-body\">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n<p class=\"govuk-body\">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>\n<p class=\"govuk-body\">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>\n<p class=\"govuk-body\">You can go back to undo this change.</p>\n<div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Are you sure you want to change this?\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">\n Go back to application\n </a>\n</div>\n"
+ "html": "<p class=\"govuk-body\">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n<p class=\"govuk-body\">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>\n<p class=\"govuk-body\">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>\n<p class=\"govuk-body\">You can go back to undo this change.</p>\n",
+ "actions": {
+ "items": [
+ {
+ "type": "submit",
+ "text": "Are you sure you want to change this?",
+ "attributes": {
+ "form": "the-form-id"
+ }
+ },
+ {
+ "href": "#",
+ "text": "Go back to application"
+ }
+ ]
+ }
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Are you sure you want to change this?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n <p class=\"govuk-body\">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>\n <p class=\"govuk-body\">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>\n <p class=\"govuk-body\">You can go back to undo this change.</p>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Are you sure you want to change this?\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">\n Go back to application\n </a>\n </div>\n </div>\n</div>"
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Are you sure you want to change this?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n <p class=\"govuk-body\">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>\n <p class=\"govuk-body\">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>\n <p class=\"govuk-body\">You can go back to undo this change.</p>\n </div>\n <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\" form=\"the-form-id\">\n Are you sure you want to change this?\n </button>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Go back to application</a>\n </div></div>\n</div>"
},
{
"name": "interruption-with-headings-content-and-lists",
"options": {
"classes": "govuk-panel--interruption",
"titleText": "Your new answer affects other sections of this application",
- "html": "<h2 class=\"govuk-heading-m\">Question: Where is Andy Cooke located?</h2>\n<p class=\"govuk-body\">\n Previous answer: Custody<br>\n New answer: Released\n</p>\n<p class=\"govuk-body govuk-!-margin-bottom-2\">You need to:</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>enter their custody information</li>\n <li>update the licence conditions section</li>\n</ul>\n<div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Continue to other sections\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">\n Go back to application\n </a>\n</div>\n"
+ "html": "<h2 class=\"govuk-heading-m\">Question: Where is Andy Cooke located?</h2>\n<p class=\"govuk-body\">\n Previous answer: Custody<br>\n New answer: Released\n</p>\n<p class=\"govuk-body govuk-!-margin-bottom-2\">You need to:</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>enter their custody information</li>\n <li>update the licence conditions section</li>\n</ul>\n",
+ "actions": [
+ {
+ "type": "submit",
+ "text": "Continue to other sections"
+ },
+ {
+ "href": "#",
+ "text": "Go back to application"
+ }
+ ]
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Your new answer affects other sections of this application\n </h1>\n <div class=\"govuk-panel__body\">\n <h2 class=\"govuk-heading-m\">Question: Where is Andy Cooke located?</h2>\n <p class=\"govuk-body\">\n Previous answer: Custody<br>\n New answer: Released\n </p>\n <p class=\"govuk-body govuk-!-margin-bottom-2\">You need to:</p>\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>enter their custody information</li>\n <li>update the licence conditions section</li>\n </ul>\n <div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Continue to other sections\n </button>\n <a href=\"#\" class=\"govuk-link govuk-link--inverse\">\n Go back to application\n </a>\n </div>\n </div>\n</div>"
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Your new answer affects other sections of this application\n </h1>\n <div class=\"govuk-panel__body\">\n <h2 class=\"govuk-heading-m\">Question: Where is Andy Cooke located?</h2>\n <p class=\"govuk-body\">\n Previous answer: Custody<br>\n New answer: Released\n </p>\n <p class=\"govuk-body govuk-!-margin-bottom-2\">You need to:</p>\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>enter their custody information</li>\n <li>update the licence conditions section</li>\n </ul>\n </div>\n <div class=\"govuk-panel__actions\"></div>\n</div>"
},
{
"name": "title html as text",
@@ -165,6 +202,150 @@
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-panel govuk-panel--interruption extra-class one-more-class\">\n <h1 class=\"govuk-panel__title\">\n Are you sure you want to change this?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n </div>\n</div>"
+ },
+ {
+ "name": "confirmation, with actions",
+ "options": {
+ "titleText": "Is your age correct?",
+ "actions": {
+ "items": [
+ {
+ "type": "button",
+ "text": "Yes, this is correct"
+ },
+ {
+ "href": "#",
+ "text": "Change my age"
+ }
+ ]
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n</div>"
+ },
+ {
+ "name": "interruption, with actions classes and attributes",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n",
+ "actions": {
+ "classes": "extra-class one-more-class",
+ "attributes": {
+ "data-test": 1,
+ "data-other-test": "yes"
+ },
+ "items": [
+ {
+ "type": "button",
+ "text": "Yes, this is correct"
+ },
+ {
+ "href": "#",
+ "text": "Change my age"
+ }
+ ]
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n <div class=\"govuk-panel__actions extra-class one-more-class\" data-test=\"1\" data-other-test=\"yes\"><div class=\"govuk-button-group\">\n <button type=\"button\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Yes, this is correct\n </button>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Change my age</a>\n </div></div>\n</div>"
+ },
+ {
+ "name": "interruption, submit action",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n",
+ "actions": {
+ "items": [
+ {
+ "type": "submit",
+ "text": "Yes, this is correct",
+ "attributes": {
+ "form": "test-target-element",
+ "name": "acknowledged",
+ "value": ""
+ },
+ "classes": "extra-class one-more-class"
+ },
+ {
+ "href": "#",
+ "text": "Change my age"
+ }
+ ]
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n <button type=\"submit\" class=\"govuk-button govuk-button--inverse extra-class one-more-class\" data-module=\"govuk-button\" form=\"test-target-element\" name=\"acknowledged\" value=\"\">\n Yes, this is correct\n </button>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Change my age</a>\n </div></div>\n</div>"
+ },
+ {
+ "name": "interruption, button link",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n",
+ "actions": {
+ "classes": "extra-class one-more-class",
+ "attributes": {
+ "data-test": 1,
+ "data-other-test": "yes"
+ },
+ "items": [
+ {
+ "type": "button",
+ "text": "Yes, this is correct",
+ "href": "?acknowledged=true"
+ },
+ {
+ "href": "#",
+ "text": "Change my age"
+ }
+ ]
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n <div class=\"govuk-panel__actions extra-class one-more-class\" data-test=\"1\" data-other-test=\"yes\"><div class=\"govuk-button-group\">\n <a href=\"?acknowledged=true\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Yes, this is correct\n </a>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Change my age</a>\n </div></div>\n</div>"
+ },
+ {
+ "name": "interruption, no actions",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n"
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n</div>"
+ },
+ {
+ "name": "interruption, no actions items",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n",
+ "actions": {
+ "classes": "extra-class"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "pageTemplateOptions": {},
+ "screenshot": false,
+ "html": "<div class=\"govuk-panel govuk-panel--interruption\">\n <h1 class=\"govuk-panel__title\">\n Is your age correct?\n </h1>\n <div class=\"govuk-panel__body\">\n <p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>\n </div>\n <div class=\"govuk-panel__actions extra-class\"></div>\n</div>"
}
]
}
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/macro-options.json b/packages/govuk-frontend/dist/govuk/components/panel/macro-options.json
index a1a491a08..853eab38e 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/panel/macro-options.json
@@ -46,5 +46,62 @@
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the panel container."
+ },
+ {
+ "name": "actions",
+ "type": "object",
+ "required": false,
+ "description": "Can be used when creating an [interruption panel](https://design-system.service.gov.uk/components/panel/#interruption-panel) which will add a button or link. Default is `button` unless you set `href` which will show the action as a link.",
+ "params": [
+ {
+ "name": "items",
+ "type": "array",
+ "required": false,
+ "params": [
+ {
+ "name": "text",
+ "type": "string",
+ "required": true,
+ "description": "The button or link text."
+ },
+ {
+ "name": "type",
+ "type": "string",
+ "required": false,
+ "description": "The type of button – `\"button\"` or `\"submit\"`. If `href` is provided, set `type` to `\"button\"` render a link styled as a button."
+ },
+ {
+ "name": "href",
+ "type": "string",
+ "required": false,
+ "description": "The `href` for a link. Set `type` to `\"button\"` and set `href` to render a link styled as a button."
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "The additional classes that you want to add to the button or link."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "The additional attributes that you want to add to the button or link. For example, data attributes."
+ }
+ ]
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes."
+ }
+ ]
}
]
Action run for ff38e9e |
📋 StatsFile sizes
No changes to module sizes. Action run for ff38e9e |
NickColley
reviewed
Jul 6, 2026
romaricpascal
force-pushed
the
add-interruption-panel--actions-option
branch
from
e6fb5f9 to
c3cb817
Compare
NickColley
requested changes
Jul 6, 2026
NickColley
left a comment
NickColley
left a comment
Contributor
There was a problem hiding this comment.
It's looking really nice, definitely more consistent with our other components I think, I added a few comments on the CSS that need a little look but it's very close - really good work.
NickColley
changed the title
actions option to the Panel componentactions option
Open
3 tasks
romaricpascal
force-pushed
the
add-interruption-panel--actions-option
branch
from
5c9893d to
689e4ea
Compare
romaricpascal
commented
Jul 7, 2026
NickColley
reviewed
Jul 7, 2026
NickColley
approved these changes
Jul 7, 2026
NickColley
left a comment
NickColley
left a comment
Contributor
There was a problem hiding this comment.
Looking solid, just needs a content review now I think.
romaricpascal
commented
Jul 7, 2026
| - name: actions | ||
| type: object | ||
| required: false | ||
| description: If creating an Interruption panel, the buttons and links that you want to display. `actions` defaults to `"button"` unless you set `href`, which renders the action as a link. |
Member
Author
There was a problem hiding this comment.
@calvin-lau-sig7 In terms of links, this is possibly the only place I could see one being useful, to point to the section about Interruption panel:
Suggested change
| description: If creating an Interruption panel, the buttons and links that you want to display. `actions` defaults to `"button"` unless you set `href`, which renders the action as a link. | |
| description: If creating an [Interruption panel](/* Link to the section in the Panel's component page */), the buttons and links that you want to display. `actions` defaults to `"button"` unless you set `href`, which renders the action as a link. |
Contributor
There was a problem hiding this comment.
Basing this approach loosely from what we did in summary cards in the Summary list component. https://design-system.service.gov.uk/components/summary-list/
Suggested change
| description: If creating an Interruption panel, the buttons and links that you want to display. `actions` defaults to `"button"` unless you set `href`, which renders the action as a link. | |
| description: Can be used when creating an [interruption panel](https://design-system.service.gov.uk/components/panel/#interruption-panel) which will add a button or link. Default is `button` unless you set `href` which will show the action as a link. [[See macro options for interruption panel actions](https://design-system.service.gov.uk/components/panel/#) |
romaricpascal
force-pushed
the
add-interruption-panel--actions-option
branch
from
689e4ea to
93d7f7b
Compare
Comment on lines
+29
to
+33
| { | ||
| text: "Yes, this is correct", | ||
| type: "button", | ||
| href: "#submit" | ||
| }, |
Contributor
There was a problem hiding this comment.
How would this work for where the button needs to submit a form, rather than be a link styled as a button? You’d need to wrap the button in a <form> with all the things that a form needs?
Arguably the button doesn't need to be a real button POSTing a form, as in most case you're just navigating to the next page, but there might be reasons why you’d want it to be a POST?
I guess you could wrap the whole panel component in a form?
Contributor
There was a problem hiding this comment.
I think that's the simplest way would be to nest this component inside a form element.
I believe you can also specify a form using the form attribute like this but not tried it out myself!
We think that likely the majority case is people doing link buttons which is what's represented here but where people do want to submit a real form I believe it is possible with what we've discussed here but if you see something we've missed give us a shout 👍🏻
Contributor
|
Interesting! I'm not totally convinced by the need for the The existing examples at https://design-system.service.gov.uk/components/panel/ use HTML for the However maybe there’s an argument for adding actions to make some of the common use cases easier to do within Nunjucks? 🤷 Some of the examples in the backlog from live services seem to use other types of components within the interruption card, eg radios! alphagov/govuk-design-system-backlog#27 (comment) - I guess those would have to fall back to using the HTML option? |
Contributor
|
@frankieroberto I think as we wanted to make a clearer visual distinction between the body content and the actions it started to feel more like it'd be easier long term to have two different "slots" rather than create complicated CSS selectors that rely on context and positioning of elements. I dont think that the idea of keeping the component interface simpler is necessarily a bad approach but were erring on the side of consistency with our other components e.g. while not perfectly aligned we have precedent for actions in Cookie banner and Summary list. We also prefer the idea long term of maintaining simpler explicit markup with the idea that these are "slots" where potentially other things weve not considered yet could go or put another way this markup better distinguishes the components boundaries and where we expect nested non panel stuff to go.
Yeah HTML is also an option but I think with this specific example they'd be able to use the Nunjucks Let us know what you think, good to get your perspective. |
Comment on lines
+41
to
+42
| required: false | ||
| params: |
Contributor
There was a problem hiding this comment.
Are we missing a description here? Made a guess on what the text should be and where it should go here.
Suggested change
| required: false | |
| params: | |
| required: false | |
| description: Used to add a button or link | |
| params: |
Member
Author
There was a problem hiding this comment.
That's a good shout. The option is the actual list of links or buttons, would it pay off to describe it as such?
The list of buttons or links to display at the end of an Interruption panel
Allows users to component to create consistent markup for the actions users are expected to take when shown an Interruption panel. The actions only show if the Panel is an Interruption panel and can be: - buttons, both `button` and `submit` type (the `attributes` option allows to set `form`, `name` and `value` for the `submit` type) - links, both regular and button-looking links The containing element (`govuk-panel__actions`) can receive custom `classes` and `attributes`, as can each action listed in the `items` list of actions. Having a specific element to target allows us to simplify CSS selectors for adjusting spacing around the panel's actions. Co-authored-by: Nick Colley <2445413+NickColley@users.noreply.github.com>
romaricpascal
force-pushed
the
add-interruption-panel--actions-option
branch
from
556d45f to
ff38e9e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
A final review will be available once we get the contribution branch ready
We will manually merge this into #6636 once approved since we cant merge into a external repo via GitHub
Allows users to component to create consistent markup for the actions users are expected to take when shown an Interruption panel.
The actions only show if the Panel is an Interruption panel and can be:
buttonandsubmittype (theattributesoption allows to setform,nameandvaluefor thesubmittype)The containing element (
govuk-panel__actions) can receive customclassesandattributes, as can each action listed in theitemslist of actions.Having a specific element to target allows us to simplify CSS selectors for adjusting spacing around the panel's actions.