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

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

@@ -1,115 +0,0 @@
-import { boolean, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { TEXT } from "./resources";
-import { html } from "../../../support/formatting";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Tips/Tip Manager",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "closed",
-            commit() {
-                this.value = boolean("closed", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-close",
-            commit() {
-                this.value = text("intlClose", TEXT.close);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-default-title",
-            commit() {
-                this.value = text("intlDefaultTitle", TEXT.defaultGroupTitle);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-pagination-label",
-            commit() {
-                this.value = text("intlPaginationLabel", TEXT.defaultPaginationLabel);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-next",
-            commit() {
-                this.value = text("intlNext", TEXT.next);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-previous",
-            commit() {
-                this.value = text("intlPrevious", TEXT.previous);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const tipContent = html `
-  <calcite-tip-group group-title="Astronomy">
-    <calcite-tip heading="The Red Rocks and Blue Water" heading-level="2">
-      <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 600 })}" alt="This is an image." />
-      <p>
-        This tip is how a tip should really look. It has a landscape or square image and a small amount of text content.
-        This paragraph is in an "info" slot.
-      </p>
-      <p>
-        This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is a
-        placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful
-        content (also called greeking). Replacing the actual content with placeholder text allows designers to design
-        the form of the content before the content itself has been produced.
-      </p>
-      <a href="http://www.esri.com">This is the "link" slot.</a>
-    </calcite-tip>
-    <calcite-tip heading="The Long Trees">
-      <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 600 })}" alt="This is an image." />
-      <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
-      <p>In astronomy, the terms object and body are often used interchangeably.</p>
-      <a href="http://www.esri.com">View Esri</a>
-    </calcite-tip>
-  </calcite-tip-group>
-  <calcite-tip heading="Square Nature">
-    <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 1000 })}" alt="This is an image." />
-    <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
-    <p>In astronomy, the terms object and body are often used interchangeably.</p>
-    <p>
-      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form
-      of a document without relying on meaningful content (also called greeking). Replacing the actual content with
-      placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <a href="http://www.esri.com">View Esri</a>
-  </calcite-tip>
-  <calcite-tip heading="The lack of imagery">
-    <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
-    <p>
-      This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall
-      tip will affect things. In astronomy, the terms object and body are often used interchangeably.
-    </p>
-    <a href="http://www.esri.com">View Esri</a>
-  </calcite-tip>
-`;
-export const simple = () => create("calcite-tip-manager", createAttributes(), tipContent);
-export const darkThemeRTL_TestOnly = () => create("calcite-tip-manager", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    { name: "dir", value: "rtl" },
-    { name: "class", value: "calcite-theme-dark" }
-]), tipContent);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,60 +0,0 @@
-import { select, number } from "@storybook/addon-knobs";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { placements } from "../../utils/floating-ui";
-import { themesDarkDefault } from "../../../.storybook/utils";
-const contentHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`;
-const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button appearance="transparent" color="neutral" title="Reference element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
-export default {
-    title: "Components/Tooltip",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-tooltip
-      reference-element="reference-element"
-      placement="${select("placement", placements, "auto")}"
-      offset-distance="${number("offset-distance", 6)}"
-      offset-skidding="${number("offset-skidding", 0)}"
-      ${boolean("open", false)}
-    >
-      ${contentHTML}
-    </calcite-tooltip>
-  </div>
-`;
-export const open_TestOnly = () => html `
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-tooltip
-      reference-element="reference-element"
-      placement="${select("placement", placements, "auto")}"
-      offset-distance="${number("offset-distance", 6)}"
-      offset-skidding="${number("offset-skidding", 0)}"
-      ${boolean("open", true)}
-    >
-      ${contentHTML}
-    </calcite-tooltip>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-tooltip
-      class="calcite-theme-dark"
-      dir="rtl"
-      reference-element="reference-element"
-      placement="${select("placement", placements, "auto")}"
-      offset-distance="${number("offset-distance", 6)}"
-      offset-skidding="${number("offset-skidding", 0)}"
-      ${boolean("open", false)}
-    >
-      ${contentHTML}
-    </calcite-tooltip>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,76 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import treeItemReadme from "../tree-item/readme.md";
-import { html } from "../../../support/formatting";
-const treeItems = `
-  <calcite-tree-item>
-    <a>Child 1</a>
-  </calcite-tree-item>
-  <calcite-tree-item>
-    <a>Child 2</a>
-    <calcite-tree slot="children">
-      <calcite-tree-item>
-        <a>Grandchild 1</a>
-      </calcite-tree-item>
-      <calcite-tree-item>
-        <a>Grandchild 2</a>
-        <calcite-tree slot="children">
-          <calcite-tree-item>
-            <a>Great-Grandchild 1</a>
-          </calcite-tree-item>
-          <calcite-tree-item>
-            <a>Great-Grandchild 2</a>
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>
-  </calcite-tree-item>
-  <calcite-tree-item>
-    <a>Child 3</a>
-    <calcite-tree slot="children">
-      <calcite-tree-item>
-        <a>Grandchild 1</a>
-      </calcite-tree-item>
-      <calcite-tree-item>
-        <a>Grandchild 2</a>
-      </calcite-tree-item>
-    </calcite-tree>
-  </calcite-tree-item>
-`;
-export default {
-    title: "Components/Tree",
-    parameters: {
-        notes: [readme, treeItemReadme]
-    },
-    ...storyFilters()
-};
-const selectionModes = ["single", "multi", "children", "multi-children", "ancestors", "none"];
-export const simple = () => html `
-  <calcite-tree
-    ${boolean("lines", false)}
-    selection-mode="${select("selection-mode", selectionModes, "single")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  >
-    ${treeItems}
-  </calcite-tree>
-`;
-export const selectionModeNone = () => html `<calcite-tree
-  ${boolean("lines", false)}
-  selection-mode="${select("selection-mode", selectionModes, "none")}"
->
-  ${treeItems}
-</calcite-tree>`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-tree
-    class="calcite-theme-dark"
-    dir="rtl"
-    ${boolean("lines", false)}
-    selection-mode="${select("selection-mode", selectionModes, "single")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  >
-    ${treeItems}
-  </calcite-tree>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/value-list/value-list.stories.js

@@ -1,125 +0,0 @@
-import { boolean } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../value-list-item/readme.md";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Value List",
-    parameters: {
-        notes: [readme, itemReadme]
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "drag-enabled",
-            commit() {
-                this.value = boolean("dragEnabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "filter-enabled",
-            commit() {
-                this.value = boolean("filterEnabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "multiple",
-            commit() {
-                this.value = boolean("multiple", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "selection-follows-focus",
-            commit() {
-                this.value = boolean("selection-follows-focus", false);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const action = html `
-  <calcite-action
-    slot="actions-end"
-    label="click-me"
-    onClick="console.log('clicked');"
-    appearance="clear"
-    scale="s"
-    icon="ellipsis"
-  ></calcite-action>
-`;
-export const simple = () => html `
-  ${create("calcite-value-list", createAttributes(), html `
-      <calcite-value-list-item label="Dogs" description="Man's best friend" value="dogs">
-        ${action}
-      </calcite-value-list-item>
-      <calcite-value-list-item label="Cats" description="Independent and fluffy" value="cats">
-        ${action}
-      </calcite-value-list-item>
-      <calcite-value-list-item
-        label="Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation."
-        description="Easy to care for."
-        value="fish"
-      >
-        ${action}
-      </calcite-value-list-item>
-    `)}
-`;
-export const disabled_TestOnly = () => html `
-  <calcite-value-list disabled>
-    <calcite-value-list-item label="T. Rex" description="arm strength impaired" value="trex"></calcite-value-list-item>
-    <calcite-value-list-item
-      label="Triceratops"
-      description="3 horn"
-      value="triceratops"
-      selected
-    ></calcite-value-list-item>
-    <calcite-value-list-item label="hi" description="there" value="helloWorld"></calcite-value-list-item>
-  </calcite-value-list>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  ${create("calcite-value-list", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    { name: "dir", value: "rtl" },
-    { name: "class", value: "calcite-theme-dark" }
-]), html `
-      <calcite-value-list-item label="Dogs" description="Man's best friend" value="dogs">
-        ${action}
-      </calcite-value-list-item>
-      <calcite-value-list-item label="Cats" description="Independent and fluffy" value="cats">
-        ${action}
-      </calcite-value-list-item>
-      <calcite-value-list-item
-        label="Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation."
-        description="Easy to care for."
-        value="fish"
-      >
-        ${action}
-      </calcite-value-list-item>
-    `)}
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };