@nulogy/components 16.0.1 → 16.0.3

package/dist/src/DescriptionList/stories/fixtures.d.ts

@@ -11,7 +11,7 @@ export declare const OutlinedDd: import("styled-components/dist/types").IStyledC
     $outlined: boolean;
     $highlighted?: boolean;
 }>> & string;
-export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Record<string, unknown> & {
-    children?: React.ReactNode | undefined;
+export declare const DashedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Record<string, unknown>, "ref"> & {
+    ref?: unknown;
 }) | (Omit<Record<string, unknown>, "ref"> & React.RefAttributes<React.Component<Record<string, unknown>, any, any>>), import("styled-components/dist/types").BaseObject>> & (string & (Omit<React.ComponentClass<Record<string, unknown>, any>, keyof React.Component<any, {}, any>> | Omit<React.FunctionComponent<Record<string, unknown>>, keyof React.Component<any, {}, any>>));
 export declare const SampleContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DropdownMenu/DropdownMenu.story.d.ts

@@ -6,54 +6,54 @@ declare const _default: {
 };
 export default _default;
 export declare const _DropdownMenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomTrigger: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomColors: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithButtonClosingMenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomLink: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomText: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDefaultOpen: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithSubmenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithVisitedLinks: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithConditionallyRenderedMenuItems: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRenderProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/DropdownMenu/DropdownMenu.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, DropdownText, Button, Flex, Text, Icon, } from "../index";
 const customColors = {
     color: "white",
@@ -11,35 +12,76 @@ export default {
         diffThreshold: 0.4,
     },
 };
-export const _DropdownMenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-_DropdownMenu.story = {
+export const _DropdownMenu = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "DropdownMenu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu on click", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+            await expect(canvas.getByLabelText("close dropdown")).toBeInTheDocument();
+        });
+        await step("closes the menu on click", async () => {
+            await userEvent.click(canvas.getByLabelText("close dropdown"));
+            await waitFor(() => expect(canvas.queryByLabelText("close dropdown")).not.toBeInTheDocument());
+        });
+    },
 };
-export const WithCustomTrigger = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => _jsx(Button, { children: "Custom Trigger" }), children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-WithCustomTrigger.story = {
+export const WithCustomTrigger = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => _jsx(Button, { children: "Custom Trigger" }), children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "with custom trigger",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu with a custom trigger", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+    },
 };
-export const WithCustomColors = () => (_jsxs(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", ...customColors, children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, ...customColors, children: "Dropdown Button" })] }));
-WithCustomColors.story = {
+export const WithCustomColors = {
+    render: () => (_jsxs(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", ...customColors, children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, ...customColors, children: "Dropdown Button" })] })),
     name: "with custom colors",
 };
-export const WithButtonClosingMenu = () => (_jsx(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: ({ closeMenu }) => _jsx(DropdownButton, { onClick: closeMenu, children: "Dropdown Button" }) }));
-WithButtonClosingMenu.story = {
+export const WithButtonClosingMenu = {
+    render: () => (_jsx(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: ({ closeMenu }) => _jsx(DropdownButton, { onClick: closeMenu, children: "Dropdown Button" }) })),
     name: "with button closing menu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+        await step("closes the menu using the callback button", async () => {
+            await userEvent.click(screen.getByText("Dropdown Button"));
+            await waitFor(() => expect(canvas.queryByLabelText("close dropdown")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithCustomLink = () => (_jsx(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", children: "Custom Link Component" }) }) }));
 export const WithCustomText = () => (_jsx(DropdownMenu, { defaultOpen: true, children: _jsx(DropdownText, { children: "Custom Text" }) }));
-export const SetToDefaultOpen = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", style: { textDecoration: "none" }, children: "Custom Link Component" }) }), _jsx(DropdownText, { children: "Custom Text" })] }));
-SetToDefaultOpen.story = {
+export const SetToDefaultOpen = {
+    render: () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", style: { textDecoration: "none" }, children: "Custom Link Component" }) }), _jsx(DropdownText, { children: "Custom Text" })] })),
     name: "set to defaultOpen",
 };
-export const WithSubmenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsxs(DropdownMenu, { trigger: () => (_jsx(DropdownButton, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Text, { children: "Submenu" }), _jsx(Icon, { icon: "rightArrow", title: "right arrow" })] }) })), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown", children: [_jsx(DropdownButton, { onClick: () => { }, children: "Inner Dropdown Button" }), _jsx(DropdownText, { children: " Inner Custom Text" })] })] }));
-WithSubmenu.story = {
+export const WithSubmenu = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsxs(DropdownMenu, { trigger: () => (_jsx(DropdownButton, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Text, { children: "Submenu" }), _jsx(Icon, { icon: "rightArrow", title: "right arrow" })] }) })), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown", children: [_jsx(DropdownButton, { onClick: () => { }, children: "Inner Dropdown Button" }), _jsx(DropdownText, { children: " Inner Custom Text" })] })] })),
     name: "with submenu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+        await step("opens the submenu on hover", async () => {
+            await userEvent.hover(screen.getByLabelText("open sub dropdown"));
+            await waitFor(() => expect(screen.getByText("Inner Dropdown Button")).toBeVisible());
+        });
+    },
 };
 export const WithVisitedLinks = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/", style: { textDecoration: "none" }, children: "Custom Link Component" }) })] }));
-export const SetToDisabled = () => (_jsxs(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "Set to disabled",
 };
 export const WithConditionallyRenderedMenuItems = () => {
@@ -47,7 +89,7 @@ export const WithConditionallyRenderedMenuItems = () => {
     const showItemC = true;
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: () => { }, children: "Item A" }), showItemB && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item B" }), showItemC && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item C" })] }));
 };
