@seeqdev/qomponents 0.0.183 → 0.0.185

package/dist/src/Checkbox/Checkbox.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+import userEvent from '@testing-library/user-event';
+describe('Checkbox', () => {
+    class Context {
+        testId = 'checkboxTestId';
+        props = {
+            onChange: jest.fn(),
+            checked: false,
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderCheckbox = (props) => render(_jsx(Checkbox, { ...props }));
+    it('renders checkbox', () => {
+        renderCheckbox(tc.props);
+        expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
+    });
+    it('renders radio', () => {
+        renderCheckbox({ ...tc.props, type: 'radio' });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
+    });
+    it('renders label', () => {
+        const label = 'look at this checkbox!';
+        renderCheckbox({ ...tc.props, label });
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+    it('respects checked', () => {
+        renderCheckbox({ ...tc.props, checked: true });
+        expect(screen.getByTestId(tc.testId)).toBeChecked();
+    });
+    it('calls onChange handler', async () => {
+        const onChange = jest.fn();
+        renderCheckbox({ ...tc.props, onChange });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onChange).toHaveBeenCalled();
+    });
+    it('calls onKeyDown handler', async () => {
+        const onKeyDown = jest.fn();
+        renderCheckbox({ ...tc.props, onKeyDown });
+        await userEvent.type(screen.getByTestId(tc.testId), 'a');
+        expect(onKeyDown).toHaveBeenCalled();
+    });
+    it('calls onClickHandler handler', async () => {
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, onClick });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects disabled', () => {
+        renderCheckbox({ ...tc.props, disabled: true });
+        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
+    });
+    it('renders label clickable', async () => {
+        const label = 'amazing checkbox';
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, label, onClick });
+        expect(screen.getByTestId(tc.testId)).not.toBeChecked();
+        await userEvent.click(screen.getByText(label));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects id', () => {
+        const id = 'checkboxId';
+        renderCheckbox({ ...tc.props, id });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
+    });
+    it('respects name', () => {
+        const name = 'checkboxName';
+        renderCheckbox({ ...tc.props, name });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
+    });
+    it('respects name', () => {
+        const value = 'priceless';
+        renderCheckbox({ ...tc.props, value });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
+    });
+    it('applies extraClassNames', () => {
+        const extraClassNames = 'extra styling so fancy';
+        renderCheckbox({ ...tc.props, extraClassNames });
+        expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
+    });
+    it('applies extraLabelClassNames', () => {
+        const extraLabelClassNames = 'special label';
+        const label = 'amazing checkbox';
+        renderCheckbox({ ...tc.props, extraLabelClassNames, label });
+        expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
+    });
+});

package/dist/src/Checkbox/Checkbox.types.js

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

package/dist/src/Checkbox/index.js

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

package/dist/src/Collapse/Collapse.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+const Collapse = ({ isVisible, children }) => {
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    useEffect(() => {
+        if (contentRef.current) {
+            setTimeout(() => {
+                setContentHeight((contentRef.current?.scrollHeight ?? 0) + 5);
+            }, 0);
+        }
+    }, [children]);
+    return (_jsx(AnimatePresence, { initial: false, children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { type: 'spring', damping: 20, stiffness: 100 }, children: _jsx("div", { ref: contentRef, children: children }) })) }));
+};
+export default Collapse;

package/dist/src/Collapse/Collapse.stories.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Collapse from './Collapse';
+import { QTip } from '../Tooltip';
+import Button from '../Button';
+export default {
+    title: 'Collapse',
+};
+export const AllCollapses = () => {
+    const [isVisible, setIsVisible] = React.useState(true);
+    const renderChild = () => (_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 content to be shown when the collapse is visible. Click the button above to toggle it" }), _jsx(Button, { variant: "outline", label: "Save data" })
+        ] }));
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsx("div", { className: "tw-p-4 light", children: _jsxs("div", { className: "tw-p-4", children: [
+                        _jsx(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }), _jsx(Collapse, { isVisible: isVisible, children: renderChild() })
+                    ] }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsxs("div", { className: "tw-p-4", children: [
+                        _jsx(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }), _jsx(Collapse, { isVisible: isVisible, children: renderChild() })
+                    ] }) })
+        ] }));
+    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" }), 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()] })
+        ] }));
+};

