@popsure/dirty-swan 0.54.3 → 0.54.4

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

@@ -1,17 +1,17 @@
 import { ReactNode } from 'react';
-export type ContentFontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
 export type Alignment = 'center' | 'left' | 'right';
 export type BaseCellProps = {
     align?: Alignment;
     checkmarkValue?: boolean;
-    content?: ReactNode;
+    fontVariant?: FontVariant;
+    description?: ReactNode;
     modalContent?: ReactNode;
     openModal?: (modalContent: ReactNode) => void;
-    subContent?: ReactNode;
+    text?: ReactNode;
     rating?: {
         value: number;
         type: 'zap' | 'star';
     };
-    contentFontVariant?: ContentFontVariant;
 };
-export declare const BaseCell: ({ align, checkmarkValue, content, modalContent, openModal, rating, subContent, contentFontVariant, }: BaseCellProps) => JSX.Element;
+export declare const BaseCell: ({ align, checkmarkValue, fontVariant, description, modalContent, openModal, rating, text, }: BaseCellProps) => JSX.Element;

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

@@ -1,22 +1,22 @@
 import { BaseCell } from './BaseCell';
 declare const story: {
     title: string;
-    component: ({ align, checkmarkValue, content, modalContent, openModal, rating, subContent, contentFontVariant, }: import("./BaseCell").BaseCellProps) => JSX.Element;
+    component: ({ align, checkmarkValue, fontVariant, description, modalContent, openModal, rating, text, }: import("./BaseCell").BaseCellProps) => JSX.Element;
     argTypes: {};
     args: {
+        text: string;
+        description: string;
+        modalContent: string;
+        fontVariant: string;
+        checkmarkValue: undefined;
         rating: {
             value: number;
             type: string;
         };
-        content: string;
-        subContent: string;
-        modalContent: string;
-        checkmarkValue: undefined;
-        contentFontVariant: string;
     };
 };
 export declare const BaseCellStory: {
-    ({ content, subContent, modalContent, checkmarkValue, rating, contentFontVariant, align, }: React.ComponentProps<typeof BaseCell>): JSX.Element;
+    ({ text, description, modalContent, checkmarkValue, rating, fontVariant, align, }: React.ComponentProps<typeof BaseCell>): JSX.Element;
     storyName: string;
 };
 export default story;

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

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 export type ButtonCellProps = {
-    content?: ReactNode;
+    buttonCaption: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
     onClick: () => void;
-    subContent?: ReactNode;
+    price?: ReactNode;
 };
-export declare const ButtonCell: ({ isSelected, onClick, content, subContent, disabled, }: ButtonCellProps) => JSX.Element;
+export declare const ButtonCell: ({ isSelected, onClick, buttonCaption, price, disabled, }: ButtonCellProps) => JSX.Element;

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

@@ -1,17 +1,17 @@
 import { ButtonCell } from './ButtonCell';
 declare const story: {
     title: string;
-    component: ({ isSelected, onClick, content, subContent, disabled, }: import("./ButtonCell").ButtonCellProps) => JSX.Element;
+    component: ({ isSelected, onClick, buttonCaption, price, disabled, }: import("./ButtonCell").ButtonCellProps) => JSX.Element;
     argTypes: {};
     args: {
+        buttonCaption: string;
+        price: string;
         isSelected: boolean;
-        content: string;
-        subContent: string;
         disabled: boolean;
     };
 };
 export declare const ButtonCellStory: {
-    ({ isSelected, content, subContent, disabled, }: React.ComponentProps<typeof ButtonCell>): JSX.Element;
+    ({ isSelected, buttonCaption, price, disabled, }: React.ComponentProps<typeof ButtonCell>): JSX.Element;
     storyName: string;
 };
 export default story;

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 export type CTACellProps = {
-    content?: ReactNode;
-    subContent?: ReactNode;
+    title: ReactNode;
+    price?: ReactNode;
+    buttonCaption?: ReactNode;
     grey?: boolean;
     narrow?: boolean;
     href: string;
 };
-export declare const CTACell: ({ content, subContent, grey, narrow, href, }: CTACellProps) => JSX.Element;
+export declare const CTACell: ({ title, price, grey, narrow, href, buttonCaption, }: CTACellProps) => JSX.Element;

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

