digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
209 lines (208 loc) • 14.9 kB
JSON
{
"component": "question-character-count",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\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 500 words\n </div>\n</div>"
},
{
"name": "with hint",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"hint": "This is a hint for the question"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"question_advice": "Here is the question advice"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n Here is the question advice\n </div>\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with question advice and hint",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"question_advice": "<p class=\"govuk-body-l\">Here is the question advice</p>\n",
"hint": "<div class=\"hint-in-html\">This is a hint for the question</div>\n"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n <div class=\"govuk-body\">\n <p class=\"govuk-body-l\">Here is the question advice</p>\n \n </div>\n <div class=\"hint-in-html\">This is a hint for the question</div>\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with optional",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"optional": true
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question (optional)\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 500 words\n </div>\n</div>"
},
{
"name": "with optional text",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"optional": true,
"optional_text": "if applicable"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question (if applicable)\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 500 words\n </div>\n</div>"
},
{
"name": "with data",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info\">Here is the value</textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with error message",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with hint and error message",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500,
"hint": "This is a hint for the question"
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <div id=\"input-example-hint\" class=\"govuk-hint\">\n This is a hint for the question\n </div>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-hint input-example-error\"></textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with previous framework",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count dm-form-group--declaration-reuse\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Notice:</span> This answer is from your G-Cloud 12 declaration\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\">Here is the value</textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
},
{
"name": "with previous framework without data",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\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 500 words\n </div>\n</div>"
},
{
"name": "with previous framework and error message",
"options": {
"question": {
"id": "example",
"question": "Here is the service question",
"max_length_in_words": 500
},
"data": {
"example": "Here is the value"
},
"errors": {
"example": {
"message": "You must enter into the textarea field"
}
},
"frameworkReusedFrom": "G-Cloud 12"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"500\">\n <label class=\"govuk-label govuk-label--m\" for=\"input-example\">\n Here is the service question\n </label>\n <p id=\"input-example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter into the textarea field\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"input-example\" name=\"example\" rows=\"5\" aria-describedby=\"input-example-info input-example-error\">Here is the value</textarea>\n <div id=\"input-example-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 500 words\n </div>\n</div>"
}
]
}