@popsure/dirty-swan 0.58.6 → 0.58.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/index.js +30 -15
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/lib/components/table/Table.d.ts +2 -1
  4. package/dist/cjs/lib/components/table/Table.stories.d.ts +6 -2
  5. package/dist/cjs/lib/components/table/components/TableCell/CTACell/CTACell.d.ts +2 -1
  6. package/dist/cjs/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts +1 -1
  7. package/dist/cjs/lib/components/table/components/TableContents/TableContents.d.ts +2 -1
  8. package/dist/cjs/lib/components/table/components/TableSection/TableSection.d.ts +2 -1
  9. package/dist/esm/{TableSection-f41d4248.js → TableSection-9cf86eb7.js} +4 -3
  10. package/dist/esm/TableSection-9cf86eb7.js.map +1 -0
  11. package/dist/esm/components/table/Table.js +8 -8
  12. package/dist/esm/components/table/Table.js.map +1 -1
  13. package/dist/esm/components/table/Table.stories.js +8 -4
  14. package/dist/esm/components/table/Table.stories.js.map +1 -1
  15. package/dist/esm/components/table/Table.test.js +2 -2
  16. package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js +11 -3
  17. package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map +1 -1
  18. package/dist/esm/components/table/components/TableCell/CTACell/CTACell.stories.js +1 -0
  19. package/dist/esm/components/table/components/TableCell/CTACell/CTACell.stories.js.map +1 -1
  20. package/dist/esm/components/table/components/TableCell/TableCell.js +1 -1
  21. package/dist/esm/components/table/components/TableCell/TableCell.test.js +1 -1
  22. package/dist/esm/components/table/components/TableContents/TableContents.js +15 -6
  23. package/dist/esm/components/table/components/TableContents/TableContents.js.map +1 -1
  24. package/dist/esm/components/table/components/TableContents/TableContents.test.js +2 -2
  25. package/dist/esm/components/table/components/TableSection/TableSection.js +2 -2
  26. package/dist/esm/components/table/components/TableSection/TableSection.test.js +2 -2
  27. package/dist/esm/index.js +1 -1
  28. package/dist/esm/lib/components/table/Table.d.ts +2 -1
  29. package/dist/esm/lib/components/table/Table.stories.d.ts +6 -2
  30. package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.d.ts +2 -1
  31. package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts +1 -1
  32. package/dist/esm/lib/components/table/components/TableContents/TableContents.d.ts +2 -1
  33. package/dist/esm/lib/components/table/components/TableSection/TableSection.d.ts +2 -1
  34. package/package.json +1 -1
  35. package/src/lib/components/table/Table.stories.tsx +6 -0
  36. package/src/lib/components/table/Table.tsx +4 -0
  37. package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx +11 -5
  38. package/src/lib/components/table/components/TableContents/TableContents.tsx +65 -51
  39. package/src/lib/components/table/components/TableSection/TableSection.tsx +8 -1
  40. package/dist/esm/TableSection-f41d4248.js.map +0 -1
@@ -10,6 +10,7 @@ export interface TableProps {
10
10
  collapsibleSections?: boolean;
11
11
  hideColumns?: number[];
12
12
  hideDetails?: boolean;
13
+ hideRows?: number[];
13
14
  imageComponent?: (args: any) => JSX.Element;
14
15
  modalContentRenderer?: (content: ReactNode) => ReactNode;
15
16
  onModalOpen?: ModalFunction;
@@ -19,5 +20,5 @@ export interface TableProps {
19
20
  textOverrides?: TextOverrides;
20
21
  title: string;
21
22
  }
22
- declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
23
+ declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
23
24
  export { Table };
@@ -2,7 +2,7 @@ import { TableProps } from './Table';
2
2
  import { TableData } from './types';
3
3
  declare const story: {
4
4
  title: string;
5
- component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
5
+ component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, }: TableProps) => JSX.Element;
6
6
  argTypes: {
7
7
  tableData: {
8
8
  subContent: string;
@@ -28,6 +28,9 @@ declare const story: {
28
28
  hideColumns: {
29
29
  subContent: string;
30
30
  };
31
+ hideRows: {
32
+ subContent: string;
33
+ };
31
34
  modalContentRenderer: {
32
35
  subContent: string;
33
36
  };
@@ -56,10 +59,11 @@ declare const story: {
56
59
  hideDetails: string;
57
60
  };
58
61
  hideColumns: never[];
62
+ hideRows: never[];
59
63
  };
60
64
  };
61
65
  export declare const TableStory: {
62
- ({ collapsibleSections, tableData, hideColumns, hideDetails, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
66
+ ({ collapsibleSections, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, }: TableProps): JSX.Element;
63
67
  storyName: string;
64
68
  };
65
69
  export declare const TableDataType: () => JSX.Element;
@@ -11,5 +11,6 @@ export type CTACellProps = {
11
11
  className?: string;
12
12
  dataTestId?: string;
13
13
  dataCy?: string;
14
+ onClick?: () => void;
14
15
  };
15
- export declare const CTACell: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, }: CTACellProps) => JSX.Element;
16
+ export declare const CTACell: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: CTACellProps) => JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { CTACell } from './CTACell';
2
2
  declare const story: {
3
3
  title: string;
4
- component: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, }: import("./CTACell").CTACellProps) => JSX.Element;
4
+ component: ({ title, price, icon, grey, narrow, href, buttonCaption, imageComponent, className, dataCy, dataTestId, onClick, }: import("./CTACell").CTACellProps) => JSX.Element;
5
5
  argTypes: {};
