[Spike] Add interruption panel - nunjucky actions#7246
Closed
NickColley wants to merge 1 commit into
Closed
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 355a7a913..a40a3f1fc 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4223,6 +4223,7 @@ screen and (forced-colors:active) {
margin-bottom: 15px;
padding: 35px;
border: 5px solid transparent;
+ color: var(--govuk-text-colour, #0b0c0c);
text-align: center
}
@@ -4254,20 +4255,6 @@ screen and (forced-colors:active) {
}
}
-.govuk-panel--confirmation {
- --govuk-text-colour: var(--govuk-inverse-text-colour, #fff);
- color: var(--govuk-text-colour, #0b0c0c);
- background: var(--govuk-success-colour, #0f7a52)
-}
-
-@media print {
- .govuk-panel--confirmation {
- --govuk-text-colour: inherit;
- border-color: currentcolor;
- background: none
- }
-}
-
.govuk-panel__title {
font-size: 2rem;
line-height: 1.09375;
@@ -4290,10 +4277,64 @@ screen and (forced-colors:active) {
}
}
+.govuk-panel__actions>:last-child,
+.govuk-panel__body>:last-child,
.govuk-panel__title:last-child {
margin-bottom: 0
}
+.govuk-panel__body:not(:last-child) {
+ margin-bottom: 40px
+}
+
+.govuk-panel--confirmation {
+ background: var(--govuk-success-colour, #0f7a52)
+}
+
+.govuk-panel--confirmation,
+.govuk-panel--interruption {
+ --govuk-text-colour: var(--govuk-inverse-text-colour, #fff)
+}
+
+.govuk-panel--interruption {
+ background: var(--govuk-brand-colour, #1d70b8);
+ text-align: left
+}
+
+.govuk-panel--interruption .govuk-panel__title {
+ font-size: 1.6875rem;
+ line-height: 1.1111111111;
+ margin-bottom: 15px
+}
+
+@media (min-width:40.0625em) {
+ .govuk-panel--interruption .govuk-panel__title {
+ font-size: 2.25rem;
+ line-height: 1.1111111111
+ }
+}
+
+@media print {
+ .govuk-panel--interruption .govuk-panel__title {
+ font-size: 24pt;
+ line-height: 1.05
+ }
+}
+
+@media (min-width:40.0625em) {
+ .govuk-panel--interruption:has(.govuk-panel__actions) {
+ padding-bottom: 25px
+ }
+}
+
+@media print {
+ .govuk-panel {
+ --govuk-text-colour: inherit;
+ border-color: currentcolor;
+ background: none
+ }
+}
+
@media (min-width:20em) {
.govuk-password-input__wrapper {
flex-direction: row;
Action run for 0f14029 |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/panel/template-default.html b/packages/govuk-frontend/dist/govuk/components/panel/template-default.html
index de4887db7..85ab91eb6 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-default.html
@@ -3,6 +3,6 @@
Application complete
</h1>
<div class="govuk-panel__body">
- Your reference number: HDJ2123F
+ Your reference number<br><strong>HDJ2123F</strong>
</div>
</div>
diff --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
new file mode 100644
index 000000000..6de2cd2ca
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html
@@ -0,0 +1,19 @@
+<div class="govuk-panel govuk-panel--interruption">
+ <h1 class="govuk-panel__title">
+ Are you sure you want to change this?
+ </h1>
+ <div class="govuk-panel__body">
+ <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>
+ <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>
+ <div class="govuk-panel__actions">
+ <div class="govuk-button-group">
+ <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ Are you sure you want to change this?
+ </a>
+ <a class="govuk-link govuk-link--inverse" href="#change">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
new file mode 100644
index 000000000..2f03a24b0
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html
@@ -0,0 +1,25 @@
+<div class="govuk-panel govuk-panel--interruption">
+ <h1 class="govuk-panel__title">
+ Your new answer affects other sections of this application
+ </h1>
+ <div class="govuk-panel__body">
+ <h2 class="govuk-heading-m">Question: Where is Andy Cooke located?</h2>
+ <p class="govuk-body">
+ Previous answer: Custody<br>
+ New answer: Released
+ </p>
+ <p class="govuk-body govuk-!-margin-bottom-2">You need to:</p>
+ <ul class="govuk-list govuk-list--bullet">
+ <li>enter their custody information</li>
+ <li>update the licence conditions section</li>
+ </ul>
+ </div>
+ <div class="govuk-panel__actions">
+ <div class="govuk-button-group">
+ <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ Continue to other sections
+ </a>
+ <a class="govuk-link govuk-link--inverse" href="#change">Go back to application</a>
+ </div>
+ </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
new file mode 100644
index 000000000..836e2eed0
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html
@@ -0,0 +1,16 @@
+<div class="govuk-panel govuk-panel--interruption">
+ <h1 class="govuk-panel__title">
+ Is your age correct?
+ </h1>
+ <div class="govuk-panel__body">
+ <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+ </div>
+ <div class="govuk-panel__actions app-panel__actions--compact" data-test-id="interruption-actions">
+ <div class="govuk-button-group">
+ <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ Yes, this is correct
+ </a>
+ <a class="govuk-link govuk-link--inverse" href="#change">Change my age</a>
+ </div>
+ </div>
+</div>
Action run for 0f14029 |
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 34ae42899..027b19fb3 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
@@ -11,6 +11,7 @@
padding: base.govuk-spacing(7) - base.$govuk-border-width;
border: base.$govuk-border-width solid transparent;
+ color: base.govuk-functional-colour(text);
text-align: center;
@@ -35,18 +36,6 @@
}
}
- .govuk-panel--confirmation {
- --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
- color: base.govuk-functional-colour(text);
- background: base.govuk-functional-colour(success);
-
- @media print {
- --govuk-text-colour: inherit;
- border-color: currentcolor;
- background: none;
- }
- }
-
.govuk-panel__title {
@include base.govuk-font-size($size: 48);
@include base.govuk-typography-weight-bold;
@@ -54,8 +43,48 @@
margin-bottom: base.govuk-spacing(6);
}
- .govuk-panel__title:last-child {
+ // Remove bottom spacing from anything at the end of the Panel's body
+ // to stop the Panel's padding spacing from becoming too large.
+ .govuk-panel__title:last-child,
+ .govuk-panel__actions > :last-child,
+ .govuk-panel__body > :last-child {
margin-bottom: 0;
}
+
+ // TODO: consider flexbox with `gap`...
+ .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);
+ }
+
+ .govuk-panel--interruption {
+ --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+ background: base.govuk-functional-colour(brand);
+ text-align: left;
+
+ // Smaller title to go alongside smaller body text.
+ .govuk-panel__title {
+ @include base.govuk-font-size($size: 36);
+ margin-bottom: base.govuk-spacing(3);
+ }
+
+ &:has(.govuk-panel__actions) {
+ @media #{base.govuk-from-breakpoint(tablet)} {
+ padding-bottom: base.govuk-spacing(5);
+ }
+ }
+ }
+
+ @media print {
+ .govuk-panel {
+ --govuk-text-colour: inherit;
+ border-color: currentcolor;
+ background: none;
+ }
+ }
}
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
index 293de6fd0..dcd393483 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
@@ -5,13 +5,98 @@
"name": "default",
"options": {
"titleHtml": "Application complete",
- "text": "Your reference number: HDJ2123F"
+ "html": "Your reference number<br><strong>HDJ2123F</strong>"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n</div>"
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n <div class=\"govuk-panel__body\">\n Your reference number<br><strong>HDJ2123F</strong>\n </div>\n</div>"
+ },
+ {
+ "name": "interruption",
+ "options": {
+ "classes": "govuk-panel--interruption",
+ "titleText": "Is your age correct?",
+ "actions": {
+ "classes": "app-panel__actions--compact",
+ "attributes": {
+ "data-test-id": "interruption-actions"
+ },
+ "items": [
+ {
+ "text": "Yes, this is correct",
+ "type": "button",
+ "href": "#submit",
+ "value": "reject"
+ },
+ {
+ "text": "Change my age",
+ "href": "#change"
+ }
+ ]
+ },
+ "html": "<p class=\"govuk-body\">You entered your age as <strong>109</strong>.</p>"
+ },
+ "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>\n <div class=\"govuk-panel__actions app-panel__actions--compact\" data-test-id=\"interruption-actions\">\n <div class=\"govuk-button-group\">\n <a href=\"#submit\" 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\">Change my age</a>\n </div>\n </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?",
+ "actions": {
+ "items": [
+ {
+ "text": "Are you sure you want to change this?",
+ "type": "button",
+ "href": "#submit",
+ "value": "reject"
+ },
+ {
+ "text": "Go back to application",
+ "href": "#change"
+ }
+ ]
+ },
+ "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"
+ },
+ "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>\n <div class=\"govuk-panel__actions\">\n <div class=\"govuk-button-group\">\n <a href=\"#submit\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Are you sure you want to change this?\n </a>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#change\">Go back to application</a>\n </div>\n </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",
+ "actions": {
+ "items": [
+ {
+ "text": "Continue to other sections",
+ "type": "button",
+ "href": "#submit",
+ "value": "reject"
+ },
+ {
+ "text": "Go back to application",
+ "href": "#change"
+ }
+ ]
+ },
+ "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"
+ },
+ "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>\n <div class=\"govuk-panel__actions\">\n <div class=\"govuk-button-group\">\n <a href=\"#submit\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n Continue to other sections\n </a>\n <a class=\"govuk-link govuk-link--inverse\" href=\"#change\">Go back to application</a>\n </div>\n </div>\n</div>"
},
{
"name": "title html as text",
@@ -113,6 +198,19 @@
"pageTemplateOptions": {},
"screenshot": false,
"html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h2 class=\"govuk-panel__title\">\n Application complete\n </h2>\n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n</div>"
+ },
+ {
+ "name": "interruption with custom classes",
+ "options": {
+ "classes": "govuk-panel--interruption extra-class one-more-class",
+ "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>"
+ },
+ "hidden": true,
+ "description": "",
+ "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>"
}
]
}
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..a9c9c58a7 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,55 @@
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the panel container."
+ },
+ {
+ "name": "actions",
+ "type": "array",
+ "required": false,
+ "description": "The buttons and links that you want to display in the message. `actions` defaults to `\"button\"` unless you set `href`, which renders the action as a link.",
+ "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": "name",
+ "type": "string",
+ "required": false,
+ "description": "The name attribute for the button. Does not apply if you set `href`, which makes a link."
+ },
+ {
+ "name": "value",
+ "type": "string",
+ "required": false,
+ "description": "The value attribute for the button. Does not apply if you set `href`, which makes a link."
+ },
+ {
+ "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."
+ }
+ ]
}
]
Action run for 0f14029 |
📋 StatsFile sizes
No changes to module sizes. Action run for 0f14029 |
NickColley
commented
Jul 3, 2026
| {% for action in actions.items %} | ||
| {% set buttonHtml -%} | ||
| {% if not action.href or action.type == "button" %} | ||
| {{ govukButton({ |
Contributor
Author
There was a problem hiding this comment.
If we were going to do this, do we really need to support all this?
User arguments for:
- I want my APIs between components to be familiar and work similar to what Im used to
- I want the same options to add classes and attributes so I dont have to fork the component
User arguments against:
- I want Nunjucks parameters to be simple to understand to add my actions
Technical argument against:
- is the overhead of maintaining all this e.g. tests (could be mitigated by abstracting actions tests)
Member
There was a problem hiding this comment.
In the context of a panel, not sure we need all the options. If we allow attributes, this could let us get rid of name and value until there's a clear demand for them. That being said, it would make the API deviate from the Cookie banner and leave users guessing which options they can use where.
Open
3 tasks
romaricpascal
left a comment
romaricpascal
left a comment
Member
There was a problem hiding this comment.
Like the direction of it. Commented on the selectors we're looking to use to have a wider browser support 😊
Comment on lines
+75
to
+76
| &:has(.govuk-panel__actions) { | ||
| @media #{base.govuk-from-breakpoint(tablet)} { |
Member
There was a problem hiding this comment.
question Missed that :has in the previous PR adding the styling. My mental model would want the padding to go on the govuk-panel (it's the one defining the blue area after all), but to reach more browsers, is there a chance we could put the padding on the .govuk-panel__actions?
Contributor
Author
There was a problem hiding this comment.
My mental model would want the padding to go on the govuk-panel
Just for clarify this selector was only adjusting the padding on the .govuk-panel so maybe a misunderstanding there.
:has() says select the element that has a thing but it doesnt select the element it has found. (not sure if that made any sense)
On browser support :has() has really good support so is a good fit here I think.
| margin-bottom: 0; | ||
| } | ||
|
|
||
| // TODO: consider flexbox with `gap`... |
Member
There was a problem hiding this comment.
question Is it for horizontal or vertical spacing? If vertical could the lobotomized owl (* + *) or .govuk-panel__body + * do the trick to set the extra space?
| {% for action in actions.items %} | ||
| {% set buttonHtml -%} | ||
| {% if not action.href or action.type == "button" %} | ||
| {{ govukButton({ |
Member
There was a problem hiding this comment.
In the context of a panel, not sure we need all the options. If we allow attributes, this could let us get rid of name and value until there's a clear demand for them. That being said, it would make the API deviate from the Cookie banner and leave users guessing which options they can use where.
Contributor
Author
|
We decided to do this proper here: #7262 |
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
3 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.
No description provided.