Add interruption panel variant

Author: frankieroberto

packages/govuk-frontend/src/govuk/components/panel/_index.scss

@@ -32,11 +32,6 @@
       // it but the the text remains legible.
       overflow-wrap: break-word;
     }
-  }
-
-  .govuk-panel--confirmation {
-    color: govuk-colour("white");
-    background: govuk-colour("green");
 
     @media print {
       border-color: currentcolor;
@@ -45,6 +40,11 @@
     }
   }
 
+  .govuk-panel--confirmation {
+    color: govuk-colour("white");
+    background: govuk-colour("green");
+  }
+
   .govuk-panel__title {
     @include govuk-font-size($size: 48);
     @include govuk-typography-weight-bold;
@@ -55,4 +55,12 @@
   .govuk-panel__title:last-child {
     margin-bottom: 0;
   }
+
+  .govuk-panel--interruption {
+    color: govuk-colour("white");
+    background-color: $govuk-brand-colour;
+    text-align: left;
+
+    @include govuk-font($size: 19);
+  }
 }

packages/govuk-frontend/src/govuk/components/panel/panel.yaml

@@ -38,6 +38,23 @@ examples:
     options:
       titleHtml: Application complete
       text: 'Your reference number: HDJ2123F'
+  - name: custom heading level
+    options:
+      titleText: Application complete
+      headingLevel: 2
+      text: 'Your reference number: HDJ2123F'
+  - name: interruption
+    options:
+      titleText: Is your weight correct?
+      html: |
+        <p>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>
+      classes: govuk-panel--interruption
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: title html as text

packages/govuk-frontend/src/govuk/components/panel/template.njk

@@ -2,8 +2,17 @@
 
 {% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
 
-<div class="govuk-panel govuk-panel--confirmation
-  {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- set classNames = "govuk-panel" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{%- if (not params.classes) or (not "govuk-panel--interruption" in params.classes) %}
+  {% set classNames = classNames + " govuk-panel--confirmation" -%}
+{% endif %}
+
+<div class="{{ classNames }}"
   {{- govukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}