@seeqdev/qomponents 0.0.108 → 0.0.109

package/dist/Alert/Alert.test.js

@@ -1,51 +1,51 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-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(React.createElement(Alert, { ...defaultProps }));
-        const alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toBeInTheDocument();
-    });
-    it('should render children correctly', () => {
-        render(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(Alert, { ...defaultProps, show: false }));
-        const alertElement = screen.queryByTestId('alert-test-id');
-        expect(alertElement).not.toBeInTheDocument();
-    });
-    it('should apply extra class names', () => {
-        render(React.createElement(Alert, { ...defaultProps, extraClassNames: "extra-class" }));
-        const alertElement = screen.getByTestId('alert-test-id');
-        expect(alertElement).toHaveClass('extra-class');
-    });
-});
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+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(React.createElement(Alert, { ...defaultProps }));
+        const alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toBeInTheDocument();
+    });
+    it('should render children correctly', () => {
+        render(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(Alert, { ...defaultProps, show: false }));
+        const alertElement = screen.queryByTestId('alert-test-id');
+        expect(alertElement).not.toBeInTheDocument();
+    });
+    it('should apply extra class names', () => {
+        render(React.createElement(Alert, { ...defaultProps, extraClassNames: "extra-class" }));
+        const alertElement = screen.getByTestId('alert-test-id');
+        expect(alertElement).toHaveClass('extra-class');
+    });
+});
 //# sourceMappingURL=Alert.test.js.map

package/dist/Alert/Alert.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=Alert.types.js.map

package/dist/Alert/index.js

@@ -1,2 +1,2 @@
-export { Alert as default } from './Alert';
+export { Alert as default } from './Alert';
 //# sourceMappingURL=index.js.map

package/dist/Button/Button.js

@@ -1,92 +1,92 @@
-import React from 'react';
-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-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
-    const baseClassesByVariant = {
-        'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
-        'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
-        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
-            'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
-        'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
-        'no-border': 'disabled:tw-opacity-50',
-        'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color',
-    };
-    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 dark:tw-bg-sq-dark-background tw-border-sq-disabled-gray 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': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight tw-border-sq-color-dark' +
-            ' hover:tw-border-sq-color-highlight',
-        'danger': '',
-        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
-        'no-border': '',
-        'warning': '',
-    };
-    const classesByVariantDarkTheme = {
-        'outline': 'dark:tw-border-sq-dark-disabled-gray 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:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
-            ' dark:hover:tw-border-sq-color-highlight',
-        'danger': '',
-        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
-            ' dark:hover:tw-border-sq-link-dark',
-        'no-border': '',
-        'warning': '',
-    };
-    const sizeClasses = {
-        sm: 'tw-text-sm',
-        lg: 'tw-text-xl',
-    };
-    const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
-    let tooltipData = undefined;
-    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 && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
-            ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}`
-            : '', testId: `${id}_spinner` }));
-    return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
-            stopPropagation && e.stopPropagation();
-            onClick && onClick(e);
-        }, onMouseDown: (e) => {
-            if (preventBlur) {
-                e.preventDefault();
-            }
-        }, className: appliedClasses },
-        iconPosition === 'left' && iconElement,
-        label,
-        iconPosition === 'right' && iconElement));
-};
-export default Button;
+import React from 'react';
+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-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
+    const baseClassesByVariant = {
+        'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
+            'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
+        'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'no-border': 'disabled:tw-opacity-50',
+        'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color',
+    };
+    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 dark:tw-bg-sq-dark-background tw-border-sq-disabled-gray 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': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight tw-border-sq-color-dark' +
+            ' hover:tw-border-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
+        'no-border': '',
+        'warning': '',
+    };
+    const classesByVariantDarkTheme = {
+        'outline': 'dark:tw-border-sq-dark-disabled-gray 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:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
+            ' dark:hover:tw-border-sq-color-highlight',
+        'danger': '',
+        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
+            ' dark:hover:tw-border-sq-link-dark',
+        'no-border': '',
+        'warning': '',
+    };
+    const sizeClasses = {
+        sm: 'tw-text-sm',
+        lg: 'tw-text-xl',
+    };
+    const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
+    let tooltipData = undefined;
+    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 && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
+            ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}`
+            : '', testId: `${id}_spinner` }));
+    return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
+            stopPropagation && e.stopPropagation();
+            onClick && onClick(e);
+        }, onMouseDown: (e) => {
+            if (preventBlur) {
+                e.preventDefault();
+            }
+        }, className: appliedClasses },
+        iconPosition === 'left' && iconElement,
+        label,
+        iconPosition === 'right' && iconElement));
+};
+export default Button;
 //# sourceMappingURL=Button.js.map

package/dist/Button/Button.stories.js

