[Local version] Add interruption panel#7237
Draft
NickColley wants to merge 12 commits into
Draft
Conversation
In common with other components, the panel doesn't meet the AAA contrast ratio of 7:1 for small text (under 24px) The contrast ratio for white text on blue panels is 5.16:1 The contrast ratio for white text on green panels is 4.52:1 (however by default these use large text)
Bring inline with the example in the Design System
- adds some examples from the MoJ Interruption Card guidnace (https://web.archive.org/web/20260701114511/https://design-patterns.service.justice.gov.uk/components/interruption-card/) - added a full page example to match the Interruption page pattern Design System guidance
We want users to rely on our classes, for example, `.govuk-body`. If they want global styles they can turn it on using `$govuk-global-styles`.
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..2e0d429e3 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,63 @@ screen and (forced-colors:active) {
}
}
+.govuk-panel__body>:last-child,
.govuk-panel__title:last-child {
margin-bottom: 0
}
+.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
+ }
+}
+
+.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;
+ background: none
+ }
+}
+
@media (min-width:20em) {
.govuk-password-input__wrapper {
flex-direction: row;
Action run for 2e28408 |
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..de598d817
--- /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 class="govuk-button-group">
+ <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+ Are you sure you want to change this?
+ </button>
+ <a href="#" class="govuk-link govuk-link--inverse">
+ 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..882342102
--- /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 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>
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..86bb0e5c3
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/panel/template-interruption.html
@@ -0,0 +1,14 @@
+<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 class="govuk-button-group">
+ <button type="submit" 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>
+</div>
Action run for 2e28408 |
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..d3973740c 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,51 @@
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__body > :last-child {
margin-bottom: 0;
}
+
+ .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);
+ }
+
+ // 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 {
+ .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..a4436b2ee 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/panel/fixtures.json
@@ -5,13 +5,52 @@
"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?",
+ "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"
+ },
+ "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>"
+ },
+ {
+ "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"
+ },
+ "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>"
+ },
+ {
+ "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"
+ },
+ "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>"
},
{
"name": "title html as text",
@@ -113,6 +152,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>"
}
]
}
Action run for 2e28408 |
📋 StatsFile sizes
No changes to module sizes. Action run for 2e28408 |
Move to below the modifiers for Confirmation and Interruption so that the print styles have higher precedence.
NickColley
force-pushed
the
add-interruption-panel--local
branch
from
587f242 to
d82f21e
Compare
Contextually adjust spacing if the Button group is at the end of the Panel.
NickColley
force-pushed
the
add-interruption-panel--local
branch
from
76a0297 to
2e28408
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
4 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.
A clone of the contribution branch so I can stack pull requests against this before cherry-picking into Frankie's branch.