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

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

@@ -1,187 +0,0 @@
-import { themesDarkDefault } from "../../../.storybook/utils";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import readme from "./readme.md";
-import itemReadme from "../list-item/readme.md";
-import groupReadme from "../list-item-group/readme.md";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/List",
-    parameters: {
-        notes: [readme, itemReadme, groupReadme]
-    },
-    ...storyFilters()
-};
-const thumbnailImage = placeholderImage({ width: 44, height: 44 });
-export const simple = () => html `
-  <calcite-list>
-    <calcite-list-item
-      label="Cras iaculis ultricies nulla."
-      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-    ></calcite-list-item>
-    <calcite-list-item
-      label="Ut aliquam sollicitudin leo."
-      description="Aliquam tincidunt mauris eu risus."
-    ></calcite-list-item>
-    <calcite-list-item
-      label="Vestibulum commodo felis quis tortor.
-    "
-      description="Vestibulum auctor dapibus neque.
-    "
-    ></calcite-list-item>
-  </calcite-list>
-`;
-export const onlyLabelVersusOnlyDescription_TestOnly = () => html `
-  <calcite-list>
-    <calcite-list-item label="This has no description."> </calcite-list-item>
-  </calcite-list>
-  <calcite-list>
-    <calcite-list-item description="This has no label."> </calcite-list-item>
-  </calcite-list>
-`;
-export const nestedListItemsAndGroupItems = () => html `
-  <calcite-list>
-    <calcite-list-item
-      label="Cras iaculis ultricies nulla."
-      description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-    >
-      <calcite-list-item label="Ut aliquam sollicitudin leo." description="Aliquam tincidunt mauris eu risus.">
-        <calcite-list-item
-          label="Vestibulum commodo felis quis tortor."
-          description="Vestibulum auctor dapibus neque."
-        ></calcite-list-item></calcite-list-item
-    ></calcite-list-item>
-  </calcite-list>
-  <calcite-list>
-    <calcite-list-item-group heading="Digits">
-      <calcite-list-item
-        label="One"
-        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-      ></calcite-list-item>
-      <calcite-list-item label="Two" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
-      <calcite-list-item label="Three" description="Vestibulum auctor dapibus neque."></calcite-list-item>
-    </calcite-list-item-group>
-    <calcite-list-item-group heading="Letters">
-      <calcite-list-item
-        label="A"
-        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-      ></calcite-list-item>
-      <calcite-list-item label="B" description="Aliquam tincidunt mauris eu risus."></calcite-list-item>
-      <calcite-list-item
-        label="C"
-        description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-      ></calcite-list-item>
-    </calcite-list-item-group>
-  </calcite-list>
-`;
-export const startAndEndContentSlots = () => html `<calcite-list>
-  <calcite-list-item>
-    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
-    <calcite-icon icon="layers" scale="m" slot="content-start"></calcite-icon>
-    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
-    <div slot="content-end" style="display: flex; justify-content: flex-end">
-      <calcite-chip class="list-chip" icon="ribbon-rosette" scale="s">Review</calcite-chip>
-      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
-    </div>
-  </calcite-list-item>
-  <calcite-list-item>
-    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
-    <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
-    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
-    <div slot="content-end" style="display: flex; justify-content: flex-end">
-      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
-    </div>
-  </calcite-list-item>
-  <calcite-list-item>
-    <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
-    <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
-    <span slot="content-start">Some value or something and a <b>thing</b>.</span>
-    <div slot="content-end" style="display: flex; justify-content: flex-end">
-      <calcite-chip class="list-chip" icon="bell" color="red" scale="s">Halp!</calcite-chip>
-    </div>
-  </calcite-list-item>
-</calcite-list> `;
-export const richContent = () => html `
-  <calcite-list>
-    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-    <calcite-list-item label="Finn Mertens" description="Part owner of the Tree House">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="running" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-    <calcite-list-item label="Jake T. Dog" description="Part owner of the Tree House">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="walking" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon
-        scale="s"
-        icon="exclamation-mark-triangle"
-        slot="content-end"
-        style="color: var(--calcite-ui-danger)"
-      ></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-  </calcite-list>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-list class="calcite-theme-dark" dir="rtl">
-    <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="effects" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-    <calcite-list-item label="Finn Mertens" description="Part owner of the Tree House">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="running" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon scale="s" icon="check" slot="content-end" style="color: var(--calcite-ui-success)"></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-    <calcite-list-item label="Jake T. Dog" description="Part owner of the Tree House">
-      <calcite-action icon="drag" label="drag" scale="s" slot="actions-start"></calcite-action>
-      <calcite-icon scale="l" icon="walking" slot="content-start"></calcite-icon>
-      <calcite-avatar scale="l" slot="content-start" thumbnail="${thumbnailImage}"></calcite-avatar>
-      <calcite-icon
-        scale="s"
-        icon="exclamation-mark-triangle"
-        slot="content-end"
-        style="color: var(--calcite-ui-danger)"
-      ></calcite-icon>
-      <calcite-action icon="ellipsis" label="menu" slot="actions-end"></calcite-action>
-      <calcite-action icon="x" label="remove" slot="actions-end"></calcite-action>
-    </calcite-list-item>
-  </calcite-list>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const disabled_TestOnly = () => html `<calcite-list disabled>
-  <calcite-list-item
-    label="Cras iaculis ultricies nulla."
-    description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
-  ></calcite-list-item>
-  <calcite-list-item
-    disabled
-    label="Ut aliquam sollicitudin leo."
-    description="Aliquam tincidunt mauris eu risus."
-  ></calcite-list-item>
-  <calcite-list-item
-    label="Vestibulum commodo felis quis tortor.
-    "
-    description="Vestibulum auctor dapibus neque.
-    "
-  ></calcite-list-item>
-</calcite-list>`;

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

@@ -1,42 +0,0 @@
-import { number, color, select } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Loader",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple_NoTest = () => html `
-  <calcite-loader
-    active
-    type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("no-padding", false)}
-    value="${number("value", 0, { range: true, min: 0, max: 100, step: 1 })}"
-  />
-`;
-export const inline_NoTest = () => html `
-<div style="display: inline-flex;align-items: center;justify-content: center;width: 100%;">
-<calcite-loader
-  scale="${select("scale", ["s", "m", "l"], "m")}"
-  inline
-  active
-/></calcite-loader><span style="margin:0 10px">Next to some text</span>
-</div>
-`;
-export const customTheme_NoTest = () => html `
-  <calcite-loader
-    type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    ${boolean("no-padding", false)}
-    value="${number("value", 0, { range: true, min: 0, max: 100, step: 1 })}"
-    style="
-    --calcite-ui-brand: ${color("calcite-ui-blue-1", "#50ba5f")};
-    --calcite-ui-brand-hover: ${color("calcite-ui-blue-2", "#1a6324")};
-    --calcite-ui-brand-press: ${color("calcite-ui-blue-3", "#338033")};"
-    active
-  />
-`;

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

@@ -1,66 +0,0 @@
-import { select, text, number } from "@storybook/addon-knobs";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Modal",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-modal
-    ${boolean("open", true)}
-    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
-    background-color="${select("background-color", ["white", "grey"], "white")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${select("width", ["s", "m", "l"], "s")}"
-    ${boolean("fullscreen", false)}
-    ${boolean("docked", false)}
-    ${boolean("disable-escape", false)}
-    ${boolean("no-padding", false)}
-    intl-close="${text("intl-close", "Close")}"
-  >
-    <h3 slot="header">Small Modal</h3>
-    <div slot="content">
-      <p>The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.</p>
-    </div>
-    <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
-      >Back</calcite-button
-    >
-    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
-    <calcite-button slot="primary" width="full">Save</calcite-button>
-  </calcite-modal>
-`;
-export const darkThemeRTLCustomSize_NoTest = () => html `
-  <calcite-modal
-    class="calcite-theme-dark"
-    dir="rtl"
-    ${boolean("open", true)}
-    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
-    background-color="${select("background-color", ["white", "grey"], "white")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    width="${number("width", 300)}"
-    ${boolean("fullscreen", false)}
-    ${boolean("docked", false)}
-    ${boolean("disable-escape", false)}
-    ${boolean("no-padding", false)}
-    intl-close="${text("intl-close", "Close")}"
-  >
-    <h3 slot="header">Small Modal</h3>
-    <div slot="content">
-      <p>
-        The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements. You can
-        customize the size using the width attribute.
-      </p>
-    </div>
-    <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
-      >Back</calcite-button
-    >
-    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
-    <calcite-button slot="primary" width="full">Save</calcite-button>
-  </calcite-modal>
-`;
-darkThemeRTLCustomSize_NoTest.parameters = { themes: themesDarkDefault };

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

