react-restyle-components 0.2.23 → 0.2.25

package/lib/src/core-components/atoms/button/Button.stories.d.ts

@@ -0,0 +1,305 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Button.types").ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: "boolean";
+        };
+        onClick: {
+            action: string;
+        };
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        variant?: "solid" | "outline" | undefined;
+        tooltip?: string | undefined;
+        className?: string | undefined;
+        disabled?: boolean | undefined;
+        form?: string | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        name?: string | undefined;
+        type?: "button" | "reset" | "submit" | undefined;
+        value?: string | number | readonly string[] | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: (string & {}) | "off" | "on" | "none" | "sentences" | "words" | "characters" | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "off" | "on" | undefined;
+        inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        children?: React.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        ref?: React.LegacyRef<HTMLButtonElement> | undefined;
+        key?: React.Key | null | undefined;
+    }>) => React.JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * The component contains styles that will automatically adjust the size of any svg you add as a child.
+ * However the Design System uses a different size for icons if they are the _only_ thing in the button.
+ * To handle this we add the prop `iconOnly`.
+ */
+export declare const Basic: Story;

package/lib/src/core-components/atoms/button/Button.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TooltipProvider } from '../tooltip/tooltip.component';
+import { Button } from './button.component';
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+    title: 'Design System/Atoms/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: { control: 'boolean' },
+        onClick: { action: 'clicked' },
+    },
+    decorators: [
+        (Story) => (React.createElement(React.Fragment, null,
+            React.createElement(TooltipProvider, null,
+                React.createElement(Story, null)))),
+    ],
+};
+export default meta;
+/**
+ * The component contains styles that will automatically adjust the size of any svg you add as a child.
+ * However the Design System uses a different size for icons if they are the _only_ thing in the button.
+ * To handle this we add the prop `iconOnly`.
+ */
+export const Basic = {
+    render: function Render(args) {
+        return React.createElement(Button, { ...args }, "Submit");
+    },
+};

package/lib/src/core-components/atoms/button/Button.test.d.ts

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

package/lib/src/core-components/atoms/button/Button.test.js

@@ -0,0 +1,31 @@
+// Questionable whether these tests are even useful.
+// Included as wanted to have test file for a component to show preferred architecture of UI library.
+// Maybe we will remove this in a future update and only include tests that are genuinely useful.
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './button.component';
+import { TooltipProvider } from '../tooltip/tooltip.component';
+describe('Renders a button', async () => {
+    it('Renders the supplied children', async () => {
+        render(React.createElement(Button, null, "Hello"));
+        const b = await screen.queryByText('Hello');
+        expect(b).toBeInTheDocument();
+    });
+    it('Renders as a button', async () => {
+        render(React.createElement(Button, null, "Hello"));
+        const b = await screen.queryByText('Hello');
+        expect(b?.tagName.toLowerCase()).toBe('button');
+    });
+    it('Includes the tooltip when specified', async () => {
+        render(React.createElement(TooltipProvider, null,
+            React.createElement(Button, { "data-testid": "btn", tooltip: "bye" }, "Hello")));
+        const button = await screen.getByTestId('btn');
+        fireEvent.mouseOver(button);
+        setTimeout(async () => {
+            //delay for tooltip to be available in DOM
+            const t = await screen.queryByText('bye');
+            expect(t).toBeInTheDocument();
+        }, 1000);
+    });
+});

package/lib/src/core-components/atoms/button/Button.types.d.ts

@@ -0,0 +1,25 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
+export type ButtonProps = {
+    variant?: 'solid' | 'outline';
+    /** Optional tooltip content */
+    tooltip?: string;
+    /** ClassName to add so you can add additional styling */
+    className?: string;
+};
+export type LinkButtonProps = Omit<ButtonProps, 'loading'> & {
+    /** The location the link will take you to */
+    to: string;
+    /** The underlaying UI component to use */
+    Component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+};
+export type ToggleButtonProps = Omit<ButtonProps, 'variant'> & {
+    /** Optionally pass an extra classname to the label wrapper */
+    labelClassName?: string;
+    /** Optionally pass an extra classname to the content wrapper */
+    contentClassName?: string;
+    /** Optionally pass an active state. If not passed the component will be uncontrolled. */
+    active?: boolean;
+    /** What variant of button? Defaults to 'brand' */
+    variant?: 'brand' | 'accent';
+};

