{
    "component": "character-count-from-form",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "form": {
                    "name": "example",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info\"></textarea>\n  <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "with hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    },
                    "hint": "Please we realy need it"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n    Please we realy need it\n  </div>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example-with-hint\" name=\"example-with-hint\" rows=\"5\" aria-describedby=\"input-example-with-hint-info input-example-with-hint-hint\"></textarea>\n  <div id=\"input-example-with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "with custom hint",
            "options": {
                "form": {
                    "name": "example-with-hint",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    },
                    "hint": "Please we realy need it"
                },
                "hint": {
                    "html": "<p>I am a custom hint</p>"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"input-example-with-hint-hint\" class=\"govuk-hint\">\n    <p>I am a custom hint</p>\n  </div>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example-with-hint\" name=\"example-with-hint\" rows=\"5\" aria-describedby=\"input-example-with-hint-info input-example-with-hint-hint\"></textarea>\n  <div id=\"input-example-with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "with error message",
            "options": {
                "form": {
                    "name": "example-with-error",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    },
                    "errors": [
                        "Error message goes here"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-with-error\">\n    Can you provide more detail?\n  </label>\n  <p id=\"input-example-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example-with-error\" name=\"example-with-error\" rows=\"5\" aria-describedby=\"input-example-with-error-info input-example-with-error-error\"></textarea>\n  <div id=\"input-example-with-error-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "value",
            "options": {
                "form": {
                    "name": "example-with-value",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    },
                    "data": "Here are the details"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-with-value\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example-with-value\" name=\"example-with-value\" rows=\"5\" aria-describedby=\"input-example-with-value-info\">Here are the details</textarea>\n  <div id=\"input-example-with-value-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "with error and hint",
            "options": {
                "form": {
                    "name": "example-with-error-and-hint",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    },
                    "hint": "Please we realy need it",
                    "errors": [
                        "Error message goes here"
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-with-error-and-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"input-example-with-error-and-hint-hint\" class=\"govuk-hint\">\n    Please we realy need it\n  </div>\n  <p id=\"input-example-with-error-and-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example-with-error-and-hint\" name=\"example-with-error-and-hint\" rows=\"5\" aria-describedby=\"input-example-with-error-and-hint-info input-example-with-error-and-hint-hint input-example-with-error-and-hint-error\"></textarea>\n  <div id=\"input-example-with-error-and-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "classes",
            "options": {
                "form": {
                    "name": "example-classes",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    }
                },
                "classes": "app-character-count--custom-modifier"
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-classes\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"input-example-classes\" name=\"example-classes\" rows=\"5\" aria-describedby=\"input-example-classes-info\"></textarea>\n  <div id=\"input-example-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        },
        {
            "name": "attributes",
            "options": {
                "form": {
                    "name": "example-attributes",
                    "question": "Can you provide more detail?",
                    "widget": {
                        "max_length_in_words": 10
                    }
                },
                "attributes": {
                    "tabindex": -1,
                    "data-attribute": "Shulk"
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-example-attributes\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example-attributes\" name=\"example-attributes\" rows=\"5\" aria-describedby=\"input-example-attributes-info\" tabindex=\"-1\" data-attribute=\"Shulk\"></textarea>\n  <div id=\"input-example-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n    You can enter up to 10 words\n  </div>\n</div>"
        }
    ]
}