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

package/dist/collection/components/flow/flow.stories.js

@@ -0,0 +1,151 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import itemReadme from "../panel/readme.md";
+import { SLOTS, TEXT } from "../panel/resources";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Flow",
+    parameters: {
+        notes: {
+            flow: readme,
+            item: itemReadme
+        }
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    return filterComponentAttributes([], exceptions);
+};
+const createFlowItemAttributes = (group) => {
+    return [
+        {
+            name: "disabled",
+            value: boolean("disabled", false, group)
+        },
+        {
+            name: "heading",
+            value: text("heading", "Heading", group)
+        },
+        {
+            name: "loading",
+            value: boolean("loading", false, group)
+        },
+        {
+            name: "menu-open",
+            value: boolean("menuOpen", false, group)
+        },
+        {
+            name: "description",
+            value: text("description", "Description", group)
+        },
+        {
+            name: "intl-back",
+            value: text("intlBack", TEXT.back, group)
+        },
+        {
+            name: "intl-open",
+            value: text("intlOpen", TEXT.open, group)
+        },
+        {
+            name: "intl-close",
+            value: text("intlClose", TEXT.close, group)
+        }
+    ];
+};
+const menuActionsHTML = html `
+  <calcite-action
+    slot="${SLOTS.headerMenuActions}"
+    text-enabled
+    text="Add"
+    label="Add Item"
+    icon="plus"
+  ></calcite-action>
+  <calcite-action
+    slot="${SLOTS.headerMenuActions}"
+    text-enabled
+    text="Save"
+    label="Save Item"
+    icon="save"
+  ></calcite-action>
+  <calcite-action
+    slot="${SLOTS.headerMenuActions}"
+    text-enabled
+    text="Layers"
+    label="View Layers"
+    icon="layers"
+  ></calcite-action>
+`;
+const footerActionsHTML = html `
+  <calcite-button slot="${SLOTS.footerActions}" width="half" appearance="clear">Cancel</calcite-button>
+  <calcite-button slot="${SLOTS.footerActions}" width="half">Save</button>
+`;
+function createItemHTML(content) {
+    return `${menuActionsHTML}${content}${footerActionsHTML}`;
+}
+const item1HTML = html `
+  <p>
+    Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
+    semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus
+    habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non.
+    Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti
+    consectetur. Non porttitor tempor orci dictumst magna porta vitae.
+  </p>
+  <p>
+    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
+    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
+    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
+    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
+    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
+    leo.
+  </p>
+  <p>
+    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
+    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
+    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
+    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
+    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
+  </p>
+  <p>
+    Magna ligula neque phasellus. Velit duis auctor etiam nullam sociis nam neque quis. Donec fusce bibendum quam
+    egestas sociosqu orci tempus vulputate egestas penatibus urna sociosqu. Nulla nam potenti diam egestas litora
+    lobortis tristique maecenas pulvinar maecenas vitae tortor. Lacus purus facilisi est accumsan varius gravida
+    facilisis rutrum tortor potenti rhoncus id. Ipsum praesent tristique blandit taciti morbi torquent pharetra
+    fermentum aenean!
+  </p>
+  <p>
+    Congue eu duis integer nisl molestie nostra dis auctor lobortis tellus parturient. Porttitor dis curae; maecenas
+    quis praesent ridiculus posuere mus. Dictumst, vivamus fames semper congue fusce! Nunc placerat enim fermentum
+    posuere magna justo habitasse. Tristique placerat mauris, per nulla gravida dui urna ut nec venenatis! Non lacus
+    iaculis quisque, neque erat integer. Duis tortor ad habitant turpis dis eu mollis at facilisis. Tellus nisl amet
+    morbi fringilla mus dui neque himenaeos maecenas platea venenatis. Tristique nisl quisque ad aliquam senectus
+    pulvinar litora.
+  </p>
+`;
+const item2HTML = html `
+  <ul>
+    <li>
+      Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
+      arcu. Cras consequat.
+    </li>
+    <li>
+      Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam
+      erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+    </li>
+    <li>
+      Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
+      Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+    </li>
+    <li>
+      Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+    </li>
+  </ul>
+`;
+export const simple = () => create("calcite-flow", createAttributes(), `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}
+    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`);
+export const darkThemeRTL_TestOnly = () => create("calcite-flow", createAttributes({ exceptions: ["dir"] }).concat({
+    name: "class",
+    value: "calcite-theme-dark"
+}, { name: "dir", value: "rtl" }), `${create("calcite-flow-item", createFlowItemAttributes("Flow Item 1"), createItemHTML(item1HTML))}
+    ${create("calcite-flow-item", createFlowItemAttributes("Flow Item 2"), createItemHTML(item2HTML))}`);

