@worksafevictoria/wcl7.5 1.1.0-beta.9 → 1.1.0-beta.90

package/src/components/SubComponents/FormInstance/stories/mocks/quad.json

@@ -0,0 +1,249 @@
+{
+  "select_title": {
+    "#type": "container",
+    "#title": "start",
+    "flexbox": {
+      "#type": "webform_flexbox",
+      "assess_your_risk": {
+        "#type": "processed_text",
+        "#text": "<h2>Assess your risk</h2>\n\n<p>Use this assessment tool as a quick guide to help you determine if there's a risk of rollover when you use your quad bike.</p>\n\n<p>First consider the riders physical capability to maintain control of the vehicle. Then identify the different tasks you usually do on a quad bike, and match them with the relevant terrain where you perform the task.</p>\n\n<p>This will help you identify your level of rollover risk.</p>\n",
+        "#format": "rich_text",
+        "#webform": "kitchen_sink_formio_v1",
+        "#webform_id": "kitchen_sink_formio_v1--assess_your_risk",
+        "#webform_key": "assess_your_risk",
+        "#title": null,
+        "#webform_plugin_id": "processed_text",
+        "#webform_element": true,
+        "#filter_types_to_skip": {
+          "content": "[]"
+        },
+        "#langcode": "",
+        "#required": false,
+        "#title_display": "before",
+        "#description_display": "after",
+        "#id": "edit-assess-your-risk"
+      },
+      "risk_legend": {
+        "#type": "item",
+        "#title": "risk_legend",
+        "#title_display": "none",
+        "#template": "<h2>Risk legend</h2>\n<div class=\"qba-intro__legend--item qba-intro__legend--green\">Low risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--orange\">Medium risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--red\">High risk\n</div>",
+        "#webform": "kitchen_sink_formio_v1",
+        "#webform_id": "kitchen_sink_formio_v1--risk_legend",
+        "#webform_key": "risk_legend",
+        "#webform_plugin_id": "webform_computed_twig",
+        "#webform_element": true,
+        "#input": true,
+        "#mode": null,
+        "#hide_empty": false,
+        "#ajax": false,
+        "#whitespace": "",
+        "#required": false,
+        "#description_display": "after",
+        "#id": "edit-risk-legend",
+        "#name": "risk_legend",
+        "#value": "",
+        "value": {
+          "#markup": "<h2>Risk legend</h2>\n<div class=\"qba-intro__legend--item qba-intro__legend--green\">Low risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--orange\">Medium risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--red\">High risk\n</div>",
+          "#required": false,
+          "#title_display": "before",
+          "#description_display": "after",
+          "#id": "edit-risk-legend-value"
+        },
+        "hidden": {
+          "#type": "hidden",
+          "#value": {
+            "#markup": "<h2>Risk legend</h2>\n<div class=\"qba-intro__legend--item qba-intro__legend--green\">Low risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--orange\">Medium risk\n</div>\n<div class=\"qba-intro__legend--item qba-intro__legend--red\">High risk\n</div>"
+          },
+          "#input": true,
+          "#required": false,
+          "#title_display": "before",
+          "#description_display": "after",
+          "#id": "edit-risk-legend--2",
+          "#name": "risk_legend"
+        }
+      },
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_id": "kitchen_sink_formio_v1--flexbox",
+      "#webform_key": "flexbox",
+      "#title": null,
+      "#webform_plugin_id": "webform_flexbox",
+      "#webform_element": true,
+      "#optional": false,
+      "#required": false,
+      "#title_display": "before",
+      "#description_display": "after",
+      "#id": "edit-flexbox"
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--select_title",
+    "#webform_key": "select_title",
+    "#webform_plugin_id": "webform_wizard_page",
+    "#webform_element": true,
+    "#optional": false,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-select-title"
+  },
+  "enter_details": {
+    "#type": "webform_wizard_page",
+    "#title": "Choose the Task",
+    "task": {
+      "#type": "radios",
+      "#title": "task",
+      "#title_display": "none",
+      "#options": {
+        "transport": "transport -- <div class=\"task__card\">\n   <div class=\"image\">\n      <div class=\"icon transport\"></div>\n    </div>\n    <h2>Personal transport</h2>\n     <p>Transport only (light tools or equipment)</p>\n</div>\n",
+        "material": "material -- <div class=\"task__card\">\n   <div class=\"image\">\n      <div class=\"icon material\"></div>\n    </div>\n    <h2>\n    Moving material or equipment\n    </h2>\n     <p>Extra weight added to racks changes handling and causes the quad to be less stable</p>\n</div>\n"
+      },
+      "#required": false,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_id": "kitchen_sink_formio_v1--task",
+      "#webform_key": "task",
+      "#webform_plugin_id": "radios",
+      "#webform_element": true,
+      "#options_description_display": "description",
+      "#options_display": "one_column",
+      "#input": true,
+      "#legend": {
+        "content": "[]"
+      },
+      "#description_display": "after",
+      "#id": "edit-task",
+      "#name": "task",
+      "#has_garbage_value": true,
+      "#value": null,
+      "transport": {
+        "#type": "radio",
+        "#title": "transport",
+        "#return_value": "transport",
+        "#default_value": false,
+        "#id": "edit-task-transport",
+        "#ajax": null,
+        "#error_no_message": true,
+        "#webform_element": true,
+        "#description": "<div class=\"task__card\">\n   <div class=\"image\">\n      <div class=\"icon transport\"></div>\n    </div>\n    <h2>Personal transport</h2>\n     <p>Transport only (light tools or equipment)</p>\n</div>\n",
+        "#input": true,
+        "#title_display": "after",
+        "#required": false,
+        "#description_display": "after",
+        "#name": "task",
+        "#value": false
+      },
+      "material": {
+        "#type": "radio",
+        "#title": "material",
+        "#return_value": "material",
+        "#default_value": false,
+        "#id": "edit-task-material",
+        "#ajax": null,
+        "#error_no_message": true,
+        "#webform_element": true,
+        "#description": "<div class=\"task__card\">\n   <div class=\"image\">\n      <div class=\"icon material\"></div>\n    </div>\n    <h2>\n    Moving material or equipment\n    </h2>\n     <p>Extra weight added to racks changes handling and causes the quad to be less stable</p>\n</div>\n",
+        "#input": true,
+        "#title_display": "after",
+        "#required": false,
+        "#description_display": "after",
+        "#name": "task",
+        "#value": false
+      }
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--enter_details",
+    "#webform_key": "enter_details",
+    "#webform_plugin_id": "webform_wizard_page",
+    "#webform_element": true,
+    "#open": false,
+    "#value": null,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-enter-details"
+  },
+  "global": {
+    "#type": "webform_codemirror",
+    "#title": "global",
+    "#description": {
+      "#markup": "<style>\n.task__card {\n    position: relative;\n    border-radius: 12px;\n    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 18%);\n    padding: 20px;\n    text-align: left;\n    border: none;\n    cursor: pointer;\n    background: #fff;\n    min-height: 18.25rem;\n    width: 100%;\n}\n\n.task__card > .image {\n    border: 3px solid #ffd229;\n    border-radius: 50%;\n    padding-left: 1.3125rem;\n    padding-top: 1.3125rem;\n    height: 5rem;\n    width: 5rem;\n    display: inline-block;\n}\n\n.task__card > .image > .icon {\n   background-repeat: no-repeat;\n   height: 100%;\n}\n\n.task__card > .image > .transport {\n   background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='29' viewBox='0 0 32 29'%3E%3Cpath d='M32 11.04c0-2.548-2.09-4.614-4.667-4.614h-3.666c-.369 0-.667-.295-.667-.659V4.449c-.004-2.364-1.942-4.28-4.333-4.284h-5.334C10.942.169 9.004 2.085 9 4.449v1.318c0 .364-.298.66-.667.66H4.667C2.089 6.426 0 8.491 0 11.04v13.182c0 2.548 2.09 4.613 4.667 4.613h22.666c2.578 0 4.667-2.065 4.667-4.613V11.04zM12.333 4.449c.004-.545.45-.985 1-.989h5.334c.55.004.996.444 1 .989v1.318c0 .364-.299.66-.667.66h-6c-.368 0-.667-.296-.667-.66V4.449zM22.36 18.17l.787.633c.121.094.272.145.426.145h1.747c.25.006.475.148.586.37.112.22.092.483-.053.684-.835 1.109-2.198 1.702-3.589 1.562-1.39-.14-2.605-.99-3.199-2.242-.11-.229-.344-.374-.601-.374h-4.933c-.257 0-.49.145-.602.374-.658 1.375-2.057 2.255-3.596 2.262-1.21-.043-2.341-.61-3.093-1.549-.166-.197-.202-.472-.09-.705.112-.232.35-.379.61-.376h1.667c.154 0 .305-.05.426-.145l.787-.632c.16-.118.254-.304.253-.501.002-.196-.08-.383-.226-.514l-.814-.686c-.118-.101-.27-.158-.426-.158H6.76c-.26.003-.498-.144-.61-.376-.112-.232-.076-.507.09-.705.749-.944 1.88-1.516 3.093-1.562 1.54.006 2.941.886 3.6 2.262.111.229.345.375.602.374h4.933c.257 0 .49-.145.601-.374.594-1.251 1.808-2.103 3.2-2.242 1.39-.14 2.753.454 3.588 1.562.145.201.165.465.053.685-.111.22-.337.363-.586.37h-1.75c-.157 0-.309.056-.427.158l-.814.685c-.146.132-.228.319-.226.514 0 .197.093.383.253.501z'%3E%3C/path%3E%3C/svg%3E\");\n}\n\n.task__card > .image > .material {\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 31 31'%3E%3Cpath d='M20.246 17.688c-.12.122-.283.19-.453.19-.17 0-.333-.068-.453-.19L9.356 7.613V2.34c0-.943-.563-1.794-1.426-2.155C7.066-.178 6.07.022 5.41.69L.686 5.46C.023 6.127-.175 7.13.183 8c.358.872 1.2 1.44 2.135 1.44h5.234l9.984 10.075c.25.252.25.66 0 .913l-2.716 2.74c-.25.253-.25.662 0 .914l4.978 5.025c2.5 2.522 6.552 2.522 9.052 0 2.5-2.523 2.5-6.612 0-9.135l-4.98-5.023c-.25-.252-.654-.252-.904 0l-2.72 2.738zM6.249 3.498c.091-.093.229-.12.348-.07.12.05.198.167.199.297v2.81c0 .178-.144.322-.32.322H3.693c-.13 0-.247-.078-.296-.199-.05-.12-.023-.26.07-.352l2.782-2.808z'%3E%3C/path%3E%3C/svg%3E\");\n}\n\n\n#kitchen_sink_formio_v1--task .form-radio {\n  display: flex;\n}\n\n#kitchen_sink_formio_v1--task .form-check {\n     flex: 0 0 25%;\n     max-width: 25%;\n}\n\n#kitchen_sink_formio_v1--task [type=\"radio\"] {\n     display: none;\n}\n\n#kitchen_sink_formio_v1--task .radio-selected .task__card {\n     border: 3px solid #ffd229;\n}\n\n.btn-wizard-nav-submit {\n    display: none !important\n  }\n\n.qba-intro__legend--item {\n      margin-top: .75rem;\n      height: 4.0625rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      font-size: calc(.58824vw + 16.11765px);\n  }\n  .qba-intro__legend--green {\n      background-color: #00672c;\n  }\n  .qba-intro__legend--orange {\n      background-color: #963f0a;\n  }\n  .qba-intro__legend--red {\n      background-color: #ae1e0a;\n  }\n\n</style>"
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--global",
+    "#webform_key": "global",
+    "#webform_plugin_id": "webform_codemirror",
+    "#webform_element": true,
+    "#input": true,
+    "#mode": "text",
+    "#skip_validation": false,
+    "#decode_value": false,
+    "#cols": 60,
+    "#rows": 5,
+    "#wrap": true,
+    "#resizable": "vertical",
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-global",
+    "#name": "global",
+    "#value": ""
+  },
+  "results": {
+    "#type": "webform_wizard_page",
+    "#title": "results",
+    "result": {
+      "#type": "item",
+      "#title": "result",
+      "#template": "<div style=\"display:none\" id=\"result_green\" class=\"qba-intro__legend--item qba-intro__legend--green\">Low risk\n  </div>\n  <div style=\"display:none\" id=\"result_orange\" class=\"qba-intro__legend--item qba-intro__legend--orange\">Medium risk\n  </div>\n  <div style=\"display:none\" id=\"result_red\" class=\"qba-intro__legend--item qba-intro__legend--red\">High risk\n  </div>\n{{ \n  (function() {\n    setTimeout(function() {\n      var element\n    if (data['task'] === 'transport') {\n      element = document.querySelector('#result_green')\n    } else {\n      element = document.querySelector('#result_red')\n    }\n    if (element) {\n     element.style.display = \"flex\"\n    }\n    })\n    return ''\n  })()\n}}\n<br/>\n<div data-v-3b1e9e39=\"\" class=\"task__card\"><h2 data-v-3b1e9e39=\"\">Quad bike essentials</h2> <p data-v-3b1e9e39=\"\">\n    There are some basic essentials when it comes to operating quad\n    bikes.\n  </p> <p data-v-3b1e9e39=\"\">\n    Helmets must always be worn, passengers are not allowed on single\n    user vehicles, riders must be appropriately trained and at least 16\n    years old. Always make sure your quad bike is maintained as per the\n    manufacturer's instructions, never exceed cargo rack carrying\n    capacities or vehicle load towing limits (refer to your operator\n    manual).\n  </p> <p data-v-3b1e9e39=\"\">\n    Where a risk of rollover is present you have a duty to eliminate or\n    reduce that risk, so far as is reasonably practicable: consider\n    eliminating the task, using an alternative vehicle or fitting an\n    operator protective device (OPD).\n  </p> <p data-v-3b1e9e39=\"\">\n    This guide does not replace the need for a full and comprehensive\n    assessment of your risk of quad bike rollover on your farm.\n  </p></div>",
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_id": "kitchen_sink_formio_v1--result",
+      "#webform_key": "result",
+      "#webform_plugin_id": "webform_computed_twig",
+      "#webform_element": true,
+      "#input": true,
+      "#mode": null,
+      "#hide_empty": false,
+      "#ajax": false,
+      "#whitespace": "",
+      "#required": false,
+      "#title_display": "before",
+      "#description_display": "after",
+      "#id": "edit-result",
+      "#name": "result",
+      "#value": "",
+      "value": {
+        "#markup": "",
+        "#required": false,
+        "#title_display": "before",
+        "#description_display": "after",
+        "#id": "edit-result-value"
+      },
+      "hidden": {
+        "#type": "hidden",
+        "#value": {
+          "#markup": ""
+        },
+        "#input": true,
+        "#required": false,
+        "#title_display": "before",
+        "#description_display": "after",
+        "#id": "edit-result--2",
+        "#name": "result"
+      }
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--results",
+    "#webform_key": "results",
+    "#webform_plugin_id": "webform_wizard_page",
+    "#webform_element": true,
+    "#open": false,
+    "#value": null,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-results"
+  },
+  "#required": false,
+  "#title_display": "before",
+  "#description_display": "after",
+  "#id": "edit-elements"
+}

package/src/components/SubComponents/FormInstance/stories/mocks/radios.json

@@ -0,0 +1,70 @@
+{
+  "c1": {
+    "#type": "radios",
+    "#title": "radioConditional",
+    "#options": {
+      "Yes": "Yes",
+      "No": "No"
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--radioconditional",
+    "#webform_key": "radioconditional",
+    "#webform_element": true,
+    "#options_description_display": "description",
+    "#options_display": "one_column",
+    "#input": true,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-radioconditional",
+    "#name": "radioconditional",
+    "#has_garbage_value": true,
+    "#value": null,
+    "Yes": {
+      "#type": "radio",
+      "#title": "Yes",
+      "#return_value": "Yes",
+      "#default_value": false,
+      "#id": "edit-radioconditional-yes",
+      "#ajax": null,
+      "#error_no_message": true,
+      "#weight": 0.001,
+      "#input": true,
+      "#theme": "input__radio",
+      "#title_display": "after",
+      "#defaults_loaded": true,
+      "#tree": false,
+      "#processed": true,
+      "#required": false,
+      "#description_display": "after",
+      "#errors": null,
+      "#name": "radioconditional",
+      "#value": false,
+      "#ajax_processed": false,
+      "#sorted": true
+    },
+    "No": {
+      "#type": "radio",
+      "#title": "No",
+      "#return_value": "No",
+      "#default_value": false,
+      "#id": "edit-radioconditional-no",
+      "#ajax": null,
+      "#error_no_message": true,
+      "#weight": 0.002,
+      "#input": true,
+      "#theme": "input__radio",
+      "#title_display": "after",
+      "#defaults_loaded": true,
+      "#tree": false,
+      "#processed": true,
+      "#required": false,
+      "#description_display": "after",
+      "#errors": null,
+      "#name": "radioconditional",
+      "#value": false,
+      "#ajax_processed": false,
+      "#sorted": true
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/stories/mocks/radiosother.json

@@ -0,0 +1,176 @@
+{
+  "ro1": {
+    "#type": "webform_radios_other",
+    "#title": "ro1",
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--ro1",
+    "#webform_key": "ro1",
+    "#webform_parent_key": "",
+    "#webform_parent_flexbox": false,
+    "#webform_depth": 0,
+    "#webform_multiple": false,
+    "#webform_composite": false,
+    "#admin_title": "ro1",
+    "#webform_plugin_id": "webform_radios_other",
+    "#webform_submission": null,
+    "#access": true,
+    "#webform_element": true,
+    "#input": true,
+    "#other__option_delimiter": ", ",
+    "#markup": "",
+    "#defaults_loaded": true,
+    "#tree": true,
+    "#weight": 0.001,
+    "#processed": true,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#errors": null,
+    "#id": "edit-ro1",
+    "#name": "ro1",
+    "radios": {
+      "#default_value": null,
+      "#type": "radios",
+      "#webform_element": true,
+      "#webform_other": true,
+      "#title": "ro1",
+      "#options": {
+        "Friday": "Friday",
+        "Saturday": "Saturday",
+        "_other_": "Other\u2026"
+      },
+      "#options_description_display": "description",
+      "#options_display": "one_column",
+      "#required": false,
+      "#title_display": "invisible",
+      "#error_no_message": true,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#input": true,
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0,
+      "#processed": true,
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-ro1-radios",
+      "#name": "ro1[radios]",
+      "#has_garbage_value": true,
+      "#value": null,
+      "Friday": {
+        "#type": "radio",
+        "#title": "Friday",
+        "#return_value": "Friday",
+        "#default_value": false,
+        "#id": "edit-ro1-radios-friday",
+        "#ajax": null,
+        "#error_no_message": true,
+        "#weight": 0.0060000000000000001,
+        "#input": true,
+        "#theme": "input__radio",
+        "#title_display": "after",
+        "#defaults_loaded": true,
+        "#tree": true,
+        "#processed": true,
+        "#required": false,
+        "#description_display": "after",
+        "#errors": null,
+        "#name": "ro1[radios]",
+        "#value": false,
+        "#ajax_processed": false,
+        "#sorted": true
+      },
+      "Saturday": {
+        "#type": "radio",
+        "#title": "Saturday",
+        "#return_value": "Saturday",
+        "#default_value": false,
+        "#id": "edit-ro1-radios-saturday",
+        "#ajax": null,
+        "#error_no_message": true,
+        "#weight": 0.0070000000000000001,
+        "#input": true,
+        "#theme": "input__radio",
+        "#title_display": "after",
+        "#defaults_loaded": true,
+        "#tree": true,
+        "#processed": true,
+        "#required": false,
+        "#description_display": "after",
+        "#errors": null,
+        "#name": "ro1[radios]",
+        "#value": false,
+        "#ajax_processed": false,
+        "#sorted": true
+      },
+      "_other_": {
+        "#type": "radio",
+        "#title": "Other\u2026",
+        "#return_value": "_other_",
+        "#default_value": false,
+        "#id": "edit-ro1-radios-other-",
+        "#ajax": null,
+        "#error_no_message": true,
+        "#weight": 0.0080000000000000002,
+        "#input": true,
+        "#theme": "input__radio",
+        "#title_display": "after",
+        "#defaults_loaded": true,
+        "#tree": true,
+        "#processed": true,
+        "#required": false,
+        "#description_display": "after",
+        "#errors": null,
+        "#name": "ro1[radios]",
+        "#value": false,
+        "#ajax_processed": false,
+        "#sorted": true
+      }
+    },
+    "#value": {
+      "radios": null,
+      "other": null
+    },
+    "other": {
+      "#option_delimiter": ", ",
+      "#type": "textfield",
+      "#webform_element": true,
+      "#placeholder": "Enter other\u2026",
+      "#title": "Enter other\u2026",
+      "#title_display": "invisible",
+      "#maxlength": 255,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#input": true,
+      "#size": 60,
+      "#autocomplete_route_name": false,
+      "#theme": "input__textfield",
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.001,
+      "#processed": true,
+      "#required": false,
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-ro1-other",
+      "#name": "ro1[other]",
+      "#value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "#ajax_processed": false,
+    "#sorted": true,
+    "#after_build_done": true
+  },
+  "#tree": false,
+  "#processed": false,
+  "#required": false,
+  "#title_display": "before",
+  "#description_display": "after",
+  "#errors": null,
+  "#id": "edit-elements",
+  "#sorted": true
+}

package/src/components/SubComponents/FormInstance/stories/mocks/range.json

@@ -0,0 +1,58 @@
+{
+  "c1": {
+    "#type": "range",
+    "#title": "range1",
+    "#output": "right",
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--range1",
+    "#webform_key": "range1",
+    "#webform_parent_key": "",
+    "#webform_parent_flexbox": false,
+    "#webform_depth": 0,
+    "#webform_multiple": false,
+    "#webform_composite": false,
+    "#admin_title": "range1",
+    "#webform_plugin_id": "range",
+    "#webform_submission": null,
+    "#access": true,
+    "#webform_element": true,
+    "#step": 1,
+    "#min": 0,
+    "#max": 100,
+    "#field_suffix": {
+      "output": {
+        "#type": "number",
+        "#title": "range1",
+        "#title_display": "invisible",
+        "#id": "range1__output",
+        "#name": "range1__output",
+        "#step": 1,
+        "#min": 0,
+        "#max": 100,
+        "#attributes": {
+          "name": "",
+          "style": "width:4em"
+        }
+      }
+    },
+    "#_webform_access": true,
+    "#theme": "input__range",
+    "#input": true,
+    "#defaults_loaded": true,
+    "#tree": false,
+    "#weight": 0.013,
+    "#processed": true,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#errors": null,
+    "#id": "edit-range1",
+    "#name": "range1",
+    "#value": "50",
+    "#ajax_processed": false,
+    "#sorted": true,
+    "#after_build_done": true,
+    "#required": true,
+    "#disabled": false,
+    "#readonly": false
+  }
+}

package/src/components/SubComponents/FormInstance/stories/mocks/rating.json

@@ -0,0 +1,42 @@
+{
+  "c1": {
+    "#type": "webform_rating",
+    "#title": "rating1",
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--rating1",
+    "#webform_key": "rating1",
+    "#webform_parent_key": "",
+    "#webform_parent_flexbox": false,
+    "#webform_depth": 0,
+    "#webform_multiple": false,
+    "#webform_composite": false,
+    "#admin_title": "rating1",
+    "#webform_plugin_id": "webform_rating",
+    "#webform_submission": null,
+    "#access": true,
+    "#webform_element": true,
+    "#step": 1,
+    "#min": 0,
+    "#max": 5,
+    "#_webform_access": true,
+    "#star_size": "medium",
+    "#reset": false,
+    "#theme": "input__webform_rating",
+    "#input": true,
+    "#defaults_loaded": true,
+    "#tree": false,
+    "#weight": 0.014,
+    "#processed": true,
+    "#required": true,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#errors": null,
+    "#id": "edit-rating1",
+    "#name": "rating1",
+    "#value": 4,
+    "#sorted": true,
+    "#after_build_done": true,
+    "#disabled": false,
+    "#readonly": false
+  }
+}

package/src/components/SubComponents/FormInstance/stories/mocks/rule-disabled-value.json

@@ -0,0 +1,66 @@
+{
+  "c1": {
+    "#type": "textfield",
+    "#title": "textfield1",
+    "#placeholder": "type 'disable' to disable textfield2 and 'ro' to make textfield3 readonly",
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--textfield1",
+    "#webform_key": "textfield1",
+    "#maxlength": 255,
+    "#webform_element": true,
+    "#input": true,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-textfield1",
+    "#name": "textfield1",
+    "#value": ""
+  },
+  "c12": {
+    "#type": "textfield",
+    "#title": "textfield2",
+    "#states": {
+      "disabled": {
+        ".webform-submission-kitchen-sink-formio-v1-add-form :input[name=\"textfield1\"]": {
+          "value": "disable"
+        }
+      }
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--textfield2",
+    "#webform_key": "textfield2",
+    "#states_clear": false,
+    "#maxlength": 255,
+    "#webform_element": true,
+    "#input": true,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-textfield2",
+    "#name": "textfield2",
+    "#value": ""
+  },
+  "c123": {
+    "#type": "textfield",
+    "#title": "textfield3",
+    "#states": {
+      "readonly": {
+        ".webform-submission-kitchen-sink-formio-v1-add-form :input[name=\"textfield1\"]": {
+          "value": "ro"
+        }
+      }
+    },
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--textfield3",
+    "#webform_key": "textfield3",
+    "#maxlength": 255,
+    "#webform_element": true,
+    "#input": true,
+    "#required": false,
+    "#title_display": "before",
+    "#description_display": "after",
+    "#id": "edit-textfield3",
+    "#name": "textfield3",
+    "#value": ""
+  }
+}