@genesislcap/foundation-zero 14.240.0 → 14.241.0

package/dist/esm/flyout/flyout.stories.js

@@ -1,59 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Flyout',
-    component: 'zero-flyout',
-};
-export default meta;
-const openFlyout = () => {
-    const zeroFlyout = document.querySelector(`zero-flyout`);
-    zeroFlyout.closed = false;
-};
-const closeFlyout = () => {
-    const zeroFlyout = document.querySelector(`zero-flyout`);
-    zeroFlyout.closed = true;
-};
-export const Primary = {
-    argTypes: {
-        position: {
-            control: 'select',
-            options: ['left', 'right'],
-        },
-    },
-    args: {
-        position: 'right',
-        height: '500px',
-        flyoutWidth: '20%',
-    },
-    render: ({ position, height, flyoutWidth }) => html `
-    <div style="display: flex; height: ${height};">
-      <zero-button @click="${openFlyout}">Open Flyout</zero-button>
-
-      <style>
-        zero-flyout::part(flyout) {
-          width: ${flyoutWidth};
-        }
-      </style>
-      <zero-flyout position="${position}" style="height: ${height};">
-        <p slot="title">Zero flyout</p>
-        <div slot="header">
-          <p>Header</p>
-        </div>
-        <div class="container">
-          <p>Flyout options</p>
-          <ul>
-            <li>0</li>
-            <li>1</li>
-            <li>2</li>
-            <li>3</li>
-            <li>4</li>
-            <li>5</li>
-          </ul>
-        </div>
-        <div slot="footer">
-          <p>Footer</p>
-          <zero-button @click="${closeFlyout}">Close Flyout</zero-button>
-        </div>
-      </zero-flyout>
-    </div>
-  `,
-};

package/dist/esm/grid-layout/grid-layout.stories.js

@@ -1,251 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Grid Layout',
-    component: 'zero-grid-layout',
-};
-export default meta;
-const wrapperStyle = 'display: flex; flex-direction: column; flex: 1; padding: 10px; justify-content: space-between; height: 1700px;';
-export const Primary = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout
-          class="spacing-2x"
-          col-count="2"
-          row-count="2"
-          col-lg-count="4"
-          row-lg-count="1"
-          col-sm-count="1"
-          row-sm-count="2"
-        >
-          <zero-grid-layout-item
-            style="height: 100%; background-color: green;"
-            col-lg-number="1"
-            row-lg-number="1"
-            width-lg="1"
-            height-lg="1"
-            col-md-number="1"
-            row-md-number="1"
-            width-md="1"
-            height-md="1"
-            col-sm-number="1"
-            row-sm-number="1"
-            width-sm="1"
-            height-sm="1"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="height: 100%; background-color: red;"
-            col-lg-number="3"
-            row-lg-number="1"
-            width-lg="2"
-            height-lg="1"
-            col-md-number="2"
-            row-md-number="2"
-            width-md="1"
-            height-md="1"
-            col-sm-number="1"
-            row-sm-number="2"
-            width-sm="1"
-            height-sm="1"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="2" col-count="4" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: green;"
-            col-number="1"
-            row-number="1"
-            width="1"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="2"
-            row-number="1"
-            width="3"
-            height="2"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="2" col-count="4" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="1"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="2"
-            row-number="1"
-            width="2"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: green;"
-            col-number="4"
-            row-number="1"
-            width="1"
-            height="2"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="3" col-count="4" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="4"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="1"
-            row-number="3"
-            width="3"
-            height="1"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="4"
-            row-number="3"
-            width="1"
-            height="1"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="4" col-count="4" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="4"
-            height="1"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="1"
-            row-number="2"
-            width="1"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="2"
-            row-number="2"
-            width="3"
-            height="2"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: green;"
-            col-number="1"
-            row-number="4"
-            width="4"
-            height="1"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="6" col-count="6" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="2"
-            height="6"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="3"
-            row-number="1"
-            width="4"
-            height="3"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="3"
-            row-number="4"
-            width="2"
-            height="3"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="5"
-            row-number="4"
-            width="1"
-            height="3"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: green;"
-            col-number="6"
-            row-number="4"
-            width="1"
-            height="3"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="6" col-count="6" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="1"
-            height="6"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="2"
-            row-number="1"
-            width="5"
-            height="4"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="2"
-            row-number="5"
-            width="5"
-            height="2"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-grid-layout row-count="6" col-count="6" class="spacing-2x">
-          <zero-grid-layout-item
-            style="background-color: blue;"
-            col-number="1"
-            row-number="1"
-            width="1"
-            height="6"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: red;"
-            col-number="2"
-            row-number="1"
-            width="5"
-            height="4"
-          ></zero-grid-layout-item>
-          <zero-grid-layout-item
-            style="background-color: yellow;"
-            col-number="2"
-            row-number="5"
-            width="5"
-            height="2"
-          ></zero-grid-layout-item>
-        </zero-grid-layout>
-      </zero-card>
-    </div>
-  `,
-};

package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js

@@ -1,22 +0,0 @@
-import { html } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-const meta = {
-    title: 'Horizontal Scroll',
-    component: 'zero-horizontal-scroll',
-};
-export default meta;
-const horizontalScrollStyle = 'width: 400px;padding-left: 16px;';
-const cardStyle = 'padding: 10px;';
-const cards = Array.from({ length: 8 }, (_, i) => i + 1);
-export const Primary = {
-    render: () => html `
-    <zero-horizontal-scroll style=${horizontalScrollStyle}>
-      ${repeat(cards, (item) => item, (item) => html `
-          <zero-card style=${cardStyle}>
-            Card number ${item}
-            <zero-button>A button</zero-button>
-          </zero-card>
-        `)}
-    </zero-horizontal-scroll>
-  `,
-};

package/dist/esm/icon/icon.stories.js

@@ -1,79 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Icon',
-    component: 'zero-icon',
-};
-export default meta;
-const wrapperStyle = 'display: flex; width: 50%; justify-content: space-between;';
-export const Multiple = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-icon name="glasses" size="1x"></zero-icon>
-      <zero-icon name="amazon" size="2x" variant="brand"></zero-icon>
-      <zero-icon name="amazon-pay" size="3x" variant="brand"></zero-icon>
-      <zero-icon name="apple" size="4x" variant="brand"></zero-icon>
-      <zero-icon name="chrome" size="5x" variant="brand"></zero-icon>
-      <zero-icon name="ambulance" size="xs"></zero-icon>
-      <zero-icon name="angry" size="1x"></zero-icon>
-      <zero-icon variant="regular" name="angry" size="sm"></zero-icon>
-      <zero-icon name="address-book" size="lg"></zero-icon>
-      <zero-icon variant="regular" name="address-book" size="xl"></zero-icon>
-      <zero-icon name="bookmark" size="2xl;"></zero-icon>
-      <zero-icon variant="regular" name="bookmark" size="2xs"></zero-icon>
-      <zero-icon tooltip="Zero Icon Tooltip with dynamic ID"></zero-icon>
-      <zero-icon
-        tooltip="Zero Icon Tooltip with custom ID"
-        tooltip-id="custom-tooltip-id"
-      ></zero-icon>
-    </div>
-  `,
-};
-export const Configurable = {
-    argTypes: {
-        size: {
-            control: 'select',
-            options: [
-                '2xs',
-                'xs',
-                'sm',
-                'lg',
-                'xl',
-                '2xl',
-                '1x',
-                '2x',
-                '3x',
-                '4x',
-                '5x',
-                '6x',
-                '7x',
-                '8x',
-                '9x',
-                '10x',
-            ],
-        },
-        variant: {
-            control: 'select',
-            options: ['solid', 'regular', 'brand'],
-        },
-    },
-    args: {
-        name: 'glasses',
-        size: 'lg',
-        variant: 'solid',
-    },
-    render: ({ name, size, variant }) => html `
-    <zero-icon name="${name}" size="${size}" variant="${variant}"></zero-icon>
-  `,
-};
-export const IconTooltips = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-icon tooltip="Zero Icon Tooltip with dynamic ID"></zero-icon>
-      <zero-icon
-        tooltip="Zero Icon Tooltip with custom ID"
-        tooltip-id="custom-tooltip-id"
-      ></zero-icon>
-      <zero-icon error tooltip="Zero Icon Tooltip with error"></zero-icon>
-    </div>
-  `,
-};

package/dist/esm/listbox/listbox.stories.js

@@ -1,15 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Listbox',
-    component: 'zero-listbox',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <zero-listbox style="width: 200px;">
-      <zero-option>Option 1</zero-option>
-      <zero-option>Option 2</zero-option>
-      <zero-option>Option 3</zero-option>
-    </zero-listbox>
-  `,
-};