-export const WithRenderProps = () => (_jsx(DropdownMenu, { children: ({ closeMenu, openMenu }) => (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { onClick: (e) => closeMenu(e), children: "Close menu" }), _jsx(DropdownButton, { onClick: (e) => openMenu(e), children: "Open menu" })] })) }));
-WithRenderProps.story = {
+export const WithRenderProps = {
+    render: () => (_jsx(DropdownMenu, { children: ({ closeMenu, openMenu }) => (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { onClick: (e) => closeMenu(e), children: "Close menu" }), _jsx(DropdownButton, { onClick: (e) => openMenu(e), children: "Open menu" })] })) })),
     name: "With render props",
 };

package/dist/src/DropdownMenu/DropdownMenuContainer.d.ts

@@ -7,5 +7,5 @@ type DropdownMenuContainerProps = {
     dataPlacement?: any;
     theme?: DefaultNDSThemeType;
 };
-declare const DropdownMenuContainer: React.FC<React.PropsWithChildren<DropdownMenuContainerProps>>;
+declare const DropdownMenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, DropdownMenuContainerProps>> & string;
 export default DropdownMenuContainer;

package/dist/src/DropdownMenu/DropdownText.d.ts

@@ -1,5 +1,5 @@
 import type { TextProps } from "../Type";
-declare const DropdownText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const DropdownText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

package/dist/src/FieldLabel/FieldLabel.story.d.ts

@@ -3,10 +3,8 @@ declare const _default: {
 };
 export default _default;
 export declare const _FieldLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithHelpText: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRequirementText: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/FieldLabel/FieldLabel.story.js

