[Local version] Add interruption panel

packages/govuk-frontend-review/src/views/full-page-examples/interruption-page/index.njk

@@ -0,0 +1,39 @@
+---
+title: Is your age correct?
+---
+
+{% extends "layouts/full-page-example.njk" %}
+
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+
+{% set pageTitle = example.title %}
+{% block pageTitle %}{{ example.title }} - GOV.UK{% endblock %}
+
+{% block containerStart %}
+  {{ govukBackLink({
+    href: "/",
+    text: "Back"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {% call govukPanel({
+        classes: "govuk-panel--interruption",
+        titleText: "Is your age correct?"
+      }) %}
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+        <div class="govuk-button-group">
+          {{ govukButton({
+            classes: "govuk-button--inverse",
+            text: "Yes, this is correct"
+          }) }}
+          <a href="#" class="govuk-link govuk-link--inverse">Change my age</a>
+        </div>
+      {% endcall %}
+    </div>
+  </div>
+{% endblock %}

packages/govuk-frontend/src/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,26 +36,57 @@
     }
   }
 
-  .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;
     margin-top: 0;
     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;
+    }
+  }
 }

packages/govuk-frontend/src/govuk/components/panel/accessibility.puppeteer.test.mjs

@@ -2,13 +2,25 @@ import { axe, render } from '@govuk-frontend/helpers/puppeteer'
 import { getExamples } from '@govuk-frontend/lib/components'
 
 describe('/components/panel', () => {
+  let axeRules
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has insufficient color contrast' for WCAG Level AAA
+       *
+       * Affects regular size text on the green and blue panels
+       */
+      'color-contrast-enhanced': { enabled: false }
+    }
+  })
   describe('component examples', () => {
     it('passes accessibility tests', async () => {
       const examples = await getExamples('panel')
 
       for (const exampleName in examples) {
         await render(page, 'panel', examples[exampleName])
-        await expect(axe(page)).resolves.toHaveNoViolations()
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
       }
     }, 120000)
   })

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

@@ -37,7 +37,59 @@ examples:
     screenshot: true
     options:
       titleHtml: Application complete
-      text: 'Your reference number: HDJ2123F'
+      html: Your reference number<br><strong>HDJ2123F</strong>
+  - 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>
+        <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>
+  - 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>
+        <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>
+  - 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>
+        <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>
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: title html as text
@@ -84,3 +136,9 @@ examples:
       titleText: Application complete
       headingLevel: 2
       text: 'Your reference number: HDJ2123F'
+  - name: interruption with custom classes
+    hidden: true
+    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>

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

@@ -2,8 +2,14 @@
 
 {% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
 
-<div class="govuk-panel govuk-panel--confirmation
-  {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- set isInterruption = params.classes and ("govuk-panel--interruption" in params.classes) -%}
+
+{#- The Panel component defaults to the Confirmation variant -#}
+{%- set defaultModifierClassName = "govuk-panel--confirmation" if not isInterruption -%}
+
+<div class="govuk-panel
+  {%- if defaultModifierClassName %} {{ defaultModifierClassName }}{% endif %}
+  {%- if params.classes %} {{ params.classes }}{% endif -%}"
   {{- govukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}

packages/govuk-frontend/src/govuk/components/panel/template.test.js

@@ -25,9 +25,11 @@ describe('Panel', () => {
 
     it('renders body text', () => {
       const $ = render('panel', examples.default)
-      const panelBodyText = $('.govuk-panel__body').text().trim()
+      const panelBodyText = $('.govuk-panel__body').html().trim()
 
-      expect(panelBodyText).toBe('Your reference number: HDJ2123F')
+      expect(panelBodyText).toBe(
+        'Your reference number<br><strong>HDJ2123F</strong>'
+      )
     })
 
     it('doesnt render panel body if no body text is passed', () => {
@@ -103,4 +105,39 @@ describe('Panel', () => {
       expect($component.attr('second-attribute')).toBe('bar')
     })
   })
+
+  describe('classes', () => {
+    it('has confirmation modifier class by default', () => {
+      const $ = render('panel')
+
+      const $component = $('.govuk-panel')
+      expect($component.attr('class')).toBe(
+        'govuk-panel govuk-panel--confirmation'
+      )
+    })
+    it('keeps confirmation modifier class if additional classes used', () => {
+      const $ = render('panel', examples.classes)
+
+      const $component = $('.govuk-panel')
+      expect($component.attr('class')).toBe(
+        'govuk-panel govuk-panel--confirmation extra-class one-more-class'
+      )
+    })
+    it('has no confirmation modifier class if interruption modifier class is used', () => {
+      const $ = render('panel', examples.interruption)
+
+      const $component = $('.govuk-panel')
+      expect($component.attr('class')).toBe(
+        'govuk-panel govuk-panel--interruption'
+      )
+    })
+    it('keeps interruption modifier class if additional classes used', () => {
+      const $ = render('panel', examples['interruption with custom classes'])
+
+      const $component = $('.govuk-panel')
+      expect($component.attr('class')).toBe(
+        'govuk-panel govuk-panel--interruption extra-class one-more-class'
+      )
+    })
+  })
 })