defra_ruby_template 5.11.0 → 6.4.0

data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -1,58 +1,5 @@
-@include govuk-exports("govuk/component/panel") {
-  .govuk-panel {
-    @include govuk-font($size: 36);
+@use "../../custom-properties";
+@use "mixin";
 
-    box-sizing: border-box;
+@include mixin.styles;
 
-    margin-bottom: govuk-spacing(3);
-    padding: govuk-spacing(7) - $govuk-border-width;
-
-    border: $govuk-border-width solid transparent;
-
-    text-align: center;
-
-    @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
-
-      // This is an if-all-else-fails attempt to stop long words from
-      // overflowing the container on very narrow viewports by forcing them to
-      // break and wrap instead. This overflowing is more likely to happen when
-      // user increases text size on a mobile eg. using iOS Safari text resize
-      // controls.
-      //
-      // The overflowing is a particular problem with the panel component since
-      // it uses white text: when the text overflows the container, it is
-      // invisible on the white (page) background. When the text in our other
-      // components overflow, the user might have to scroll horizontally to view
-      // it but the the text remains legible.
-      overflow-wrap: break-word;
-
-      // Support IE (autoprefixer doesn't add this as it's not a prefix)
-      word-wrap: break-word;
-    }
-  }
-
-  .govuk-panel--confirmation {
-    color: govuk-colour("white");
-    background: govuk-colour("green");
-
-    @include govuk-media-query($media-type: print) {
-      border-color: currentcolor;
-      color: $govuk-print-text-colour;
-      background: none;
-    }
-  }
-
-  .govuk-panel__title {
-    @include govuk-font-size($size: 48);
-    @include govuk-typography-weight-bold;
-    margin-top: 0;
-    margin-bottom: govuk-spacing(6);
-  }
-
-  .govuk-panel__title:last-child {
-    margin-bottom: 0;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/panel/_mixin.scss

@@ -0,0 +1,94 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-panel {
+    @include base.govuk-font($size: 36);
+
+    box-sizing: border-box;
+
+    margin-bottom: base.govuk-spacing(3);
+    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;
+
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      padding: base.govuk-spacing(4) - base.$govuk-border-width;
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
+
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
+      //
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
+      overflow-wrap: break-word;
+    }
+  }
+
+  .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);
+  }
+
+  // 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__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);
+  }
+
+  .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);
+    }
+  }
+
+  @media print {
+    .govuk-panel {
+      --govuk-text-colour: inherit;
+      border-color: currentcolor;
+      background: none;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/panel/_panel.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("panel");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/panel/fixtures.json

@@ -5,26 +5,89 @@
             "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<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",
+                "actions": {
+                    "items": [
+                        {
+                            "text": "Yes, this is correct",
+                            "type": "button"
+                        },
+                        {
+                            "text": "No, change my age",
+                            "href": "#"
+                        }
+                    ]
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
-            "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--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>\n  <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n        Yes, this is correct\n      </button>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">No, change my age</a>\n    </div></div>\n</div>"
         },
         {
-            "name": "custom heading level",
+            "name": "interruption-with-content-with-long-line-length",
             "options": {
-                "titleText": "Application complete",
-                "headingLevel": 2,
-                "text": "Your reference number: HDJ2123F"
+                "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",
+                "actions": {
+                    "items": [
+                        {
+                            "text": "Are you sure you want to change this?",
+                            "type": "submit",
+                            "attributes": {
+                                "form": "the-form-id"
+                            }
+                        },
+                        {
+                            "text": "Go back to application",
+                            "href": "#"
+                        }
+                    ]
+                }
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "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>"
+            "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>\n  <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\" form=\"the-form-id\">\n        Are you sure you want to change this?\n      </button>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Go back to application</a>\n    </div></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",
+                "actions": [
+                    {
+                        "text": "Continue to other sections",
+                        "type": "submit"
+                    },
+                    {
+                        "text": "Go back to application",
+                        "href": "#"
+                    }
+                ]
+            },
+            "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>\n  <div class=\"govuk-panel__actions\"></div>\n</div>"
         },
         {
             "name": "title html as text",
@@ -34,7 +97,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n</div>"
         },
@@ -46,7 +109,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n</div>"
         },
@@ -58,7 +121,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n</div>"
         },
