@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

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

@@ -0,0 +1,122 @@
+export default {
+    title: 'Components/Dynamic Table/Table Header',
+    component: 'xpl-table-header',
+    argTypes: {
+        firstCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        firstCellLabel: {
+            control: 'text',
+        },
+        firstCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        firstCellWidth: {
+            control: 'number',
+        },
+        firstCellSortable: { control: 'boolean' },
+        secondCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        secondCellLabel: {
+            control: 'text',
+        },
+        secondCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        secondCellWidth: {
+            control: 'number',
+        },
+        secondCellSortable: { control: 'boolean' },
+        thirdCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        thirdCellLabel: {
+            control: 'text',
+        },
+        thirdCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        thirdCellWidth: {
+            control: 'number',
+        },
+        thirdCellSortable: { control: 'boolean' },
+    },
+    tags: ['beta'],
+};
+export const TableHeader = ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, firstCellSortable, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, secondCellSortable, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, thirdCellSortable, }) => `
+    <xpl-dynamic-table>
+        <div slot="header">
+            <xpl-table-header>
+                <xpl-table-header-cell
+                    type=${firstCellType}
+                    label="${firstCellLabel}"
+                    icon=${firstCellIcon}
+                    width=${firstCellWidth}
+                    sortable=${firstCellSortable}
+                    ></xpl-table-header-cell>
+                    <xpl-table-header-cell
+                    type=${secondCellType}
+                    label="${secondCellLabel}"
+                    icon=${secondCellIcon}
+                    width=${secondCellWidth}
+                    sortable=${secondCellSortable}
+                    ></xpl-table-header-cell>
+                    <xpl-table-header-cell
+                    type=${thirdCellType}
+                    label="${thirdCellLabel}"
+                    icon=${thirdCellIcon}
+                    width=${thirdCellWidth}
+                    sortable=${thirdCellSortable}
+                >
+                </xpl-table-header-cell>
+            </xpl-table-header>
+      </div>
+    </xpl-dynamic-table>
+
+  `;
+TableHeader.args = {
+    firstCellType: 'label',
+    firstCellLabel: '',
+    firstCellIcon: 'heart',
+    firstCellWidth: 48,
+    firstCellSortable: false,
+    secondCellType: 'icon',
+    secondCellLabel: 'Column Item 2',
+    secondCellIcon: 'heart',
+    secondCellWidth: 48,
+    secondCellSortable: false,
+    thirdCellType: 'label',
+    thirdCellLabel: 'Column Item 3',
+    thirdCellIcon: 'heart',
+    thirdCellWidth: 208,
+    thirdCellSortable: true,
+};
+TableHeader.parameters = {
+    'web-component': {
+        render: TableHeader(TableHeader.args),
+    },
+    html: {
+        render: `
+          <tr class="xpl-table-header table-header">
+            <th class="header-cell">
+              <span></span>
+            </th>
+            <th class="header-cell">
+              <xpl-icon class="header-icon" icon="heart"></xpl-icon>
+            </th>
+            <th class="header-cell">
+              <button class="sortable">
+                <span class="sortable-text">Column Item 3</span>
+                <xpl-icon class="sort-icon" icon="arrow-down"></xpl-icon>
+              </button>
+            </th>
+          </tr>`,
+    },
+};

package/dist/collection/components/xpl-table-header/xpl-table-header.js

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class XplTableHeader {
+    render() {
+        return (h(Host, { key: 'ab15bfcac25fa381989ed3cdaf2b3c5f00db6bdb', role: "row", class: "xpl-table-header" }, h("slot", { key: 'e0a8ef7c92c44ea84abc182d93040a4c14cd7072' })));
+    }
+    static get is() { return "xpl-table-header"; }
+}

package/dist/collection/components/xpl-table-header-cell/table-header-cell.stories.js

@@ -0,0 +1,71 @@
+export default {
+    title: 'Components/Dynamic Table/Table Header Cell',
+    component: 'xpl-table-header-cell',
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        label: {
+            control: 'text',
+        },
+        icon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        width: {
+            control: 'number',
+        },
+        sortable: { control: 'boolean' },
+    },
+    tags: ['beta'],
+};
+export const TableHeaderCell = ({ type, label, icon, width, sortable }) => `
+    <xpl-table-header-cell
+        type=${type}
+        label="${label}"
+        icon=${icon}
+        width=${width}
+        sortable=${sortable}
+    ></xpl-table-header-cell>
+`;
+TableHeaderCell.args = {
+    type: 'label',
+    label: 'Column Item',
+    icon: 'chevron-down',
+    width: null,
+    sortable: false,
+};
+TableHeaderCell.parameters = {
+    'web-component': {
+        render: TableHeaderCell(TableHeaderCell.args),
+    },
+    html: {
+        render: ({ type, label, icon, width, sortable }) => {
+            const renderContent = () => {
+                switch (type) {
+                    case 'label':
+                        return `<span>${label}</span>`;
+                    case 'checkbox':
+                        return `<input type="checkbox" class="xpl-checkbox">`;
+                    case 'icon':
+                        return `<xpl-icon icon="${icon}"></xpl-icon>`;
+                    default:
+                        return '';
+                }
+            };
+            return `
+                <th class="header-cell" style="width: ${width}px">
+                    ${sortable
+                ? `
+                        <button class="sortable">
+                            ${renderContent()}
+                            <xpl-icon icon="arrow-down"></xpl-icon>
+                        </button>
+                    `
+                : `<div class="non-sortable">renderContent()</div>`}
+                </th>
+            `;
+        },
+    },
+};

