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

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

@@ -0,0 +1,225 @@
+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/card/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 = {
   container: "container",

package/dist/collection/components/checkbox/checkbox.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 { guid } from "../../utils/guid";

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

@@ -0,0 +1,43 @@
+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"));

package/dist/collection/components/chip/chip.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 { getSlotted } from "../../utils/dom";

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

@@ -0,0 +1,85 @@
+import { select } from "@storybook/addon-knobs";
+import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Chip",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="background-color:white;padding:100px">
+    <calcite-chip
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      appearance="${select("appearance", ["solid", "clear"], "solid")}"
+      color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
+      ${boolean("closable", false)}
+      >My great chip</calcite-chip
+    >
+  </div>
+`;
+export const withIcon = () => html `
+  <div style="background-color:white;padding:100px">
+    <calcite-chip
+      icon="${select("icon", iconNames, iconNames[0])}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      appearance="${select("appearance", ["solid", "clear"], "solid")}"
+      color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
+      ${boolean("closable", false)}
+    >
+      My great chip</calcite-chip
+    >
+  </div>
+`;
+export const withImage = () => html `
+  <div style="background-color:white;padding:100px">
+    <calcite-chip
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      appearance="${select("appearance", ["solid", "clear"], "solid")}"
+      color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
+      ${boolean("closable", false)}
+    >
+      <img alt="" slot="image" src="${placeholderImage({ width: 50, height: 50 })}" />
+      My great chip</calcite-chip
+    >
+  </div>
+`;
+export const withAvatar = () => {
+    const scale = select("scale", ["s", "m", "l"], "m");
+    return html `
+    <div style="background-color:white;padding:100px">
+      <calcite-chip
+        scale="${scale}"
+        appearance="${select("appearance", ["solid", "clear"], "solid")}"
+        color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
+        ${boolean("closable", false)}
+      >
+        <calcite-avatar
+          slot="image"
+          scale="${scale}"
+          user-id="25684463a00c449585dbb32a065f6b74"
+          full-name="user name"
+        ></calcite-avatar>
+        User Name
+      </calcite-chip>
+    </div>
+  `;
+};
+export const overriddenIconColor = () => html `<calcite-chip icon="banana" style="--calcite-ui-icon-color: #ac9f42" closable>Banana</calcite-chip>`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="background-color:#2b2b2b;padding:100px" dir="rtl">
+    <calcite-chip
+      class="calcite-theme-dark"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      appearance="${select("appearance", ["solid", "clear"], "solid")}"
+      color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
+      ${boolean("closable", false)}
+      >My great chip</calcite-chip
+    >
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/chip/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 = {
   title: "title",

package/dist/collection/components/color-picker/color-picker.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 Color from "color";

package/dist/collection/components/color-picker/color-picker.stories.js

@@ -0,0 +1,80 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import colorReadme from "./readme.md";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import { html } from "../../../support/formatting";
+import { createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Controls/ColorPicker",
+    parameters: {
+        notes: colorReadme
+    },
+    ...storyFilters()
+};
+const createColorAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const { scale } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "hide-channels",
+            commit() {
+                this.value = boolean("hide-channels", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "hide-hex",
+            commit() {
+                this.value = boolean("hide-hex", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "hide-saved",
+            commit() {
+                this.value = boolean("hide-saved", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "scale",
+            commit() {
+                this.value = select("scale", scale.values, scale.defaultValue);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+export const simple = () => create("calcite-color-picker", [
+    {
+        name: "allow-empty",
+        value: boolean("allow-empty", false)
+    },
+    ...createColorAttributes(),
+    {
+        name: "value",
+        value: text("value", "#b33f33")
+    }
+]);
+export const disabled_TestOnly = () => html `<calcite-color-picker disabled></calcite-color-picker>`;
+export const darkThemeRTL_TestOnly = () => create("calcite-color-picker", [
+    ...createColorAttributes({ exceptions: ["dir"] }).concat({ name: "dir", value: "rtl" }),
+    { name: "class", value: "calcite-theme-dark" },
+    {
+        name: "value",
+        value: text("value", "#b33f33")
+    }
+]);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const thumbsOnEdgeDoNotOverflowContainer_TestOnly = () => html `<div
+  style="overflow: auto; width: 274px;"
+>
+  <calcite-color-picker value="#04006e"></calcite-color-picker>
+</div>`;
+export const thumbsOnEdgeDoNotSnapToFrontOfContainer_TestOnly = () => html `<calcite-color-picker value="#824142"></calcite-color-picker>`;
+export const colorFieldAndHueSliderAreResizedAfterScaleChange_TestOnly = stepStory(() => html ` <calcite-color-picker scale="m"></calcite-color-picker>`, createSteps("calcite-color-picker")
+    .executeScript(`document.querySelector("calcite-color-picker").scale = "s"`)
+    .snapshot("Color field and hue slider are resized after scale change"));

package/dist/collection/components/color-picker/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
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/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
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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 { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";

package/dist/collection/components/color-picker-hex-input/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 = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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 Color from "color";

package/dist/collection/components/color-picker-swatch/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 = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.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 { filter } from "../../utils/filter";