Add interruption panel - adjust spacing and typography

[NickColley]

Note

A final review will be available once we get the contribution branch ready
I will manually merge this into #6636 once approved since we cant merge into a external repo via GitHub

• adjust the title size to better balance with smaller text (e.g. govuk-body).
• adjust the spacing of the panel and Button group so it is better balanced

Why not use .govuk-panel__title--l like NHS's implementation?

We decided by adding this it implies the heading scale and we dont have a clear need for the other sizes, so for now we'll just apply a smaller title by default and see if a need arises for something more involved.

Paired on with @mia-allers-gds

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 9e949019e..2e0d429e3 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4277,6 +4277,7 @@ screen and (forced-colors:active) {
     }
 }
 
+.govuk-panel__body>:last-child,
 .govuk-panel__title:last-child {
     margin-bottom: 0
 }
@@ -4295,6 +4296,36 @@ screen and (forced-colors:active) {
     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;

---

Action run for 3a06c6a

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss b/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
index 9b095e041..d3973740c 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
+++ b/packages/govuk-frontend/dist/govuk/components/panel/_mixin.scss
@@ -43,7 +43,10 @@
     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;
   }
 
@@ -56,6 +59,27 @@
     --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 {

---

Action run for 3a06c6a

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	122.94 KiB	0.5%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	122.93 KiB	0.5%

No changes to module sizes.

---

Action run for 3a06c6a

[mia-allers-gds]

Looks good!

[NickColley]

@romaricpascal all yours! I think the main thing that the approach does is it's decidedly not BEM, which feels a bit odd but not sure how we resolve that without doing it more like the MoJ component

https://design-patterns.service.justice.gov.uk/components/interruption-card/

We decided not to do this because we didnt want to think of how having button groups in the Nunjuck would make sense with Confirmation panel.

Let me know your thoughts.

[romaricpascal]

@NickColley Do you mean that given both the Confirmation Panel and the Interruption panel share the same options, primaryAction and secondaryAction options like in the MoJ wouldn't really make sense for a Confirmation Panel?

[romaricpascal]

What are we planning documentation-wise around the actions of the panel? We'll need to make it clear the actions should be wrapped in a .govuk-button-group element.

[NickColley]

What are we planning documentation-wise around the actions of the panel? We'll need to make it clear the actions should be wrapped in a .govuk-button-group element.

This'll be done by example, the examples in the Design System website will show the Button group being used.

[romaricpascal]

Code wise, I'd say let's merge it with the current selector. We can review markup and Nunjucks options in a separate pull request focused on those implementation details 😊

[NickColley]

Will merge cos the design is good pending iteration and then raise a issue to consider the Nunjuck api we've discussed cos to me it does feel more consistent with say, the Cookie banner that way.

Nothing is breaking until we ship so it's cool to change our mind.

alphagov/govuk-design-system#5456