govuk_tech_docs 6.6.0.rc.local.tested → 6.6.0

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

@@ -0,0 +1,353 @@
+{
+    "component": "panel",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "titleHtml": "Application complete",
+                "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": "",
+            "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=\"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-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>\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": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "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": {
+                    "items": [
+                        {
+                            "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 class=\"govuk-button-group\">\n      <button type=\"submit\" class=\"govuk-button govuk-button--inverse\" data-module=\"govuk-button\">\n        Continue to other sections\n      </button>\n      <a class=\"govuk-link govuk-link--inverse\" href=\"#\">Go back to application</a>\n    </div></div>\n</div>"
+        },
+        {
+            "name": "title html as text",
+            "options": {
+                "titleText": "Application <strong>not</strong> complete",
+                "text": "Please complete form 1"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "title html",
+            "options": {
+                "titleHtml": "Application <strong>not</strong> complete",
+                "html": "Please complete <strong>form 1</strong>"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "body html as text",
+            "options": {
+                "titleText": "Application complete",
+                "text": "Your reference number<br><strong>HDJ2123F</strong>"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "body html",
+            "options": {
+                "titleText": "Application complete",
+                "html": "Your reference number<br><strong>HDJ2123F</strong>"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "titleText": "Application complete",
+                "text": "Your reference number is HDJ2123F",
+                "classes": "extra-class one-more-class"
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "titleText": "Application complete",
+                "text": "Your reference number is HDJ2123F",
+                "attributes": {
+                    "first-attribute": "foo",
+                    "second-attribute": "bar"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "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>"
+        },
+        {
+            "name": "title with no body text",
+            "options": {
+                "titleText": "Application complete"
+            },
+            "hidden": true,
+            "description": "",
+            "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

@@ -0,0 +1,108 @@
+[
+    {
+        "name": "titleText",
+        "type": "string",
+        "required": true,
+        "description": "If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored."
+    },
+    {
+        "name": "titleHtml",
+        "type": "string",
+        "required": true,
+        "description": "If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored."
+    },
+    {
+        "name": "headingLevel",
+        "type": "integer",
+        "required": false,
+        "description": "Heading level, from `1` to `6`. Default is `1`."
+    },
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the panel content. If `html` is provided, the `text` option will be ignored."
+    },
+    {
+        "name": "caller",
+        "type": "nunjucks-block",
+        "required": false,
+        "description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the panel container."
+    },
+    {
+        "name": "attributes",
+        "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/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukPanel(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/dist/govuk/components/panel/template-default.html

@@ -0,0 +1,8 @@
+<div class="govuk-panel govuk-panel--confirmation">
+  <h1 class="govuk-panel__title">
+    Application complete
+  </h1>
+  <div class="govuk-panel__body">
+    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,23 @@
+<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 class="govuk-button-group">
+      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
+        Continue to other sections
+      </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.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>

data/node_modules/govuk-frontend/dist/govuk/components/panel/template.njk

@@ -0,0 +1,56 @@
+{% from "../../macros/attributes.njk" import govukAttributes -%}
+{% from "../button/macro.njk" import govukButton -%}
+
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
+
+{%- 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 -%}
+
+{%- 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 -%}"
+  {{- govukAttributes(params.attributes) }}>
+  <h{{ headingLevel }} class="govuk-panel__title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h{{ headingLevel }}>
+  {% if caller or params.html or params.text %}
+  <div class="govuk-panel__body">
+    {{ 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>