{
    "component": "alert",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "type": "success",
                "titleText": "A successful action has been completed.",
                "text": "This is the text below the title."
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h2 class=\"govuk-notification-banner__heading\">\n                A successful action has been completed.\n            </h2>\n    \n            <p class=\"govuk-body\">This is the text below the title.</p>\n  </div>\n</div>"
        },
        {
            "name": "with optional headingLevel param",
            "options": {
                "type": "notice",
                "headingLevel": 1,
                "titleText": "A successful action has been completed."
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h1 class=\"govuk-notification-banner__heading\">\n                A successful action has been completed.\n            </h1>\n  </div>\n</div>"
        },
        {
            "name": "with an error message",
            "options": {
                "type": "error",
                "titleHtml": "An action has been <span style=\"color: red\">completed</span> that lead to an error alert.",
                "titleText": "This should not show up.",
                "html": "This is the <strong>HTML</strong> below the title.",
                "text": "This should not show up.",
                "attributes": {
                    "dm-alert-test-key-1": "dm-alert-test-value-1",
                    "dm-alert-test-key-2": "dm-alert-test-value-2"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-notification-banner  dm-notification-banner--warning\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" dm-alert-test-key-1=\"dm-alert-test-value-1\" dm-alert-test-key-2=\"dm-alert-test-value-2\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      There is a problem\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h2 class=\"govuk-notification-banner__heading\">\n                An action has been <span style=\"color: red\">completed</span> that lead to an error alert.\n            </h2>\n    \n            <p class=\"govuk-body\">This is the <strong>HTML</strong> below the title.</p>\n  </div>\n</div>"
        }
    ]
}