@@ -5,8 +5,8 @@ const helpTextWithLink = (_jsxs(_Fragment, { children: ["I am help text. I can b
 export default {
     title: "Components/FieldLabel",
 };
-export const _FieldLabel = () => _jsx(FieldLabel, { labelText: "Default label" });
-_FieldLabel.story = {
+export const _FieldLabel = {
+    render: () => _jsx(FieldLabel, { labelText: "Default label" }),
     name: "FieldLabel",
 };
 export const WithHelpText = () => _jsx(FieldLabel, { labelText: "Default label", helpText: helpTextWithLink });

package/dist/src/FieldLabel/HelpText.d.ts

@@ -1,4 +1,4 @@
-declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

package/dist/src/Flex/Flex.story.d.ts

@@ -4,104 +4,70 @@ declare const _default: {
 export default _default;
 export declare const _Flex: () => import("react/jsx-runtime").JSX.Element;
 export declare const FlexDirectionSetToRowReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexDirectionSetToColumn: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexDirectionSetToColumnReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToNoWrapDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToWrap: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToWrapReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToFlexStartDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToFlexEnd: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToCenter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceBetween: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceAround: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceEvenly: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToStretchDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToFlexStart: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToCenter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToFlexEnd: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomOrder: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Flex/Flex.story.js

@@ -15,73 +15,73 @@ export default {
 export const _Flex = () => (_jsxs(Flex, { style: {
         boxSizing: "content-box",
     }, padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-export const FlexDirectionSetToRowReverse = () => (_jsxs(Flex, { style: {
-        boxSizing: "content-box",
-    }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToRowReverse.story = {
+export const FlexDirectionSetToRowReverse = {
+    render: () => (_jsxs(Flex, { style: {
+            boxSizing: "content-box",
+        }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to row-reverse",
 };
-export const FlexDirectionSetToColumn = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToColumn.story = {
+export const FlexDirectionSetToColumn = {
+    render: () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to column",
 };
-export const FlexDirectionSetToColumnReverse = () => (_jsxs(Flex, { flexDirection: "column-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToColumnReverse.story = {
+export const FlexDirectionSetToColumnReverse = {
+    render: () => (_jsxs(Flex, { flexDirection: "column-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to column-reverse",
 };
-export const FlexWrapSetToNoWrapDefault = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "nowrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToNoWrapDefault.story = {
+export const FlexWrapSetToNoWrapDefault = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "nowrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to no-wrap (default)",
 };
-export const FlexWrapSetToWrap = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToWrap.story = {
+export const FlexWrapSetToWrap = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to wrap",
 };
-export const FlexWrapSetToWrapReverse = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToWrapReverse.story = {
+export const FlexWrapSetToWrapReverse = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to wrap-reverse",
 };
-export const JustifyContentSetToFlexStartDefault = () => (_jsxs(Flex, { justifyContent: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToFlexStartDefault.story = {
+export const JustifyContentSetToFlexStartDefault = {
+    render: () => (_jsxs(Flex, { justifyContent: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to flex-start (default)",
 };
-export const JustifyContentSetToFlexEnd = () => (_jsxs(Flex, { justifyContent: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToFlexEnd.story = {
+export const JustifyContentSetToFlexEnd = {
+    render: () => (_jsxs(Flex, { justifyContent: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to flex-end",
 };
-export const JustifyContentSetToCenter = () => (_jsxs(Flex, { justifyContent: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToCenter.story = {
+export const JustifyContentSetToCenter = {
+    render: () => (_jsxs(Flex, { justifyContent: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to center",
 };
-export const JustifyContentSetToSpaceBetween = () => (_jsxs(Flex, { justifyContent: "space-between", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceBetween.story = {
+export const JustifyContentSetToSpaceBetween = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-between", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-between",
 };
-export const JustifyContentSetToSpaceAround = () => (_jsxs(Flex, { justifyContent: "space-around", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceAround.story = {
+export const JustifyContentSetToSpaceAround = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-around", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-around",
 };
-export const JustifyContentSetToSpaceEvenly = () => (_jsxs(Flex, { justifyContent: "space-evenly", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceEvenly.story = {
+export const JustifyContentSetToSpaceEvenly = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-evenly", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-evenly",
 };
-export const AlignItemsSetToStretchDefault = () => (_jsxs(Flex, { alignItems: "stretch", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToStretchDefault.story = {
+export const AlignItemsSetToStretchDefault = {
+    render: () => (_jsxs(Flex, { alignItems: "stretch", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to stretch (default)",
 };
-export const AlignItemsSetToFlexStart = () => (_jsxs(Flex, { alignItems: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToFlexStart.story = {
+export const AlignItemsSetToFlexStart = {
+    render: () => (_jsxs(Flex, { alignItems: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to flex-start",
 };
-export const AlignItemsSetToCenter = () => (_jsxs(Flex, { alignItems: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToCenter.story = {
+export const AlignItemsSetToCenter = {
+    render: () => (_jsxs(Flex, { alignItems: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to center",
 };
-export const AlignItemsSetToFlexEnd = () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToFlexEnd.story = {
+export const AlignItemsSetToFlexEnd = {
+    render: () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to flex-end",
 };
-export const WithCustomOrder = () => (_jsxs(Flex, { children: [_jsx(StyledBox, { order: 1, children: "1" }), _jsx(StyledBox, { order: 3, children: "2" }), _jsx(StyledBox, { order: 2, children: "3" }), _jsx(StyledBox, { order: 5, children: "4" }), _jsx(StyledBox, { order: 4, children: "5" })] }));
-WithCustomOrder.story = {
+export const WithCustomOrder = {
+    render: () => (_jsxs(Flex, { children: [_jsx(StyledBox, { order: 1, children: "1" }), _jsx(StyledBox, { order: 3, children: "2" }), _jsx(StyledBox, { order: 2, children: "3" }), _jsx(StyledBox, { order: 5, children: "4" }), _jsx(StyledBox, { order: 4, children: "5" })] })),
     name: "With custom order",
 };

package/dist/src/Form/Form.story.d.ts

@@ -4,27 +4,19 @@ declare const _default: {
 export default _default;
 export declare const _Form: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutTitle: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFormSections: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFormSectionsWithoutTitles: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const DemoForm: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnAction: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Form/Form.story.js

@@ -8,20 +8,20 @@ export default {
     title: "Components/Form",
 };
 export const _Form = () => (_jsxs(Form, { title: "New Profile", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
-export const WithoutTitle = () => (_jsxs(Form, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
-WithoutTitle.story = {
+export const WithoutTitle = {
+    render: () => (_jsxs(Form, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] })),
     name: "Without title",
 };
-export const WithFormSections = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
-WithFormSections.story = {
+export const WithFormSections = {
+    render: () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] })),
     name: "With form sections",
 };
-export const WithFormSectionsWithoutTitles = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
-WithFormSectionsWithoutTitles.story = {
+export const WithFormSectionsWithoutTitles = {
+    render: () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] })),
     name: "With form sections without titles",
 };
-export const DemoForm = () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Job 324400", children: [_jsxs(Alert, { type: "danger", title: "Errors have occured ...", children: [_jsx(Text, { children: "Instructions and description of errors" }), _jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "Affected field" }), _jsx(ListItem, { children: "Unmet criteria" }), _jsx(ListItem, { children: _jsx("a", { href: "https://nulogy.design/", children: "Affected field" }) })] })] }), _jsxs(FormSection, { title: "Job Information", children: [_jsx(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }), _jsx(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }), _jsx(Select, { id: "project-status", labelText: "Project status", options: options }), _jsx(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }), _jsx(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }), _jsx(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }), _jsx(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }), _jsx(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }), _jsxs(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)", children: [_jsx(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }), _jsx(Checkbox, { value: "matt", labelText: "Matt Dunn" }), _jsx(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }), _jsx(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })] }), _jsxs(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile", children: [_jsx(Radio, { value: "yes", labelText: "Yes" }), _jsx(Radio, { value: "no", labelText: "No" }), _jsx(Radio, { value: "maybe", labelText: "Maybe", disabled: true })] }), _jsx(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })] }), _jsxs(FormSection, { title: "Rejects", children: [_jsx(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }), _jsx(Input, { id: "quantity", labelText: "Quantity" }), _jsx(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })] })] }) }));
-DemoForm.story = {
+export const DemoForm = {
+    render: () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Job 324400", children: [_jsxs(Alert, { type: "danger", title: "Errors have occured ...", children: [_jsx(Text, { children: "Instructions and description of errors" }), _jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "Affected field" }), _jsx(ListItem, { children: "Unmet criteria" }), _jsx(ListItem, { children: _jsx("a", { href: "https://nulogy.design/", children: "Affected field" }) })] })] }), _jsxs(FormSection, { title: "Job Information", children: [_jsx(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }), _jsx(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }), _jsx(Select, { id: "project-status", labelText: "Project status", options: options }), _jsx(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }), _jsx(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }), _jsx(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }), _jsx(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }), _jsx(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }), _jsxs(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)", children: [_jsx(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }), _jsx(Checkbox, { value: "matt", labelText: "Matt Dunn" }), _jsx(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }), _jsx(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })] }), _jsxs(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile", children: [_jsx(Radio, { value: "yes", labelText: "Yes" }), _jsx(Radio, { value: "no", labelText: "No" }), _jsx(Radio, { value: "maybe", labelText: "Maybe", disabled: true })] }), _jsx(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })] }), _jsxs(FormSection, { title: "Rejects", children: [_jsx(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }), _jsx(Input, { id: "quantity", labelText: "Quantity" }), _jsx(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })] })] }) })),
     name: "Demo form",
 };
 export const WithAnAction = () => {