@popsure/dirty-swan 0.54.2 → 0.54.4
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 +355 -262
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/table/components/TableCell/BaseCell/BaseCell.d.ts +17 -0
- package/dist/cjs/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.d.ts +22 -0
- package/dist/cjs/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.d.ts +3 -0
- package/dist/cjs/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.d.ts +25 -0
- package/dist/cjs/lib/components/table/components/TableCell/ButtonCell/ButtonCell.d.ts +9 -0
- package/dist/cjs/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.d.ts +17 -0
- package/dist/cjs/lib/components/table/components/TableCell/CTACell/CTACell.d.ts +10 -0
- package/dist/cjs/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts +18 -0
- package/dist/cjs/lib/components/table/components/TableCell/TableCell.d.ts +5 -17
- package/dist/cjs/lib/components/table/types.d.ts +19 -2
- package/dist/cjs/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts +1 -2
- package/dist/esm/TableSection-f6d0028e.js +80 -0
- package/dist/esm/TableSection-f6d0028e.js.map +1 -0
- package/dist/esm/components/cards/card/index.stories.js +2 -2
- package/dist/esm/components/cards/card/index.stories.js.map +1 -1
- package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js +2 -2
- package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js.map +1 -1
- package/dist/esm/components/comparisonTable/index.js +3 -1526
- package/dist/esm/components/comparisonTable/index.js.map +1 -1
- package/dist/esm/components/comparisonTable/index.stories.js +1 -0
- package/dist/esm/components/comparisonTable/index.stories.js.map +1 -1
- package/dist/esm/components/icon/icons/Info.js +2 -2
- package/dist/esm/components/icon/icons/Info.js.map +1 -1
- package/dist/esm/components/icon/icons.stories.js +1 -1
- package/dist/esm/components/icon/index.stories.js +1 -1
- package/dist/esm/components/table/Table.js +22 -13
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.stories.js +100 -32
- package/dist/esm/components/table/Table.stories.js.map +1 -1
- package/dist/esm/components/table/Table.test.js +15 -12
- package/dist/esm/components/table/Table.test.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js +50 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.stories.js +43 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.stories.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js +15 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.js +31 -0
- package/dist/esm/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js +23 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.stories.js +28 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.stories.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js +21 -0
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.stories.js +26 -0
- package/dist/esm/components/table/components/TableCell/CTACell/CTACell.stories.js.map +1 -0
- package/dist/esm/components/table/components/TableCell/TableCell.js +24 -20
- package/dist/esm/components/table/components/TableCell/TableCell.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/TableCell.test.js +26 -14
- package/dist/esm/components/table/components/TableCell/TableCell.test.js.map +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.js +11 -3
- package/dist/esm/components/table/components/TableContents/TableContents.js.map +1 -1
- package/dist/esm/components/table/components/TableContents/TableContents.test.js +14 -7
- package/dist/esm/components/table/components/TableContents/TableContents.test.js.map +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.js +17 -53
- package/dist/esm/components/table/components/TableSection/TableSection.js.map +1 -1
- package/dist/esm/components/table/components/TableSection/TableSection.test.js +12 -5
- package/dist/esm/components/table/components/TableSection/TableSection.test.js.map +1 -1
- package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js +1 -5
- package/dist/esm/components/table/utils/useTableNavigation/useTableNavigation.test.js.map +1 -1
- package/dist/esm/index-3d286178.js +1529 -0
- package/dist/esm/index-3d286178.js.map +1 -0
- package/dist/esm/{index-0bb5a2ee.js → index-7506ae25.js} +3 -3
- package/dist/esm/{index-0bb5a2ee.js.map → index-7506ae25.js.map} +1 -1
- package/dist/esm/index.js +7 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lib/components/table/components/TableCell/BaseCell/BaseCell.d.ts +17 -0
- package/dist/esm/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.d.ts +22 -0
- package/dist/esm/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.d.ts +3 -0
- package/dist/esm/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.d.ts +25 -0
- package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.d.ts +9 -0
- package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.d.ts +17 -0
- package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.d.ts +10 -0
- package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts +18 -0
- package/dist/esm/lib/components/table/components/TableCell/TableCell.d.ts +5 -17
- package/dist/esm/lib/components/table/types.d.ts +19 -2
- package/dist/esm/lib/components/table/utils/useTableNavigation/useTableNavigation.d.ts +1 -2
- package/dist/esm/{useTableNavigation-8e50b121.js → useTableNavigation-2899712c.js} +12 -16
- package/dist/esm/useTableNavigation-2899712c.js.map +1 -0
- package/package.json +1 -1
- package/src/lib/components/table/Table.stories.tsx +87 -25
- package/src/lib/components/table/Table.test.tsx +3 -6
- package/src/lib/components/table/Table.tsx +11 -9
- package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.module.scss +36 -0
- package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.tsx +45 -0
- package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx +158 -0
- package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.module.scss +44 -0
- package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.tsx +29 -0
- package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.tsx +35 -0
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss +43 -0
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.tsx +65 -0
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx +40 -0
- package/src/lib/components/table/components/TableCell/CTACell/CTACell.module.scss +3 -0
- package/src/lib/components/table/components/TableCell/CTACell/CTACell.stories.tsx +37 -0
- package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx +42 -0
- package/src/lib/components/table/components/TableCell/TableCell.module.scss +0 -43
- package/src/lib/components/table/components/TableCell/TableCell.test.tsx +26 -13
- package/src/lib/components/table/components/TableCell/TableCell.tsx +20 -122
- package/src/lib/components/table/components/TableContents/TableContents.test.tsx +6 -6
- package/src/lib/components/table/components/TableSection/TableSection.test.tsx +5 -5
- package/src/lib/components/table/components/TableSection/TableSection.tsx +67 -41
- package/src/lib/components/table/types.ts +16 -2
- package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.test.tsx +0 -4
- package/src/lib/components/table/utils/useTableNavigation/useTableNavigation.ts +13 -20
- package/dist/esm/useTableNavigation-8e50b121.js.map +0 -1
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { c as classNames } from '../../../../../index-6ea95111.js';
|
|
3
|
+
import { s as styleInject } from '../../../../../style-inject.es-1f59c1d0.js';
|
|
4
|
+
import { Button } from '../../../../button/index.js';
|
|
5
|
+
import '../../../../../tslib.es6-a39f91fc.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
|
|
8
|
+
var css_248z = ".ButtonCell-module_buttonCell__x4NNi {\n color: #26262e;\n border: 1px solid #d2d2d8;\n transition: all 0.3s ease-in-out;\n}\n@media (max-width: 34rem) {\n .ButtonCell-module_buttonCell__x4NNi {\n max-width: calc(100% - 96px);\n }\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled {\n border: none;\n background-color: #f5f6fb;\n color: #26262e;\n opacity: 1;\n cursor: default;\n}\n.ButtonCell-module_buttonCell__x4NNi:disabled:hover {\n background-color: #f5f6fb;\n}\n@media (max-width: 34rem) {\n .ButtonCell-module_buttonCell__x4NNi {\n pointer-events: none;\n }\n}\n\n.ButtonCell-module_withoutPrice__2rpe9 {\n height: 64px;\n}\n\n.ButtonCell-module_withPrice__3bd_t {\n height: 75px;\n}\n\n.ButtonCell-module_selected__22pF_ {\n transition: all 0.3 ease-in-out;\n border: 2px solid #8e8cee;\n background-color: #f7f7ff;\n}";
|
|
9
|
+
var styles = {"buttonCell":"ButtonCell-module_buttonCell__x4NNi","withoutPrice":"ButtonCell-module_withoutPrice__2rpe9","withPrice":"ButtonCell-module_withPrice__3bd_t","selected":"ButtonCell-module_selected__22pF_"};
|
|
10
|
+
styleInject(css_248z);
|
|
11
|
+
|
|
12
|
+
var ButtonCell = function (_a) {
|
|
13
|
+
var _b;
|
|
14
|
+
var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled;
|
|
15
|
+
return (jsx("div", { className: "w100 d-flex fd-column ai-center jc-center gap8", children: jsxs(Button, { className: classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, (_b = {},
|
|
16
|
+
_b[styles.selected] = isSelected,
|
|
17
|
+
_b[styles.withoutPrice] = !price,
|
|
18
|
+
_b[styles.withPrice] = !!price,
|
|
19
|
+
_b)), variant: "filledWhite", type: "submit", onClick: onClick, disabled: disabled, children: [buttonCaption, price && jsx("span", { className: "p-p tc-purple-500", children: price })] }) }));
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { ButtonCell };
|
|
23
|
+
//# sourceMappingURL=ButtonCell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ButtonCell.module.scss';\nimport { Button } from '../../../../button';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n buttonCaption: ReactNode;\n disabled?: boolean;\n isSelected?: boolean;\n onClick: () => void;\n price?: ReactNode;\n};\n\nexport const ButtonCell = ({\n isSelected,\n onClick,\n buttonCaption,\n price,\n disabled,\n}: ButtonCellProps) => {\n return (\n <div className=\"w100 d-flex fd-column ai-center jc-center gap8\">\n <Button\n className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {\n [styles.selected]: isSelected,\n [styles.withoutPrice]: !price,\n [styles.withPrice]: !!price,\n })}\n variant=\"filledWhite\"\n type=\"submit\"\n onClick={onClick}\n disabled={disabled}\n >\n {buttonCaption}\n {price && <span className=\"p-p tc-purple-500\">{price}</span>}\n </Button>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;IAca,UAAU,GAAG,UAAC,EAMT;;QALhB,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,QAAQ,cAAA;IAER,QACEA,aAAK,SAAS,EAAC,gDAAgD,YAC7DC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,MAAM,CAAC,UAAU;gBACnE,GAAC,MAAM,CAAC,QAAQ,IAAG,UAAU;gBAC7B,GAAC,MAAM,CAAC,YAAY,IAAG,CAAC,KAAK;gBAC7B,GAAC,MAAM,CAAC,SAAS,IAAG,CAAC,CAAC,KAAK;oBAC3B,EACF,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAEjB,aAAa,EACb,KAAK,IAAID,cAAM,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAQ,IACrD,GACL,EACN;AACJ;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonCell } from './ButtonCell.js';
|
|
3
|
+
import '../../../../../index-6ea95111.js';
|
|
4
|
+
import '../../../../../style-inject.es-1f59c1d0.js';
|
|
5
|
+
import '../../../../button/index.js';
|
|
6
|
+
import '../../../../../tslib.es6-a39f91fc.js';
|
|
7
|
+
import 'react';
|
|
8
|
+
|
|
9
|
+
var story = {
|
|
10
|
+
title: 'JSX/Table/Cells',
|
|
11
|
+
component: ButtonCell,
|
|
12
|
+
argTypes: {},
|
|
13
|
+
args: {
|
|
14
|
+
buttonCaption: 'Premium',
|
|
15
|
+
price: '€277/mo',
|
|
16
|
+
isSelected: false,
|
|
17
|
+
disabled: false,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
var ButtonCellStory = function (_a) {
|
|
21
|
+
var isSelected = _a.isSelected, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled;
|
|
22
|
+
return (jsxs("div", { className: "p48 d-flex fd-column gap16 bg-white", children: [jsx(ButtonCell, { buttonCaption: buttonCaption, price: price, isSelected: isSelected, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { buttonCaption: buttonCaption, price: price, isSelected: true, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { buttonCaption: buttonCaption, price: price, disabled: true, onClick: function () { } }), jsx(ButtonCell, { buttonCaption: buttonCaption, isSelected: isSelected, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { buttonCaption: buttonCaption, isSelected: true, disabled: disabled, onClick: function () { } }), jsx(ButtonCell, { buttonCaption: buttonCaption, disabled: true, onClick: function () { } })] }));
|
|
23
|
+
};
|
|
24
|
+
ButtonCellStory.storyName = 'ButtonCell';
|
|
25
|
+
|
|
26
|
+
export default story;
|
|
27
|
+
export { ButtonCellStory };
|
|
28
|
+
//# sourceMappingURL=ButtonCell.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonCell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.tsx"],"sourcesContent":["import { ButtonCell } from './ButtonCell';\n\nconst story = {\n title: 'JSX/Table/Cells',\n component: ButtonCell,\n argTypes: {},\n args: {\n buttonCaption: 'Premium',\n price: '€277/mo',\n isSelected: false,\n disabled: false,\n },\n};\n\nexport const ButtonCellStory = ({\n isSelected,\n buttonCaption,\n price,\n disabled,\n}: React.ComponentProps<typeof ButtonCell>) => (\n <div className=\"p48 d-flex fd-column gap16 bg-white\">\n <ButtonCell\n buttonCaption={buttonCaption}\n price={price}\n isSelected={isSelected}\n disabled={disabled}\n onClick={() => {}}\n />\n\n <ButtonCell\n buttonCaption={buttonCaption}\n price={price}\n isSelected\n disabled={disabled}\n onClick={() => {}}\n />\n\n <ButtonCell\n buttonCaption={buttonCaption}\n price={price}\n disabled\n onClick={() => {}}\n />\n\n <ButtonCell\n buttonCaption={buttonCaption}\n isSelected={isSelected}\n disabled={disabled}\n onClick={() => {}}\n />\n\n <ButtonCell\n buttonCaption={buttonCaption}\n isSelected\n disabled={disabled}\n onClick={() => {}}\n />\n\n <ButtonCell buttonCaption={buttonCaption} disabled onClick={() => {}} />\n </div>\n);\n\nButtonCellStory.storyName = 'ButtonCell';\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,aAAa,EAAE,SAAS;QACxB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,KAAK;KAChB;EACD;IAEW,eAAe,GAAG,UAAC,EAKU;QAJxC,UAAU,gBAAA,EACV,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,QAAQ,cAAA;IACqC,QAC7CA,cAAK,SAAS,EAAC,qCAAqC,aAClDC,IAAC,UAAU,IACT,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,UAAU,QACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IACT,aAAa,EAAE,aAAa,EAC5B,UAAU,QACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,eAAQ,GACjB,EAEFA,IAAC,UAAU,IAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,QAAC,OAAO,EAAE,eAAQ,GAAI,IACpE;AAxCuC,EAyC7C;AAEF,eAAe,CAAC,SAAS,GAAG,YAAY;;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { c as classNames } from '../../../../../index-6ea95111.js';
|
|
3
|
+
import { s as styleInject } from '../../../../../style-inject.es-1f59c1d0.js';
|
|
4
|
+
|
|
5
|
+
var css_248z = ".CTACell-module_narrow__1EPPT {\n height: 40px;\n}";
|
|
6
|
+
var styles = {"narrow":"CTACell-module_narrow__1EPPT"};
|
|
7
|
+
styleInject(css_248z);
|
|
8
|
+
|
|
9
|
+
var CTACell = function (_a) {
|
|
10
|
+
var _b;
|
|
11
|
+
var title = _a.title, price = _a.price, grey = _a.grey, narrow = _a.narrow, href = _a.href, buttonCaption = _a.buttonCaption;
|
|
12
|
+
return (jsxs("div", { className: "wmn3 ta-center", children: [jsxs("p", { className: "p-h3", children: [title, price && jsxs("span", { className: "tc-purple-500", children: [" ", price] })] }), jsx("a", { className: classNames('mt16', (_b = {
|
|
13
|
+
'p-btn--primary': !grey,
|
|
14
|
+
'p-btn--secondary-grey': grey
|
|
15
|
+
},
|
|
16
|
+
_b[styles.narrow] = narrow,
|
|
17
|
+
_b)), href: href, target: "_blank", rel: "noopener noreferrer", children: buttonCaption })] }));
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { CTACell };
|
|
21
|
+
//# sourceMappingURL=CTACell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nexport type CTACellProps = {\n title: ReactNode;\n price?: ReactNode;\n buttonCaption?: ReactNode;\n grey?: boolean;\n narrow?: boolean;\n href: string;\n};\nimport styles from './CTACell.module.scss';\n\nexport const CTACell = ({\n title,\n price,\n grey,\n narrow,\n href,\n buttonCaption,\n}: CTACellProps) => {\n return (\n <div className=\"wmn3 ta-center\">\n <p className=\"p-h3\">\n {title}\n {price && <span className=\"tc-purple-500\"> {price}</span>}\n </p>\n <a\n className={classNames('mt16', {\n 'p-btn--primary': !grey,\n 'p-btn--secondary-grey': grey,\n [styles.narrow]: narrow,\n })}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {buttonCaption}\n </a>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;IAaa,OAAO,GAAG,UAAC,EAOT;;QANb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA;IAEb,QACEA,cAAK,SAAS,EAAC,gBAAgB,aAC7BA,YAAG,SAAS,EAAC,MAAM,aAChB,KAAK,EACL,KAAK,IAAIA,eAAM,SAAS,EAAC,eAAe,kBAAG,KAAK,IAAQ,IACvD,EACJC,WACE,SAAS,EAAE,UAAU,CAAC,MAAM;wBAC1B,gBAAgB,EAAE,CAAC,IAAI;wBACvB,uBAAuB,EAAE,IAAI;;oBAC7B,GAAC,MAAM,CAAC,MAAM,IAAG,MAAM;wBACvB,EACF,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YAExB,aAAa,GACZ,IACA,EACN;AACJ;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { CTACell } from './CTACell.js';
|
|
3
|
+
import '../../../../../index-6ea95111.js';
|
|
4
|
+
import '../../../../../style-inject.es-1f59c1d0.js';
|
|
5
|
+
|
|
6
|
+
var story = {
|
|
7
|
+
title: 'JSX/Table/Cells',
|
|
8
|
+
component: CTACell,
|
|
9
|
+
argTypes: {},
|
|
10
|
+
args: {
|
|
11
|
+
title: 'Premium',
|
|
12
|
+
price: '€277',
|
|
13
|
+
buttonCaption: 'Get covered',
|
|
14
|
+
grey: false,
|
|
15
|
+
narrow: false,
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
var CTACellStory = function (_a) {
|
|
19
|
+
var title = _a.title, price = _a.price, buttonCaption = _a.buttonCaption, grey = _a.grey, narrow = _a.narrow;
|
|
20
|
+
return (jsx("div", { className: "p48 d-flex fd-column gap16 bg-white", children: jsx(CTACell, { title: title, price: price, buttonCaption: buttonCaption, href: "", grey: grey, narrow: narrow }) }));
|
|
21
|
+
};
|
|
22
|
+
CTACellStory.storyName = 'CTACell';
|
|
23
|
+
|
|
24
|
+
export default story;
|
|
25
|
+
export { CTACellStory };
|
|
26
|
+
//# sourceMappingURL=CTACell.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CTACell.stories.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.stories.tsx"],"sourcesContent":["import { CTACell } from './CTACell';\n\nconst story = {\n title: 'JSX/Table/Cells',\n component: CTACell,\n argTypes: {},\n args: {\n title: 'Premium',\n price: '€277',\n buttonCaption: 'Get covered',\n grey: false,\n narrow: false,\n },\n};\n\nexport const CTACellStory = ({\n title,\n price,\n buttonCaption,\n grey,\n narrow,\n}: React.ComponentProps<typeof CTACell>) => (\n <div className=\"p48 d-flex fd-column gap16 bg-white\">\n <CTACell\n title={title}\n price={price}\n buttonCaption={buttonCaption}\n href=\"\"\n grey={grey}\n narrow={narrow}\n />\n </div>\n);\n\nCTACellStory.storyName = 'CTACell';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,aAAa;QAC5B,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;EACD;IAEW,YAAY,GAAG,UAAC,EAMU;QALrC,KAAK,WAAA,EACL,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,MAAM,YAAA;IACoC,QAC1CA,aAAK,SAAS,EAAC,qCAAqC,YAClDA,IAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACd,GACE;AAVoC,EAW1C;AAEF,YAAY,CAAC,SAAS,GAAG,SAAS;;;;;"}
|
|
@@ -1,23 +1,32 @@
|
|
|
1
|
-
import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
|
-
import {
|
|
3
|
-
import { Button } from '../../../button/index.js';
|
|
4
|
-
import CheckIcon from '../../../icon/icons/Check.js';
|
|
5
|
-
import InfoIcon from '../../../icon/icons/Info.js';
|
|
6
|
-
import StarFilledIcon from '../../../icon/icons/StarFilled.js';
|
|
7
|
-
import XIcon from '../../../icon/icons/X.js';
|
|
8
|
-
import ZapFilledIcon from '../../../icon/icons/ZapFilled.js';
|
|
1
|
+
import { b as __rest, a as __assign } from '../../../../tslib.es6-a39f91fc.js';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
3
|
import { c as classNames } from '../../../../index-6ea95111.js';
|
|
10
4
|
import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
|
|
5
|
+
import { BaseCell } from './BaseCell/BaseCell.js';
|
|
6
|
+
import { CTACell } from './CTACell/CTACell.js';
|
|
7
|
+
import { ButtonCell } from './ButtonCell/ButtonCell.js';
|
|
8
|
+
import '../../../icon/icons/Check.js';
|
|
11
9
|
import 'react';
|
|
12
10
|
import '../../../icon/IconWrapper/IconWrapper.js';
|
|
11
|
+
import '../../../icon/icons/StarFilled.js';
|
|
12
|
+
import '../../../icon/icons/X.js';
|
|
13
|
+
import '../../../icon/icons/ZapFilled.js';
|
|
14
|
+
import './BaseCell/MiniProgressBar/MiniProgressBar.js';
|
|
15
|
+
import '../../../../index-3d286178.js';
|
|
16
|
+
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
17
|
+
import '../../../comparisonTable/components/TableInfoButton/index.js';
|
|
18
|
+
import '../../../icon/icons/Info.js';
|
|
19
|
+
import '../../../../index-5e72c3d4.js';
|
|
20
|
+
import '../../../button/index.js';
|
|
13
21
|
|
|
14
|
-
var css_248z = ".TableCell-
|
|
15
|
-
var styles = {"
|
|
22
|
+
var css_248z = ".TableCell-module_th__2rjCU {\n vertical-align: middle;\n scroll-snap-align: end;\n width: 50%;\n}\n@media (min-width: 34rem) {\n .TableCell-module_th__2rjCU {\n width: auto;\n scroll-snap-align: unset;\n }\n}\n\n.TableCell-module_fixedCell__cL3-m {\n position: sticky;\n left: 0;\n z-index: 2;\n}\n.TableCell-module_fixedCell__cL3-m:after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 1px;\n background-color: #f5f6fb;\n}";
|
|
23
|
+
var styles = {"th":"TableCell-module_th__2rjCU","fixedCell":"TableCell-module_fixedCell__cL3-m"};
|
|
16
24
|
styleInject(css_248z);
|
|
17
25
|
|
|
18
26
|
var TableCell = function (_a) {
|
|
19
27
|
var _b;
|
|
20
|
-
var _c
|
|
28
|
+
var _c;
|
|
29
|
+
var _d = _a.isFirstCellInRow, isFirstCellInRow = _d === void 0 ? false : _d, _e = _a.isHeader, isHeader = _e === void 0 ? false : _e, _f = _a.isNavigation, isNavigation = _f === void 0 ? false : _f, _g = _a.isTopLeftCell, isTopLeftCell = _g === void 0 ? false : _g, cellProps = __rest(_a, ["isFirstCellInRow", "isHeader", "isNavigation", "isTopLeftCell"]);
|
|
21
30
|
// prettier-ignore
|
|
22
31
|
var Tag = isNavigation
|
|
23
32
|
? 'div'
|
|
@@ -29,19 +38,14 @@ var TableCell = function (_a) {
|
|
|
29
38
|
var scope = {
|
|
30
39
|
scope: thScope,
|
|
31
40
|
};
|
|
32
|
-
|
|
33
|
-
center: 'ta-center jc-center',
|
|
34
|
-
left: 'ta-left jc-start',
|
|
35
|
-
right: 'ta-right',
|
|
36
|
-
}[align];
|
|
37
|
-
var validRatingValues = [1, 2, 3];
|
|
38
|
-
var SelectedIcon = (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? ZapFilledIcon : StarFilledIcon;
|
|
39
|
-
return (jsx(Tag, __assign({}, scope, { className: classNames('bg-white py24 px8', styles.th, (_b = {
|
|
41
|
+
return (jsxs(Tag, __assign({}, scope, { className: classNames('bg-white py24 px8', styles.th, (_b = {
|
|
40
42
|
'ta-left': isFirstCellInRow
|
|
41
43
|
},
|
|
42
44
|
_b[styles.fixedCell] = isFirstCellInRow,
|
|
43
45
|
_b.pl32 = isFirstCellInRow,
|
|
44
|
-
_b)), children:
|
|
46
|
+
_b)), children: [!cellProps.type && (jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
|
|
47
|
+
? 'BIG_WITH_UNDERLINE'
|
|
48
|
+
: (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && jsx(CTACell, __assign({}, cellProps)), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps))] })));
|
|
45
49
|
};
|
|
46
50
|
|
|
47
51
|
export { TableCell };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell, BaseCellProps } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\n\ntype PositionalTableCellProps = {\n isHeader?: boolean;\n isFirstCellInRow?: boolean;\n isTopLeftCell?: boolean;\n isNavigation?: boolean;\n};\n\nexport type TableCellProps = TableCellData & PositionalTableCellProps;\n\nconst TableCell = ({\n isFirstCellInRow = false,\n isHeader = false,\n isNavigation = false,\n isTopLeftCell = false,\n ...cellProps\n}: TableCellProps) => {\n // prettier-ignore\n const Tag = isNavigation\n ? 'div'\n : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n // prettier-ignore\n const thScope = isHeader\n ? 'col'\n : isFirstCellInRow ? 'row' : undefined;\n\n const scope = {\n scope: thScope,\n };\n\n return (\n <Tag\n {...scope}\n className={classNames('bg-white py24 px8', styles.th, {\n 'ta-left': isFirstCellInRow,\n [styles.fixedCell]: isFirstCellInRow,\n pl32: isFirstCellInRow,\n })}\n >\n {!cellProps.type && (\n <BaseCell\n {...cellProps}\n fontVariant={\n isTopLeftCell\n ? 'BIG_WITH_UNDERLINE'\n : cellProps.fontVariant ?? 'NORMAL'\n }\n />\n )}\n {cellProps.type === 'CTA' && <CTACell {...cellProps} />}\n {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n </Tag>\n );\n};\n\nexport { TableCell };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;IAiBM,SAAS,GAAG,UAAC,EAMF;;;IALf,IAAA,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EAClB,SAAS,cALK,iEAMlB,CADa;;IAGZ,IAAM,GAAG,GAAG,YAAY;UACpB,KAAK;UACL,QAAQ,IAAI,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;;IAG/C,IAAM,OAAO,GAAG,QAAQ;UACpB,KAAK;UACL,gBAAgB,GAAG,KAAK,GAAG,SAAS,CAAC;IAEzC,IAAM,KAAK,GAAG;QACZ,KAAK,EAAE,OAAO;KACf,CAAC;IAEF,QACEA,KAAC,GAAG,eACE,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAE;gBAClD,SAAS,EAAE,gBAAgB;;YAC3B,GAAC,MAAM,CAAC,SAAS,IAAG,gBAAgB;YACpC,OAAI,GAAE,gBAAgB;gBACtB,aAED,CAAC,SAAS,CAAC,IAAI,KACdC,IAAC,QAAQ,eACH,SAAS,IACb,WAAW,EACT,aAAa;sBACT,oBAAoB;sBACpB,MAAA,SAAS,CAAC,WAAW,mCAAI,QAAQ,IAEvC,CACH,EACA,SAAS,CAAC,IAAI,KAAK,KAAK,IAAIA,IAAC,OAAO,eAAK,SAAS,EAAI,EACtD,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAIA,IAAC,UAAU,eAAK,SAAS,EAAI,KACzD,EACN;AACJ;;;;"}
|
|
@@ -1,64 +1,76 @@
|
|
|
1
|
+
import { a as __assign, b as __rest } from '../../../../tslib.es6-a39f91fc.js';
|
|
1
2
|
import { jsx } from 'react/jsx-runtime';
|
|
2
3
|
import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
|
|
3
4
|
import { TableCell } from './TableCell.js';
|
|
4
|
-
import '../../../../tslib.es6-a39f91fc.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
8
8
|
import 'react-dom/test-utils';
|
|
9
|
-
import '../../../button/index.js';
|
|
10
9
|
import '../../../../index-6ea95111.js';
|
|
10
|
+
import '../../../../style-inject.es-1f59c1d0.js';
|
|
11
|
+
import './BaseCell/BaseCell.js';
|
|
11
12
|
import '../../../icon/icons/Check.js';
|
|
12
13
|
import '../../../icon/IconWrapper/IconWrapper.js';
|
|
13
|
-
import '../../../../style-inject.es-1f59c1d0.js';
|
|
14
|
-
import '../../../icon/icons/Info.js';
|
|
15
14
|
import '../../../icon/icons/StarFilled.js';
|
|
16
15
|
import '../../../icon/icons/X.js';
|
|
17
16
|
import '../../../icon/icons/ZapFilled.js';
|
|
17
|
+
import './BaseCell/MiniProgressBar/MiniProgressBar.js';
|
|
18
|
+
import '../../../../index-3d286178.js';
|
|
19
|
+
import '../../../comparisonTable/components/TableInfoButton/index.js';
|
|
20
|
+
import '../../../icon/icons/Info.js';
|
|
21
|
+
import '../../../../index-5e72c3d4.js';
|
|
22
|
+
import './CTACell/CTACell.js';
|
|
23
|
+
import './ButtonCell/ButtonCell.js';
|
|
24
|
+
import '../../../button/index.js';
|
|
18
25
|
|
|
19
26
|
var openModal = jest.fn();
|
|
27
|
+
var setup = function (_a) {
|
|
28
|
+
if (_a === void 0) { _a = {}; }
|
|
29
|
+
var isNavigation = _a.isNavigation, rest = __rest(_a, ["isNavigation"]);
|
|
30
|
+
return customRender(isNavigation ? (jsx(TableCell, __assign({}, rest, { isNavigation: true }))) : (jsx("table", { children: jsx("tbody", { children: jsx("tr", { children: jsx(TableCell, __assign({}, rest)) }) }) })));
|
|
31
|
+
};
|
|
20
32
|
describe('TableCell', function () {
|
|
21
33
|
it('renders the component with boolean true', function () {
|
|
22
|
-
|
|
34
|
+
setup({ checkmarkValue: true });
|
|
23
35
|
expect(screen.getByTitle('Yes')).toBeInTheDocument();
|
|
24
36
|
expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();
|
|
25
37
|
});
|
|
26
38
|
it('renders the component with boolean false', function () {
|
|
27
|
-
|
|
39
|
+
setup({ checkmarkValue: false });
|
|
28
40
|
expect(screen.getByTitle('No')).toBeInTheDocument();
|
|
29
41
|
expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
|
|
30
42
|
});
|
|
31
43
|
it('renders the component without boolean', function () {
|
|
32
|
-
|
|
44
|
+
setup();
|
|
33
45
|
expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();
|
|
34
46
|
expect(screen.queryByTitle('No')).not.toBeInTheDocument();
|
|
35
47
|
expect(screen.queryByTestId('table-cell-boolean-yes')).not.toBeInTheDocument();
|
|
36
48
|
expect(screen.queryByTestId('table-cell-boolean-no')).not.toBeInTheDocument();
|
|
37
49
|
});
|
|
38
50
|
it('renders the component with rating', function () {
|
|
39
|
-
|
|
51
|
+
setup({ rating: { type: 'star', value: 2 } });
|
|
40
52
|
expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();
|
|
41
53
|
});
|
|
42
54
|
it('renders the component without rating', function () {
|
|
43
|
-
|
|
55
|
+
setup();
|
|
44
56
|
expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();
|
|
45
57
|
});
|
|
46
58
|
it('renders the component with text', function () {
|
|
47
|
-
|
|
59
|
+
setup({ text: 'Sample text' });
|
|
48
60
|
expect(screen.getByText('Sample text')).toBeInTheDocument();
|
|
49
61
|
});
|
|
50
62
|
it('renders the component without text', function () {
|
|
51
|
-
|
|
63
|
+
setup();
|
|
52
64
|
expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();
|
|
53
65
|
});
|
|
54
66
|
it('renders the component without info', function () {
|
|
55
|
-
|
|
67
|
+
setup();
|
|
56
68
|
expect(screen.queryByText('View more info')).not.toBeInTheDocument();
|
|
57
69
|
});
|
|
58
70
|
it('calls openModal when info button is clicked', function () {
|
|
59
|
-
|
|
71
|
+
setup({ modalContent: 'Additional information', openModal: openModal });
|
|
60
72
|
// Click info button
|
|
61
|
-
screen.
|
|
73
|
+
screen.getByTestId('ds-table-info-button').click();
|
|
62
74
|
// Assert openModal is called with info prop
|
|
63
75
|
expect(openModal).toHaveBeenCalledWith('Additional information');
|
|
64
76
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.test.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableCell } from './TableCell';\n\nconst openModal = jest.fn();\n\ndescribe('TableCell', () => {\n it('renders the component with boolean true', () => {\n
|
|
1
|
+
{"version":3,"file":"TableCell.test.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableCell, TableCellProps } from './TableCell';\n\nconst openModal = jest.fn();\n\nconst setup = ({ isNavigation, ...rest }: TableCellProps = {}) =>\n render(\n isNavigation ? (\n <TableCell {...rest} isNavigation />\n ) : (\n <table>\n <tbody>\n <tr>\n <TableCell {...rest} />\n </tr>\n </tbody>\n </table>\n )\n );\n\ndescribe('TableCell', () => {\n it('renders the component with boolean true', () => {\n setup({ checkmarkValue: true });\n\n expect(screen.getByTitle('Yes')).toBeInTheDocument();\n expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();\n });\n\n it('renders the component with boolean false', () => {\n setup({ checkmarkValue: false });\n\n expect(screen.getByTitle('No')).toBeInTheDocument();\n expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();\n });\n\n it('renders the component without boolean', () => {\n setup();\n\n expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();\n expect(screen.queryByTitle('No')).not.toBeInTheDocument();\n expect(\n screen.queryByTestId('table-cell-boolean-yes')\n ).not.toBeInTheDocument();\n expect(\n screen.queryByTestId('table-cell-boolean-no')\n ).not.toBeInTheDocument();\n });\n\n it('renders the component with rating', () => {\n setup({ rating: { type: 'star', value: 2 } });\n\n expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();\n });\n\n it('renders the component without rating', () => {\n setup();\n\n expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();\n });\n\n it('renders the component with text', () => {\n setup({ text: 'Sample text' });\n\n expect(screen.getByText('Sample text')).toBeInTheDocument();\n });\n\n it('renders the component without text', () => {\n setup();\n\n expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();\n });\n\n it('renders the component without info', () => {\n setup();\n\n expect(screen.queryByText('View more info')).not.toBeInTheDocument();\n });\n\n it('calls openModal when info button is clicked', () => {\n setup({ modalContent: 'Additional information', openModal });\n\n // Click info button\n screen.getByTestId('ds-table-info-button').click();\n\n // Assert openModal is called with info prop\n expect(openModal).toHaveBeenCalledWith('Additional information');\n });\n});\n"],"names":["render","_jsx"],"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 { TableSection } from '
|
|
4
|
+
import { T as TableSection } from '../../../../TableSection-f6d0028e.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';
|
|
@@ -9,13 +9,21 @@ import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
|
|
|
9
9
|
import { c as classNames } from '../../../../index-6ea95111.js';
|
|
10
10
|
import { C as Collapsible } from '../../../../Collapsible-a355828b.js';
|
|
11
11
|
import '../TableCell/TableCell.js';
|
|
12
|
-
import '
|
|
12
|
+
import '../TableCell/BaseCell/BaseCell.js';
|
|
13
13
|
import '../../../icon/icons/Check.js';
|
|
14
14
|
import '../../../icon/IconWrapper/IconWrapper.js';
|
|
15
|
-
import '../../../icon/icons/Info.js';
|
|
16
15
|
import '../../../icon/icons/StarFilled.js';
|
|
17
16
|
import '../../../icon/icons/X.js';
|
|
18
17
|
import '../../../icon/icons/ZapFilled.js';
|
|
18
|
+
import '../TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
|
|
19
|
+
import '../../../../index-3d286178.js';
|
|
20
|
+
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
21
|
+
import '../../../comparisonTable/components/TableInfoButton/index.js';
|
|
22
|
+
import '../../../icon/icons/Info.js';
|
|
23
|
+
import '../../../../index-5e72c3d4.js';
|
|
24
|
+
import '../TableCell/CTACell/CTACell.js';
|
|
25
|
+
import '../TableCell/ButtonCell/ButtonCell.js';
|
|
26
|
+
import '../../../button/index.js';
|
|
19
27
|
import '../../../icon/icons/ChevronRight.js';
|
|
20
28
|
import '../../../../index-a0ef2ab4.js';
|
|
21
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContents.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { TableSection } from '../TableSection/TableSection';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableContents.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { ModalFunction, TableData } from '../../types';\n\nexport interface TableContentsProps {\n className?: string;\n collapsibleSections?: boolean;\n tableData: TableData;\n hideDetails?: boolean;\n isMobile?: boolean;\n openModal?: ModalFunction;\n shouldHideDetails?: boolean;\n title: string;\n}\n\nconst TableContents = ({\n className,\n collapsibleSections,\n tableData,\n hideDetails,\n isMobile,\n openModal,\n shouldHideDetails,\n title,\n}: TableContentsProps) => {\n const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n const firstHeadRow = tableData?.[0]?.rows?.[0];\n const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n const handleToggleSection = (index: number) => {\n setOpenSection((currentSection) =>\n currentSection === index ? null : index\n );\n };\n\n return (\n <div style={{ width: tableWidth }}>\n {tableData.map(({ rows, section = {} }, index) => {\n const isFirstSection = index === 0;\n const isExpanded = !collapsibleSections\n ? true\n : isSectionOpen === index || isFirstSection;\n const isVisible = hideDetails ? !shouldHideDetails : true;\n\n return (\n (isFirstSection || isVisible) && (\n <div key={index}>\n {section?.title && (\n <div className={styles.cardWrapper}>\n <div className={classNames(styles.card, 'p8')}>\n <Card\n actionIcon={\n isExpanded ? (\n <ChevronUpIcon size={24} />\n ) : (\n <ChevronDownIcon size={24} />\n )\n }\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-hidden\n classNames={{\n wrapper: 'bg-grey-200',\n icon: 'tc-grey-900',\n }}\n dropShadow={false}\n icon={section?.icon}\n title={section.title}\n titleVariant=\"medium\"\n {...(collapsibleSections\n ? {\n onClick: () => handleToggleSection(index),\n }\n : {})}\n />\n </div>\n </div>\n )}\n\n <Collapsible isExpanded={isExpanded} isMobile={isMobile}>\n <TableSection\n className={classNames(className, 'mb24')}\n tableCellRows={\n isFirstSection ? rows : [firstHeadRow, ...rows]\n }\n hideHeader\n openModal={openModal}\n title={`${title}${\n section?.title ? ` - ${section.title}` : ''\n }`}\n width={tableWidth}\n />\n </Collapsible>\n </div>\n )\n );\n })}\n </div>\n );\n};\n\nexport { TableContents };\n"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableContents.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { TableSection } from '../TableSection/TableSection';\nimport { ChevronDownIcon, ChevronUpIcon } from '../../../icon';\nimport { Card } from '../../../cards/card';\n\nimport styles from './TableContents.module.scss';\nimport classNames from 'classnames';\nimport { Collapsible } from './Collapsible';\nimport { ModalFunction, TableData } from '../../types';\n\nexport interface TableContentsProps {\n className?: string;\n collapsibleSections?: boolean;\n tableData: TableData;\n hideDetails?: boolean;\n isMobile?: boolean;\n openModal?: ModalFunction;\n shouldHideDetails?: boolean;\n title: string;\n}\n\nconst TableContents = ({\n className,\n collapsibleSections,\n tableData,\n hideDetails,\n isMobile,\n openModal,\n shouldHideDetails,\n title,\n}: TableContentsProps) => {\n const [isSectionOpen, setOpenSection] = useState<number | null>(null);\n const firstHeadRow = tableData?.[0]?.rows?.[0];\n const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';\n const handleToggleSection = (index: number) => {\n setOpenSection((currentSection) =>\n currentSection === index ? null : index\n );\n };\n\n return (\n <div style={{ width: tableWidth }}>\n {tableData.map(({ rows, section = {} }, index) => {\n const isFirstSection = index === 0;\n const isExpanded = !collapsibleSections\n ? true\n : isSectionOpen === index || isFirstSection;\n const isVisible = hideDetails ? !shouldHideDetails : true;\n\n return (\n (isFirstSection || isVisible) && (\n <div key={index}>\n {section?.title && (\n <div className={styles.cardWrapper}>\n <div className={classNames(styles.card, 'p8')}>\n <Card\n actionIcon={\n isExpanded ? (\n <ChevronUpIcon size={24} />\n ) : (\n <ChevronDownIcon size={24} />\n )\n }\n aria-expanded={isExpanded ? 'true' : 'false'}\n aria-hidden\n classNames={{\n wrapper: 'bg-grey-200',\n icon: 'tc-grey-900',\n }}\n dropShadow={false}\n icon={section?.icon}\n title={section.title}\n titleVariant=\"medium\"\n {...(collapsibleSections\n ? {\n onClick: () => handleToggleSection(index),\n }\n : {})}\n />\n </div>\n </div>\n )}\n\n <Collapsible isExpanded={isExpanded} isMobile={isMobile}>\n <TableSection\n className={classNames(className, 'mb24')}\n tableCellRows={\n isFirstSection ? rows : [firstHeadRow, ...rows]\n }\n hideHeader\n openModal={openModal}\n title={`${title}${\n section?.title ? ` - ${section.title}` : ''\n }`}\n width={tableWidth}\n />\n </Collapsible>\n </div>\n )\n );\n })}\n </div>\n );\n};\n\nexport { TableContents };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBM,aAAa,GAAG,UAAC,EASF;;QARnB,SAAS,eAAA,EACT,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,iBAAiB,uBAAA,EACjB,KAAK,WAAA;IAEC,IAAA,KAAkC,QAAQ,CAAgB,IAAI,CAAC,EAA9D,aAAa,QAAA,EAAE,cAAc,QAAiC,CAAC;IACtE,IAAM,YAAY,GAAG,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,CAAC,0CAAE,IAAI,0CAAG,CAAC,CAAC,CAAC;IAC/C,IAAM,UAAU,GAAG,QAAQ,GAAG,UAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,IAAG,EAAE,MAAG,GAAG,EAAE,CAAC;IACnE,IAAM,mBAAmB,GAAG,UAAC,KAAa;QACxC,cAAc,CAAC,UAAC,cAAc;YAC5B,OAAA,cAAc,KAAK,KAAK,GAAG,IAAI,GAAG,KAAK;SAAA,CACxC,CAAC;KACH,CAAC;IAEF,QACEA,aAAK,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,YAC9B,SAAS,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,KAAK;gBAA3B,IAAI,UAAA,EAAE,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA;YAClC,IAAM,cAAc,GAAG,KAAK,KAAK,CAAC,CAAC;YACnC,IAAM,UAAU,GAAG,CAAC,mBAAmB;kBACnC,IAAI;kBACJ,aAAa,KAAK,KAAK,IAAI,cAAc,CAAC;YAC9C,IAAM,SAAS,GAAG,WAAW,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAE1D,QACE,CAAC,cAAc,IAAI,SAAS,MAC1BC,yBACG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,MACbD,aAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAChCA,aAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,YAC3CA,IAAC,IAAI,aACH,UAAU,EACR,UAAU,IACRA,IAAC,aAAa,IAAC,IAAI,EAAE,EAAE,GAAI,KAE3BA,IAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,CAC9B,mBAEY,UAAU,GAAG,MAAM,GAAG,OAAO,uBAE5C,UAAU,EAAE;oCACV,OAAO,EAAE,aAAa;oCACtB,IAAI,EAAE,aAAa;iCACpB,EACD,UAAU,EAAE,KAAK,EACjB,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EACnB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,YAAY,EAAC,QAAQ,KAChB,mBAAmB;kCACpB;oCACE,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,GAAA;iCAC1C;kCACD,EAAE,GACN,GACE,GACF,CACP,EAEDA,IAAC,WAAW,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,YACrDA,IAAC,YAAY,IACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,EACxC,aAAa,EACX,cAAc,GAAG,IAAI,kBAAI,YAAY,GAAK,IAAI,OAAC,EAEjD,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,UAAG,KAAK,SACb,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,IAAG,aAAM,OAAO,CAAC,KAAK,CAAE,GAAG,EAAE,CAC3C,EACF,KAAK,EAAE,UAAU,GACjB,GACU,KA7CN,KAAK,CA8CT,CACP,EACD;SACH,CAAC,GACE,EACN;AACJ;;;;"}
|
|
@@ -6,17 +6,24 @@ import 'react';
|
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
8
8
|
import 'react-dom/test-utils';
|
|
9
|
-
import '
|
|
9
|
+
import '../../../../TableSection-f6d0028e.js';
|
|
10
10
|
import '../../../../index-6ea95111.js';
|
|
11
11
|
import '../../../../style-inject.es-1f59c1d0.js';
|
|
12
12
|
import '../TableCell/TableCell.js';
|
|
13
|
-
import '
|
|
13
|
+
import '../TableCell/BaseCell/BaseCell.js';
|
|
14
14
|
import '../../../icon/icons/Check.js';
|
|
15
15
|
import '../../../icon/IconWrapper/IconWrapper.js';
|
|
16
|
-
import '../../../icon/icons/Info.js';
|
|
17
16
|
import '../../../icon/icons/StarFilled.js';
|
|
18
17
|
import '../../../icon/icons/X.js';
|
|
19
18
|
import '../../../icon/icons/ZapFilled.js';
|
|
19
|
+
import '../TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
|
|
20
|
+
import '../../../../index-3d286178.js';
|
|
21
|
+
import '../../../comparisonTable/components/TableInfoButton/index.js';
|
|
22
|
+
import '../../../icon/icons/Info.js';
|
|
23
|
+
import '../../../../index-5e72c3d4.js';
|
|
24
|
+
import '../TableCell/CTACell/CTACell.js';
|
|
25
|
+
import '../TableCell/ButtonCell/ButtonCell.js';
|
|
26
|
+
import '../../../button/index.js';
|
|
20
27
|
import '../../../icon/icons/ChevronDown.js';
|
|
21
28
|
import '../../../icon/icons/ChevronUp.js';
|
|
22
29
|
import '../../../cards/card/index.js';
|
|
@@ -27,8 +34,8 @@ import '../../../../index-a0ef2ab4.js';
|
|
|
27
34
|
var mockData = [
|
|
28
35
|
{
|
|
29
36
|
rows: [
|
|
30
|
-
[{
|
|
31
|
-
[{
|
|
37
|
+
[{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],
|
|
38
|
+
[{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],
|
|
32
39
|
],
|
|
33
40
|
},
|
|
34
41
|
{
|
|
@@ -36,8 +43,8 @@ var mockData = [
|
|
|
36
43
|
title: 'Section 2',
|
|
37
44
|
},
|
|
38
45
|
rows: [
|
|
39
|
-
[{
|
|
40
|
-
[{
|
|
46
|
+
[{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],
|
|
47
|
+
[{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],
|
|
41
48
|
],
|
|
42
49
|
},
|
|
43
50
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContents.test.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableContents,
|
|
1
|
+
{"version":3,"file":"TableContents.test.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/TableContents.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableContents, TableContentsProps } from './TableContents';\n\nconst mockData: TableContentsProps['tableData'] = [\n {\n rows: [\n [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],\n [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],\n ],\n },\n {\n section: {\n title: 'Section 2',\n },\n rows: [\n [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],\n [{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],\n ],\n },\n];\n\ndescribe('TableContents', () => {\n it('renders the table sections with sections', () => {\n render(\n <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n );\n\n expect(screen.getByText('Section 2')).toBeInTheDocument();\n });\n\n it('renders the table sections with sections data', () => {\n render(\n <TableContents collapsibleSections tableData={mockData} title=\"Table\" />\n );\n\n expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();\n expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();\n expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();\n expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();\n });\n\n it('hides the table sections when hideDetails and shouldHideDetails is true', () => {\n render(\n <TableContents\n hideDetails\n shouldHideDetails\n tableData={mockData}\n title=\"Table\"\n />\n );\n\n expect(screen.queryByText('Section 2')).not.toBeInTheDocument();\n expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();\n });\n\n it('hides the table sections details when collapsibleSections is true', () => {\n render(\n <TableContents\n collapsibleSections\n isMobile\n tableData={mockData}\n title=\"Table\"\n />\n );\n\n expect(screen.getByText('Section 2')).toBeVisible();\n expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n });\n\n it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {\n const { user } = render(\n <TableContents\n collapsibleSections\n isMobile\n tableData={mockData}\n title=\"Table\"\n />\n );\n\n expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();\n\n await user.click(screen.getByText('Section 2'));\n\n expect(screen.getByText('Item 2.1.1')).toBeVisible();\n });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
|
|
@@ -1,59 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import '
|
|
1
|
+
import '../../../../tslib.es6-a39f91fc.js';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import '../../../../index-6ea95111.js';
|
|
4
|
+
export { T as TableSection } from '../../../../TableSection-f6d0028e.js';
|
|
5
|
+
import '../TableCell/TableCell.js';
|
|
6
|
+
import '../../../../style-inject.es-1f59c1d0.js';
|
|
7
|
+
import '../TableCell/BaseCell/BaseCell.js';
|
|
8
8
|
import '../../../icon/icons/Check.js';
|
|
9
|
+
import 'react';
|
|
9
10
|
import '../../../icon/IconWrapper/IconWrapper.js';
|
|
10
|
-
import '../../../icon/icons/Info.js';
|
|
11
11
|
import '../../../icon/icons/StarFilled.js';
|
|
12
12
|
import '../../../icon/icons/X.js';
|
|
13
13
|
import '../../../icon/icons/ZapFilled.js';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var handleOpenModal = function (_a) {
|
|
24
|
-
var cellIndex = _a.cellIndex, body = _a.body, title = _a.title;
|
|
25
|
-
return openModal === null || openModal === void 0 ? void 0 : openModal({
|
|
26
|
-
body: body,
|
|
27
|
-
title: title || getColumnContentByKey(cellIndex),
|
|
28
|
-
});
|
|
29
|
-
};
|
|
30
|
-
return (jsxs("table", { className: classNames(className, 'w100', styles.table), width: width, children: [jsx("caption", { className: "sr-only", children: title }), headerRow && (jsx("thead", { className: hideHeader ? 'sr-only' : '', children: jsx("tr", { children: headerRow.map(function (tableCellProps, cellIndex) {
|
|
31
|
-
var isFirstCellInRow = cellIndex === 0;
|
|
32
|
-
return (jsx(TableCell, __assign({ isHeader: true, isFirstCellInRow: isFirstCellInRow, isTopLeftCell: isFirstCellInRow, align: isFirstCellInRow ? 'left' : 'center', openModal: function (body) {
|
|
33
|
-
return handleOpenModal({
|
|
34
|
-
cellIndex: cellIndex,
|
|
35
|
-
body: body,
|
|
36
|
-
title: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.content,
|
|
37
|
-
});
|
|
38
|
-
} }, tableCellProps), cellIndex));
|
|
39
|
-
}) }) })), jsx("tbody", { children: tableCellRows.map(function (row, rowIndex) {
|
|
40
|
-
var isSingleCell = row.length === 1;
|
|
41
|
-
return (rowIndex > 0 && (jsx("tr", { className: styles.tr, children: row.map(function (tableCellProps, cellIndex) {
|
|
42
|
-
var key = "".concat(rowIndex, "-").concat(cellIndex);
|
|
43
|
-
var isFirstCellInRow = cellIndex === 0;
|
|
44
|
-
var onCelInfoClick = function (body) {
|
|
45
|
-
return handleOpenModal({
|
|
46
|
-
cellIndex: cellIndex,
|
|
47
|
-
body: body,
|
|
48
|
-
title: isFirstCellInRow
|
|
49
|
-
? tableCellProps.content
|
|
50
|
-
: undefined,
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
return (jsx(TableCell, __assign({ align: isFirstCellInRow && !isSingleCell ? 'left' : 'center', isFirstCellInRow: isFirstCellInRow, openModal: onCelInfoClick }, tableCellProps), key));
|
|
54
|
-
}) }, rowIndex)));
|
|
55
|
-
}) })] }));
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export { TableSection };
|
|
14
|
+
import '../TableCell/BaseCell/MiniProgressBar/MiniProgressBar.js';
|
|
15
|
+
import '../../../../index-3d286178.js';
|
|
16
|
+
import '../../../../_commonjsHelpers-4730bd53.js';
|
|
17
|
+
import '../../../comparisonTable/components/TableInfoButton/index.js';
|
|
18
|
+
import '../../../icon/icons/Info.js';
|
|
19
|
+
import '../../../../index-5e72c3d4.js';
|
|
20
|
+
import '../TableCell/CTACell/CTACell.js';
|
|
21
|
+
import '../TableCell/ButtonCell/ButtonCell.js';
|
|
22
|
+
import '../../../button/index.js';
|
|
59
23
|
//# sourceMappingURL=TableSection.js.map
|