@@ -1,17 +1,18 @@
 import { CTACell } from './CTACell';
 declare const story: {
     title: string;
-    component: ({ content, subContent, grey, narrow, href, }: import("./CTACell").CTACellProps) => JSX.Element;
+    component: ({ title, price, grey, narrow, href, buttonCaption, }: import("./CTACell").CTACellProps) => JSX.Element;
     argTypes: {};
     args: {
-        content: string;
-        subContent: string;
+        title: string;
+        price: string;
+        buttonCaption: string;
         grey: boolean;
         narrow: boolean;
     };
 };
 export declare const CTACellStory: {
-    ({ content, subContent, grey, narrow, }: React.ComponentProps<typeof CTACell>): JSX.Element;
+    ({ title, price, buttonCaption, grey, narrow, }: React.ComponentProps<typeof CTACell>): JSX.Element;
     storyName: string;
 };
 export default story;

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

@@ -2,13 +2,20 @@ import { ReactNode } from 'react';
 import { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';
 import { CTACellProps } from './components/TableCell/CTACell/CTACell';
 import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
-export type TableCellData = (BaseCellProps & {
+type BaseCellData = BaseCellProps & {
     type?: undefined;
-}) | (CTACellProps & {
+    cellId?: string;
+};
+type CTACellData = CTACellProps & {
     type: 'CTA';
-}) | (ButtonCellProps & {
+    cellId?: string;
+};
+type ButtonCellData = ButtonCellProps & {
     type: 'BUTTON';
-});
+    cellId?: string;
+};
+export type TableCellData = BaseCellData | CTACellData | ButtonCellData;
+export declare const isBaseCell: (tableCellData: TableCellData) => tableCellData is BaseCellData;
 export type TableSectionType = {
     title?: string;
     icon?: ReactNode;
@@ -24,3 +31,4 @@ export type TableSectionData = {
 };
 export type TableData = TableSectionData[];
 export type ModalFunction = (modalData: ModalData) => void;
+export {};

package/dist/esm/TableSection-f6d0028e.js

@@ -0,0 +1,80 @@
+import { a as __assign } from './tslib.es6-a39f91fc.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as classNames } from './index-6ea95111.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { TableCell } from './components/table/components/TableCell/TableCell.js';
+
+var css_248z = ".TableSection-module_table__sNbDq {\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n@media (min-width: 34rem) {\n  .TableSection-module_table__sNbDq {\n    min-width: 845px;\n  }\n}\n\n.TableSection-module_tr__UbkbE {\n  min-height: 72px;\n}";
+var styles = {"table":"TableSection-module_table__sNbDq","tr":"TableSection-module_tr__UbkbE"};
+styleInject(css_248z);
+
+var isBaseCell = function (tableCellData) {
+    return !tableCellData.type;
+};
+
+var TableSection = function (_a) {
+    var className = _a.className, tableCellRows = _a.tableCellRows, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width;
+    var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
+    var getModalTitleFromColumnHeader = function (cellIndex) {
+        var _a;
+        var firstCellInColumn = (_a = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0]) === null || _a === void 0 ? void 0 : _a[cellIndex];
+        var titleFromColumn;
+        switch (firstCellInColumn.type) {
+            case 'BUTTON':
+                titleFromColumn = firstCellInColumn.buttonCaption;
+                break;
+            case 'CTA':
+                titleFromColumn = firstCellInColumn.title;
+                break;
+            case undefined:
+                titleFromColumn = firstCellInColumn.text || '';
+                break;
+        }
+        return titleFromColumn;
+    };
+    var getModalTitleFromRowHeader = function (currentRow) {
+        var firstCellInRow = currentRow === null || currentRow === void 0 ? void 0 : currentRow[0];
+        var titleFromRow = (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
+        return titleFromRow;
+    };
+    return (jsxs("table", { className: classNames(className, 'w100', styles.table), width: width, children: [jsx("caption", { className: "sr-only", children: title }), headerRow && (jsx("thead", { className: hideHeader ? 'sr-only' : '', children: jsx("tr", { children: headerRow.map(function (tableCellData, cellIndex) {
+                        var isFirstCellInRow = cellIndex === 0;
+                        return (jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, tableCellData, (isBaseCell(tableCellData)
+                            ? {
+                                openModal: function (body) {
+                                    return openModal === null || openModal === void 0 ? void 0 : openModal({
+                                        body: body,
+                                        title: tableCellData.text ||
+                                            getModalTitleFromColumnHeader(cellIndex),
+                                    });
+                                },
+                                align: isFirstCellInRow ? 'left' : 'center',
+                            }
+                            : {})), cellIndex));
+                    }) }) })), jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
+                    row.length === 1;
+                    return (rowIndex > 0 && (jsx("tr", { className: styles.tr, children: row.map(function (tableCellData, cellIndex) {
+                            var key = "".concat(rowIndex, "-").concat(cellIndex);
+                            var isFirstCellInRow = cellIndex === 0;
+                            return (jsx(TableCell, __assign({ isFirstCellInRow: isFirstCellInRow }, tableCellData, (isBaseCell(tableCellData)
+                                ? {
+                                    openModal: function (body) {
+                                        var titleFromRow = getModalTitleFromRowHeader(row);
+                                        var titleFromColumnOrRow = getModalTitleFromColumnHeader(cellIndex) ||
+                                            getModalTitleFromRowHeader(row);
+                                        return openModal === null || openModal === void 0 ? void 0 : openModal({
+                                            body: body,
+                                            title: isFirstCellInRow
+                                                ? titleFromRow
+                                                : titleFromColumnOrRow,
+                                        });
+                                    },
+                                    align: isFirstCellInRow ? 'left' : 'center',
+                                }
+                                : {})), key));
+                        }) }, rowIndex)));
+                }) })] }));
+};
+
+export { TableSection as T, isBaseCell as i };
+//# sourceMappingURL=TableSection-f6d0028e.js.map

