digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
152 lines (151 loc) • 10.3 kB
JSON
{
"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>"
}
]
}