{
  "component": "date-search",
  "fixtures": [
    {
      "name": "plain date search",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\"></div></div>"
    },
    {
      "name": "with a preselected value",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "value": "1986-09-24"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"1986-09-24\"></div></div>"
    },
    {
      "name": "with a hint",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "hint": "The earliest date of the record."
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><p id=\"date-hint\" class=\"tna-form-item__hint\">The earliest date of the record.</p><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\" aria-describedby=\"date-hint \"></div></div>"
    },
    {
      "name": "with an error",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "error": {
          "text": "Date is not valid"
        }
      },
      "html": "<div class=\"tna-form-item tna-form-item--error\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><p id=\"date-error\" class=\"tna-form-item__error\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\" aria-describedby=\" date-error\"></div></div>"
    },
    {
      "name": "max width date search",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "maxWidth": true
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search tna-date-search--max-width\" name=\"date\" value=\"\"></div></div>"
    },
    {
      "name": "heading level",
      "options": {
        "label": "Enter a start date",
        "headingLevel": 4,
        "headingSize": "m",
        "id": "date",
        "name": "date"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><h4 class=\"tna-form-item__label tna-heading-m\"><label for=\"date\">Enter a start date</label></h4></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\"></div></div>"
    },
    {
      "name": "with classes",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "classes": "test-class"
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search test-class\" name=\"date\" value=\"\"></div></div>"
    },
    {
      "name": "with attributes",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "attributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-form-item\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\" data-testattribute=\"foobar\"></div></div>"
    },
    {
      "name": "with form group classes",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "formItemClasses": "test-class"
      },
      "html": "<div class=\"tna-form-item test-class\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\"></div></div>"
    },
    {
      "name": "with form group attributes",
      "options": {
        "label": "Enter a start date",
        "headingSize": "m",
        "id": "date",
        "name": "date",
        "formItemAttributes": {
          "data-testattribute": "foobar"
        }
      },
      "html": "<div class=\"tna-form-item\" data-testattribute=\"foobar\"><div class=\"tna-form-item__header\"><label class=\"tna-form-item__label tna-heading-m\" for=\"date\">Enter a start date</label></div><div class=\"tna-form-item__body\"><input type=\"date\" id=\"date\" class=\"tna-date-search\" name=\"date\" value=\"\"></div></div>"
    }
  ]
}