@xplortech/apollo-core 2.12.0 → 3.0.0

package/dist/collection/components/xpl-divider/divider.stories.js

@@ -1,47 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Divider',
-    component: 'xpl-divider',
-    argTypes: {
-        tier: {
-            options: [3, 2, 1, 0],
-            control: {
-                type: 'select',
-            },
-        },
-        text: {
-            type: { name: 'string', required: false },
-        },
-    },
-};
-export const Divider = ({ tier, text }) => {
-    let attrs = '';
-    attrs += ` tier="${tier}"`;
-    return `<xpl-divider${attrs}>${text}</xpl-divider>`;
-};
-Divider.args = {
-    tier: 3,
-    text: 'Lorem Ipsum',
-};
-Divider.parameters = {
-    layout: 'centered',
-    htmlSnippet: { mode: 'auto' },
-    'web-component': {
-        render: Divider(Divider.args),
-    },
-    html: {
-        render: (({ tier, text }) => `<div class="xpl-divider xpl-divider--${tier.toString()}">${text}</div>`)(Divider.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16545-7981&p=f&t=aZipOZlFAFwtMW1r-11',
-    },
-};

package/dist/collection/components/xpl-dropdown/dropdown.stories.js

@@ -1,395 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-const formatAttributes = (attributes) => Object.entries(attributes)
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(' ');
-export default {
-    title: 'Components/Dropdown',
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-};
-const simpleOptions = [
-    {
-        label: 'Choice 1',
-        value: 'choice-1',
-    },
-    {
-        label: 'Choice 2',
-        value: 'choice-2',
-        isSelected: true,
-    },
-    {
-        label: 'Choice 3 (disabled example)',
-        value: 'choice-3',
-        isDisabled: true,
-    },
-    {
-        label: 'Choice 4',
-        value: 'choice-4',
-    },
-    {
-        label: 'Choice 5',
-        value: 'choice-5',
-    },
-    {
-        label: 'Choice 6',
-        value: 'choice-6',
-    },
-    {
-        label: 'Choice 7',
-        value: 'choice-7',
-    },
-];
-export const Simple = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, options, }) => {
-    const attributes = {
-        'close-on-select': closeOnSelect,
-        mode,
-        open,
-        'select-on-focus': selectOnFocus,
-    };
-    return `
-        <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-dropdown
-                    id="xpl-dropdown-simple"
-                    ${formatAttributes(attributes)}
-                >
-                </xpl-dropdown>
-            </div>
-        </div>
-        <script>
-            element = document.querySelector("#xpl-dropdown-simple");
-            element.options = ${JSON.stringify(options)}
-        </script>
-    `;
-};
-Simple.argTypes = {
-    mode: {
-        options: ['single', 'multi'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-Simple.args = {
-    closeOnSelect: true,
-    isOpen: true,
-    mode: 'single',
-    selectOnFocus: false,
-    options: simpleOptions,
-};
-Simple.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Simple(Simple.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=21057-7882&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};
-export const SimpleWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
-    const attributes = {
-        'close-on-select': closeOnSelect,
-        mode,
-        open,
-        'select-on-focus': selectOnFocus,
-    };
-    return `
-        <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-dropdown
-                    id="xpl-dropdown-simple-w-children"
-                    ${formatAttributes(attributes)}
-                >
-                    <xpl-dropdown-option
-                        selected
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input type="radio" name="animal" value="dog"/>
-                            dog
-                        </label>
-                    </xpl-dropdown-option>
-                    <xpl-dropdown-option
-                        disabled
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input disabled type="radio" name="animal" value="cat"/>
-                            cat (disabled)
-                        </label>
-                    </xpl-dropdown-option>
-                    <xpl-dropdown-option
-                        slot="options"
-                    >
-                        <label slot="option">
-                            <input type="radio" name="animal" value="fish"/>
-                            fish (selected)
-                        </label>
-                    </xpl-dropdown-option>
-                </xpl-dropdown>
-            </div>
-        </div>
-    `;
-};
-SimpleWithChildren.argTypes = {
-    mode: {
-        options: ['single', 'multi'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-SimpleWithChildren.args = {
-    closeOnSelect: false,
-    isOpen: true,
-    mode: 'single',
-    selectOnFocus: false,
-};
-SimpleWithChildren.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: SimpleWithChildren(SimpleWithChildren.args),
-    },
-};
-export const Groups = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
-    const attributes = {
-        'close-on-select': closeOnSelect,
-        mode,
-        open,
-        'select-on-focus': selectOnFocus,
-    };
-    const options = [
-        {
-            label: 'Choice 1',
-        },
-        {
-            label: 'Choice 2',
-            isSelected: mode === 'multi',
-        },
-        {
-            groupName: 'Group 1',
-            options: [
-                {
-                    label: 'Choice 3',
-                    isSelected: true,
-                },
-                {
-                    label: 'Choice 4',
-                    isSelected: false,
-                },
-                {
-                    label: 'Choice 5',
-                    isSelected: mode === 'multi',
-                },
-            ],
-        },
-        {
-            groupName: 'Group 2',
-            options: [
-                {
-                    label: 'Choice 6',
-                    isSelected: mode === 'multi',
-                },
-                {
-                    label: 'Choice 7',
-                    isSelected: mode === 'multi',
-                },
-                {
-                    label: 'Choice 8',
-                    isSelected: false,
-                },
-            ],
-        },
-    ];
-    return `
-        <div style="width:75vw">
-        <div style="position: relative; min-width: 200px; width: 100%">
-            <xpl-dropdown
-                id="xpl-dropdown-groups"
-                ${formatAttributes(attributes)}
-            >
-            </xpl-dropdown>
-        </div>
-        </div>
-        <script>
-            element = document.querySelector("#xpl-dropdown-groups");
-            element.options = ${JSON.stringify(options)}
-        </script>
-    `;
-};
-Groups.argTypes = {
-    mode: {
-        options: ['single', 'multi'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-Groups.args = {
-    closeOnSelect: true,
-    isOpen: true,
-    mode: 'single',
-    selectOnFocus: false,
-};
-Groups.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Groups(Groups.args),
-    },
-};
-export const GroupsWithChildren = ({ closeOnSelect, isOpen: open, mode, selectOnFocus, }) => {
-    const attributes = {
-        'close-on-select': closeOnSelect,
-        mode,
-        open,
-        'select-on-focus': selectOnFocus,
-    };
-    return `
-        <div style="width:75vw">
-        <div style="position: relative; min-width: 200px; width: 100%">
-            <xpl-dropdown
-                id="xpl-dropdown-groups"
-                ${formatAttributes(attributes)}
-            >
-                <xpl-dropdown-group
-                    label="Group Component Heading A"
-                    slot="options"
-                >
-                <xpl-dropdown-option
-                    label="Choice 1"
-                    slot="options"
-                ></xpl-dropdown-option>
-                <xpl-dropdown-option
-                    label="Choice 2 (disabled)"
-                    disabled
-                    slot="options"
-                ></xpl-dropdown-option>
-                <xpl-dropdown-heading
-                    slot="options"
-                >
-                    Sub Heading B
-                    <svg
-                        viewBox="0 0 16 16"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="black"
-                        height="16"
-                    >
-                        <path
-                            d="M10.7 5.3a.3.3 0 1 0 0 .7.3.3 0 0 0 0-.7Zm2.7-2.5a1 1 0 0 0-1 .1l-.9.8h-.3l-.9-.8a1 1 0 0 0-1.6.8V6.3l-1 .1c-1.4.2-2.6 1-3.4 2V6.5c0-1-.8-1.8-1.8-1.8a.5.5 0 1 0 0 1c.5 0 .8.4.8.9V11c0 1.5.9 2.3 1.9 2.3H9c.2 0 .3-.1.3-.3 0-.4-.3-.7-.6-.7h-.4V12l1.7-1v1.8c0 .3.3.6.7.6H12c.4 0 .7-.3.7-.6V8.3C13.5 7.8 14 7 14 6V3.7a1 1 0 0 0-.6-1Zm-1.7 9.5H11v-2a.7.7 0 0 0-1-.6L8 11c-.3-.5-.6-1-1.1-1.3-.2-.1-.4 0-.5.1l-.1.3c-.1.1-.1.3 0 .4.6.5 1 1.2 1 2H5.2a.8.8 0 0 1-.9-.9c0-2 1.5-3.8 3.6-4.1l1-.2c.5.9 1.4 1.5 2.4 1.5h.4v3.6ZM13 6a1.7 1.7 0 0 1-3.3 0V3.7l1 1H12l1.1-1V6Zm-1.3-.3a.3.3 0 1 0 .6 0 .3.3 0 0 0-.6 0Z"
-                        />
-                    </svg>
-                </xpl-dropdown-heading>
-                <xpl-dropdown-option
-                    label="Choice 3 (selected)"
-                    selected
-                    slot="options"
-                ></xpl-dropdown-option>
-                </xpl-dropdown-group>
-            </xpl-dropdown>
-        </div>
-        </div>
-    `;
-};
-GroupsWithChildren.argTypes = {
-    mode: {
-        options: ['single', 'multi'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-GroupsWithChildren.args = {
-    closeOnSelect: true,
-    isOpen: true,
-    mode: 'single',
-    selectOnFocus: false,
-};
-GroupsWithChildren.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: GroupsWithChildren(GroupsWithChildren.args),
-    },
-};
-export const OptionSubcomponent = ({ isDisabled: disabled, label, isSelected: selected, }) => {
-    const attributes = { disabled, selected };
-    return `
-        <xpl-dropdown-option
-            label="${label}"
-            ${formatAttributes(attributes)}
-        ></xpl-dropdown-option>
-    `;
-};
-OptionSubcomponent.args = {
-    isSelected: false,
-    isDisabled: false,
-    label: 'Choice 1',
-};
-OptionSubcomponent.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: OptionSubcomponent(OptionSubcomponent.args),
-    },
-};
-export const HeadingSubcomponent = ({ label }) => `
-        <xpl-dropdown-heading
-            label="${label}"
-        ></xpl-dropdown-heading>
-    `;
-HeadingSubcomponent.args = {
-    label: 'Choice 1',
-};
-HeadingSubcomponent.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: HeadingSubcomponent(HeadingSubcomponent.args),
-    },
-};
-export const GroupSubComponent = ({ groupName }) => {
-    const options = [
-        {
-            label: 'Choice 1',
-        },
-        {
-            label: 'Choice 2',
-            isSelected: true,
-        },
-        {
-            label: 'Choice 3 (disabled example)',
-            isDisabled: true,
-        },
-        {
-            label: 'Choice 4',
-        },
-        {
-            label: 'Choice 5',
-        },
-        {
-            label: 'Choice 6',
-        },
-        {
-            label: 'Choice 7',
-        },
-    ];
-    return `
-        <xpl-dropdown-group
-            id="xpl-option-group"
-            label="${groupName}"
-        ></xpl-dropdown-group>
-        <script>
-            element = document.querySelector("#xpl-option-group");
-            element.options = ${JSON.stringify(options)}
-        </script>
-    `;
-};
-GroupSubComponent.args = {
-    groupName: 'Choice 1',
-};
-GroupSubComponent.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: GroupSubComponent(GroupSubComponent.args),
-    },
-};

