digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
165 lines (164 loc) • 40.5 kB
JSON
{
"component": "list-input",
"fixtures": [
{
"name": "default",
"options": {
"addButtonName": "requirement",
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"id": "my-list",
"labelPrefix": "Requirements'",
"maxItems": 10,
"name": "requirements"
},
"hidden": false,
"description": "With JavaScript enabled, a list input should display at least two inputs, including at least one empty input.",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\" \" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work?\n </legend>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-3\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-4\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">4</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-4\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">4</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-5\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">5</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-5\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">5</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-6\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">6</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-6\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">6</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-7\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">7</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-7\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">7</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-8\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">8</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-8\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">8</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-9\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">9</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-9\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">9</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-10\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">10</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-10\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
},
{
"name": "with existing values",
"options": {
"addButtonName": "requirement",
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"id": "my-list",
"labelPrefix": "Requirements'",
"maxItems": 10,
"name": "requirements",
"items": [
{
"value": "Professionally initiate innovative partnerships."
},
{
"value": "Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer."
}
]
},
"hidden": false,
"description": "Any existing values should be displayed, along with one extra empty input.",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\" \" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work?\n </legend>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list\" name=\"requirements\" type=\"text\" value=\"Professionally initiate innovative partnerships.\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2\" name=\"requirements\" type=\"text\" value=\"Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer.\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-3\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-4\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">4</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-4\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">4</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-5\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">5</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-5\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">5</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-6\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">6</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-6\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">6</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-7\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">7</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-7\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">7</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-8\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">8</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-8\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">8</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-9\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">9</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-9\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">9</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-10\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">10</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-10\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">10</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
},
{
"name": "with hint",
"options": {
"id": "my-list-2",
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"name": "requirements",
"addButtonName": "requirement",
"hint": {
"text": "Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)"
},
"maxItems": 3,
"labelPrefix": "Requirements'",
"items": [
{
"value": "Professionally initiate innovative partnerships."
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\"my-list-2-hint \" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work?\n </legend>\n <div id=\"my-list-2-hint\" class=\"govuk-hint dm-list-input__hint \">\n Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)\n </div>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2\" name=\"requirements\" type=\"text\" value=\"Professionally initiate innovative partnerships.\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-2\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-3\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
},
{
"name": "is optional",
"options": {
"id": "my-list-2",
"optional": true,
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"name": "requirements",
"addButtonName": "requirement",
"maxItems": 3,
"labelPrefix": "Requirements'",
"items": [
{
"value": "Professionally initiate innovative partnerships."
}
]
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\" \" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work? (Optional)\n </legend>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2\" name=\"requirements\" type=\"text\" value=\"Professionally initiate innovative partnerships.\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-2\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-3\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
},
{
"name": "with error",
"options": {
"id": "my-list-2",
"errorMessage": {
"text": "Enter at least one requirement"
},
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"labelPrefix": "Requirements'",
"name": "requirements",
"addButtonName": "requirement",
"maxItems": 3
},
"hidden": false,
"description": "An error at the component-level can be defined.",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\" my-list-2-error\" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work?\n </legend>\n <p id=\"my-list-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Enter at least one requirement\n </p>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-2\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-2-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-2-3\" name=\"requirements\" type=\"text\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
},
{
"name": "with error for specific fields",
"options": {
"id": "my-list-3",
"fieldset": {
"legend": {
"text": "What requirements are essential to carry out the work?"
}
},
"hint": {
"text": "Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)"
},
"name": "requirements",
"addButtonName": "requirement",
"labelPrefix": "Requirements'",
"maxItems": 3,
"items": [
{
"value": "Professionally initiate innovative partnerships."
},
{
"value": "Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer.",
"errorMessage": {
"text": "Feature must be 5 words or fewer"
}
},
{
"value": "Saturday Night Fever",
"errorMessage": {
"text": "Enter a number"
}
}
]
},
"hidden": false,
"description": "An error for each input can be defined.",
"previewLayoutModifiers": [],
"html": "<div class=\"dm-list-input\">\n<fieldset class=\"govuk-fieldset\" aria-describedby=\"my-list-3-hint \" data-module=\"dm-list-input\">\n <legend class=\"govuk-fieldset__legend dm-list-input__legend\">\n What requirements are essential to carry out the work?\n </legend>\n <div id=\"my-list-3-hint\" class=\"govuk-hint dm-list-input__hint \">\n Include the technical features of your product, eg graphical workflow, remote access. (Maximum 10 words per feature. Maximum 10 features.)\n </div>\n \n\n <div class=\"dm-list-input__item-container\" role=\"region\" aria-live=\"assertive\">\n<div class=\"dm-list-input__item dm-list-input__item--visible\"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">1</span>.\n </label>\n <input class=\"govuk-input govuk-input dm-list-input__item-input\" id=\"my-list-3\" name=\"requirements\" type=\"text\" value=\"Professionally initiate innovative partnerships.\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">1</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible dm-list-input__item--error \"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group govuk-form-group--error dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-3-2\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">2</span>.\n </label>\n <p id=\"my-list-3-2-error\" class=\"govuk-error-message dm-list-input-error-message \">\n <span class=\"govuk-visually-hidden\">Error:</span> Feature must be 5 words or fewer\n </p>\n <input class=\"govuk-input govuk-input dm-list-input__item-input govuk-input--error\" id=\"my-list-3-2\" name=\"requirements\" type=\"text\" value=\"Synergistically iterate scalable leadership skills without competitive testing procedures. Quickly envisioneer.\" aria-describedby=\"my-list-3-2-error\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">2</span></span>\n</button>\n </div>\n </div>\n<div class=\"dm-list-input__item dm-list-input__item--visible dm-list-input__item--error \"><div class=\"dm-list-input__row\">\n <div class=\"govuk-form-group govuk-form-group--error dm-list-input__form-group\">\n <label class=\"govuk-label dm-list-input__item-label \" for=\"my-list-3-3\">\n <span class=\"govuk-visually-hidden\">What requirements are essential to carry out the work?. Number </span><span class=\"dm-list-input__counter\">3</span>.\n </label>\n <p id=\"my-list-3-3-error\" class=\"govuk-error-message dm-list-input-error-message \">\n <span class=\"govuk-visually-hidden\">Error:</span> Enter a number\n </p>\n <input class=\"govuk-input govuk-input dm-list-input__item-input govuk-input--error\" id=\"my-list-3-3\" name=\"requirements\" type=\"text\" value=\"Saturday Night Fever\" aria-describedby=\"my-list-3-3-error\">\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-remove dm-list-input__item-remove--hidden\" data-module=\"govuk-button\">\n Remove <span class=\"govuk-visually-hidden\">entry number <span class=\"dm-list-input__counter\">3</span></span>\n</button>\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-input__item-add dm-list-input__item-add--hidden\" data-module=\"govuk-button\">\n Add another requirement (<span class=\"dm-list-input__js-remaining-counter\">0</span> remaining)\n</button>\n\n</fieldset>\n</div>"
}
]
}