@nulogy/components 14.8.2 → 15.0.1

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

@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+import { useTheme } from "styled-components";
+import { Box } from "../../Box";
+import { IconicButton } from "../../Button";
+import { Checkbox } from "../../Checkbox";
+import { Divider as HorizontalDivider } from "../../Divider";
+import { Flex } from "../../Flex";
+import { Input } from "../../Input";
+import Sidebar from "../../Layout/Sidebar";
+import { Select } from "../../Select";
+import { Textarea } from "../../Textarea";
+import { Heading1, Text } from "../../Type";
+import DescriptionList from "../DescriptionList";
+import { DescriptionGroup } from "../DescriptionList.parts";
+import { Link } from "../../Link";
+import { StatusIndicator } from "../../StatusIndicator";
+import { Resizable } from "../../utils/story/resizable";
+import { OutlinedDt, OutlinedDd } from "./fixtures";
+export const Playground = () => {
+    const [hoveredGroupIndex, setHoveredGroupIndex] = useState(null);
+    const [outlined, setOutlined] = useState(false);
+    const [containerOutline, setContainerOutline] = useState(true);
+    const [layout, setLayout] = useState("stacked");
+    const [density, setDensity] = useState("medium");
+    const [descriptionTermMaxWidth, setDescriptionTermMaxWidth] = useState("320px");
+    const [fontSize, setFontSize] = useState("medium");
+    const [lineHeight, setLineHeight] = useState("base");
+    const initialBreakpointColumns = [{ breakpoint: "extraSmall", columns: 1 }];
+    const [columns, setColumns] = useState(1);
+    const [breakpointColumns, setBreakpointColumns] = useState(initialBreakpointColumns);
+    const [groupMinWidth, setGroupMinWidth] = useState(undefined);
+    const [containerWidth, setContainerWidth] = useState("720px");
+    const [showDivider, setShowDivider] = useState(false);
+    const [autoLayoutBreakpoint, setAutoLayoutBreakpoint] = useState("640px");
+    const [rowSpan] = useState(0);
+    const [columnSpan] = useState(0);
+    const [additionalGroups, setAdditionalGroups] = useState([]);
+    const [DtValue] = useState("Key");
+    const [DdValue] = useState("Value");
+    const theme = useTheme();
+    const updateGroup = (index, updates) => {
+        setAdditionalGroups((groups) => groups.map((group, i) => {
+            if (i === index) {
+                return Object.assign(Object.assign({}, group), updates);
+            }
+            return group;
+        }));
+    };
+    const deleteGroup = (index) => {
+        setAdditionalGroups((groups) => groups.filter((_, i) => i !== index));
+    };
+    const addRandomGroup = () => {
+        setAdditionalGroups([
+            ...additionalGroups,
+            {
+                dt: DtValue,
+                dd: DdValue,
+                rowSpan: rowSpan,
+                columnSpan: columnSpan,
+                isExpanded: false,
+            },
+        ]);
+    };
+    const toggleGroupExpansion = (index) => {
+        setAdditionalGroups((groups) => groups.map((group, i) => (i === index ? Object.assign(Object.assign({}, group), { isExpanded: !group.isExpanded }) : group)));
+    };
+    const DescriptionListElement = (
+    // @ts-expect-error - This is not a valid use of the component, since we're passing both columns and groupMinWidth,
+    // but it's needed for this story
+    React.createElement(DescriptionList, { layout: layout, density: density, columns: columns, groupMinWidth: groupMinWidth, showDivider: showDivider, autoLayoutBreakpoint: autoLayoutBreakpoint, descriptionTermMaxWidth: descriptionTermMaxWidth, fontSize: fontSize, lineHeight: lineHeight },
+        React.createElement(DescriptionGroup, null,
+            React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Customer"),
+            React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false }, "Nulogy")),
+        React.createElement(DescriptionGroup, null,
+            React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Order number"),
+            React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false },
+                React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
+        React.createElement(DescriptionGroup, null,
+            React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Status"),
+            React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false },
+                React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
+        React.createElement(DescriptionGroup, null,
+            React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": false }, "Amount"),
+            React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": false }, "$202.12")),
+        additionalGroups.map((group, index) => (React.createElement(DescriptionGroup, { rowSpan: group.rowSpan, columnSpan: group.columnSpan, key: index },
+            React.createElement(OutlinedDt, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index }, group.dt),
+            React.createElement(OutlinedDd, { "$outlined": outlined, "$highlighted": hoveredGroupIndex === index }, group.dd))))));
+    return (React.createElement(Flex, null,
+        React.createElement(Sidebar, { height: "100%", width: "450px", hideCloseButton: true, isOpen: true, title: "Controls", overlay: "hide", top: "0px", bottom: "0px" },
+            React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+                React.createElement(Flex, { gap: "x2", flexDirection: "column" },
+                    React.createElement(Input, { value: descriptionTermMaxWidth, onChange: (e) => setDescriptionTermMaxWidth(e.target.value), labelText: "Description Term Max Width", placeholder: "e.g., 320px" }),
+                    React.createElement(Select, { value: layout, onChange: (value) => setLayout(value), options: [
+                            { value: "stacked", label: "Stacked" },
+                            { value: "inline", label: "Inline" },
+                            { value: "auto", label: "Auto" },
+                        ], labelText: "Layout" }),
+                    React.createElement(Input, { value: autoLayoutBreakpoint, onChange: (e) => setAutoLayoutBreakpoint(e.target.value), labelText: "Auto Layout Breakpoint", placeholder: "e.g., 640px", disabled: layout !== "auto" })),
+                React.createElement(Select, { value: density, onChange: (value) => setDensity(value), options: [
+                        { value: "compact", label: "Compact" },
+                        { value: "medium", label: "Medium" },
+                        { value: "relaxed", label: "Relaxed" },
+                    ], labelText: "Density" }),
+                React.createElement(Select, { value: fontSize, onChange: (value) => setFontSize(value), options: Object.keys(theme.fontSizes).map((size) => ({
+                        value: size,
+                        label: size,
+                    })), labelText: "Font Size" }),
+                React.createElement(Select, { value: lineHeight, onChange: (value) => setLineHeight(value), options: Object.keys(theme.lineHeights).map((height) => ({
+                        value: height,
+                        label: height,
+                    })), labelText: "Line Height" }),
+                React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+                    React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
+                        React.createElement(Text, { fontWeight: "bold" }, "Columns"),
+                        React.createElement(IconicButton, { onClick: () => {
+                                const currentColumnValue = breakpointColumns[0].columns;
+                                const availableBreakpoints = Object.keys(theme.breakpoints).filter((breakpoint) => !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"));
+                                if (breakpointColumns.length === 1) {
+                                    // First time adding a breakpoint, convert the single column to a breakpoint
+                                    const firstBreakpoint = breakpointColumns[0].breakpoint;
+                                    setBreakpointColumns([
+                                        { breakpoint: firstBreakpoint, columns: currentColumnValue },
+                                        { breakpoint: availableBreakpoints[0], columns: currentColumnValue },
+                                    ]);
+                                    setColumns({
+                                        [firstBreakpoint]: currentColumnValue,
+                                        [availableBreakpoints[0]]: currentColumnValue,
+                                    });
+                                }
+                                else {
+                                    // Add another breakpoint
+                                    const nextBreakpoint = availableBreakpoints[0];
+                                    setBreakpointColumns([
+                                        ...breakpointColumns,
+                                        { breakpoint: nextBreakpoint, columns: currentColumnValue },
+                                    ]);
+                                    setColumns(Object.fromEntries([...breakpointColumns, { breakpoint: nextBreakpoint, columns: currentColumnValue }].map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                }
+                            }, icon: "add", tooltip: "Add column per breakpoint", disabled: breakpointColumns.length >= Object.keys(theme.breakpoints).length - 1 })),
+                    React.createElement(Flex, { flexDirection: "column", gap: "x2" }, breakpointColumns.map((breakpointColumn, index) => (React.createElement(Flex, { key: index, gap: "x2", alignItems: "flex-end" },
+                        breakpointColumns.length > 1 && (React.createElement(Select, { minWidth: "240px", value: breakpointColumn.breakpoint, onChange: (value) => {
+                                const newBreakpointColumns = [...breakpointColumns];
+                                newBreakpointColumns[index] = Object.assign(Object.assign({}, breakpointColumn), { breakpoint: value });
+                                setBreakpointColumns(newBreakpointColumns);
+                                setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                            }, options: Object.keys(theme.breakpoints)
+                                .filter((breakpoint) => breakpoint === breakpointColumn.breakpoint ||
+                                !breakpointColumns.some((col) => col.breakpoint === breakpoint || breakpoint === "map"))
+                                .map((breakpoint) => ({
+                                value: breakpoint,
+                                label: `${breakpoint} (${theme.breakpoints[breakpoint]})`,
+                            })), labelText: index === 0 ? "Breakpoint" : undefined })),
+                        React.createElement(Input, { inputWidth: breakpointColumns.length === 1 ? undefined : "95px", type: "number", value: breakpointColumn.columns, onChange: (e) => {
+                                const newValue = Math.max(1, Number(e.target.value));
+                                const newBreakpointColumns = [...breakpointColumns];
+                                newBreakpointColumns[index] = Object.assign(Object.assign({}, breakpointColumn), { columns: newValue });
+                                setBreakpointColumns(newBreakpointColumns);
+                                if (breakpointColumns.length === 1) {
+                                    setColumns(newValue);
+                                }
+                                else {
+                                    setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                }
+                            }, labelText: breakpointColumns.length === 1 ? "Number of columns" : index === 0 ? "Columns" : undefined, placeholder: "Number of columns", min: 1 }),
+                        breakpointColumns.length > 1 && (React.createElement(IconicButton, { icon: "delete", onClick: () => {
+                                const newBreakpointColumns = breakpointColumns.filter((_, i) => i !== index);
+                                if (newBreakpointColumns.length === 1) {
+                                    // Convert back to single number when only one breakpoint remains
+                                    setColumns(newBreakpointColumns[0].columns);
+                                    setBreakpointColumns(newBreakpointColumns);
+                                }
+                                else {
+                                    setBreakpointColumns(newBreakpointColumns);
+                                    setColumns(Object.fromEntries(newBreakpointColumns.map(({ breakpoint, columns }) => [breakpoint, columns])));
+                                }
+                            } }))))))),
+                React.createElement(Input, { value: groupMinWidth !== null && groupMinWidth !== void 0 ? groupMinWidth : "", onChange: (e) => {
+                        const value = e.target.value || undefined;
+                        setGroupMinWidth(value);
+                        if (value)
+                            setColumns(undefined);
+                    }, labelText: "Group Min Width", placeholder: "e.g., 200px", disabled: !!columns }),
+                React.createElement(Checkbox, { labelText: "Show divider", checked: showDivider, onChange: () => setShowDivider(!showDivider) }),
+                React.createElement(HorizontalDivider, null),
+                React.createElement(Text, { fontWeight: "bold" }, "Debugging"),
+                React.createElement(Checkbox, { labelText: "Show Group outline", checked: outlined, onChange: () => setOutlined(!outlined) }),
+                React.createElement(Input, { value: containerWidth, onChange: (e) => setContainerWidth(e.target.value), labelText: "Container Width", placeholder: "e.g., 720px" }),
+                React.createElement(Checkbox, { labelText: "Show container outline", checked: containerOutline, onChange: () => setContainerOutline(!containerOutline) }),
+                React.createElement(HorizontalDivider, null),
+                React.createElement(Flex, { justifyContent: "space-between", alignItems: "center" },
+                    React.createElement(Text, { fontWeight: "bold" }, "Additional Groups"),
+                    React.createElement(IconicButton, { onClick: addRandomGroup, icon: "add" })),
+                React.createElement(Box, null,
+                    additionalGroups.length === 0 && (React.createElement(Text, { fontSize: "sm", color: "midGrey" }, "No additional groups")),
+                    React.createElement(Flex, { flexDirection: "column" }, additionalGroups.map((group, index) => (React.createElement(React.Fragment, null,
+                        index > 0 && React.createElement(HorizontalDivider, null),
+                        React.createElement(Box, { key: index, onMouseEnter: () => setHoveredGroupIndex(index), onMouseLeave: () => setHoveredGroupIndex(null) },
+                            React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", mb: group.isExpanded ? "x2" : "none" },
+                                React.createElement(Flex, { alignItems: "center", gap: "x2" },
+                                    React.createElement(IconicButton, { icon: group.isExpanded ? "downArrow" : "rightArrow", onClick: () => toggleGroupExpansion(index) }),
+                                    React.createElement(Text, null,
+                                        "Group ",
+                                        index + 1)),
+                                React.createElement(IconicButton, { onClick: () => deleteGroup(index), icon: "delete" })),
+                            group.isExpanded && (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+                                React.createElement(Input, { value: group.dt, onChange: (e) => updateGroup(index, { dt: e.target.value }), labelText: "Description Term" }),
+                                React.createElement(Textarea, { value: group.dd, onChange: (e) => updateGroup(index, { dd: e.target.value }), labelText: "Description Data" }),
+                                React.createElement(Flex, { gap: "x2" },
+                                    React.createElement(Input, { type: "number", value: group.rowSpan, onChange: (e) => updateGroup(index, { rowSpan: Number(e.target.value) }), labelText: "Row Span", min: 1 }),
+                                    React.createElement(Input, { type: "number", value: group.columnSpan, onChange: (e) => updateGroup(index, { columnSpan: Number(e.target.value) }), labelText: "Column Span", min: 1 })))))))))))),
+        React.createElement(Box, { flex: 1 },
+            React.createElement(Heading1, { mb: "x3" }, "Playground"),
+            React.createElement(Resizable, { containerWidth: containerWidth, onResize: (width) => setContainerWidth(`${width}px`), showContainerOutline: containerOutline }, DescriptionListElement))));
+};
+Playground.parameters = {
+    chromatic: { disable: true },
+};

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

