@seeqdev/qomponents 0.0.185 → 0.0.186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.185",
+  "version": "0.0.186",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/src/index.d.ts",
@@ -92,6 +92,6 @@
     "lint:fix": "echo 'ESLint not configured yet'",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,json,css}\"",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,json,css}\"",
-    "type:check": "tsc --noEmit"
+    "type:check": "tsgo --noEmit"
   }
 }

package/dist/src/Accordion/Accordion.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Root, Item, Trigger, Content } from '@radix-ui/react-accordion';
-const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
-    return (_jsx(Root, { className: `tw-rounded-md tw-w-full focus-visible:tw-outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value), children: accordionItems.map((item) => (_jsxs(Item, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, disabled: disabled, value: item.value, children: [
-                _jsx(Trigger, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none`, children: item.trigger }), _jsx(Content, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}`, children: item.content })
-            ] }, item.value))) }));
-};
-export default Accordion;

package/dist/src/Accordion/Accordion.stories.js

@@ -1,96 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import Accordion from './Accordion';
-import { QTip } from '../Tooltip/Qtip';
-import Icon from '../Icon';
-import Tabs from '../Tabs';
-import Button from '../Button';
-export default {
-    title: 'Accordion',
-};
-const Trigger = ({ label }) => (_jsxs("div", { className: "tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark", children: [
-        _jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]", type: "text" }), label] }));
-const TriggerSecond = ({ label }) => (_jsxs("div", { className: "tw-flex tw-justify-between tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark tw-py-2", children: [label, _jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]", type: "text" })
-    ] }));
-const renderData = () => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
-        _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: "This is a data tab to show details about your data. You can make changes to your account" }), _jsx(Button, { variant: "outline", label: "Save data" })
-    ] }));
-const renderTools = () => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
-        _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx(Button, { variant: "outline", label: "Save tools" })
-    ] }));
-const renderJournal = () => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
-        _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx(Button, { variant: "outline", label: "Save journal" })
-    ] }));
-const tabsList = [
-    {
-        id: 'data',
-        label: 'Data',
-        icon: 'fc-data',
-        content: renderData(),
-    },
-    {
-        id: 'tools',
-        label: 'Tools',
-        icon: 'fc-gears-2',
-        content: renderTools(),
-    },
-    {
-        id: 'journal',
-        label: 'Journal',
-        icon: 'fc-workbook-lock',
-        content: renderJournal(),
-    },
-];
-export const AllAccordionVariants = () => {
-    const [activeTab, setActiveTab] = React.useState('data');
-    const [value, setValue] = React.useState('oranges');
-    const accordionItems = [
-        {
-            value: 'oranges',
-            id: 'oranges',
-            itemTestId: 'oranges',
-            trigger: _jsx(Trigger, { label: "Oranges" }),
-            content: (_jsx("div", { className: "tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white", children: "Oranges are the fruit of the citrus species Citrus \u00D7 sinensis in the family Rutaceae. They are also called sweet oranges to distinguish them from the related Citrus \u00D7 aurantium, referred to as bitter oranges. They are round and orange, and usually have a sour or bitter taste. Oranges are a good source of vitamin C." })),
-        },
-        {
-            value: 'apples',
-            id: 'apples',
-            itemTestId: 'apples',
-            trigger: _jsx(Trigger, { label: "Apples" }),
-            content: (_jsx("div", { children: _jsx("div", { className: "tw-p-4", children: _jsx(Tabs, { stretchTabs: true, activeTab: activeTab, onTabSelect: setActiveTab, defaultActiveTab: "data", tabs: tabsList }) }) })),
-        },
-        {
-            value: 'bananas',
-            id: 'bananas',
-            trigger: _jsx(Trigger, { label: "Bananas" }),
-            itemTestId: 'bananas',
-            content: (_jsx("div", { children: "A banana is an elongated, edible fruit \u2013 botanically a berry \u2013 produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called \"plantains\", distinguishing them from dessert bananas. The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe." })),
-        },
-        {
-            value: 'pineapples',
-            id: 'pineapples',
-            trigger: _jsx(Trigger, { label: "Pineapples" }),
-            itemTestId: 'pineapples',
-            content: (_jsx("div", { children: "The pineapple is a tropical plant with an edible fruit and the most economically significant plant in the family Bromeliaceae. The pineapple is indigenous to South America, where it has been cultivated for many centuries. The introduction of the pineapple to Europe in the 17th century made it a significant cultural icon of luxury. Since the 1820s, pineapple has been commercially grown in greenhouses and many tropical plantations." })),
-        },
-    ];
-    const allAccordions = (isDark) => (_jsx("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '', children: _jsx("div", { className: "tw-p-5 ", children: _jsx(Accordion, { accordionItems: isDark
-                    ? accordionItems
-                    : accordionItems.map((item) => ({ ...item, trigger: _jsx(TriggerSecond, { label: item.value.toUpperCase() }) })), value: value, testId: "basic-accordion1", onItemSelect: (value) => setValue(value) }) }) }));
-    const renderAllVariations = (isDark) => _jsx("div", { className: "tw-p-4", children: allAccordions(isDark) });
-    return (_jsxs(_Fragment, { children: [
-            _jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-                    _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
-                            _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
-                            _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
-                            _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
-                            _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
-                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background tw-grid tw-grid-cols-4 tw-gap-4 tw-py-4", children: [
-                    _jsxs("div", { className: "color_topic dark:tw-text-sq-white tw-text-center", children: [
-                            _jsx("b", { children: "Topic Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_analysis dark:tw-text-sq-white tw-text-center", children: [
-                            _jsx("b", { children: "Analysis Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_datalab dark:tw-text-sq-white tw-text-center", children: [
-                            _jsx("b", { children: "Datalab Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_vantage dark:tw-text-sq-white tw-text-center", children: [
-                            _jsx("b", { children: "Vantage Colors" }), renderAllVariations(true)] })
-                ] })
-        ] }));
-};

package/dist/src/Accordion/Accordion.test.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Accordion from './Accordion';
-describe('Accordion', () => {
-    const mockOnItemSelect = jest.fn();
-    class Context {
-        testId = 'buttonTestId';
-        label = 'button label';
-        props = {
-            accordionItems: [
-                {
-                    id: 'item1',
-                    value: 'item1',
-                    trigger: 'Item 1',
-                    content: 'Content 1',
-                },
-                {
-                    id: 'item2',
-                    value: 'item2',
-                    trigger: 'Item 2',
-                    content: 'Content 2',
-                },
-            ],
-            defaultValue: 'item1',
-            value: 'item1',
-            onItemSelect: (key) => mockOnItemSelect(key),
-            disabled: false,
-            extraClassNames: 'extra-class',
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderAccordion = (props) => render(_jsx(Accordion, { ...props }));
-    it('renders accordion items', () => {
-        renderAccordion(tc.props);
-        expect(screen.getByText('Item 1')).toBeInTheDocument();
-        expect(screen.getByText('Item 2')).toBeInTheDocument();
-    });
-    it('renders accordion content', () => {
-        renderAccordion(tc.props);
-        expect(screen.getByText('Content 1')).toBeInTheDocument();
-        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-    });
-    it('calls onItemSelect when an item is selected', async () => {
-        renderAccordion(tc.props);
-        await userEvent.click(screen.getByText('Item 2'));
-        expect(mockOnItemSelect).toHaveBeenCalledWith('item2');
-    });
-});

package/dist/src/Accordion/Accordion.types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Accordion/index.js

@@ -1 +0,0 @@
-export { default } from './Accordion';

package/dist/src/Alert/Alert.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '../styles.css';
-import Icon from '../Icon';
-const baseClasses = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-[10px] tw-w-full tw-relative' +
-    ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
-const darkTheme = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
-const lightTheme = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = 'tw-border-sq-color-dark';
-/**
- * Alert.
- */
-export const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
-    const appliedTheme = {
-        theme: `${lightTheme} ${darkTheme}`,
-        formulaError: 'tw-text-red-800 tw-bg-red-200 !tw-rounded-[4px]',
-        danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
-        warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
-        gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
-    };
-    const appliedBorderTheme = {
-        theme: borderColorClasses,
-        danger: errorClasses,
-        warning: 'tw-border-none',
-        gray: 'tw-border-sq-darkish-gray',
-        formulaError: 'tw-border-red-100',
-    };
-    const appliedClasses = `${baseClasses} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
-    if (!show) {
-        return _jsx("div", {});
-    }
-    return (_jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (_jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[0.6875rem] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray|formulaError/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
-};

package/dist/src/Alert/Alert.stories.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert } from './Alert';
-import { QTip } from '../Tooltip';
-const Template = ({ variant }) => {
-    return (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
-            _jsxs("h3", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: ["This is a ", variant, " alert, it looks very pleasing and is very useful for showing alerts to the user"] }), _jsx(Alert, { variant: variant, dismissible: true, show: true, extraClassNames: "tw-h-[200px]", tooltip: "This is a small close alert icon", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, children: "This is a dismissible alert, it looks very pleasing and is very useful for showing alerts to the user" }), _jsx(QTip, {})
-        ] }));
-};
-export const ThemedAlert = Template.bind({});
-ThemedAlert.args = {
-    variant: 'theme',
-};
-export const WarningAlert = Template.bind({});
-WarningAlert.args = {
-    variant: 'warning',
-};
-export const DangerAlert = Template.bind({});
-DangerAlert.args = {
-    variant: 'danger',
-};
-export const FormulaErrorAlert = Template.bind({});
-FormulaErrorAlert.args = {
-    variant: 'formulaError',
-};
-export const GrayAlert = Template.bind({});
-GrayAlert.args = {
-    variant: 'gray',
-};
-const colors = ['topic', 'analysis', 'datalab', 'vantage'];
-const renderAlert = ({ text, dismissable, variant, }) => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
-        _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal" }), _jsx(Alert, { variant: variant, dismissible: dismissable, show: true, extraClassNames: "tw-h-[200px]", tooltip: "This is a small close alert icon", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, children: text })
-    ] }));
-export const AllAlertsVariants = () => {
-    const renderAllVariations = (color) => (_jsxs("div", { children: [
-            _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is a dismissible alert, it looks very pleasing and is very useful for showing alerts to the user',
-                    dismissable: true,
-                    variant: 'theme',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is a non dismissable alert, it looks very pleasing and is very useful for showing alerts to the user',
-                    dismissable: false,
-                    variant: 'theme',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is a warning alert, it is used to display a warning',
-                    dismissable: false,
-                    variant: 'warning',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is an error alert, it is used to display an error',
-                    dismissable: false,
-                    variant: 'danger',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is a gray alert, it is used to display a neutral alert',
-                    dismissable: true,
-                    variant: 'gray',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is an error alert that is dismissible, it is used to display an error',
-                    dismissable: true,
-                    variant: 'danger',
-                }) }), _jsx("div", { className: "tw-p-4", children: renderAlert({
-                    text: 'This is a formula error alert that is dismissible, it is used to display an error',
-                    dismissable: true,
-                    variant: 'formulaError',
-                }) })
-        ] }, color + '_wrapper'));
-    return (_jsxs("div", { children: [
-            _jsx(QTip, {}), _jsx("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => {
-                    return _jsx("div", { className: `color_${color}`, children: renderAllVariations(color) });
-                }) }), _jsx("div", { className: "tw-dark tw-bg-sq-dark-background tw-grid tw-grid-cols-4 tw-gap-4", children: colors.map((color) => {
-                    return _jsx("div", { className: `color_${color}`, children: renderAllVariations(color) });
-                }) })
-        ] }));
-};