package/lib/src/core-components/atoms/button/Button.types.js

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

package/lib/src/core-components/atoms/button/button.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from './Button.types';
+import '../../../tc.css';
+/**
+ * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/lib/src/core-components/atoms/button/button.component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import { Tooltip } from '../tooltip/tooltip.component';
+import '../../../tc.css';
+/**
+ * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
+ */
+export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
+    const buttonColorClass = variant === 'solid'
+        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
+    if (tooltip) {
+        return React.createElement(Tooltip, { content: tooltip }, button);
+    }
+    else {
+        return button;
+    }
+});
+Button.displayName = 'Button';

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    parameters: {
+        componentSubtitle: string;
+    };
+    component: ({ children, orientation, horizontalSizing, verticalSizing, className, }: {
+        children: React.ReactNode;
+        orientation?: "horizontal" | "vertical" | undefined;
+        horizontalSizing?: "fill" | "hug" | undefined;
+        verticalSizing?: "fill" | "hug" | undefined;
+        className?: string | undefined;
+    }) => React.JSX.Element;
+    tags: string[];
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        children: React.ReactNode;
+        orientation?: "horizontal" | "vertical" | undefined;
+        horizontalSizing?: "fill" | "hug" | undefined;
+        verticalSizing?: "fill" | "hug" | undefined;
+        className?: string | undefined;
+    }>) => React.JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * At its simplest you can just wrap any `Button` elements in a `ButtonGroup`.
+ *
+ * All props for button scale, variant, etc stay on the Button.
+ * You should use the same scale for all buttons in a group but could mix and match variants and levels.
+ */
+export declare const Basic: Story;
+/**
+ * If only a single `Button` is passed in, it will be visually the same as not wrapping in a `ButtonGroup`.
+ */
+export declare const BasicOneButton: Story;

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { TooltipProvider } from '../../tooltip/tooltip.component';
+import { ButtonGroup } from './buttonGroup.component';
+import { Button } from '../button.component';
+import { BrowserRouter } from 'react-router-dom';
+const meta = {
+    title: 'Design System/Atoms/Button/ButtonGroup',
+    parameters: {
+        componentSubtitle: 'A container for grouping buttons together. Used when you want no space between buttons. Can also be used to create a split button using a Button and a DropdownMenu.',
+    },
+    component: ButtonGroup,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement(React.Fragment, null,
+            React.createElement(BrowserRouter, null,
+                React.createElement(TooltipProvider, null,
+                    React.createElement(Story, null))))),
+    ],
+};
+export default meta;
+/**
+ * At its simplest you can just wrap any `Button` elements in a `ButtonGroup`.
+ *
+ * All props for button scale, variant, etc stay on the Button.
+ * You should use the same scale for all buttons in a group but could mix and match variants and levels.
+ */
+export const Basic = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"))),
+    },
+};
+/**
+ * If only a single `Button` is passed in, it will be visually the same as not wrapping in a `ButtonGroup`.
+ */
+export const BasicOneButton = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            React.createElement(Button, null, "Button 1"))),
+    },
+};

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import '../../../tc.css';
+export declare const ButtonGroup: ({ children, orientation, horizontalSizing, verticalSizing, className, }: {
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical" | undefined;
+    horizontalSizing?: "fill" | "hug" | undefined;
+    verticalSizing?: "fill" | "hug" | undefined;
+    className?: string | undefined;
+}) => React.JSX.Element;

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import '../../../tc.css';
+export const ButtonGroup = ({ children, orientation = 'horizontal', horizontalSizing = 'hug', verticalSizing = 'hug', className, }) => React.createElement("div", { className: `flex gap-2 ${className}` }, children);

package/lib/src/core-components/atoms/icons/icons.component.js

