{
  "component": "phase-banner",
  "fixtures": [
    {
      "name": "simple",
      "options": {
        "phase": "beta",
        "message": "This is a new service – <a href=\"#\">give us your feedback</a> to help improve it."
      },
      "html": "<div class=\"tna-phase-banner\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><strong class=\"tna-phase-banner__phase\"><span class=\"tna-visually-hidden\">Service phase:</span>Beta</strong></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href=\"#\">give us your feedback</a> to help improve it.</p></div></div></div>"
    },
    {
      "name": "capital letters",
      "options": {
        "phase": "BETA",
        "message": "Message"
      },
      "html": "<div class=\"tna-phase-banner\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><strong class=\"tna-phase-banner__phase\"><span class=\"tna-visually-hidden\">Service phase:</span>Beta</strong></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>"
    },
    {
      "name": "with classes",
      "options": {
        "phase": "live",
        "message": "Message",
        "classes": "tna-phase-banner--fixture"
      },
      "html": "<div class=\"tna-phase-banner tna-phase-banner--fixture\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><strong class=\"tna-phase-banner__phase\"><span class=\"tna-visually-hidden\">Service phase:</span>Live</strong></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "phase": "live",
        "message": "Message",
        "attributes": {
          "data-fixturetest": "pass"
        }
      },
      "html": "<div class=\"tna-phase-banner\" data-fixturetest=\"pass\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><strong class=\"tna-phase-banner__phase\"><span class=\"tna-visually-hidden\">Service phase:</span>Live</strong></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>"
    }
  ]
}