package/dist/src/Alert/Alert.test.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Alert } from './Alert';
-describe('Alert Component', () => {
-    const defaultProps = {
-        children: 'Test Alert',
-        dismissible: true,
-        onClose: jest.fn(),
-        show: true,
-        variant: 'theme',
-        testId: 'alert-test-id',
-        id: 'alert-id',
-        extraClassNames: '',
-    };
-    it('should render the Alert component', () => {
-        render(_jsx(Alert, { ...defaultProps }));
-        const alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toBeInTheDocument();
-    });
-    it('should render children correctly', () => {
-        render(_jsx(Alert, { ...defaultProps }));
-        const alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toHaveTextContent('Test Alert');
-    });
-    it('should apply the correct classes based on variant', () => {
-        const { rerender } = render(_jsx(Alert, { ...defaultProps, variant: "danger" }));
-        let alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toHaveClass('tw-text-sq-text-color tw-bg-sq-danger-color');
-        rerender(_jsx(Alert, { ...defaultProps, variant: "warning" }));
-        alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toHaveClass('tw-bg-sq-bg-warning-color tw-text-sq-text-color');
-    });
-    it('should call onClose when dismissible icon is clicked', () => {
-        render(_jsx(Alert, { ...defaultProps }));
-        const closeButton = screen.getByTestId('alert-test-id-close-btn');
-        fireEvent.click(closeButton);
-        expect(defaultProps.onClose).toHaveBeenCalled();
-    });
-    it('should not render when show is false', () => {
-        render(_jsx(Alert, { ...defaultProps, show: false }));
-        const alertElement = screen.queryByTestId('alert-test-id');
-        expect(alertElement).not.toBeInTheDocument();
-    });
-    it('should apply extra class names', () => {
-        render(_jsx(Alert, { ...defaultProps, extraClassNames: "extra-class" }));
-        const alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toHaveClass('extra-class');
-    });
-});

