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

package/dist/collection/components/tabs/tabs.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, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -17,11 +17,11 @@ export class Tabs {
     //
     //--------------------------------------------------------------------------
     /**
-     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
+     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
      */
     this.layout = "inline";
     /**
-     * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
+     * Specifies the position of the component in relation to the `calcite-tab`s. The `"above"` and `"below"` values are deprecated.
      *
      */
     this.position = "top";
@@ -30,7 +30,7 @@ export class Tabs {
      */
     this.scale = "m";
     /**
-     * When true and layout is set to "inline", the component will display with a folder style menu.
+     * When `true` and `layout` is set to `"inline"`, the component will display with a folder style menu.
      */
     this.bordered = false;
     //--------------------------------------------------------------------------
@@ -186,7 +186,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (\"inline\"), or across and centered (\"center\")."
+          "text": "Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`\"inline\"`), or across and centered (`\"center\"`)."
         },
         "attribute": "layout",
         "reflect": true,
@@ -209,7 +209,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the position of the component in relation to the `calcite-tab`s. The \"above\" and \"below\" values are deprecated."
+          "text": "Specifies the position of the component in relation to the `calcite-tab`s. The `\"above\"` and `\"below\"` values are deprecated."
         },
         "attribute": "position",
         "reflect": true,
@@ -250,7 +250,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and layout is set to \"inline\", the component will display with a folder style menu."
+          "text": "When `true` and `layout` is set to `\"inline\"`, the component will display with a folder style menu."
         },
         "attribute": "bordered",
         "reflect": true,

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