package/dist/collection/components/xpl-dynamic-table/dynamic-table.stories.js

@@ -1,169 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Dynamic Table/Dynamic Table',
-    component: 'xpl-dynamic-table',
-    argTypes: {
-        accordion: {
-            control: { type: 'boolean' },
-        },
-        selectedItemCount: {
-            control: { type: 'number' },
-        },
-    },
-    parameters: {
-        actions: {
-            handles: ['selectedItemCountChange', 'checkboxChange', 'deselectAll'],
-        },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-};
-const tableData = [
-    {
-        name: 'Akshdeep Sharma',
-        notes: "Don't let this guy in, he's sketchy.",
-        disabled: false,
-    },
-    {
-        name: 'David Edward Johnathan Napiwocki III',
-        notes: "This guy is a weirdo, call security. He's always filming TikTok videos and heating up fish in the microwaves. Stinks the whole place up!",
-        disabled: false,
-    },
-    { name: 'Kate Smith', notes: 'We love her!', disabled: true },
-    { name: 'Fernando Gelin', notes: 'He is a cool guy.', disabled: false },
-    {
-        name: 'Hunter Keca',
-        notes: 'He is a super duper cool guy.',
-        disabled: false,
-    },
-];
-export const DynamicTable = ({ accordion, selectedItemCount }) => {
-    const header = `
-        <xpl-table-header>
-            <xpl-table-header-cell width=48>
-            </xpl-table-header-cell>
-            <xpl-table-header-cell label="Member Name" width=220>
-            </xpl-table-header-cell>
-            <xpl-table-header-cell label="Notes">
-            </xpl-table-header-cell>
-            <xpl-table-header-cell label="Column Item" width=170>
-            </xpl-table-header-cell>
-            <xpl-table-header-cell label="Column Item" width=220>
-            </xpl-table-header-cell>
-            <xpl-table-header-cell type="icon" icon="kebab-vertical" width=48>
-            </xpl-table-header-cell>
-        </xpl-table-header>
-    `;
-    const createRows = (data) => data
-        .map((person) => `
-                    <xpl-dynamic-table-row disabled=${person.disabled}>
-                        <xpl-dynamic-table-cell>
-                        <xpl-checkbox data-id="${person.name}"></xpl-checkbox>
-                        </xpl-dynamic-table-cell>
-                        <xpl-dynamic-table-cell>
-                        <xpl-avatar color="primary" size="sm"></xpl-avatar><span>${person.name}</span>
-                        </xpl-dynamic-table-cell>
-                        <xpl-dynamic-table-cell>
-                        <span>${person.notes}</span>
-                        </xpl-dynamic-table-cell>
-                        <xpl-dynamic-table-cell>
-                        <xpl-button>Ping!</xpl-button>
-                        </xpl-dynamic-table-cell>
-                        <xpl-dynamic-table-cell>
-                        <button dropdown><span>Dropdown</span><xpl-icon icon="chevron-down" size=16></xpl-icon></button>
-                        </xpl-dynamic-table-cell>
-                        <xpl-dynamic-table-cell>
-                        <xpl-icon icon="kebab-vertical"></xpl-icon>
-                        </xpl-dynamic-table-cell>
-                    </xpl-dynamic-table-row>
-                `)
-        .join('\n');
-    const tableContent = accordion
-        ? `
-            <xpl-header-accordion content-id="accordion-1">
-                <span slot="title">Uncool People</span>
-                <div slot="content">${createRows(tableData.slice(0, 2))}</div>
-            </xpl-header-accordion>
-            <xpl-header-accordion content-id="accordion-2" initial-expanded>
-                <span slot="title">Cool People</span>
-                <div slot="content">${createRows(tableData.slice(2))}</div>
-            </xpl-header-accordion>
-        `
-        : createRows(tableData);
-    const table = `
-        <xpl-toolbar ${selectedItemCount > -1 ? `selected-item-count=${selectedItemCount}` : ''}>
-            <xpl-button slot="actions-left" variant="secondary" size="sm">Move<xpl-icon icon="chevron-down"></xpl-icon></xpl-button>
-            <xpl-button slot="actions-left" variant="secondary" size="sm">Duplicate</xpl-button>
-            <xpl-button slot="actions-right" variant="secondary" size="sm"><xpl-icon icon="trashcan"></xpl-icon>Delete</xpl-button>
-        </xpl-toolbar>
-        <div class="flex-col">
-            <xpl-dynamic-table>
-                <div slot="header">${header}</div>
-                <div slot="body">${tableContent}</div>
-            </xpl-dynamic-table>
-            <xpl-button id='clear-btn' onclick="this.dispatchEvent(new CustomEvent('deselectAll', { bubbles: true, composed: true }))">Clear Selection</xpl-button>
-        </div>
-    `;
-    return table;
-};
-DynamicTable.args = {
-    accordion: true,
-    selectedItemCount: -1,
-};
-DynamicTable.parameters = {
-    'web-component': {
-        render: DynamicTable(DynamicTable.args),
-    },
-    html: {
-        render: `
-            <div class="toolbar">
-                <button class="secondary sm">Move<i class="icon-chevron-down"></i></button>
-                <button class="secondary sm">Duplicate</button>
-                <button class="secondary sm"><i class="icon-trashcan"></i>Delete</button>
-            </div>
-            <div role="grid" class="xpl-dynamic-table" aria-colcount="6">
-                <div role="row" class="xpl-table-header">
-                    <div role="columnheader" aria-colindex="1" class="xpl-table-header-cell" width="48"></div>
-                    <div role="columnheader" aria-colindex="2" class="xpl-table-header-cell" width="220">Member Name</div>
-                    <div role="columnheader" aria-colindex="3" class="xpl-table-header-cell">Notes</div>
-                    <div role="columnheader" aria-colindex="4" class="xpl-table-header-cell" width="170">Column Item</div>
-                    <div role="columnheader" aria-colindex="5" class="xpl-table-header-cell" width="220">Column Item</div>
-                    <div role="columnheader" aria-colindex="6" class="xpl-table-header-cell" width="48"><i class="icon-kebab-vertical"></i></div>
-                </div>
-                ${tableData
-            .map((person) => `
-                            <div role="row" class="xpl-dynamic-table-row ${person.disabled ? 'disabled' : ''}">
-                                <div role="gridcell" aria-colindex="1" class="xpl-dynamic-table-cell">
-                                    <input type="checkbox" />
-                                </div>
-                                <div role="gridcell" aria-colindex="2" class="xpl-dynamic-table-cell">
-                                    <span class="avatar primary sm"></span>
-                                    <span>${person.name}</span>
-                                </div>
-                                <div role="gridcell" aria-colindex="3" class="xpl-dynamic-table-cell">
-                                    <span>${person.notes}</span>
-                                </div>
-                                <div role="gridcell" aria-colindex="4" class="xpl-dynamic-table-cell">
-                                    <button>Ping!</button>
-                                </div>
-                                <div role="gridcell" aria-colindex="5" class="xpl-dynamic-table-cell">
-                                    <button class="dropdown">
-                                        <span>Dropdown</span><i class="icon-chevron-down" size="16"></i>
-                                    </button>
-                                </div>
-                                <div role="gridcell" aria-colindex="6" class="xpl-dynamic-table-cell">
-                                    <i class="icon-kebab-vertical"></i>
-                                </div>
-                            </div>
-                        `)
-            .join('')}
-            </div>
-        `,
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
-    },
-};

