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

package/dist/collection/components/input-number/input-number.stories.js

@@ -1,124 +0,0 @@
-import { select, text, number } from "@storybook/addon-knobs";
-import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Controls/Input Number",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-number
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-    </calcite-input-number>
-  </div>
-`;
-export const withInputMessage = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-number
-      id="input-with-label-and-input-message"
-      status="${select("status", ["idle", "invalid", "valid"], "idle", "Input")}"
-      alignment="${select("alignment", ["start", "end"], "start", "Input")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal", "Input")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "", "Input")}"
-      suffix-text="${text("suffix-text", "", "Input")}"
-      ${boolean("loading", false)}
-      ${boolean("autofocus", false)}
-      ${boolean("required", false)}
-      value="${text("value", "", "Input")}"
-      placeholder="${text("placeholder", "Placeholder text", "Input")}"
-    >
-    </calcite-input-number>
-    <calcite-input-message
-      ${boolean("active", true)}
-      ${boolean("icon", false)}
-      icon="${select("icon", iconNames, "", "Input Message")}"
-      >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
-    >
-  </div>
-`;
-export const withSlottedAction = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-number
-      id="input-with-slotted-action"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-      min="${number("min", 0)}"
-      max="${number("max", 100)}"
-      step="${number("step", 1)}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-      <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
-    </calcite-input-number>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div dir="rtl" style="width:300px;max-width:100%;text-align:center;">
-    <calcite-label
-      class="calcite-theme-dark"
-      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
-      for="input-dark-theme"
-    >
-      ${text("label text", "My great label")}
-      <calcite-input-number
-        id="input-dark-theme"
-        status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-        alignment="${select("alignment", ["start", "end"], "start")}"
-        number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
-        min="${number("min", 0)}"
-        max="${number("max", 100)}"
-        step="${number("step", 1)}"
-        prefix-text="${text("prefix-text", "")}"
-        suffix-text="${text("suffix-text", "")}"
-        ${boolean("loading", false)}
-        ${boolean("clearable", false)}
-        ${boolean("disabled", false)}
-        value="${text("value", "")}"
-        placeholder="${text("placeholder", "Placeholder text")}"
-      >
-      </calcite-input-number>
-      <calcite-input-message
-        ${boolean("calcite-input-message-active", true)}
-        status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-        >${text("input message text", "My great input message")}</calcite-input-message
-      >
-    </calcite-label>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const hebrewNumberingSystem_TestOnly = () => html `<calcite-input-number lang="ar-EG" numbering-system="hebr" value="123456"></calcite-input-number>`;
-export const arabicLocaleWithLatinNumberingSystem_TestOnly = () => html `<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;

package/dist/collection/components/input-text/input-text.stories.js

@@ -1,99 +0,0 @@
-import { select, text } from "@storybook/addon-knobs";
-import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Controls/Input Text",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-text
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-    </calcite-input-text>
-  </div>
-`;
-export const withInputMessage = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-text
-      id="input-with-label-and-input-message"
-      status="${select("status", ["idle", "invalid", "valid"], "idle", "Input")}"
-      alignment="${select("alignment", ["start", "end"], "start", "Input")}"
-      prefix-text="${text("prefix-text", "", "Input")}"
-      suffix-text="${text("suffix-text", "", "Input")}"
-      ${boolean("loading", false)}
-      ${boolean("autofocus", false)}
-      ${boolean("required", false)}
-      value="${text("value", "", "Input")}"
-      placeholder="${text("placeholder", "Placeholder text", "Input")}"
-    >
-    </calcite-input-text>
-    <calcite-input-message
-      ${boolean("active", true)}
-      ${boolean("icon", false)}
-      icon="${select("icon", iconNames, "", "Input Message")}"
-      >${text("input message text", "My great input message", "Input Message")}</calcite-input-message
-    >
-  </div>
-`;
-export const withSlottedAction = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-text
-      id="input-with-slotted-action"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-      <calcite-button slot="action">${text("action button text", "Go")}</calcite-button>
-    </calcite-input-text>
-    <calcite-input-message
-      ${boolean("input-message-active", false)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-input-text
-      id="input-dark-theme"
-      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
-      alignment="${select("alignment", ["start", "end"], "start")}"
-      prefix-text="${text("prefix-text", "")}"
-      suffix-text="${text("suffix-text", "")}"
-      ${boolean("loading", false)}
-      ${boolean("clearable", false)}
-      ${boolean("disabled", false)}
-      value="${text("value", "")}"
-      placeholder="${text("placeholder", "Placeholder text")}"
-    >
-    </calcite-input-text>
-    <calcite-input-message
-      ${boolean("calcite-input-message-active", true)}
-      status="${select("input message status", ["idle", "valid", "invalid"], "idle")}"
-      >${text("input message text", "My great input message")}</calcite-input-message
-    >
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/input-time-picker/input-time-picker.stories.js

@@ -1,77 +0,0 @@
-import { number, select, text } 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";
-import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
-export default {
-    title: "Components/Controls/Time/Input Time Picker",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "simple")}"
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "10:37")}"
-  >
-  </calcite-input-time-picker>
-`;
-export const disabled_TestOnly = () => html `<calcite-input-time-picker disabled></calcite-input-time-picker>`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    class="calcite-theme-dark"
-    name="${text("name", "dark")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "22:37")}"
-  >
-  </calcite-input-time-picker>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const open_TestOnly = () => html `
-  <calcite-input-time-picker
-    name="${text("name", "placement-top")}"
-    value="${text("value", "10:37")}"
-    ${boolean("open", true)}
-  >
-  </calcite-input-time-picker>
-`;
-export const koreanLocale_TestOnly = () => html `
-  <calcite-input-time-picker
-    id="reference-element"
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "light")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "10:37")}"
-    lang="ko"
-    open
-  >
-  </calcite-input-time-picker>
-`;
-export const arabicLocaleNumberingSystem_TestOnly = () => html `
-  <calcite-input-time-picker
-    id="reference-element"
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "light")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "1:33:7")}"
-    lang="ar"
-    numbering-system="arab"
-    dir="rtl"
-    open
-  >
-  </calcite-input-time-picker>
-`;

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

