@popsure/dirty-swan 0.57.2 → 0.57.3
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.
- package/dist/cjs/index.js +1 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/table/types.d.ts +1 -0
- package/dist/esm/{TableSection-a6e85f15.js → TableSection-a26ba0c5.js} +2 -6
- package/dist/esm/TableSection-a26ba0c5.js.map +1 -0
- package/dist/esm/components/table/Table.js +1 -1
- package/dist/esm/components/table/Table.stories.js +10 -3
- package/dist/esm/components/table/Table.stories.js.map +1 -1
- package/dist/esm/components/table/Table.test.js +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.js +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.test.js +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.js +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.test.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/table/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/components/table/Table.stories.tsx +9 -2
- package/src/lib/components/table/components/TableSection/TableSection.tsx +1 -7
- package/src/lib/components/table/types.ts +1 -0
- package/dist/esm/TableSection-a6e85f15.js.map +0 -1
|
@@ -114,16 +114,12 @@ var TableSection = function (_a) {
|
|
|
114
114
|
var key = "".concat(rowIndex, "-").concat(cellIndex);
|
|
115
115
|
var isFirstCellInRow = cellIndex === 0;
|
|
116
116
|
var titleFromRow = getModalTitleFromRowHeader(row);
|
|
117
|
-
var titleFromColumnOrRow = getModalTitleFromColumnHeader(cellIndex) ||
|
|
118
|
-
getModalTitleFromRowHeader(row);
|
|
119
117
|
var cellReplacementData = (tableCellData.cellId &&
|
|
120
118
|
(cellReplacements === null || cellReplacements === void 0 ? void 0 : cellReplacements[tableCellData.cellId])) ||
|
|
121
119
|
{};
|
|
122
120
|
var cellProps = __assign(__assign(__assign({}, tableCellData), cellReplacementData), {
|
|
123
121
|
openModal: openModal,
|
|
124
|
-
modalTitle:
|
|
125
|
-
? titleFromRow
|
|
126
|
-
: titleFromColumnOrRow,
|
|
122
|
+
modalTitle: (tableCellData === null || tableCellData === void 0 ? void 0 : tableCellData.modalTitle) || titleFromRow,
|
|
127
123
|
align: isFirstCellInRow ? 'left' : 'center',
|
|
128
124
|
});
|
|
129
125
|
return (!hideColumns.includes(cellIndex) && (jsx(TableCell, __assign({ isBelowDesktop: isBelowDesktop, isFirstCellInRow: isFirstCellInRow }, cellProps, { imageComponent: imageComponent }), key)));
|
|
@@ -132,4 +128,4 @@ var TableSection = function (_a) {
|
|
|
132
128
|
};
|
|
133
129
|
|
|
134
130
|
export { TableSection as T, isBaseCell as i, useMediaQuery as u };
|
|
135
|
-
//# sourceMappingURL=TableSection-
|
|
131
|
+
//# sourceMappingURL=TableSection-a26ba0c5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableSection-a26ba0c5.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.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 { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n 'ABOVE_MOBILE',\n 'ABOVE_TABLET',\n 'ABOVE_DESKTOP',\n 'BELOW_MOBILE',\n 'BELOW_TABLET',\n 'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n if (typeof window === 'undefined') {\n return {\n initialValue: false,\n queryString: '',\n };\n }\n\n switch (breakpoint) {\n case 'BELOW_TABLET':\n return {\n initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(max-width: 45rem)',\n };\n case 'BELOW_DESKTOP':\n return {\n initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(max-width: 64rem)',\n };\n case 'ABOVE_MOBILE':\n return {\n initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(min-width: 34rem)',\n };\n case 'ABOVE_TABLET':\n return {\n initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(min-width: 45rem)',\n };\n case 'ABOVE_DESKTOP':\n return {\n initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(min-width: 64rem)',\n };\n case 'BELOW_MOBILE':\n default:\n return {\n initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(max-width: 34rem)',\n };\n }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(queryString);\n\n const updateMediaQuery = (e: MediaQueryListEvent) =>\n setMatchesBreakpoint(e.matches);\n\n mediaQuery.addEventListener('change', updateMediaQuery);\n\n return () => {\n mediaQuery.removeEventListener('change', updateMediaQuery);\n };\n }, [queryString]);\n\n return matchesBreakpoint;\n};\n","import 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 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 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 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 && (\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":"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"}
|
|
@@ -7,7 +7,7 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
|
|
|
7
7
|
import ChevronUpIcon from '../icon/icons/ChevronUp.js';
|
|
8
8
|
import { Card } from '../cards/card/index.js';
|
|
9
9
|
import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
10
|
-
import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-
|
|
10
|
+
import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-a26ba0c5.js';
|
|
11
11
|
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';
|
|
@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
|
|
|
35
35
|
import '../modal/regularModal/index.js';
|
|
36
36
|
import '../icon/icons/ChevronDown.js';
|
|
37
37
|
import '../icon/icons/ChevronUp.js';
|
|
38
|
-
import '../../TableSection-
|
|
38
|
+
import '../../TableSection-a26ba0c5.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
40
|
import './components/TableContents/Collapsible.js';
|
|
41
41
|
import '../../useTableNavigation-f929fbc9.js';
|
|
@@ -132,8 +132,15 @@ var initialData = [
|
|
|
132
132
|
{ text: '80%-100%' },
|
|
133
133
|
],
|
|
134
134
|
[
|
|
135
|
-
{ text: 'Operations',
|
|
136
|
-
|
|
135
|
+
{ text: 'Operations',
|
|
136
|
+
modalContent: 'Operations info',
|
|
137
|
+
modalTitle: 'Custom operations modal title'
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
checkmarkValue: true,
|
|
141
|
+
modalContent: 'Operations info column 2',
|
|
142
|
+
modalTitle: 'Custom operations modal title column 2'
|
|
143
|
+
},
|
|
137
144
|
{ checkmarkValue: false },
|
|
138
145
|
{ checkmarkValue: true },
|
|
139
146
|
],
|
|
@@ -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', 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={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 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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"}
|
|
@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
|
|
|
35
35
|
import '../modal/regularModal/index.js';
|
|
36
36
|
import '../icon/icons/ChevronDown.js';
|
|
37
37
|
import '../icon/icons/ChevronUp.js';
|
|
38
|
-
import '../../TableSection-
|
|
38
|
+
import '../../TableSection-a26ba0c5.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
40
|
import './components/TableContents/Collapsible.js';
|
|
41
41
|
import '../../useTableNavigation-f929fbc9.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
-
import { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
|
|
5
5
|
import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
|
|
6
6
|
import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
|
|
7
7
|
import { Card } from '../../../cards/card/index.js';
|
|
@@ -6,7 +6,7 @@ import 'react';
|
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
8
8
|
import 'react-dom/test-utils';
|
|
9
|
-
import '../../../../TableSection-
|
|
9
|
+
import '../../../../TableSection-a26ba0c5.js';
|
|
10
10
|
import '../../../../index-6ea95111.js';
|
|
11
11
|
import '../../../../style-inject.es-1f59c1d0.js';
|
|
12
12
|
import '../TableCell/TableCell.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import '../../../../index-6ea95111.js';
|
|
4
|
-
export { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
export { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
|
|
5
5
|
import '../TableCell/TableCell.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../../../../style-inject.es-1f59c1d0.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
|
|
4
|
-
import { T as TableSection } from '../../../../TableSection-
|
|
4
|
+
import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -31,7 +31,7 @@ export { a as Toaster, t as toast } from './index-4b19aafb.js';
|
|
|
31
31
|
export { Accordion } from './components/accordion/index.js';
|
|
32
32
|
export { Table } from './components/table/Table.js';
|
|
33
33
|
import { useCallback, useEffect } from 'react';
|
|
34
|
-
export { u as useMediaQuery } from './TableSection-
|
|
34
|
+
export { u as useMediaQuery } from './TableSection-a26ba0c5.js';
|
|
35
35
|
export { default as Svg1Icon } from './components/icon/icons/1.js';
|
|
36
36
|
export { default as Svg2Icon } from './components/icon/icons/2.js';
|
|
37
37
|
export { default as Svg3Icon } from './components/icon/icons/3.js';
|
package/package.json
CHANGED
|
@@ -92,8 +92,15 @@ const initialData: TableData = [
|
|
|
92
92
|
{ text: '80%-100%' },
|
|
93
93
|
],
|
|
94
94
|
[
|
|
95
|
-
{ text: 'Operations',
|
|
96
|
-
|
|
95
|
+
{ text: 'Operations',
|
|
96
|
+
modalContent: 'Operations info',
|
|
97
|
+
modalTitle: 'Custom operations modal title'
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
checkmarkValue: true,
|
|
101
|
+
modalContent: 'Operations info column 2',
|
|
102
|
+
modalTitle: 'Custom operations modal title column 2'
|
|
103
|
+
},
|
|
97
104
|
{ checkmarkValue: false },
|
|
98
105
|
{ checkmarkValue: true },
|
|
99
106
|
],
|
|
@@ -125,11 +125,7 @@ const TableSection = ({
|
|
|
125
125
|
{row.map((tableCellData, cellIndex) => {
|
|
126
126
|
const key = `${rowIndex}-${cellIndex}`;
|
|
127
127
|
const isFirstCellInRow = cellIndex === 0;
|
|
128
|
-
|
|
129
128
|
const titleFromRow = getModalTitleFromRowHeader(row);
|
|
130
|
-
const titleFromColumnOrRow =
|
|
131
|
-
getModalTitleFromColumnHeader(cellIndex) ||
|
|
132
|
-
getModalTitleFromRowHeader(row);
|
|
133
129
|
|
|
134
130
|
const cellReplacementData =
|
|
135
131
|
(tableCellData.cellId &&
|
|
@@ -141,9 +137,7 @@ const TableSection = ({
|
|
|
141
137
|
...cellReplacementData,
|
|
142
138
|
...{
|
|
143
139
|
openModal,
|
|
144
|
-
modalTitle:
|
|
145
|
-
? titleFromRow
|
|
146
|
-
: titleFromColumnOrRow,
|
|
140
|
+
modalTitle: tableCellData?.modalTitle || titleFromRow,
|
|
147
141
|
align: isFirstCellInRow ? 'left' : 'center',
|
|
148
142
|
},
|
|
149
143
|
} as TableCellData;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableSection-a6e85f15.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.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};\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 { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n 'ABOVE_MOBILE',\n 'ABOVE_TABLET',\n 'ABOVE_DESKTOP',\n 'BELOW_MOBILE',\n 'BELOW_TABLET',\n 'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n if (typeof window === 'undefined') {\n return {\n initialValue: false,\n queryString: '',\n };\n }\n\n switch (breakpoint) {\n case 'BELOW_TABLET':\n return {\n initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(max-width: 45rem)',\n };\n case 'BELOW_DESKTOP':\n return {\n initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(max-width: 64rem)',\n };\n case 'ABOVE_MOBILE':\n return {\n initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(min-width: 34rem)',\n };\n case 'ABOVE_TABLET':\n return {\n initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(min-width: 45rem)',\n };\n case 'ABOVE_DESKTOP':\n return {\n initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(min-width: 64rem)',\n };\n case 'BELOW_MOBILE':\n default:\n return {\n initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(max-width: 34rem)',\n };\n }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(queryString);\n\n const updateMediaQuery = (e: MediaQueryListEvent) =>\n setMatchesBreakpoint(e.matches);\n\n mediaQuery.addEventListener('change', updateMediaQuery);\n\n return () => {\n mediaQuery.removeEventListener('change', updateMediaQuery);\n };\n }, [queryString]);\n\n return matchesBreakpoint;\n};\n","import 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 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 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 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 && (\n <tr key={rowIndex} className={styles.tr}>\n {row.map((tableCellData, cellIndex) => {\n const key = `${rowIndex}-${cellIndex}`;\n const isFirstCellInRow = cellIndex === 0;\n\n const titleFromRow = getModalTitleFromRowHeader(row);\n const titleFromColumnOrRow =\n getModalTitleFromColumnHeader(cellIndex) ||\n 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: isFirstCellInRow\n ? titleFromRow\n : titleFromColumnOrRow,\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":"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"}
|