package/dist/src/Alert/Alert.types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Alert/index.js

@@ -1 +0,0 @@
-export { Alert as default } from './Alert';

package/dist/src/Button/Button.js

@@ -1,107 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '../styles.css';
-import { browserIsFirefox } from '../utils/browserId';
-import Icon from '../Icon';
-import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
-/**
- * All-in-one Button:
- *  - use "variant" to achieve the desired style
- *  - include tooltips and/or icons
- */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
-    const baseClasses = 'tw-px-2.5 tw-rounded-md focus:tw-ring-0 focus-visible:tw-outline-none aria-disabled:tw-cursor-not-allowed disabled:tw-pointer-events-none';
-    const baseClassesByVariant = {
-        'outline': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
-        'theme': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
-        'danger': 'tw-bg-sq-danger-color disabled:tw-opacity-50 aria-disabled:tw-opacity-50 ' +
-            'tw-border-solid tw-border tw-border-sq-danger-color',
-        'theme-light': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
-        'no-border': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
-        'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color ' +
-            'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
-    };
-    const textClassesByVariantLightTheme = {
-        'outline': 'tw-text-sq-text-color',
-        'theme': 'tw-text-white',
-        'theme-light': 'tw-text-white',
-        'danger': 'tw-text-white',
-        'no-border': 'tw-text-sq-text-color',
-        'warning': 'tw-text-white',
-    };
-    const textClassesByVariantDarkTheme = {
-        'outline': 'dark:tw-text-sq-dark-text',
-        'theme': 'dark:tw-text-white',
-        'theme-light': 'dark:tw-text-white',
-        'danger': 'dark:tw-text-white',
-        'no-border': 'dark:tw-text-sq-dark-text',
-        'warning': 'dark:tw-text-white',
-    };
-    const classesByVariantLightTheme = {
-        'outline': 'tw-bg-white tw-border-sq-disabled-gray',
-        'theme': 'tw-bg-sq-color-dark tw-border-sq-color-dark',
-        'danger': '',
-        'theme-light': 'tw-bg-sq-icon',
-        'no-border': '',
-        'warning': '',
-    };
-    const classesByVariantDarkTheme = {
-        'outline': 'dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-disabled-gray',
-        'theme': 'dark:tw-bg-sq-color-dark dark:tw-border-sq-color-dark',
-        'danger': '',
-        'theme-light': 'dark:tw-bg-sq-icon-dark dark:tw-border-sq-icon-dark',
-        'no-border': '',
-        'warning': '',
-    };
-    const activeClassesByVariantLightTheme = {
-        'outline': 'hover:tw-bg-sq-light-gray focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark' +
-            ' active:tw-border-sq-color-dark',
-        'theme': 'hover:tw-bg-sq-color-highlight hover:tw-border-sq-color-highlight',
-        'danger': 'hover:tw-bg-sq-danger-color-hover hover:tw-border-sq-danger-color-hover',
-        'theme-light': 'hover:tw-bg-sq-link hover:tw-border-sq-link',
-        'no-border': '',
-        'warning': '',
-    };
-    const activeClassesByVariantDarkTheme = {
-        'outline': 'dark:hover:tw-bg-sq-highlight-color-dark dark:focus:tw-bg-sq-multi-gray-dark' +
-            ' dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark dark:active:tw-border-sq-color-dark',
-        'theme': 'dark:hover:tw-bg-sq-color-highlight dark:hover:tw-border-sq-color-highlight',
-        'danger': 'dark:hover:tw-bg-sq-danger-color-hover dark:hover:tw-border-sq-danger-color-hover',
-        'theme-light': 'dark:hover:tw-bg-sq-link-dark dark:hover:tw-border-sq-link-dark',
-        'no-border': '',
-        'warning': '',
-    };
-    const sizeClasses = {
-        xs: 'tw-text-xs tw-py-0.5',
-        sm: 'tw-text-sm tw-py-1',
-        lg: 'tw-text-xl tw-py-1',
-    };
-    let tooltipData = undefined;
-    let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
-    if (!disabled) {
-        appliedClasses += ` ${activeClassesByVariantLightTheme[variant]} ${activeClassesByVariantDarkTheme[variant]}`;
-    }
-    if (tooltip) {
-        tooltipData = {
-            'data-qtip-text': tooltip,
-            'data-qtip-placement': tooltipOptions?.position,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
-        };
-    }
-    const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
-    const iconElement = icon && (_jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
-            ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}`
-            : '', testId: `${id}_spinner` }));
-    return (_jsxs("button", { id: id, ...tooltipData, disabled: disabled && !tooltip, "aria-disabled": disabled, "data-testid": testId, tabIndex: disabled ? -1 : undefined, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
-            stopPropagation && e.stopPropagation();
-            if (!disabled) {
-                onClick?.(e);
-            }
-        }, onMouseDown: (e) => {
-            if (preventBlur) {
-                e.preventDefault();
-            }
-        }, className: appliedClasses, children: [iconPosition === 'left' && iconElement, label, iconPosition === 'right' && iconElement] }));
-};
-export default Button;

package/dist/src/Button/Button.stories.js

@@ -1,74 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Button from './Button';
-import { buttonVariants, buttonSizes } from './Button.types';
-import { QTip } from '../Tooltip';
-export default {
-    title: 'Button',
-};
-export const AllButtonVariants = () => {
-    const renderAllVariations = () => (_jsx(_Fragment, { children: buttonVariants.map((variant) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4", children: [
-                _jsx("div", { className: "tw-p-4", children: _jsx(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant }) })
-            ] }, `{variant_${variant}`))) }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
-        ] }));
-};
-export const ButtonWithTooltip = () => {
-    const renderButtonWithTooltip = () => (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: "tw-p-4", children: _jsx(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Button, { tooltip: "Helpful tooltip shown even when button is disabled", disabled: true, variant: "theme", label: "Hover me (disabled)" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(Button, { tooltip: "Helpful tooltip shown even when button is disabled", disabled: true, variant: "theme", label: "Hover me (disabled)" }) })
-        ] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderButtonWithTooltip()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderButtonWithTooltip()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderButtonWithTooltip()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderButtonWithTooltip()] })
-        ] }));
-};
-export const ButtonWithIcon = () => {
-    const renderButtonWithIcon = () => (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: "tw-p-4", children: _jsx(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }) })
-        ] }));
-    const renderButtonWithIconOnRight = () => (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: "tw-p-4", children: _jsx(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsx(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }) })
-        ] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderButtonWithIcon()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderButtonWithIcon()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderButtonWithIcon()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderButtonWithIcon()] }), _jsx("div", { className: "color_topic", children: renderButtonWithIconOnRight() }), _jsx("div", { className: "color_analysis", children: renderButtonWithIconOnRight() }), _jsx("div", { className: "color_datalab", children: renderButtonWithIconOnRight() }), _jsx("div", { className: "color_vantage", children: renderButtonWithIconOnRight() })
-        ] }));
-};
-export const DisabledButton = () => {
-    const renderDisabledButton = () => (_jsxs(_Fragment, { children: [
-            _jsxs("div", { className: "tw-p-4", children: [
-                    _jsx(Button, { disabled: true, variant: "theme", label: "Disabled Button" }), _jsx(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })
-                ] }), _jsxs("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: [
-                    _jsx(Button, { disabled: true, variant: "theme", label: "Disabled Button" }), _jsx(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })
-                ] })
-        ] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderDisabledButton()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderDisabledButton()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderDisabledButton()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderDisabledButton()] })
-        ] }));
-};
-export const ButtonSizes = () => {
-    const renderButtonSizes = () => (_jsxs(_Fragment, { children: [
-            _jsx("div", { className: "tw-p-4", children: buttonSizes.map((size) => (_jsx("div", { className: "tw-mb-2", children: _jsx(Button, { size: size, variant: "theme", label: `Size: ${size}` }) }, `size_light_${size}`))) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: buttonSizes.map((size) => (_jsx("div", { className: "tw-mb-2", children: _jsx(Button, { size: size, variant: "theme", label: `Size: ${size}` }) }, `size_dark_${size}`))) })
-        ] }));
-    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
-            _jsxs("div", { className: "color_topic", children: [
-                    _jsx("b", { children: "Topic Colors" }), renderButtonSizes()] }), _jsxs("div", { className: "color_analysis", children: [
-                    _jsx("b", { children: "Analysis Colors" }), renderButtonSizes()] }), _jsxs("div", { className: "color_datalab", children: [
-                    _jsx("b", { children: "Datalab Colors" }), renderButtonSizes()] }), _jsxs("div", { className: "color_vantage", children: [
-                    _jsx("b", { children: "Vantage Colors" }), renderButtonSizes()] })
-        ] }));
-};

package/dist/src/Button/Button.test.js

@@ -1,65 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Button from './Button';
-import { QTip } from '../Tooltip';
-describe('Button', () => {
-    class Context {
-        testId = 'buttonTestId';
-        label = 'button label';
-        props = {
-            label: this.label,
-            onClick: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderButton = ({ withQTip = false, ...rest }) => render(_jsxs(_Fragment, { children: [withQTip && _jsx(QTip, {}), _jsx(Button, { ...rest })
-        ] }));
-    it('renders button label', () => {
-        renderButton(tc.props);
-        expect(screen.getByText(tc.label)).toBeInTheDocument();
-    });
-    it('calls on click', async () => {
-        renderButton(tc.props);
-        await userEvent.click(screen.getByTestId(tc.testId));
-        expect(tc.props.onClick).toHaveBeenCalled();
-    });
-    describe('stopPropagation', () => {
-        it('stops propagation of click event by default', async () => {
-            const callOnPropagation = jest.fn();
-            render(_jsx("div", { onClick: callOnPropagation, children: _jsx(Button, { ...tc.props }) }));
-            await userEvent.click(screen.getByTestId(tc.testId));
-            expect(callOnPropagation).not.toHaveBeenCalled();
-        });
-        it('does not stop propagation of click event when stopPropagation is false', async () => {
-            const callOnPropagation = jest.fn();
-            render(_jsx("div", { onClick: callOnPropagation, children: _jsx(Button, { ...tc.props, stopPropagation: false }) }));
-            await userEvent.click(screen.getByTestId(tc.testId));
-            expect(callOnPropagation).toHaveBeenCalled();
-        });
-    });
-    describe('disabled', () => {
-        it('renders disabled button', () => {
-            renderButton({ ...tc.props, disabled: true });
-            expect(screen.getByText(tc.label)).toBeDisabled();
-        });
-        it('does not call onClick when disabled', async () => {
-            renderButton({ ...tc.props, disabled: true });
-            await userEvent.click(screen.getByRole('button', { name: tc.label }));
-            expect(tc.props.onClick).not.toHaveBeenCalled();
-        });
-        it('shows a tooltip even when disabled', async () => {
-            renderButton({ ...tc.props, disabled: true, tooltip: 'Testing tooltip', withQTip: true });
-            // A <Button> with a tooltip does not set the disabled attribute on the button element
-            expect(screen.getByRole('button', { name: tc.label })).not.toBeDisabled();
-            expect(screen.getByRole('button', { name: tc.label })).toHaveAttribute('aria-disabled', 'true');
-            await userEvent.hover(screen.getByRole('button', { name: tc.label }));
-            expect(await screen.findByText('Testing tooltip')).toBeInTheDocument();
-        });
-    });
-});

package/dist/src/Button/Button.types.js

@@ -1,4 +0,0 @@
-export const buttonTypes = ['button', 'reset', 'submit', 'link'];
-export const buttonSizes = ['xs', 'sm', 'lg'];
-export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
-export const iconPositions = ['left', 'right'];

package/dist/src/Button/index.js

@@ -1 +0,0 @@
-export { default } from './Button';