@@ -1,178 +0,0 @@
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Label",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-label>
-      Default label wrapping a switch
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label>
-      Default label wrapping a radio group
-      <calcite-radio-group>
-        <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>
-    </calcite-label>
-    <calcite-label layout="inline">
-      Text leading inline
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label layout="inline">
-      <calcite-switch></calcite-switch>
-      Text trailing inline
-    </calcite-label>
-    <calcite-label layout="inline">
-      Off
-      <calcite-switch></calcite-switch>
-      On
-    </calcite-label>
-    <calcite-label layout="inline">
-      Text leading inline
-      <calcite-checkbox></calcite-checkbox>
-    </calcite-label>
-    <calcite-label>
-      Focus slider test
-      <calcite-slider></calcite-slider>
-    </calcite-label>
-    <calcite-label>
-      Focus slider test
-      <calcite-slider min-value="10" max-value="80"></calcite-slider>
-    </calcite-label>
-    <calcite-label layout="inline">
-      <calcite-checkbox></calcite-checkbox>
-      Text trailing inline
-    </calcite-label>
-    <calcite-label layout="inline-space-between">
-      Text leading inline-space-between
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label layout="inline-space-between">
-      <calcite-switch></calcite-switch>
-      Text trailing inline-space-between
-    </calcite-label>
-    <calcite-label layout="inline-space-between">
-      Text leading inline-space-between
-      <calcite-checkbox></calcite-checkbox>
-    </calcite-label>
-    <calcite-label layout="inline-space-between">
-      <calcite-checkbox></calcite-checkbox>
-      Text trailing inline-space-between
-    </calcite-label>
-    <calcite-label>
-      Default label wrapping a select
-      <calcite-select>
-        <calcite-option>a</calcite-option>
-        <calcite-option>b</calcite-option>
-        <calcite-option>c</calcite-option>
-      </calcite-select>
-    </calcite-label>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div style="width:300px;max-width:100%;text-align:center;" class="calcite-theme-dark" dir="rtl">
-    <calcite-label class="calcite-theme-dark">
-      Default label wrapping a switch
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark">
-      Default label wrapping a radio group
-      <calcite-radio-group>
-        <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>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline">
-      Text leading inline
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline">
-      <calcite-switch></calcite-switch>
-      Text trailing inline
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline">
-      Off
-      <calcite-switch></calcite-switch>
-      On
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline">
-      Text leading inline
-      <calcite-checkbox></calcite-checkbox>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark">
-      Focus slider test
-      <calcite-slider></calcite-slider>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark">
-      Focus slider test
-      <calcite-slider min-value="10" max-value="80"></calcite-slider>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline">
-      <calcite-checkbox></calcite-checkbox>
-      Text trailing inline
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
-      Text leading inline-space-between
-      <calcite-switch></calcite-switch>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
-      <calcite-switch></calcite-switch>
-      Text trailing inline-space-between
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
-      Text leading inline-space-between
-      <calcite-checkbox></calcite-checkbox>
-    </calcite-label>
-    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
-      <calcite-checkbox></calcite-checkbox>
-      Text trailing inline-space-between
-    </calcite-label>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const toggleSwitchWithLabel_TestOnly = stepStory(() => html `<calcite-label layout="inline">
-    Toggle theme
-    <calcite-switch id="theme-switch"></calcite-switch>
-  </calcite-label>`, createSteps("calcite-label").click("calcite-label").snapshot("Toggle switch with label"));
-export const spacingWithLabel_TestOnly = () => html `
-  <style>
-    .css-var {
-      --calcite-label-margin-bottom: 0;
-    }
-  </style>
-  <calcite-label class="css-var">
-    I don't have a bottom margin because the document I am rendered in has overridden the --calcite-label-margin-bottom
-    css variable to 0.
-    <calcite-input></calcite-input>
-  </calcite-label>
-  <calcite-label disable-spacing class="css-var">
-    I should still not have a bottom margin because I'm using the disable-spacing prop.
-    <calcite-input></calcite-input>
-  </calcite-label>
-  <calcite-label>
-    I should have a bottom margin
-    <calcite-input></calcite-input>
-  </calcite-label>
-  <calcite-label>
-    I should also have a bottom margin
-    <calcite-input></calcite-input>
-  </calcite-label>
-  <calcite-label disable-spacing>
-    I should not have a bottom margin because I have disable-spacing set.
-    <calcite-input></calcite-input>
-  </calcite-label>
-  <calcite-label disable-spacing>
-    I should not have a bottom margin because I have disable-spacing set.
-    <calcite-input></calcite-input>
-  </calcite-label>
-`;

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