@@ -26,7 +26,7 @@ export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onC
         return (React.createElement("div", { onClick: () => {
                 if (!isDisable)
                     onClick && onClick();
-            } }, !_.isEmpty(tooltip) ? (React.createElement(Tooltip, { tooltipText: tooltip },
+            } }, !_.isEmpty(tooltip) ? (React.createElement(Tooltip, { content: tooltip },
             React.createElement(ElementIcon, { ...iconProps }))) : (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading...") },
             React.createElement(ElementIcon, { ...iconProps })))));
     }

package/lib/src/core-components/atoms/tabs/tabs.component.d.ts

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { ReactNode, ReactElement } from 'react';
 import '../../../tc.css';
+interface TabProps {
+    label: string;
+    children: ReactNode;
+}
+export declare const Tab: ({ label, children }: TabProps) => React.JSX.Element;
 interface TabsProps {
+    tabsClass?: string;
     options: Array<{
         title: string;
         icon: string;
     }>;
     onSelect: (item: string) => void;
+    children?: ReactElement<TabProps> | ReactElement<TabProps>[];
 }
-export declare const Tabs: ({ options, onSelect }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ tabsClass, options, onSelect, children, }: TabsProps) => React.JSX.Element;
 export {};

package/lib/src/core-components/atoms/tabs/tabs.component.js

@@ -1,19 +1,24 @@
 import React, { useState } from 'react';
 import { Icon } from '../..';
 import '../../../tc.css';
-export const Tabs = ({ options, onSelect }) => {
+export const Tab = ({ label, children }) => {
+    return (React.createElement("div", { className: "flex", title: label }, children));
+};
+export const Tabs = ({ tabsClass = 'bg-blue-700', options, onSelect, children, }) => {
     const [selected, setSelected] = useState(options[0].title);
-    return (React.createElement("div", { className: "flex justify-center" },
-        React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "bg-orange1 rounded-md" },
-            React.createElement("div", { className: `inline-flex items-center justify-center p-3 border-b-2 gap-1 ${item.title == selected
-                    ? 'text-white font-bold md:text-md  border-primary active'
-                    : ' text-gray-200  md:text-md border-transparent'}`, onClick: () => {
+    const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
+    return (React.createElement("div", { className: "flex flex-col" },
+        React.createElement("ul", { className: "flex -mb-px text-sm font-medium text-center text-black cursor-pointer gap-1" }, options?.map((item, index) => (React.createElement("li", { key: index, className: `${tabsClass} rounded-md` },
+            React.createElement("div", { className: `inline-flex items-center justify-center p-2 border-b-2 gap-1 ${item.title == selected
+                    ? 'text-white font-bold   border-primary active'
+                    : ' text-gray-200   border-transparent'}`, onClick: () => {
                     setSelected(item.title);
                     onSelect(item.title);
                 } },
-                React.createElement(Icon, { nameIcon: item.icon, propsIcon: {
-                        color: item.title == selected ? '#ffffff' : '#000000',
+                React.createElement(Icon, { nameIcon: item?.icon, propsIcon: {
+                        color: item?.title == selected ? '#ffffff' : '#000000',
                         size: 24,
                     } }),
-                React.createElement("span", { className: "text-3md" }, item.title))))))));
+                React.createElement("span", { className: "text-md" }, item.title)))))),
+        React.createElement("div", { className: "flex" }, tabs[options?.findIndex((item) => item.title === selected)])));
 };

package/lib/src/core-components/atoms/tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: React.PropsWithChildren<import("./Tooltip.types").TooltipProps>) => React.JSX.Element;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        className?: string | undefined;
+        delay?: number | undefined;
+        side?: "top" | "right" | "bottom" | "left" | undefined;
+        sideOffset?: number | undefined;
+        content?: React.ReactNode;
+        align?: "center" | "start" | "end" | undefined;
+        alignOffset?: number | undefined;
+        avoidCollisions?: boolean | undefined;
+        disabled?: boolean | undefined;
+        children?: React.ReactNode;
+    }>) => React.JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicExample: Story;
+export declare const Positions: Story;
+export declare const JSXContent: Story;
+export declare const JSXContentDifferentAlignments: Story;