@@ -1,10 +1,10 @@
-import React from "react";
-import DescriptionList from "../DescriptionList";
-declare const _default: {
-    title: string;
-    component: typeof DescriptionList;
-};
-export default _default;
-export declare const Density: () => React.JSX.Element;
-export declare const FontSize: () => React.JSX.Element;
-export declare const LineHeight: () => React.JSX.Element;
+import React from "react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
+    component: typeof DescriptionList;
+};
+export default _default;
+export declare const Density: () => React.JSX.Element;
+export declare const FontSize: () => React.JSX.Element;
+export declare const LineHeight: () => React.JSX.Element;

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Flex } from "../../Flex";
+import { Heading1, Text } from "../../Type";
+import DescriptionList from "../DescriptionList";
+import { SampleContent } from "./fixtures";
+export default {
+    title: "Components/DescriptionList/Sizing",
+    component: DescriptionList,
+};
+const SizingDemo = ({ title, description, children, }) => (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
+    React.createElement(Flex, { flexDirection: "column", gap: "x1" },
+        React.createElement(Heading1, { compact: true }, title),
+        description && React.createElement(Text, { fontSize: "sm" }, description)),
+    children));
+export const Density = () => (React.createElement(SizingDemo, { title: "Density" },
+    React.createElement(Flex, { gap: "x4" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Compact"),
+            React.createElement(DescriptionList, { layout: "stacked", density: "compact" },
+                React.createElement(SampleContent, null))),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Medium"),
+            React.createElement(DescriptionList, { layout: "stacked", density: "medium" },
+                React.createElement(SampleContent, null))),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Relaxed"),
+            React.createElement(DescriptionList, { layout: "stacked", density: "relaxed" },
+                React.createElement(SampleContent, null))))));
+export const FontSize = () => (React.createElement(SizingDemo, { title: "Font Size" },
+    React.createElement(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" } },
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Small"),
+            React.createElement(DescriptionList, { layout: "stacked", fontSize: "small", lineHeight: "smallTextBase" },
+                React.createElement(SampleContent, null))),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Medium (Default)"),
+            React.createElement(DescriptionList, { layout: "stacked" },
+                React.createElement(SampleContent, null))),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Large"),
+            React.createElement(DescriptionList, { layout: "stacked", fontSize: "large", lineHeight: "heading3" },
+                React.createElement(SampleContent, null))))));
+export const LineHeight = () => (React.createElement(SizingDemo, { title: "Line Height" },
+    React.createElement(Flex, { gap: "x4", flexDirection: { extraSmall: "column", small: "row" } },
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Base"),
+            React.createElement(DescriptionList, { layout: "stacked", lineHeight: "base" },
+                React.createElement(SampleContent, null))),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2", flex: 1 },
+            React.createElement(Text, { as: "h4", fontWeight: "bold" }, "Base Relaxed"),
+            React.createElement(DescriptionList, { layout: "stacked", lineHeight: "baseRelaxed" },
+                React.createElement(SampleContent, null))))));

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