@@ -70,7 +133,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "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>"
         },
@@ -83,7 +146,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
@@ -99,7 +162,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
@@ -110,9 +173,179 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n</div>"
+        },
+        {
+            "name": "custom heading level",
+            "options": {
+                "titleText": "Application complete",
+                "headingLevel": 2,
+                "text": "Your reference number: HDJ2123F"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "confirmation, with actions",
+            "options": {
+                "titleText": "Is your age correct?",
+                "actions": {
+                    "items": [
+                        {
+                            "type": "button",
+                            "text": "Yes, this is correct"
+                        },
+                        {
+                            "href": "#",
+                            "text": "No, change my age"
+                        }
+                    ]
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Is your age correct?\n  </h1>\n</div>"
+        },
+        {
+            "name": "interruption, with actions classes and attributes",
+            "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",
+                "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"
+                        }
+                    ]
+                }
+            },
+            "hidden": true,
+            "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>\n  <div class=\"govuk-panel__actions extra-class one-more-class\" data-test=\"1\" data-other-test=\"yes\"><div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n        Yes, this is correct\n      </button>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">No, change my age</a>\n    </div></div>\n</div>"
+        },
+        {
+            "name": "interruption, submit action",
+            "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",
+                "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"
+                        }
+                    ]
+                }
+            },
+            "hidden": true,
+            "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>\n  <div class=\"govuk-panel__actions\"><div class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"govuk-button govuk-button--inverse extra-class one-more-class\" data-module=\"govuk-button\" form=\"test-target-element\" name=\"acknowledged\" value=\"\">\n        Yes, this is correct\n      </button>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">No, change my age</a>\n    </div></div>\n</div>"
+        },
+        {
+            "name": "interruption, button link",
+            "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",
+                "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"
+                        }
+                    ]
+                }
+            },
+            "hidden": true,
+            "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>\n  <div class=\"govuk-panel__actions extra-class one-more-class\" data-test=\"1\" data-other-test=\"yes\"><div class=\"govuk-button-group\">\n      <a href=\"?acknowledged=true\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n        Yes, this is correct\n      </a>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">No, change my age</a>\n    </div></div>\n</div>"
+        },
+        {
+            "name": "interruption, no actions",
+            "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"
+            },
+            "hidden": true,
+            "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>\n</div>"
+        },
+        {
+            "name": "interruption, no actions items",
+            "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",
+                "actions": {
+                    "classes": "extra-class"
+                }
+            },
+            "hidden": true,
+            "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>\n  <div class=\"govuk-panel__actions extra-class\"></div>\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/dist/govuk/components/panel/macro-options.json

@@ -46,5 +46,63 @@
         "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."
+            }
+        ]
     }
 ]

data/node_modules/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>

data/node_modules/govuk-frontend/dist/govuk/components/panel/template-interruption-with-content-with-long-line-length.html

@@ -0,0 +1,17 @@
+<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>
+  <div class="govuk-panel__actions"><div class="govuk-button-group">
+      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button" form="the-form-id">
+        Are you sure you want to change this?
+      </button>
+      <a class="govuk-link govuk-link--inverse" href="#">Go back to application</a>
+    </div></div>
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/panel/template-interruption-with-headings-content-and-lists.html

@@ -0,0 +1,18 @@
+<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>
+  <div class="govuk-panel__actions"></div>
+</div>

data/node_modules/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>
+  <div class="govuk-panel__actions"><div class="govuk-button-group">
+      <button type="button" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+        Yes, this is correct
+      </button>
+      <a class="govuk-link govuk-link--inverse" href="#">No, change my age</a>
+    </div></div>
+</div>