@@ -0,0 +1,223 @@
+import { select, optionsKnob } from "@storybook/addon-knobs";
+import { createSteps, iconNames, stepStory, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import readme1 from "./readme.md";
+import readme2 from "../tab/readme.md";
+import readme3 from "../tab-nav/readme.md";
+import readme4 from "../tab-title/readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Tabs",
+    parameters: {
+        notes: [readme1, readme2, readme3, readme4]
+    },
+    ...storyFilters()
+};
+export const simple = stepStory(() => html `
+    <calcite-tabs
+      layout="${select("layout", ["inline", "center"], "inline")}"
+      position="${select("position", ["above", "below"], "above")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+    >
+      <calcite-tab-nav slot="tab-nav">
+        <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+        <calcite-tab-title id="reference-element">Tab 2 Title</calcite-tab-title>
+        <calcite-tab-title disabled>Disabled Tab</calcite-tab-title>
+        <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+      </calcite-tab-nav>
+
+      <calcite-tab active>
+        <p>Tab 1 Content</p><br />
+      </calcite-tab>
+      <calcite-tab><p>Tab 2 Content</p>
+      <img src="${placeholderImage({
+    width: 1000,
+    height: 200
+})}"></img>
+      </calcite-tab>
+      <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+      <calcite-tab><p>Tab 4 Content</p></calcite-tab>
+    </calcite-tabs>
+  `, createSteps("calcite-tabs").snapshot("simple").click("#reference-element").snapshot("horizontal scroll"));
+export const simpleDarkThemeRTL_TestOnly = () => html `
+  <calcite-tabs
+    dir="rtl"
+    class="calcite-theme-dark"
+    layout="${select("layout", ["inline", "center"], "inline")}"
+    position="${select("position", ["above", "below"], "above")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title disabled>Disabled Tab</calcite-tab-title>
+      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab active><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 4 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+simpleDarkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const bordered = () => html `
+  <calcite-tabs
+    layout="inline"
+    position="${select("position", ["above", "below"], "above")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    bordered
+  >
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title tab="tab1">Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab2">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab3">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab4" active>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab tab="tab1">Tab 1 Content</calcite-tab>
+    <calcite-tab tab="tab2">Tab 2 Content</calcite-tab>
+    <calcite-tab tab="tab3">Tab 3 Content</calcite-tab>
+    <calcite-tab tab="tab4" active>Tab 4 Content</calcite-tab>
+  </calcite-tabs>
+`;
+export const borderedDarkThemeRTL_TestOnly = () => html `
+  <calcite-tabs
+    layout="inline"
+    position="${select("position", ["above", "below"], "above")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    bordered
+    dir="rtl"
+    class="calcite-theme-dark"
+  >
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title tab="tab1">Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab2">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab3">Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title tab="tab4" active>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+    <calcite-tab tab="tab1">Tab 1 Content</calcite-tab>
+    <calcite-tab tab="tab2">Tab 2 Content</calcite-tab>
+    <calcite-tab tab="tab3">Tab 3 Content</calcite-tab>
+    <calcite-tab tab="tab4" active>Tab 4 Content</calcite-tab>
+  </calcite-tabs>
+`;
+borderedDarkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+const selectedIcon = iconNames[0];
+export const withIcons = () => html `
+  <calcite-tabs
+    layout="${select("layout", ["inline", "center"], "inline")}"
+    position="${select("position", ["above", "below"], "above")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title active icon-start="${select("tab 1 icon-start", iconNames, selectedIcon)}"
+        >Tab 1 Title</calcite-tab-title
+      >
+      <calcite-tab-title icon-end="${select("tab 2 icon-end", iconNames, selectedIcon)}">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title
+        icon-start="${select("tab 3 icon-start", iconNames, selectedIcon)}"
+        icon-end="${select("tab 3 icon-end", iconNames, selectedIcon)}"
+        >Tab 3 Title</calcite-tab-title
+      >
+      <calcite-tab-title icon-start="${select("tab 4 icon-start", iconNames, selectedIcon)}"></calcite-tab-title>
+    </calcite-tab-nav>
+
+    <calcite-tab active><p>Tab 1 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 4 Content</p></calcite-tab>
+  </calcite-tabs>
+`;
+export const setWidth = () => html `
+  <div style="width: 400px;">
+    <calcite-tabs
+    layout="${select("layout", ["inline", "center"], "inline")}"
+    position="${select("position", ["above", "below"], "above")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    >
+    <calcite-tab-nav slot="tab-nav">
+      <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
+      <calcite-tab-title id="reference-element">Tab 2 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+    </calcite-tab-nav>
+
+    <calcite-tab active>
+      <p>Tab 1 Content</p><br />
+    </calcite-tab>
+    <calcite-tab><p>Tab 2 Content</p>
+    <img src="${placeholderImage({
+    width: 1000,
+    height: 200
+})}"></img>
+    </calcite-tab>
+    <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+    <calcite-tab><p>Tab 4 Content</p></calcite-tab>
+    </calcite-tabs>
+  </div>
+`;
+export const justTabNav = () => html `
+  <calcite-tab-nav
+    position="${select("position", ["above", "below"], "below")}"
+    scale="${select("scale", ["s", "m", "l"], "l")}"
+  >
+    <calcite-tab-title>Tab 1 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+    <calcite-tab-title active>Tab 4 Title</calcite-tab-title>
+  </calcite-tab-nav>
+`;
+export const disabledTabs_TestOnly = () => {
+    const disabledLabel = "Disabled Tabs";
+    const disabledValuesObj = {
+        Tab1: "tab1",
+        Tab2: "tab2",
+        Tab3: "tab3"
+    };
+    const defaultValue = "tab2";
+    const optionsKnobSelections = optionsKnob(disabledLabel, disabledValuesObj, defaultValue, { display: "multi-select" }, "DISABLED-TABS");
+    const tab1disabled = optionsKnobSelections.includes(disabledValuesObj.Tab1);
+    const tab2disabled = optionsKnobSelections.includes(disabledValuesObj.Tab2);
+    const tab3disabled = optionsKnobSelections.includes(disabledValuesObj.Tab3);
+    return `
+      <calcite-tabs>
+        <calcite-tab-nav slot="tab-nav">
+          <calcite-tab-title active ${tab1disabled ? "disabled" : ""}>Tab 1 Title</calcite-tab-title>
+          <calcite-tab-title ${tab2disabled ? "disabled" : ""}>Tab 2 Title</calcite-tab-title>
+          <calcite-tab-title ${tab3disabled ? "disabled" : ""}>Tab 3 Title</calcite-tab-title>
+        </calcite-tab-nav>
+
+        <calcite-tab active><p>Tab 1 Content</p></calcite-tab>
+        <calcite-tab><p>Tab 2 Content</p></calcite-tab>
+        <calcite-tab><p>Tab 3 Content</p></calcite-tab>
+      </calcite-tabs>
+    `;
+};
+export const layoutCenter_TestOnly = () => html `<calcite-tabs layout="center">
+  <calcite-tab-nav slot="tab-nav">
+    <calcite-tab-title>Tab 1 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+    <calcite-tab-title>Tab 4 Title</calcite-tab-title>
+  </calcite-tab-nav>
+</calcite-tabs>`;
+export const WithIconStart_TestOnly = stepStory(() => html `
+    <calcite-tabs>
+      <calcite-tab-nav slot="tab-nav">
+        <calcite-tab-title active id="tab-title">Boats</calcite-tab-title>
+        <calcite-tab-title>Ships</calcite-tab-title>
+        <calcite-tab-title>Yachts</calcite-tab-title>
+      </calcite-tab-nav>
+      <calcite-tab active><calcite-button id="btn">Add indicator</calcite-button></calcite-tab>
+      <calcite-tab>Tab 2 content</calcite-tab>
+      <calcite-tab>Tab 3 content</calcite-tab>
+    </calcite-tabs>
+  `, createSteps("calcite-tabs")
+    .executeScript(`const tabtitle = document.getElementById("tab-title");
+      const button = document.getElementById("btn");
+      button.addEventListener("click", () => {
+      tabtitle.iconStart = "car";
+      });
+      `)
+    .click("calcite-button")
+    .snapshot("WithIconStart"));

package/dist/collection/components/tile/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 SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.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 { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -20,17 +20,17 @@ export class Tile {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      */
     this.active = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
      * The component's embed mode.
      *
-     * When true, renders without a border and padding for use by other components.
+     * When `true`, renders without a border and padding for use by other components.
      */
     this.embed = false;
     /**
@@ -39,7 +39,7 @@ export class Tile {
      * @internal
      */
     this.focused = false;
-    /** When true, the component is not displayed and is not focusable.  */
+    /** When `true`, the component is not displayed and is not focusable.  */
     this.hidden = false;
   }
   // --------------------------------------------------------------------------
@@ -101,7 +101,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -136,7 +136,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -154,7 +154,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's embed mode.\n\nWhen true, renders without a border and padding for use by other components."
+          "text": "The component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components."
         },
         "attribute": "embed",
         "reflect": true,
@@ -210,7 +210,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is not displayed and is not focusable."
+          "text": "When `true`, the component is not displayed and is not focusable."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -228,7 +228,7 @@ export class Tile {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When embed is \"false\", the url for the component."
+          "text": "When embed is `\"false\"`, the URL for the component."
         },
         "attribute": "href",
         "reflect": true

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

