Add actions option to the Panel component

Allows users to component to create consistent markup for the actions users are expected to take when shown an Interruption panel.

The actions only show if the Panel is an Interruption panel and can be:
- buttons, both `button` and `submit` type (the `attributes` option allows to set `form`, `name` and `value` for the `submit` type)
- links, both regular and button-looking links

The containing element (`govuk-panel__actions`) can receive custom `classes` and `attributes`, as can each action listed in the `items` list of actions.

Having a specific element to target allows us to simplify CSS selectors for adjusting spacing around the panel's actions.

Co-authored-by: Nick Colley <2445413+NickColley@users.noreply.github.com>
Co-authored-by: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com>

Author: 3 people

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

@@ -43,13 +43,29 @@
     margin-bottom: base.govuk-spacing(6);
   }
 
-  // Remove bottom spacing from anything at the end of the Panel's body
+  // Remove bottom spacing from anything at the end of the Panel's content
   // to stop the Panel's padding spacing from becoming too large.
   .govuk-panel__title:last-child,
-  .govuk-panel__body > :last-child {
+  .govuk-panel__body > :last-child,
+  .govuk-panel__actions > :last-child {
     margin-bottom: 0;
   }
 
+  // On larger screens if the Panel actions have a button group,
+  // 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)} {
+    .govuk-panel__actions > .govuk-button-group:last-child {
+      margin-bottom: -1 * base.govuk-spacing(2);
+    }
+  }
+
+  // When the panel shows some actions, make sure they have some spacing
+  // from the panel's content
+  .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);
@@ -65,21 +81,6 @@
       @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 {

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

@@ -31,6 +31,44 @@ params:
     type: object
     required: false
     description: HTML attributes (for example data attributes) to add to the panel container.
+  - name: actions
+    type: object
+    required: false
+    description: Can be used when creating an [interruption panel](https://design-system.service.gov.uk/components/panel/#interruption-panel) which will add a button or link. Default is `button` unless you set `href` which will show the action as a link.
+    params:
+      - name: items
+        type: array
+        required: false
+        description: The list of buttons or links to display at the end of an Interruption panel.
+        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: 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.
+      - name: classes
+        type: string
+        required: false
+        description: The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links.
+      - name: attributes
+        type: object
+        required: false
+        description: The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes.
 
 examples:
   - name: default
@@ -44,12 +82,12 @@ examples:
       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>
+      actions:
+        items:
+          - text: Yes, this is correct
+            type: button
+          - text: No, change my age
+            href: '#'
   - name: interruption-with-content-with-long-line-length
     options:
       classes: govuk-panel--interruption
@@ -59,14 +97,14 @@ examples:
         <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>
+      actions:
+        items:
+          - text: Are you sure you want to change this?
+            type: submit
+            attributes:
+              form: the-form-id
+          - text: Go back to application
+            href: '#'
   - name: interruption-with-headings-content-and-lists
     options:
       classes: govuk-panel--interruption
@@ -82,15 +120,11 @@ examples:
           <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>
-
+      actions:
+        - text: Continue to other sections
+          type: submit
+        - text: Go back to application
+          href: '#'
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: title html as text
     hidden: true
@@ -142,3 +176,82 @@ examples:
       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>
+  - name: confirmation, with actions
+    hidden: true
+    options:
+      titleText: Is your age correct?
+      actions:
+        items:
+          - type: button
+            text: Yes, this is correct
+          - href: '#'
+            text: No, change my age
+  - name: interruption, with actions classes and attributes
+    hidden: true
+    options:
+      classes: govuk-panel--interruption
+      titleText: Is your age correct?
+      html: |
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+      actions:
+        classes: extra-class one-more-class
+        attributes:
+          'data-test': 1
+          'data-other-test': 'yes'
+        items:
+          - type: button
+            text: Yes, this is correct
+          - href: '#'
+            text: No, change my age
+  - name: interruption, submit action
+    hidden: true
+    options:
+      classes: govuk-panel--interruption
+      titleText: Is your age correct?
+      html: |
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+      actions:
+        items:
+          - type: submit
+            text: Yes, this is correct
+            attributes:
+              form: test-target-element
+              name: 'acknowledged'
+              value: ''
+            classes: 'extra-class one-more-class'
+          - href: '#'
+            text: No, change my age
+  - name: interruption, button link
+    hidden: true
+    options:
+      classes: govuk-panel--interruption
+      titleText: Is your age correct?
+      html: |
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+      actions:
+        classes: extra-class one-more-class
+        attributes:
+          'data-test': 1
+          'data-other-test': 'yes'
+        items:
+          - type: button
+            text: Yes, this is correct
+            href: '?acknowledged=true'
+          - href: '#'
+            text: No, change my age
+  - name: interruption, no actions
+    hidden: true
+    options:
+      classes: govuk-panel--interruption
+      titleText: Is your age correct?
+      html: |
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+  - name: interruption, no actions items
+    hidden: true
+    options:
+      classes: govuk-panel--interruption
+      titleText: Is your age correct?
+      html: |
+        <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
+      actions:
+        classes: 'extra-class'

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

@@ -1,4 +1,5 @@
 {% from "../../macros/attributes.njk" import govukAttributes -%}
+{% from "../button/macro.njk" import govukButton -%}
 
 {% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
 
@@ -7,6 +8,23 @@
 {#- The Panel component defaults to the Confirmation variant -#}
 {%- set defaultModifierClassName = "govuk-panel--confirmation" if not isInterruption -%}
 
+{%- macro _panelAction(action) -%}
+  {%- if not action.href or action.type == "button" -%}
+    {{ govukButton({
+      "text": action.text,
+      "type": action.type if action.type else "button",
+      "classes": "govuk-button--inverse" + (" " + action.classes if action.classes),
+      "href": action.href,
+      "attributes": action.attributes
+    }) }}
+  {%- else -%}
+    <a class="govuk-link govuk-link--inverse {%- if action.classes %} {{ action.classes }}{% endif %}" href="{{ action.href }}"
+      {{- govukAttributes(action.attributes) }}>
+      {{- action.text -}}
+    </a>
+  {%- endif -%}
+{%- endmacro -%}
+
 <div class="govuk-panel
   {%- if defaultModifierClassName %} {{ defaultModifierClassName }}{% endif %}
   {%- if params.classes %} {{ params.classes }}{% endif -%}"
@@ -19,4 +37,20 @@
     {{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }}
   </div>
   {% endif %}
+  {% if isInterruption and params.actions %}
+  {% set actions = params.actions %}
+  <div class="govuk-panel__actions
+    {%- if actions.classes %} {{ actions.classes }}{% endif -%}"
+    {{- govukAttributes(actions.attributes) }}>
+
+    {%- if actions.items.length -%}
+    <div class="govuk-button-group">
+    {% for action in actions.items %}
+      {{ _panelAction(action) | safe | trim | indent(6) }}
+    {% endfor %}
+    </div>
+    {%- endif -%}
+
+  </div>
+  {% endif %}
 </div>