react-restyle-components 0.2.23 → 0.2.24

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

@@ -0,0 +1,320 @@
+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, {
+        tooltip?: string | undefined;
+        level?: "primary" | "secondary" | undefined;
+        variant?: "brand" | "danger" | "accent" | "neutral" | undefined;
+        scale?: "s" | "xl" | "l" | "m" | "xs" | "xxs" | undefined;
+        iconOnly?: boolean | undefined;
+        focus?: "none" | "visible" | "focus" | undefined;
+        loading?: boolean | 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 IconOnly: Story;
+export declare const TextOnly: Story;
+/**
+ * The Button doesn't technically have any controls to position the icon. The Button can accept any content as its children, so if you want to add an icon at the end of text, you simply add both as children in that order:
+ */
+export declare const TextWithIconAtEnd: Story;
+/**
+ * Or to put it at the start you just... put it at the start:
+ */
+export declare const TextWithIconAtStart: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import Attach from '../../../assets/icons/attach.svg';
+import { TooltipProvider } from '../tooltip/tooltip.component';
+import { Button } from './button.component';
+import { useState } from 'react';
+// 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 IconOnly = {
+    render: (args) => (React.createElement(Button, { ...args },
+        React.createElement(Attach, null))),
+    args: {
+        iconOnly: true,
+    },
+};
+export const TextOnly = {
+    args: {
+        children: 'Button',
+    },
+};
+/**
+ * The Button doesn't technically have any controls to position the icon. The Button can accept any content as its children, so if you want to add an icon at the end of text, you simply add both as children in that order:
+ */
+export const TextWithIconAtEnd = {
+    render: (args) => (React.createElement(Button, { ...args },
+        "Attach ",
+        React.createElement(Attach, null))),
+};
+/**
+ * Or to put it at the start you just... put it at the start:
+ */
+export const TextWithIconAtStart = {
+    render: (args) => (React.createElement(Button, { ...args },
+        React.createElement(Attach, null),
+        " Attach")),
+};
+export const Loading = {
+    render: function Render(args) {
+        const [loading, setLoading] = useState(false);
+        const handleClick = () => {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+            }, 2000);
+        };
+        return (React.createElement(Button, { ...args, loading: loading, onClick: handleClick }, args.children || 'Slow loading button'));
+    },
+};

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,36 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { LinkProps } from 'react-router-dom';
+export type ButtonProps = {
+    /** Optional tooltip content */
+    tooltip?: string;
+    /** What level of button? Defaults to 'primary' */
+    level?: 'primary' | 'secondary';
+    /** What variant of button? Defaults to 'brand' */
+    variant?: 'brand' | 'danger' | 'accent' | 'neutral';
+    /** What size of button? Defaults to 'm' */
+    scale?: 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
+    /** Does the button only include a single SVG? If so we will tweak styles. Defaults to false. */
+    iconOnly?: boolean;
+    /** What kind of focus of button? Defaults to 'visible' */
+    focus?: 'visible' | 'focus' | 'none';
+    /** should we replace content with a loading indicator */
+    loading?: boolean;
+    /** 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 {};