@@ -1,10 +1,10 @@
-import React from "react";
-import DescriptionList from "../DescriptionList";
-declare const _default: {
-    title: string;
-    component: typeof DescriptionList;
-};
-export default _default;
-export declare const ColumnSpanning: () => React.JSX.Element;
-export declare const RowSpanning: () => React.JSX.Element;
-export declare const ColumnAndRowSpanning: () => React.JSX.Element;
+import React from "react";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
+    component: typeof DescriptionList;
+};
+export default _default;
+export declare const ColumnSpanning: () => React.JSX.Element;
+export declare const RowSpanning: () => React.JSX.Element;
+export declare const ColumnAndRowSpanning: () => React.JSX.Element;

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

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Checkbox } from "../../Checkbox";
+import { Flex } from "../../Flex";
+import { Heading1 } from "../../Type";
+import DescriptionList from "../DescriptionList";
+import { DescriptionGroup } from "../DescriptionList.parts";
+import { VerticalDivider } from "../../VerticalDivider";
+import { OutlinedDt, OutlinedDd } from "./fixtures";
+export default {
+    title: "Components/DescriptionList/Spanning",
+    component: DescriptionList,
+};
+export const ColumnSpanning = () => {
+    const [outlined, setOutlined] = useState(true);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x4" },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
+            React.createElement(Heading1, { compact: true }, "Column Spanning"),
+            React.createElement(VerticalDivider, null),
+            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
+        React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+            React.createElement(DescriptionList, { layout: "stacked", columns: 2 },
+                React.createElement(DescriptionGroup, null,
+                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
+                    React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
+                React.createElement(DescriptionGroup, null,
+                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
+                    React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
+                React.createElement(DescriptionGroup, { columnSpan: 3 },
+                    React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
+                    React.createElement(OutlinedDd, { "$outlined": outlined }, "This value is very long and it will span 3 columns"))))));
+};
+export const RowSpanning = () => {
+    const [outlined, setOutlined] = useState(true);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
+            React.createElement(Heading1, { compact: true }, "Row Spanning"),
+            React.createElement(VerticalDivider, null),
+            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
+        React.createElement(DescriptionList, { layout: "stacked", columns: 3 },
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
+            React.createElement(DescriptionGroup, { rowSpan: 3 },
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "This value is very long and it will span 3 rows")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 4"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 4")))));
+};
+export const ColumnAndRowSpanning = () => {
+    const [outlined, setOutlined] = useState(true);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+        React.createElement(Flex, { flexDirection: "row", alignItems: "baseline", gap: "half" },
+            React.createElement(Heading1, { compact: true }, "Column and Row Spanning"),
+            React.createElement(VerticalDivider, null),
+            React.createElement(Checkbox, { labelText: "Show group outline", checked: outlined, onChange: () => setOutlined(!outlined) })),
+        React.createElement(DescriptionList, { layout: "stacked", columns: 3 },
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 1"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 1")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 2"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 2")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 3"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 3")),
+            React.createElement(DescriptionGroup, { rowSpan: 2, columnSpan: 2 },
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 4"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "This value spans both rows and columns")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 5"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 5")),
+            React.createElement(DescriptionGroup, null,
+                React.createElement(OutlinedDt, { "$outlined": outlined }, "Key 6"),
+                React.createElement(OutlinedDd, { "$outlined": outlined }, "Value 6")))));
+};

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

