@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

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

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.598
  */
-import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -20,10 +20,10 @@ export class RadioGroup {
     //--------------------------------------------------------------------------
     /** Specifies the appearance style of the component. */
     this.appearance = "solid";
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * When true, the component must have a value on form submission.
+     * When `true`, the component must have a value in order for the form to submit.
      *
      * @internal
      */
@@ -32,7 +32,7 @@ export class RadioGroup {
     this.layout = "horizontal";
     /** Specifies the size of the component. */
     this.scale = "m";
-    /** The component's "selectedItem" value. */
+    /** The component's `selectedItem` value. */
     this.value = null;
     /** Specifies the width of the component. */
     this.width = "auto";
@@ -99,9 +99,7 @@ export class RadioGroup {
     updateHostInteraction(this);
   }
   render() {
-    return (h(Host, { onClick: this.handleClick, role: "radiogroup" },
-      h("slot", null),
-      h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
     event.preventDefault();
@@ -199,258 +197,272 @@ export class RadioGroup {
   }
   static get is() { return "calcite-radio-group"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["radio-group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["radio-group.css"]
-  }; }
-  static get properties() { return {
-    "appearance": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "RadioAppearance",
-        "resolved": "\"outline\" | \"solid\"",
-        "references": {
-          "RadioAppearance": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "RadioAppearance",
+          "resolved": "\"outline\" | \"solid\"",
+          "references": {
+            "RadioAppearance": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the appearance style of the component."
-      },
-      "attribute": "appearance",
-      "reflect": true,
-      "defaultValue": "\"solid\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the appearance style of the component."
+        },
+        "attribute": "appearance",
+        "reflect": true,
+        "defaultValue": "\"solid\""
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "When true, the component must have a value on form submission."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Layout",
-        "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
-        "references": {
-          "Layout": {
-            "location": "import",
-            "path": "../interfaces"
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout",
+          "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the layout of the component."
-      },
-      "attribute": "layout",
-      "reflect": true,
-      "defaultValue": "\"horizontal\""
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the layout of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"horizontal\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the name of the component on form submission."
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the name of the component on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "attribute": "name",
-      "reflect": true
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's \"selectedItem\" value."
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's `selectedItem` value."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "selectedItem": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "HTMLCalciteRadioGroupItemElement",
-        "resolved": "HTMLCalciteRadioGroupItemElement",
-        "references": {
-          "HTMLCalciteRadioGroupItemElement": {
-            "location": "global"
+      "selectedItem": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "HTMLCalciteRadioGroupItemElement",
+          "resolved": "HTMLCalciteRadioGroupItemElement",
+          "references": {
+            "HTMLCalciteRadioGroupItemElement": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "readonly",
+              "text": undefined
+            }],
+          "text": "The component's selected item `HTMLElement`."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "readonly",
-            "text": undefined
-          }],
-        "text": "The component's selected item `HTMLElement`."
-      }
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Extract<\"auto\" | \"full\", Width>",
-        "resolved": "\"auto\" | \"full\"",
-        "references": {
-          "Extract": {
-            "location": "global"
-          },
-          "Width": {
-            "location": "import",
-            "path": "../interfaces"
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"auto\" | \"full\", Width>",
+          "resolved": "\"auto\" | \"full\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "Width": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the width of the component."
-      },
-      "attribute": "width",
-      "reflect": true,
-      "defaultValue": "\"auto\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "calciteRadioGroupChange",
-      "name": "calciteRadioGroupChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the selected option changes, where the event detail is the new value."
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the width of the component."
+        },
+        "attribute": "width",
+        "reflect": true,
+        "defaultValue": "\"auto\""
       }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteRadioGroupChange",
+        "name": "calciteRadioGroupChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the selected option changes, where the event detail is the new value."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueHandler"
-    }, {
-      "propName": "selectedItem",
-      "methodName": "handleSelectedItemChange"
-    }]; }
-  static get listeners() { return [{
-      "name": "calciteInternalRadioGroupItemChange",
-      "method": "handleSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueHandler"
+      }, {
+        "propName": "selectedItem",
+        "methodName": "handleSelectedItemChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalRadioGroupItemChange",
+        "method": "handleSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -0,0 +1,79 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme1 from "./readme.md";
+import readme2 from "../radio-group-item/readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Radio/Radio Group",
+    parameters: {
+        notes: [readme1, readme2]
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-radio-group
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    appearance="${select("appearance", ["solid", "outline"], "solid")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    width="${select("width", ["auto", "full"], "auto")}"
+    ${boolean("disabled", false)}
+  >
+    <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+    <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+    <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+    <calcite-radio-group-item value="vue">Vue</calcite-radio-group-item>
+  </calcite-radio-group>
+`;
+export const fullWidthWithIcons = () => html `
+  <div style="width:33vw;">
+    <calcite-label scale="${select("scale", ["s", "m", "l"], "m")}">
+      My great radio group
+      <calcite-radio-group
+        layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+        appearance="${select("appearance", ["solid", "outline"], "solid")}"
+        width="${select("width", ["auto", "full"], "full")}"
+        ${boolean("disabled", false)}
+      >
+        <calcite-radio-group-item icon="car" value="car" checked>Car</calcite-radio-group-item>
+        <calcite-radio-group-item icon="plane" value="plane">Plane</calcite-radio-group-item>
+        <calcite-radio-group-item icon="biking" value="bicycle">Bicycle</calcite-radio-group-item>
+      </calcite-radio-group>
+    </calcite-label>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-radio-group
+    class="calcite-theme-dark"
+    dir="rtl"
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    appearance="${select("appearance", ["solid", "outline"], "solid")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    width="${select("width", ["auto", "full"], "auto")}"
+    ${boolean("disabled", false)}
+  >
+    <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+    <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+    <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+    <calcite-radio-group-item value="vue">Vue</calcite-radio-group-item>
+  </calcite-radio-group>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-radio-group disabled>
+  <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+  <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+  <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+  <calcite-radio-group-item value="vue">Vue</calcite-radio-group-item>
+</calcite-radio-group>`;
+export const WithIconStartAndEnd = () => html ` <calcite-radio-group scale="s">
+  <calcite-radio-group-item icon-start="car" icon-end="car" value="car" checked icon="plane" icon-positon="end"
+    >Car</calcite-radio-group-item
+  >
+  <calcite-radio-group-item icon-end="plane" value="plane" icon="banana" icon-positon="start"
+    >Plane</calcite-radio-group-item
+  >
+  <calcite-radio-group-item icon-start="biking" icon-end="biking" value="bicycle" icon="car" icon-positon="start"
+    >Bicycle</calcite-radio-group-item
+  >
+  <calcite-radio-group-item value="nothing">Nothing</calcite-radio-group-item>
+</calcite-radio-group>`;