digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
210 lines (209 loc) • 23 kB
JSON
{
"component": "question-pricing",
"fixtures": [
{
"name": "default",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with question advice",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"question_advice": "Here is the question advice",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n <p class=\"govuk-body\">\n Here is the question advice\n </p>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with all parts",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\">a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with optional fields",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
},
"optional_fields": [
"maximum_price",
"price_interval"
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\">a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time (optional)\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price (optional)\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with data",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax",
"price_unit": "examplePriceUnit",
"price_interval": "examplePriceInterval"
}
},
"data": {
"examplePriceMin": 199.99,
"examplePriceUnit": "Unit"
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceUnit\" name=\"examplePriceUnit\">\n <option value=\"\"></option>\n <option value=\"Unit\" selected>a unit</option>\n <option value=\"Licence\">a licence</option>\n <option value=\"User\">a user</option>\n <option value=\"Device\">a device</option>\n <option value=\"Instance\">a instance</option>\n <option value=\"Server\">a server</option>\n <option value=\"Virtual machine\">a virtual machine</option>\n <option value=\"Transaction\">a transaction</option>\n <option value=\"Megabyte\">a megabyte</option>\n <option value=\"Gigabyte\">a gigabyte</option>\n <option value=\"Terabyte\">a terabyte</option>\n </select>\n</div>\n\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceInterval\">\n Time\n </label>\n <select class=\"govuk-select\" id=\"input-examplePriceInterval\" name=\"examplePriceInterval\">\n <option value=\"\"></option>\n <option value=\"Second\">a second</option>\n <option value=\"Minute\">a minute</option>\n <option value=\"Hour\">a hour</option>\n <option value=\"Day\">a day</option>\n <option value=\"Week\">a week</option>\n <option value=\"Month\">a month</option>\n <option value=\"Quarter\">a quarter</option>\n <option value=\"6 months\">a 6 months</option>\n <option value=\"Year\">a year</option>\n </select>\n</div>\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" value=\"199.99\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with error message",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"minimum_price": "examplePriceMin",
"maximum_price": "examplePriceMax"
}
},
"errors": {
"example": {
"message": "You must enter some values"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group govuk-form-group--error\">\n <p id=\"input-example\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must enter some values\n</p>\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMin\">\n Minimum price\n </label>\n <div id=\"input-examplePriceMin-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMin\" name=\"examplePriceMin\" type=\"text\" aria-describedby=\"input-examplePriceMin-hint\">\n </div>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePriceMax\">\n Maximum price\n </label>\n <div id=\"input-examplePriceMax-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePriceMax\" name=\"examplePriceMax\" type=\"text\" aria-describedby=\"input-examplePriceMax-hint\">\n </div>\n</div>\n\n </div>\n\n</fieldset>"
},
{
"name": "with price",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"price": "examplePrice"
}
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePrice\">\n Price\n </label>\n <div id=\"input-examplePrice-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePrice\" name=\"examplePrice\" type=\"text\" aria-describedby=\"input-examplePrice-hint\">\n </div>\n</div>\n\n\n\n </div>\n\n</fieldset>"
},
{
"name": "with price and custom units",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"price": "examplePrice",
"price_unit": "exampleUnit"
},
"units": [
{
"label": "per hour",
"value": "hour"
},
{
"label": "per half day"
},
{
"label": "per day",
"value": "day"
},
{
"label": "per week"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-exampleUnit\">\n Unit\n </label>\n <select class=\"govuk-select\" id=\"input-exampleUnit\" name=\"exampleUnit\">\n <option value=\"\"></option>\n <option value=\"hour\">per hour</option>\n <option value=\"per half day\">per half day</option>\n <option value=\"day\">per day</option>\n <option value=\"per week\">per week</option>\n </select>\n</div>\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePrice\">\n Price\n </label>\n <div id=\"input-examplePrice-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePrice\" name=\"examplePrice\" type=\"text\" aria-describedby=\"input-examplePrice-hint\">\n </div>\n</div>\n\n\n\n </div>\n\n</fieldset>"
},
{
"name": "with price and custom intervals",
"options": {
"question": {
"id": "example",
"question": "Here is the pricing question",
"fields": {
"price": "examplePrice",
"price_interval": "exampleInterval"
},
"intervals": [
{
"label": "an hour"
},
{
"label": "a half day",
"value": "halfDay"
},
{
"label": "a day"
},
{
"label": "a week",
"value": "week"
}
]
}
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"html": "<fieldset class=\"govuk-fieldset dm-pricing\">\n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n Here is the pricing question\n </legend>\n\n <div class=\"govuk-form-group\">\n\n\n\n\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-exampleInterval\">\n Time\n </label>\n <select class=\"govuk-select\" id=\"input-exampleInterval\" name=\"exampleInterval\">\n <option value=\"\"></option>\n <option value=\"an hour\">an hour</option>\n <option value=\"halfDay\">a half day</option>\n <option value=\"a day\">a day</option>\n <option value=\"week\">a week</option>\n </select>\n</div>\n\n\n\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-examplePrice\">\n Price\n </label>\n <div id=\"input-examplePrice-hint\" class=\"govuk-hint\">\n For example, £199.99\n </div>\n <div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-10\" id=\"input-examplePrice\" name=\"examplePrice\" type=\"text\" aria-describedby=\"input-examplePrice-hint\">\n </div>\n</div>\n\n\n\n </div>\n\n</fieldset>"
}
]
}