@@ -1,8 +1,8 @@
-import DescriptionList from "../DescriptionList";
-declare const _default: {
-    title: string;
-    component: typeof DescriptionList;
-};
-export default _default;
-export { GroupMinWidth } from "./DescriptionList.group-min-width.story";
-export { Playground } from "./DescriptionList.playground.story";
+import DescriptionList from "../DescriptionList";
+declare const _default: {
+    title: string;
+    component: typeof DescriptionList;
+};
+export default _default;
+export { GroupMinWidth } from "./DescriptionList.group-min-width.story";
+export { Playground } from "./DescriptionList.playground.story";

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

@@ -0,0 +1,7 @@
+import DescriptionList from "../DescriptionList";
+export default {
+    title: "Components/DescriptionList",
+    component: DescriptionList,
+};
+export { GroupMinWidth } from "./DescriptionList.group-min-width.story";
+export { Playground } from "./DescriptionList.playground.story";

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

@@ -1,17 +1,17 @@
-import React from "react";
-export declare const OutlinedDt: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: React.Ref<HTMLElement>;
-}, {
-    $outlined: boolean;
-    $highlighted?: boolean;
-}>> & string;
-export declare const OutlinedDd: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: React.Ref<HTMLElement>;
-}, {
-    $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;
-}) | (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: () => React.JSX.Element;
+import React from "react";
+export declare const OutlinedDt: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
+    ref?: React.Ref<HTMLElement>;
+}, {
+    $outlined: boolean;
+    $highlighted?: boolean;
+}>> & string;
+export declare const OutlinedDd: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
+    ref?: React.Ref<HTMLElement>;
+}, {
+    $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;
+}) | (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: () => React.JSX.Element;

package/dist/src/DescriptionList/stories/fixtures.js

@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+import { transparentize } from "polished";
+import { Box } from "../../Box";
+import { Flex } from "../../Flex";
+import { Icon } from "../../Icon";
+import { Link } from "../../Link";
+import { StatusIndicator } from "../../StatusIndicator";
+import { Text } from "../../Type";
+import { Tooltip } from "../../Tooltip";
+import { dashed } from "../../utils/story/dashed";
+import { DescriptionDetails, DescriptionGroup, DescriptionTerm } from "../DescriptionList.parts";
+export const OutlinedDt = styled(DescriptionTerm)(({ $outlined, $highlighted, theme }) => ({
+    backgroundClip: "content-box",
+    backgroundColor: $highlighted
+        ? transparentize($outlined ? 0.7 : 0.9, theme.colors.categorical1)
+        : $outlined
+            ? transparentize(0.9, theme.colors.categorical1)
+            : undefined,
+    transition: "background-color 0.25s ease-in-out",
+}));
+export const OutlinedDd = styled(DescriptionDetails)(({ $outlined, $highlighted, theme }) => ({
+    backgroundClip: "content-box",
+    backgroundColor: $highlighted
+        ? transparentize($outlined ? 0.7 : 0.9, theme.colors.categorical2)
+        : $outlined
+            ? transparentize(0.9, theme.colors.categorical2)
+            : undefined,
+    transition: "background-color 0.25s ease-in-out",
+}));
+export const DashedBox = dashed(Box);
+export const SampleContent = () => (React.createElement(React.Fragment, null,
+    React.createElement(DescriptionGroup, null,
+        React.createElement(DescriptionTerm, null, "Customer"),
+        React.createElement(DescriptionDetails, null, "Nulogy")),
+    React.createElement(DescriptionGroup, null,
+        React.createElement(DescriptionTerm, null,
+            React.createElement(Text, { display: "inline-flex", alignItems: "center" },
+                "Order number",
+                React.createElement(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer." },
+                    React.createElement(Icon, { icon: "info", size: "x3", paddingLeft: "half" })))),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(Link, { href: "/customer-details" }, "P12-90381-2039"))),
+    React.createElement(DescriptionGroup, null,
+        React.createElement(DescriptionTerm, null, "Status"),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(StatusIndicator, { type: "success" }, "Paid"))),
+    React.createElement(DescriptionGroup, null,
+        React.createElement(DescriptionTerm, null, "Amount"),
+        React.createElement(DescriptionDetails, null, "$202.12")),
+    React.createElement(DescriptionGroup, null,
+        React.createElement(DescriptionTerm, null, "Amount after exchange"),
+        React.createElement(DescriptionDetails, null,
+            React.createElement(Flex, { as: "span", alignItems: "center", gap: "half" },
+                "US $202.12 ",
+                React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
+                " CA $287.43")))));

