{
    "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": [
                    {
                        "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",
            "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>"
        }
    ]
}