@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Table/stories/BaseTable.story.js

@@ -0,0 +1,300 @@
+import React from "react";
+import { boolean, text } from "@storybook/addon-knobs";
+import { action } from "@storybook/addon-actions";
+import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
+import { getMockRows, mockColumns } from "../Table.mock-utils";
+import { Table } from "..";
+const dateToString = ({ cellData }) => {
+    return new Date(cellData).toUTCString().split(" ").splice(0, 4).join(" ");
+};
+const sectionRow = ({ cellData }) => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
+    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, cellData)));
+const dropdownCellRenderer = ({ cellData }) => (React.createElement(Box, { textAlign: "right", pr: "x3" },
+    React.createElement(DropdownMenu, null,
+        React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
+        React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete"))));
+const columns = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity", align: "right" },
+];
+const columnsWithWidths = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity" },
+    { label: "Note", dataKey: "note", width: "50%" },
+];
+const rowData = [
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r1",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r2",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        id: "r4",
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r5",
+    },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r8",
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r9",
+    },
+];
+const compactRowData = [
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r1",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r2",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        id: "r4",
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r5",
+    },
+];
+const rowDataWithWidths = [
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r1",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r2",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        note: "1c Other Plant-related issue, equipment issues",
+        id: "r4",
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r5",
+    },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r6",
+    },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r8",
+    },
+];
+const columnsWithFormatter = [
+    { label: "Date", dataKey: "date", cellFormatter: dateToString },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity" },
+];
+const columnsWithAlignment = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Eaches", dataKey: "expectedQuantity" },
+    { label: "Actual Eaches", dataKey: "actualQuantity", align: "right" },
+];
+const getColumnsWithCellRenderer = (cellRenderer) => [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "", dataKey: "actualQuantity", cellRenderer },
+];
+const footerRowData = [
+    {
+        date: "Total",
+        expectedQuantity: "18,000 eaches",
+        actualQuantity: "7,725 eaches",
+        id: "f1",
+    },
+    {
+        date: "Attainment",
+        expectedQuantity: "",
+        actualQuantity: "41.5%",
+        id: "f2",
+    },
+];
+const rowDataWithSections = [
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r1",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r2",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        id: "r4",
+    },
+    { heading: "ABC & XYZ Company", cellRenderer: sectionRow, id: "r5" },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r6",
+    },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r8",
+    },
+];
+export default {
+    title: "Components/Table/Base",
+};
+export const WithData = () => (React.createElement(Table, { columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table" }));
+export const WithNoData = () => (React.createElement(Table, { columns: columns, rows: [], noRowsContent: text("Custom text", undefined), loading: boolean("Show loading state", false) }));
+export const WithStickyHeader = () => (React.createElement(Box, { mt: "x4" },
+    React.createElement(Table, { columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table", stickyHeader: true })));
+export const WithLotsOfRowsAndColumns = () => (React.createElement(Table, { columns: mockColumns, rows: getMockRows(50), hasSelectableRows: true, onRowSelectionChange: action("row selection changed"), loading: boolean("Show loading state", false) }));
+export const WithCustomColumnWidths = () => React.createElement(Table, { columns: columnsWithWidths, rows: rowDataWithWidths });
+export const WithACustomCellComponent = () => (React.createElement(Table, { columns: getColumnsWithCellRenderer(dropdownCellRenderer), rows: rowData }));
+export const WithCellAlignment = () => React.createElement(Table, { columns: columnsWithAlignment, rows: rowData });
+export const WithACellFormatter = () => React.createElement(Table, { columns: columnsWithFormatter, rows: rowData });
+export const WithACustomColumnLabelComponent = () => (React.createElement(Table, { columns: [
+        { label: "Date", dataKey: "date" },
+        { label: "Expected Quantity", dataKey: "expectedQuantity" },
+        { label: "Actual Quantity", dataKey: "actualQuantity" },
+        {
+            label: "Add record",
+            dataKey: "c4",
+            headerFormatter: ({ label }) => React.createElement(Button, { onClick: action("button clicked") }, label),
+        },
+    ], rows: rowData }));
+export const WithMetadata = () => (React.createElement(Table, { columns: [
+        { label: "Date", dataKey: "date" },
+        { label: "Expected Quantity", dataKey: "expectedQuantity" },
+        { label: "Actual Quantity", dataKey: "actualQuantity" },
+        {
+            label: "Add record",
+            dataKey: "c4",
+            metadata: { helpText: "Allows adding a new record" },
+            headerFormatter: ({ label, metadata }) => (React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(Text, null, label),
+                React.createElement(Text, { fontSize: "small", fontWeight: "base", color: "midGrey" }, metadata.helpText))),
+        },
+    ], rows: rowData }));
+export const WithFullWidthSection = () => React.createElement(Table, { columns: columns, rows: rowDataWithSections });
+export const WithAFooter = () => (React.createElement(React.Fragment, null,
+    React.createElement(Table, { columns: columns, keyField: "date", rows: rowData, footerRows: footerRowData, loading: boolean("Show loading state", false) }),
+    React.createElement(Table, { compact: true, columns: columns, keyField: "date", rows: compactRowData, footerRows: footerRowData, loading: boolean("Show loading state", false) })));
+export const WithRowBorder = () => (React.createElement(Table, { rowBorder: boolean("Show row border", true), columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table" }));
+export const WithVerticalAlignment = () => (React.createElement(Table, { rowBorder: boolean("Show row border", true), columns: [
+        { label: "Description", dataKey: "description", width: "50%" },
+        { label: "Expected Quantity", dataKey: "expectedQuantity" },
+        { label: "Actual Quantity", dataKey: "actualQuantity" },
+    ], rows: [
+        {
+            description: "This whole row is top aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+            expectedQuantity: "2,025 eaches",
+            verticalAlign: "top",
+            actualQuantity: "1,800 eaches",
+            id: "r1",
+        },
+        {
+            description: "This whole row is middle aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+            expectedQuantity: "2,475 eaches",
+            verticalAlign: "middle",
+            actualQuantity: "2,250 eaches",
+            id: "r2",
+        },
+        {
+            description: "This whole row is bottom aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+            expectedQuantity: "2,475 eaches",
+            verticalAlign: "bottom",
+            actualQuantity: "1,425 eaches",
+            id: "r3",
+        },
+    ], rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false) }));

package/dist/src/Table/stories/CustomContent.story.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Inputs: () => React.JSX.Element;
-export declare const TextVariants: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Inputs: () => React.JSX.Element;
+export declare const TextVariants: () => React.JSX.Element;

package/dist/src/Table/stories/CustomContent.story.js

@@ -0,0 +1,281 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Input } from "../../Input";
+import { Table } from "..";
+import { Box } from "../../Box";
+import { Text } from "../../Type";
+import { Flex } from "../../Flex";
+import { Link } from "../../Link";
+import { Select } from "../../Select";
+import { Checkbox } from "../../Checkbox";
+import { Toggle } from "../../Toggle";
+import { IconicButton } from "../../Button";
+import { TruncatedText } from "../../TruncatedText";
+export default {
+    title: "Components/Table/Custom Content",
+};
+const columns = [
+    {
+        dataKey: "label",
+        label: "Label",
+    },
+    {
+        dataKey: "colInput",
+        label: "Input",
+        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
+            React.createElement(Input, { placeholder: row.colInput }))),
+    },
+    {
+        dataKey: "colSelect",
+        label: "Select",
+        width: "100px",
+        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
+            React.createElement(Select, { options: [
+                    { value: "kg", label: "kg" },
+                    { value: "lb", label: "lb" },
+                    { value: "oz", label: "oz" },
+                ], value: row.colSelect }))),
+    },
+    {
+        dataKey: "colCheckbox",
+        label: "Checkbox",
+        cellRenderer: ({ row }) => (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
+            React.createElement(Checkbox, { id: "checkbox", labelText: row.colCheckbox }))),
+    },
+    {
+        dataKey: "colToggleWithLabel",
+        label: "Toggle with label",
+        cellRenderer: () => React.createElement(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" }),
+    },
+    {
+        dataKey: "colToggle",
+        label: "Toggle",
+        width: "48px",
+        cellRenderer: () => React.createElement(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" }),
+    },
+    {
+        dataKey: "colActions",
+        label: "",
+        width: "40px",
+        cellRenderer: () => React.createElement(IconicButton, { icon: "delete", pr: "x2", py: "x1" }),
+    },
+];
+const rows = [
+    {
+        label: "Example Row 1",
+        colInput: "456",
+        colSelect: "kg",
+        colCheckbox: "I agree",
+        colToggleWithLabel: true,
+    },
+    {
+        label: "Example Row 2",
+        colInput: "789",
+        colSelect: "kg",
+        colCheckbox: "I acknowledge",
+        colToggleWithLabel: true,
+    },
+    {
+        label: "Example Row 3",
+        colInput: "101",
+        colSelect: "oz",
+        colCheckbox: "Ok",
+        colToggleWithLabel: false,
+    },
+    {
+        label: "Example Row 4",
+        colInput: "112",
+        colSelect: "kg",
+        colCheckbox: "I read",
+        colToggleWithLabel: true,
+    },
+];
+export const Inputs = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { fontSize: "smaller", color: "midGrey" },
+            "This story demonstrates how to use CellRenderer with various input elements. For more details on selectable rows, check out the",
+            " ",
+            React.createElement(Link, { href: "/?path=/story/components-table-with-selectable-rows--with-selectable-rows" }, "Selectable rows"),
+            " ",
+            "story. For the Action column with IconicButtons and Toggles without labels, it is recommended to specify the column width."),
+        React.createElement(Table, { rowHovers: false, columns: columns, rows: rows })));
+};
+const textColumns = [
+    {
+        dataKey: "colA",
+        label: "Auto width",
+    },
+    {
+        dataKey: "colB",
+        label: "Absolute width",
+        width: "200px",
+    },
+    {
+        dataKey: "colC",
+        label: "Relative width",
+        width: "20%",
+    },
+    {
+        dataKey: "colD",
+        label: "Multi-line",
+        metadata: { helpText: "2 rows" },
+        headerFormatter: ({ label, metadata }) => (React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Text, null, label),
+            React.createElement(Text, { fontSize: "small", fontWeight: "base", color: "midGrey" }, metadata.helpText))),
+        cellRenderer: ({ row }) => (React.createElement(Flex, { flexDirection: "column", py: "x2", pr: "x2", gap: "x0_25" },
+            React.createElement(Text, null, row.colD),
+            React.createElement(Text, { fontSize: "small", color: "midGrey" }, row.colD))),
+    },
+    {
+        dataKey: "colE",
+        label: "Truncated text",
+        width: "200px",
+        cellRenderer: ({ row }) => (React.createElement(TruncatedText, { fullWidth: true, pr: "x2", py: "x2", maxWidth: "200px" }, row.colE)),
+    },
+    {
+        dataKey: "colF",
+        label: "Numerical",
+        align: "right",
+    },
+];
+const textRows = [
+    {
+        colA: "This is ...",
+        colB: "This is a column...",
+        colC: "In this case...",
+        colD: "This is a row",
+        colE: "This is a column that will truncate the text if it is too long to fit in the column.",
+        colF: "860,934.24",
+    },
+    {
+        colA: "the default width.",
+        colB: "that has width specified as an absolute value (200px).",
+        colC: "the column width is set as a relative value (20%).",
+        colD: "This is a row",
+        colE: "What is needed here is that the width on the cell and maxWidth on text ...",
+        colF: "12.90",
+    },
+    {
+        colA: "that will respond to the width of the table.",
+        colB: "The column will maintain the width...",
+        colC: "The column...",
+        colD: "This is a row",
+        colE: "is set",
+        colF: "10 000.00",
+    },
+    {
+        colA: "It wraps...",
+        colB: "unless the table is squeezed until all the other columns in the table...",
+        colC: "will maintain the relative width...",
+        colD: "This is a row",
+        colE: "!",
+        colF: "936.221,00",
+    },
+    {
+        colA: "and does not truncate",
+        colB: "are not able to grow any further",
+        colC: "with the width...",
+        colD: "This is a row",
+        colE: "Make sure that you use absolute values, as relative may not...",
+        colF: "18",
+    },
+    {
+        colA: "!",
+        colB: "!",
+        colC: "of the table.",
+        colD: "This is a row",
+        colE: "behaves as expected",
+        colF: "--",
+    },
+];
+export const TextVariants = () => (React.createElement(React.Fragment, null,
+    React.createElement(Text, { fontSize: "smaller", color: "midGrey" }, "This story demonstrates some of the most useful text variants and column width configurations. To truncate text inside a cell, make sure to match the cell's width with the maxWidth of the truncated text."),
+    React.createElement(Table, { columns: textColumns, rows: textRows })));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const States = () => (React.createElement(React.Fragment, null,
+    React.createElement(Text, { fontSize: "smaller", color: "midGrey" }, "This story demonstrates how to style cells for particular row states."),
+    React.createElement(Table, { columns: [
+            {
+                dataKey: "label",
+                label: "Label",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { p: "x2", color: "midGrey" }, row.label)) : row.state === "error" ? (React.createElement(Box, { p: "x2", color: "red" }, row.label)) : (React.createElement(Box, { p: "x2" }, row.label)),
+            },
+            {
+                dataKey: "colInput",
+                label: "Input",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
+                    React.createElement(Input, { disabled: true, placeholder: row.colInput }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
+                    React.createElement(Input, { errorMessage: "Invalid value, try again.", placeholder: row.colInput }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%" },
+                    React.createElement(Input, { placeholder: row.colInput }))),
+            },
+            {
+                dataKey: "colSelect",
+                label: "Select",
+                width: "100px",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
+                    React.createElement(Select, { disabled: true, options: [
+                            { value: "kg", label: "kg" },
+                            { value: "lb", label: "lb" },
+                            { value: "oz", label: "oz" },
+                        ], value: row.colSelect }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
+                    React.createElement(Select, { errorMessage: "Invalid value", options: [
+                            { value: "kg", label: "kg" },
+                            { value: "lb", label: "lb" },
+                            { value: "oz", label: "oz" },
+                        ], value: row.colSelect }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em", width: "100%", maxWidth: "16em" },
+                    React.createElement(Select, { options: [
+                            { value: "kg", label: "kg" },
+                            { value: "lb", label: "lb" },
+                            { value: "oz", label: "oz" },
+                        ], value: row.colSelect }))),
+            },
+            {
+                dataKey: "colCheckbox",
+                label: "Checkbox",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
+                    React.createElement(Checkbox, { disabled: true, id: "checkbox", labelText: row.colCheckbox }))) : row.state === "error" ? (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
+                    React.createElement(Checkbox, { error: true, id: "checkbox", labelText: row.colCheckbox }))) : (React.createElement(Box, { py: "x1", pr: "x2", minWidth: "8em" },
+                    React.createElement(Checkbox, { id: "checkbox", labelText: row.colCheckbox }))),
+            },
+            {
+                dataKey: "colToggleWithLabel",
+                label: "Toggle with label",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Toggle, { disabled: true, onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })) : (React.createElement(Toggle, { onChange: action("on change"), onText: "Active", offText: "Inactive", pr: "x2", py: "x1" })),
+            },
+            {
+                dataKey: "colToggle",
+                label: "Toggle",
+                width: "48px",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(Toggle, { disabled: true, onChange: action("on change"), pr: "x2", py: "x1" })) : (React.createElement(Toggle, { onChange: action("on change"), pr: "x2", py: "x1" })),
+            },
+            {
+                dataKey: "colActions",
+                label: "",
+                width: "40px",
+                cellRenderer: ({ row }) => row.state === "disabled" ? (React.createElement(IconicButton, { disabled: true, icon: "delete", pr: "x2", py: "x1" })) : (React.createElement(IconicButton, { icon: "delete", pr: "x2", py: "x1" })),
+            },
+        ], rows: [
+            {
+                label: "Active (default) state",
+                colInput: "456",
+                colSelect: "kg",
+                colCheckbox: "I agree",
+                colToggleWithLabel: true,
+            },
+            {
+                label: "Inactive (disabled) state",
+                state: "disabled",
+                colInput: "789",
+                colSelect: "kg",
+                colCheckbox: "I acknowledge",
+                colToggleWithLabel: true,
+            },
+            {
+                label: "Error state",
+                state: "error",
+                colInput: "101",
+                colSelect: "oz",
+                colCheckbox: "Ok",
+                colToggleWithLabel: false,
+            },
+        ] })));

package/dist/src/Table/stories/Density.story.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Compact: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Compact: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};