{
  "component": "fieldset",
  "fixtures": [
    {
      "name": "plain fieldset",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>"
      },
      "html": "<div class=\"tna-fieldset\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "heading level",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "headingLevel": 4,
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>"
      },
      "html": "<div class=\"tna-fieldset\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><h4 class=\"tna-fieldset__heading tna-heading-m\">Fieldset</h4></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with hint",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "hint": "This is a <strong>hint</strong>",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>"
      },
      "html": "<div class=\"tna-fieldset\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"fieldset-hint\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><p id=\"fieldset-hint\" class=\"tna-fieldset__hint\">This is a <strong>hint</strong></p><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with smaller hint",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "hint": "This is a <strong>hint</strong>",
        "smallerHint": true,
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>"
      },
      "html": "<div class=\"tna-fieldset tna-fieldset--small-hint\"><fieldset class=\"tna-fieldset__inner\" aria-describedby=\"fieldset-hint\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><p id=\"fieldset-hint\" class=\"tna-fieldset__hint\">This is a <strong>hint</strong></p><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with fieldset classes",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>",
        "fieldsetClasses": "checkboxes__test-class"
      },
      "html": "<div class=\"tna-fieldset\"><fieldset class=\"tna-fieldset__inner checkboxes__test-class\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with fieldset attributes",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>",
        "fieldsetAttributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-fieldset\"><fieldset class=\"tna-fieldset__inner\" data-testattribute=\"foobar\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with classes",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>",
        "classes": "checkboxes__test-class"
      },
      "html": "<div class=\"tna-fieldset checkboxes__test-class\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "legend": "Fieldset",
        "headingSize": "m",
        "id": "fieldset",
        "name": "fieldset",
        "html": "<div>CONTENT</div>",
        "attributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-fieldset\" data-testattribute=\"foobar\"><fieldset class=\"tna-fieldset__inner\"><legend class=\"tna-fieldset__legend\"><span class=\"tna-fieldset__heading tna-heading-m\">Fieldset</span></legend><div class=\"tna-fieldset__body\"><div>CONTENT</div></div></fieldset></div>"
    }
  ]
}