package/dist/collection/components/xpl-grid/grid.stories.js

@@ -1,85 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
-export default {
-    tags: ['vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-    async play({ canvasElement }) {
-        await waitForHydration(canvasElement);
-    },
-    title: 'Components/Grid',
-    argTypes: {
-        unit1Lg: { control: { type: 'number' } },
-        unit1Md: { control: { type: 'number' } },
-        unit1Sm: { control: { type: 'number' } },
-        unit1Xs: { control: { type: 'number' } },
-        unit2Lg: { control: { type: 'number' } },
-        unit2Md: { control: { type: 'number' } },
-        unit2Sm: { control: { type: 'number' } },
-        unit2Xs: { control: { type: 'number' } },
-        unit3Lg: { control: { type: 'number' } },
-        unit3Md: { control: { type: 'number' } },
-        unit3Sm: { control: { type: 'number' } },
-        unit3Xs: { control: { type: 'number' } },
-        unit4Lg: { control: { type: 'number' } },
-        unit4Md: { control: { type: 'number' } },
-        unit4Sm: { control: { type: 'number' } },
-        unit4Xs: { control: { type: 'number' } },
-    },
-};
-export const Grid = ({ unit1Lg, unit1Md, unit1Sm, unit1Xs, unit2Lg, unit2Md, unit2Sm, unit2Xs, unit3Lg, unit3Md, unit3Sm, unit3Xs, unit4Lg, unit4Md, unit4Sm, unit4Xs, }) => `<xpl-grid>
-    <xpl-grid-item lg="${unit1Lg}" md="${unit1Md}" sm="${unit1Sm}" xs="${unit1Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit2Lg}" md="${unit2Md}" sm="${unit2Sm}" xs="${unit2Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit3Lg}" md="${unit3Md}" sm="${unit3Sm}" xs="${unit3Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit4Lg}" md="${unit4Md}" sm="${unit4Sm}" xs="${unit4Xs}" style="border: 1px solid red;">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, diam non vulputate pretium, metus lectus vulputate purus, nec laoreet lectus enim vitae ipsum. Phasellus molestie luctus egestas.
-    </xpl-grid-item>
-  </xpl-grid>`;
-Grid.args = {
-    unit1Lg: 4,
-    unit1Md: 3,
-    unit1Sm: 3,
-    unit1Xs: 6,
-    unit2Lg: 2,
-    unit2Md: 3,
-    unit2Sm: 3,
-    unit2Xs: 6,
-    unit3Lg: 2,
-    unit3Md: 3,
-    unit3Sm: 6,
-    unit3Xs: 6,
-    unit4Lg: 4,
-    unit4Md: 3,
-    unit4Sm: 6,
-    unit4Xs: 6,
-};
-Grid.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: (({ unit1Lg, unit1Md, unit1Sm, unit1Xs, unit2Lg, unit2Md, unit2Sm, unit2Xs, unit3Lg, unit3Md, unit3Sm, unit3Xs, unit4Lg, unit4Md, unit4Sm, unit4Xs, }) => `<xpl-grid>
-    <xpl-grid-item lg="${unit1Lg}" md="${unit1Md}" sm="${unit1Sm}" xs="${unit1Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit2Lg}" md="${unit2Md}" sm="${unit2Sm}" xs="${unit2Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit3Lg}" md="${unit3Md}" sm="${unit3Sm}" xs="${unit3Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-    <xpl-grid-item lg="${unit4Lg}" md="${unit4Md}" sm="${unit4Sm}" xs="${unit4Xs}">
-        Lorem ipsum...
-    </xpl-grid-item>
-</xpl-grid>`)(Grid.args),
-    },
-    html: {
-        render() {
-        },
-    },
-};