@transferwise/components 0.0.0-experimental-f90e29e → 0.0.0-experimental-9a8e986
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/drawer/Drawer.js +1 -1
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +1 -1
- package/build/drawer/Drawer.mjs.map +1 -1
- 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/drawer/Drawer.tsx +1 -1
- 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/drawer/Drawer.js
CHANGED
|
@@ -40,7 +40,7 @@ function Drawer({
|
|
|
40
40
|
id: overlayId,
|
|
41
41
|
role: role,
|
|
42
42
|
"aria-modal": true,
|
|
43
|
-
"aria-labelledby": ariaLabelledBy
|
|
43
|
+
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
44
44
|
className: clsx.clsx('np-drawer', className),
|
|
45
45
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
46
46
|
className: clsx.clsx('np-drawer-header', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,cAAA,CAACE,oBAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGf,UAAS;AAAAN,MAAAA,QAAA,eACxEsB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,SAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,eAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,cAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,cAAA,CAACa,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
package/build/drawer/Drawer.mjs
CHANGED
|
@@ -38,7 +38,7 @@ function Drawer({
|
|
|
38
38
|
id: overlayId,
|
|
39
39
|
role: role,
|
|
40
40
|
"aria-modal": true,
|
|
41
|
-
"aria-labelledby": ariaLabelledBy
|
|
41
|
+
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
42
42
|
className: clsx('np-drawer', className),
|
|
43
43
|
children: [/*#__PURE__*/jsxs("div", {
|
|
44
44
|
className: clsx('np-drawer-header', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={
|
|
1
|
+
{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,GAAA,CAACE,YAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGf,QAAS;AAAAN,MAAAA,QAAA,eACxEsB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,IAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,IAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,GAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,GAAA,CAACa,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
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
package/src/drawer/Drawer.tsx
CHANGED
|
@@ -54,7 +54,7 @@ export default function Drawer({
|
|
|
54
54
|
id={overlayId}
|
|
55
55
|
role={role}
|
|
56
56
|
aria-modal
|
|
57
|
-
aria-labelledby={
|
|
57
|
+
aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}
|
|
58
58
|
className={clsx('np-drawer', className)}
|
|
59
59
|
>
|
|
60
60
|
<div
|
|
@@ -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"
|