@nulogy/components 15.2.1 → 15.2.2

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

@@ -1,24 +1,20 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { Alert } from "../index";
 declare const _default: {
     title: string;
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Flex/Flex").FlexProps & {
+        isCloseable?: boolean;
+        closeAriaLabel?: string;
+        title?: string;
+        type?: import("./Alert").NotificationType;
+        onClose?: any;
+        controlled?: boolean;
+    }, never>> & string & Omit<({ children, isCloseable, title, type, closeAriaLabel, onClose, controlled, ...props }: import("./Alert").AlertProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 };
 export default _default;
-export declare const AlertTypes: () => React.JSX.Element;
-export declare const WithACloseButton: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithATitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithALink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+type Story = StoryObj<typeof Alert>;
+export declare const AlertTypes: Story;
+export declare const WithACloseButton: Story;
+export declare const WithATitle: Story;
+export declare const WithALink: Story;

package/dist/src/Alert/Alert.story.js

@@ -1,27 +1,38 @@
-import { boolean, text } from "@storybook/addon-knobs";
 import React from "react";
 import { Alert, Flex } from "../index";
 import { Link } from "../Link";
 export default {
     title: "Components/Alert",
+    component: Alert,
 };
 const alertTypes = ["danger", "informative", "success", "warning"];
-export const AlertTypes = () => (React.createElement(Flex, { flexDirection: "column", gap: "x1" }, alertTypes.map((type) => (React.createElement(Alert, { key: type, type: type, title: type },
-    "This is an alert with type \"",
-    type,
-    "\"")))));
-export const WithACloseButton = () => (React.createElement(Alert, { isCloseable: boolean("isCloseable", true) }, text("Alert Text", "Warning alert")));
-WithACloseButton.story = {
+export const AlertTypes = {
+    render: () => (React.createElement(Flex, { flexDirection: "column", gap: "x1" }, alertTypes.map((type) => (React.createElement(Alert, { key: type, type: type, title: type },
+        "This is an alert with type \"",
+        type,
+        "\""))))),
+};
+export const WithACloseButton = {
+    args: {
+        isCloseable: true,
+        children: "This is an alert with a close button",
+    },
     name: "With a close button",
 };
-export const WithATitle = () => (React.createElement(Alert, { title: "Danger title!", type: "danger" }, text("Alert Text", "Danger alert")));
-WithATitle.story = {
+export const WithATitle = {
+    args: {
+        title: "Danger title!",
+        type: "danger",
+        children: "Danger alert",
+    },
     name: "With a title",
 };
-export const WithALink = () => (React.createElement(Alert, null,
-    "An alert with ",
-    React.createElement(Link, { href: "/" }, "linked details"),
-    "."));
-WithALink.story = {
+export const WithALink = {
+    args: {
+        children: (React.createElement(React.Fragment, null,
+            "An alert with ",
+            React.createElement(Link, { href: "/" }, "linked details"),
+            ".")),
+    },
     name: "With a link",
 };

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { BrandedNavBar as NDSBrandedNavBar } from "./index";
 declare const _default: {
     title: string;
 };
 export default _default;
+type Story = StoryObj<typeof NDSBrandedNavBar>;
 export declare const _BrandedNavBar: {
     (): React.JSX.Element;
     story: {
@@ -27,12 +30,7 @@ export declare const WithACompanyLogoAndAppName: {
         name: string;
     };
 };
-export declare const WithEnvironmentBanner: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithEnvironmentBanner: Story;
 export declare const WithIcon: {
     (): React.JSX.Element;
     story: {

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { select } from "@storybook/addon-knobs";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Heading1 } from "../Type";
 import { Icon } from "../Icon";
@@ -139,8 +138,17 @@ export const WithACompanyLogoAndAppName = () => (React.createElement(BrandedNavB
 WithACompanyLogoAndAppName.story = {
     name: "With a company logo and app name",
 };
-export const WithEnvironmentBanner = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo, environment: select("environment", ["training", "development"], "training") }));
-WithEnvironmentBanner.story = {
+export const WithEnvironmentBanner = {
+    render: (args) => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo, environment: args.environment })),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
     name: "with environment banner",
 };
 export const WithIcon = () => (React.createElement(BrandedNavBar, { menuData: {

package/dist/src/BrandedNavBar/SmallNavBar.story.d.ts

@@ -1,4 +1,6 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { SmallNavBar } from "./index";
 declare const _default: {
     title: string;
     parameters: {
@@ -11,11 +13,12 @@ declare const _default: {
     };
 };
 export default _default;
+type Story = StoryObj<typeof SmallNavBar>;
 export declare const _SmallNavBar: () => React.JSX.Element;
 export declare const SmallNavBarOpen: () => React.JSX.Element;
 export declare const WithALogo: () => React.JSX.Element;
 export declare const WithALogoOpen: () => React.JSX.Element;
 export declare const WithABrandLogoContainerLogo: () => React.JSX.Element;
 export declare const WithANulogyLogoAndAppName: () => React.JSX.Element;
-export declare const WithEnvironmentBanner: () => React.JSX.Element;
-export declare const WithCustomMenuButton: () => React.JSX.Element;
+export declare const WithEnvironmentBanner: Story;
+export declare const WithCustomMenuButton: Story;

package/dist/src/BrandedNavBar/SmallNavBar.story.js

@@ -1,4 +1,3 @@
-import { select } from "@storybook/addon-knobs";
 import React from "react";
 import styled from "styled-components";
 import { Branding } from "../Branding";
@@ -83,7 +82,29 @@ export const WithALogoOpen = () => (React.createElement(WrappedSmallNavBar, { me
         React.createElement(Branding, { size: "medium", logoType: "wordmark", logoColor: "blue" })) }));
 export const WithABrandLogoContainerLogo = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, logo: React.createElement(BrandLogoContainer, { brandingLinkHref: "/" }) }));
 export const WithANulogyLogoAndAppName = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", showNulogyLogo: true, defaultOpen: true }));
-export const WithEnvironmentBanner = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training") }));
-export const WithCustomMenuButton = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training"), renderMenuButton: ({ onClick, ariaExpanded, isOpen }) => (React.createElement(Button, { onClick: onClick, "aria-expanded": ariaExpanded },
-        "Click to ",
-        isOpen ? "close" : "open")) }));
+export const WithEnvironmentBanner = {
+    render: (args) => React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: args.environment }),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
+};
+export const WithCustomMenuButton = {
+    render: (args) => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: args.environment, renderMenuButton: ({ onClick, ariaExpanded, isOpen }) => (React.createElement(Button, { onClick: onClick, "aria-expanded": ariaExpanded },
+            "Click to ",
+            isOpen ? "close" : "open")) })),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
+};

