{
    "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>"
        }
    ]
}