package/dist/src/Collapse/Collapse.test.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Collapse from './Collapse';
+describe('Collapse component', () => {
+    test('renders children when visible', async () => {
+        render(_jsx(Collapse, { isVisible: true, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('content')).toBeVisible();
+        });
+    });
+    test('does not render children when not visible', async () => {
+        render(_jsx(Collapse, { isVisible: false, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        expect(screen.queryByTestId('content')).not.toBeInTheDocument();
+    });
+});

package/dist/src/Collapse/Collapse.types.js

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

package/dist/src/Collapse/index.js

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

package/dist/src/Icon/Icon.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const colorClassesThemeLight = {
+    'theme': 'tw-text-sq-color-dark',
+    'white': 'tw-text-white',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': 'tw-text-sq-warning-color',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'tw-text-sq-disabled-gray',
+    'color': '',
+    'info': 'tw-text-sq-link',
+    'text': 'tw-text-sq-text-color',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+const colorClassesThemeDark = {
+    'theme': 'dark:tw-text-sq-color-dark-dark',
+    'white': '',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': '',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'dark:tw-text-sq-dark-disabled-gray',
+    'color': '',
+    'info': 'dark:tw-text-sq-link-dark',
+    'text': 'dark:tw-text-sq-dark-text',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, size, color, testId, customId, number, ...tooltipProps }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return _jsx("div", { className: "tw-text-sq-danger-color", children: errorMessage });
+    }
+    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
+    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
+    const style = type === 'color' && color ? { color } : {};
+    const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
+    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
+    const tooltipData = getQTipData(tooltipProps);
+    return (_jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
+};
+export default Icon;

package/dist/src/Icon/Icon.stories.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from './Icon';
+import { iconTypes } from './Icon.types';
+export default {
+    title: 'Icons',
+};
+export const AllIcons = () => {
+    const renderAllVariations = () => {
+        return (_jsxs(_Fragment, { children: [
+                _jsx("br", {}), _jsx("br", {}), iconTypes.map((iconType) => {
+                    return (_jsxs("div", { children: [
+                            _jsxs("b", { children: ["type=", iconType] }), _jsx("br", {}), _jsxs("div", { children: [
+                                    _jsx(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-genai-agent-q", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsxs("div", { children: [
+                                    _jsx(Icon, { icon: "fc-statistics-menu", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-statistic-summary", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-create-summary", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-view-summaries", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsx("b", { children: "Sizes" }), _jsx("br", {}), _jsxs("div", { className: "tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-py-6", children: [
+                                    _jsx(Icon, { icon: "fc-pca", size: "2xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "sm", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "lg", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "2xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined })
+                                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                                    _jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsx("br", {})
+                        ] }, `${iconType}`));
+                })] }));
+    };
+    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()] })
+        ] }));
+};

package/dist/src/Icon/Icon.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Icon from './Icon';
+describe('Icon', () => {
+    class Context {
+        testId = 'iconTestId';
+        icon = 'testIcon';
+        props = {
+            icon: this.icon,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderIcon = (props) => render(_jsx(Icon, { ...props }));
+    it('renders icon', () => {
+        renderIcon(tc.props);
+        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
+    });
+    it('renders large icon', () => {
+        renderIcon({ ...tc.props, large: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
+    });
+    it('renders small icon', () => {
+        renderIcon({ ...tc.props, small: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
+    });
+    describe('icon types', () => {
+        it('renders the theme type by default', () => {
+            renderIcon(tc.props);
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
+        });
+        it('renders the white icon', () => {
+            renderIcon({ ...tc.props, type: 'white' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
+        });
+        it('renders the text-type icon', () => {
+            renderIcon({ ...tc.props, type: 'text' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
+        });
+        it('renders the color-type icon', () => {
+            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
+            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
+        });
+        it('renders a warning if type=color and no color is provided', () => {
+            renderIcon({ ...tc.props, type: 'color' });
+            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
+        });
+    });
+});

package/dist/src/Icon/Icon.types.d.ts

@@ -1,6 +1,6 @@
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
-export type IconType = (typeof iconTypes)[number];
+export type IconType = typeof iconTypes[number];
 export type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
 /**
  * Props for the Icon component that renders customizable icons with various styling options.

package/dist/src/Icon/Icon.types.js

@@ -0,0 +1,15 @@
+export const iconTypes = [
+    'theme',
+    'white',
+    'dark-gray',
+    'darkish-gray',
+    'gray',
+    'color',
+    'info',
+    'text',
+    'warning',
+    'inherit',
+    'danger',
+    'theme-light',
+    'success',
+];

package/dist/src/Icon/index.js

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

package/dist/src/InputGroup/InputGroup.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import TextField from '../TextField';
+import Button from '../Button';
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
+const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+/**
+ * InputGroup.
+ */
+export const InputGroup = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const elementsToAppend = append.filter(Boolean);
+    return (_jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (_jsx("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}`, children: field })) : (_jsx(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
+                return item?.variant === 'button' ? (_jsx(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (_jsx("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
+            })] }));
+});

package/dist/src/InputGroup/InputGroup.stories.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputGroup } from './InputGroup';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'InputGroup',
+};
+export const AllTextFields = () => {
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "light", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { value: "value provided", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
+                                {
+                                    variant: 'element',
+                                    element: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: "Custom" }),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", onClick: () => console.log('clicked'), children: "custom grouped element" }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: _jsxs("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: [
+                                    _jsx("div", { className: "tw-rounded-sm tw-bg-green-400 ", children: "Custom element 1" }), _jsx("div", { className: "tw-rounded-sm tw-bg-red-400 tw-mt-1", onClick: () => console.log('clicked'), children: "Custom element 2" })
+                                ] }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit 2" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Delete" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, placeholder: "inputgroup without any appended element", tooltipPlacement: "top", isHtmlTooltip: false, append: [] }) })
+                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { value: "value provided", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", field: _jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", onClick: () => console.log('clicked'), children: "custom grouped element" }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Custom" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, field: _jsxs("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background", children: [
+                                    _jsx("div", { className: "tw-rounded-sm tw-bg-green-400 dark:tw-text-sq-dark-text", children: "Custom element 1" }), _jsx("div", { className: "tw-rounded-sm tw-bg-red-400 dark:tw-text-sq-dark-text tw-mt-1", onClick: () => console.log('clicked'), children: "Custom element 2" })
+                                ] }), append: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Edit" })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text", children: "Delete" })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, placeholder: "inputgroup without any appended element", tooltipPlacement: "top", isHtmlTooltip: false, append: [] }) })
+                ] })
+        ] }));
+    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" }), 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()] })
+        ] }));
+};

