{
  "name": "Password input",
  "component": "password-input",
  "fixtures": [
    {
      "name": "default",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "disabled": true
      },
      "screenshot": true,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" disabled autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" disabled aria-label=\"Show password\" aria-disabled=\"true\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled button",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "button": {
          "disabled": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" disabled aria-label=\"Show password\" aria-disabled=\"true\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "disabled with enabled button",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "disabled": true,
        "button": {
          "disabled": false
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" disabled autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with autocomplete attribute",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "id": "new-password",
        "name": "example",
        "autocomplete": "new-password"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"new-password\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"new-password\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"new-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"new-password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with button double click not prevented",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "button": {
          "preventDoubleClick": false
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" data-prevent-double-click=\"false\" type=\"button\" aria-label=\"Show password\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with button double click prevented",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "name": "example",
        "button": {
          "preventDoubleClick": true
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"example\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"example\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" data-prevent-double-click=\"true\" type=\"button\" aria-label=\"Show password\" aria-controls=\"example\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with error message",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "errorMessage": {
          "text": "Enter a password"
        },
        "id": "with-error-message",
        "name": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-error-message\">\n      Password\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-error-message-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter a password\n  </span>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--error nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"with-error-message\" name=\"example\" type=\"password\" spellcheck=\"false\" aria-describedby=\"with-error-message-error\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"with-error-message\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with error message and hint",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "hint": {
          "text": "It probably has some letters, numbers and maybe even some symbols in it"
        },
        "errorMessage": {
          "text": "Enter a password"
        },
        "id": "with-error-message",
        "name": "example"
      },
      "screenshot": {
        "viewports": [
          "watch",
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-error-message\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-error-message-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it\n  </div>\n  <span class=\"nhsuk-error-message\" id=\"with-error-message-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter a password\n  </span>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--error nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"with-error-message\" name=\"example\" type=\"password\" spellcheck=\"false\" aria-describedby=\"with-error-message-hint with-error-message-error\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"with-error-message\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with hint",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "hint": {
          "text": "It probably has some letters, numbers and maybe even some symbols in it"
        },
        "id": "with-hint-text",
        "name": "example"
      },
      "screenshot": {
        "viewports": [
          "watch",
          "mobile",
          "tablet",
          "desktop"
        ]
      },
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"with-hint-text\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-hint\" id=\"with-hint-text-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it\n  </div>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"with-hint-text\" name=\"example\" type=\"password\" spellcheck=\"false\" aria-describedby=\"with-hint-text-hint\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"with-hint-text\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "without page heading",
      "context": {
        "label": {
          "text": "Password"
        },
        "id": "without-heading",
        "name": "example"
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <label class=\"nhsuk-label\" for=\"without-heading\">\n    Password\n  </label>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"without-heading\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"without-heading\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with prefix",
      "context": {
        "label": {
          "text": "Secret code",
          "size": "m",
          "isPageHeading": true
        },
        "prefix": {
          "text": "PIN"
        },
        "id": "with-prefix",
        "name": "example",
        "value": "3.14159",
        "width": 5,
        "code": true,
        "button": {
          "variant": "brand"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"with-prefix\">\n      Secret code\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">PIN</div>\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--width-5 nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"with-prefix\" name=\"example\" type=\"password\" spellcheck=\"false\" value=\"3.14159\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"with-prefix\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with prefix and error message",
      "context": {
        "label": {
          "text": "Secret code",
          "size": "m",
          "isPageHeading": true
        },
        "prefix": {
          "text": "PIN"
        },
        "errorMessage": {
          "text": "Enter secret code"
        },
        "id": "with-prefix",
        "name": "example",
        "width": 5,
        "code": true,
        "button": {
          "variant": "brand"
        }
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-form-group--error nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--m\" for=\"with-prefix\">\n      Secret code\n    </label>\n  </h1>\n  <span class=\"nhsuk-error-message\" id=\"with-prefix-error\">\n    <span class=\"nhsuk-u-visually-hidden\">Error:</span> Enter secret code\n  </span>\n  <div class=\"nhsuk-input-wrapper\">\n    <div class=\"nhsuk-input-wrapper__prefix\" aria-hidden=\"true\">PIN</div>\n    <input class=\"nhsuk-input nhsuk-input--code nhsuk-input--error nhsuk-input--width-5 nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"with-prefix\" name=\"example\" type=\"password\" spellcheck=\"false\" aria-describedby=\"with-prefix-error\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--brand nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"with-prefix\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with translations",
      "context": {
        "label": {
          "text": "Cyfrinair",
          "size": "l",
          "isPageHeading": true
        },
        "id": "password-translated",
        "name": "example",
        "showPasswordText": "Datguddia",
        "hidePasswordText": "Cuddio",
        "showPasswordAriaLabelText": "Datgelu cyfrinair",
        "hidePasswordAriaLabelText": "Cuddio cyfrinair",
        "passwordShownAnnouncementText": "Mae eich cyfrinair yn weladwy.",
        "passwordHiddenAnnouncementText": "Mae eich cyfrinair wedi'i guddio."
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\" data-i18n.show-password=\"Datguddia\" data-i18n.hide-password=\"Cuddio\" data-i18n.show-password-aria-label=\"Datgelu cyfrinair\" data-i18n.hide-password-aria-label=\"Cuddio cyfrinair\" data-i18n.password-shown-announcement=\"Mae eich cyfrinair yn weladwy.\" data-i18n.password-hidden-announcement=\"Mae eich cyfrinair wedi&#39;i guddio.\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"password-translated\">\n      Cyfrinair\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"password-translated\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Datgelu cyfrinair\" aria-controls=\"password-translated\" hidden>\n      Datguddia\n    </button>\n  </div>\n</div>"
    },
    {
      "name": "with width",
      "context": {
        "label": {
          "text": "Password",
          "size": "l",
          "isPageHeading": true
        },
        "id": "width-class",
        "name": "example",
        "width": 10
      },
      "screenshot": false,
      "options": {},
      "html": "<div class=\"nhsuk-form-group nhsuk-password-input\" data-module=\"nhsuk-password-input\">\n  <h1 class=\"nhsuk-label-wrapper\">\n    <label class=\"nhsuk-label nhsuk-label--l\" for=\"width-class\">\n      Password\n    </label>\n  </h1>\n  <div class=\"nhsuk-input-wrapper\">\n    <input class=\"nhsuk-input nhsuk-input--width-10 nhsuk-password-input__input nhsuk-js-password-input-input\" id=\"width-class\" name=\"example\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle\" data-module=\"nhsuk-button\" type=\"button\" aria-label=\"Show password\" aria-controls=\"width-class\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
    }
  ]
}