@@ -1,90 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Notice",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <div style="width:600px;max-width:100%;text-align:center;">
-    <calcite-notice
-      ${boolean("icon", true)}
-      ${boolean("open", true)}
-      ${boolean("closable", true)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
-      icon="${select("icon", iconNames, iconNames[0])}"
-    >
-      <div slot="title">Your settings area has changed</div>
-      <div slot="message">Look around and let us know what you think</div>
-      <calcite-link slot="link" title="my action">Learn more</calcite-link>
-      <calcite-action
-        label="Retry"
-        icon="reset"
-        scale="${select("scale", ["s", "m", "l"], "m")}"
-        slot="actions-end"
-      ></calcite-action>
-    </calcite-notice>
-  </div>
-`;
-export const customIcon = () => html `
-  <div style="width:600px;max-width:100%;text-align:center;">
-    <calcite-notice
-      icon="${select("icon", iconNames, iconNames[0])}"
-      ${boolean("open", true)}
-      ${boolean("closable", true)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
-    >
-      <div slot="title">Your settings area has changed</div>
-      <div slot="message">Look around and let us know what you think</div>
-      <calcite-link slot="link" title="my action">Learn more</calcite-link>
-    </calcite-notice>
-  </div>
-`;
-export const withAction = () => html `
-  <div style="width:600px;max-width:100%;text-align:center;">
-    <calcite-notice
-      ${boolean("icon", true)}
-      ${boolean("open", true)}
-      ${boolean("closable", false)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
-    >
-      <div slot="title">Notice with action</div>
-      <div slot="message">This shows a notice with a custom action</div>
-      <calcite-action
-        label="Retry"
-        icon="reset"
-        scale="${select("scale", ["s", "m", "l"], "m")}"
-        slot="actions-end"
-      ></calcite-action>
-    </calcite-notice>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <div style="width:600px;max-width:100%;text-align:center;">
-    <calcite-notice
-      dir="rtl"
-      class="calcite-theme-dark"
-      ${boolean("icon", true)}
-      ${boolean("open", true)}
-      ${boolean("closable", false)}
-      scale="${select("scale", ["s", "m", "l"], "m")}"
-      width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
-    >
-      <div slot="title">This is a destructive action</div>
-      <div slot="message">Be sure you know what you are doin, folks.</div>
-    </calcite-notice>
-  </div>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

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

@@ -1,37 +0,0 @@
-import { number, select } from "@storybook/addon-knobs";
-import { locales } from "../../utils/locale";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Pagination",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-  <calcite-pagination
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    start="${number("start", 1)}"
-    lang="${select("lang", locales, "en")}"
-    total="${number("total", 123456789)}"
-    num="${number("num", 10)}"
-  >
-  </calcite-pagination>
-`;
-export const darkThemeFrenchLocaleAndRTL_NoTest = () => html `
-  <calcite-pagination
-    class="calcite-theme-dark"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    start="${number("start", 1)}"
-    lang="fr"
-    total="${number("total", 123456789)}"
-    num="${number("num", 10)}"
-    dir="rtl"
-    }
-  >
-  </calcite-pagination>
-`;
-darkThemeFrenchLocaleAndRTL_NoTest.parameters = { themes: themesDarkDefault };

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

@@ -1,181 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { createComponentHTML as create, filterComponentAttributes, themesDarkDefault } from "../../../.storybook/utils";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import readme from "./readme.md";
-import { SLOTS, TEXT } from "./resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Panel",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const { scale } = ATTRIBUTES;
-    return filterComponentAttributes([
-        {
-            name: "dismissed",
-            commit() {
-                this.value = boolean("dismissed", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "dismissible",
-            commit() {
-                this.value = boolean("dismissible", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "height-scale",
-            commit() {
-                this.value = select("heightScale", scale.values, scale.defaultValue);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-close",
-            commit() {
-                this.value = text("intlClose", TEXT.close);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;
-const contentHTML = html `
-  <p>
-    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.
-  </p>
-  <p>
-    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
-    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
-    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
-    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
-    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
-    leo.
-  </p>
-  <p>
-    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
-    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
-    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
-    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
-    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
-  </p>
-`;
-const footerHTML = html `
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
-`;
-const panelContent = `${headerHTML}
-  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
-  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
-  ${contentHTML}
-  ${footerHTML}`;
-export const simple = () => create("calcite-panel", createAttributes(), html `
-      ${headerHTML}
-      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
-      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
-      ${contentHTML}
-      <calcite-fab slot="fab"></calcite-fab>
-      ${footerHTML}
-    `);
-export const onlyProps = () => html `
-  <div style="width: 300px;">
-    <calcite-panel
-      height-scale="s"
-      heading-level="${text("heading-level", "2")}"
-      summary="${text("summary", "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="${text("heading", "Panel title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum")}"
-    />
-  </div>
-`;
-export const disabledWithStyledSlot_TestOnly = () => html `
-  <calcite-panel style="height: 100%;" heading="Heading" disabled>
-    <div id="content" style="height: 100%;">${contentHTML}</div>
-  </calcite-panel>
-`;
-export const darkThemeRTL_TestOnly = () => create("calcite-panel", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    {
-        name: "dir",
-        value: "rtl"
-    },
-    {
-        name: "class",
-        value: "calcite-theme-dark"
-    }
-]), panelContent);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const noDoubleScrollbars_TestOnly = () => html `
-  <style>
-    #container {
-      display: flex;
-      max-height: 540px;
-      width: 300px;
-    }
-
-    .content {
-      height: 100%;
-      display: flex;
-      padding: 10px;
-      overflow-y: auto; /* Control scrollbar via child */
-    }
-  </style>
-  <div id="container">
-    <calcite-flow>
-      <calcite-panel heading="Example">
-        <div>### Stickied Content e.g. toolbar</div>
-        <div class="content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec,
-          sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue
-          est malesuada quis. Proin tincidunt lacus laoreet mauris fringilla accumsan. Cras nec enim eu lectus suscipit
-          vestibulum a laoreet arcu. Duis posuere nunc vel enim blandit, nec vehicula orci aliquam. Vestibulum hendrerit
-          mi vel nisi posuere accumsan. Aenean efficitur est id cursus convallis. Morbi turpis ante, sodales eu tortor
-          eu, mattis bibendum purus. Morbi iaculis nisl nunc, quis accumsan quam laoreet vitae. Aliquam ex ligula,
-          ornare eu ex vitae, tincidunt venenatis lacus. Phasellus risus quam, elementum sed justo porttitor,
-          ullamcorper mattis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-          curae; Nulla non dui at metus porta lacinia congue sit amet quam. Mauris viverra diam neque, in blandit leo
-          vehicula et. Donec non purus vitae nunc tincidunt egestas. Nunc pretium enim magna, sed fringilla lacus
-          viverra in. Nam et pretium nisi. Ut bibendum, ipsum sit amet egestas hendrerit, quam orci sollicitudin purus,
-          sit amet finibus mauris erat in eros. Integer est dui, vehicula a ipsum id, pellentesque semper elit. Fusce
-          euismod volutpat eros vitae imperdiet. Nam suscipit lacus id posuere pharetra. Cras eros ipsum, feugiat non
-          leo non, ornare malesuada eros. Donec egestas purus non quam tempus commodo. Maecenas ex augue, euismod eget
-          magna in, dapibus fermentum felis. Phasellus justo felis, sollicitudin ut ex sed, lobortis scelerisque sem.
-          Pellentesque semper placerat velit, sit amet viverra tortor ultricies eu. Pellentesque habitant morbi
-          tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus feugiat, augue in molestie
-          imperdiet, felis turpis facilisis tortor, at tempus purus risus et sapien. Fusce id nisi id orci elementum
-          sollicitudin. Nam id libero eu odio efficitur rutrum maximus porta lorem. Nunc tristique interdum augue,
-          sodales viverra lectus efficitur vitae. Nam molestie, neque consequat mollis pulvinar, sapien sem semper nunc,
-          et euismod enim sem vitae ligula.
-        </div>
-      </calcite-panel>
-    </calcite-flow>
-  </div>
-`;