@transferwise/components 0.0.0-experimental-2b2d326 → 0.0.0-experimental-a90d366
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/build/switch/Switch.js +3 -27
- package/build/switch/Switch.js.map +1 -1
- package/build/switch/Switch.mjs +3 -27
- package/build/switch/Switch.mjs.map +1 -1
- package/build/types/switch/Switch.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/flowNavigation/FlowNavigation.story.js +1 -1
- package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js +47 -8
- package/src/switch/Switch.story.tsx +4 -7
- package/src/switch/Switch.tsx +1 -24
- package/src/switch/__snapshots__/Switch.spec.tsx.snap +2 -44
package/build/switch/Switch.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var icons = require('@transferwise/icons');
|
|
4
|
-
var componentsTheming = require('@wise/components-theming');
|
|
5
3
|
var clsx = require('clsx');
|
|
6
4
|
var contexts = require('../inputs/contexts.js');
|
|
7
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -10,9 +8,6 @@ const Switch = props => {
|
|
|
10
8
|
const inputAttributes = contexts.useInputAttributes({
|
|
11
9
|
nonLabelable: true
|
|
12
10
|
});
|
|
13
|
-
const {
|
|
14
|
-
isModern
|
|
15
|
-
} = componentsTheming.useTheme();
|
|
16
11
|
const {
|
|
17
12
|
checked,
|
|
18
13
|
className,
|
|
@@ -28,27 +23,6 @@ const Switch = props => {
|
|
|
28
23
|
onClick();
|
|
29
24
|
}
|
|
30
25
|
};
|
|
31
|
-
const returnIcon = () => {
|
|
32
|
-
if (isModern) {
|
|
33
|
-
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
34
|
-
className: "np-switch--thumb"
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
if (checked) {
|
|
38
|
-
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
39
|
-
className: "np-switch--thumb",
|
|
40
|
-
children: /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
|
|
41
|
-
size: 24
|
|
42
|
-
})
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
46
|
-
className: "np-switch--thumb",
|
|
47
|
-
children: /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
|
|
48
|
-
size: 24
|
|
49
|
-
})
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
26
|
const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
|
|
53
27
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
54
28
|
className: clsx.clsx('np-switch', {
|
|
@@ -66,7 +40,9 @@ const Switch = props => {
|
|
|
66
40
|
"aria-disabled": disabled,
|
|
67
41
|
onClick: !disabled ? onClick : undefined,
|
|
68
42
|
onKeyDown: !disabled ? handleKeyDown : undefined,
|
|
69
|
-
children: [
|
|
43
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
44
|
+
className: "np-switch--thumb"
|
|
45
|
+
}), /*#__PURE__*/jsxRuntime.jsx("input", {
|
|
70
46
|
type: "checkbox",
|
|
71
47
|
checked: checked,
|
|
72
48
|
readOnly: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === ' ') {\n event.preventDefault();\n onClick();\n }\n };\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <span\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n tabIndex={0}\n role=\"switch\"\n aria-checked={checked}\n aria-label={ariaLabel}\n {...inputAttributes}\n aria-labelledby={ariaLabelledby}\n id={id}\n aria-disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n >\n <span className=\"np-switch--thumb\" />\n <input type=\"checkbox\" checked={checked} readOnly />\n </span>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
|
package/build/switch/Switch.mjs
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
|
|
2
|
-
import { useTheme } from '@wise/components-theming';
|
|
3
1
|
import { clsx } from 'clsx';
|
|
4
2
|
import { useInputAttributes } from '../inputs/contexts.mjs';
|
|
5
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -8,9 +6,6 @@ const Switch = props => {
|
|
|
8
6
|
const inputAttributes = useInputAttributes({
|
|
9
7
|
nonLabelable: true
|
|
10
8
|
});
|
|
11
|
-
const {
|
|
12
|
-
isModern
|
|
13
|
-
} = useTheme();
|
|
14
9
|
const {
|
|
15
10
|
checked,
|
|
16
11
|
className,
|
|
@@ -26,27 +21,6 @@ const Switch = props => {
|
|
|
26
21
|
onClick();
|
|
27
22
|
}
|
|
28
23
|
};
|
|
29
|
-
const returnIcon = () => {
|
|
30
|
-
if (isModern) {
|
|
31
|
-
return /*#__PURE__*/jsx("span", {
|
|
32
|
-
className: "np-switch--thumb"
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
if (checked) {
|
|
36
|
-
return /*#__PURE__*/jsx("span", {
|
|
37
|
-
className: "np-switch--thumb",
|
|
38
|
-
children: /*#__PURE__*/jsx(CheckCircleFill, {
|
|
39
|
-
size: 24
|
|
40
|
-
})
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
return /*#__PURE__*/jsx("span", {
|
|
44
|
-
className: "np-switch--thumb",
|
|
45
|
-
children: /*#__PURE__*/jsx(CrossCircleFill, {
|
|
46
|
-
size: 24
|
|
47
|
-
})
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
24
|
const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
|
|
51
25
|
return /*#__PURE__*/jsxs("span", {
|
|
52
26
|
className: clsx('np-switch', {
|
|
@@ -64,7 +38,9 @@ const Switch = props => {
|
|
|
64
38
|
"aria-disabled": disabled,
|
|
65
39
|
onClick: !disabled ? onClick : undefined,
|
|
66
40
|
onKeyDown: !disabled ? handleKeyDown : undefined,
|
|
67
|
-
children: [
|
|
41
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
42
|
+
className: "np-switch--thumb"
|
|
43
|
+
}), /*#__PURE__*/jsx("input", {
|
|
68
44
|
type: "checkbox",
|
|
69
45
|
checked: checked,
|
|
70
46
|
readOnly: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === ' ') {\n event.preventDefault();\n onClick();\n }\n };\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <span\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n tabIndex={0}\n role=\"switch\"\n aria-checked={checked}\n aria-label={ariaLabel}\n {...inputAttributes}\n aria-labelledby={ariaLabelledby}\n id={id}\n aria-disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n >\n <span className=\"np-switch--thumb\" />\n <input type=\"checkbox\" checked={checked} readOnly />\n </span>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA,QAAAA;AAAQ,GACT,GAAGV,KAAK,CAAA;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBL,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC,CAAA;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA,QAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC,kBAAA;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA,IAAA;AAAA,KACnD,CAAA,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAwB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,gCAiDjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -244,7 +244,7 @@ export const SendFlow = () => {
|
|
|
244
244
|
|
|
245
245
|
<Sticky>
|
|
246
246
|
<div className="d-flex justify-content-center align-items-center p-a-3">
|
|
247
|
-
<Button disabled={activeStep ===
|
|
247
|
+
<Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
|
|
248
248
|
Continue
|
|
249
249
|
</Button>
|
|
250
250
|
</div>
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { render, screen, mockMatchMedia,
|
|
1
|
+
import { render, screen, mockMatchMedia, userEvent, waitFor } from '../../test-utils';
|
|
2
2
|
|
|
3
3
|
import AnimatedLabel from '.';
|
|
4
4
|
|
|
5
5
|
mockMatchMedia();
|
|
6
|
-
mockResizeObserver();
|
|
7
6
|
|
|
8
7
|
const props = {
|
|
9
8
|
activeLabel: 0,
|
|
@@ -17,12 +16,6 @@ describe('AnimatedLabel', () => {
|
|
|
17
16
|
expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
|
|
18
17
|
});
|
|
19
18
|
|
|
20
|
-
it('renders only one label with class out', () => {
|
|
21
|
-
const { container } = render(<AnimatedLabel {...props} />);
|
|
22
|
-
expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--in');
|
|
23
|
-
expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
|
|
24
|
-
});
|
|
25
|
-
|
|
26
19
|
it('when activeLabel increase it switches class accordingly', () => {
|
|
27
20
|
const { rerender } = render(<AnimatedLabel {...props} />);
|
|
28
21
|
expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--in');
|
|
@@ -48,4 +41,50 @@ describe('AnimatedLabel', () => {
|
|
|
48
41
|
expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--in');
|
|
49
42
|
expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--in');
|
|
50
43
|
});
|
|
44
|
+
|
|
45
|
+
it('shows all steps in menu when click on the label', async () => {
|
|
46
|
+
render(<AnimatedLabel {...props} activeLabel={1} />);
|
|
47
|
+
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
|
48
|
+
userEvent.click(screen.getByRole('button', { name: /label2/i }));
|
|
49
|
+
await waitFor(() => {
|
|
50
|
+
expect(screen.getByRole('menu')).toBeInTheDocument();
|
|
51
|
+
});
|
|
52
|
+
expect(screen.getAllByRole('menuitem')).toHaveLength(props.steps.length);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it('switches label when click on one of steps as menu itme', async () => {
|
|
56
|
+
const handleClick = jest.fn();
|
|
57
|
+
const handleStepClick = (stepNumber) => {
|
|
58
|
+
return () => handleClick(stepNumber);
|
|
59
|
+
};
|
|
60
|
+
render(
|
|
61
|
+
<AnimatedLabel
|
|
62
|
+
{...{
|
|
63
|
+
activeLabel: 1,
|
|
64
|
+
steps: [
|
|
65
|
+
{ label: 'label1', onClick: handleStepClick(0) },
|
|
66
|
+
{ label: 'label2', onClick: handleStepClick(1) },
|
|
67
|
+
{ label: 'label3', onClick: handleStepClick(2) },
|
|
68
|
+
],
|
|
69
|
+
}}
|
|
70
|
+
/>,
|
|
71
|
+
);
|
|
72
|
+
expect(screen.getByRole('button', { name: /label2/i })).toBeInTheDocument();
|
|
73
|
+
expect(screen.queryByRole('button', { name: /label1/i })).not.toBeInTheDocument();
|
|
74
|
+
|
|
75
|
+
userEvent.click(screen.getByRole('button', { name: /label2/i }));
|
|
76
|
+
|
|
77
|
+
await waitFor(() => {
|
|
78
|
+
expect(screen.getByRole('menu')).toBeInTheDocument();
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
userEvent.click(screen.getByRole('menuitem', { name: /label1/i }));
|
|
82
|
+
|
|
83
|
+
await waitFor(() => {
|
|
84
|
+
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
88
|
+
expect(handleClick).toHaveBeenCalledWith(0);
|
|
89
|
+
});
|
|
51
90
|
});
|
|
@@ -10,7 +10,7 @@ export default {
|
|
|
10
10
|
|
|
11
11
|
export const Basic = () => {
|
|
12
12
|
const [checked1, setCheck1] = useState(false);
|
|
13
|
-
const [checked2, setCheck2] = useState(
|
|
13
|
+
const [checked2, setCheck2] = useState(true);
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
16
|
<div className="d-flex flex-column">
|
|
@@ -22,11 +22,10 @@ export const Basic = () => {
|
|
|
22
22
|
onClick={() => setCheck1(!checked1)}
|
|
23
23
|
/>
|
|
24
24
|
</Field>
|
|
25
|
-
|
|
26
25
|
<Switch
|
|
27
|
-
checked={checked2}
|
|
28
|
-
className="a-class-name m-t-4"
|
|
29
26
|
aria-label="I'm a switch without label"
|
|
27
|
+
checked={checked2}
|
|
28
|
+
className="a-class-name"
|
|
30
29
|
onClick={() => setCheck2(!checked2)}
|
|
31
30
|
/>
|
|
32
31
|
</div>
|
|
@@ -43,17 +42,15 @@ export const Disabled = () => {
|
|
|
43
42
|
checked={checked}
|
|
44
43
|
disabled
|
|
45
44
|
className="a-class-name"
|
|
46
|
-
aria-labelledby="labelID"
|
|
47
45
|
id="switchId"
|
|
48
46
|
onClick={() => setCheck(!checked)}
|
|
49
47
|
/>
|
|
50
48
|
</Field>
|
|
51
|
-
|
|
52
49
|
<Switch
|
|
50
|
+
aria-label="I'm a switch without label"
|
|
53
51
|
checked={!checked}
|
|
54
52
|
disabled
|
|
55
53
|
className="a-class-name"
|
|
56
|
-
aria-labelledby="labelID"
|
|
57
54
|
id="switchId1"
|
|
58
55
|
onClick={() => setCheck(!checked)}
|
|
59
56
|
/>
|
package/src/switch/Switch.tsx
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
|
|
2
|
-
import { useTheme } from '@wise/components-theming';
|
|
3
1
|
import { clsx } from 'clsx';
|
|
4
2
|
import type { KeyboardEventHandler, MouseEvent } from 'react';
|
|
5
3
|
|
|
@@ -26,7 +24,6 @@ export type SwitchProps = CommonProps & {
|
|
|
26
24
|
const Switch = (props: SwitchProps) => {
|
|
27
25
|
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
28
26
|
|
|
29
|
-
const { isModern } = useTheme();
|
|
30
27
|
const {
|
|
31
28
|
checked,
|
|
32
29
|
className,
|
|
@@ -44,25 +41,6 @@ const Switch = (props: SwitchProps) => {
|
|
|
44
41
|
}
|
|
45
42
|
};
|
|
46
43
|
|
|
47
|
-
const returnIcon = () => {
|
|
48
|
-
if (isModern) {
|
|
49
|
-
return <span className="np-switch--thumb" />;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (checked) {
|
|
53
|
-
return (
|
|
54
|
-
<span className="np-switch--thumb">
|
|
55
|
-
<CheckCircleFill size={24} />
|
|
56
|
-
</span>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
return (
|
|
60
|
-
<span className="np-switch--thumb">
|
|
61
|
-
<CrossCircleFill size={24} />
|
|
62
|
-
</span>
|
|
63
|
-
);
|
|
64
|
-
};
|
|
65
|
-
|
|
66
44
|
const ariaLabelledby =
|
|
67
45
|
(ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
|
|
68
46
|
|
|
@@ -70,7 +48,6 @@ const Switch = (props: SwitchProps) => {
|
|
|
70
48
|
<span
|
|
71
49
|
className={clsx(
|
|
72
50
|
'np-switch',
|
|
73
|
-
|
|
74
51
|
{
|
|
75
52
|
'np-switch--unchecked': !checked,
|
|
76
53
|
'np-switch--checked': checked,
|
|
@@ -89,7 +66,7 @@ const Switch = (props: SwitchProps) => {
|
|
|
89
66
|
onClick={!disabled ? onClick : undefined}
|
|
90
67
|
onKeyDown={!disabled ? handleKeyDown : undefined}
|
|
91
68
|
>
|
|
92
|
-
|
|
69
|
+
<span className="np-switch--thumb" />
|
|
93
70
|
<input type="checkbox" checked={checked} readOnly />
|
|
94
71
|
</span>
|
|
95
72
|
);
|
|
@@ -12,28 +12,7 @@ exports[`Switch renders component when checked 1`] = `
|
|
|
12
12
|
>
|
|
13
13
|
<span
|
|
14
14
|
class="np-switch--thumb"
|
|
15
|
-
|
|
16
|
-
<span
|
|
17
|
-
aria-hidden="true"
|
|
18
|
-
class="tw-icon tw-icon-check-circle-fill "
|
|
19
|
-
data-testid="check-circle-fill-icon"
|
|
20
|
-
role="presentation"
|
|
21
|
-
>
|
|
22
|
-
<svg
|
|
23
|
-
fill="currentColor"
|
|
24
|
-
focusable="false"
|
|
25
|
-
height="24"
|
|
26
|
-
viewBox="0 0 24 24"
|
|
27
|
-
width="24"
|
|
28
|
-
>
|
|
29
|
-
<path
|
|
30
|
-
clip-rule="evenodd"
|
|
31
|
-
d="M12 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm-1.32-5.397 7.712-7.711-1.212-1.213-7.109 7.109-3.465-3.466-1.212 1.212 4.068 4.069a.861.861 0 0 0 1.219 0Z"
|
|
32
|
-
fill-rule="evenodd"
|
|
33
|
-
/>
|
|
34
|
-
</svg>
|
|
35
|
-
</span>
|
|
36
|
-
</span>
|
|
15
|
+
/>
|
|
37
16
|
<input
|
|
38
17
|
checked=""
|
|
39
18
|
readonly=""
|
|
@@ -55,28 +34,7 @@ exports[`Switch renders component when unchecked 1`] = `
|
|
|
55
34
|
>
|
|
56
35
|
<span
|
|
57
36
|
class="np-switch--thumb"
|
|
58
|
-
|
|
59
|
-
<span
|
|
60
|
-
aria-hidden="true"
|
|
61
|
-
class="tw-icon tw-icon-cross-circle-fill "
|
|
62
|
-
data-testid="cross-circle-fill-icon"
|
|
63
|
-
role="presentation"
|
|
64
|
-
>
|
|
65
|
-
<svg
|
|
66
|
-
fill="currentColor"
|
|
67
|
-
focusable="false"
|
|
68
|
-
height="24"
|
|
69
|
-
viewBox="0 0 24 24"
|
|
70
|
-
width="24"
|
|
71
|
-
>
|
|
72
|
-
<path
|
|
73
|
-
clip-rule="evenodd"
|
|
74
|
-
d="M1.714 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001ZM12 10.8l4.243-4.244 1.2 1.2L13.2 12l4.243 4.243-1.2 1.2L12 13.2l-4.243 4.243-1.2-1.2L10.8 12 6.557 7.756l1.2-1.2L12 10.8Z"
|
|
75
|
-
fill-rule="evenodd"
|
|
76
|
-
/>
|
|
77
|
-
</svg>
|
|
78
|
-
</span>
|
|
79
|
-
</span>
|
|
37
|
+
/>
|
|
80
38
|
<input
|
|
81
39
|
readonly=""
|
|
82
40
|
type="checkbox"
|