6
6
  args: {
7
7
  title: string;
@@ -5,6 +5,7 @@ export interface TableContentsProps {
5
5
  tableData: TableData;
6
6
  hideColumns?: number[];
7
7
  hideDetails?: boolean;
8
+ hideRows?: number[];
8
9
  isMobile?: boolean;
9
10
  openModal?: ModalFunction;
10
11
  shouldHideDetails?: boolean;
@@ -12,5 +13,5 @@ export interface TableContentsProps {
12
13
  cellReplacements?: CellReplacements;
13
14
  imageComponent?: (args: any) => JSX.Element;
14
15
  }
15
- declare const TableContents: ({ className, collapsibleSections, tableData, hideColumns, hideDetails, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, }: TableContentsProps) => JSX.Element;
16
+ declare const TableContents: ({ className, collapsibleSections, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, }: TableContentsProps) => JSX.Element;
16
17
  export { TableContents };
@@ -3,6 +3,7 @@ export interface TableSectionProps {
3
3
  className?: string;
4
4
  tableCellRows: TableCellRowData[];
5
5
  hideColumns?: number[];
6
+ hideRows?: number[];
6
7
  hideHeader?: boolean;
7
8
  openModal?: ModalFunction;
8
9
  title: string;
@@ -10,5 +11,5 @@ export interface TableSectionProps {
10
11
  cellReplacements?: CellReplacements;
11
12
  imageComponent?: (args: any) => JSX.Element;
12
13
  }
13
- declare const TableSection: ({ className, tableCellRows, hideColumns, hideHeader, openModal, title, width, cellReplacements, imageComponent, }: TableSectionProps) => JSX.Element;
14
+ declare const TableSection: ({ className, tableCellRows, hideColumns, hideRows, hideHeader, openModal, title, width, cellReplacements, imageComponent, }: TableSectionProps) => JSX.Element;
14
15
  export { TableSection };
@@ -15,7 +15,7 @@ var isBaseCell = function (tableCellData) {
15
15
  };
16
16
 
17
17
  var TableSection = function (_a) {
18
- var className = _a.className, tableCellRows = _a.tableCellRows, _b = _a.hideColumns, hideColumns = _b === void 0 ? [] : _b, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent;
18
+ var className = _a.className, tableCellRows = _a.tableCellRows, _b = _a.hideColumns, hideColumns = _b === void 0 ? [] : _b, _c = _a.hideRows, hideRows = _c === void 0 ? [] : _c, hideHeader = _a.hideHeader, openModal = _a.openModal, title = _a.title, width = _a.width, cellReplacements = _a.cellReplacements, imageComponent = _a.imageComponent;
19
19
  var headerRow = tableCellRows === null || tableCellRows === void 0 ? void 0 : tableCellRows[0];
20
20
  var isBelowDesktop = useMediaQuery('BELOW_DESKTOP');
21
21
  var getModalTitleFromColumnHeader = function (cellIndex) {
@@ -41,6 +41,7 @@ var TableSection = function (_a) {
41
41
  return titleFromRow;
42
42
  };
43
43
  var isVisibleColumn = useCallback(function (cellIndex) { return !hideColumns.includes(cellIndex); }, [hideColumns]);
44
+ var isVisibleRow = useCallback(function (rowIndex) { return !hideRows.includes(rowIndex); }, [hideRows]);
44
45
  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) {
45
46
  var isFirstCellInRow = cellIndex === 0;
46
47
  var cellReplacementData = (tableCellData.cellId &&
@@ -54,7 +55,7 @@ var TableSection = function (_a) {
54
55
  });
55
56
  return (isVisibleColumn(cellIndex) && (jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), cellIndex)));
56
57
  }) }) })), jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