package/dist/esm/menu/menu.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Menu',
-    component: 'zero-menu',
-};
-export default meta;
-export const Primary = {
-    args: {
-        menuItemsText: 'Menu item',
-        subMenuItemsText: 'SubMenu item',
-    },
-    render: ({ menuItemsText, subMenuItemsText }) => html `
-    <zero-menu>
-      <zero-menu-item>
-        ${menuItemsText} 1
-        <zero-menu>
-          <zero-menu-item>${subMenuItemsText} 1</zero-menu-item>
-          <zero-menu-item>${subMenuItemsText} 2</zero-menu-item>
-          <zero-menu-item>${subMenuItemsText}</zero-menu-item>
-        </zero-menu>
-      </zero-menu-item>
-      <zero-menu-item>${menuItemsText} 2</zero-menu-item>
-      <zero-menu-item>${menuItemsText}</zero-menu-item>
-    </zero-menu>
-  `,
-};

package/dist/esm/modal/modal.stories.js

@@ -1,39 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Modal',
-    component: 'zero-modal',
-};
-export default meta;
-const showModal = (e) => {
-    const modal = document.querySelector('zero-modal');
-    modal.show();
-};
-const closeModal = (e) => {
-    const modal = document.querySelector('zero-modal');
-    modal.close();
-};
-export const Primary = {
-    args: {
-        dialogMaxWidth: '557px',
-        modalTitle: 'Modal title',
-        modalInitialText: 'Some text in a Zero Dialog',
-        modalMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
-      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae
-      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum
-      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
-      voluptas illo? Voluptatum, atque quidem?`,
-        modalCloseButtonText: 'Close this modal',
-    },
-    render: ({ dialogMaxWidth, modalTitle, modalInitialText, modalMainText, modalCloseButtonText, }) => html `
-    <zero-button @click="${showModal}">Show Zero Modal</zero-button>
-    <zero-modal style="--dialog-max-width: ${dialogMaxWidth};">
-      <h5 slot="top">${modalTitle}</h5>
-      <p>${modalInitialText}</p>
-      <p>${modalMainText}</p>
-      <zero-divider slot="bottom"></zero-divider>
-      <zero-button appearance="primary-gradient" slot="bottom" @click="${closeModal}">
-        ${modalCloseButtonText}
-      </zero-button>
-    </zero-modal>
-  `,
-};