package/dist/src/InputGroup/InputGroup.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { InputGroup } from './InputGroup';
+describe('InputGroup', () => {
+    const defaultProps = {
+        value: 'with tooltip',
+        append: [
+            {
+                variant: 'button',
+                buttonProps: {
+                    icon: 'fc-annotate',
+                    iconStyle: 'theme',
+                },
+            },
+        ],
+        extraClassNames: 'extra-class',
+        tooltip: 'Tooltip title',
+        tooltipDelay: 0,
+        id: 'input-group-id',
+        testId: 'input-group-test-id',
+    };
+    it('renders without crashing', () => {
+        const { getByTestId } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(getByTestId('input-group-test-id')).toBeInTheDocument();
+    });
+    it('applies the correct classes', () => {
+        const { getByTestId } = render(_jsx(InputGroup, { ...defaultProps }));
+        const inputGroup = getByTestId('input-group-test-id');
+        expect(inputGroup).toHaveClass('tw-flex');
+        expect(inputGroup).toHaveClass('tw-outline-none');
+        expect(inputGroup).toHaveClass('extra-class');
+    });
+    it('renders append items', () => {
+        const { getByRole } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(getByRole('button')).toBeInTheDocument();
+    });
+    it('renders input element', () => {
+        const { container } = render(_jsx(InputGroup, { ...defaultProps }));
+        expect(container.querySelector('input[type="text"]')).toBeInTheDocument();
+    });
+});

package/dist/src/InputGroup/InputGroup.types.js

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

package/dist/src/InputGroup/index.js

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