@ukic/web-components 3.0.0 → 3.1.0

package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js

@@ -0,0 +1,474 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  disabled: false,
+  helperText: "Some helper text",
+  hideLabel: false,
+  label: "This is a label",
+  name: "1",
+  orientation: "vertical",
+  required: false,
+  size: "medium",
+  validationStatus: "",
+  validationText: "",
+  additionalFieldDisplay: "static",
+  radioDisabled: false,
+  dynamicText: "This selection requires additional answers",
+  radioLabel: "Radio 1",
+  radioName: "radio1",
+  value: "valueName1",
+  selected: false,
+  additionalFieldSlot: true,
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Radio button",
+  component: "Radio",
+};
+
+export const Default = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" name="1">
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Default"
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled"
+        disabled
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Default",
+};
+
+export const Horizontal = {
+  render: (args) => html`
+    <ic-radio-group
+      orientation="horizontal"
+      label="This should be horizontal"
+      name="1"
+    >
+      <ic-radio-option
+        value="valueName1"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Unselected / Default"
+      ></ic-radio-option>
+    </ic-radio-group>
+    <br />
+    <p>Horizontal orientation is overridden with >2 radio options</p>
+    <br />
+    <ic-radio-group
+      orientation="horizontal"
+      label="This should be vertical"
+      name="2"
+    >
+      <ic-radio-option
+        value="valueNameA"
+        label="First"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option value="valueNameB" label="Second"></ic-radio-option>
+      <ic-radio-option value="valueNameC" label="Third"></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Horizontal",
+};
+
+export const Required = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" required name="1">
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Default"
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled"
+        disabled
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Required",
+};
+
+export const Disabled = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" name="1">
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Disabled 1"
+        disabled
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Unselected / Disabled 2"
+        disabled
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled 3"
+        disabled
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName4"
+        label="Selected / Disabled"
+        disabled
+        selected
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Disabled",
+};
+
+export const ConditionalDynamic = {
+  render: (args) => html`
+    <script>
+      function handleIcChange(ev) {
+        console.log(ev.detail.selectedOption);
+      }
+      function handleClick() {
+        alert("Button clicked!");
+      }
+      document
+        .querySelector("ic-button")
+        .addEventListener("click", handleClick);
+      document
+        .querySelector("ic-radio-group")
+        .addEventListener("icChange", handleIcChange);
+      document
+        .querySelector("ic-button")
+        .addEventListener("click", () => alert("Button"));
+    </script>
+    <ic-radio-group label="Conditional dynamic" name="1">
+      <ic-radio-option
+        additional-field-display="dynamic"
+        value="valueName1"
+        label="Option with Radio as conditional slotted additional field"
+        selected
+      >
+        <ic-radio-group
+          slot="additional-field"
+          helperText="Child Group Helper Text"
+          label="Children"
+          name="radio-group-2"
+        >
+          <ic-radio-option
+            key="child-option-1"
+            label="child-option-1"
+            value="child-option-1"
+          ></ic-radio-option>
+          <ic-radio-option
+            key="child-option-2"
+            label="child-option-2"
+            value="child-option-2"
+          ></ic-radio-option>
+        </ic-radio-group>
+      </ic-radio-option>
+      <ic-radio-option
+        additional-field-display="dynamic"
+        value="valueName2"
+        label="Option with Text-field as conditional slotted additional field"
+      >
+        <ic-text-field
+          validation-status="error"
+          validation-text="Now it has really gone to (coffee) pot"
+          slot="additional-field"
+          placeholder="Placeholder"
+          label="What's your favourite type of coffee?"
+        >
+        </ic-text-field>
+      </ic-radio-option>
+      <ic-radio-option
+        additional-field-display="dynamic"
+        value="valueName3"
+        label="option3 - clickable component"
+      >
+        <ic-button slot="additional-field"> Click me! </ic-button>
+      </ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Conditional dynamic",
+};
+
+export const ConditionalStatic = {
+  render: (args) => html`
+    <ic-radio-group label=" Conditional static" name="1">
+      <ic-radio-option value="valueName1" label="option1">
+        <ic-text-field
+          slot="additional-field"
+          label="What's your favourite type of coffee?"
+        ></ic-text-field>
+      </ic-radio-option>
+      <ic-radio-option value="valueName2" label="option2">
+        <ic-radio-group
+          slot="additional-field"
+          helperText="Child Group Helper Text"
+          label="Children"
+          name="radio-group-2"
+        >
+          <ic-radio-option
+            key="child-option-1"
+            label="child-option-1"
+            value="child-option-1"
+          ></ic-radio-option>
+          <ic-radio-option
+            key="child-option-2"
+            label="child-option-2"
+            value="child-option-2"
+          ></ic-radio-option>
+        </ic-radio-group>
+      </ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Conditional static",
+};
+
+export const HelperText = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" name="1" helper-text="Helper text">
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Default"
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled"
+        disabled
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Helper text",
+};
+
+export const Small = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" name="1" size="small">
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Default"
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled"
+        disabled
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Small",
+};
+
+export const Validation = {
+  render: (args) => html`
+    <ic-radio-group
+      label="This is a label"
+      name="1"
+      validation-status="error"
+      validation-text="Error message"
+    >
+      <ic-radio-option
+        value="valueName1"
+        label="Unselected / Default"
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected / Default"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Unselected / Disabled"
+        disabled
+      ></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "Validation",
+};
+
+export const Form = {
+  render: (args) => html`
+    <form>
+      <ic-radio-group label="This is a label" name="1">
+        <ic-radio-option
+          value="valueName1"
+          label="Unselected / Default"
+        ></ic-radio-option>
+        <ic-radio-option
+          value="valueName2"
+          label="Selected / Default"
+        ></ic-radio-option>
+        <ic-radio-option
+          value="valueName3"
+          label="Unselected / Disabled"
+          disabled
+        ></ic-radio-option>
+      </ic-radio-group>
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+    </form>
+    <script>
+      document.querySelector("form").addEventListener("submit", (ev) => {
+        ev.preventDefault();
+        console.log(document.querySelector('input[name="1"]').value);
+      });
+    </script>
+  `,
+
+  name: "Form",
+};
+
+export const RTL = {
+  render: (args) => html`
+    <ic-radio-group label="This is a label" name="group1" dir="rtl">
+      <ic-radio-option value="valueName1" label="Default"></ic-radio-option>
+      <ic-radio-option
+        value="valueName2"
+        label="Selected"
+        selected
+      ></ic-radio-option>
+      <ic-radio-option
+        value="valueName3"
+        label="Disabled"
+        disabled
+      ></ic-radio-option>
+      <ic-radio-option
+        additional-field-display="dynamic"
+        value="valueName4"
+        label="Conditional dynamic"
+      >
+        <ic-text-field
+          slot="additional-field"
+          placeholder="Placeholder"
+          label="What's your favourite type of coffee?"
+        ></ic-text-field>
+      </ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  name: "RTL",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) => html`
+    <ic-radio-group
+      label=${args.label}
+      name=${args.name}
+      orientation=${args.orientation}
+      required=${args.required}
+      size=${args.size}
+      validation-status=${args.validationStatus}
+      validation-text=${args.validationText}
+      helper-text=${args.helperText}
+      disabled=${args.disabled}
+      hide-label=${args.hideLabel}
+      theme=${args.theme}
+    >
+      <ic-radio-option
+        additional-field-display=${args.additionalFieldDisplay}
+        value=${args.value}
+        label=${args.radioLabel}
+        name=${args.radioName}
+        selected=${args.selected}
+        disabled=${args.radioDisabled}
+        dynamic-text=${args.dynamicText}
+      >
+        <ic-text-field
+          slot=${args.additionalFieldSlot}
+          placeholder="Placeholder"
+          label="What's your favourite type of coffee?"
+        ></ic-text-field>
+      </ic-radio-option>
+      <ic-radio-option value="valueName2" label="Radio 2"></ic-radio-option>
+    </ic-radio-group>
+  `,
+
+  args: defaultArgs,
+
+  argTypes: {
+    orientation: {
+      options: ["vertical", "horizontal"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    validationStatus: {
+      options: ["error", "warning", "success", ""],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    additionalFieldDisplay: {
+      options: ["static", "dynamic"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    additionalFieldSlot: {
+      mapping: {
+        true: "additional-field",
+        false: "",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -448,19 +448,22 @@ ic-radio-option {
   width: fit-content;
 }
 
-.additional-field-wrapper ic-text-field {
+.additional-field-wrapper [slot="additional-field"] {
   margin-top: calc(var(--ic-space-sm) / 2);
   margin-left: var(--ic-space-xl);
 }
 
 /* The label turns grey when disabled  */
-ic-radio-option.ic-radio-option-disabled {
-  color: var(--ic-architectural-200);
+ic-radio-option.ic-radio-option-disabled,
+ic-radio-option.ic-radio-option-disabled .radio-label {
+  --ic-typography-color: var(--ic-radio-button-text-option-disabled);
 }
 
 /* Focus states */
 
 .container input:focus + span.checkmark,
+.container:hover input:focus + span.checkmark,
+.container:active input:focus + span.checkmark,
 :host(:focus) .container input:checked + span.checkmark {
   box-shadow: var(--ic-border-focus);
 }
@@ -502,8 +505,8 @@ ic-radio-option.ic-radio-option-disabled {
   left: 0;
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-default);
+  background-color: var(--ic-radio-button-background-default);
+  border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);
   border-radius: 50%;
   transition: var(--ic-easing-transition-fast);
   box-sizing: border-box;
@@ -516,60 +519,64 @@ ic-radio-option.ic-radio-option-disabled {
 
 /* On mouse-over, add a light blue background color */
 .container:hover input ~ .checkmark {
-  background-color: var(--ic-action-default-bg-hover-no-alpha);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: var(--ic-border-width) solid var(--ic-action-default);
+  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);
+  border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);
+}
+
+.container:hover input:checked ~ .checkmark {
+  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);
+  border: 0.125rem solid var(--ic-radio-button-default-hover);
+}
+
+.container:hover:not(.disabled) input:checked ~ .checkmark::after {
+  background-color: var(--ic-radio-button-default-hover);
 }
 
 /* When pressed, adds the active colours */
 .container:active input ~ .checkmark {
-  background-color: var(--ic-action-default-bg-active-no-alpha);
-  border: var(--ic-border-width) solid var(--ic-action-default-active);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
+  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);
+  border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);
 }
 
 /* When pressed, adds the active colours */
 .container:active input:checked ~ .checkmark {
-  background-color: var(--ic-action-default-bg-active);
-  border: 0.125rem solid var(--ic-action-default-active);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
+  border: 0.125rem solid var(--ic-radio-button-default-pressed);
+  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);
 }
 
 /* When pressed and selected, adds the active colours */
 .container:active input:checked ~ .checkmark::after {
-  background-color: var(--ic-action-default-active);
+  background-color: var(--ic-radio-button-default-pressed);
 }
 
 /* When the radio button is checked */
 .container input:checked ~ .checkmark {
-  border: 0.125rem solid var(--ic-action-default);
+  border: 0.125rem solid var(--ic-radio-button-default-active);
 }
 
 /* When the radio button is checked and disabled */
 .container input:checked:disabled ~ .checkmark {
-  background-color: var(--ic-architectural-white);
-  border: 0.125rem solid var(--ic-architectural-200);
+  border: 0.125rem solid var(--ic-radio-button-border-disabled);
 }
 
 /* When the radio button is disabled */
 .container input:disabled ~ .checkmark {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);
 }
 
 /* When the radio button is disabled */
 .container input:disabled ~ .checkmark::after {
-  background: var(--ic-architectural-200);
+  background: var(--ic-radio-button-disabled);
 }
 
 /* On mouse-over inactive */
 .container:hover input:disabled ~ .checkmark {
-  background-color: var(--ic-architectural-white);
   box-shadow: none;
   border: 0.125rem solid none;
 }
 
 .container:active input:disabled ~ .checkmark::after {
-  background-color: var(--ic-architectural-200);
+  background-color: var(--ic-radio-button-disabled);
 }
 
 /* Style the indicator (dot/circle) */
@@ -582,11 +589,12 @@ ic-radio-option.ic-radio-option-disabled {
   width: var(--ic-space-md);
   height: var(--ic-space-md);
   border-radius: 50%;
-  background: var(--ic-action-default);
+  background: var(--ic-radio-button-default-active);
 }
 
 .radio-label {
   margin-left: var(--ic-space-md);
+  --ic-typography-color: var(--ic-radio-button-text-option);
 }
 
 .additional-field-wrapper {
@@ -595,12 +603,12 @@ ic-radio-option.ic-radio-option-disabled {
 
 /* The line */
 .branch-corner {
-  color: var(--ic-action-default);
+  color: var(--ic-radio-button-required-bar);
   height: var(--ic-space-md);
   width: var(--ic-space-xl);
   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);
+  border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);
+  border-left: 0.125rem solid var(--ic-radio-button-required-bar);
   margin-left: calc(-1 * var(--ic-space-1px));
 }
 
@@ -617,7 +625,10 @@ ic-radio-option.ic-radio-option-disabled {
 }
 
 .dynamic-text {
-  color: var(--ic-action-default);
+  color: var(--ic-radio-button-required-text);
+
+  --ic-typography-color: var(--ic-radio-button-required-text);
+
   margin-top: calc(var(--ic-space-sm) / 2);
   margin-bottom: var(--ic-space-xs);
   border-radius: 2%;
@@ -652,3 +663,23 @@ ic-radio-option.ic-radio-option-disabled {
     background-color: GrayText;
   }
 }
+
+/* Right to left */
+input[type="radio"]:dir(rtl) {
+  right: 0;
+}
+
+.radio-label:dir(rtl) {
+  padding-right: var(--ic-space-sm);
+  padding-left: 0;
+}
+
+.branch-corner:dir(rtl) {
+  border-radius: 0 0 0.188rem 0;
+  border-right: 0.125rem solid var(--ic-action-default);
+  border-left: none;
+}
+
+.dynamic-container:dir(rtl) {
+  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;
+}