package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js

@@ -0,0 +1,198 @@
+import { Host, h } from "@stencil/core";
+export class XplTableHeaderCell {
+    constructor() {
+        this.sortable = false;
+        this.label = '';
+        this.type = 'label';
+        this.sortDirection = 'none';
+    }
+    toggleSort() {
+        if (this.sortDirection === 'asc') {
+            this.sortDirection = 'desc';
+        }
+        else if (this.sortDirection === 'desc') {
+            this.sortDirection = 'none';
+        }
+        else {
+            this.sortDirection = 'asc';
+        }
+        this.sortChanged.emit(this.sortDirection);
+    }
+    render() {
+        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
+        const renderContent = () => {
+            switch (this.type) {
+                case 'label':
+                    return h("span", null, this.label);
+                case 'checkbox':
+                    return h("xpl-checkbox", null);
+                case 'icon':
+                    return h("xpl-icon", { icon: this.icon, size: 20 });
+                default:
+                    return '';
+            }
+        };
+        const renderSortIcon = () => {
+            switch (this.sortDirection) {
+                case 'none':
+                    return h("xpl-icon", { class: "sort-icon", icon: "arrow-down", size: 16 });
+                case 'asc':
+                    return (h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-up", size: 16 }));
+                case 'desc':
+                    return (h("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-down", size: 16 }));
+                default:
+                    return '';
+            }
+        };
+        return (h(Host, { role: "columnheader", "aria-colindex": colIndex, class: `xpl-table-header-cell ${this.sortable ? 'sortable' : 'non-sortable'}`, style: { width: `${this.width}px` } }, this.sortable ? (h("button", { onClick: () => this.toggleSort() }, renderContent(), renderSortIcon())) : (renderContent())));
+    }
+    static get is() { return "xpl-table-header-cell"; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../xpl-icon/xpl-icon",
+                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{IconName} - Icon to display in the cell"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{boolean} - Whether the cell is sortable or not"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - Text to display in the cell"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'label' | 'checkbox' | 'icon'",
+                    "resolved": "\"checkbox\" | \"icon\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string} - The type of cell to render"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'label'"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "property",
+                            "text": "{number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default\nto fit the content of the cell with 16px of padding on each side"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChanged",
+                "name": "sortChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sort direction changes."
+                },
+                "complexType": {
+                    "original": "'asc' | 'desc' | 'none'",
+                    "resolved": "\"asc\" | \"desc\" | \"none\"",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,77 @@
+export default {
+    title: 'Components/Tabs',
+    parameters: {
+        actions: {
+            handles: ['tabChange'],
+        },
+    },
+    argTypes: {
+        tabsLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        fullWidth: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+};
+const renderHeadingAndPanel = (tabsLength) => Array.from({ length: tabsLength }, (_, index) => `
+        <xpl-tab target="tab${index}" slot="heading">Tab ${index + 1}</xpl-tab>
+        <xpl-tab-panel target="tab${index}" slot="panel">Tab ${index + 1} content</xpl-tab-panel>
+    `).join('');
+export const Tabs = ({ tabsLength, fullWidth }) => `
+    <xpl-tabs value="tab${tabsLength - 1}" full-width="${fullWidth}">
+        ${renderHeadingAndPanel(tabsLength)}
+    </xpl-tabs>
+`;
+Tabs.args = {
+    tabsLength: 2,
+    fullWidth: false,
+};
+Tabs.parameters = {
+    layout: 'padded',
+    'web-component': {
+        render: (({ tabsLength, fullWidth }) => [
+            `<xpl-tabs value="tab2" full-width="${fullWidth}">
+                ${renderHeadingAndPanel(tabsLength)}
+            </xpl-tabs>`,
+        ])(Tabs.args),
+    },
+    html: {
+        render: (({ fullWidth }) => [
+            `<div class="xpl-tabs ${fullWidth ? 'xpl-tabs--full-width' : ''}">
+                <xpl-select classnames="xpl-tabs__mobile-select" selectedvalues="tab0"></xpl-select>
+                <div class="xpl-tabs__headings" role="tablist">
+                    <div
+                    class="xpl-tabs__active-bar"
+                    style="transform: translateX(77.5156px); width: 47.75px"
+                    ></div>
+                    <div class="xpl-tab">
+                    <a class="xpl-tab__button" role="tab" aria-controls="tab0">Tab 1</a>
+                    </div>
+                    <div class="xpl-tab">
+                    <a class="xpl-tab__button" role="tab" aria-controls="tab1">Tab 2</a>
+                    </div>
+                </div>
+
+                <div class="xpl-tabs__panels">
+                    <div class="xpl-tab-panel">
+                    <div class="xpl-text-title-4">Tab 1 content</div>
+                    <p class="xpl-text-body">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+                    </p>
+                    </div>
+                    <div class="xpl-tab-panel">
+                    <div class="xpl-text-title-4">Tab 2 content</div>
+                    <p class="xpl-text-body">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+                    </p>
+                    </div>
+                </div>
+            </div>`,
+        ])(Tabs.args),
+    },
+};