package/dist/esm/TableSection-f6d0028e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection-f6d0028e.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\n\ntype BaseCellData = BaseCellProps & { type?: undefined; cellId?: string };\ntype CTACellData = CTACellProps & { type: 'CTA'; cellId?: string };\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON'; cellId?: string };\n\nexport type TableCellData = BaseCellData | CTACellData | ButtonCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell, TableCellProps } from '../TableCell/TableCell';\nimport { ReactNode, useCallback } from 'react';\nimport {\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellRowData,\n} from '../../types';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideHeader,\n  openModal,\n  title,\n  width,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n\n              return (\n                <TableCell\n                  key={cellIndex}\n                  isHeader\n                  isFirstCellInRow={isFirstCellInRow}\n                  isTopLeftCell={isFirstCellInRow}\n                  {...tableCellData}\n                  {...(isBaseCell(tableCellData)\n                    ? {\n                        openModal: (body: ReactNode) =>\n                          openModal?.({\n                            body,\n                            title:\n                              tableCellData.text ||\n                              getModalTitleFromColumnHeader(cellIndex),\n                          }),\n                        align: isFirstCellInRow ? 'left' : 'center',\n                      }\n                    : {})}\n                />\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map((row, rowIndex) => {\n          const isSingleCell = row.length === 1;\n\n          return (\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n\n                  return (\n                    <TableCell\n                      isFirstCellInRow={isFirstCellInRow}\n                      key={key}\n                      {...tableCellData}\n                      {...(isBaseCell(tableCellData)\n                        ? {\n                            openModal: (body: ReactNode) => {\n                              const titleFromRow =\n                                getModalTitleFromRowHeader(row);\n                              const titleFromColumnOrRow =\n                                getModalTitleFromColumnHeader(cellIndex) ||\n                                getModalTitleFromRowHeader(row);\n\n                              return openModal?.({\n                                body,\n                                title: isFirstCellInRow\n                                  ? titleFromRow\n                                  : titleFromColumnOrRow,\n                              });\n                            },\n                            align: isFirstCellInRow ? 'left' : 'center',\n                          }\n                        : {})}\n                    />\n                  );\n                })}\n              </tr>\n            )\n          );\n        })}\n      </tbody>\n    </table>\n  );\n};\n\nexport type { TableCellProps };\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-2899712c.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { TableSection } from './components/TableSection/TableSection.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-f6d0028e.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/Check.js';
@@ -66,19 +66,14 @@ var Table = function (_a) {
         onModalOpen === null || onModalOpen === void 0 ? void 0 : onModalOpen({ body: body, title: title });
         setInfoModalData({ body: body, title: title });
     };