@@ -1,89 +0,0 @@
-import { text, select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import * as icons from "../../../node_modules/@esri/calcite-ui-icons";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-// we can get all unique icon names from all size 16 non-filled icons.
-const iconNames = Object.keys(icons)
-    .filter((iconName) => iconName.endsWith("16"))
-    .map((iconName) => iconName.replace("16", ""));
-export default {
-    title: "Components/Link",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div
-    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
-  >
-    Some wrapping text
-    <calcite-link href="${text("href", "")}" ${boolean("disabled", false)}>
-      ${text("text", "link text here")}</calcite-link
-    >
-    around the link
-  </div>
-`;
-export const iconStart = () => html `
-  <div
-    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
-  >
-    Some wrapping text
-    <calcite-link
-      href="${text("href", "")}"
-      ${boolean("disabled", false)}
-      icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    >
-      ${text("text", "link text here")}</calcite-link
-    >
-    around the link
-  </div>
-`;
-export const iconEnd = () => html `
-  <div
-    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
-  >
-    Some wrapping text
-    <calcite-link
-      href="${text("href", "")}"
-      ${boolean("disabled", false)}
-      icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    >
-      ${text("text", "link text here")}</calcite-link
-    >
-    around the link
-  </div>
-`;
-export const iconStartAndIconEnd = () => html `
-  <div
-    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
-  >
-    Some wrapping text
-    <calcite-link
-      href="${text("href", "")}"
-      ${boolean("disabled", false)}
-      icon-start="${select("icon-start", iconNames, iconNames[0])}"
-      icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    >
-      ${text("text", "link text here")}</calcite-link
-    >
-    around the link
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div
-    class="calcite-theme-dark"
-    dir="rtl"
-    style="color: white; font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
-  >
-    Some wrapping text
-    <calcite-link class="calcite-theme-dark" href="${text("href", "")}" ${boolean("disabled", false)}
-      >${text("text", "link text here")}</calcite-link
-    >
-    around the link
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const disabled_TestOnly = () => html `<calcite-link disabled>disabled</calcite-link`;