@popsure/dirty-swan 0.66.30 → 0.66.31
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 +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.d.ts +1 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js +2 -2
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.js.map +1 -1
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.test.js +35 -0
- package/dist/esm/components/table/components/TableCell/ButtonCell/ButtonCell.test.js.map +1 -0
- package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.tsx +22 -0
- package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -15,10 +15,10 @@ styleInject(css_248z);
|
|
|
15
15
|
var ButtonCell = function (_a) {
|
|
16
16
|
var _b;
|
|
17
17
|
var isSelected = _a.isSelected, onClick = _a.onClick, buttonCaption = _a.buttonCaption, price = _a.price, disabled = _a.disabled, className = _a.className, dataTestId = _a.dataTestId;
|
|
18
|
-
return (jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", styles.wrapper, className),
|
|
18
|
+
return (jsx("div", { className: classNames("w100 d-flex fd-column ai-start jc-center gap8", styles.wrapper, className), children: jsxs("button", { className: classNames('w100 wmx5', styles.buttonCell, (_b = {},
|
|
19
19
|
_b[styles.selected] = isSelected,
|
|
20
20
|
_b[styles.disabled] = disabled,
|
|
21
|
-
_b)), type: "button", onClick: onClick, disabled: disabled, children: [jsxs("div", { className: "d-flex fd-column ai-start", children: [jsx("span", { className: "p-p fw-bold", children: buttonCaption }), price && jsx("span", { className: "p-p", children: price })] }), !disabled && (isSelected ? (jsx(CircleSelectedIcon, { size: 16 })) : (jsx(CircleUnselectedIcon, { size: 16 })))] }) }));
|
|
21
|
+
_b)), type: "button", onClick: onClick, disabled: disabled, "data-testid": dataTestId, children: [jsxs("div", { className: "d-flex fd-column ai-start", children: [jsx("span", { className: "p-p fw-bold", children: buttonCaption }), price && jsx("span", { className: "p-p", children: price })] }), !disabled && (isSelected ? (jsx(CircleSelectedIcon, { size: 16 })) : (jsx(CircleUnselectedIcon, { size: 16 })))] }) }));
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export { ButtonCell };
|
|
@@ -1 +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 { CircleSelectedIcon, CircleUnselectedIcon } from '../../../../icon';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n buttonCaption: ReactNode;\n disabled?: boolean;\n isSelected?: boolean;\n onClick: () => void;\n price?: ReactNode;\n className?: string;\n dataTestId?: string;\n};\n\nexport const ButtonCell = ({\n isSelected,\n onClick,\n buttonCaption,\n price,\n disabled,\n className,\n dataTestId,\n}: ButtonCellProps) => {\n return (\n <div\n className={classNames(\n \"w100 d-flex fd-column ai-start jc-center gap8\",\n styles.wrapper,\n className,\n )}\n
|
|
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 { CircleSelectedIcon, CircleUnselectedIcon } from '../../../../icon';\nimport { ReactNode } from 'react';\n\nexport type ButtonCellProps = {\n buttonCaption: ReactNode;\n disabled?: boolean;\n isSelected?: boolean;\n onClick: () => void;\n price?: ReactNode;\n className?: string;\n dataTestId?: string;\n};\n\nexport const ButtonCell = ({\n isSelected,\n onClick,\n buttonCaption,\n price,\n disabled,\n className,\n dataTestId,\n}: ButtonCellProps) => {\n return (\n <div\n className={classNames(\n \"w100 d-flex fd-column ai-start jc-center gap8\",\n styles.wrapper,\n className,\n )}\n >\n <button\n className={classNames('w100 wmx5', styles.buttonCell, {\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n })}\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n data-testid={dataTestId}\n >\n <div className=\"d-flex fd-column ai-start\">\n <span className=\"p-p fw-bold\">{buttonCaption}</span>\n {price && <span className=\"p-p\">{price}</span>}\n </div>\n {!disabled && (isSelected ? (\n <CircleSelectedIcon size={16} />\n ) : (\n <CircleUnselectedIcon size={16} />\n ))}\n </button>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;AAgBO,IAAM,UAAU,GAAG,UAAC,EAQT,EAAA;;AAPhB,IAAA,IAAA,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA;IAEV,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CACnB,+CAA+C,EAC/C,MAAM,CAAC,OAAO,EACd,SAAS,CACV,EAAA,QAAA,EAEDC,IAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAA,EAAA,GAAA,EAAA;AAClD,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,gBAAA,EAAA,EAAA,EACF,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAAA,aAAA,EACL,UAAU,aAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CACxCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,aAAa,EAAA,CAAQ,EACnD,KAAK,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,KAAK,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CAC1C,EACL,CAAC,QAAQ,KAAK,UAAU,IACvBA,GAAA,CAAC,kBAAkB,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,KAEhCA,GAAA,CAAC,oBAAoB,EAAA,EAAC,IAAI,EAAE,EAAE,GAAI,CACnC,CAAC,CAAA,EAAA,CACK,EAAA,CACL;AAEV;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { _ as __awaiter, a as __generator } from '../../../../../tslib.es6-CVlKGIvp.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { c as customRender, s as screen } from '../../../../../customRender-DzdqZxUd.js';
|
|
4
|
+
import { ButtonCell } from './ButtonCell.js';
|
|
5
|
+
import '../../../../../_commonjsHelpers-BFTU3MAI.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'react-dom';
|
|
8
|
+
import 'util';
|
|
9
|
+
import 'react-dom/test-utils';
|
|
10
|
+
import '../../../../../index-DLQEsiym.js';
|
|
11
|
+
import '../../../../../style-inject.es-tgCJW-Cu.js';
|
|
12
|
+
import '../../../../icon/icons/CircleSelected.js';
|
|
13
|
+
import '../../../../icon/IconWrapper/IconWrapper.js';
|
|
14
|
+
import '../../../../icon/icons/CircleUnselected.js';
|
|
15
|
+
|
|
16
|
+
describe('ButtonCell', function () {
|
|
17
|
+
it('exposes its test id on the button so clicking it selects the cell', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
18
|
+
var onClick, user, button;
|
|
19
|
+
return __generator(this, function (_a) {
|
|
20
|
+
switch (_a.label) {
|
|
21
|
+
case 0:
|
|
22
|
+
onClick = jest.fn();
|
|
23
|
+
user = customRender(jsx(ButtonCell, { buttonCaption: "Extended", price: "\u20AC9.34/mo", onClick: onClick, dataTestId: "plan-table-EXTENDED" })).user;
|
|
24
|
+
button = screen.getByTestId('plan-table-EXTENDED');
|
|
25
|
+
return [4 /*yield*/, user.click(button)];
|
|
26
|
+
case 1:
|
|
27
|
+
_a.sent();
|
|
28
|
+
expect(button.tagName).toBe('BUTTON');
|
|
29
|
+
expect(onClick).toHaveBeenCalledTimes(1);
|
|
30
|
+
return [2 /*return*/];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
}); });
|
|
34
|
+
});
|
|
35
|
+
//# sourceMappingURL=ButtonCell.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonCell.test.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../../util/testUtils';\nimport { ButtonCell } from './ButtonCell';\n\ndescribe('ButtonCell', () => {\n it('exposes its test id on the button so clicking it selects the cell', async () => {\n const onClick = jest.fn();\n const { user } = render(\n <ButtonCell\n buttonCaption=\"Extended\"\n price=\"€9.34/mo\"\n onClick={onClick}\n dataTestId=\"plan-table-EXTENDED\"\n />\n );\n\n const button = screen.getByTestId('plan-table-EXTENDED');\n await user.click(button);\n\n expect(button.tagName).toBe('BUTTON');\n expect(onClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;;AAGA,QAAQ,CAAC,YAAY,EAAE,YAAA;IACrB,EAAE,CAAC,mEAAmE,EAAE,YAAA,EAAA,OAAA,SAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA;;;;;AAChE,oBAAA,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE;oBACjB,IAAI,GAAKA,YAAM,CACrBC,GAAA,CAAC,UAAU,IACT,aAAa,EAAC,UAAU,EACxB,KAAK,EAAC,eAAU,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAC,qBAAqB,EAAA,CAChC,CACH,CAAA,IAPW;AASN,oBAAA,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC;AACxD,oBAAA,OAAA,CAAA,CAAA,YAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;;AAAxB,oBAAA,EAAA,CAAA,IAAA,EAAwB;oBAExB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;oBACrC,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;;;;AACzC,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { render, screen } from '../../../../../util/testUtils';
|
|
2
|
+
import { ButtonCell } from './ButtonCell';
|
|
3
|
+
|
|
4
|
+
describe('ButtonCell', () => {
|
|
5
|
+
it('exposes its test id on the button so clicking it selects the cell', async () => {
|
|
6
|
+
const onClick = jest.fn();
|
|
7
|
+
const { user } = render(
|
|
8
|
+
<ButtonCell
|
|
9
|
+
buttonCaption="Extended"
|
|
10
|
+
price="€9.34/mo"
|
|
11
|
+
onClick={onClick}
|
|
12
|
+
dataTestId="plan-table-EXTENDED"
|
|
13
|
+
/>
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const button = screen.getByTestId('plan-table-EXTENDED');
|
|
17
|
+
await user.click(button);
|
|
18
|
+
|
|
19
|
+
expect(button.tagName).toBe('BUTTON');
|
|
20
|
+
expect(onClick).toHaveBeenCalledTimes(1);
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -30,7 +30,6 @@ export const ButtonCell = ({
|
|
|
30
30
|
styles.wrapper,
|
|
31
31
|
className,
|
|
32
32
|
)}
|
|
33
|
-
data-testid={dataTestId}
|
|
34
33
|
>
|
|
35
34
|
<button
|
|
36
35
|
className={classNames('w100 wmx5', styles.buttonCell, {
|
|
@@ -40,6 +39,7 @@ export const ButtonCell = ({
|
|
|
40
39
|
type="button"
|
|
41
40
|
onClick={onClick}
|
|
42
41
|
disabled={disabled}
|
|
42
|
+
data-testid={dataTestId}
|
|
43
43
|
>
|
|
44
44
|
<div className="d-flex fd-column ai-start">
|
|
45
45
|
<span className="p-p fw-bold">{buttonCaption}</span>
|