@@ -0,0 +1,81 @@
+import { select, text } 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/Tiles/Tile",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "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.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;
+export const largeTile = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description=""
+    heading="${text("heading", "Tile heading lorem ipsum!")}"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "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.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+    class="calcite-theme-dark"
+    dir="rtl"
+  >
+  </calcite-tile>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const contentStartRTL_TestOnly = () => html `
+  <calcite-tile
+    description="${text("description", "polygon layer")}"
+    heading="${text("heading", "Percent of population that carpool to work")}"
+    dir="rtl"
+  >
+    <calcite-icon scale="s" slot="content-start" icon="polygon"></calcite-icon>
+    <calcite-icon scale="s" slot="content-end" icon="launch"></calcite-icon>
+  </calcite-tile>
+`;
+export const overflowingContent_TestOnly = () => html `
+  <calcite-tile
+    icon="2d-explore"
+    heading="Example tile headinghfjkdlsahfjklsdahfjklsadhfjkldsahfjldkashfjdkalshfds;ahfjkldshafljkdsahfljksdahfdlsajkfhsadkljfhsdajklfhsdalkjfhdsalkjfhdsalf"
+    description="Example tile description contenthfjdkslahfjkdsalhf sdajklfh ksdjahfljksadhfljkdsahfjklsdahfjlkdsahflkjdsahfjkdsahflkdjsahfldksajhfdsklajhfdsljkahfdsajkfhsadlkjfsadhfdsa"
+    style="width:200px"
+  ></calcite-tile>
+`;
+export const disabled_TestOnly = () => html `
+  <calcite-tile
+    ${boolean("active", false)}
+    description="${text("description", "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.")}"
+    ${boolean("disabled", false)}
+    heading="${text("heading", "Tile heading lorem ipsum")}"
+    ${boolean("hidden", false)}
+    href="${text("href", "#")}"
+    icon="${select("icon", iconNames, "layer")}"
+  >
+  </calcite-tile>
+`;

package/dist/collection/components/tile-select/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 = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.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 { guid } from "../../utils/guid";
@@ -17,15 +17,15 @@ export class TileSelect {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is checked. */
+    /** When `true`, the component is checked. */
     this.checked = false;
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** When true, the component is not displayed and is not focusable or checkable. */
+    /** When `true`, the component is not displayed and is not focusable or checkable. */
     this.hidden = false;
-    /** When true, displays an interactive input based on the "type" property. */
+    /** When `true`, displays an interactive input based on the `type` property. */
     this.inputEnabled = false;
-    /** When inputEnabled is true, the placement of the interactive input on the component. */
+    /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */
     this.inputAlignment = "start";
     /**
      * The selection mode of the component.
@@ -206,7 +206,7 @@ export class TileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is checked."
+          "text": "When `true`, the component is checked."
         },
         "attribute": "checked",
         "reflect": true,
@@ -241,7 +241,7 @@ export class TileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -276,7 +276,7 @@ export class TileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is not displayed and is not focusable or checkable."
+          "text": "When `true`, the component is not displayed and is not focusable or checkable."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -328,7 +328,7 @@ export class TileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays an interactive input based on the \"type\" property."
+          "text": "When `true`, displays an interactive input based on the `type` property."
         },
         "attribute": "input-enabled",
         "reflect": true,
@@ -354,7 +354,7 @@ export class TileSelect {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When inputEnabled is true, the placement of the interactive input on the component."
+          "text": "When `inputEnabled` is `true`, specifies the placement of the interactive input on the component."
         },
         "attribute": "input-alignment",
         "reflect": true,