@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-icon/icons.stories.js

@@ -1,142 +0,0 @@
-import apolloIcons from "@xplortech/apollo-icons";
-const iconNames = Object.keys(apolloIcons);
-const allTags = new Set();
-iconNames.forEach((name) => {
-    var _a;
-    const keywords = ((_a = apolloIcons[name]) === null || _a === void 0 ? void 0 : _a.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),
-    },
-};
-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),
-    },
-};