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

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

@@ -1,223 +0,0 @@
-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/tile.stories.js

@@ -1,81 +0,0 @@
-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/tile-select.stories.js

@@ -1,137 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { iconNames, storyFilters } from "../../../.storybook/helpers";
-import { createComponentHTML as create, filterComponentAttributes } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Tiles/Tile Select",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "checked",
-            commit() {
-                this.value = boolean("checked", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "description",
-            commit() {
-                this.value = text("description", "");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "heading",
-            commit() {
-                this.value = text("heading", "");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "hidden",
-            commit() {
-                this.value = boolean("hidden", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "icon",
-            commit() {
-                this.value = select("icon", ["", ...iconNames], "");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "input-alignment",
-            commit() {
-                this.value = select("input-alignment", ["start", "end"], "start");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "input-enabled",
-            commit() {
-                this.value = boolean("input-enabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "type",
-            commit() {
-                this.value = select("type", ["radio", "checkbox"], "radio");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "value",
-            commit() {
-                this.value = text("value", "one");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "width",
-            commit() {
-                this.value = select("width", ["auto", "full"], "auto");
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-export const simple = () => html `${create("calcite-tile-select", createAttributes())}`;
-export const checkbox_TestOnly = () => html `<calcite-tile-select icon="check" heading="test" value="one" type="checkbox"></calcite-tile-select>`;
-export const radio_TestOnly = () => html `<calcite-tile-select icon="list-radio" heading="test" value="one" type="radio"></calcite-tile-select>`;
-export const checkboxDarkThemeRTL_TestOnly = () => html `<calcite-tile-select
-    class="calcite-theme-dark"
-    dir="rtl"
-    icon="check"
-    heading="test"
-    value="one"
-    type="checkbox"
-  ></calcite-tile-select>`;
-export const radioDarkThemeRTL_TestOnly = () => html `<calcite-tile-select
-    class="calcite-theme-dark"
-    dir="rtl"
-    icon="list-radio"
-    heading="test"
-    value="one"
-    type="radio"
-  ></calcite-tile-select>`;
-export const checkboxWidthFull_TestOnly = () => html `<calcite-tile-select
-    icon="check"
-    heading="test"
-    value="one"
-    type="checkbox"
-    width="full"
-  ></calcite-tile-select>`;
-export const radioWidthFull_TestOnly = () => html `<calcite-tile-select
-    icon="list-radio"
-    heading="test"
-    value="one"
-    type="radio"
-    width="full"
-  ></calcite-tile-select>`;

package/dist/collection/components/tile-select-group/tile-select-group.stories.js

@@ -1,89 +0,0 @@
-import { select, boolean } from "@storybook/addon-knobs";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Tiles/Tile Select Group",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const tileSelectsHTML = () => html `
-  <calcite-tile-select
-    checked
-    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.  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."
-    heading="Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum"
-    icon="layers"
-    name="light"
-    ${boolean("input-enabled", true, "Tile Select") && "input-enabled"}
-    input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}"
-    width="${select("width", ["full", "auto"], "auto", "Tile Select")}"
-    type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}"
-    value="one"
-  >
-  </calcite-tile-select>
-  <calcite-tile-select
-    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."
-    heading="Tile title lorem ipsum"
-    icon="layers"
-    name="light"
-    ${boolean("input-enabled", true, "Tile Select") && "input-enabled"}
-    input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}"
-    width="${select("width", ["full", "auto"], "auto", "Tile Select")}"
-    type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}"
-    value="two"
-  >
-  </calcite-tile-select>
-  <calcite-tile-select
-    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. 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."
-    heading="Tile title lorem ipsum"
-    icon="layers"
-    name="light"
-    ${boolean("input-enabled", true, "Tile Select") && "input-enabled"}
-    input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}"
-    width="${select("width", ["full", "auto"], "auto", "Tile Select")}"
-    type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}"
-    value="three"
-  >
-  </calcite-tile-select>
-  <calcite-tile-select
-    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.  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."
-    heading="TiletitleloremipsumTiletitleloremipsumTiletitleloremipsumTiletitleloremipsumTiletitleloremipsumTiletitleloremipsum"
-    icon="layers"
-    name="light"
-    ${boolean("input-enabled", true, "Tile Select") && "input-enabled"}
-    input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}"
-    width="${select("width", ["full", "auto"], "auto", "Tile Select")}"
-    type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}"
-    value="four"
-  >
-  </calcite-tile-select>
-`;
-export const simple = () => html `
-  <calcite-tile-select-group
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal", "Tile Select Group")}"
-    dir="${select("dir", ["ltr", "rtl"], "ltr", "Tile Select Group")}"
-  >
-    ${tileSelectsHTML()}
-  </calcite-tile-select-group>
-`;
-export const disabled_TestOnly = () => html `
-  <calcite-tile-select-group
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal", "Tile Select Group")}"
-    dir="${select("dir", ["ltr", "rtl"], "ltr", "Tile Select Group")}"
-  >
-    ${tileSelectsHTML()}
-  </calcite-tile-select-group>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-tile-select-group
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal", "Tile Select Group")}"
-    dir="${select("dir", ["ltr", "rtl"], "rtl", "Tile Select Group")}"
-    class="calcite-theme-dark"
-  >
-    ${tileSelectsHTML()}
-  </calcite-tile-select-group>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,60 +0,0 @@
-import { boolean, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import groupReadme from "../tip-group/readme.md";
-import { TEXT } from "./resources";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Tips/Tip",
-    parameters: {
-        notes: [readme, groupReadme]
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "dismissed",
-            commit() {
-                this.value = boolean("dismissed", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "non-dismissible",
-            commit() {
-                this.value = boolean("nonDismissible", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "heading",
-            commit() {
-                this.value = text("heading", "My Tip");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-close",
-            commit() {
-                this.value = text("intlClose", TEXT.close);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const html = `<img slot="thumbnail" src="${placeholderImage({
-    width: 1000,
-    height: 600
-})}" alt="This is an image." />Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae. </div><a href="http://www.esri.com">This is a link</a>.`;
-export const simple = () => create("calcite-tip", createAttributes(), html);
-export const darkThemeRTL_TestOnly = () => create("calcite-tip", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    { name: "dir", value: "rtl" },
-    { name: "class", value: "calcite-theme-dark" }
-]), html);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };