{
  "name": "Panel",
  "component": "panel",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "heading": {
          "text": "Booking complete"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "heading",
      "description": "with size M",
      "context": {
        "heading": {
          "text": "Booking complete",
          "size": "m"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--m\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "heading",
      "description": "with size L",
      "context": {
        "heading": {
          "text": "Booking complete",
          "size": "l"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "heading",
      "description": "with size XL",
      "context": {
        "heading": {
          "text": "Booking complete",
          "size": "xl"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--xl\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "heading",
      "description": "with id attribute on",
      "context": {
        "heading": {
          "text": "Booking complete",
          "size": "l",
          "id": "custom-id"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {
        "hidden": true
      },
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\" id=\"custom-id\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "interruption",
      "context": {
        "heading": {
          "text": "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
          "size": "l"
        },
        "variant": "interruption",
        "html": "<p>They had a COVID-19 vaccine on 25 September 2025.</p>\n<p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n    Continue anyway\n  </a>\n  \n  <a href=\"#\">Cancel</a>\n</div>"
      },
      "screenshot": {
        "viewports": [
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-panel nhsuk-panel--interruption\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\">\n    Jodie Brown had a COVID-19 vaccine less than 3 months ago\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    <p>They had a COVID-19 vaccine on 25 September 2025.</p>\n    <p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>\n    <div class=\"nhsuk-button-group\">\n      <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n        Continue anyway\n      </a>\n      \n      <a href=\"#\">Cancel</a>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "interruption for confirmation to cancel",
      "context": {
        "heading": {
          "text": "Confirm you want to cancel your hospital appointment",
          "size": "l"
        },
        "variant": "interruption",
        "html": "<p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>\n<p>Cancelling your appointment cannot be undone.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n    Cancel appointment\n  </a>\n  \n  <a href=\"#\">Change my weight</a>\n</div>"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel nhsuk-panel--interruption\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\">\n    Confirm you want to cancel your hospital appointment\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    <p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>\n    <p>Cancelling your appointment cannot be undone.</p>\n    <div class=\"nhsuk-button-group\">\n      <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n        Cancel appointment\n      </a>\n      \n      <a href=\"#\">Change my weight</a>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "interruption for confirmation to continue",
      "context": {
        "heading": {
          "text": "Is your weight correct?",
          "size": "l"
        },
        "variant": "interruption",
        "html": "<p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>\n<div class=\"nhsuk-button-group\">\n  <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n    Yes, this is correct\n  </a>\n  \n  <a href=\"#\">Change my weight</a>\n</div>"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel nhsuk-panel--interruption\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\">\n    Is your weight correct?\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    <p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>\n    <div class=\"nhsuk-button-group\">\n      <a class=\"nhsuk-button nhsuk-button--reverse\" data-module=\"nhsuk-button\" href=\"#\" role=\"button\" draggable=\"false\">\n        Yes, this is correct\n      </a>\n      \n      <a href=\"#\">Change my weight</a>\n    </div>\n  </div>\n</div>\n"
    },
    {
      "name": "with heading as string",
      "context": {
        "heading": "Booking complete",
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with heading classes",
      "context": {
        "heading": {
          "text": "Booking complete",
          "classes": "nhsuk-panel__heading--l"
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading nhsuk-panel__heading--l\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with heading level 1",
      "context": {
        "heading": {
          "text": "Booking complete",
          "level": 1
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with heading level 2",
      "context": {
        "heading": {
          "text": "Booking complete",
          "level": 2
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h2 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h2>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with heading level 3",
      "context": {
        "heading": {
          "text": "Booking complete",
          "level": 3
        },
        "text": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h3 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h3>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with HTML",
      "context": {
        "heading": {
          "text": "Booking complete"
        },
        "html": "We have sent you a confirmation email"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\n    We have sent you a confirmation email\n  </div>\n</div>\n"
    },
    {
      "name": "with HTML via call block",
      "context": {
        "heading": {
          "text": "Booking complete"
        }
      },
      "callBlock": "We have sent you a confirmation email",
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-panel\">\n  <h1 class=\"nhsuk-panel__heading\">\n    Booking complete\n  </h1>\n  <div class=\"nhsuk-panel__body\">\nWe have sent you a confirmation email\n  </div>\n</div>\n"
    }
  ]
}