@xplortech/apollo-core 2.12.0 → 3.1.0

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

@@ -1,56 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-export default {
-    title: 'Components/Dynamic Table/Header Accordion',
-    component: 'xpl-header-accordion',
-    argTypes: {
-        title: { type: { name: 'string', required: true } },
-        expanded: { type: { name: 'boolean' } },
-        disabled: { type: { name: 'boolean' } },
-    },
-    tags: ['beta', 'vrt'],
-    beforeEach() {
-        setAutoSnapshotOptions({ enable: true });
-    },
-};
-export const HeaderAccordion = ({ title, expanded, disabled, }) => `
-        <xpl-header-accordion content-id="1" initial-expanded=${expanded} disabled=${disabled}>
-            <div slot="title">${title}</div>
-            <div slot="content" class="content"><strong>Table slot</strong> Replace me with your content</div>
-        </xpl-header-accordion>`;
-HeaderAccordion.args = {
-    title: 'Row Section Label',
-    expanded: false,
-    disabled: false,
-};
-HeaderAccordion.parameters = {
-    'web-component': {
-        render: HeaderAccordion(HeaderAccordion.args),
-    },
-    html: {
-        render: (({ title, expanded, disabled }) => `
-        <div class="xpl-header-accordion" initial-expanded=${expanded} disabled=${disabled}>
-            <div class="header-accordion header-accordion--collapsed">
-                <xpl-checkbox></xpl-checkbox>
-                <button
-                    aria-expanded="false"
-                    aria-controls="1"
-                    class="toggle-area"
-                    id="1"
-                >
-                    <div slot="title">${title}</div>
-                    <xpl-icon size="16" icon="chevron-down"></xpl-icon>
-                </button>
-            </div>
-            <div id="1" role="region" aria-labelledby="1" class="content--hidden">
-                <div class="content">
-                    <strong>Table slot</strong> Replace me with your content
-                </div>
-            </div>
-        </div>
-    `)(HeaderAccordion.args),
-    },
-    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-icon/icons.stories.js

@@ -1,161 +0,0 @@
-import { setAutoSnapshotOptions } from "vitest-plugin-vis";
-import apolloIcons from "@xplortech/apollo-icons";
-const iconNames = Object.keys(apolloIcons);
-const allTags = new Set();
-iconNames.forEach((name) => {
-    const icon = apolloIcons[name];
-    const keywords = icon?.keywords || [];
-    keywords.forEach((keyword) => allTags.add(keyword));
-});
-const tagToIconsMap = {};
-allTags.forEach((tag) => {
-    const iconsWithTag = apolloIcons.getIconsByTag(tag);
-    tagToIconsMap[tag] = iconsWithTag.map((icon) => icon.symbol);
-});
-export default {
-    title: 'Components/Icons',
-    argTypes: {
-        size: {
-            control: { type: 'number', max: 32 },
-        },
-        color: {
-            type: { name: 'string', required: true },
-        },
-    },
-};
-export const Icons = ({ size, color }) => `
-    <xpl-input placeholder="Search icons by name or tag..." id="icon-search"></xpl-input>
-    <script>
-        const iconSearch = document.getElementById('icon-search');
-        // Tag-to-icons mapping built using getIconsByTag from @xplortech/apollo-icons
-        const tagToIconsMap = ${JSON.stringify(tagToIconsMap)};
-
-        // Helper function to get icons matching a tag (mirrors getIconsByTag behavior)
-        function getIconsByTag(tag) {
-            const searchTag = tag.toLowerCase();
-            const matchingIcons = new Set();
-            Object.entries(tagToIconsMap).forEach(([tagKey, icons]) => {
-                if (tagKey.toLowerCase().includes(searchTag)) {
-                    icons.forEach(icon => matchingIcons.add(icon));
-                }
-            });
-            return Array.from(matchingIcons);
-        }
-
-        iconSearch.addEventListener('inputEvent', (event) => {
-            const search = event.detail.toLowerCase();
-            const items = document.querySelectorAll('#where-icons-go .item-container');
-            const noSearchResults = document.querySelector('.no-search-results');
-            let visibleCount = 0;
-
-            // Get icons that match by tag using getIconsByTag
-            const iconsMatchingTag = getIconsByTag(search);
-
-            items.forEach(item => {
-                const iconName = item.querySelector('.icon-name').textContent;
-
-                // Match by icon name or by tag (using getIconsByTag results)
-                const matchesName = iconName.toLowerCase().includes(search);
-                const matchesTag = iconsMatchingTag.includes(iconName);
-
-                if (matchesName || matchesTag) {
-                    item.style.display = 'block';
-                    visibleCount++;
-                } else {
-                    item.style.display = 'none';
-                }
-            });
-
-            noSearchResults.style.display = visibleCount === 0 ? 'block' : 'none';
-        });
-    </script>
-    <div class="where-icons-go" id="where-icons-go" style="color: ${color};">
-        ${iconNames
-    .map((icon) => `<div class="item-container">
-                        <xpl-tooltip text="Click to copy" >
-                            <div class="item" onclick="navigator.clipboard.writeText('<xpl-icon icon=&quot;${icon}&quot;></xpl-icon>')">
-                                <xpl-icon icon=${icon} size=${size}></xpl-icon>
-                                <span class="icon-name">${icon}</span>
-                            </div>
-                        </xpl-tooltip>
-                    </div>`)
-    .join(' ')}
-    </div>
-
-
-
-    <p>
-        <span class="no-search-results" style="display: none;">No results</span>
-        Missing an icon? Contact the <a href="https://teams.microsoft.com/l/team/19%3ALoqML-YXeNKLEB4g4SU1Dn2Whg5b-tqIJzDFAv78oFs1%40thread.tacv2/conversations?groupId=ab4f578f-17c6-4382-ba79-b77c6e88f189&tenantId=60ae198f-5c79-4366-b9bc-144b9d52c178" target="_blank">Apollo team</a> to discuss whether it should be added. The general process for adding icons is documented in <a href="https://www.figma.com/design/qRzFFgT4Fy8p9GpUmV0g5E/Apollo-Foundation?m=auto&node-id=9717-330&t=ztTqi0zp2F7kJsoF-1" target="_blank">Figma</a>.</p>
-`;
-export const Icon = ({ size, color, icon, backgroundColor }) => `
-    <style>
-        .xpl-icon,
-        .dark .xpl-icon {
-            color: ${color};
-        }
-    </style>
-    <xpl-icon icon=${icon} size=${size} background-color=${backgroundColor}></xpl-icon>
-`;
-Icon.argTypes = {
-    size: {
-        control: { type: 'number', min: 1, max: 32 },
-    },
-    color: {
-        type: { name: 'string', required: true },
-    },
-    icon: {
-        options: iconNames,
-        control: {
-            type: 'select',
-        },
-    },
-    backgroundColor: {
-        options: ['orange', 'purple', 'red', 'yellow', 'gray'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-Icon.args = {
-    size: 30,
-    color: '#201e29',
-    icon: 'rocket',
-    backgroundColor: 'orange',
-};
-Icon.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Icon(Icon.args),
-    },
-};
-const ACCENT_HUES = ['orange', 'purple', 'red', 'yellow', 'gray'];
-export const AccentBackgrounds = () => ACCENT_HUES.map((hue) => `<xpl-icon icon="rocket" size="24" background-color="${hue}"></xpl-icon>`).join('');
-AccentBackgrounds.args = {};
-AccentBackgrounds.tags = ['vrt'];
-AccentBackgrounds.beforeEach = () => {
-    setAutoSnapshotOptions({ enable: true });
-};
-AccentBackgrounds.parameters = {
-    layout: 'centered',
-    docs: {
-        description: {
-            story: 'Icon accent backgrounds for every hue. The subtle per-hue tints use primitive color tokens and retain `.dark` overrides (documented Foundation-token exception — see TECH_DEBT.md).',
-        },
-    },
-    'web-component': {
-        render: AccentBackgrounds(AccentBackgrounds.args),
-    },
-};
-Icons.args = {
-    size: 24,
-    color: '#201e29',
-};
-Icons.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: (({ size, color }) => `
-                <xpl-icon icon="rocket" size="${size}" color="${color}"></xpl-icon>
-            `)(Icons.args),
-    },
-};