57
- return rowIndex > 0 && (jsx("tr", { className: styles.tr, children: row.map(function (tableCellData, cellIndex) {
58
+ return rowIndex > 0 && isVisibleRow(rowIndex) && (jsx("tr", { className: styles.tr, children: row.map(function (tableCellData, cellIndex) {
58
59
  var key = "".concat(rowIndex, "-").concat(cellIndex);
59
60
  var isFirstCellInRow = cellIndex === 0;
60
61
  var titleFromRow = getModalTitleFromRowHeader(row);
@@ -72,4 +73,4 @@ var TableSection = function (_a) {
72
73
  };
73
74
 
74
75
  export { TableSection as T, isBaseCell as i };
75
- //# sourceMappingURL=TableSection-f41d4248.js.map
76
+ //# sourceMappingURL=TableSection-9cf86eb7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableSection-9cf86eb7.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';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n cellId?: string;\n colSpan?: number;\n modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n | BaseCellData\n | CTACellData\n | ButtonCellData\n | CardCellData;\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\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n CellReplacements,\n isBaseCell,\n ModalFunction,\n TableCellData,\n TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n className?: string;\n tableCellRows: TableCellRowData[];\n hideColumns?: number[];\n hideRows?: number[];\n hideHeader?: boolean;\n openModal?: ModalFunction;\n title: string;\n width?: number | string;\n cellReplacements?: CellReplacements;\n imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n className,\n tableCellRows,\n hideColumns = [],\n hideRows = [],\n hideHeader,\n openModal,\n title,\n width,\n cellReplacements,\n imageComponent,\n}: TableSectionProps) => {\n const headerRow = tableCellRows?.[0];\n const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\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 const isVisibleColumn = useCallback(\n (cellIndex: number) => !hideColumns.includes(cellIndex),\n [hideColumns]\n );\n\n const isVisibleRow = useCallback(\n (rowIndex: number) => !hideRows.includes(rowIndex),\n [hideRows]\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 const cellReplacementData =\n (tableCellData.cellId &&\n cellReplacements?.[tableCellData.cellId]) ||\n {};\n\n const cellProps = {\n ...tableCellData,\n ...cellReplacementData,\n ...{\n openModal,\n modalTitle:\n (isBaseCell(tableCellData) && tableCellData.text) ||\n getModalTitleFromColumnHeader(cellIndex),\n align: isFirstCellInRow ? 'left' : 'center',\n },\n } as TableCellData;\n\n return (\n isVisibleColumn(cellIndex) && (\n <TableCell\n key={cellIndex}\n isBelowDesktop={isBelowDesktop}\n isHeader\n isFirstCellInRow={isFirstCellInRow}\n isTopLeftCell={isFirstCellInRow}\n {...cellProps}\n imageComponent={imageComponent}\n />\n )\n );\n })}\n </tr>\n </thead>\n )}\n\n <tbody>\n {tableCellRows.map(\n (row, rowIndex) =>\n rowIndex > 0 && isVisibleRow(rowIndex) && (\n <tr key={rowIndex} className={styles.tr}>\n {row.map((tableCellData, cellIndex) => {\n const key = `${rowIndex}-${cellIndex}`;\n const isFirstCellInRow = cellIndex === 0;\n const titleFromRow = getModalTitleFromRowHeader(row);\n\n const cellReplacementData =\n (tableCellData.cellId &&\n cellReplacements?.[tableCellData.cellId]) ||\n {};\n\n const cellProps = {\n ...tableCellData,\n ...cellReplacementData,\n ...{\n openModal,\n modalTitle: tableCellData?.modalTitle || titleFromRow,\n align: isFirstCellInRow ? 'left' : 'center',\n },\n } as TableCellData;\n\n return (\n !hideColumns.includes(cellIndex) && (\n <TableCell\n isBelowDesktop={isBelowDesktop}\n isFirstCellInRow={isFirstCellInRow}\n key={key}\n {...cellProps}\n imageComponent={imageComponent}\n />\n )\n );\n })}\n </tr>\n )\n )}\n </tbody>\n </table>\n );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;IAuBa,UAAU,GAAG,UACxB,aAA4B;IAE5B,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B;;ICAM,YAAY,GAAG,UAAC,EAWF;QAVlB,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EACb,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,KAAK,WAAA,EACL,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,cAAc,oBAAA;IAEd,IAAM,SAAS,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAC;IACrC,IAAM,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;IAEtD,IAAM,6BAA6B,GAAG,UAAC,SAAiB;;QACtD,IAAM,iBAAiB,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,0CAAG,SAAS,CAAC,CAAC;QAC1D,IAAI,eAAe,CAAC;QAEpB,QAAQ,iBAAiB,CAAC,IAAI;YAC5B,KAAK,QAAQ;gBACX,eAAe,GAAG,iBAAiB,CAAC,aAAa,CAAC;gBAClD,MAAM;YACR,KAAK,KAAK;gBACR,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC;gBAC1C,MAAM;YACR,KAAK,SAAS;gBACZ,eAAe,GAAG,iBAAiB,CAAC,IAAI,IAAI,EAAE,CAAC;gBAC/C,MAAM;SACT;QAED,OAAO,eAAe,CAAC;KACxB,CAAC;IAEF,IAAM,0BAA0B,GAAG,UAAC,UAA4B;QAC9D,IAAM,cAAc,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,CAAC;QACvC,IAAM,YAAY,GAChB,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,KAAK,EAAE,CAAC;QAE5D,OAAO,YAAY,CAAC;KACrB,CAAC;IAEF,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,SAAiB,IAAK,OAAA,CAAC,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAA,EACvD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,QAAgB,IAAK,OAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAA,EAClD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,QACEA,gBACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,KAAK,aAEZC,iBAAS,SAAS,EAAC,SAAS,YAAE,KAAK,GAAW,EAE7C,SAAS,KACRA,eAAO,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,EAAE,YAC3CA,sBACG,SAAS,CAAC,GAAG,CAAC,UAAC,aAAa,EAAE,SAAS;wBACtC,IAAM,gBAAgB,GAAG,SAAS,KAAK,CAAC,CAAC;wBACzC,IAAM,mBAAmB,GACvB,CAAC,aAAa,CAAC,MAAM;6BACnB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,aAAa,CAAC,MAAM,CAAC,CAAA;4BAC1C,EAAE,CAAC;wBAEL,IAAM,SAAS,GAAG,+BACb,aAAa,GACb,mBAAmB,GACnB;4BACD,SAAS,WAAA;4BACT,UAAU,EACR,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,IAAI;gCAChD,6BAA6B,CAAC,SAAS,CAAC;4BAC1C,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,QAAQ;yBAC5C,CACe,CAAC;wBAEnB,QACE,eAAe,CAAC,SAAS,CAAC,KACxBA,IAAC,SAAS,aAER,cAAc,EAAE,cAAc,EAC9B,QAAQ,QACR,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,gBAAgB,IAC3B,SAAS,IACb,cAAc,EAAE,cAAc,KANzB,SAAS,CAOd,CACH,EACD;qBACH,CAAC,GACC,GACC,CACT,EAEDA,yBACG,aAAa,CAAC,GAAG,CAChB,UAAC,GAAG,EAAE,QAAQ;oBACZ,OAAA,QAAQ,GAAG,CAAC,IAAI,YAAY,CAAC,QAAQ,CAAC,KACpCA,YAAmB,SAAS,EAAE,MAAM,CAAC,EAAE,YACpC,GAAG,CAAC,GAAG,CAAC,UAAC,aAAa,EAAE,SAAS;4BAChC,IAAM,GAAG,GAAG,UAAG,QAAQ,cAAI,SAAS,CAAE,CAAC;4BACvC,IAAM,gBAAgB,GAAG,SAAS,KAAK,CAAC,CAAC;4BACzC,IAAM,YAAY,GAAG,0BAA0B,CAAC,GAAG,CAAC,CAAC;4BAErD,IAAM,mBAAmB,GACvB,CAAC,aAAa,CAAC,MAAM;iCACnB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,aAAa,CAAC,MAAM,CAAC,CAAA;gCAC1C,EAAE,CAAC;4BAEL,IAAM,SAAS,GAAG,+BACb,aAAa,GACb,mBAAmB,GACnB;gCACD,SAAS,WAAA;gCACT,UAAU,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,UAAU,KAAI,YAAY;gCACrD,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,QAAQ;6BAC5C,CACe,CAAC;4BAEnB,QACE,CAAC,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,KAC9BA,IAAC,SAAS,aACR,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,IAE9B,SAAS,IACb,cAAc,EAAE,cAAc,KAFzB,GAAG,CAGR,CACH,EACD;yBACH,CAAC,IAhCK,QAAQ,CAiCZ,CACN;iBAAA,CACJ,GACK,IACF,EACR;AACJ;;;;"}
@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
12
12
  import { c as classNames } from '../../index-6ea95111.js';
13
13
  import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
14
14
  import { TableControls } from './components/TableControls/TableControls.js';
15
- import { i as isBaseCell, T as TableSection } from '../../TableSection-f41d4248.js';
15
+ import { i as isBaseCell, T as TableSection } from '../../TableSection-9cf86eb7.js';
16
16
  import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
17
17
  import './components/TableCell/BaseCell/BaseCell.js';
18
18
  import '../icon/icons/CheckThick.js';
@@ -28,10 +28,10 @@ import '../icon/icons/Info.js';
28
28
  import '../../index-5e72c3d4.js';
29
29
  import './components/TableCell/CTACell/CTACell.js';
30
30
  import './components/IconRenderer/IconRenderer.js';
31
+ import '../button/index.js';
31
32
  import './components/TableCell/CardCell/CardCell.js';
32
33
  import '../icon/icons/ChevronRight.js';
33
34
  import './components/TableCell/ButtonCell/ButtonCell.js';
34
- import '../button/index.js';
35
35
  import '../modal/bottomModal/index.js';
36
36
  import '../modal/genericModal/index.js';
37
37
  import '../../index-171a0108.js';
@@ -50,20 +50,20 @@ var defaultTextOverrides = {
50
50
  };
51
51
  var Table = function (_a) {
52
52
  var _b, _c, _d, _e, _f, _g, _h, _j;
53
- var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _l = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _l === void 0 ? 0 : _l, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title;
53
+ var cellReplacements = _a.cellReplacements, className = _a.className, collapsibleSections = _a.collapsibleSections, _k = _a.hideColumns, hideColumns = _k === void 0 ? [] : _k, hideDetails = _a.hideDetails, _l = _a.hideRows, hideRows = _l === void 0 ? [] : _l, imageComponent = _a.imageComponent, modalContentRenderer = _a.modalContentRenderer, onModalOpen = _a.onModalOpen, onSelectionChanged = _a.onSelectionChanged, _m = _a.stickyHeaderTopOffset, stickyHeaderTopOffset = _m === void 0 ? 0 : _m, tableData = _a.tableData, definedTextOverrides = _a.textOverrides, title = _a.title;
54
54
  var textOverrides = __assign(__assign({}, defaultTextOverrides), definedTextOverrides);
55
55
  var isMobile = useMediaQuery('BELOW_MOBILE');
56
- var _m = useState(null), infoModalData = _m[0], setInfoModalData = _m[1];
57
- var _o = useState(true), shouldHideDetails = _o[0], setShouldHideDetails = _o[1];
56
+ var _o = useState(null), infoModalData = _o[0], setInfoModalData = _o[1];
57
+ var _p = useState(true), shouldHideDetails = _p[0], setShouldHideDetails = _p[1];
58
58
  var containerRef = useRef(null);
59
59
  var headerRef = useRef(null);
60
60
  var columnsLength = tableData[0].rows[0].length;
61
61
  useScrollSync(headerRef, containerRef, !isMobile);
62
- var _p = useTableNavigation({
62
+ var _q = useTableNavigation({
63
63
  enabled: isMobile,
64
64
  containerRef: containerRef,
65
65
  onSelectionChanged: onSelectionChanged,
66
- }), activeSection = _p.activeSection, navigateTable = _p.navigateTable;
66
+ }), activeSection = _q.activeSection, navigateTable = _q.navigateTable;
67
67
  var titleCell = __assign({ text: '' }, ((_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[0]) || {});
68
68
  var currentActiveSection = (_g = (_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]) === null || _g === void 0 ? void 0 : _g[activeSection];
69
69
  var currentActiveSectionReplacements = (currentActiveSection.cellId &&
@@ -84,7 +84,7 @@ var Table = function (_a) {
84
84
  });
85
85
  },
86
86
  }
87
- : {}), activeCellProps, { imageComponent: imageComponent, 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, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
87
+ : {}), activeCellProps, { imageComponent: imageComponent, 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, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
88
88
  buttonWrapper: 'm8 mt32',
89
89
  title: 'd-flex gap8 ai-center jc-center fw-bold',
90
90
  wrapper: 'bg-grey-200',
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, 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 {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n stickyHeaderTopOffset = 0,\n tableData,\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 titleCell = {\n text: '',\n ...tableData?.[0]?.rows?.[0]?.[0] || {},\n };\n const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n const currentActiveSectionReplacements =\n (currentActiveSection.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) ||\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ 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 <>\n {titleCell?.text && (\n <TableCell\n {...titleCell}\n align='left'\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n </>\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 cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\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 hideColumns={hideColumns}\n hideDetails={hideDetails}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: 'm8 mt32',\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n wrapper: 'bg-grey-200',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\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={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, 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 {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n hideRows?: number[];\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n hideRows = [],\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n stickyHeaderTopOffset = 0,\n tableData,\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 titleCell = {\n text: '',\n ...tableData?.[0]?.rows?.[0]?.[0] || {},\n };\n const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n const currentActiveSectionReplacements =\n (currentActiveSection.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) ||\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ 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 <>\n {titleCell?.text && (\n <TableCell\n {...titleCell}\n align='left'\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n </>\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 cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n hideRows={hideRows}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\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 hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: 'm8 mt32',\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n wrapper: 'bg-grey-200',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\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={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
@@ -22,11 +22,11 @@ import '../icon/icons/Info.js';
22
22
  import '../../index-5e72c3d4.js';
23
23
  import './components/TableCell/CTACell/CTACell.js';
24
24
  import './components/IconRenderer/IconRenderer.js';
25
+ import '../button/index.js';
25
26
  import './components/TableCell/CardCell/CardCell.js';
26
27
  import '../cards/card/index.js';
27
28
  import '../icon/icons/ChevronRight.js';
28
29
  import './components/TableCell/ButtonCell/ButtonCell.js';
29
- import '../button/index.js';
30
30
  import '../modal/bottomOrRegularModal/index.js';
31
31
  import '../modal/bottomModal/index.js';
32
32
  import '../modal/genericModal/index.js';
@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
37
37
  import '../icon/icons/ChevronUp.js';
38
38
  import '../../useMediaQuery-1a3a2432.js';
39
39
  import './components/TableContents/TableContents.js';
40
- import '../../TableSection-f41d4248.js';
40
+ import '../../TableSection-9cf86eb7.js';
41
41
  import './components/TableContents/Collapsible.js';
42
42
  import '../../useTableNavigation-f929fbc9.js';
43
43
  import './components/TableControls/TableControls.js';
@@ -254,6 +254,9 @@ var story = {
254
254
  hideColumns: {
255
255
  subContent: 'This property allows to hide defined columns by index.',
256
256
  },
257
+ hideRows: {
258
+ subContent: 'This property allows to hide selected rows by index.',
259
+ },
257
260
  modalContentRenderer: {
258
261
  subContent: 'This property allows to render custom modal content.',
259
262
  },
@@ -282,10 +285,11 @@ var story = {
282
285
  hideDetails: 'Hide details',
283
286
  },
284
287
  hideColumns: [],
288
+ hideRows: [],
285
289
  },
286
290
  };
287
291
  var TableStory = function (_a) {
288
- var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
292
+ var collapsibleSections = _a.collapsibleSections, tableData = _a.tableData, hideColumns = _a.hideColumns, hideDetails = _a.hideDetails, hideRows = _a.hideRows, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, textOverrides = _a.textOverrides, title = _a.title;
289
293
  var _b = useState(999), price = _b[0], setPrice = _b[1];
290
294
  return (jsxs("div", { children: [jsxs("div", { className: "d-flex fd-column p24 mb80 gap16 wmx5", children: [jsx("label", { htmlFor: "", children: "Change price to see replacement in action: " }), jsx(Input, { id: "#stuff", type: "text", onChange: function (e) { return setPrice(Number(e.target.value)); }, value: price })] }), jsx(Table, { cellReplacements: {
291
295
  '#1': {
@@ -302,7 +306,7 @@ var TableStory = function (_a) {
302
306
  '#3': {
303
307
  description: 'per year',
304
308
  },
305
- }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title })] }));
309
+ }, collapsibleSections: collapsibleSections, tableData: tableData, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, stickyHeaderTopOffset: stickyHeaderTopOffset, textOverrides: textOverrides, title: title })] }));
306
310
  };
307
311
  var TableDataType = function () {
308
312
  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 " }));
@@ -1 +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';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n {\n rows: [\n [\n { text: 'Our plans' },\n {\n type: 'CTA',\n icon: 'https://placehold.co/24x24/orange/white',\n title: 'Standard',\n price: '€234',\n buttonCaption: 'Get covered',\n href: 'http://example.com',\n },\n {\n type: 'CTA',\n icon: 'https://placehold.co/24x24/green/white',\n title: 'Plus',\n price: '€344',\n buttonCaption: 'Get covered',\n href: 'http://example.com',\n },\n {\n type: 'CTA',\n icon: <PlaneIcon size={24} noMargin />,\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 cellId: '#1',\n text: '€210',\n description: 'per month',\n fontVariant: 'PRICE',\n modalContent: 'Price info',\n },\n {\n cellId: '#2',\n text: '€275',\n description: 'per month',\n fontVariant: 'PRICE',\n modalContent: 'Price info',\n },\n {\n cellId: '#3',\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: 'Pflegepflichtversicherungrightno',\n modalContent: 'Some stories about vets',\n },\n { text: 'No', description: 'Annual Only' },\n { text: '50%' },\n { text: '80%-100%' },\n ],\n [\n { text: 'Operations',\n modalContent: 'Operations info',\n modalTitle: 'Custom operations modal title'\n },\n { \n checkmarkValue: true,\n modalContent: 'Operations info column 2',\n modalTitle: 'Custom operations modal title column 2'\n },\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={20} 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 {\n text: 'This is a table cell with a lot of text',\n modalContent: 'Maybe',\n },\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 type: 'CARD',\n colSpan: 3,\n title: 'Dental add-on',\n href: 'https://example.com',\n icon: 'https://placehold.co/24x24/green/yellow',\n description:\n 'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n },\n ],\n ],\n },\n {\n section: {\n title: 'Travel',\n icon: 'https://placehold.co/24x24/red/yellow',\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 {\n checkmarkValue: true,\n modalContent: 'Maybe',\n description: 'This is a table cell with a long subtitle',\n },\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 tableData: {\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 hideColumns: {\n subContent: 'This property allows to hide defined columns by index.',\n },\n modalContentRenderer: {\n subContent: 'This property allows to render custom modal content.',\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 hideColumns: [],\n },\n};\n\nexport const TableStory = ({\n collapsibleSections,\n tableData,\n hideColumns,\n hideDetails,\n stickyHeaderTopOffset,\n textOverrides,\n title,\n}: TableProps) => {\n const [price, setPrice] = useState(999);\n return (\n <div>\n <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n <label htmlFor=\"\">Change price to see replacement in action: </label>\n <Input\n id=\"#stuff\"\n type=\"text\"\n onChange={(e) => setPrice(Number(e.target.value))}\n value={price}\n />\n </div>\n\n <Table\n cellReplacements={{\n '#1': {\n type: 'CTA',\n title: 'Replaced!',\n price: `€${price}`,\n buttonCaption: 'I got replaced',\n href: 'http://example.com',\n },\n '#2': {\n type: 'BUTTON',\n buttonCaption: 'I got replaced too',\n },\n '#3': {\n description: 'per year',\n },\n }}\n collapsibleSections={collapsibleSections}\n tableData={tableData}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n textOverrides={textOverrides}\n title={title}\n />\n </div>\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","_jsxs"],"mappings":"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"}
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';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n {\n rows: [\n [\n { text: 'Our plans' },\n {\n type: 'CTA',\n icon: 'https://placehold.co/24x24/orange/white',\n title: 'Standard',\n price: '€234',\n buttonCaption: 'Get covered',\n href: 'http://example.com',\n },\n {\n type: 'CTA',\n icon: 'https://placehold.co/24x24/green/white',\n title: 'Plus',\n price: '€344',\n buttonCaption: 'Get covered',\n href: 'http://example.com',\n },\n {\n type: 'CTA',\n icon: <PlaneIcon size={24} noMargin />,\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 cellId: '#1',\n text: '€210',\n description: 'per month',\n fontVariant: 'PRICE',\n modalContent: 'Price info',\n },\n {\n cellId: '#2',\n text: '€275',\n description: 'per month',\n fontVariant: 'PRICE',\n modalContent: 'Price info',\n },\n {\n cellId: '#3',\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: 'Pflegepflichtversicherungrightno',\n modalContent: 'Some stories about vets',\n },\n { text: 'No', description: 'Annual Only' },\n { text: '50%' },\n { text: '80%-100%' },\n ],\n [\n { text: 'Operations',\n modalContent: 'Operations info',\n modalTitle: 'Custom operations modal title'\n },\n { \n checkmarkValue: true,\n modalContent: 'Operations info column 2',\n modalTitle: 'Custom operations modal title column 2'\n },\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={20} 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 {\n text: 'This is a table cell with a lot of text',\n modalContent: 'Maybe',\n },\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 type: 'CARD',\n colSpan: 3,\n title: 'Dental add-on',\n href: 'https://example.com',\n icon: 'https://placehold.co/24x24/green/yellow',\n description:\n 'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n },\n ],\n ],\n },\n {\n section: {\n title: 'Travel',\n icon: 'https://placehold.co/24x24/red/yellow',\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 {\n checkmarkValue: true,\n modalContent: 'Maybe',\n description: 'This is a table cell with a long subtitle',\n },\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 tableData: {\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 hideColumns: {\n subContent: 'This property allows to hide defined columns by index.',\n },\n hideRows: {\n subContent: 'This property allows to hide selected rows by index.',\n },\n modalContentRenderer: {\n subContent: 'This property allows to render custom modal content.',\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 hideColumns: [],\n hideRows: [],\n },\n};\n\nexport const TableStory = ({\n collapsibleSections,\n tableData,\n hideColumns,\n hideDetails,\n hideRows,\n stickyHeaderTopOffset,\n textOverrides,\n title,\n}: TableProps) => {\n const [price, setPrice] = useState(999);\n return (\n <div>\n <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n <label htmlFor=\"\">Change price to see replacement in action: </label>\n <Input\n id=\"#stuff\"\n type=\"text\"\n onChange={(e) => setPrice(Number(e.target.value))}\n value={price}\n />\n </div>\n\n <Table\n cellReplacements={{\n '#1': {\n type: 'CTA',\n title: 'Replaced!',\n price: `€${price}`,\n buttonCaption: 'I got replaced',\n href: 'http://example.com',\n },\n '#2': {\n type: 'BUTTON',\n buttonCaption: 'I got replaced too',\n },\n '#3': {\n description: 'per year',\n },\n }}\n collapsibleSections={collapsibleSections}\n tableData={tableData}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n textOverrides={textOverrides}\n title={title}\n />\n </div>\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","_jsxs"],"mappings":"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"}
@@ -22,11 +22,11 @@ import '../icon/icons/Info.js';
22
22
  import '../../index-5e72c3d4.js';
23
23
  import './components/TableCell/CTACell/CTACell.js';
24
24
  import './components/IconRenderer/IconRenderer.js';
25
+ import '../button/index.js';
25
26
  import './components/TableCell/CardCell/CardCell.js';
26
27
  import '../cards/card/index.js';
27
28
  import '../icon/icons/ChevronRight.js';
28
29
  import './components/TableCell/ButtonCell/ButtonCell.js';
29
- import '../button/index.js';
30
30
  import '../modal/bottomOrRegularModal/index.js';
31
31
  import '../modal/bottomModal/index.js';
32
32
  import '../modal/genericModal/index.js';
@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
37
37
  import '../icon/icons/ChevronUp.js';
38
38
  import '../../useMediaQuery-1a3a2432.js';
39
39
  import './components/TableContents/TableContents.js';
40
- import '../../TableSection-f41d4248.js';
40
+ import '../../TableSection-9cf86eb7.js';
41
41
  import './components/TableContents/Collapsible.js';
42
42
  import '../../useTableNavigation-f929fbc9.js';
43
43
  import './components/TableControls/TableControls.js';
@@ -1,7 +1,10 @@
1
+ import { a as __assign } from '../../../../../tslib.es6-a39f91fc.js';
1
2
  import { jsx, jsxs } from 'react/jsx-runtime';
2
3
  import { c as classNames } from '../../../../../index-6ea95111.js';
3
4
  import { s as styleInject } from '../../../../../style-inject.es-1f59c1d0.js';
4
5
  import { IconRenderer } from '../../IconRenderer/IconRenderer.js';
6
+ import { Button } from '../../../../button/index.js';
7
+ import 'react';
5
8
 
6
9
  var css_248z = ".CTACell-module_narrow__1EPPT {\n height: 40px;\n padding: 8px !important;\n}";
7
10
  var styles = {"narrow":"CTACell-module_narrow__1EPPT"};
@@ -9,14 +12,19 @@ styleInject(css_248z);
9
12
 
10
13
  var CTACell = function (_a) {
11
14
  var _b;
12
- var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption, imageComponent = _a.imageComponent, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId;
15
+ var title = _a.title, price = _a.price, icon = _a.icon, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption, imageComponent = _a.imageComponent, className = _a.className, dataCy = _a.dataCy, dataTestId = _a.dataTestId, onClick = _a.onClick;
13
16
  var renderedIcon = (jsx(IconRenderer, { icon: icon, imageComponent: imageComponent }));
14
- return (jsxs("div", { className: classNames(className, "ta-center"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [renderedIcon, jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-500", children: [" ", price] })] })] }), jsx("a", { className: classNames('mt16 w100 wmx3', (_b = {
17
+ return (jsxs("div", { className: classNames(className, "ta-center"), "data-cy": dataCy, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex jc-center ai-center gap8", children: [renderedIcon, jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-500", children: [" ", price] })] })] }), jsx(Button, __assign({}, onClick ? { onClick: onClick } : {
18
+ as: 'a',
19
+ href: href,
20
+ target: '_blank',
21
+ rel: 'noopener noreferrer',
22
+ }, { className: classNames('mt16 w100 wmx3', (_b = {
15
23
  'p-btn--primary': !grey,
16
24
  'p-btn--secondary-grey': grey
17
25
  },
18
26
  _b[styles.narrow] = narrow,
19
- _b)), href: href, target: "_blank", rel: "noopener noreferrer", children: buttonCaption })] }));
27
+ _b)), children: buttonCaption }))] }));
20
28
  };
21
29
 
22
30
  export { CTACell };
@@ -1 +1 @@
1
- {"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\n\nexport type CTACellProps = {\n title: ReactNode;\n price?: ReactNode;\n icon?: ReactNode;\n imageComponent?: (args: any) => JSX.Element;\n buttonCaption?: ReactNode;\n grey?: boolean;\n narrow?: boolean;\n href: string;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const CTACell = ({\n title,\n price,\n icon,\n grey,\n narrow,\n href,\n buttonCaption,\n imageComponent,\n className,\n dataCy,\n dataTestId,\n}: CTACellProps) => {\n const renderedIcon = (\n <IconRenderer icon={icon} imageComponent={imageComponent} />\n );\n\n return (\n <div\n className={classNames(className, \"ta-center\")}\n data-cy={dataCy}\n data-testid={dataTestId}\n >\n <div className=\"d-flex jc-center ai-center gap8\">\n {renderedIcon}\n <p className=\"p-h3\">\n {title}\n {price && <span className=\"tc-purple-500\"> {price}</span>}\n </p>\n </div>\n\n <a\n className={classNames('mt16 w100 wmx3', {\n 'p-btn--primary': !grey,\n 'p-btn--secondary-grey': grey,\n [styles.narrow]: narrow,\n })}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {buttonCaption}\n </a>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAoBa,OAAO,GAAG,UAAC,EAYT;;QAXb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA;IAEV,IAAM,YAAY,IAChBA,IAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7D,CAAC;IAEF,QACEC,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,aACpC,MAAM,iBACF,UAAU,aAEvBA,cAAK,SAAS,EAAC,iCAAiC,aAC7C,YAAY,EACbA,YAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,IAAQ,IACvD,IACA,EAEND,WACE,SAAS,EAAE,UAAU,CAAC,gBAAgB;wBACpC,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,EACF,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YAExB,aAAa,GACZ,IACA,EACN;AACJ;;;;"}
1
+ {"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n title: ReactNode;\n price?: ReactNode;\n icon?: ReactNode;\n imageComponent?: (args: any) => JSX.Element;\n buttonCaption?: ReactNode;\n grey?: boolean;\n narrow?: boolean;\n href: string;\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n onClick?: () => void;\n};\n\nexport const CTACell = ({\n title,\n price,\n icon,\n grey,\n narrow,\n href,\n buttonCaption,\n imageComponent,\n className,\n dataCy,\n dataTestId,\n onClick,\n}: CTACellProps) => {\n const renderedIcon = (\n <IconRenderer icon={icon} imageComponent={imageComponent} />\n );\n\n return (\n <div\n className={classNames(className, \"ta-center\")}\n data-cy={dataCy}\n data-testid={dataTestId}\n >\n <div className=\"d-flex jc-center ai-center gap8\">\n {renderedIcon}\n <p className=\"p-h3\">\n {title}\n {price && <span className=\"tc-purple-500\"> {price}</span>}\n </p>\n </div>\n\n <Button\n {...onClick ? { onClick } : {\n as: 'a',\n href: href,\n target: '_blank',\n rel: 'noopener noreferrer',\n }}\n className={classNames('mt16 w100 wmx3', {\n 'p-btn--primary': !grey,\n 'p-btn--secondary-grey': grey,\n [styles.narrow]: narrow,\n })}\n >\n {buttonCaption}\n </Button>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;IAsBa,OAAO,GAAG,UAAC,EAaT;;QAZb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,OAAO,aAAA;IAEP,IAAM,YAAY,IAChBA,IAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CAC7D,CAAC;IAEF,QACEC,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,aACpC,MAAM,iBACF,UAAU,aAEvBA,cAAK,SAAS,EAAC,iCAAiC,aAC7C,YAAY,EACbA,YAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,IAAQ,IACvD,IACA,EAEND,IAAC,MAAM,eACD,OAAO,GAAG,EAAE,OAAO,SAAA,EAAE,GAAG;gBAC1B,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,qBAAqB;aAC3B,IACD,SAAS,EAAE,UAAU,CAAC,gBAAgB;wBACpC,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,YAED,aAAa,IACP,IACL,EACN;AACJ;;;;"}
@@ -7,6 +7,7 @@ import '../../../../../tslib.es6-a39f91fc.js';
7
7
  import '../../../../../index-6ea95111.js';
8
8
  import '../../../../../style-inject.es-1f59c1d0.js';
9
9
  import '../../IconRenderer/IconRenderer.js';
10
+ import '../../../../button/index.js';
10
11
 
11
12
  var story = {
12
13
  title: 'JSX/Table/Cells',
@@ -1 +1 @@
1
- {"version":3,"file":"CTACell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.stories.tsx"],"sourcesContent":["import { PlaneIcon } from '../../../../icon';\nimport { CTACell } from './CTACell';\n\nconst story = {\n title: 'JSX/Table/Cells',\n component: CTACell,\n argTypes: {},\n args: {\n title: 'BARMER',\n price: '€277',\n icon: <PlaneIcon size={24} noMargin />,\n buttonCaption: 'Get covered',\n grey: false,\n narrow: false,\n },\n};\n\nexport const CTACellStory = ({\n title,\n price,\n icon,\n buttonCaption,\n grey,\n narrow,\n}: React.ComponentProps<typeof CTACell>) => (\n <div className=\"p48 d-flex fd-column gap16 bg-white\">\n <CTACell\n title={title}\n price={price}\n icon={icon}\n buttonCaption={buttonCaption}\n href=\"\"\n grey={grey}\n narrow={narrow}\n />\n </div>\n);\n\nCTACellStory.storyName = 'CTACell';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,IAAI,EAAEA,IAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;QACtC,aAAa,EAAE,aAAa;QAC5B,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;EACD;IAEW,YAAY,GAAG,UAAC,EAOU;QANrC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,MAAM,YAAA;IACoC,QAC1CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACd,GACE;AAXoC,EAY1C;AAEF,YAAY,CAAC,SAAS,GAAG,SAAS;;;;;"}
1
+ {"version":3,"file":"CTACell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.stories.tsx"],"sourcesContent":["import { PlaneIcon } from '../../../../icon';\nimport { CTACell } from './CTACell';\n\nconst story = {\n title: 'JSX/Table/Cells',\n component: CTACell,\n argTypes: {},\n args: {\n title: 'BARMER',\n price: '€277',\n icon: <PlaneIcon size={24} noMargin />,\n buttonCaption: 'Get covered',\n grey: false,\n narrow: false,\n },\n};\n\nexport const CTACellStory = ({\n title,\n price,\n icon,\n buttonCaption,\n grey,\n narrow,\n}: React.ComponentProps<typeof CTACell>) => (\n <div className=\"p48 d-flex fd-column gap16 bg-white\">\n <CTACell\n title={title}\n price={price}\n icon={icon}\n buttonCaption={buttonCaption}\n href=\"\"\n grey={grey}\n narrow={narrow}\n />\n </div>\n);\n\nCTACellStory.storyName = 'CTACell';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,IAAI,EAAEA,IAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;QACtC,aAAa,EAAE,aAAa;QAC5B,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;EACD;IAEW,YAAY,GAAG,UAAC,EAOU;QANrC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,MAAM,YAAA;IACoC,QAC1CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACd,GACE;AAXoC,EAY1C;AAEF,YAAY,CAAC,SAAS,GAAG,SAAS;;;;;"}
@@ -19,9 +19,9 @@ import '../../../comparisonTable/components/TableInfoButton/index.js';
19
19
  import '../../../icon/icons/Info.js';
20
20
  import '../../../../index-5e72c3d4.js';
21
21
  import '../IconRenderer/IconRenderer.js';
22
+ import '../../../button/index.js';
22
23
  import '../../../cards/card/index.js';
23
24
  import '../../../icon/icons/ChevronRight.js';
24
- import '../../../button/index.js';
25
25
 
26
26
  var css_248z = ".TableCell-module_th__2rjCU {\n vertical-align: middle;\n scroll-snap-align: end;\n width: 50%;\n}\n@media (min-width: 34rem) {\n .TableCell-module_th__2rjCU {\n width: auto;\n scroll-snap-align: unset;\n }\n}\n.TableCell-module_thNavigation__qZ2sY {\n width: 100%;\n}\n@media (min-width: 34rem) {\n .TableCell-module_thNavigation__qZ2sY {\n width: auto;\n }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n position: sticky;\n left: 0;\n z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 1px;\n background-color: #f5f6fb;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n position: sticky;\n left: 0;\n right: 0;\n z-index: 2;\n width: 100%;\n}";
27
27
  var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","fixedCell":"TableCell-module_fixedCell__cL3-m","fixedCard":"TableCell-module_fixedCard__2LO8s"};
@@ -21,11 +21,11 @@ import '../../../icon/icons/Info.js';
21
21
  import '../../../../index-5e72c3d4.js';
22
22
  import './CTACell/CTACell.js';
23
23
  import '../IconRenderer/IconRenderer.js';
24
+ import '../../../button/index.js';
24
25
  import './CardCell/CardCell.js';
25
26
  import '../../../cards/card/index.js';
26
27
  import '../../../icon/icons/ChevronRight.js';
27
28
  import './ButtonCell/ButtonCell.js';
28
- import '../../../button/index.js';
29
29
 
30
30
  var openModal = jest.fn();
31
31
  var setup = function (_a) {