@ukic/web-components 2.1.0-beta.8 → 2.2.0

package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js

@@ -0,0 +1,303 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { RadioGroup } from "../../ic-radio-group";
+import { RadioOption } from "../../../ic-radio-option/ic-radio-option";
+import { TextField } from "../../../ic-text-field/ic-text-field";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-radio-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test"></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render as required", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test"></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-required");
+  });
+  it("should render as helper text", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" helperText="helper test">
+        <ic-radio-option value="test"></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-helpertext");
+  });
+  it("should render with selected option", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-selected-option");
+  });
+  it("should render with validation status", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required validation-status="error" validation-text="error">
+        <ic-radio-option value="test" selected></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-validation-status");
+  });
+  it("should render radio option disabled", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test" disabled label="test label" group-label="test group"></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-disabled");
+  });
+  it("should render with unselected static additional field", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test" disabled label="test label" group-label="test group">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
+        </ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-unselected-additional-field");
+  });
+  it("should render with selected static additional field", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test" selected label="test label" group-label="test group">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
+        </ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-selected-additional-field");
+  });
+  it("should render with dynamic additional field", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test">
+        <ic-radio-option value="test" label="test label" group-label="test group" additional-field-display="dynamic" selected>
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
+        </ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-dynamic-additional-field");
+  });
+  it("should emit an updated checked value when selected", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icChange", callbackFn);
+    page.rootInstance.selectHandler({ detail: { value: "true" } });
+    await page.waitForChanges();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it("should get the next item to select", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option>   
+        <ic-radio-option value="test2"></ic-radio-option>   
+      </ic-radio-group>`,
+    });
+    const nextItemCalc = page.rootInstance.getNextItemToSelect(0, true);
+    page.waitForChanges();
+    expect(nextItemCalc).toBe(1);
+  });
+  it("should select the radio option when clicked", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option> 
+        <ic-radio-option label="test label">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label" value="Test value"></ic-text-field>
+        </ic-radio-option>
+        <ic-radio-option label="test label" value="Radio value">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
+        </ic-radio-option>   
+      </ic-radio-group>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icCheck", callbackFn);
+    page.rootInstance.radioOptions[1].click();
+    await page.waitForChanges();
+    expect(callbackFn).toHaveBeenCalled();
+    expect(page.rootInstance.checkedValue).toBe("Test value");
+    page.rootInstance.radioOptions[2].click();
+    await page.waitForChanges();
+    expect(page.rootInstance.checkedValue).toBe("Radio value");
+  });
+  it("should not select the radio option when textfield clicked", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option> 
+        <ic-radio-option label="test label">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label" value="Test value"></ic-text-field>
+        </ic-radio-option>
+      </ic-radio-group>`,
+    });
+    const div = page.rootInstance.radioOptions[1].shadowRoot.querySelector(".dynamic-container");
+    div.click();
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[1].selected).toBe(false);
+  });
+  it("should emit new radio value when text field value given", async () => {
+    const page = await newSpecPage({
+      components: [RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icCheck", callbackFn);
+    page.rootInstance.textfieldValueHandler({
+      detail: { value: "value" },
+      stopImmediatePropagation: jest.fn(),
+    });
+    await page.waitForChanges();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it("should emit default radio value when no text field value given", async () => {
+    const page = await newSpecPage({
+      components: [RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+        <ic-radio-option value="test" selected></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icCheck", callbackFn);
+    page.rootInstance.textfieldValueHandler({
+      detail: { value: "" },
+      stopImmediatePropagation: jest.fn(),
+    });
+    await page.waitForChanges();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it("should call 'setFocus' when radio option is focused", async () => {
+    const page = await newSpecPage({
+      components: [RadioOption],
+      html: `<ic-radio-option value="test" selected></ic-radio-option>  `,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+  it("should test form reset event", async () => {
+    const page = await newSpecPage({
+      components: [RadioOption],
+      html: `<form>
+        <ic-radio-option value="test" selected></ic-radio-option>    
+        <button id="resetButton" type="reset">Reset</button>  
+      </form>`,
+    });
+    expect(page.root.selected).toBe(true);
+    page.root.checked = false;
+    await page.waitForChanges();
+    expect(page.root.checked).toBe(false);
+    await page.rootInstance.handleFormReset();
+    await page.waitForChanges();
+    expect(page.root.selected).toBe(true);
+    //test disconnected callback
+    page.setContent("");
+  });
+  it("should change the orientation of the radio group to vertical if the user sets the orientation as horizontal and there are more than 2 radio options in the radio group", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required orientation="horizontal">
+        <ic-radio-option value="test1" selected></ic-radio-option>
+        <ic-radio-option value="test2" ></ic-radio-option> 
+        <ic-radio-option value="test3"></ic-radio-option>    
+      </ic-radio-group>`,
+    });
+    expect(page.rootInstance.orientation).toMatch("vertical");
+  });
+  it("should change the orientation of the radio group to vertical if the user has additional fields on any of the radio buttons in the group", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption, TextField],
+      html: `<ic-radio-group label="test label" name="test" required orientation="horizontal">
+        <ic-radio-option value="test1" selected></ic-radio-option>
+        <ic-radio-option value="test" disabled label="test label" group-label="test group">
+         <ic-text-field slot="additional-field" placeholder="Placeholder" label="Test label"></ic-text-field>
+        </ic-radio-option>      
+      </ic-radio-group>`,
+    });
+    expect(page.rootInstance.orientation).toMatch("vertical");
+  });
+  it("should test key down handler", async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup, RadioOption],
+      html: `<ic-radio-group label="test label" name="test" required>
+      <ic-radio-option value="test"></ic-radio-option>   
+      <ic-radio-option value="test2" disabled></ic-radio-option> 
+      <ic-radio-option value="test3" selected></ic-radio-option>    
+    </ic-radio-group>`,
+    });
+    //test wrap around from end to beginning
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowDown",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(true);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(false);
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowDown",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(false);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(true);
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowUp",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(true);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(false);
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(false);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(true);
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowLeft",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(true);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(false);
+    //test wrap around from beginning to end
+    page.root.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "ArrowUp",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.radioOptions[0].selected).toBe(false);
+    expect(page.rootInstance.radioOptions[2].selected).toBe(true);
+  });
+});
+//# sourceMappingURL=ic-radio-group.spec.js.map

package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-radio-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-radio-group/test/basic/ic-radio-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { RadioGroup } from \"../../ic-radio-group\";\nimport { RadioOption } from \"../../../ic-radio-option/ic-radio-option\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-radio-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test\"></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\"></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" helperText=\"helper test\">\n        <ic-radio-option value=\"test\"></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should render with selected option\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-selected-option\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required validation-status=\"error\" validation-text=\"error\">\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation-status\");\n  });\n\n  it(\"should render radio option disabled\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test\" disabled label=\"test label\" group-label=\"test group\"></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n  });\n\n  it(\"should render with unselected static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test\" disabled label=\"test label\" group-label=\"test group\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-unselected-additional-field\"\n    );\n  });\n\n  it(\"should render with selected static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test\" selected label=\"test label\" group-label=\"test group\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-selected-additional-field\");\n  });\n\n  it(\"should render with dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\">\n        <ic-radio-option value=\"test\" label=\"test label\" group-label=\"test group\" additional-field-display=\"dynamic\" selected>\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-additional-field\");\n  });\n\n  it(\"should emit an updated checked value when selected\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icChange\", callbackFn);\n    page.rootInstance.selectHandler({ detail: { value: \"true\" } });\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should get the next item to select\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>   \n        <ic-radio-option value=\"test2\"></ic-radio-option>   \n      </ic-radio-group>`,\n    });\n\n    const nextItemCalc = page.rootInstance.getNextItemToSelect(0, true);\n\n    page.waitForChanges();\n    expect(nextItemCalc).toBe(1);\n  });\n\n  it(\"should select the radio option when clicked\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option> \n        <ic-radio-option label=\"test label\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\" value=\"Test value\"></ic-text-field>\n        </ic-radio-option>\n        <ic-radio-option label=\"test label\" value=\"Radio value\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-radio-option>   \n      </ic-radio-group>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icCheck\", callbackFn);\n\n    page.rootInstance.radioOptions[1].click();\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n    expect(page.rootInstance.checkedValue).toBe(\"Test value\");\n\n    page.rootInstance.radioOptions[2].click();\n    await page.waitForChanges();\n    expect(page.rootInstance.checkedValue).toBe(\"Radio value\");\n  });\n\n  it(\"should not select the radio option when textfield clicked\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option> \n        <ic-radio-option label=\"test label\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\" value=\"Test value\"></ic-text-field>\n        </ic-radio-option>\n      </ic-radio-group>`,\n    });\n\n    const div =\n      page.rootInstance.radioOptions[1].shadowRoot.querySelector(\n        \".dynamic-container\"\n      );\n    div.click();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[1].selected).toBe(false);\n  });\n\n  it(\"should emit new radio value when text field value given\", async () => {\n    const page = await newSpecPage({\n      components: [RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icCheck\", callbackFn);\n    page.rootInstance.textfieldValueHandler({\n      detail: { value: \"value\" },\n      stopImmediatePropagation: jest.fn(),\n    });\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should emit default radio value when no text field value given\", async () => {\n    const page = await newSpecPage({\n      components: [RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    const callbackFn = jest.fn();\n    page.doc.addEventListener(\"icCheck\", callbackFn);\n    page.rootInstance.textfieldValueHandler({\n      detail: { value: \"\" },\n      stopImmediatePropagation: jest.fn(),\n    });\n    await page.waitForChanges();\n\n    expect(callbackFn).toHaveBeenCalled();\n  });\n\n  it(\"should call 'setFocus' when radio option is focused\", async () => {\n    const page = await newSpecPage({\n      components: [RadioOption],\n      html: `<ic-radio-option value=\"test\" selected></ic-radio-option>  `,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [RadioOption],\n      html: `<form>\n        <ic-radio-option value=\"test\" selected></ic-radio-option>    \n        <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.selected).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.selected).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should change the orientation of the radio group to vertical if the user sets the orientation as horizontal and there are more than 2 radio options in the radio group\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required orientation=\"horizontal\">\n        <ic-radio-option value=\"test1\" selected></ic-radio-option>\n        <ic-radio-option value=\"test2\" ></ic-radio-option> \n        <ic-radio-option value=\"test3\"></ic-radio-option>    \n      </ic-radio-group>`,\n    });\n\n    expect(page.rootInstance.orientation).toMatch(\"vertical\");\n  });\n\n  it(\"should change the orientation of the radio group to vertical if the user has additional fields on any of the radio buttons in the group\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption, TextField],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required orientation=\"horizontal\">\n        <ic-radio-option value=\"test1\" selected></ic-radio-option>\n        <ic-radio-option value=\"test\" disabled label=\"test label\" group-label=\"test group\">\n         <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-radio-option>      \n      </ic-radio-group>`,\n    });\n\n    expect(page.rootInstance.orientation).toMatch(\"vertical\");\n  });\n\n  it(\"should test key down handler\", async () => {\n    const page = await newSpecPage({\n      components: [RadioGroup, RadioOption],\n      html: `<ic-radio-group label=\"test label\" name=\"test\" required>\n      <ic-radio-option value=\"test\"></ic-radio-option>   \n      <ic-radio-option value=\"test2\" disabled></ic-radio-option> \n      <ic-radio-option value=\"test3\" selected></ic-radio-option>    \n    </ic-radio-group>`,\n    });\n\n    //test wrap around from end to beginning\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowDown\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(true);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(false);\n\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowDown\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(false);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(true);\n\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowUp\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(true);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(false);\n\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowRight\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(false);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(true);\n\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowLeft\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(true);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(false);\n\n    //test wrap around from beginning to end\n    page.root.dispatchEvent(\n      new window.window.KeyboardEvent(\"keydown\", {\n        key: \"ArrowUp\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.radioOptions[0].selected).toBe(false);\n    expect(page.rootInstance.radioOptions[2].selected).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-radio-option/ic-radio-option.css

@@ -454,7 +454,7 @@ video {
 }
 
 /* The label turns grey when disabled  */
-:host([disabled]) {
+:host(.disabled) {
   color: var(--ic-architectural-200);
 }
 
@@ -503,7 +503,7 @@ video {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   background-color: transparent;
-  border: 0.063rem solid #a7acb3;
+  border: var(--ic-border-default);
   border-radius: 50%;
   transition: var(--ic-easing-transition-fast);
   box-sizing: border-box;
@@ -518,13 +518,13 @@ video {
 .container:hover input ~ .checkmark {
   background-color: var(--ic-action-default-bg-hover);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: 0.063rem solid var(--ic-action-default);
+  border: var(--ic-space-1px) solid var(--ic-action-default);
 }
 
 /* When pressed, adds the active colours */
 .container:active input ~ .checkmark {
   background-color: var(--ic-action-default-bg-active);
-  border: 0.063rem solid var(--ic-action-default-active);
+  border: var(--ic-space-1px) solid var(--ic-action-default-active);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
 }
 
@@ -553,7 +553,7 @@ video {
 
 /* When the radio button is disabled */
 .container input:disabled ~ .checkmark {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 
 /* When the radio button is disabled */
@@ -601,7 +601,7 @@ video {
   border-radius: 0 0 0 0.188rem;
   border-bottom: 0.125rem solid var(--ic-action-default);
   border-left: 0.125rem solid var(--ic-action-default);
-  margin-left: -0.063rem;
+  margin-left: calc(-1 * var(--ic-space-1px));
 }
 
 /* The dynamic container */