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

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

@@ -1,227 +0,0 @@
-import { text, number, array, boolean as booleanFn, select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Controls/Slider",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-slider
-    min="${number("min", 0)}"
-    max="${number("max", 100)}"
-    value="${number("value", 50)}"
-    step="${number("step", 1)}"
-    min-label="${text("min-label", "Temperature")}"
-    ${boolean("disabled", false)}
-    ${boolean("label-handles", false)}
-    ${boolean("label-ticks", false)}
-    ticks="${number("ticks", 0)}"
-    page-step="${number("page-step", 5)}"
-    ${boolean("precise", false)}
-    ${boolean("mirrored", false)}
-    ${boolean("snap", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-slider>
-`;
-export const range = () => html `
-  <calcite-slider
-    min="${number("min", 0)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 25)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 75)}"
-    step="${number("step", 1)}"
-    ${boolean("label-handles", false)}
-    ${boolean("label-ticks", false)}
-    ticks="${number("ticks", 20)}"
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-    ${boolean("mirrored", false)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-slider>
-`;
-export const darkThemeMirroredRange_TestOnly = () => html `
-  <calcite-slider
-    class="calcite-theme-dark"
-    mirrored
-    min="${number("min", 0)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 25)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 75)}"
-    step="${number("step", 1)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ticks="${number("ticks", 20)}"
-    ${boolean("precise", true)}
-    ${boolean("snap", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-slider>
-`;
-darkThemeMirroredRange_TestOnly.story = {
-    parameters: { themes: themesDarkDefault }
-};
-export const rangeLabeledTicks_TestOnly = () => html `
-  <calcite-slider
-    min="${number("min", 5)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 95)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 100)}"
-    step="${number("step", 10)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-  ></calcite-slider>
-`;
-export const rangeLabeledTicksOverlappingAtMax_TestOnly = () => html `
-  <calcite-slider
-    min="${number("min", 5)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 100)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 100)}"
-    step="${number("step", 10)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-  ></calcite-slider>
-`;
-export const rangeLabeledTicksOverlappingAtMin_TestOnly = () => html `
-  <calcite-slider
-    min="${number("min", 5)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 5)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 5)}"
-    step="${number("step", 10)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-  ></calcite-slider>
-`;
-export const rangeLabeledTicksEdgePositioningAtMax_TestOnly = () => html `
-  <calcite-slider
-    min="${number("min", 5)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 99.5)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 100)}"
-    step="${number("step", 10)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-  ></calcite-slider>
-`;
-export const rangeLabeledTicksEdgePositioningAtMin_TestOnly = () => html `
-  <calcite-slider
-    min="${number("min", 5)}"
-    min-label="${text("min-label", "Temperature, lower bound")}"
-    min-value="${number("min-value", 5)}"
-    max="${number("max", 100)}"
-    max-label="${text("max-label", "Temperature, upper bound")}"
-    max-value="${number("max-value", 5.5)}"
-    step="${number("step", 10)}"
-    ${boolean("label-handles", true)}
-    ${boolean("label-ticks", true)}
-    ${boolean("precise", false)}
-    ${boolean("snap", true)}
-  ></calcite-slider>
-`;
-export const Histogram = () => {
-    const slider = document.createElement("calcite-slider");
-    slider.min = number("min", -100);
-    slider.minValue = number("min-value", -33.32);
-    slider.max = number("max", 100);
-    slider.maxValue = number("max-value", 30.87);
-    slider.histogram = array("histogram", [
-        [-90, 0],
-        [-60, 12],
-        [-20, 25],
-        [20, 55],
-        [60, 10],
-        [90, 0]
-    ], "  ");
-    slider.labelHandles = booleanFn("label-handles", false);
-    slider.labelTicks = booleanFn("label-ticks", false);
-    slider.ticks = number("ticks", 10);
-    slider.precise = booleanFn("precise", false);
-    slider.snap = booleanFn("snap", false);
-    slider.scale = select("scale", ["s", "m", "l"], "m");
-    slider.style.minWidth = "60vw";
-    return slider;
-};
-export const HistogramWithColors = () => {
-    const slider = document.createElement("calcite-slider");
-    slider.min = number("min", 0);
-    slider.minValue = number("min-value", 35);
-    slider.max = number("max", 100);
-    slider.maxValue = number("max-value", 55);
-    slider.histogram = array("histogram", [
-        [0, 0],
-        [20, 12],
-        [40, 25],
-        [60, 55],
-        [80, 10],
-        [100, 0]
-    ], "  ");
-    slider.style.minWidth = "60vw";
-    const colors = array("histogram colors", ["red", "green", "blue"]);
-    const offsets = array("histogram color offsets", colors.map((_, i) => `${(1 / (colors.length - 1)) * i}`));
-    slider.histogramStops = colors.map((color, i) => ({ offset: parseFloat(offsets[i]), color }));
-    slider.scale = select("scale", ["s", "m", "l"], "m");
-    return slider;
-};
-export const darkThemeHistogramRTL_TestOnly = () => {
-    const slider = document.createElement("calcite-slider");
-    slider.min = number("min", 0);
-    slider.minValue = number("min-value", 25);
-    slider.max = number("max", 100);
-    slider.maxValue = number("max-value", 75);
-    slider.histogram = array("histogram", [
-        [0, 0],
-        [20, 12],
-        [40, 25],
-        [60, 55],
-        [80, 10],
-        [100, 0]
-    ], "  ");
-    slider.labelHandles = booleanFn("label-handles", false);
-    slider.labelTicks = booleanFn("label-ticks", false);
-    slider.ticks = number("ticks", 10);
-    slider.precise = booleanFn("precise", false);
-    slider.snap = booleanFn("snap", false);
-    slider.scale = select("scale", ["s", "m", "l"], "m");
-    slider.style.minWidth = "60vw";
-    slider.className = "calcite-theme-dark";
-    return slider;
-};
-darkThemeHistogramRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const disabled_TestOnly = () => html `<calcite-slider disabled value="5"></calcite-slider>`;
-export const wordBreakDoesNotAffectLabels_TestOnly = () => html `<calcite-slider
-    min="-100"
-    max="100"
-    min-value="-100"
-    max-value="100"
-    step="10"
-    ticks="10"
-    label-handles
-    label-ticks
-    style="word-break: break-all"
-  ></calcite-slider>`;
-export const WithLabelHandlesAndNoValue_TestOnly = () => html ` <calcite-slider max="750"></calcite-slider> `;

package/dist/collection/components/split-button/split-button.stories.js

@@ -1,112 +0,0 @@
-import { text, 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/Buttons/Split Button",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:70vw;">
-    <calcite-split-button
-      active
-      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-      scale="${select("size", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      ${boolean("loading", false)}
-      ${boolean("disabled", false)}
-      primary-icon-start="${select("primary-icon-start", iconNames, iconNames[0])}"
-      primary-text="${text("primary-text", "Primary Option")}"
-      primary-label="${text("primary-label", "Primary Option")}"
-      dropdown-label="${text("dropdown-label", "Additional Options")}"
-      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
-    >
-      <calcite-dropdown-group selection-mode="none">
-        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-split-button>
-  </div>
-`;
-export const iconEnd_TestOnly = () => html `
-  <div style="width:70vw;">
-    <calcite-split-button
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-      scale="${select("size", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      ${boolean("loading", false)}
-      ${boolean("disabled", false)}
-      primary-icon-end="${select("primary-icon-end", iconNames, iconNames[0])}"
-      primary-text="${text("primary-text", "Primary Option")}"
-      primary-label="${text("primary-label", "Primary Option")}"
-      dropdown-label="${text("dropdown-label", "Additional Options")}"
-      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
-    >
-      <calcite-dropdown-group selection-mode="none">
-        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-split-button>
-  </div>
-`;
-export const iconStartAndIconEnd = () => html `
-  <div style="width:70vw;">
-    <calcite-split-button
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-      scale="${select("size", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      ${boolean("loading", false)}
-      ${boolean("disabled", false)}
-      primary-icon-start="${select("primary-icon-end", iconNames, iconNames[0])}"
-      primary-icon-end="${select("primary-icon-end", iconNames, iconNames[0])}"
-      primary-text="${text("primary-text", "Primary Option")}"
-      primary-label="${text("primary-label", "Primary Option")}"
-      dropdown-label="${text("dropdown-label", "Additional Options")}"
-      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
-    >
-      <calcite-dropdown-group selection-mode="none">
-        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-split-button>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div style="width:70vw;">
-    <calcite-split-button
-      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-      scale="${select("size", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      ${boolean("loading", false)}
-      ${boolean("disabled", false)}
-      primary-icon-start="${select("primary-icon-start", iconNames, iconNames[0])}"
-      primary-text="${text("primary-text", "Primary Option")}"
-      dropdown-label="${text("dropdown-label", "Additional Options")}"
-      dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
-      class="calcite-theme-dark"
-    >
-      <calcite-dropdown-group selection-mode="none">
-        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-      </calcite-dropdown-group>
-    </calcite-split-button>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const disabled_TestOnly = () => html `<calcite-split-button disabled>
-  <calcite-dropdown-group selection-mode="none">
-    <calcite-dropdown-item>Option 2</calcite-dropdown-item>
-    <calcite-dropdown-item>Option 3</calcite-dropdown-item>
-    <calcite-dropdown-item>Option 4</calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-split-button>`;

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

@@ -1,163 +0,0 @@
-import { select, text } from "@storybook/addon-knobs";
-import { boolean, createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme1 from "./readme.md";
-import readme2 from "../stepper-item/readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Stepper",
-    parameters: {
-        notes: [readme1, readme2]
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <h1>Default</h1>
-  <calcite-stepper
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("numbered", true)}
-    ${boolean("icon", true)}
-  >
-    <calcite-stepper-item
-      item-title="${text("item-1-title", "Choose method")}"
-      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
-      complete
-    >
-      <calcite-notice active width="full"><div slot="message">Step 1 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-2-title", "Compile member list")}"
-      item-subtitle="${text("item-2-subtitle", "")}"
-      complete
-      error
-    >
-      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-3-title", "Set member properties")}"
-      item-subtitle="${text("item-3-subtitle", "")}"
-      active
-    >
-      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-4-title", "Confirm and complete")}"
-      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
-      disabled
-    >
-      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-  </calcite-stepper>
-  <h1>No Content</h1>
-  <calcite-stepper
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("numbered", true)}
-    ${boolean("icon", true)}
-  >
-    <calcite-stepper-item
-      item-title="${text("item-1-title", "Choose method")}"
-      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
-      complete
-    >
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-2-title", "Compile member list")}"
-      item-subtitle="${text("item-2-subtitle", "")}"
-      complete
-      error
-    >
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-3-title", "Set member properties")}"
-      item-subtitle="${text("item-3-subtitle", "")}"
-      selected
-    >
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-4-title", "Confirm and complete")}"
-      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
-      disabled
-    >
-    </calcite-stepper-item>
-  </calcite-stepper>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-<div dir="rtl">
-  <calcite-stepper
-  class="calcite-theme-dark"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("numbered", true)}
-    ${boolean("icon", true)}
-  >
-    <calcite-stepper-item
-      item-title="${text("item-1-title", "Choose method")}"
-      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
-      complete
-    >
-      <calcite-notice active width="full"><div slot=message">Step 1 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-2-title", "Compile member list")}"
-      item-subtitle="${text("item-2-subtitle", "")}"
-      complete
-      error
-    >
-      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-3-title", "Set member properties")}"
-      item-subtitle="${text("item-3-subtitle", "")}"
-      active
-    >
-      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      item-title="${text("item-4-title", "Confirm and complete")}"
-      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
-      disabled
-    >
-      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
-    </calcite-stepper-item>
-  </calcite-stepper>
-</div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const minHeight_TestOnly = stepStory(() => html `<calcite-stepper style="min-height: 500px;">
-    <calcite-stepper-item item-title="Title one" id="one"> Step one </calcite-stepper-item>
-    <calcite-stepper-item item-title="Title two"> Step two </calcite-stepper-item>
-    <calcite-stepper-item item-title="Title three"> Step three </calcite-stepper-item>
-  </calcite-stepper>`, createSteps("calcite-stepper").click("#one").snapshot("stepper with min-height"));
-export const overriddenWidth_TestOnly = () => html ` <calcite-stepper numbered style="width: 50vw">
-  <calcite-stepper-item item-title="Choose method" item-subtitle="Add members without sending invitations" complete>
-    <calcite-notice active width="full">
-      <div slot="message">Step 1 Content Goes Here</div>
-    </calcite-notice>
-  </calcite-stepper-item>
-  <calcite-stepper-item item-title="Compile member list" complete error>
-    <calcite-notice active width="full">
-      <div slot="message">Step 2 Content Goes Here</div>
-    </calcite-notice>
-  </calcite-stepper-item>
-  <calcite-stepper-item item-title="Set member properties" item-subtitle="" active="">
-    <calcite-notice active width="full">
-      <div slot="message">Step 3 Content Goes Here</div>
-    </calcite-notice>
-  </calcite-stepper-item>
-  <calcite-stepper-item item-title="Confirm and complete" item-subtitle="Disabled example" disabled="">
-    <calcite-notice active width="full">
-      <div slot="message">Step 4 Content Goes Here</div>
-    </calcite-notice>
-  </calcite-stepper-item>
-</calcite-stepper>`;
-export const disabled_TestOnly = () => html `<calcite-stepper>
-  <calcite-stepper-item item-title="item1" complete>1</calcite-stepper-item>
-  <calcite-stepper-item item-title="item2">2</calcite-stepper-item>
-  <calcite-stepper-item item-title="item3" active>3</calcite-stepper-item>
-  <calcite-stepper-item item-title="item4" disabled>4</calcite-stepper-item>
-</calcite-stepper>`;

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

@@ -1,32 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { themesDarkDefault } from "../../../.storybook/utils";
-export default {
-    title: "Components/Controls/Switch",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-switch
-    name="setting"
-    value="enabled"
-    ${boolean("checked", true)}
-    ${boolean("disabled", false)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-switch>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-switch
-    class="calcite-theme-dark"
-    name="setting"
-    value="enabled"
-    ${boolean("checked", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  ></calcite-switch>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const disabled_TestOnly = () => html `<calcite-switch disabled checked></calcite-switch>`;