@@ -1,98 +1,98 @@
-import React from 'react';
-import Button from './Button';
-import { buttonVariants } from './Button.types';
-export default {
-    title: 'Button',
-};
-export const AllButtonVariants = () => {
-    const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations())));
-};
-export const ButtonWithTooltip = () => {
-    const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderButtonWithTooltip()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderButtonWithTooltip()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderButtonWithTooltip()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderButtonWithTooltip())));
-};
-export const ButtonWithIcon = () => {
-    const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
-    const renderButtonWithIconOnRight = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" })),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderButtonWithIcon()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderButtonWithIcon()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderButtonWithIcon()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderButtonWithIcon()),
-        React.createElement("div", { className: "color_topic" }, renderButtonWithIconOnRight()),
-        React.createElement("div", { className: "color_analysis" }, renderButtonWithIconOnRight()),
-        React.createElement("div", { className: "color_datalab" }, renderButtonWithIconOnRight()),
-        React.createElement("div", { className: "color_vantage" }, renderButtonWithIconOnRight())));
-};
-export const DisabledButton = () => {
-    const renderDisabledButton = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4" },
-            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
-            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
-            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderDisabledButton()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderDisabledButton()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderDisabledButton()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderDisabledButton())));
-};
+import React from 'react';
+import Button from './Button';
+import { buttonVariants } from './Button.types';
+export default {
+    title: 'Button',
+};
+export const AllButtonVariants = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-grid tw-grid-cols-2 tw-gap-4" },
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant })))))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
+export const ButtonWithTooltip = () => {
+    const renderButtonWithTooltip = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithTooltip()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderButtonWithTooltip())));
+};
+export const ButtonWithIcon = () => {
+    const renderButtonWithIcon = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" }))));
+    const renderButtonWithIconOnRight = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { icon: "fc-search-power", iconPosition: "right", variant: "theme", label: "With Icon On Right" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderButtonWithIcon()),
+        React.createElement("div", { className: "color_topic" }, renderButtonWithIconOnRight()),
+        React.createElement("div", { className: "color_analysis" }, renderButtonWithIconOnRight()),
+        React.createElement("div", { className: "color_datalab" }, renderButtonWithIconOnRight()),
+        React.createElement("div", { className: "color_vantage" }, renderButtonWithIconOnRight())));
+};
+export const DisabledButton = () => {
+    const renderDisabledButton = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4" },
+            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
+            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" })),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement(Button, { disabled: true, variant: "theme", label: "Disabled Button" }),
+            React.createElement(Button, { extraClassNames: "tw-m-5", disabled: true, label: "Disabled Button" }))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderDisabledButton()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderDisabledButton()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderDisabledButton()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderDisabledButton())));
+};
 //# sourceMappingURL=Button.stories.js.map

package/dist/Button/Button.test.js

@@ -1,49 +1,49 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Button from './Button';
-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 = (props) => render(React.createElement(Button, { ...props }));
-    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();
-    });
-    it('renders disabled button', () => {
-        renderButton({ ...tc.props, disabled: true });
-        expect(screen.getByText(tc.label)).toBeDisabled();
-    });
-    it('respects stopPropagation default', async () => {
-        const callOnPropagation = jest.fn();
-        render(React.createElement("div", { onClick: callOnPropagation },
-            React.createElement(Button, { ...tc.props })));
-        await userEvent.click(screen.getByTestId(tc.testId));
-        expect(callOnPropagation).not.toHaveBeenCalled();
-    });
-    it('propagates click event if not told not to', async () => {
-        const callOnPropagation = jest.fn();
-        render(React.createElement("div", { onClick: callOnPropagation },
-            React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
-        await userEvent.click(screen.getByTestId(tc.testId));
-        expect(callOnPropagation).toHaveBeenCalled();
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from './Button';
+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 = (props) => render(React.createElement(Button, { ...props }));
+    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();
+    });
+    it('renders disabled button', () => {
+        renderButton({ ...tc.props, disabled: true });
+        expect(screen.getByText(tc.label)).toBeDisabled();
+    });
+    it('respects stopPropagation default', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...tc.props })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).not.toHaveBeenCalled();
+    });
+    it('propagates click event if not told not to', async () => {
+        const callOnPropagation = jest.fn();
+        render(React.createElement("div", { onClick: callOnPropagation },
+            React.createElement(Button, { ...{ ...tc.props, stopPropagation: false } })));
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(callOnPropagation).toHaveBeenCalled();
+    });
+});
 //# sourceMappingURL=Button.test.js.map

package/dist/Button/Button.types.js

@@ -1,5 +1,5 @@
-export const buttonTypes = ['button', 'reset', 'submit', 'link'];
-export const buttonSizes = ['sm', 'lg'];
-export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
-export const iconPositions = ['left', 'right'];
+export const buttonTypes = ['button', 'reset', 'submit', 'link'];
+export const buttonSizes = ['sm', 'lg'];
+export const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+export const iconPositions = ['left', 'right'];
 //# sourceMappingURL=Button.types.js.map

package/dist/Button/index.js

@@ -1,2 +1,2 @@
-export { default } from "./Button";
+export { default } from "./Button";
 //# sourceMappingURL=index.js.map