@nulogy/components 15.2.1 → 15.2.3

package/dist/src/DescriptionList/DescriptionList.parts.js

@@ -10,100 +10,179 @@ export const DescriptionListContainer = styled.div({
     width: "100%",
 });
 export const DescriptionList = styled.dl(({ theme }) => {
-    var _a, _b;
     const { fontSize, lineHeight, density, columns, groupMinWidth } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign({ containerType: "inline-size", width: "100%", margin: 0, display: "grid", columnGap: theme.space[gapConfig[density]], fontSize: (_a = theme.fontSizes[fontSize]) !== null && _a !== void 0 ? _a : theme.fontSizes.medium, lineHeight: (_b = theme.lineHeights[lineHeight]) !== null && _b !== void 0 ? _b : theme.lineHeights.base }, (typeof columns === "number" && {
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-    })), { "a, p": {
+    return {
+        containerType: "inline-size",
+        width: "100%",
+        margin: 0,
+        display: "grid",
+        columnGap: theme.space[gapConfig[density]],
+        fontSize: theme.fontSizes[fontSize] ?? theme.fontSizes.medium,
+        lineHeight: theme.lineHeights[lineHeight] ?? theme.lineHeights.base,
+        ...(typeof columns === "number" && {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        }),
+        "a, p": {
             fontSize: "inherit",
             lineHeight: "inherit",
-        } }), (groupMinWidth && {
-        gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`,
-    })), (typeof columns === "object" && Object.assign({}, Object.fromEntries(Object.entries(columns).map(([key, value]) => [
-        `@container (min-width: ${theme.breakpoints[key]})`,
-        { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` },
-    ])))));
+        },
+        ...(groupMinWidth && {
+            gridTemplateColumns: `repeat(auto-fit, minmax(${groupMinWidth}, 1fr))`,
+        }),
+        ...(typeof columns === "object" && {
+            ...Object.fromEntries(Object.entries(columns).map(([key, value]) => [
+                `@container (min-width: ${theme.breakpoints[key]})`,
+                { gridTemplateColumns: `repeat(${value}, minmax(0, 1fr))` },
+            ])),
+        }),
+    };
 });
 export const DescriptionGroup = styled.div(({ theme, rowSpan, columnSpan }) => {
     const { descriptionTermMaxWidth, layout, showDivider, autoLayoutBreakpoint } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: "grid", gridTemplateRows: "auto 1fr" }, (showDivider && {
-        borderBottom: `1px solid ${theme.colors.lightGrey}`,
-    })), (layout === "inline" && {
-        gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`,
-    })), ((layout === "stacked" || layout === "auto") && {
-        gridTemplateColumns: "1fr",
-    })), (columnSpan && {
-        gridColumn: `span ${columnSpan} / span ${columnSpan}`,
-    })), (rowSpan && {
-        gridRow: `span ${rowSpan} / span ${rowSpan}`,
-    })), { [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign({}, (layout === "auto" && {
-            gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`,
-        })) });
+    return {
+        display: "grid",
+        gridTemplateRows: "auto 1fr",
+        ...(showDivider && {
+            borderBottom: `1px solid ${theme.colors.lightGrey}`,
+        }),
+        ...(layout === "inline" && {
+            gridTemplateColumns: `minmax(0, ${descriptionTermMaxWidth}) 1fr`,
+        }),
+        ...((layout === "stacked" || layout === "auto") && {
+            gridTemplateColumns: "1fr",
+        }),
+        ...(columnSpan && {
+            gridColumn: `span ${columnSpan} / span ${columnSpan}`,
+        }),
+        ...(rowSpan && {
+            gridRow: `span ${rowSpan} / span ${rowSpan}`,
+        }),
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            ...(layout === "auto" && {
+                gridTemplateColumns: `minmax(0, min(50%, ${descriptionTermMaxWidth})) 1fr`,
+            }),
+        },
+    };
 });
 export const DescriptionTerm = styled.dt(({ theme }) => {
     const { showDivider, layout, density, autoLayoutBreakpoint } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gridColumnStart: 1, color: theme.colors.midGrey, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
-        paddingBottom: theme.space.none,
-    })), (density === "compact" && Object.assign({ paddingTop: theme.space.x0_25 }, (layout === "inline" && {
-        paddingBottom: theme.space.x0_25,
-    })))), (density === "medium" && Object.assign({ paddingTop: theme.space.x0_75 }, (layout === "inline" && {
-        paddingBottom: theme.space.x0_75,
-    })))), (density === "relaxed" && Object.assign({ paddingTop: theme.space.x1_5, paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
-        paddingBottom: theme.space.x1_5,
-    })))), (showDivider && {
-        borderTopWidth: "1px",
-        borderTopStyle: "solid",
-        borderTopColor: theme.colors.lightGrey,
-    })), { "&:first-child": {
-            border: "none",
-        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
-            layout !== "stacked" && {
+    return {
+        gridColumnStart: 1,
+        color: theme.colors.midGrey,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none,
+        ...(layout !== "inline" && {
+            paddingBottom: theme.space.none,
+        }),
+        ...(density === "compact" && {
+            paddingTop: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x0_25,
+            }),
+        }),
+        ...(density === "medium" && {
+            paddingTop: theme.space.x0_75,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x0_75,
+            }),
+        }),
+        ...(density === "relaxed" && {
+            paddingTop: theme.space.x1_5,
+            paddingBottom: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingBottom: theme.space.x1_5,
+            }),
+        }),
+        ...(showDivider && {
             borderTopWidth: "1px",
             borderTopStyle: "solid",
             borderTopColor: theme.colors.lightGrey,
-        })), (density === "compact" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x0_25,
-        })), (density === "medium" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x0_75,
-        })), (density === "relaxed" &&
-            layout !== "stacked" && {
-            paddingBottom: theme.space.x1_5,
-        })) });
+        }),
+        "&:first-child": {
+            border: "none",
+        },
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            // wide auto layout
+            ...(showDivider &&
+                layout !== "stacked" && {
+                borderTopWidth: "1px",
+                borderTopStyle: "solid",
+                borderTopColor: theme.colors.lightGrey,
+            }),
+            ...(density === "compact" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x0_25,
+            }),
+            ...(density === "medium" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x0_75,
+            }),
+            ...(density === "relaxed" &&
+                layout !== "stacked" && {
+                paddingBottom: theme.space.x1_5,
+            }),
+        },
+    };
 });
 export const DescriptionDetails = styled.dd(({ theme }) => {
     const { autoLayoutBreakpoint, showDivider, density, layout } = useDescriptionListContext();
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 
+    return {
         // narrow stuff + non-auto layout
-        margin: 0, color: theme.colors.black, paddingLeft: theme.space.none, paddingRight: theme.space.none }, (layout !== "inline" && {
-        paddingTop: theme.space.none,
-    })), (density === "compact" && Object.assign({ paddingBottom: theme.space.x0_25 }, (layout === "inline" && {
-        paddingTop: theme.space.x0_25,
-    })))), (density === "medium" && Object.assign({ paddingBottom: theme.space.x0_75 }, (layout === "inline" && {
-        paddingTop: theme.space.x0_75,
-    })))), (density === "relaxed" && Object.assign({ paddingBottom: theme.space.x1_5, paddingTop: theme.space.x0_25 }, (layout === "inline" && {
-        paddingTop: theme.space.x1_5,
-    })))), (showDivider &&
-        layout === "inline" && {
-        borderTopWidth: "1px",
-        borderTopStyle: "solid",
-        borderTopColor: theme.colors.lightGrey,
-    })), { "&:nth-child(2)": {
-            border: "none",
-        }, [`@container (min-width: ${autoLayoutBreakpoint})`]: Object.assign(Object.assign(Object.assign(Object.assign({}, (showDivider &&
-            layout !== "stacked" && {
+        margin: 0,
+        color: theme.colors.black,
+        paddingLeft: theme.space.none,
+        paddingRight: theme.space.none,
+        ...(layout !== "inline" && {
+            paddingTop: theme.space.none,
+        }),
+        ...(density === "compact" && {
+            paddingBottom: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x0_25,
+            }),
+        }),
+        ...(density === "medium" && {
+            paddingBottom: theme.space.x0_75,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x0_75,
+            }),
+        }),
+        ...(density === "relaxed" && {
+            paddingBottom: theme.space.x1_5,
+            paddingTop: theme.space.x0_25,
+            ...(layout === "inline" && {
+                paddingTop: theme.space.x1_5,
+            }),
+        }),
+        ...(showDivider &&
+            layout === "inline" && {
             borderTopWidth: "1px",
             borderTopStyle: "solid",
             borderTopColor: theme.colors.lightGrey,
-        })), (density === "compact" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x0_25,
-        })), (density === "medium" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x0_75,
-        })), (density === "relaxed" &&
-            layout !== "stacked" && {
-            paddingTop: theme.space.x1_5,
-        })) });
+        }),
+        "&:nth-child(2)": {
+            border: "none",
+        },
+        [`@container (min-width: ${autoLayoutBreakpoint})`]: {
+            // wide auto layout
+            ...(showDivider &&
+                layout !== "stacked" && {
+                borderTopWidth: "1px",
+                borderTopStyle: "solid",
+                borderTopColor: theme.colors.lightGrey,
+            }),
+            ...(density === "compact" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x0_25,
+            }),
+            ...(density === "medium" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x0_75,
+            }),
+            ...(density === "relaxed" &&
+                layout !== "stacked" && {
+                paddingTop: theme.space.x1_5,
+            }),
+        },
+    };
 });

package/dist/src/DescriptionList/DescriptionListContext.js

@@ -1,20 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { createContext, useContext } from "react";
 const DescriptionListContext = createContext(undefined);
-export const DescriptionListProvider = (_a) => {
-    var { children } = _a, contextProps = __rest(_a, ["children"]);
-    return (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
-};
+export const DescriptionListProvider = ({ children, ...contextProps }) => (React.createElement(DescriptionListContext.Provider, { value: contextProps }, children));
 export const useDescriptionListContext = () => {
     const context = useContext(DescriptionListContext);
     if (!context) {

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;