@popsure/dirty-swan 0.59.0-beta-5 → 0.59.0-beta-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.
- package/dist/cjs/index.js +1 -1
- package/dist/esm/{TableSection-4be9ca3a.js → TableSection-67319b10.js} +1 -1
- package/dist/esm/{TableSection-4be9ca3a.js.map → TableSection-67319b10.js.map} +1 -1
- package/dist/esm/components/cards/card/index.js +1 -1
- package/dist/esm/components/cards/card/index.stories.js +1 -1
- package/dist/esm/components/cards/card/index.stories.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/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/package.json +1 -1
- package/src/lib/components/cards/card/index.stories.tsx +2 -1
- package/src/lib/components/cards/card/style.module.scss +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -11655,7 +11655,7 @@ var FullScreenModal = function (_a) {
|
|
|
11655
11655
|
}, body: classNames$1(styles$s.body, classNames === null || classNames === void 0 ? void 0 : classNames.body) }) }, rest)));
|
|
11656
11656
|
};
|
|
11657
11657
|
|
|
11658
|
-
var css_248z$s = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n background-color:
|
|
11658
|
+
var css_248z$s = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n background-color: #f9f9fd;\n border-color: transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n border-color: #F2B873;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper__35C6V {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--default__NYcwG {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n}\n.style-module_button__P-UIa:active .style-module_wrapper__35C6V {\n border-color: #b8b8c0;\n box-shadow: inset 0 0 0 1px #b8b8c0;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n border-color: transparent;\n box-shadow: none;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n border-color: #F2B873;\n box-shadow: inset 0 0 0 1px #F2B873;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n border-color: #8883D8;\n box-shadow: inset 0 0 0 1px #8883D8;\n}\n\n.style-module_icon__15X1c {\n margin-right: 12px;\n color: #26262e;\n}\n.style-module_iconbalanced__Zb-hZ {\n margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n color: #26262e;\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n color: #696971;\n}";
|
|
11659
11659
|
var styles$r = {"border-strong-default":"style-module_border-strong-default__3_zF3","border-strong-hover":"style-module_border-strong-hover__2gkuG","border-strong-active":"style-module_border-strong-active__3BFbj","border-medium-default":"style-module_border-medium-default__21dIE","border-medium-hover":"style-module_border-medium-hover__Pq6pQ","border-medium-active":"style-module_border-medium-active__uLwlN","border-soft-default":"style-module_border-soft-default__398BS","border-soft-hover":"style-module_border-soft-hover__30OW0","border-soft-active":"style-module_border-soft-active__eUC5s","border-focus":"style-module_border-focus__28f29","wrapper":"style-module_wrapper__35C6V","wrapper--default":"style-module_wrapper--default__NYcwG","wrapper--defaultNoShadow":"style-module_wrapper--defaultNoShadow__2x-zI","wrapper--transparent":"style-module_wrapper--transparent__1M1sg","wrapper--outline":"style-module_wrapper--outline__3fBDi","wrapper--secondary":"style-module_wrapper--secondary__1l7bB","wrapper--primary":"style-module_wrapper--primary__Sulin","button":"style-module_button__P-UIa","icon":"style-module_icon__15X1c","iconbalanced":"style-module_iconbalanced__Zb-hZ","iconspacious":"style-module_iconspacious__3Ly0X","actionIcon":"style-module_actionIcon__3pnwR","actionIconbalanced":"style-module_actionIconbalanced__19jnn","actionIconspacious":"style-module_actionIconspacious__2LJN4","description":"style-module_description__ksrnP"};
|
|
11660
11660
|
styleInject(css_248z$s);
|
|
11661
11661
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSection-
|
|
1
|
+
{"version":3,"file":"TableSection-67319b10.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":"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"}
|
|
@@ -6,7 +6,7 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../../icon/IconWrapper/IconWrapper.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n background-color:
|
|
9
|
+
var css_248z = ".style-module_border-strong-default__3_zF3 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-strong-hover__2gkuG {\n border: 1px solid #919199;\n}\n\n.style-module_border-strong-active__3BFbj {\n border: 1px solid #26262e;\n}\n\n.style-module_border-medium-default__21dIE {\n border: 1px solid #e7e7ed;\n}\n\n.style-module_border-medium-hover__Pq6pQ {\n border: 1px solid #b8b8c0;\n}\n\n.style-module_border-medium-active__uLwlN {\n border: 1px solid #3f3f47;\n}\n\n.style-module_border-soft-default__398BS {\n border: 1px solid #f2f2f8;\n}\n\n.style-module_border-soft-hover__30OW0 {\n border: 1px solid #d2d2d9;\n}\n\n.style-module_border-soft-active__eUC5s {\n border: 1px solid #919199;\n}\n\n.style-module_border-focus__28f29 {\n border: 2px solid #26262e;\n}\n\n.style-module_wrapper__35C6V {\n background-color: #fff;\n border: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_wrapper--default__NYcwG {\n background-color: #fff;\n}\n.style-module_wrapper--defaultNoShadow__2x-zI {\n border: 1px solid #f2f2f8;\n}\n.style-module_wrapper--transparent__1M1sg {\n background-color: transparent;\n}\n.style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #d2d2d9;\n}\n.style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n}\n.style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n}\n\n.style-module_button__P-UIa {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n border-radius: 8px;\n border: 1px solid transparent;\n outline: 1px solid transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--default__NYcwG {\n border: 1px solid #d2d2d9;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--transparent__1M1sg {\n background-color: #f9f9fd;\n border-color: transparent;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--outline__3fBDi {\n background-color: #fff;\n border: 1px solid #26262e;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--secondary__1l7bB {\n background-color: #EEEEFE;\n border-color: #B8B4F3;\n}\n.style-module_button__P-UIa:hover .style-module_wrapper--primary__Sulin {\n background-color: #FEECD3;\n border-color: #F2B873;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper__35C6V {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--default__NYcwG {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n}\n.style-module_button__P-UIa:focus-visible .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n}\n.style-module_button__P-UIa:active .style-module_wrapper__35C6V {\n border-color: #b8b8c0;\n box-shadow: inset 0 0 0 1px #b8b8c0;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--outline__3fBDi {\n border-color: #26262e;\n box-shadow: inset 0 0 0 1px #26262e;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--transparent__1M1sg {\n background-color: #f2f2f8;\n border-color: transparent;\n box-shadow: none;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--primary__Sulin {\n border-color: #F2B873;\n box-shadow: inset 0 0 0 1px #F2B873;\n}\n.style-module_button__P-UIa:active .style-module_wrapper--secondary__1l7bB {\n border-color: #8883D8;\n box-shadow: inset 0 0 0 1px #8883D8;\n}\n\n.style-module_icon__15X1c {\n margin-right: 12px;\n color: #26262e;\n}\n.style-module_iconbalanced__Zb-hZ {\n margin-right: 16px;\n}\n.style-module_iconspacious__3Ly0X {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__3pnwR {\n color: #26262e;\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__19jnn {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__2LJN4 {\n margin-left: 24px;\n}\n\n.style-module_description__ksrnP {\n color: #696971;\n}";
|
|
10
10
|
var styles = {"border-strong-default":"style-module_border-strong-default__3_zF3","border-strong-hover":"style-module_border-strong-hover__2gkuG","border-strong-active":"style-module_border-strong-active__3BFbj","border-medium-default":"style-module_border-medium-default__21dIE","border-medium-hover":"style-module_border-medium-hover__Pq6pQ","border-medium-active":"style-module_border-medium-active__uLwlN","border-soft-default":"style-module_border-soft-default__398BS","border-soft-hover":"style-module_border-soft-hover__30OW0","border-soft-active":"style-module_border-soft-active__eUC5s","border-focus":"style-module_border-focus__28f29","wrapper":"style-module_wrapper__35C6V","wrapper--default":"style-module_wrapper--default__NYcwG","wrapper--defaultNoShadow":"style-module_wrapper--defaultNoShadow__2x-zI","wrapper--transparent":"style-module_wrapper--transparent__1M1sg","wrapper--outline":"style-module_wrapper--outline__3fBDi","wrapper--secondary":"style-module_wrapper--secondary__1l7bB","wrapper--primary":"style-module_wrapper--primary__Sulin","button":"style-module_button__P-UIa","icon":"style-module_icon__15X1c","iconbalanced":"style-module_iconbalanced__Zb-hZ","iconspacious":"style-module_iconspacious__3Ly0X","actionIcon":"style-module_actionIcon__3pnwR","actionIconbalanced":"style-module_actionIconbalanced__19jnn","actionIconspacious":"style-module_actionIconspacious__2LJN4","description":"style-module_description__ksrnP"};
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
@@ -98,7 +98,7 @@ var CardStory = function (_a) {
|
|
|
98
98
|
};
|
|
99
99
|
var CardVariants = function (_a) {
|
|
100
100
|
var description = _a.description, onClick = _a.onClick, title = _a.title;
|
|
101
|
-
return (jsxs("div", { className: 'd-flex fd-column gap24 p24
|
|
101
|
+
return (jsxs("div", { className: 'd-flex fd-column gap24 p24', children: [jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "default" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'default', dropShadow: false })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "transparent" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'transparent' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "outline" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'outline' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "secondary" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'secondary' })] }), jsxs("div", { children: [jsx("h4", { className: 'p-h4 mb16', children: "primary" }), jsx(Card, { description: description, icon: jsx(BasketballSportsIcon, { size: 24 }), onClick: onClick, title: title, variant: 'primary' })] })] }));
|
|
102
102
|
};
|
|
103
103
|
CardStory.storyName = "Card";
|
|
104
104
|
var CardAsOtherComponents = function () { return (jsxs("div", { className: 'd-flex fd-column gap16 p24 bg-neutral-100', children: [jsx("h3", { className: 'p-h3', children: "As an anchor:" }), jsx(Card, { as: "a", href: "https://feather-insurance.com", target: "_blank", title: "Card with an a tag", density: 'compact' }), jsx("h3", { className: 'p-h3', children: "As a nav:" }), jsx(Card, { as: "nav", title: "Card with a nav tag", density: 'compact' }), jsxs("p", { className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32', children: [jsx(InfoIcon, {}), "Inspect elements to see the different HTML tags being rendered."] })] })); };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/Card',\n component: Card,\n argTypes: {\n as: {\n control: 'text',\n description: 'Allow wrapper element type to be custom defined'\n },\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: 'text',\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n action: true,\n table: {\n category: \"Callbacks\",\n },\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: 'text',\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n verticalAlignment: {\n description: 'Vertical alignment of the card content',\n control: { type: 'select' },\n },\n },\n args: {\n density: 'balanced',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n verticalAlignment: 'center',\n }\n};\n\nexport const CardStory = ({ \n as,\n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n verticalAlignment,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardVariants = ({ \n description,\n onClick,\n title,\n}: CardProps) => (\n <div className='d-flex fd-column gap24 p24 bg-neutral-50'>\n <div>\n <h4 className='p-h4 mb16'>default</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='default'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>transparent</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='transparent'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>outline</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='outline'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>secondary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='secondary'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>primary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='primary'\n />\n </div>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='compact'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='compact'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"neutral-50\" size={32} />}\n classNames={{ \n wrapper: 'bg-neutral-800',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n as=\"a\"\n href=\"#\"\n onClick={console.log}\n >\n Full covxerage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/card/index.stories.tsx"],"sourcesContent":["import { Card, CardProps } from '.';\nimport { illustrations } from '../../../util/images';\nimport { Button } from '../../button';\nimport { Badge } from '../../badge';\nimport { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/Card',\n component: Card,\n argTypes: {\n as: {\n control: 'text',\n description: 'Allow wrapper element type to be custom defined'\n },\n density: {\n description: 'Spacing around the card'\n },\n label: {\n description: 'Content to be rendered as label'\n },\n title: {\n description: 'Content to be rendered as title'\n },\n titleVariant: {\n description: 'Variant that allows changing title sizing styles.'\n },\n description: {\n description: 'Content to be rendered as description'\n },\n descriptionVariant: {\n description: 'Variant that allows changing description sizing styles.'\n },\n icon: {\n description: 'ReactNode to be rendered on the left side of the card',\n },\n children: {\n control: 'text',\n description: 'Content that is displayed inside the card under the pre-defined props',\n },\n onClick: {\n action: true,\n table: {\n category: \"Callbacks\",\n },\n description: 'On click action to be triggered on card click.',\n },\n dropShadow: {\n description: 'Wether to display card with drop shadow styles or not.',\n },\n actionIcon: {\n control: 'text',\n description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',\n },\n showActionIcon: {\n description: 'Property that always displays action icon even if no onClick is set.',\n },\n verticalAlignment: {\n description: 'Vertical alignment of the card content',\n control: { type: 'select' },\n },\n },\n args: {\n density: 'balanced',\n description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',\n descriptionVariant: 'large',\n label: 'Label',\n title: 'Honest, simple insurance',\n titleVariant: 'large',\n icon: 'ABC',\n children: '',\n classNames: {\n wrapper: '',\n label: '',\n title: '',\n description: '',\n children: '',\n icon: ''\n },\n dropShadow: true,\n verticalAlignment: 'center',\n }\n};\n\nexport const CardStory = ({ \n as,\n actionIcon,\n showActionIcon,\n children,\n classNames,\n density,\n description,\n descriptionVariant,\n dropShadow,\n icon,\n label,\n onClick,\n title,\n titleVariant,\n verticalAlignment,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n as={as}\n classNames={classNames}\n description={description}\n descriptionVariant={descriptionVariant}\n density={density}\n dropShadow={dropShadow}\n icon={icon}\n label={label}\n title={title}\n titleVariant={titleVariant}\n onClick={onClick}\n actionIcon={actionIcon}\n showActionIcon={showActionIcon}\n verticalAlignment={verticalAlignment}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardVariants = ({ \n description,\n onClick,\n title,\n}: CardProps) => (\n <div className='d-flex fd-column gap24 p24'>\n <div>\n <h4 className='p-h4 mb16'>default</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='default'\n dropShadow={false}\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>transparent</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='transparent'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>outline</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='outline'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>secondary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='secondary'\n />\n </div>\n <div>\n <h4 className='p-h4 mb16'>primary</h4>\n <Card\n description={description}\n icon={<BasketballSportsIcon size={24} />}\n onClick={onClick}\n title={title}\n variant='primary'\n />\n </div>\n </div>\n);\n\nCardStory.storyName = \"Card\";\n\nexport const CardAsOtherComponents = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n \n <h3 className='p-h3'>As an anchor:</h3>\n <Card\n as=\"a\"\n href=\"https://feather-insurance.com\"\n target=\"_blank\"\n title=\"Card with an a tag\"\n density='compact'\n />\n\n <h3 className='p-h3'>As a nav:</h3>\n <Card\n as=\"nav\"\n title=\"Card with a nav tag\"\n density='compact'\n />\n\n <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n <InfoIcon />\n Inspect elements to see the different HTML tags being rendered.\n </p>\n </div>\n);\n\nexport const CardDensities = () => (\n <div className='d-flex fd-column gap16 p24 bg-neutral-100'>\n <Card\n title={'Card density: Compact'}\n density='compact'\n />\n <Card\n title={'Card density: Balanced'}\n density='balanced'\n />\n <Card\n title={'Card density: Spacious'}\n density='spacious'\n />\n </div>\n);\n\nexport const CardsWithIcons = ({ title }: CardProps) => (\n <div className='d-flex gap16 p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n />\n <Card\n icon={<MehIcon size={24} noMargin />}\n title={title}\n />\n </div>\n);\n\nexport const CardWithOnClickAction = ({ \n children,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n icon={\n <img\n alt=\"\"\n src={illustrations.aids}\n width={24}\n />\n }\n title={title}\n titleVariant={'medium'}\n onClick={() => {}}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardOverridesStyles = ({ \n children,\n label,\n title,\n}: CardProps) => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={label}\n title={title}\n titleVariant={'medium'}\n icon={<PlusCircleIcon color=\"neutral-50\" size={32} />}\n classNames={{ \n wrapper: 'bg-neutral-800',\n label: 'tc-white',\n title: 'tc-white'\n }}\n >\n {children}\n </Card>\n </div>\n);\n\nexport const CardsWithinCardsAndComplexLayout = () => (\n <div className='d-flex p24 bg-neutral-100'>\n <Card\n label={(\n <Badge size='small' variant='success'>\n Active\n </Badge>\n )}\n title={(\n <div className='d-flex jc-between ai-center w100'>\n Coverage overview\n\n <Button\n as=\"a\"\n href=\"#\"\n onClick={console.log}\n >\n Full covxerage details\n </Button>\n </div>\n )}\n >\n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Lost keys\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='compact'\n />\n <Card\n description=\"Broken glass\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='compact'\n />\n </div>\n \n <div className='d-flex gap16 mt16'>\n <Card\n description=\"Damage to property\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<CheckIcon color={'purple-600'} />}\n density='compact'\n />\n <Card\n description=\"Drones\"\n classNames={{ wrapper: 'bg-neutral-300' }}\n icon={<XIcon color={'purple-600'} />}\n density='compact'\n />\n </div>\n </Card>\n </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;IAMM,KAAK,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;SAC/D;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iCAAiC;SAC/C;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,mDAAmD;SACjE;QACD,WAAW,EAAE;YACX,WAAW,EAAE,uCAAuC;SACrD;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,yDAAyD;SACvE;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;SACrE;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uEAAuE;SACrF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;YACD,WAAW,EAAE,gDAAgD;SAC9D;QACD,UAAU,EAAE;YACV,WAAW,EAAE,wDAAwD;SACtE;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qIAAqI;SACnJ;QACD,cAAc,EAAE;YACd,WAAW,EAAE,sEAAsE;SACpF;QACD,iBAAiB,EAAE;YACjB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,WAAW,EAAE,6GAA6G;QAC1H,kBAAkB,EAAE,OAAO;QAC3B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,0BAA0B;QACjC,YAAY,EAAE,OAAO;QACrB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE;YACV,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;SACT;QACD,UAAU,EAAE,IAAI;QAChB,iBAAiB,EAAE,QAAQ;KAC5B;EACD;IAEW,SAAS,GAAG,UAAC,EAgBd;QAfV,EAAE,QAAA,EACF,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,kBAAkB,wBAAA,EAClB,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,iBAAiB,uBAAA;IACF,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,YAEnC,QAAQ,GACJ,GACH;AApBS,EAqBf;IAEW,YAAY,GAAG,UAAC,EAIjB;QAHV,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,KAAK,WAAA;IACU,QACfC,cAAK,SAAS,EAAC,4BAA4B,aACzCA,yBACED,YAAI,SAAS,EAAC,WAAW,wBAAa,EACtCA,IAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,IAAI,EAAEA,IAAC,oBAAoB,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,EACjB,UAAU,EAAE,KAAK,GACjB,IACE,EACNC,yBACED,YAAI,SAAS,EAAC,WAAW,4BAAiB,EAC1CA,IAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,IAAI,EAAEA,IAAC,oBAAoB,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,aAAa,GACrB,IACE,EACNC,yBACED,YAAI,SAAS,EAAC,WAAW,wBAAa,EACtCA,IAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,IAAI,EAAEA,IAAC,oBAAoB,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,GACjB,IACE,EACNC,yBACED,YAAI,SAAS,EAAC,WAAW,0BAAe,EACxCA,IAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,IAAI,EAAEA,IAAC,oBAAoB,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,WAAW,GACnB,IACE,EACNC,yBACED,YAAI,SAAS,EAAC,WAAW,wBAAa,EACtCA,IAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,IAAI,EAAEA,IAAC,oBAAoB,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,GACjB,IACE,IACF;AArDS,EAsDf;AAEF,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;IAEhB,qBAAqB,GAAG,cAAM,QACzCC,cAAK,SAAS,EAAC,2CAA2C,aAExDD,YAAI,SAAS,EAAC,MAAM,8BAAmB,EACvCA,IAAC,IAAI,IACH,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAC,SAAS,GACjB,EAEFA,YAAI,SAAS,EAAC,MAAM,0BAAe,EACnCA,IAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAC,SAAS,GACjB,EAEFC,YAAG,SAAS,EAAC,mDAAmD,aAC9DD,IAAC,QAAQ,KAAG,uEAEV,IACA,KACN;IAEW,aAAa,GAAG,cAAM,QACjCC,cAAK,SAAS,EAAC,2CAA2C,aACxDD,IAAC,IAAI,IACH,KAAK,EAAE,uBAAuB,EAC9B,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,GAClB,EACFA,IAAC,IAAI,IACH,KAAK,EAAE,wBAAwB,EAC/B,OAAO,EAAC,UAAU,GAClB,IACE,KACN;IAEW,cAAc,GAAG,UAAC,EAAoB;QAAlB,KAAK,WAAA;IAAkB,QACtDC,cAAK,SAAS,EAAC,iCAAiC,aAC9CD,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,GACT,EAEJ,KAAK,EAAE,KAAK,GACZ,EACFA,IAAC,IAAI,IACH,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG,EACpC,KAAK,EAAE,KAAK,GACZ,IACE;AAhBgD,EAiBtD;IAEW,qBAAqB,GAAG,UAAC,EAG1B;QAFV,QAAQ,cAAA,EACR,KAAK,WAAA;IACU,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,IAAI,EACFA,aACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,aAAa,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,GACT,EAEJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,OAAO,EAAE,eAAQ,YAEhB,QAAQ,GACJ,GACH;AAhBS,EAiBf;IAEW,mBAAmB,GAAG,UAAC,EAIxB;QAHV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA;IACU,QACfA,aAAK,SAAS,EAAC,2BAA2B,YACxCA,IAAC,IAAI,IACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,IAAI,EAAEA,IAAC,cAAc,IAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,EACrD,UAAU,EAAE;gBACV,OAAO,EAAE,gBAAgB;gBACzB,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,UAAU;aAClB,YAEA,QAAQ,GACJ,GACH;AAfS,EAgBf;IAEW,gCAAgC,GAAG,cAAM,QACpDA,aAAK,SAAS,EAAC,2BAA2B,YACxCC,KAAC,IAAI,IACH,KAAK,GACHD,IAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,uBAE7B,CACT,EACD,KAAK,GACHC,cAAK,SAAS,EAAC,kCAAkC,kCAG/CD,IAAC,MAAM,IACP,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,GAAG,EACN,OAAO,EAAE,OAAO,CAAC,GAAG,uCAGb,IACL,CACP,aAEDC,cAAK,SAAS,EAAC,mBAAmB,aAChCD,IAAC,IAAI,IACH,WAAW,EAAC,WAAW,EACvB,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,YAAY,GAAI,EACxC,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,WAAW,EAAC,cAAc,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,YAAY,GAAI,EACpC,OAAO,EAAC,SAAS,GACjB,IACE,EAENC,cAAK,SAAS,EAAC,mBAAmB,aAChCD,IAAC,IAAI,IACH,WAAW,EAAC,oBAAoB,EAChC,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,SAAS,IAAC,KAAK,EAAE,YAAY,GAAI,EACxC,OAAO,EAAC,SAAS,GACjB,EACFA,IAAC,IAAI,IACH,WAAW,EAAC,QAAQ,EACpB,UAAU,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,EACzC,IAAI,EAAEA,IAAC,KAAK,IAAC,KAAK,EAAE,YAAY,GAAI,EACpC,OAAO,EAAC,SAAS,GACjB,IACE,IACD,GACH;;;;;"}
|
|
@@ -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-
|
|
15
|
+
import { i as isBaseCell, T as TableSection } from '../../TableSection-67319b10.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';
|
|
@@ -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-
|
|
40
|
+
import '../../TableSection-67319b10.js';
|
|
41
41
|
import './components/TableContents/Collapsible.js';
|
|
42
42
|
import '../../useTableNavigation-f929fbc9.js';
|
|
43
43
|
import './components/TableControls/TableControls.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-
|
|
40
|
+
import '../../TableSection-67319b10.js';
|
|
41
41
|
import './components/TableContents/Collapsible.js';
|
|
42
42
|
import '../../useTableNavigation-f929fbc9.js';
|
|
43
43
|
import './components/TableControls/TableControls.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-67319b10.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-67319b10.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-67319b10.js';
|
|
5
5
|
import '../TableCell/TableCell.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../../../../useMediaQuery-1a3a2432.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-67319b10.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -466,7 +466,7 @@ import './components/table/components/IconRenderer/IconRenderer.js';
|
|
|
466
466
|
import './components/table/components/TableCell/CardCell/CardCell.js';
|
|
467
467
|
import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
|
|
468
468
|
import './components/table/components/TableContents/TableContents.js';
|
|
469
|
-
import './TableSection-
|
|
469
|
+
import './TableSection-67319b10.js';
|
|
470
470
|
import './components/table/components/TableContents/Collapsible.js';
|
|
471
471
|
import './useTableNavigation-f929fbc9.js';
|
|
472
472
|
import './components/table/components/TableControls/TableControls.js';
|
package/package.json
CHANGED
|
@@ -125,7 +125,7 @@ export const CardVariants = ({
|
|
|
125
125
|
onClick,
|
|
126
126
|
title,
|
|
127
127
|
}: CardProps) => (
|
|
128
|
-
<div className='d-flex fd-column gap24 p24
|
|
128
|
+
<div className='d-flex fd-column gap24 p24'>
|
|
129
129
|
<div>
|
|
130
130
|
<h4 className='p-h4 mb16'>default</h4>
|
|
131
131
|
<Card
|
|
@@ -134,6 +134,7 @@ export const CardVariants = ({
|
|
|
134
134
|
onClick={onClick}
|
|
135
135
|
title={title}
|
|
136
136
|
variant='default'
|
|
137
|
+
dropShadow={false}
|
|
137
138
|
/>
|
|
138
139
|
</div>
|
|
139
140
|
<div>
|