UNPKG

digitalmarketplace-frontend

Version:

Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects

689 lines (688 loc) 33.4 kB
{ "component": "summary-content", "fixtures": [ { "name": "text default", "options": { "type": "text", "value": "I am some text content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some text content\n</p>" }, { "name": "text bold default", "options": { "type": "text_bold", "value": "I am some bold text content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some bold text content\n</p>" }, { "name": "list default", "options": { "type": "list", "value": [ "Item 1", "Item 2", "Item 3" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ul>" }, { "name": "list with no items", "options": { "type": "list" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n \n</p>" }, { "name": "list with one item", "options": { "type": "list", "value": [ "Item 1" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n Item 1\n</p>" }, { "name": "upload default", "options": { "type": "upload", "value": "#upload" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n <a class=\"govuk-link\" href=\"#upload\">View uploaded document</a>\n </p>" }, { "name": "upload with no value", "options": { "type": "upload" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "" }, { "name": "service id default", "options": { "type": "service_id", "value": 1234567887654321 }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"service-id\">\n<span class=\"service-id-chunk\">1234</span><span class=\"service-id-chunk\">5678</span><span class=\"service-id-chunk\">8765</span><span class=\"service-id-chunk\">4321</span> </div>" }, { "name": "service id non digit", "options": { "type": "service_id", "value": "I am not a digit" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"service-id\">\n <span class=\"service-id-chunk\">I am not a digit</span>\n </div>" }, { "name": "service id no value", "options": { "type": "service_id" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "" }, { "name": "checkboxes default", "options": { "type": "checkboxes", "value": [ "Checkbox Item 1", "Checkbox Item 2", "Checkbox Item 3" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Item 1</li>\n <li>Checkbox Item 2</li>\n <li>Checkbox Item 3</li>\n </ul>" }, { "name": "checkboxes no items", "options": { "type": "checkboxes" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n \n</p>" }, { "name": "checkboxes with one item", "options": { "type": "checkboxes", "value": [ "Checkbox Item 1" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n Checkbox Item 1\n</p>" }, { "name": "checkbox tree default", "options": { "type": "checkbox_tree", "value": [ { "label": "Parent content 1", "options": [ { "label": "Checkbox Tree 1 Item 1" }, { "label": "Checkbox Tree 1 Item 2" }, { "label": "Checkbox Tree 1 Item 3" } ] }, { "label": "Parent content 2", "options": [ { "label": "Checkbox Tree 2 Item 1" }, { "label": "Checkbox Tree 2 Item 2" }, { "label": "Checkbox Tree 2 Item 3" } ] } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list\">\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 1</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree 1 Item 1</li>\n <li>Checkbox Tree 1 Item 2</li>\n <li>Checkbox Tree 1 Item 3</li>\n </ul>\n\n </li>\n\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 2</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree 2 Item 1</li>\n <li>Checkbox Tree 2 Item 2</li>\n <li>Checkbox Tree 2 Item 3</li>\n </ul>\n\n </li>\n\n </ul>" }, { "name": "checkbox tree with no children", "options": { "type": "checkbox_tree", "value": [ { "label": "Parent content 1" }, { "label": "Parent content 2" } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Parent content 1</li>\n <li>Parent content 2</li>\n </ul>" }, { "name": "checkbox tree large default", "options": { "type": "checkbox_tree_large", "value": [ { "label": "Parent content 1", "options": [ { "label": "Checkbox Tree 1 Item 1" }, { "label": "Checkbox Tree 1 Item 2" }, { "label": "Checkbox Tree 1 Item 3" } ] }, { "label": "Parent content 2", "options": [ { "label": "Checkbox Tree 2 Item 1" }, { "label": "Checkbox Tree 2 Item 2" }, { "label": "Checkbox Tree 2 Item 3" } ] } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list\">\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 1</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree 1 Item 1</li>\n <li>Checkbox Tree 1 Item 2</li>\n <li>Checkbox Tree 1 Item 3</li>\n </ul>\n\n </li>\n\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 2</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree 2 Item 1</li>\n <li>Checkbox Tree 2 Item 2</li>\n <li>Checkbox Tree 2 Item 3</li>\n </ul>\n\n </li>\n\n </ul>" }, { "name": "radios default", "options": { "type": "radios", "value": [ "Radio Item 1", "Radio Item 2", "Radio Item 3" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Radio Item 1</li>\n <li>Radio Item 2</li>\n <li>Radio Item 3</li>\n </ul>" }, { "name": "radios no items", "options": { "type": "radios" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n \n</p>" }, { "name": "radios with one item", "options": { "type": "radios", "value": [ "Radio Item 1" ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n Radio Item 1\n</p>" }, { "name": "radios as string", "options": { "type": "radios", "value": "I am a radio string item" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am a radio string item\n</p>" }, { "name": "boolean default", "options": { "type": "boolean", "value": true }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n Yes\n</p>" }, { "name": "boolean with false", "options": { "type": "boolean", "value": false }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n No\n</p>" }, { "name": "boolean with string", "options": { "type": "boolean", "value": "I am true" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am true\n</p>" }, { "name": "textbox default", "options": { "type": "textbox", "value": "I am some textbox content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some textbox content\n</p>" }, { "name": "textbox large default", "options": { "type": "textbox_large", "value": "I am some large textbox content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some large textbox content\n</p>" }, { "name": "pricing default", "options": { "type": "pricing", "value": "I am some pricing content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some pricing content\n</p>" }, { "name": "date default", "options": { "type": "date", "value": "I am some date content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some date content\n</p>" }, { "name": "display default", "options": { "type": "display", "value": "I am some content to display" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some content to display\n</p>" }, { "name": "number default", "options": { "type": "number", "value": 12345 }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n 12345\n</p>" }, { "name": "number zero", "options": { "type": "number", "value": 0 }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n 0\n</p>" }, { "name": "number blank", "options": { "type": "number" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n \n</p>" }, { "name": "money default", "options": { "type": "money", "value": "£123.45" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n £123.45\n</p>" }, { "name": "select default", "options": { "type": "text", "value": "I am some select content" }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<p class=\"govuk-body-s\">\n I am some select content\n</p>" }, { "name": "multiquestion default", "options": { "type": "multiquestion", "value": [ { "name": "Text question", "type": "text", "value": "I am some text content" }, { "name": "List question", "type": "list", "value": [ "Item 1", "Item 2", "Item 3" ] } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Text question</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some text content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">List question</p>\n <div>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ul>\n\n\n </div>\n </div>" }, { "name": "multiquestion all", "options": { "type": "multiquestion", "value": [ { "name": "Text question", "type": "text", "value": "I am some text content" }, { "name": "text bold default", "type": "text_bold", "value": "I am some bold text content" }, { "name": "List question", "type": "list", "value": [ "Item 1", "Item 2", "Item 3" ] }, { "name": "Upload question", "type": "upload", "value": "#upload" }, { "name": "Service id question", "type": "service_id", "value": 1234567887654321 }, { "name": "Checkboxes question", "type": "checkboxes", "value": [ "Checkbox Item 1", "Checkbox Item 2", "Checkbox Item 3" ] }, { "name": "Checkbox tree question", "type": "checkbox_tree", "value": [ { "label": "Parent content 1", "options": [ { "label": "Checkbox Tree Item 1" }, { "label": "Checkbox Tree Item 2" }, { "label": "Checkbox Tree Item 3" } ] }, { "label": "Parent content 2", "options": [ { "label": "Checkbox Tree Item 1" }, { "label": "Checkbox Tree Item 2" }, { "label": "Checkbox Tree Item 3" } ] } ] }, { "name": "Radios question", "type": "radios", "value": [ "Radios Item 1", "Radios Item 2", "Radios Item 3" ] }, { "name": "Boolean question", "type": "boolean", "value": true }, { "name": "Textbox question", "type": "textbox", "value": "I am some textbox content" }, { "name": "Pricing question", "type": "pricing", "value": "I am some pricing content" }, { "name": "Date question", "type": "date", "value": "I am some date content" }, { "name": "Number question", "type": "date", "value": 12345 } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Text question</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some text content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">text bold default</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some bold text content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">List question</p>\n <div>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n </ul>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Upload question</p>\n <div>\n <p class=\"govuk-body-s\">\n <a class=\"govuk-link\" href=\"#upload\">View uploaded document</a>\n </p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Service id question</p>\n <div>\n <div class=\"service-id\">\n<span class=\"service-id-chunk\">1234</span><span class=\"service-id-chunk\">5678</span><span class=\"service-id-chunk\">8765</span><span class=\"service-id-chunk\">4321</span> </div>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Checkboxes question</p>\n <div>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Item 1</li>\n <li>Checkbox Item 2</li>\n <li>Checkbox Item 3</li>\n </ul>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Checkbox tree question</p>\n <div>\n \n\n\n <ul class=\"govuk-list\">\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 1</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree Item 1</li>\n <li>Checkbox Tree Item 2</li>\n <li>Checkbox Tree Item 3</li>\n </ul>\n\n </li>\n\n <li>\n <p class=\"govuk-!-margin-bottom-1\">Parent content 2</p>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Checkbox Tree Item 1</li>\n <li>Checkbox Tree Item 2</li>\n <li>Checkbox Tree Item 3</li>\n </ul>\n\n </li>\n\n </ul>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Radios question</p>\n <div>\n <ul class=\"govuk-list govuk-list--bullet govuk-body-s\">\n <li>Radios Item 1</li>\n <li>Radios Item 2</li>\n <li>Radios Item 3</li>\n </ul>\n\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Boolean question</p>\n <div>\n <p class=\"govuk-body-s\">\n Yes\n</p>\n\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Textbox question</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some textbox content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Pricing question</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some pricing content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Date question</p>\n <div>\n <p class=\"govuk-body-s\">\n I am some date content\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Number question</p>\n <div>\n <p class=\"govuk-body-s\">\n 12345\n</p>\n\n\n </div>\n </div>" }, { "name": "list multiquestion default", "options": { "type": "list_multiquestion", "value": [ { "name": "I am name 1", "value": [ { "name": "Here is the first question", "type": "text", "value": "Text for 0 0" }, { "name": "Here is the second question", "type": "text", "value": "Text for 0 1" } ] }, { "name": "I am name 2", "value": [ { "name": "Here is the first question", "type": "text", "value": "Text for 1 0" }, { "name": "Here is the second question", "type": "text", "value": "Text for 1 1" } ] }, { "name": "I am name 3", "value": [ { "name": "Here is the first question", "type": "text", "value": "Text for 2 0" }, { "name": "Here is the second question", "type": "text", "value": "Text for 2 1" } ] } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<div class=\"list-multiquestion govuk-body-s\">\n <div class=\"list-multiquestion__item govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-2\">I am name 1</p>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the first question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 0 0\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the second question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 0 1\n</p>\n\n\n </div>\n </div>\n\n </div>\n <div class=\"list-multiquestion__item govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-2\">I am name 2</p>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the first question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 1 0\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the second question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 1 1\n</p>\n\n\n </div>\n </div>\n\n </div>\n <div class=\"list-multiquestion__item govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-2\">I am name 3</p>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the first question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 2 0\n</p>\n\n\n </div>\n </div>\n <div class=\"multiquestion govuk-body-s\">\n <p class=\"govuk-body govuk-!-margin-bottom-1\">Here is the second question</p>\n <div>\n <p class=\"govuk-body-s\">\n Text for 2 1\n</p>\n\n\n </div>\n </div>\n\n </div>\n </div>" }, { "name": "formula default", "options": { "type": "formula", "value": [ { "name": "Total", "question": "This is the total", "type": "display", "value": "I am some total", "operation": "=", "operation_position": "after" }, { "name": "Thing to start", "question": "This is the thing to start with", "type": "textbox_large", "value": "I am the start of the formula" }, { "name": "Thing to add", "question": "This is the thing to add", "type": "textbox_large", "value": "I am the part of the formula added", "operation": "+", "operation_position": "before" }, { "name": "Thing to subtract", "question": "This is the thing to subtract", "type": "textbox_large", "value": "I am the part of the formula to subtract", "operation": "-", "operation_position": "before" } ] }, "hidden": false, "description": "", "previewLayoutModifiers": [], "html": "<hr class=\"govuk-section-break govuk-section-break--visible\">\n <dl class=\"govuk-summary-list dm-summary-content-formula\">\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Total\n </dt>\n <dd class=\"govuk-summary-list__value\">\n I am some total\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n =\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Thing to start\n </dt>\n <dd class=\"govuk-summary-list__value\">\n I am the start of the formula\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n +\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Thing to add\n </dt>\n <dd class=\"govuk-summary-list__value\">\n I am the part of the formula added\n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n -\n </dt>\n <dd class=\"govuk-summary-list__value\">\n \n </dd>\n </div>\n <div class=\"govuk-summary-list__row\">\n <dt class=\"govuk-summary-list__key\">\n Thing to subtract\n </dt>\n <dd class=\"govuk-summary-list__value\">\n I am the part of the formula to subtract\n </dd>\n </div>\n</dl>\n <hr class=\"govuk-section-break govuk-section-break--visible\">" } ] }