@seeqdev/qomponents 0.0.132 → 0.0.133

package/dist/Button/Button.stories.js

@@ -1,100 +1,100 @@
-import React from 'react';
-import Button from './Button';
-import { buttonVariants } from './Button.types';
-import { QTip } from '../Tooltip';
-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(QTip, null),
-        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';
+import { QTip } from '../Tooltip';
+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(QTip, null),
+        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

package/dist/ButtonGroup/ButtonGroup.js

@@ -1,33 +1,33 @@
-import React from 'react';
-import '../styles.css';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import Button from '../Button';
-const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
-const activeClassesByVariantLightTheme = {
-    'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
-    'theme': 'tw-bg-sq-color-highlight',
-    'danger': '',
-    'theme-light': '',
-    'no-border': '!tw-bg-sq-disabled-gray',
-    'warning': '',
-};
-const activeClassesByVariantDarkTheme = {
-    'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
-    'theme': 'dark:tw-bg-sq-color-highlight',
-    'danger': '',
-    'theme-light': '',
-    'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
-    'warning': '',
-};
-/**
- * ButtonGroup.
- */
-export const ButtonGroup = (props) => {
-    const { id, extraClassNames, testId, onChange, buttons = [], ...tooltipProps } = props;
-    const tooltipData = getQTipData(tooltipProps);
-    const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    return (React.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item.buttonProps?.isActive
-            ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
-            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
-};
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import Button from '../Button';
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const activeClassesByVariantLightTheme = {
+    'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
+    'theme': 'tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': '!tw-bg-sq-disabled-gray',
+    'warning': '',
+};
+const activeClassesByVariantDarkTheme = {
+    'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
+    'theme': 'dark:tw-bg-sq-color-highlight',
+    'danger': '',
+    'theme-light': '',
+    'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
+    'warning': '',
+};
+/**
+ * ButtonGroup.
+ */
+export const ButtonGroup = (props) => {
+    const { id, extraClassNames, testId, onChange, buttons = [], ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    return (React.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item.buttonProps?.isActive
+            ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
+            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
+};
 //# sourceMappingURL=ButtonGroup.js.map