package/dist/src/Divider/Divider.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { StyledProps } from "../StyledProps";
-export interface DividerProps extends StyledProps, React.HTMLAttributes<HTMLHRElement> {
-    secondary?: boolean;
-}
-declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, DividerProps>> & string;
-export default Divider;
+/// <reference types="react" />
+import { StyledProps } from "../StyledProps";
+export interface DividerProps extends StyledProps, React.HTMLAttributes<HTMLHRElement> {
+    secondary?: boolean;
+}
+declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, DividerProps>> & string;
+export default Divider;

package/dist/src/Divider/Divider.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
+const Divider = styled.hr(({ theme, color, secondary }) => ({
+    border: "none",
+    borderTopWidth: "1px",
+    borderTopStyle: "solid",
+    width: "100%",
+    marginTop: theme.space.x2,
+    marginBottom: theme.space.x2,
+    borderColor: color || (secondary ? theme.colors.whiteGrey : theme.colors.lightGrey),
+}), addStyledProps);
+export default Divider;

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

@@ -1,10 +1,10 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, import("./Divider").DividerProps>> & string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const Secondary: () => React.JSX.Element;
-export declare const WithCustomColourAndSpacing: () => React.JSX.Element;
-export declare const WithCustomProperties: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    component: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, import("./Divider").DividerProps>> & string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const Secondary: () => React.JSX.Element;
+export declare const WithCustomColourAndSpacing: () => React.JSX.Element;
+export declare const WithCustomProperties: () => React.JSX.Element;

