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

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

@@ -1,44 +0,0 @@
-import { select, text } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Avatar",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-avatar
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    full-name="${text("full-name", "John Doe")}"
-    username="${text("username", "jdoe")}"
-    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
-    thumbnail="${text("thumbnail", placeholderImage({ width: 120, height: 120 }))}"
-  >
-  </calcite-avatar>
-`;
-export const missingThumbnail = () => html `
-  <calcite-avatar
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    full-name="${text("full-name", "John Doe")}"
-    username="${text("username", "jdoe")}"
-    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
-  >
-  </calcite-avatar>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-avatar
-    dir="rtl"
-    class="calcite-theme-dark"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    full-name="${text("full-name", "John Doe")}"
-    username="${text("username", "jdoe")}"
-    user-id="${text("user-id", "9a7c50e6b3ce4b859f7b31e302437164")}"
-  >
-  </calcite-avatar>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,158 +0,0 @@
-import { boolean, number, select, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import blockReadme from "./readme.md";
-import sectionReadme from "../block-section/readme.md";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Block",
-    parameters: {
-        notes: {
-            block: blockReadme,
-            section: sectionReadme
-        }
-    },
-    ...storyFilters()
-};
-const createBlockAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const group = "block";
-    return filterComponentAttributes([
-        {
-            name: "heading",
-            commit() {
-                this.value = text("heading", "Heading", group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "summary",
-            commit() {
-                this.value = text("summary", "summary", group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "open",
-            commit() {
-                this.value = boolean("open", true, group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "collapsible",
-            commit() {
-                this.value = boolean("collapsible", true, group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false, group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false, group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "heading-level",
-            commit() {
-                this.value = number("heading-level", 2, { min: 1, max: 6, step: 1 }, group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-collapse",
-            commit() {
-                this.value = text("intlCollapse", "Collapse", group);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-expand",
-            commit() {
-                this.value = text("intlExpand", "Expand", group);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const createSectionAttributes = () => {
-    const group = "section (animals)";
-    const toggleDisplayOptions = ["button", "switch"];
-    return [
-        {
-            name: "text",
-            value: text("text", "Animals", group)
-        },
-        {
-            name: "open",
-            value: boolean("open", true, group)
-        },
-        {
-            name: "toggle-display",
-            value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)
-        },
-        {
-            name: "intl-collapse",
-            value: text("intlCollapse", "Collapse", group)
-        },
-        {
-            name: "intl-expand",
-            value: text("intlExpand", "Expand", group)
-        }
-    ];
-};
-export const simple = () => create("calcite-block", createBlockAttributes(), html `
-      ${create("calcite-block-section", createSectionAttributes(), `<img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />`)}
-
-      <calcite-block-section text="Nature" open>
-        <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
-      </calcite-block-section>
-    `);
-export const withHeaderControl = () => create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<label slot="control">test <input placeholder="I'm a header control"/></label>`);
-export const withIconAndHeader = () => create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<div slot="icon">✅</div>`);
-export const disabled_TestOnly = () => html `<calcite-block
-  heading="heading"
-  summary="summary"
-  open
-  collapsible
-  disabled
->
-  <calcite-block-section text="Nature" open>
-    <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
-  </calcite-block-section>
-</calcite-block>`;
-export const paddingDisabled_TestOnly = () => html ` <calcite-panel heading="Properties">
-  <calcite-block heading="Example block heading" summary="example summary heading" collapsible open disable-padding>
-    <div>calcite components ninja</div>
-  </calcite-block>
-</calcite-panel>`;
-export const darkThemeRTL_TestOnly = () => create("calcite-block", createBlockAttributes({ exceptions: ["dir"] }).concat({
-    name: "class",
-    value: "calcite-theme-dark"
-}, { name: "dir", value: "rtl" }), html `
-      ${create("calcite-block-section", createSectionAttributes(), `<img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />`)}
-
-      <calcite-block-section text="Nature" open>
-        <img alt="demo" src="${placeholderImage({ width: 320, height: 240 })}" />
-      </calcite-block-section>
-    `);
-export const contentCanTakeFullHeight_TestOnly = () => html `<calcite-block open heading="Heading" summary="summary" style="height: 250px">
-    <div style="background: red; height: 100%;">should take full width of the content area</div>
-  </calcite-block>`;

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

@@ -1,129 +0,0 @@
-import { text, select } from "@storybook/addon-knobs";
-import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-export default {
-    title: "Components/Buttons/Button",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-button
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("round", false)}
-    href="${text("href", "")}"
-    ${boolean("loading", false)}
-    ${boolean("disabled", false)}
-    width="${select("width", ["auto", "half", "full"], "auto")}"
-  >
-    ${text("text", "button text here")}
-  </calcite-button>
-`;
-export const withIconStart = () => html `
-  <calcite-button
-    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("round", false)}
-    href="${text("href", "")}"
-    ${boolean("loading", false)}
-    ${boolean("disabled", false)}
-  >
-    ${text("text", "button text here")}
-  </calcite-button>
-`;
-withIconStart.storyName = "With icon-start";
-export const withIconEnd = () => html `
-  <calcite-button
-    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("round", false)}
-    href="${text("href", "")}"
-    ${boolean("loading", false)}
-    ${boolean("disabled", false)}
-    width="${select("width", ["auto", "half", "full"], "auto")}"
-  >
-    ${text("text", "button text here")}
-  </calcite-button>
-`;
-withIconEnd.storyName = "With icon-end";
-export const withIconStartAndIconEnd = () => html `
-  <calcite-button
-    alignment="${select("alignment", ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"], "center")}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("round", false)}
-    href="${text("href", "")}"
-    ${boolean("loading", false)}
-    ${boolean("disabled", false)}
-    width="${select("width", ["auto", "half", "full"], "auto")}"
-  >
-    ${text("text", "button text here")}
-  </calcite-button>
-`;
-withIconStartAndIconEnd.storyName = "With icon-start and icon-end";
-export const setWidthContainer = () => html `
-  <div style="width: 480px; max-width: 100%; background-color: #fff">
-    <calcite-button
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    >
-      ${text("text", "button text here")}
-    </calcite-button>
-  </div>
-`;
-export const disabled_TestOnly = () => html `<calcite-button disabled>disabled</calcite-button>`;
-export const withIconStartEmpty_TestOnly = () => html ` <calcite-button icon-start> Button </calcite-button>`;
-withIconStartEmpty_TestOnly.storyName = "With icon-start set to empty";
-export const withIconEndEmpty_TestOnly = () => html ` <calcite-button icon-end> Button </calcite-button>`;
-withIconEndEmpty_TestOnly.storyName = "With icon-end set to empty";
-export const sideBySide_TestOnly = () => html `
-  <div style="width: 300px; max-width: 100%; display: flex; flex-direction: row; background-color: #fff">
-    <calcite-button
-      width="half"
-      appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "outline")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    >
-      ${text("text", "Back")}
-    </calcite-button>
-    <calcite-button
-      width="half"
-      appearance="${select("appearance-2", ["solid", "clear", "outline", "transparent"], "solid")}"
-      color="${select("color-2", ["blue", "red", "neutral", "inverse"], "blue")}"
-      icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    >
-      ${text("text-2", "Some long string")}
-    </calcite-button>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-button
-    class="calcite-theme-dark"
-    dir="rtl"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("round", false)}
-    href="${text("href", "")}"
-    ${boolean("loading", false)}
-    ${boolean("disabled", false)}
-    icon-start="${select("icon-start", iconNames, iconNames[0])}"
-    icon-end="${select("icon-end", iconNames, iconNames[0])}"
-  >
-    ${text("text", "button text here")}
-  </calcite-button>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,225 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { placeholderImage, themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
-import { storyFilters } from "../../../.storybook/helpers";
-import { TEXT } from "./resources";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-export default {
-    title: "Components/Card",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const { logicalFlowPosition } = ATTRIBUTES;
-    return filterComponentAttributes([
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "selected",
-            commit() {
-                this.value = boolean("selected", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "selectable",
-            commit() {
-                this.value = boolean("selectable", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-loading",
-            commit() {
-                this.value = text("intl-loading", TEXT.loading);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-select",
-            commit() {
-                this.value = text("intl-select", TEXT.select);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-deselect",
-            commit() {
-                this.value = text("intl-deselect", TEXT.deselect);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "thumbnail-position",
-            commit() {
-                this.value = select("thumbnail-position", logicalFlowPosition.values, logicalFlowPosition.defaultValue);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const titleHtml = html `
-  <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
-  <span slot="subtitle">
-    A great example of a study description that might wrap to a line or two, but isn't overly verbose.
-  </span>
-`;
-const footerButtonHtml = html ` <calcite-button slot="footer-leading" width="full">Go</calcite-button> `;
-const footerLeadingTextHtml = html `<span slot="footer-leading">Nov 25, 2018</span>`;
-const footerLinksHtml = html `
-  <calcite-link class="calcite-theme-dark" slot="footer-leading">Lead footer</calcite-link>
-  <calcite-link class="calcite-theme-dark" slot="footer-trailing">Trail footer</calcite-link>
-`;
-const thumbnailHtml = html `<img
-  alt="thumbnail"
-  slot="thumbnail"
-  src="${placeholderImage({
-    width: 380,
-    height: 180
-})}"
-  style="width: 380px;"
-/> `;
-const footerTrailingButtonsHtml = html `
-  <div slot="footer-trailing">
-    <calcite-button id="card-icon-test-6" scale="s" appearance="transparent" color="neutral" icon-start="circle">
-    </calcite-button>
-    <calcite-button id="card-icon-test-7" scale="s" appearance="transparent" color="neutral" icon-start="circle">
-    </calcite-button>
-  </div>
-`;
-const tooltipHtml = html `
-  <calcite-tooltip placement="top-start" reference-element="card-icon-test-6">Configure</calcite-tooltip>
-  <calcite-tooltip placement="bottom-start" reference-element="card-icon-test-7">Delete</calcite-tooltip>
-`;
-export const simple = () => html ` <div style="width: 260px">
-  ${create("calcite-card", createAttributes(), titleHtml)}
-</div>`;
-export const simpleWithFooterLinks = () => html `
-  <div style="width:260px">${create("calcite-card", createAttributes(), html `${titleHtml}${footerLinksHtml}`)}</div>
-`;
-export const simpleWithFooterButton = () => html `
-  <div style="width:260px">${create("calcite-card", createAttributes(), html `${titleHtml}${footerButtonHtml}`)}</div>
-`;
-export const simpleWithFooterTextButtonTooltip_NoTest = () => html `
-  <div style="width:260px">
-    ${create("calcite-card", createAttributes(), html `${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}`)}
-  </div>
-  ${tooltipHtml}
-`;
-export const thumbnail = () => html `
-  <div style="width:260px">
-    ${create("calcite-card", createAttributes(), html `
-        ${thumbnailHtml}
-        <h3 slot="title">Portland Businesses</h3>
-        <span slot="subtitle"
-          >by
-          <calcite-link href="">example_user</calcite-link>
-        </span>
-        <div>
-          Created: Apr 22, 2019
-          <br />
-          Updated: Dec 9, 2019
-          <br />
-          View Count: 0
-        </div>
-        <calcite-button
-          slot="footer-leading"
-          color="neutral"
-          scale="s"
-          id="card-icon-test-1"
-          icon-start="circle"
-        ></calcite-button>
-        <div slot="footer-trailing">
-          <calcite-button scale="s" color="neutral" id="card-icon-test-2" icon-start="circle"></calcite-button>
-          <calcite-button scale="s" color="neutral" id="card-icon-test-3" icon-start="circle"></calcite-button>
-          <calcite-dropdown type="hover">
-            <calcite-button
-              id="card-icon-test-5"
-              slot="dropdown-trigger"
-              scale="s"
-              color="neutral"
-              icon-start="circle"
-            ></calcite-button>
-            <calcite-dropdown-group selection-mode="none">
-              <calcite-dropdown-item>View details</calcite-dropdown-item>
-              <calcite-dropdown-item>Duplicate</calcite-dropdown-item>
-              <calcite-dropdown-item>Delete</calcite-dropdown-item>
-            </calcite-dropdown-group>
-          </calcite-dropdown>
-        </div>
-      `)}
-    <calcite-tooltip placement="bottom-start" reference-element="card-icon-test-1"
-      >My great tooltip example
-    </calcite-tooltip>
-    <calcite-tooltip placement="bottom-start" reference-element="card-icon-test-2">Sharing level: 2 </calcite-tooltip>
-    <calcite-tooltip placement="top-end" reference-element="card-icon-test-3">More... </calcite-tooltip>
-    <calcite-tooltip placement="top-start" reference-element="card-icon-test-5">More options </calcite-tooltip>
-  </div>
-`;
-export const thumbnailRounded = () => html `
-  <div id="card-container" style="width:260px;">
-    <style>
-      calcite-card {
-        --calcite-border-radius-base: 12px;
-      }
-    </style>
-    <calcite-card>
-      ${thumbnailHtml}
-      <h3 slot="title">Portland Businesses</h3>
-      <span slot="subtitle"
-        >by
-        <calcite-link href="">example_user</calcite-link>
-      </span>
-      <div>
-        Created: Apr 22, 2019
-        <br />
-        Updated: Dec 9, 2019
-        <br />
-        View Count: 0
-      </div>
-      <calcite-button
-        slot="footer-leading"
-        color="neutral"
-        scale="s"
-        id="card-icon-test-1"
-        icon-start="circle"
-      ></calcite-button>
-    </calcite-card>
-  </div>
-`;
-export const headerDoesNotOverlapWithCheckbox_TestOnly = () => html `
-  <calcite-card selectable style="width:260px">
-    <h3 slot="title">Pokem ipsum dolor sit amet Skitty Hoothoot</h3>
-    <span slot="subtitle"
-      >Pika-pi Soul Badge Zoroark Starly Spoink Diglett Rotom. Water Kyogre Hitmontop Rampardos</span
-    >
-    <p>
-      Team Rocket Whimsicott Snover Duskull Servine Kakuna Bellsprout. Scratch Shelgon Oddish Hitmonchan Quagsire Earth
-      Badge Leaf Green. Pika-pi Bonsly Rare Candy Seadra blast off at the speed of light Shellos Kirlia. Celadon City
-      Seviper Omanyte Espeon Body Slam Victini Darumaka. Normal Krookodile Junichi Masuda Machoke Body Slam Zigzagoon to
-      protect the world from devastation.
-    </p>
-  </calcite-card>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div dir="rtl" style="width:260px;">
-    <calcite-card>${thumbnailHtml}${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}</calcite-card>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,43 +0,0 @@
-import { select, text } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { filterComponentAttributes, createComponentHTML as create } from "../../../.storybook/utils";
-import { createSteps, stepStory } from "../../../.storybook/helpers";
-import { Keys } from "screener-storybook/src/screener";
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([], exceptions);
-};
-export default {
-    title: "Components/Controls/Checkbox",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-label layout="inline">
-    <calcite-checkbox
-      ${boolean("checked", true)}
-      ${boolean("disabled", false)}
-      ${boolean("indeterminate", false)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-    ></calcite-checkbox>
-    ${text("label", "Checkbox")}
-  </calcite-label>
-`;
-export const disabled_TestOnly = () => html `<calcite-checkbox checked disabled></calcite-checkbox>`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-label dir="rtl" layout="inline" class="calcite-theme-dark">
-    <calcite-checkbox
-      ${boolean("checked", true)}
-      ${boolean("disabled", false)}
-      ${boolean("indeterminate", false)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-    ></calcite-checkbox>
-    ${text("label", "Checkbox")}
-  </calcite-label>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const keyboardNavigation_TestOnly = stepStory(() => html `${create("calcite-checkbox", createAttributes())}`, createSteps("calcite-checkbox").keys("body", Keys.tab).snapshot("focus"));