package/dist/src/DatePickers/stories/DatePicker.story.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { DatePicker } from "../index";
 declare const _default: {
     title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("../shared/types").DatePickerProps, "ref"> & React.RefAttributes<ReactDatePicker>>;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithCustomDateFormat: () => React.JSX.Element;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const WithCustomDateFormat: Story;
 export declare const WithCustomPlaceholder: () => React.JSX.Element;
 export declare const WithErrorState: () => React.JSX.Element;
 export declare const WithMinAndMaxDate: () => React.JSX.Element;
-export declare const DisableFlipping: () => React.JSX.Element;
+export declare const DisableFlipping: Story;
 export declare const UsingRefToControlFocus: () => React.JSX.Element;

package/dist/src/DatePickers/stories/DatePicker.story.js

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
-import { select, boolean } from "@storybook/addon-knobs";
 import { DatePicker } from "../index";
 import { Button } from "../..";
 const selectedDateExamples = [
@@ -10,31 +9,64 @@ const selectedDateExamples = [
 ];
 export default {
     title: "Components/DatePickers/DatePicker",
+    component: DatePicker,
+};
+export const Default = {
+    args: {
+        selected: selectedDateExamples[0],
+        onChange: action("date changed"),
+        onFocus: action("date selector focused"),
+        onBlur: action("date selector blurred"),
+        onInputChange: action("input changed"),
+        inputProps: { labelText: "Expiry Date" },
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+    },
+};
+export const WithCustomDateFormat = {
+    args: {
+        selected: selectedDateExamples[0],
+        dateFormat: "MMMM d, yyyy",
+        onChange: action("date changed"),
+        onFocus: action("date selector focused"),
+        onBlur: action("date selector blurred"),
+        onInputChange: action("input changed"),
+        inputProps: { labelText: "Expiry Date" },
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+    },
 };
-export const Default = () => (React.createElement(DatePicker
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-, { 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
-export const WithCustomDateFormat = () => (React.createElement(DatePicker
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-, { 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), dateFormat: "MMMM d, yyyy", onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
 export const WithCustomPlaceholder = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date", placeholder: "Month day, year" } }));
 export const WithErrorState = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, errorMessage: "The date is invalid" }));
 export const WithMinAndMaxDate = () => (React.createElement(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
-export const DisableFlipping = () => (React.createElement(DatePicker
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-, { 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), onBlur: action("date selector blurred"), onFocus: action("date selector focused"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, disableFlipping: boolean("disableFlipping", true) }));
+export const DisableFlipping = {
+    args: {
+        selected: selectedDateExamples[0],
+        onBlur: action("date selector blurred"),
+        onFocus: action("date selector focused"),
+        onChange: action("date changed"),
+        onInputChange: action("input changed"),
+        inputProps: { labelText: "Expiry Date" },
+        disableFlipping: true,
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+        disableFlipping: {
+            control: { type: "boolean" },
+        },
+    },
+};
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const handleClick = () => {

package/dist/src/DescriptionList/lib/utils.js

@@ -2,7 +2,7 @@ export function validateAndExtractGridProps(props) {
     const columns = "columns" in props ? props.columns : undefined;
     const groupMinWidth = "groupMinWidth" in props ? props.groupMinWidth : undefined;
     if (columns && groupMinWidth) {
-        throw new Error("Please provide either a `columns` or `groupMinWidth` prop to the DescriptionList, not both.\n\nSee component documentation: https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md");
+        throw new Error("Please provide either a `columns` or `groupMinWidth` prop to the DescriptionList, not both.\n\nSee component documentation: https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md");
     }
     return { columns, groupMinWidth };
 }

package/dist/src/DescriptionList/stories/DescriptionList.column.story.js

@@ -40,7 +40,7 @@ export const ThreeColumns = () => React.createElement(ColumnDemo, { title: "Thre
 export const ResponsiveColumns = () => (React.createElement(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
         "The breakpoint is based on the container width, not the viewport width. See component",
         " ",
-        React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md" }, "documentation"),
+        React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
         ".") }));
 ResponsiveColumns.parameters = {
     chromatic: {

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
-export declare const GroupMinWidth: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            viewports: number[];
-        };
-    };
+import type { StoryObj } from "@storybook/react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
 };
+export default _default;
+type Story = StoryObj<typeof DescriptionList>;
+export declare const GroupMinWidth: Story;

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.js

@@ -5,22 +5,25 @@ import { Heading1, Text } from "../../Type";
 import { Resizable } from "../../utils/story/resizable";
 import DescriptionList from "../DescriptionList";
 import { SampleContent } from "./fixtures";
-export const GroupMinWidth = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
+export default {
+    title: "Components/DescriptionList/GroupMinWidth",
+};
+export const GroupMinWidth = {
+    render: () => (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
         React.createElement(Flex, { flexDirection: "column", gap: "x2" },
             React.createElement(Heading1, { compact: true }, "Group Min Width"),
             React.createElement(Text, { fontSize: "sm", mb: "x4" }, "In this example the groupMinWidth is set to 200px, each group is given a minimum width of 200px with the remaining space distributed evenly between the groups."),
             React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
                 React.createElement(DescriptionList, { groupMinWidth: "200px" },
-                    React.createElement(SampleContent, null))))));
-};
-GroupMinWidth.parameters = {
-    chromatic: {
-        viewports: [
-            parseInt(legacy.breakpoints.extraSmall),
-            parseInt(legacy.breakpoints.small),
-            parseInt(legacy.breakpoints.medium),
-            parseInt(legacy.breakpoints.large),
-        ],
+                    React.createElement(SampleContent, null)))))),
+    parameters: {
+        chromatic: {
+            viewports: [
+                parseInt(legacy.breakpoints.extraSmall),
+                parseInt(legacy.breakpoints.small),
+                parseInt(legacy.breakpoints.medium),
+                parseInt(legacy.breakpoints.large),
+            ],
+        },
     },
 };

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.js

@@ -41,7 +41,7 @@ export const Auto = () => {
                 React.createElement(Text, { fontSize: "sm", color: "darkGrey" },
                     "The breakpoint is based on the container width, not the viewport width. See component",
                     " ",
-                    React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/master/src/DescriptionList/README.md" }, "documentation"),
+                    React.createElement(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md" }, "documentation"),
                     "."))),
         React.createElement(Resizable, { containerWidth: "100%", showContainerOutline: true },
             React.createElement(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px" },

package/dist/src/DescriptionList/stories/DescriptionList.playground.story.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
-export declare const Playground: {
-    (): React.JSX.Element;
-    parameters: {
-        chromatic: {
-            disable: boolean;
-        };
-    };
+import type { StoryObj } from "@storybook/react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
 };
+export default _default;
+type Story = StoryObj<typeof DescriptionList>;
+export declare const Playground: Story;