digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
138 lines (137 loc) • 16 kB
JSON
{
"component": "option-select",
"fixtures": [
{
"name": "default",
"options": {
"name": "default",
"title": "Default",
"items": [
{
"text": "Option 1",
"name": "option-1",
"value": "1"
},
{
"text": "Option 2",
"name": "option-2",
"value": "2"
},
{
"text": "Option 3",
"name": "option-3",
"value": "3"
},
{
"text": "Option 4",
"name": "option-4",
"value": "4"
},
{
"text": "Option 5",
"name": "option-5",
"value": "5"
}
],
"optionsContainerId": "default-options"
},
"hidden": false,
"description": "A basic option select",
"previewLayoutModifiers": [],
"html": "<div \n class=\"dm-option-select\"\n data-module=\"dm-option-select\"\n>\n <h2 class=\"dm-option-select__heading js-container-heading\">\n <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-default\">Default</span>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n </h2>\n\n <div role=\"group\" aria-labelledby=\"option-select-title-default\" class=\"dm-option-select__container js-options-container\" id=\"default-options\" tabindex=\"-1\">\n <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n Default\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"default\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"default\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"default-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"default-3\" name=\"option-3\" type=\"checkbox\" value=\"3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-3\">\n Option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"default-4\" name=\"option-4\" type=\"checkbox\" value=\"4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-4\">\n Option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"default-5\" name=\"option-5\" type=\"checkbox\" value=\"5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"default-5\">\n Option 5\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n </div>\n </div>\n</div>"
},
{
"name": "with options collapsed",
"options": {
"name": "collapsed",
"title": "Collapsed on load",
"items": [
{
"text": "Option 1",
"name": "option-1",
"value": "1"
},
{
"text": "Option 2",
"name": "option-2",
"value": "2"
},
{
"text": "Option 3",
"name": "option-3",
"value": "3"
},
{
"text": "Option 4",
"name": "option-4",
"value": "4"
},
{
"text": "Option 5",
"name": "option-5",
"value": "5"
}
],
"optionsContainerId": "collapsed-options",
"closedOnLoad": true
},
"hidden": false,
"description": "An option select with the property closed_on_load set to true should collapse by default.",
"previewLayoutModifiers": [],
"html": "<div \n class=\"dm-option-select\"\n data-module=\"dm-option-select\"\n data-closed-on-load=\"true\" >\n <h2 class=\"dm-option-select__heading js-container-heading\">\n <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-collapsed\">Collapsed on load</span>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n </h2>\n\n <div role=\"group\" aria-labelledby=\"option-select-title-collapsed\" class=\"dm-option-select__container js-options-container\" id=\"collapsed-options\" tabindex=\"-1\">\n <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n Collapsed on load\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"collapsed\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"collapsed-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-2\">\n Option 2\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"collapsed-3\" name=\"option-3\" type=\"checkbox\" value=\"3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-3\">\n Option 3\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"collapsed-4\" name=\"option-4\" type=\"checkbox\" value=\"4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-4\">\n Option 4\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"collapsed-5\" name=\"option-5\" type=\"checkbox\" value=\"5\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"collapsed-5\">\n Option 5\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n </div>\n </div>\n</div>"
},
{
"name": "with few options",
"options": {
"name": "short",
"title": "With few options",
"items": [
{
"text": "Option 1",
"name": "option-1",
"value": "1"
},
{
"text": "Option 2",
"name": "option-2",
"value": "2"
}
],
"optionsContainerId": "short-options"
},
"hidden": false,
"description": "A short option select",
"previewLayoutModifiers": [],
"html": "<div \n class=\"dm-option-select\"\n data-module=\"dm-option-select\"\n>\n <h2 class=\"dm-option-select__heading js-container-heading\">\n <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-short\">With few options</span>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n </h2>\n\n <div role=\"group\" aria-labelledby=\"option-select-title-short\" class=\"dm-option-select__container js-options-container\" id=\"short-options\" tabindex=\"-1\">\n <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n With few options\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"short\" name=\"option-1\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"short\">\n Option 1\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"short-2\" name=\"option-2\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"short-2\">\n Option 2\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n </div>\n </div>\n</div>"
},
{
"name": "with option pre checked",
"options": {
"name": "with_checked_value_set",
"title": "List of options",
"optionsContainerId": "list_of_vegetables",
"items": [
{
"value": "potatoes",
"text": "Potatoes",
"checked": true
},
{
"value": "carrots",
"text": "Carrots",
"id": "carrots"
},
{
"value": "mash",
"text": "Mash",
"id": "mash"
}
]
},
"hidden": false,
"description": "An option select with an option pre-checked",
"previewLayoutModifiers": [],
"html": "<div \n class=\"dm-option-select\"\n data-module=\"dm-option-select\"\n>\n <h2 class=\"dm-option-select__heading js-container-heading\">\n <span class=\"dm-option-select__title js-container-button\" id=\"option-select-title-with_checked_value_set\">List of options</span>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--up\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z\"/></svg>\n <svg version=\"1.1\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\" class=\"dm-option-select__icon dm-option-select__icon--down\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z\"/></svg>\n </h2>\n\n <div role=\"group\" aria-labelledby=\"option-select-title-with_checked_value_set\" class=\"dm-option-select__container js-options-container\" id=\"list_of_vegetables\" tabindex=\"-1\">\n <div class=\"dm-option-select__container-inner js-auto-height-inner\">\n <div class=\"govuk-form-group\">\n <fieldset class=\"govuk-fieldset\">\n <legend class=\"govuk-fieldset__legend govuk-visually-hidden\">\n List of options\n </legend>\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with_checked_value_set\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"potatoes\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with_checked_value_set\">\n Potatoes\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"carrots\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"carrots\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"carrots\">\n Carrots\n </label>\n </div>\n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"mash\" name=\"with_checked_value_set\" type=\"checkbox\" value=\"mash\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"mash\">\n Mash\n </label>\n </div>\n </div>\n </fieldset>\n</div>\n\n </div>\n </div>\n</div>"
}
]
}