package/dist/src/Divider/Divider.story.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text } from "../Type";
+import { Divider } from ".";
+export default {
+    title: "Components/Divider",
+    component: Divider,
+};
+export const Default = () => (React.createElement("div", null,
+    React.createElement(Text, null, "Section A"),
+    React.createElement(Divider, null),
+    React.createElement(Text, null, "Section B")));
+export const Secondary = () => (React.createElement("div", null,
+    React.createElement(Text, null, "Section A"),
+    React.createElement(Divider, { secondary: true }),
+    React.createElement(Text, null, "Section B")));
+export const WithCustomColourAndSpacing = () => (React.createElement("div", null,
+    React.createElement(Text, null, "Section A"),
+    React.createElement(Divider, { borderColor: "darkBlue", my: "x1" }),
+    React.createElement(Text, null, "Section B")));
+export const WithCustomProperties = () => (React.createElement("div", null,
+    React.createElement(Text, null, "Section A"),
+    React.createElement(Divider, { borderColor: "none", height: "2px", backgroundImage: "linear-gradient(90deg, hsl(292deg 100% 97%) 0%, hsl(329deg 100% 19%) 17%, hsl(343deg 100% 36%) 33%, hsl(0deg 100% 50%) 50%, hsl(345deg 100% 69%) 67%, hsl(325deg 100% 84%) 83%, hsl(292deg 100% 97%) 100%);" }),
+    React.createElement(Text, null, "Section B")));

package/dist/src/Divider/index.d.ts

@@ -1 +1 @@
-export { default as Divider } from "./Divider";
+export { default as Divider } from "./Divider";

package/dist/src/Divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from "./Divider";