@popsure/dirty-swan 0.56.4 → 0.56.6
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.d.ts +1 -1
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/index.d.ts +2 -1
- package/dist/esm/{TableSection-24337bc7.js → TableSection-c6ec5395.js} +1 -1
- package/dist/esm/{TableSection-24337bc7.js.map → TableSection-c6ec5395.js.map} +1 -1
- package/dist/esm/components/table/Table.js +1 -1
- package/dist/esm/components/table/Table.stories.js +1 -1
- package/dist/esm/components/table/Table.test.js +1 -1
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js +1 -1
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js.map +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.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/index.d.ts +2 -1
- package/package.json +1 -1
- package/src/index.tsx +1 -0
- package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx +6 -1
- package/src/lib/index.tsx +2 -0
package/dist/cjs/lib/index.d.ts
CHANGED
|
@@ -29,7 +29,8 @@ import { Accordion, AccordionProps } from './components/accordion';
|
|
|
29
29
|
import { Table, TableData, TableProps } from './components/table/Table';
|
|
30
30
|
import { useEscapeKey } from './hooks/useEscapeKey';
|
|
31
31
|
import { useFocusWithin } from './hooks/useFocusWithin';
|
|
32
|
+
import { useMediaQuery } from './hooks/useMediaQuery';
|
|
32
33
|
export * from './components/icon';
|
|
33
|
-
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, };
|
|
34
|
+
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useMediaQuery, };
|
|
34
35
|
export type { AccordionProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
|
|
35
36
|
export type { DownloadStatus } from './models/download';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSection-24337bc7.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 switch (breakpoint) {\n case 'BELOW_MOBILE':\n default:\n return {\n initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(max-width: 34rem)',\n };\n case 'BELOW_TABLET':\n return {\n initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(max-width: 45rem)',\n };\n case 'BELOW_DESKTOP':\n return {\n initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(max-width: 64rem)',\n };\n case 'ABOVE_MOBILE':\n return {\n initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(min-width: 34rem)',\n };\n case 'ABOVE_TABLET':\n return {\n initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(min-width: 45rem)',\n };\n case 'ABOVE_DESKTOP':\n return {\n initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(min-width: 64rem)',\n };\n }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(queryString);\n\n const updateMediaQuery = (e: MediaQueryListEvent) =>\n setMatchesBreakpoint(e.matches);\n\n mediaQuery.addEventListener('change', updateMediaQuery);\n\n return () => {\n mediaQuery.removeEventListener('change', updateMediaQuery);\n };\n }, [queryString]);\n\n return matchesBreakpoint;\n};\n","import 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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"}
|
|
1
|
+
{"version":3,"file":"TableSection-c6ec5395.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 switch (breakpoint) {\n case 'BELOW_MOBILE':\n default:\n return {\n initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(max-width: 34rem)',\n };\n case 'BELOW_TABLET':\n return {\n initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(max-width: 45rem)',\n };\n case 'BELOW_DESKTOP':\n return {\n initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(max-width: 64rem)',\n };\n case 'ABOVE_MOBILE':\n return {\n initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n queryString: '(min-width: 34rem)',\n };\n case 'ABOVE_TABLET':\n return {\n initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n queryString: '(min-width: 45rem)',\n };\n case 'ABOVE_DESKTOP':\n return {\n initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n queryString: '(min-width: 64rem)',\n };\n }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(queryString);\n\n const updateMediaQuery = (e: MediaQueryListEvent) =>\n setMatchesBreakpoint(e.matches);\n\n mediaQuery.addEventListener('change', updateMediaQuery);\n\n return () => {\n mediaQuery.removeEventListener('change', updateMediaQuery);\n };\n }, [queryString]);\n\n return matchesBreakpoint;\n};\n","import 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":";;;;;;;;;;;IAsBa,UAAU,GAAG,UACxB,aAA4B;IAE5B,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B;;ACTO,IAAM,gBAAgB,GAAG,UAAC,UAAsB;IACrD,QAAQ,UAAU;QAChB,KAAK,cAAc,CAAC;QACpB;YACE,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;gBACtC,WAAW,EAAE,oBAAoB;aAClC,CAAC;QACJ,KAAK,eAAe;YAClB,OAAO;gBACL,YAAY,EAAE,MAAM,CAAC,UAAU,IAAI,IAAI;gBACvC,WAAW,EAAE,oBAAoB;aAClC,CAAC;KACL;AACH,CAAC,CAAC;IAEW,aAAa,GAAG,UAAC,UAAsB;IAC5C,IAAA,KAAgC,gBAAgB,CAAC,UAAU,CAAC,EAA1D,YAAY,kBAAA,EAAE,WAAW,iBAAiC,CAAC;IAE7D,IAAA,KAA4C,QAAQ,CAAC,YAAY,CAAC,EAAjE,iBAAiB,QAAA,EAAE,oBAAoB,QAA0B,CAAC;IAEzE,SAAS,CAAC;QACR,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAElD,IAAM,gBAAgB,GAAG,UAAC,CAAsB;YAC9C,OAAA,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC;SAAA,CAAC;QAElC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAExD,OAAO;YACL,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;SAC5D,CAAC;KACH,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,iBAAiB,CAAC;AAC3B;;IC9CM,YAAY,GAAG,UAAC,EAUF;QATlB,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,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,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,KACVA,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;4BAEzC,IAAM,YAAY,GAAG,0BAA0B,CAAC,GAAG,CAAC,CAAC;4BACrD,IAAM,oBAAoB,GACxB,6BAA6B,CAAC,SAAS,CAAC;gCACxC,0BAA0B,CAAC,GAAG,CAAC,CAAC;4BAElC,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,gBAAgB;sCACxB,YAAY;sCACZ,oBAAoB;gCACxB,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,IAtCK,QAAQ,CAuCZ,CACN;iBAAA,CACJ,GACK,IACF,EACR;AACJ;;;;"}
|
|
@@ -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-c6ec5395.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-c6ec5395.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
40
|
import './components/TableContents/Collapsible.js';
|
|
41
41
|
import '../../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-c6ec5395.js';
|
|
39
39
|
import './components/TableContents/TableContents.js';
|
|
40
40
|
import './components/TableContents/Collapsible.js';
|
|
41
41
|
import '../../useTableNavigation-f929fbc9.js';
|
|
@@ -48,7 +48,7 @@ var BaseCell = function (_a) {
|
|
|
48
48
|
'jc-center': align === 'center',
|
|
49
49
|
}), children: jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
|
|
50
50
|
_b[styles.maxWidth] = modalContent && align === 'center',
|
|
51
|
-
_b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'primary-500' : 'grey-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: "p-p d-inline ml8
|
|
51
|
+
_b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'primary-500' : 'grey-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "primary-500" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "grey-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-primary-500", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsx("h2", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
|
|
52
52
|
return openModal({
|
|
53
53
|
title: modalTitle,
|
|
54
54
|
body: modalContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CheckThickIcon,\n StarFilledIcon,\n XIcon,\n ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n '30%': 1,\n '50%': 2,\n '70%': 3,\n '75%': 4,\n '80%': 4,\n '90%': 4,\n '75%-90%': 4,\n '75%-100%': 4,\n '80%-100%': 4,\n '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n align?: Alignment;\n checkmarkValue?: boolean;\n description?: ReactNode;\n fontVariant?: FontVariant;\n hideProgressBar?: boolean;\n modalTitle?: ReactNode;\n modalContent?: ReactNode;\n openModal?: ModalFunction;\n text?: ReactNode;\n rating?: {\n value: number;\n type: 'zap' | 'star';\n };\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const BaseCell = ({\n align = 'center',\n checkmarkValue,\n description = '',\n fontVariant = 'NORMAL',\n hideProgressBar = false,\n modalTitle = '',\n modalContent = '',\n openModal,\n rating,\n text = '',\n className,\n}: BaseCellProps) => {\n const alignClassName = {\n center: 'ta-center jc-center ai-center',\n left: 'ta-left jc-start',\n right: 'ta-right jc-end ai-end',\n }[align];\n\n const validRatingValues: number[] = [1, 2, 3];\n const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n const progressBarValue =\n !hideProgressBar && typeof text === 'string'\n ? progressLookup[text]\n : undefined;\n\n return (\n <div\n className={classNames(\n className,\n 'd-flex gap8 ai-center', {\n 'jc-center': align === 'center',\n })}\n >\n <div\n className={classNames('d-flex fd-column', alignClassName, {\n [styles.maxWidth]: modalContent && align === 'center',\n })}\n >\n {progressBarValue !== undefined && (\n <MiniProgressBar nFilledBars={progressBarValue} />\n )}\n\n <div className=\"d-flex ai-center\">\n {rating?.value && (\n <span\n data-testid=\"table-cell-rating\"\n title={`${rating?.value} out of 3`}\n >\n {validRatingValues.map((value) => (\n <SelectedIcon\n aria-hidden=\"true\"\n key={value}\n color={value <= rating?.value ? 'primary-500' : 'grey-400'}\n className={styles.icon}\n size={rating?.type === 'zap' ? 16 : 14}\n />\n ))}\n </span>\n )}\n\n {checkmarkValue !== undefined && (\n <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n {checkmarkValue ? (\n <CheckThickIcon\n noMargin\n data-testid=\"table-cell-boolean-yes\"\n size={24}\n aria-hidden\n color=\"primary-500\"\n />\n ) : (\n <XIcon\n noMargin\n data-testid=\"table-cell-boolean-no\"\n size={24}\n aria-hidden\n color=\"grey-400\"\n />\n )}\n </span>\n )}\n\n <div className=\"d-inline\">\n {text && fontVariant === 'NORMAL' && (\n <div className
|
|
1
|
+
{"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CheckThickIcon,\n StarFilledIcon,\n XIcon,\n ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n '30%': 1,\n '50%': 2,\n '70%': 3,\n '75%': 4,\n '80%': 4,\n '90%': 4,\n '75%-90%': 4,\n '75%-100%': 4,\n '80%-100%': 4,\n '100%': 5,\n};\n\nexport type Alignment = 'center' | 'left' | 'right';\n\nexport type BaseCellProps = {\n align?: Alignment;\n checkmarkValue?: boolean;\n description?: ReactNode;\n fontVariant?: FontVariant;\n hideProgressBar?: boolean;\n modalTitle?: ReactNode;\n modalContent?: ReactNode;\n openModal?: ModalFunction;\n text?: ReactNode;\n rating?: {\n value: number;\n type: 'zap' | 'star';\n };\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const BaseCell = ({\n align = 'center',\n checkmarkValue,\n description = '',\n fontVariant = 'NORMAL',\n hideProgressBar = false,\n modalTitle = '',\n modalContent = '',\n openModal,\n rating,\n text = '',\n className,\n}: BaseCellProps) => {\n const alignClassName = {\n center: 'ta-center jc-center ai-center',\n left: 'ta-left jc-start',\n right: 'ta-right jc-end ai-end',\n }[align];\n\n const validRatingValues: number[] = [1, 2, 3];\n const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n const progressBarValue =\n !hideProgressBar && typeof text === 'string'\n ? progressLookup[text]\n : undefined;\n\n return (\n <div\n className={classNames(\n className,\n 'd-flex gap8 ai-center', {\n 'jc-center': align === 'center',\n })}\n >\n <div\n className={classNames('d-flex fd-column', alignClassName, {\n [styles.maxWidth]: modalContent && align === 'center',\n })}\n >\n {progressBarValue !== undefined && (\n <MiniProgressBar nFilledBars={progressBarValue} />\n )}\n\n <div className=\"d-flex ai-center\">\n {rating?.value && (\n <span\n data-testid=\"table-cell-rating\"\n title={`${rating?.value} out of 3`}\n >\n {validRatingValues.map((value) => (\n <SelectedIcon\n aria-hidden=\"true\"\n key={value}\n color={value <= rating?.value ? 'primary-500' : 'grey-400'}\n className={styles.icon}\n size={rating?.type === 'zap' ? 16 : 14}\n />\n ))}\n </span>\n )}\n\n {checkmarkValue !== undefined && (\n <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n {checkmarkValue ? (\n <CheckThickIcon\n noMargin\n data-testid=\"table-cell-boolean-yes\"\n size={24}\n aria-hidden\n color=\"primary-500\"\n />\n ) : (\n <XIcon\n noMargin\n data-testid=\"table-cell-boolean-no\"\n size={24}\n aria-hidden\n color=\"grey-400\"\n />\n )}\n </span>\n )}\n\n <div className=\"d-inline\">\n {text && fontVariant === 'NORMAL' && (\n <div className={classNames(\n \"p-p d-inline\",\n { 'ml8': align !== 'left' }\n )}\n data-testid=\"table-cell-text\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === 'PRICE' && (\n <div\n className=\"p-h1 p--serif tc-primary-500\"\n data-testid=\"table-cell-content\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === 'BIG_WITH_UNDERLINE' && (\n <h2\n aria-hidden\n className={classNames(\n 'tc-grey-800 p-h2 p--serif',\n styles.bigWithUnderline\n )}\n >\n {text}\n </h2>\n )}\n\n {modalContent && openModal && (\n <span className=\"ml8\">\n <TableInfoButton\n onClick={() =>\n openModal({\n title: modalTitle,\n body: modalContent,\n })\n }\n />\n </span>\n )}\n </div>\n </div>\n\n {description && (\n <div\n className={classNames(\n styles.description,\n 'd-flex p-p--small tc-grey-500',\n alignClassName\n )}\n >\n {description}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -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-c6ec5395.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-c6ec5395.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-c6ec5395.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-c6ec5395.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, } from './lib';
|
|
1
|
+
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, CardButton, Card, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useMediaQuery, } from './lib';
|
|
2
2
|
export * from './lib/components/icon';
|
|
3
3
|
export type { AccordionProps, DownloadStatus, InformationBoxProps, InputProps, IllustrationKeys, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, } from './lib';
|
package/dist/esm/index.js
CHANGED
|
@@ -31,6 +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-c6ec5395.js';
|
|
34
35
|
export { default as Svg1Icon } from './components/icon/icons/1.js';
|
|
35
36
|
export { default as Svg2Icon } from './components/icon/icons/2.js';
|
|
36
37
|
export { default as Svg3Icon } from './components/icon/icons/3.js';
|
|
@@ -447,7 +448,6 @@ import './components/table/components/TableCell/CTACell/CTACell.js';
|
|
|
447
448
|
import './components/table/components/IconRenderer/IconRenderer.js';
|
|
448
449
|
import './components/table/components/TableCell/CardCell/CardCell.js';
|
|
449
450
|
import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
|
|
450
|
-
import './TableSection-24337bc7.js';
|
|
451
451
|
import './components/table/components/TableContents/TableContents.js';
|
|
452
452
|
import './components/table/components/TableContents/Collapsible.js';
|
|
453
453
|
import './useTableNavigation-f929fbc9.js';
|
package/dist/esm/lib/index.d.ts
CHANGED
|
@@ -29,7 +29,8 @@ import { Accordion, AccordionProps } from './components/accordion';
|
|
|
29
29
|
import { Table, TableData, TableProps } from './components/table/Table';
|
|
30
30
|
import { useEscapeKey } from './hooks/useEscapeKey';
|
|
31
31
|
import { useFocusWithin } from './hooks/useFocusWithin';
|
|
32
|
+
import { useMediaQuery } from './hooks/useMediaQuery';
|
|
32
33
|
export * from './components/icon';
|
|
33
|
-
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, };
|
|
34
|
+
export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useMediaQuery, };
|
|
34
35
|
export type { AccordionProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
|
|
35
36
|
export type { DownloadStatus } from './models/download';
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
|
@@ -133,7 +133,12 @@ export const BaseCell = ({
|
|
|
133
133
|
|
|
134
134
|
<div className="d-inline">
|
|
135
135
|
{text && fontVariant === 'NORMAL' && (
|
|
136
|
-
<div className=
|
|
136
|
+
<div className={classNames(
|
|
137
|
+
"p-p d-inline",
|
|
138
|
+
{ 'ml8': align !== 'left' }
|
|
139
|
+
)}
|
|
140
|
+
data-testid="table-cell-text"
|
|
141
|
+
>
|
|
137
142
|
{text}
|
|
138
143
|
</div>
|
|
139
144
|
)}
|
package/src/lib/index.tsx
CHANGED
|
@@ -51,6 +51,7 @@ import { Accordion, AccordionProps } from './components/accordion';
|
|
|
51
51
|
import { Table, TableData, TableProps } from './components/table/Table';
|
|
52
52
|
import { useEscapeKey } from './hooks/useEscapeKey';
|
|
53
53
|
import { useFocusWithin } from './hooks/useFocusWithin';
|
|
54
|
+
import { useMediaQuery } from './hooks/useMediaQuery';
|
|
54
55
|
|
|
55
56
|
export * from './components/icon';
|
|
56
57
|
|
|
@@ -96,6 +97,7 @@ export {
|
|
|
96
97
|
toast,
|
|
97
98
|
useEscapeKey,
|
|
98
99
|
useFocusWithin,
|
|
100
|
+
useMediaQuery,
|
|
99
101
|
};
|
|
100
102
|
|
|
101
103
|
export type {
|