@popsure/dirty-swan 0.54.0 → 0.54.2

package/dist/cjs/lib/components/table/Table.d.ts

@@ -1,28 +1,18 @@
-import { TableCellProps } from './components/TableCell/TableCell';
-import { ReactNode } from 'react';
+import { ModalFunction, TableData } from './types';
 type TextOverrides = {
     showDetails?: string;
     hideDetails?: string;
 };
-export type TableSectionType = {
-    title?: string;
-    icon?: ReactNode;
-};
-interface TableSectionData {
-    section?: TableSectionType;
-    items: TableCellProps[][];
-}
-export type TableData = TableSectionData[];
 export interface TableProps {
     className?: string;
     collapsibleSections?: boolean;
-    data: TableData;
+    tableData: TableData;
     hideDetails?: boolean;
-    onModalOpen?: (title: ReactNode, body: ReactNode) => void;
+    onModalOpen?: ModalFunction;
     onSelectionChanged?: (index: number) => void;
     stickyHeaderTopOffset?: number;
     textOverrides?: TextOverrides;
     title: string;
 }
-declare const Table: ({ className, collapsibleSections, data, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+declare const Table: ({ className, collapsibleSections, tableData, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
 export { Table };

package/dist/cjs/lib/components/table/Table.stories.d.ts

@@ -1,44 +1,45 @@
-import { TableData, TableProps } from './Table';
+import { TableProps } from './Table';
+import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ className, collapsibleSections, data, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
+    component: ({ className, collapsibleSections, tableData, hideDetails, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
     argTypes: {
         data: {
-            description: string;
+            subContent: string;
         };
         title: {
-            description: string;
+            subContent: string;
         };
         collapsibleSections: {
-            description: string;
+            subContent: string;
         };
         hideDetails: {
-            description: string;
+            subContent: string;
         };
         stickyHeaderTopOffset: {
-            description: string;
+            subContent: string;
         };
         className: {
-            description: string;
+            subContent: string;
         };
         textOverrides: {
-            description: string;
+            subContent: string;
         };
         onSelectionChanged: {
-            description: string;
+            subContent: string;
             table: {
                 category: string;
             };
         };
         onModalOpen: {
-            description: string;
+            subContent: string;
             table: {
                 category: string;
             };
         };
     };
     args: {
-        data: TableData;
+        tableData: TableData;
         collapsibleSections: boolean;
         hideDetails: boolean;
         stickyHeaderTopOffset: number;
@@ -51,7 +52,7 @@ declare const story: {
     };
 };
 export declare const TableStory: {
-    ({ collapsibleSections, data, hideDetails, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
+    ({ collapsibleSections, tableData, hideDetails, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
     storyName: string;
 };
 export declare const TableDataType: () => JSX.Element;

package/dist/cjs/lib/components/table/components/TableCell/TableCell.d.ts

@@ -1,16 +1,22 @@
-import { HTMLProps, ReactNode } from 'react';
-export interface TableCellProps {
+import { ReactNode } from 'react';
+interface BaseTableCellProps {
     align?: 'center' | 'left' | 'right';
-    boolean?: boolean;
-    cellProps?: HTMLProps<HTMLTableCellElement>;
-    description?: ReactNode;
-    info?: ReactNode;
+    checkmarkValue?: boolean;
+    content?: ReactNode;
+    modalContent?: ReactNode;
+    openModal?: (modalContent: ReactNode) => void;
+    subContent?: ReactNode;
     rating?: {
         value: number;
         type: 'zap' | 'star';
     };
-    text?: ReactNode;
-    openModal?: (info: ReactNode) => void;
 }
-declare const TableCell: ({ align, boolean, description, info, openModal, rating, text, }: TableCellProps) => JSX.Element;
+interface PositionalTableCellProps {
+    isHeader?: boolean;
+    isFirstCellInRow?: boolean;
+    isTopLeftCell?: boolean;
+    isNavigation?: boolean;
+}
+export type TableCellProps = BaseTableCellProps & PositionalTableCellProps;
+declare const TableCell: ({ align, checkmarkValue, content, isFirstCellInRow, isHeader, isNavigation, isTopLeftCell, modalContent, openModal, rating, subContent, }: TableCellProps) => JSX.Element;
 export { TableCell };

package/dist/cjs/lib/components/table/components/TableContents/TableContents.d.ts

@@ -0,0 +1,13 @@
+import { ModalFunction, TableData } from '../../types';
+export interface TableContentsProps {
+    className?: string;
+    collapsibleSections?: boolean;
+    tableData: TableData;
+    hideDetails?: boolean;
+    isMobile?: boolean;
+    openModal?: ModalFunction;
+    shouldHideDetails?: boolean;
+    title: string;
+}
+declare const TableContents: ({ className, collapsibleSections, tableData, hideDetails, isMobile, openModal, shouldHideDetails, title, }: TableContentsProps) => JSX.Element;
+export { TableContents };

package/dist/cjs/lib/components/table/components/TableSection/TableSection.d.ts

@@ -1,23 +1,13 @@
 import { TableCellProps } from '../TableCell/TableCell';
-import { ReactNode } from 'react';
-export type TableSectionType = {
-    title?: string;
-    icon?: ReactNode;
-};
-interface TableSectionData {
-    section?: TableSectionType;
-    items: TableCellProps[][];
-}
-export type TableData = TableSectionData[];
+import { ModalFunction, TableCellRowData } from '../../types';
 export interface TableSectionProps {
     className?: string;
-    collapsibleSections?: boolean;
-    data: TableData;
-    hideDetails?: boolean;
-    isMobile?: boolean;
-    openModal?: (title: ReactNode, body: ReactNode) => void;
-    shouldHideDetails?: boolean;
+    tableCellRows: TableCellRowData[];
+    hideHeader?: boolean;
+    openModal?: ModalFunction;
     title: string;
+    width?: number | string;
 }
-declare const TableSection: ({ className, collapsibleSections, data, hideDetails, isMobile, openModal, shouldHideDetails, title, }: TableSectionProps) => JSX.Element;
+declare const TableSection: ({ className, tableCellRows, hideHeader, openModal, title, width, }: TableSectionProps) => JSX.Element;
+export type { TableCellProps };
 export { TableSection };

package/dist/cjs/lib/components/table/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import type { TableCellProps } from './components/TableCell/TableCell';
+export type TableSectionType = {
+    title?: string;
+    icon?: ReactNode;
+};
+export type ModalData = {
+    title?: ReactNode;
+    body?: ReactNode;
+};
+export type TableCellRowData = TableCellProps[];
+export type TableSectionData = {
+    section?: TableSectionType;
+    rows: TableCellRowData[];
+};
+export type TableData = TableSectionData[];
+export type ModalFunction = (modalData: ModalData) => void;

package/dist/esm/{Collapsible-ac67187a.js → Collapsible-a355828b.js}

@@ -63,4 +63,4 @@ var Collapsible = function (_a) {
 };
 
 export { Collapsible as C, useMediaQuery as u };
-//# sourceMappingURL=Collapsible-ac67187a.js.map
+//# sourceMappingURL=Collapsible-a355828b.js.map

package/dist/esm/Collapsible-a355828b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible-a355828b.js","sources":["../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableContents/Collapsible.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  switch (breakpoint) {\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import { ReactNode } from \"react\";\nimport AnimateHeight from \"react-animate-height\";\nimport { useMediaQuery } from \"../../../../hooks/useMediaQuery\";\n\ninterface CollapsibleProps {\n  children: ReactNode;\n  isExpanded?: boolean;\n  isMobile?: boolean;\n}\n  \nexport const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {\n  const isDesktop = useMediaQuery('ABOVE_DESKTOP');\n\n  if (!isDesktop) {\n    return (\n      <div>\n        {isExpanded ? children : null}\n      </div>\n    );\n  }\n\n  return (\n    <AnimateHeight\n      duration={300}\n      height={isExpanded ? 'auto' : 0}\n    >\n      <div>{children}</div>\n    </AnimateHeight>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAiBO,IAAM,gBAAgB,GAAG,UAAC,UAAsB;IACrD,QAAQ,UAAU;QAChB,KAAK,cAAc,CAAC;QACpB;YACE,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;KACL;AACH,CAAC,CAAC;IAEW,aAAa,GAAG,UAAC,UAAsB;IAC5C,IAAA,KAAgC,gBAAgB,CAAC,UAAU,CAAC,EAA1D,YAAY,kBAAA,EAAE,WAAW,iBAAiC,CAAC;IAE7D,IAAA,KAA4C,QAAQ,CAAC,YAAY,CAAC,EAAjE,iBAAiB,QAAA,EAAE,oBAAoB,QAA0B,CAAC;IAEzE,SAAS,CAAC;QACR,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAElD,IAAM,gBAAgB,GAAG,UAAC,CAAsB;YAC9C,OAAA,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC;SAAA,CAAC;QAElC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAExD,OAAO;YACL,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;SAC5D,CAAC;KACH,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,iBAAiB,CAAC;AAC3B;;IC9Da,WAAW,GAAG,UAAC,EAA0C;QAAxC,QAAQ,cAAA,EAAE,UAAU,gBAAA;IAChD,IAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;IAEjD,IAAI,CAAC,SAAS,EAAE;QACd,QACEA,uBACG,UAAU,GAAG,QAAQ,GAAG,IAAI,GACzB,EACN;KACH;IAED,QACEA,IAAC,aAAa,IACZ,QAAQ,EAAE,GAAG,EACb,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,CAAC,YAE/BA,uBAAM,QAAQ,GAAO,GACP,EAChB;AACJ;;;;"}

package/dist/esm/components/table/Table.js

@@ -7,12 +7,12 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery } from '../../Collapsible-ac67187a.js';
-import { TableSection } from './components/TableSection/TableSection.js';
+import { u as useMediaQuery } from '../../Collapsible-a355828b.js';
+import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-8e50b121.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { TableContent } from './components/TableContent/TableContent.js';
+import { TableSection } from './components/TableSection/TableSection.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import '../button/index.js';
 import '../icon/icons/Check.js';
@@ -26,7 +26,6 @@ import '../modal/genericModal/index.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronRight.js';
 import '../../index-a0ef2ab4.js';
-import './components/TableColumn/TableColumn.js';
 import '../../index-5e72c3d4.js';
 import '../../_commonjsHelpers-4730bd53.js';
 import '../icon/icons/ChevronLeft.js';
@@ -41,14 +40,14 @@ var defaultTextOverrides = {
 };
 var Table = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
+    var className = _a.className, collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _g = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _g === void 0 ? 0 : _g, definedTextOverrides = _a.textOverrides, title = _a.title;
     var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
     var isMobile = useMediaQuery('BELOW_MOBILE');
-    var _h = useState(null), infoModal = _h[0], setInfoModal = _h[1];
+    var _h = useState(null), infoModalData = _h[0], setInfoModalData = _h[1];
     var _j = useState(true), shouldHideDetails = _j[0], setShouldHideDetails = _j[1];
     var containerRef = useRef(null);
     var headerRef = useRef(null);
-    var columnsLength = data[0].items[0].length;
+    var columnsLength = tableData[0].rows[0].length;
     useScrollSync(headerRef, containerRef, !isMobile);
     var _k = useTableNavigation({
         enabled: isMobile,
@@ -56,20 +55,24 @@ var Table = function (_a) {
         columnsLength: columnsLength,
         onSelectionChanged: onSelectionChanged,
     }), activeSection = _k.activeSection, navigateTable = _k.navigateTable;
-    var currentActiveSection = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[activeSection];
-    var handleOpenModal = function (modalTitle, body) {
-        onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen(modalTitle, body);
-        setInfoModal({ title: modalTitle, body: body });
+    var currentActiveSection = (_d = (_c = (_b = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _b === void 0 ? void 0 : _b.rows) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[activeSection];
+    var handleOpenModal = function (_a) {
+        var body = _a.body, title = _a.title;
+        onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
+        setInfoModalData({ body: body, title: title });
     };
-    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, currentActiveSection, { openModal: function (info) {
-                        return handleOpenModal(currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.text, info);
-                    } })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableContent, { data: [(_f = (_e = data === null || data === void 0 ? void 0 : data[0]) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableSection, { data: data, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+    return (jsxs("div", { className: classNames(styles.wrapper, 'bg-white'), children: [isMobile ? (jsx(TableControls, { activeSection: activeSection, columnsLength: columnsLength, navigateTable: navigateTable, stickyHeaderTopOffset: stickyHeaderTopOffset, children: jsx(TableCell, __assign({}, currentActiveSection, { openModal: function (body) {
+                        return handleOpenModal({
+                            body: body,
+                            title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.content,
+                        });
+                    }, isNavigation: true })) })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { tableCellRows: [(_f = (_e = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _e === void 0 ? void 0 : _e.rows) === null || _f === void 0 ? void 0 : _f[0]], title: title, className: className, openModal: handleOpenModal }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal }) }), hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: 'm8 mt32',
                     title: 'd-flex gap8 ai-center jc-center',
                     wrapper: 'bg-grey-200',
                 }, title: jsxs(Fragment, { children: [shouldHideDetails
                             ? textOverrides.showDetails
-                            : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 24 })) : (jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModal === null || infoModal === void 0 ? void 0 : infoModal.body) ? true : false, title: infoModal === null || infoModal === void 0 ? void 0 : infoModal.title, onClose: function () { return setInfoModal(null); }, children: jsx("div", { className: "pt8 p24 wmn6", children: infoModal === null || infoModal === void 0 ? void 0 : infoModal.body }) })] }));
+                            : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 24 })) : (jsx(ChevronUpIcon, { size: 24 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsx("div", { className: "pt8 p24 wmn6", children: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body }) })] }));
 };
 
 export { Table };

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useEffect, useRef, useState } from 'react';\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableSection } from './components/TableSection/TableSection';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableContent } from './components/TableContent/TableContent';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\ninterface ModalType {\n  title?: ReactNode;\n  body?: ReactNode;\n}\n\ninterface TableSectionData {\n  section?: TableSectionType;\n  items: TableCellProps[][];\n}\n\nexport type TableData = TableSectionData[];\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  data: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: (title: ReactNode, body: ReactNode) => void;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  collapsibleSections,\n  data,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModal, setInfoModal] = useState<ModalType | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = data[0].items[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];\n\n  const handleOpenModal = (modalTitle: ReactNode, body: ReactNode) => {\n    onModalOpen?.(modalTitle, body);\n    setInfoModal({ title: modalTitle, body });\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(info) =>\n              handleOpenModal(currentActiveSection?.text, info)\n            }\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableContent\n              data={[data?.[0]?.items?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableSection\n          data={data}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModal?.body ? true : false}\n        title={infoModal?.title}\n        onClose={() => setInfoModal(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModal?.body}</div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell, TableCellProps } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport { ModalData, ModalFunction, TableData } from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  className?: string;\n  collapsibleSections?: boolean;\n  tableData: TableData;\n  hideDetails?: boolean;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  className,\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    columnsLength,\n    onSelectionChanged,\n  });\n\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n\n  const handleOpenModal: ModalFunction = ({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <TableControls\n          activeSection={activeSection}\n          columnsLength={columnsLength}\n          navigateTable={navigateTable}\n          stickyHeaderTopOffset={stickyHeaderTopOffset}\n        >\n          <TableCell\n            {...currentActiveSection}\n            openModal={(body) =>\n              handleOpenModal({\n                body,\n                title: currentActiveSection?.content,\n              })\n            }\n            isNavigation\n          />\n        </TableControls>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              className={className}\n              openModal={handleOpenModal}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n        />\n      </div>\n\n      {hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={24} />\n              ) : (\n                <ChevronUpIcon size={24} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className=\"pt8 p24 wmn6\">{infoModalData?.body}</div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/table/Table.stories.js

@@ -22,11 +22,10 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../cards/card/index.js';
 import '../icon/icons/ChevronRight.js';
-import '../../Collapsible-ac67187a.js';
+import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
+import './components/TableContents/TableContents.js';
 import './components/TableSection/TableSection.js';
-import './components/TableContent/TableContent.js';
-import './components/TableColumn/TableColumn.js';
 import '../../useTableNavigation-8e50b121.js';
 import '../../index-5e72c3d4.js';
 import '../../_commonjsHelpers-4730bd53.js';
@@ -36,29 +35,35 @@ import '../../useScrollSync-b2d28bed.js';
 
 var initialData = [
     {
-        items: [
+        rows: [
             [
-                { text: 'Our plans' },
-                { text: 'Surgery', info: 'More info on this one he' },
-                { text: 'Standard' },
-                { text: 'Premium' },
+                { content: 'Our plans' },
+                { content: 'Surgery', modalContent: 'More info on surgery' },
+                { content: 'Standard' },
+                { content: 'Premium' },
             ],
             [
-                { text: 'Regular vet visits & medication', description: 'Annual Only' },
-                { text: 'No', description: 'Annual Only' },
-                { text: 'Yes' },
-                { text: 'Yes' },
+                {
+                    content: 'Regular vet visits & medication',
+                    subContent: 'Annual Only',
+                },
+                { content: 'No', subContent: 'Annual Only' },
+                { content: 'Yes' },
+                { content: 'Yes' },
             ],
             [
-                { text: 'Operations', info: 'info' },
-                { boolean: true, info: 'Maybe' },
-                { boolean: false },
-                { boolean: true },
+                { content: 'Operations', modalContent: 'Operations info' },
+                { checkmarkValue: true, modalContent: 'Operations info column 2' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
             ],
             [
-                { text: 'Rating', info: 'info' },
-                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
-                { rating: { type: 'zap', value: 3 } },
+                { content: 'Rating', modalContent: 'Rating info' },
+                { rating: { type: 'zap', value: 1 } },
+                {
+                    rating: { type: 'zap', value: 3 },
+                    modalContent: 'Rating info column 3',
+                },
                 { rating: { type: 'star', value: 3 } },
             ],
         ],
@@ -68,22 +73,22 @@ var initialData = [
             icon: jsx(DentalPlusIcon, { size: 24, noMargin: true }),
             title: 'Dental',
         },
-        items: [
+        rows: [
             [
-                { text: 'Regular vet visits & medication' },
-                { text: 'No' },
-                { text: 'Yes' },
-                { text: 'Yes' },
+                { content: 'Regular vet visits & medication' },
+                { content: 'No' },
+                { content: 'Yes' },
+                { content: 'Yes' },
             ],
             [
-                { text: 'Operations', info: 'info' },
-                { boolean: true, info: 'Maybe' },
-                { boolean: false },
-                { boolean: true },
+                { content: 'Operations', modalContent: 'info' },
+                { checkmarkValue: true, modalContent: 'Maybe' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
             ],
             [
-                { text: 'Rating', info: 'info' },
-                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+                { content: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
                 { rating: { type: 'zap', value: 3 } },
                 { rating: { type: 'star', value: 3 } },
             ],
@@ -94,22 +99,22 @@ var initialData = [
             title: 'Travel',
             icon: jsx(PlaneIcon, { size: 24, noMargin: true }),
         },
-        items: [
+        rows: [
             [
-                { text: 'Regular vet visits & medication' },
-                { text: 'No', boolean: false },
-                { text: 'Yes' },
-                { text: 'Yes' },
+                { content: 'Regular vet visits & medication' },
+                { content: 'No', checkmarkValue: false },
+                { content: 'Yes' },
+                { content: 'Yes' },
             ],
             [
-                { text: 'Operations', info: 'info' },
-                { boolean: true, info: 'Maybe' },
-                { boolean: false },
-                { boolean: true },
+                { content: 'Operations', modalContent: 'info' },
+                { checkmarkValue: true, modalContent: 'Maybe' },
+                { checkmarkValue: false },
+                { checkmarkValue: true },
             ],
             [
-                { text: 'Rating', info: 'info' },
-                { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+                { content: 'Rating', modalContent: 'info' },
+                { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
                 { rating: { type: 'zap', value: 3 } },
                 { rating: { type: 'star', value: 3 } },
             ],
@@ -121,41 +126,41 @@ var story = {
     component: Table,
     argTypes: {
         data: {
-            description: 'This property allows to set the data of the Table component.',
+            subContent: 'This property allows to set the data of the Table component.',
         },
         title: {
-            description: 'This property allows to add a title to the Table component for accessibility purposes.',
+            subContent: 'This property allows to add a title to the Table component for accessibility purposes.',
         },
         collapsibleSections: {
-            description: 'This property allows to collapse the sections of the table.',
+            subContent: 'This property allows to collapse the sections of the table.',
         },
         hideDetails: {
-            description: 'This property allows to hide the details of the table.',
+            subContent: 'This property allows to hide the details of the table.',
         },
         stickyHeaderTopOffset: {
-            description: 'This property allows to set the offset of the sticky header.',
+            subContent: 'This property allows to set the offset of the sticky header.',
         },
         className: {
-            description: 'This property allows to set a custom class to the Table component.',
+            subContent: 'This property allows to set a custom class to the Table component.',
         },
         textOverrides: {
-            description: 'This property allows to set custom text for the show and hide details buttons.',
+            subContent: 'This property allows to set custom text for the show and hide details buttons.',
         },
         onSelectionChanged: {
-            description: 'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
+            subContent: 'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
             table: {
                 category: 'Events',
             },
         },
         onModalOpen: {
-            description: 'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
+            subContent: 'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
             table: {
                 category: 'Events',
             },
         },
     },
     args: {
-        data: initialData,
+        tableData: initialData,
         collapsibleSections: false,
         hideDetails: false,
         stickyHeaderTopOffset: 0,
@@ -168,11 +173,11 @@ var story = {
     },
 };
 var TableStory = function (_a) {
-    var collapsibleSections = _a.collapsibleSections, data = _a.data, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
-    return (jsx(Table, { collapsibleSections: collapsibleSections, data: data, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title }));
+    var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
+    return (jsx(Table, { collapsibleSections: collapsibleSections, tableData: tableData, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title }));
 };
 var TableDataType = function () {
-    return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (info: ReactNode) => void;\n  }[][];\n}[];\n      " }));
+    return (jsx("pre", { children: "\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    content?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      " }));
 };
 TableStory.storyName = 'Table';
 

package/dist/esm/components/table/Table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableData, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\n\nconst initialData: TableData = [\n  {\n    items: [\n      [\n        { text: 'Our plans' },\n        { text: 'Surgery', info: 'More info on this one he' },\n        { text: 'Standard' },\n        { text: 'Premium' },\n      ],\n      [\n        { text: 'Regular vet visits & medication', description: 'Annual Only' },\n        { text: 'No', description: 'Annual Only' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={24} noMargin />,\n      title: 'Dental',\n    },\n    items: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    items: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', boolean: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', info: 'info' },\n        { boolean: true, info: 'Maybe' },\n        { boolean: false },\n        { boolean: true },\n      ],\n      [\n        { text: 'Rating', info: 'info' },\n        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    data: {\n      description:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      description:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      description:\n        'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      description: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      description:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      description:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      description:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    onSelectionChanged: {\n      description:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      description:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    data: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  data,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    data={data}\n    hideDetails={hideDetails}\n    stickyHeaderTopOffset={stickyHeaderTopOffset}\n    textOverrides={textOverrides}\n    title={title}\n  />\n);\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  items: {\n    align?: 'center' | 'left' | 'right';\n    boolean?: boolean;\n    cellProps?: HTMLProps<HTMLTableCellElement>;\n    description?: ReactNode;\n    info?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    text?: ReactNode;\n    openModal?: (info: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { content: 'Our plans' },\n        { content: 'Surgery', modalContent: 'More info on surgery' },\n        { content: 'Standard' },\n        { content: 'Premium' },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={24} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No' },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: <PlaneIcon size={24} noMargin />,\n    },\n    rows: [\n      [\n        { content: 'Regular vet visits & medication' },\n        { content: 'No', checkmarkValue: false },\n        { content: 'Yes' },\n        { content: 'Yes' },\n      ],\n      [\n        { content: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { content: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    data: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => (\n  <Table\n    collapsibleSections={collapsibleSections}\n    tableData={tableData}\n    hideDetails={hideDetails}\n    stickyHeaderTopOffset={stickyHeaderTopOffset}\n    textOverrides={textOverrides}\n    title={title}\n  />\n);\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    content?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}