package/dist/collection/components/flow/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   frame: "frame",

package/dist/collection/components/flow-item/flow-item.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -61,6 +61,9 @@ export class FlowItem {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
+    this.setContainerRef = (node) => {
+      this.containerEl = node;
+    };
     this.getBackLabel = () => {
       return this.intlBack || TEXT.back;
     };
@@ -102,7 +105,7 @@ export class FlowItem {
    */
   async scrollContentTo(options) {
     var _a;
-    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options);
+    await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options));
   }
   // --------------------------------------------------------------------------
   //
@@ -120,7 +123,7 @@ export class FlowItem {
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, heightScale, intlBack, intlClose, intlOptions, loading, menuOpen, widthScale, backButtonEl } = this;
     const label = this.getBackLabel();
-    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlBack: intlBack, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, widthScale: widthScale }, h("slot", { name: SLOTS.headerActionsStart, slot: PANEL_SLOTS.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: PANEL_SLOTS.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: PANEL_SLOTS.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: PANEL_SLOTS.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: PANEL_SLOTS.fab }), h("slot", { name: SLOTS.footerActions, slot: PANEL_SLOTS.footerActions }), h("slot", { name: SLOTS.footer, slot: PANEL_SLOTS.footer }), h("slot", null), this.renderBackButton()), backButtonEl ? (h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
+    return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlBack: intlBack, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, ref: this.setContainerRef, widthScale: widthScale }, h("slot", { name: SLOTS.headerActionsStart, slot: PANEL_SLOTS.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: PANEL_SLOTS.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: PANEL_SLOTS.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: PANEL_SLOTS.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: PANEL_SLOTS.fab }), h("slot", { name: SLOTS.footerActions, slot: PANEL_SLOTS.footerActions }), h("slot", { name: SLOTS.footer, slot: PANEL_SLOTS.footer }), h("slot", null), this.renderBackButton()), backButtonEl ? (h("calcite-tooltip", { label: label, placement: "auto", referenceElement: backButtonEl }, label)) : null));
   }
   static get is() { return "calcite-flow-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/flow-item/flow-item.stories.js

@@ -0,0 +1,181 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { createComponentHTML as create, filterComponentAttributes, themesDarkDefault } from "../../../.storybook/utils";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import readme from "./readme.md";
+import { SLOTS, TEXT } from "./resources";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Flow Item",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const { scale } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "dismissed",
+            commit() {
+                this.value = boolean("dismissed", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "disabled",
+            commit() {
+                this.value = boolean("disabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "dismissible",
+            commit() {
+                this.value = boolean("dismissible", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "height-scale",
+            commit() {
+                this.value = select("heightScale", scale.values, scale.defaultValue);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "loading",
+            commit() {
+                this.value = boolean("loading", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-close",
+            commit() {
+                this.value = text("intlClose", TEXT.close);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;
+const contentHTML = html `
+  <p>
+    Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
+    semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus
+    habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non.
+    Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti
+    consectetur. Non porttitor tempor orci dictumst magna porta vitae.
+  </p>
+  <p>
+    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
+    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
+    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
+    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
+    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
+    leo.
+  </p>
+  <p>
+    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
+    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
+    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
+    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
+    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
+  </p>
+`;
+const footerHTML = html `
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+`;
+const flowItemContent = `${headerHTML}
+  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
+  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
+  ${contentHTML}
+  ${footerHTML}`;
+export const simple = () => create("calcite-flow-item", createAttributes(), html `
+      ${headerHTML}
+      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
+      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
+      ${contentHTML}
+      <calcite-fab slot="fab"></calcite-fab>
+      ${footerHTML}
+    `);
+export const onlyProps = () => html `
+  <div style="width: 300px;">
+    <calcite-flow-item
+      height-scale="s"
+      heading-level="${text("heading-level", "2")}"
+      summary="${text("summary", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
+      heading="${text("heading", "flowItem title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum")}"
+    />
+  </div>
+`;
+export const disabledWithStyledSlot_TestOnly = () => html `
+  <calcite-flow-item style="height: 100%;" heading="Heading" disabled>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+  </calcite-flow-item>
+`;
+export const darkThemeRTL_TestOnly = () => create("calcite-flow-item", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    {
+        name: "dir",
+        value: "rtl"
+    },
+    {
+        name: "class",
+        value: "calcite-theme-dark"
+    }
+]), flowItemContent);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const noDoubleScrollbars_TestOnly = () => html `
+  <style>
+    #container {
+      display: flex;
+      max-height: 540px;
+      width: 300px;
+    }
+
+    .content {
+      height: 100%;
+      display: flex;
+      padding: 10px;
+      overflow-y: auto; /* Control scrollbar via child */
+    }
+  </style>
+  <div id="container">
+    <calcite-flow>
+      <calcite-flow-item heading="Example">
+        <div>### Stickied Content e.g. toolbar</div>
+        <div class="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec,
+          sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue
+          est malesuada quis. Proin tincidunt lacus laoreet mauris fringilla accumsan. Cras nec enim eu lectus suscipit
+          vestibulum a laoreet arcu. Duis posuere nunc vel enim blandit, nec vehicula orci aliquam. Vestibulum hendrerit
+          mi vel nisi posuere accumsan. Aenean efficitur est id cursus convallis. Morbi turpis ante, sodales eu tortor
+          eu, mattis bibendum purus. Morbi iaculis nisl nunc, quis accumsan quam laoreet vitae. Aliquam ex ligula,
+          ornare eu ex vitae, tincidunt venenatis lacus. Phasellus risus quam, elementum sed justo porttitor,
+          ullamcorper mattis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+          curae; Nulla non dui at metus porta lacinia congue sit amet quam. Mauris viverra diam neque, in blandit leo
+          vehicula et. Donec non purus vitae nunc tincidunt egestas. Nunc pretium enim magna, sed fringilla lacus
+          viverra in. Nam et pretium nisi. Ut bibendum, ipsum sit amet egestas hendrerit, quam orci sollicitudin purus,
+          sit amet finibus mauris erat in eros. Integer est dui, vehicula a ipsum id, pellentesque semper elit. Fusce
+          euismod volutpat eros vitae imperdiet. Nam suscipit lacus id posuere pharetra. Cras eros ipsum, feugiat non
+          leo non, ornare malesuada eros. Donec egestas purus non quam tempus commodo. Maecenas ex augue, euismod eget
+          magna in, dapibus fermentum felis. Phasellus justo felis, sollicitudin ut ex sed, lobortis scelerisque sem.
+          Pellentesque semper placerat velit, sit amet viverra tortor ultricies eu. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus feugiat, augue in molestie
+          imperdiet, felis turpis facilisis tortor, at tempus purus risus et sapien. Fusce id nisi id orci elementum
+          sollicitudin. Nam id libero eu odio efficitur rutrum maximus porta lorem. Nunc tristique interdum augue,
+          sodales viverra lectus efficitur vitae. Nam molestie, neque consequat mollis pulvinar, sapien sem semper nunc,
+          et euismod enim sem vitae ligula.
+        </div>
+      </calcite-flow-item>
+    </calcite-flow>
+  </div>
+`;

package/dist/collection/components/flow-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   backButton: "back-button"

package/dist/collection/components/functional/ExpandToggle.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/functional/Heading.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {

package/dist/collection/components/graph/graph.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h, forceUpdate } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/graph/graph.stories.js

@@ -0,0 +1,77 @@
+import { number } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Controls/Slider/support/Graph",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const data = [
+    [0, 0],
+    [10, 80],
+    [20, 20],
+    [30, 30],
+    [40, 42],
+    [50, 50],
+    [60, 55],
+    [70, 48],
+    [80, 30],
+    [90, 10],
+    [100, 0]
+];
+const rainbow = ["red", "orange", "yellow", "green", "cyan", "blue", "violet"];
+const colorStops = rainbow.map((color, i) => ({ offset: (1 / (rainbow.length - 1)) * i, color }));
+export const simple = () => {
+    const div = document.createElement("div");
+    div.style.width = `${number("width", 300)}px`;
+    div.style.height = `${number("height", 100)}px`;
+    const graph = document.createElement("calcite-graph");
+    graph.min = number("min", 0);
+    graph.max = number("max", 100);
+    graph.data = data;
+    div.appendChild(graph);
+    return div;
+};
+export const highlightRange = () => {
+    const div = document.createElement("div");
+    div.style.width = `${number("width", 300)}px`;
+    div.style.height = `${number("height", 100)}px`;
+    const graph = document.createElement("calcite-graph");
+    graph.min = number("min", 0);
+    graph.max = number("max", 100);
+    graph.highlightMin = number("highlightMin", 25);
+    graph.highlightMax = number("highlightMax", 75);
+    graph.data = data;
+    div.appendChild(graph);
+    return div;
+};
+export const withColorStops = () => {
+    const div = document.createElement("div");
+    div.style.width = `${number("width", 300)}px`;
+    div.style.height = `${number("height", 100)}px`;
+    const graph = document.createElement("calcite-graph");
+    graph.min = number("min", 0);
+    graph.max = number("max", 100);
+    graph.colorStops = colorStops;
+    graph.data = data;
+    div.appendChild(graph);
+    return div;
+};
+export const darkThemeRTL_TestOnly = () => {
+    const div = document.createElement("div");
+    div.style.width = `${number("width", 300)}px`;
+    div.style.height = `${number("height", 100)}px`;
+    div.dir = "rtl";
+    div.classList.add("calcite-theme-dark");
+    const graph = document.createElement("calcite-graph");
+    graph.min = number("min", 0);
+    graph.max = number("max", 100);
+    graph.highlightMin = number("highlightMin", 25);
+    graph.highlightMax = number("highlightMax", 75);
+    graph.colorStops = colorStops;
+    graph.data = data;
+    div.appendChild(graph);
+    return div;
+};

package/dist/collection/components/graph/util.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 /**
  * Calculate slope of the tangents

package/dist/collection/components/handle/handle.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/handle/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   handle: "handle",

package/dist/collection/components/icon/icon.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { Build, h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/icon/icon.stories.js

@@ -0,0 +1,26 @@
+import { select } from "@storybook/addon-knobs";
+import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Icon",
+    parameters: { notes: readme },
+    ...storyFilters()
+};
+const sampleIcon = iconNames.find((item) => item === "arrowRight");
+export const simple = () => html `
+  <calcite-icon
+    icon="${select("icon", iconNames, sampleIcon)}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-icon>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-icon
+    class="calcite-theme-dark"
+    dir="rtl"
+    icon="${select("icon", iconNames, sampleIcon)}"
+    ${boolean("flip-rtl", true)}
+  ></calcite-icon>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/icon/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/icon/utils.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { getAssetPath } from "@stencil/core";
 /**

package/dist/collection/components/inline-editable/inline-editable.js

@@ -1,7 +1,7 @@
 /*!
  * 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.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";