-    var isBaseCell = !currentActiveSection.type;
-    var openModal;
-    if (isBaseCell) {
-        openModal = function (body) {
-            return handleOpenModal({
-                body: body,
-                title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.content,
-            });
-        };
-    }
-    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, (isBaseCell
+    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, (isBaseCell(currentActiveSection)
                     ? {
-                        openModal: openModal,
+                        openModal: function (body) {
+                            return handleOpenModal({
+                                body: body,
+                                title: currentActiveSection === null || currentActiveSection === void 0 ? void 0 : currentActiveSection.text,
+                            });
+                        },
                     }
                     : {}), { 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',

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, 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    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  const isBaseCell = !currentActiveSection.type;\n  let openModal;\n\n  if (isBaseCell) {\n    openModal = (body: ReactNode) =>\n      handleOpenModal({\n        body,\n        title: currentActiveSection?.content,\n      });\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            {...(isBaseCell\n              ? {\n                  openModal,\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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"}
+{"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, 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 { isBaseCell, 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    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            {...(isBaseCell(currentActiveSection)\n              ? {\n                  openModal: (body: ReactNode) =>\n                    handleOpenModal({\n                      body,\n                      title: currentActiveSection?.text,\n                    }),\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

@@ -33,7 +33,7 @@ import '../icon/icons/ChevronRight.js';
 import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
 import './components/TableContents/TableContents.js';
-import './components/TableSection/TableSection.js';
+import '../../TableSection-f6d0028e.js';
 import '../../useTableNavigation-2899712c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
@@ -43,64 +43,90 @@ var initialData = [
     {
         rows: [
             [
-                { content: 'Our plans' },
+                { text: 'Our plans' },
                 {
                     type: 'CTA',
-                    content: 'Standard',
-                    subContent: '€234',
+                    title: 'Standard',
+                    price: '€234',
+                    buttonCaption: 'Get covered',
                     href: 'http://example.com',
                 },
                 {
                     type: 'CTA',
-                    content: 'Plus',
-                    subContent: '€344',
+                    title: 'Plus',
+                    price: '€344',
+                    buttonCaption: 'Get covered',
                     href: 'http://example.com',
                 },
                 {
                     type: 'CTA',
-                    content: 'Premium',
-                    subContent: '€556',
+                    title: 'Premium',
+                    price: '€556',
+                    buttonCaption: 'Get covered',
                     href: 'http://example.com',
                 },
             ],
             [
-                { content: 'Select a plan' },
+                { text: 'Select a plan' },
                 {
                     type: 'BUTTON',
-                    content: 'Standard',
-                    subContent: '€234',
+                    buttonCaption: 'Standard',
+                    price: '€234',
                     onClick: function () { },
                 },
                 {
                     type: 'BUTTON',
-                    content: 'Plus',
-                    subContent: '€344',
+                    buttonCaption: 'Plus',
+                    price: '€344',
                     onClick: function () { },
                 },
                 {
                     type: 'BUTTON',
-                    content: 'Premium',
-                    subContent: '€556',
+                    buttonCaption: 'Premium',
+                    price: '€556',
                     onClick: function () { },
                 },
             ],
             [
                 {
-                    content: 'Regular vet visits & medication',
-                    subContent: 'Annual Only',
+                    text: 'Your contribution',
                 },
-                { content: 'No', subContent: 'Annual Only' },
-                { content: '50%' },
-                { content: '80%-100%' },
+                {
+                    text: '€210',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+                {
+                    text: '€275',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+                {
+                    text: '€310',
+                    description: 'per month',
+                    fontVariant: 'PRICE',
+                    modalContent: 'Price info',
+                },
+            ],
+            [
+                {
+                    text: 'Regular vet visits & medication',
+                    description: 'Annual Only',
+                },
+                { text: 'No', description: 'Annual Only' },
+                { text: '50%' },
+                { text: '80%-100%' },
             ],
             [
-                { content: 'Operations', modalContent: 'Operations info' },
+                { text: 'Operations', modalContent: 'Operations info' },
                 { checkmarkValue: true, modalContent: 'Operations info column 2' },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
             [
-                { content: 'Rating', modalContent: 'Rating info' },
+                { text: 'Rating', modalContent: 'Rating info' },
                 { rating: { type: 'zap', value: 1 } },
                 {
                     rating: { type: 'zap', value: 3 },
@@ -117,19 +143,19 @@ var initialData = [
         },
         rows: [
             [
-                { content: 'Regular vet visits & medication' },
-                { content: 'No' },
-                { content: 'Yes' },
-                { content: 'Yes' },
+                { text: 'Regular vet visits & medication' },
+                { text: 'No' },
+                { text: 'Yes' },
+                { text: 'Yes' },
             ],
             [
-                { content: 'Operations', modalContent: 'info' },
+                { text: 'Operations', modalContent: 'info' },
                 { checkmarkValue: true, modalContent: 'Maybe' },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
             [
-                { content: 'Rating', modalContent: 'info' },
+                { text: 'Rating', modalContent: 'info' },
                 { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
                 { rating: { type: 'zap', value: 3 } },
                 { rating: { type: 'star', value: 3 } },
@@ -143,19 +169,19 @@ var initialData = [
         },
         rows: [
             [
-                { content: 'Regular vet visits & medication' },
-                { content: 'No', checkmarkValue: false },
-                { content: 'Yes' },
-                { content: 'Yes' },
+                { text: 'Regular vet visits & medication' },
+                { text: 'No', checkmarkValue: false },
+                { text: 'Yes' },
+                { text: 'Yes' },
             ],
             [
-                { content: 'Operations', modalContent: 'info' },
+                { text: 'Operations', modalContent: 'info' },
                 { checkmarkValue: true, modalContent: 'Maybe' },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],
             [
-                { content: 'Rating', modalContent: 'info' },
+                { text: 'Rating', modalContent: 'info' },
                 { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
                 { rating: { type: 'zap', value: 3 } },
                 { rating: { type: 'star', value: 3 } },
@@ -219,7 +245,7 @@ var TableStory = function (_a) {
     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  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      " }));
+    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    text?: 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, 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        {\n          type: 'CTA',\n          content: 'Standard',\n          subContent: '€234',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          content: 'Plus',\n          subContent: '€344',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          content: 'Premium',\n          subContent: '€556',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { content: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          content: 'Standard',\n          subContent: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          content: 'Plus',\n          subContent: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          content: 'Premium',\n          subContent: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          content: 'Regular vet visits & medication',\n          subContent: 'Annual Only',\n        },\n        { content: 'No', subContent: 'Annual Only' },\n        { content: '50%' },\n        { content: '80%-100%' },\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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"}
+{"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 { TableCellData, TableData } from './types';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Annual Only',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: '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        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: '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        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        { checkmarkValue: true, modalContent: 'Maybe' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: '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    text?: 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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"}

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

@@ -34,7 +34,7 @@ import '../icon/icons/ChevronRight.js';
 import '../../Collapsible-a355828b.js';
 import '../../index-a0ef2ab4.js';
 import './components/TableContents/TableContents.js';
-import './components/TableSection/TableSection.js';
+import '../../TableSection-f6d0028e.js';
 import '../../useTableNavigation-2899712c.js';
 import './components/TableControls/TableControls.js';
 import '../icon/icons/ChevronLeft.js';
@@ -46,7 +46,7 @@ var tableData = [
             title: 'Section 1',
             icon: jsx("span", { children: "Icon 1" }),
         },
-        rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
+        rows: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
     },
     {
         section: {
@@ -54,10 +54,7 @@ var tableData = [
             icon: jsx("span", { children: "Icon 2" }),
         },
         rows: [
-            [
-                { content: 'Item 3' },
-                { content: 'Item 4', modalContent: 'Additional item' },
-            ],
+            [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],
         ],
     },
 ];