@transferwise/components 46.71.6 → 46.71.8
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/actionButton/ActionButton.js +1 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs +1 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +6 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +7 -2
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/main.css +11 -0
- package/build/styles/actionButton/ActionButton.css +11 -0
- package/build/styles/main.css +11 -0
- package/build/types/actionButton/ActionButton.d.ts +3 -3
- package/build/types/actionButton/ActionButton.d.ts.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +2 -2
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/actionButton/ActionButton.css +11 -0
- package/src/actionButton/ActionButton.less +14 -0
- package/src/actionButton/ActionButton.story.tsx +26 -15
- package/src/actionButton/ActionButton.tsx +7 -3
- package/src/actionOption/ActionOption.story.tsx +5 -1
- package/src/actionOption/ActionOption.tsx +8 -2
- package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
- package/src/dateLookup/DateLookup.story.tsx +1 -1
- package/src/dateLookup/DateLookup.testingLibrary.spec.js +20 -3
- package/src/dateLookup/dateTrigger/DateTrigger.tsx +7 -5
- package/src/main.css +11 -0
|
@@ -16,7 +16,7 @@ const ActionButton = /*#__PURE__*/React.forwardRef(({
|
|
|
16
16
|
}, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
17
17
|
ref: reference,
|
|
18
18
|
type: "button",
|
|
19
|
-
className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
|
|
19
|
+
className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
|
|
20
20
|
disabled: disabled,
|
|
21
21
|
onClick: onClick,
|
|
22
22
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n priority?: PriorityPrimary | PrioritySecondary;\n /**\n * @deprecated use `children` instead\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.SECONDARY
|
|
1
|
+
{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\nexport type ActionButtonProps = {\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated use `children` instead\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;AAaA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
|
|
@@ -14,7 +14,7 @@ const ActionButton = /*#__PURE__*/forwardRef(({
|
|
|
14
14
|
}, reference) => /*#__PURE__*/jsx("button", {
|
|
15
15
|
ref: reference,
|
|
16
16
|
type: "button",
|
|
17
|
-
className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
|
|
17
|
+
className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
|
|
18
18
|
disabled: disabled,
|
|
19
19
|
onClick: onClick,
|
|
20
20
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary } from '../common';\n\nexport type ActionButtonProps = {\n priority?: PriorityPrimary | PrioritySecondary;\n /**\n * @deprecated use `children` instead\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.SECONDARY
|
|
1
|
+
{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\nexport type ActionButtonProps = {\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n /**\n * @deprecated use `children` instead\n */\n text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n (\n {\n disabled = false,\n className = undefined,\n onClick,\n priority = Priority.PRIMARY,\n text,\n children,\n ...rest\n }: ActionButtonProps,\n reference,\n ) => (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-action-btn',\n 'np-text-body-default-bold',\n priority === Priority.TERTIARY\n ? 'btn-priority-3'\n : priority === Priority.SECONDARY\n ? 'btn-priority-2'\n : 'btn-priority-1',\n className,\n )}\n disabled={disabled}\n onClick={onClick}\n {...rest}\n >\n {children || text}\n </button>\n ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;AAaA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {
|
|
1
|
+
{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n const labels: string[] = [];\n\n if (typeof title === 'string') {\n labels.push(title);\n }\n\n if (typeof action === 'string') {\n labels.push(action);\n }\n\n return labels.join(', ') || undefined;\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <ActionButton\n priority={priority}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </ActionButton>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;;;AA2BMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,SAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,cAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {
|
|
1
|
+
{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport ActionButton from '../actionButton';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n action: React.ReactNode;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n const labels: string[] = [];\n\n if (typeof title === 'string') {\n labels.push(title);\n }\n\n if (typeof action === 'string') {\n labels.push(action);\n }\n\n return labels.join(', ') || undefined;\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <ActionButton\n priority={priority}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </ActionButton>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","sharedProps","clsx","getAriaLabel","labels","push","join","undefined","_jsx","Option","button","ActionButton","children"],"mappings":";;;;;;AA2BMA,MAAAA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;AAClBC,EAAAA,EAAAA;AAAE,CACgB,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBT,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEM,IAAI,CAAC,kBAAkB,EAAEN,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMG,YAAY,GAAGA,MAAyB;IAC5C,MAAMC,MAAM,GAAa,EAAE,CAAA;AAE3B,IAAA,IAAI,OAAOX,KAAK,KAAK,QAAQ,EAAE;AAC7BW,MAAAA,MAAM,CAACC,IAAI,CAACZ,KAAK,CAAC,CAAA;AACpB,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BkB,MAAAA,MAAM,CAACC,IAAI,CAACnB,MAAM,CAAC,CAAA;AACrB,KAAA;AAEA,IAAA,OAAOkB,MAAM,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GACtC,CAAA;EAED,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDR,WAAW;IACfS,MAAM,eACJF,GAAA,CAACG,YAAY,EAAA;AACXxB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAqB,MAAAA,QAAA,EAEhB1B,MAAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -28,13 +28,15 @@ const DateTrigger = ({
|
|
|
28
28
|
locale,
|
|
29
29
|
formatMessage
|
|
30
30
|
} = reactIntl.useIntl();
|
|
31
|
+
const valueIdPrefix = React.useId();
|
|
31
32
|
const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
|
|
33
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
32
34
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
33
35
|
children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
|
|
34
36
|
"aria-haspopup": "dialog",
|
|
35
37
|
"aria-expanded": overlayId != null,
|
|
36
38
|
"aria-controls": overlayId,
|
|
37
|
-
"aria-labelledby":
|
|
39
|
+
"aria-labelledby": ariaLabelIds.filter(Boolean).join(' '),
|
|
38
40
|
className: `btn btn-${size$1} btn-input np-date-trigger`,
|
|
39
41
|
disabled: disabled,
|
|
40
42
|
type: "button",
|
|
@@ -42,10 +44,12 @@ const DateTrigger = ({
|
|
|
42
44
|
children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
43
45
|
as: "span",
|
|
44
46
|
className: "np-date-trigger-label m-r-1",
|
|
47
|
+
id: ariaLabelIds[1],
|
|
45
48
|
children: label
|
|
46
49
|
}), selectedDate ? /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
47
50
|
as: "span",
|
|
48
51
|
type: typography.Typography.BODY_LARGE,
|
|
52
|
+
id: ariaLabelIds[2],
|
|
49
53
|
children: formatting.formatDate(selectedDate, locale, {
|
|
50
54
|
day: 'numeric',
|
|
51
55
|
month: monthFormat,
|
|
@@ -53,6 +57,7 @@ const DateTrigger = ({
|
|
|
53
57
|
})
|
|
54
58
|
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
55
59
|
className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
|
|
60
|
+
id: ariaLabelIds[2],
|
|
56
61
|
children: placeholder
|
|
57
62
|
}), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
58
63
|
orientation: position.Position.BOTTOM,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n
|
|
1
|
+
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n id={ariaLabelIds[2]}\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
|
|
|
3
3
|
import Chevron from '../../chevron/Chevron.mjs';
|
|
4
4
|
import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
|
|
5
5
|
import dateTriggerMessages from './DateTrigger.messages.mjs';
|
|
6
|
-
import { useContext } from 'react';
|
|
6
|
+
import { useId, useContext } from 'react';
|
|
7
7
|
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
|
|
8
8
|
import Body from '../../body/Body.mjs';
|
|
9
9
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
@@ -26,13 +26,15 @@ const DateTrigger = ({
|
|
|
26
26
|
locale,
|
|
27
27
|
formatMessage
|
|
28
28
|
} = useIntl();
|
|
29
|
+
const valueIdPrefix = useId();
|
|
29
30
|
const overlayId = useContext(OverlayIdContext);
|
|
31
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
30
32
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
31
33
|
children: [/*#__PURE__*/jsxs("button", {
|
|
32
34
|
"aria-haspopup": "dialog",
|
|
33
35
|
"aria-expanded": overlayId != null,
|
|
34
36
|
"aria-controls": overlayId,
|
|
35
|
-
"aria-labelledby":
|
|
37
|
+
"aria-labelledby": ariaLabelIds.filter(Boolean).join(' '),
|
|
36
38
|
className: `btn btn-${size} btn-input np-date-trigger`,
|
|
37
39
|
disabled: disabled,
|
|
38
40
|
type: "button",
|
|
@@ -40,10 +42,12 @@ const DateTrigger = ({
|
|
|
40
42
|
children: [label && /*#__PURE__*/jsx(Body, {
|
|
41
43
|
as: "span",
|
|
42
44
|
className: "np-date-trigger-label m-r-1",
|
|
45
|
+
id: ariaLabelIds[1],
|
|
43
46
|
children: label
|
|
44
47
|
}), selectedDate ? /*#__PURE__*/jsx(Body, {
|
|
45
48
|
as: "span",
|
|
46
49
|
type: Typography.BODY_LARGE,
|
|
50
|
+
id: ariaLabelIds[2],
|
|
47
51
|
children: formatDate(selectedDate, locale, {
|
|
48
52
|
day: 'numeric',
|
|
49
53
|
month: monthFormat,
|
|
@@ -51,6 +55,7 @@ const DateTrigger = ({
|
|
|
51
55
|
})
|
|
52
56
|
}) : /*#__PURE__*/jsx("span", {
|
|
53
57
|
className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
|
|
58
|
+
id: ariaLabelIds[2],
|
|
54
59
|
children: placeholder
|
|
55
60
|
}), !onClear ? /*#__PURE__*/jsx(Chevron, {
|
|
56
61
|
orientation: Position.BOTTOM,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n
|
|
1
|
+
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n id={ariaLabelIds[2]}\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","id","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
|
|
|
186
186
|
background-color: var(--color-background-neutral);
|
|
187
187
|
color: var(--color-interactive-primary);
|
|
188
188
|
}
|
|
189
|
+
.np-action-btn.btn-priority-3 {
|
|
190
|
+
background-color: transparent !important;
|
|
191
|
+
color: var(--color-interactive-primary);
|
|
192
|
+
}
|
|
189
193
|
.np-action-btn:not(:disabled):hover {
|
|
190
194
|
background-color: #008fc9;
|
|
191
195
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
|
|
|
193
197
|
.np-action-btn:not(:disabled):hover.btn-priority-2 {
|
|
194
198
|
background-color: var(--color-background-neutral-hover);
|
|
195
199
|
}
|
|
200
|
+
.np-action-btn:not(:disabled):hover.btn-priority-3 {
|
|
201
|
+
color: var(--color-interactive-primary-hover);
|
|
202
|
+
}
|
|
196
203
|
.np-action-btn:not(:disabled):active {
|
|
197
204
|
box-shadow: none;
|
|
198
205
|
border-color: transparent;
|
|
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
|
|
|
202
209
|
.np-action-btn:not(:disabled):active.btn-priority-2 {
|
|
203
210
|
background-color: var(--color-background-neutral-active);
|
|
204
211
|
}
|
|
212
|
+
.np-action-btn:not(:disabled):active.btn-priority-3 {
|
|
213
|
+
color: var(--color-interactive-primary-active);
|
|
214
|
+
background-color: var(--color-background-screen-active) !important;
|
|
215
|
+
}
|
|
205
216
|
.np-action-btn:not(:disabled):focus {
|
|
206
217
|
box-shadow: none;
|
|
207
218
|
}
|
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
background-color: var(--color-background-neutral);
|
|
33
33
|
color: var(--color-interactive-primary);
|
|
34
34
|
}
|
|
35
|
+
.np-action-btn.btn-priority-3 {
|
|
36
|
+
background-color: transparent !important;
|
|
37
|
+
color: var(--color-interactive-primary);
|
|
38
|
+
}
|
|
35
39
|
.np-action-btn:not(:disabled):hover {
|
|
36
40
|
background-color: #008fc9;
|
|
37
41
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -39,6 +43,9 @@
|
|
|
39
43
|
.np-action-btn:not(:disabled):hover.btn-priority-2 {
|
|
40
44
|
background-color: var(--color-background-neutral-hover);
|
|
41
45
|
}
|
|
46
|
+
.np-action-btn:not(:disabled):hover.btn-priority-3 {
|
|
47
|
+
color: var(--color-interactive-primary-hover);
|
|
48
|
+
}
|
|
42
49
|
.np-action-btn:not(:disabled):active {
|
|
43
50
|
box-shadow: none;
|
|
44
51
|
border-color: transparent;
|
|
@@ -48,6 +55,10 @@
|
|
|
48
55
|
.np-action-btn:not(:disabled):active.btn-priority-2 {
|
|
49
56
|
background-color: var(--color-background-neutral-active);
|
|
50
57
|
}
|
|
58
|
+
.np-action-btn:not(:disabled):active.btn-priority-3 {
|
|
59
|
+
color: var(--color-interactive-primary-active);
|
|
60
|
+
background-color: var(--color-background-screen-active) !important;
|
|
61
|
+
}
|
|
51
62
|
.np-action-btn:not(:disabled):focus {
|
|
52
63
|
box-shadow: none;
|
|
53
64
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
|
|
|
186
186
|
background-color: var(--color-background-neutral);
|
|
187
187
|
color: var(--color-interactive-primary);
|
|
188
188
|
}
|
|
189
|
+
.np-action-btn.btn-priority-3 {
|
|
190
|
+
background-color: transparent !important;
|
|
191
|
+
color: var(--color-interactive-primary);
|
|
192
|
+
}
|
|
189
193
|
.np-action-btn:not(:disabled):hover {
|
|
190
194
|
background-color: #008fc9;
|
|
191
195
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
|
|
|
193
197
|
.np-action-btn:not(:disabled):hover.btn-priority-2 {
|
|
194
198
|
background-color: var(--color-background-neutral-hover);
|
|
195
199
|
}
|
|
200
|
+
.np-action-btn:not(:disabled):hover.btn-priority-3 {
|
|
201
|
+
color: var(--color-interactive-primary-hover);
|
|
202
|
+
}
|
|
196
203
|
.np-action-btn:not(:disabled):active {
|
|
197
204
|
box-shadow: none;
|
|
198
205
|
border-color: transparent;
|
|
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
|
|
|
202
209
|
.np-action-btn:not(:disabled):active.btn-priority-2 {
|
|
203
210
|
background-color: var(--color-background-neutral-active);
|
|
204
211
|
}
|
|
212
|
+
.np-action-btn:not(:disabled):active.btn-priority-3 {
|
|
213
|
+
color: var(--color-interactive-primary-active);
|
|
214
|
+
background-color: var(--color-background-screen-active) !important;
|
|
215
|
+
}
|
|
205
216
|
.np-action-btn:not(:disabled):focus {
|
|
206
217
|
box-shadow: none;
|
|
207
218
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
import { PriorityPrimary, PrioritySecondary } from '../common';
|
|
2
|
+
import { PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
|
|
3
3
|
export type ActionButtonProps = {
|
|
4
|
-
priority?: PriorityPrimary | PrioritySecondary;
|
|
4
|
+
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
|
|
5
5
|
/**
|
|
6
6
|
* @deprecated use `children` instead
|
|
7
7
|
*/
|
|
8
8
|
text?: string;
|
|
9
9
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
10
10
|
declare const ActionButton: import("react").ForwardRefExoticComponent<{
|
|
11
|
-
priority?: PriorityPrimary | PrioritySecondary;
|
|
11
|
+
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
|
|
12
12
|
/**
|
|
13
13
|
* @deprecated use `children` instead
|
|
14
14
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,QAAA,MAAM,YAAY;eAPL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAoCd,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CommonProps, PriorityPrimary, PrioritySecondary } from '../common';
|
|
1
|
+
import { CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
|
|
2
2
|
export type ActionOptionProps = {
|
|
3
3
|
complex?: boolean;
|
|
4
4
|
content?: React.ReactNode;
|
|
@@ -8,7 +8,7 @@ export type ActionOptionProps = {
|
|
|
8
8
|
onClick: () => void;
|
|
9
9
|
title: React.ReactNode;
|
|
10
10
|
action: React.ReactNode;
|
|
11
|
-
priority?: PriorityPrimary | PrioritySecondary;
|
|
11
|
+
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
|
|
12
12
|
showMediaCircle?: boolean;
|
|
13
13
|
isContainerAligned?: boolean;
|
|
14
14
|
as?: React.ElementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAGnB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,YAAY,sJAcf,iBAAiB,gCA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"DateTrigger.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAQ5F,UAAU,gBAAgB;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.71.
|
|
3
|
+
"version": "46.71.8",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
-
"@transferwise/
|
|
94
|
+
"@transferwise/neptune-css": "14.19.1",
|
|
95
95
|
"@wise/components-theming": "1.6.1",
|
|
96
|
-
"@transferwise/
|
|
96
|
+
"@transferwise/less-config": "3.1.0"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
@@ -32,6 +32,10 @@
|
|
|
32
32
|
background-color: var(--color-background-neutral);
|
|
33
33
|
color: var(--color-interactive-primary);
|
|
34
34
|
}
|
|
35
|
+
.np-action-btn.btn-priority-3 {
|
|
36
|
+
background-color: transparent !important;
|
|
37
|
+
color: var(--color-interactive-primary);
|
|
38
|
+
}
|
|
35
39
|
.np-action-btn:not(:disabled):hover {
|
|
36
40
|
background-color: #008fc9;
|
|
37
41
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -39,6 +43,9 @@
|
|
|
39
43
|
.np-action-btn:not(:disabled):hover.btn-priority-2 {
|
|
40
44
|
background-color: var(--color-background-neutral-hover);
|
|
41
45
|
}
|
|
46
|
+
.np-action-btn:not(:disabled):hover.btn-priority-3 {
|
|
47
|
+
color: var(--color-interactive-primary-hover);
|
|
48
|
+
}
|
|
42
49
|
.np-action-btn:not(:disabled):active {
|
|
43
50
|
box-shadow: none;
|
|
44
51
|
border-color: transparent;
|
|
@@ -48,6 +55,10 @@
|
|
|
48
55
|
.np-action-btn:not(:disabled):active.btn-priority-2 {
|
|
49
56
|
background-color: var(--color-background-neutral-active);
|
|
50
57
|
}
|
|
58
|
+
.np-action-btn:not(:disabled):active.btn-priority-3 {
|
|
59
|
+
color: var(--color-interactive-primary-active);
|
|
60
|
+
background-color: var(--color-background-screen-active) !important;
|
|
61
|
+
}
|
|
51
62
|
.np-action-btn:not(:disabled):focus {
|
|
52
63
|
box-shadow: none;
|
|
53
64
|
}
|
|
@@ -24,6 +24,11 @@
|
|
|
24
24
|
color: var(--color-interactive-primary);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
&.btn-priority-3 {
|
|
28
|
+
background-color: transparent !important;
|
|
29
|
+
color: var(--color-interactive-primary);
|
|
30
|
+
}
|
|
31
|
+
|
|
27
32
|
&:not(:disabled) {
|
|
28
33
|
&:hover {
|
|
29
34
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -31,6 +36,10 @@
|
|
|
31
36
|
&.btn-priority-2 {
|
|
32
37
|
background-color: var(--color-background-neutral-hover);
|
|
33
38
|
}
|
|
39
|
+
|
|
40
|
+
&.btn-priority-3 {
|
|
41
|
+
color: var(--color-interactive-primary-hover);
|
|
42
|
+
}
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
&:active {
|
|
@@ -41,6 +50,11 @@
|
|
|
41
50
|
&.btn-priority-2 {
|
|
42
51
|
background-color: var(--color-background-neutral-active);
|
|
43
52
|
}
|
|
53
|
+
|
|
54
|
+
&.btn-priority-3 {
|
|
55
|
+
color: var(--color-interactive-primary-active);
|
|
56
|
+
background-color: var(--color-background-screen-active) !important;
|
|
57
|
+
}
|
|
44
58
|
}
|
|
45
59
|
|
|
46
60
|
&:focus {
|
|
@@ -16,21 +16,32 @@ type Story = StoryObj<typeof ActionButton>;
|
|
|
16
16
|
export const Basic: Story = storyConfig(
|
|
17
17
|
{
|
|
18
18
|
render: (args) => (
|
|
19
|
-
<div style={{ display: 'flex',
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
19
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
|
|
20
|
+
<div>
|
|
21
|
+
<ActionButton priority="primary" {...args}>
|
|
22
|
+
Primary label
|
|
23
|
+
</ActionButton>
|
|
24
|
+
<ActionButton priority="secondary" {...args}>
|
|
25
|
+
Secondary label
|
|
26
|
+
</ActionButton>
|
|
27
|
+
<ActionButton priority="tertiary" {...args}>
|
|
28
|
+
Tertiary label
|
|
29
|
+
</ActionButton>
|
|
30
|
+
</div>
|
|
31
|
+
<div>
|
|
32
|
+
<ActionButton priority="primary" {...args}>
|
|
33
|
+
<Settings />
|
|
34
|
+
Primary label
|
|
35
|
+
</ActionButton>
|
|
36
|
+
<ActionButton priority="secondary" {...args}>
|
|
37
|
+
<Settings />
|
|
38
|
+
Secondary label
|
|
39
|
+
</ActionButton>
|
|
40
|
+
<ActionButton priority="tertiary" {...args}>
|
|
41
|
+
<Settings />
|
|
42
|
+
Tertiary label
|
|
43
|
+
</ActionButton>
|
|
44
|
+
</div>
|
|
34
45
|
</div>
|
|
35
46
|
),
|
|
36
47
|
},
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { ButtonHTMLAttributes, forwardRef } from 'react';
|
|
3
3
|
|
|
4
|
-
import { Priority, PriorityPrimary, PrioritySecondary } from '../common';
|
|
4
|
+
import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
|
|
5
5
|
|
|
6
6
|
export type ActionButtonProps = {
|
|
7
|
-
priority?: PriorityPrimary | PrioritySecondary;
|
|
7
|
+
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
|
|
8
8
|
/**
|
|
9
9
|
* @deprecated use `children` instead
|
|
10
10
|
*/
|
|
@@ -30,7 +30,11 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
|
|
|
30
30
|
className={clsx(
|
|
31
31
|
'np-action-btn',
|
|
32
32
|
'np-text-body-default-bold',
|
|
33
|
-
priority === Priority.
|
|
33
|
+
priority === Priority.TERTIARY
|
|
34
|
+
? 'btn-priority-3'
|
|
35
|
+
: priority === Priority.SECONDARY
|
|
36
|
+
? 'btn-priority-2'
|
|
37
|
+
: 'btn-priority-1',
|
|
34
38
|
className,
|
|
35
39
|
)}
|
|
36
40
|
disabled={disabled}
|
|
@@ -25,10 +25,14 @@ export const Basic: Story = {
|
|
|
25
25
|
render: (args) => <ActionOption {...args} />,
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
export const
|
|
28
|
+
export const WithSecondaryPriority: Story = {
|
|
29
29
|
render: (args) => <ActionOption priority="secondary" {...args} />,
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
+
export const WithTertiaryPriority: Story = {
|
|
33
|
+
render: (args) => <ActionOption priority="tertiary" {...args} />,
|
|
34
|
+
};
|
|
35
|
+
|
|
32
36
|
export const WithContainerContent: Story = {
|
|
33
37
|
render: (args) => (
|
|
34
38
|
<>
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
|
|
3
3
|
import ActionButton from '../actionButton';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
CommonProps,
|
|
6
|
+
Priority,
|
|
7
|
+
PriorityPrimary,
|
|
8
|
+
PrioritySecondary,
|
|
9
|
+
PriorityTertiary,
|
|
10
|
+
} from '../common';
|
|
5
11
|
import Option from '../common/Option';
|
|
6
12
|
|
|
7
13
|
export type ActionOptionProps = {
|
|
@@ -13,7 +19,7 @@ export type ActionOptionProps = {
|
|
|
13
19
|
onClick: () => void;
|
|
14
20
|
title: React.ReactNode;
|
|
15
21
|
action: React.ReactNode;
|
|
16
|
-
priority?: PriorityPrimary | PrioritySecondary;
|
|
22
|
+
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
|
|
17
23
|
showMediaCircle?: boolean;
|
|
18
24
|
isContainerAligned?: boolean;
|
|
19
25
|
as?: React.ElementType;
|
|
@@ -28,7 +28,7 @@ describe('DateLookup', () => {
|
|
|
28
28
|
<DateLookup value={initialValue} onChange={() => {}} />
|
|
29
29
|
</Field>,
|
|
30
30
|
);
|
|
31
|
-
const button = screen.getByRole('button', { name:
|
|
31
|
+
const button = screen.getByRole('button', { name: /^Date of birth/ });
|
|
32
32
|
|
|
33
33
|
expect(button).toBeInTheDocument();
|
|
34
34
|
expect(button).toHaveAttribute('aria-haspopup');
|
|
@@ -66,7 +66,7 @@ export const WithField = () => {
|
|
|
66
66
|
const disabled = boolean('disabled', false);
|
|
67
67
|
const label = text('label', 'label');
|
|
68
68
|
const monthFormat = select('monthFormat', ['long', 'short'], 'long');
|
|
69
|
-
const placeholder = text('placeholder', '
|
|
69
|
+
const placeholder = text('placeholder', 'Select date');
|
|
70
70
|
const id = text('id', 'date-lookup');
|
|
71
71
|
|
|
72
72
|
const clearable = boolean('clearable', true);
|
|
@@ -23,7 +23,7 @@ describe('DateLookup (events)', () => {
|
|
|
23
23
|
/** @type {jest.Mock} */
|
|
24
24
|
let handleChange;
|
|
25
25
|
|
|
26
|
-
const setup = async () => {
|
|
26
|
+
const setup = async (overrides = {}) => {
|
|
27
27
|
handleChange = jest.fn();
|
|
28
28
|
|
|
29
29
|
/** @type {import('@testing-library/react').RenderResult} */
|
|
@@ -38,13 +38,14 @@ describe('DateLookup (events)', () => {
|
|
|
38
38
|
min={min}
|
|
39
39
|
max={max}
|
|
40
40
|
size="lg"
|
|
41
|
-
placeholder="
|
|
41
|
+
placeholder="Select date"
|
|
42
42
|
label="label"
|
|
43
43
|
aria-labelledby="prioritized-label"
|
|
44
44
|
disabled={false}
|
|
45
45
|
clearable={false}
|
|
46
46
|
onChange={handleChange}
|
|
47
47
|
onClick={jest.fn()}
|
|
48
|
+
{...overrides}
|
|
48
49
|
/>
|
|
49
50
|
</>,
|
|
50
51
|
);
|
|
@@ -148,7 +149,23 @@ describe('DateLookup (events)', () => {
|
|
|
148
149
|
|
|
149
150
|
it('supports custom `aria-labelledby` attribute', async () => {
|
|
150
151
|
const view = await setup();
|
|
151
|
-
expect(screen.getByRole('button', { name:
|
|
152
|
+
expect(screen.getByRole('button', { name: /^Prioritized label/ })).toBeInTheDocument();
|
|
153
|
+
await closeDateLookup(view);
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
it('reads our the HTML label as well as the input prefix and the value', async () => {
|
|
157
|
+
const view = await setup();
|
|
158
|
+
expect(
|
|
159
|
+
screen.getByRole('button', { name: 'Prioritized label label 27 December 2018' }),
|
|
160
|
+
).toBeInTheDocument();
|
|
161
|
+
await closeDateLookup(view);
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
it('reads our the HTML label as well as the input prefix and the placeholder', async () => {
|
|
165
|
+
const view = await setup({ value: undefined });
|
|
166
|
+
expect(
|
|
167
|
+
screen.getByRole('button', { name: 'Prioritized label label Select date' }),
|
|
168
|
+
).toBeInTheDocument();
|
|
152
169
|
await closeDateLookup(view);
|
|
153
170
|
});
|
|
154
171
|
});
|
|
@@ -6,7 +6,7 @@ import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '..
|
|
|
6
6
|
import { CloseButton } from '../../common/closeButton/CloseButton';
|
|
7
7
|
|
|
8
8
|
import messages from './DateTrigger.messages';
|
|
9
|
-
import { useContext } from 'react';
|
|
9
|
+
import { useContext, useId } from 'react';
|
|
10
10
|
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
|
|
11
11
|
import Body from '../../body';
|
|
12
12
|
|
|
@@ -34,8 +34,9 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
34
34
|
onClear,
|
|
35
35
|
}) => {
|
|
36
36
|
const { locale, formatMessage } = useIntl();
|
|
37
|
-
|
|
37
|
+
const valueIdPrefix = useId();
|
|
38
38
|
const overlayId = useContext(OverlayIdContext);
|
|
39
|
+
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
39
40
|
|
|
40
41
|
return (
|
|
41
42
|
<>
|
|
@@ -43,19 +44,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
43
44
|
aria-haspopup="dialog"
|
|
44
45
|
aria-expanded={overlayId != null}
|
|
45
46
|
aria-controls={overlayId}
|
|
46
|
-
aria-labelledby={
|
|
47
|
+
aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}
|
|
47
48
|
className={`btn btn-${size} btn-input np-date-trigger`}
|
|
48
49
|
disabled={disabled}
|
|
49
50
|
type="button"
|
|
50
51
|
onClick={onClick}
|
|
51
52
|
>
|
|
52
53
|
{label && (
|
|
53
|
-
<Body as="span" className="np-date-trigger-label m-r-1">
|
|
54
|
+
<Body as="span" className="np-date-trigger-label m-r-1" id={ariaLabelIds[1]}>
|
|
54
55
|
{label}
|
|
55
56
|
</Body>
|
|
56
57
|
)}
|
|
57
58
|
{selectedDate ? (
|
|
58
|
-
<Body as="span" type={Typography.BODY_LARGE}>
|
|
59
|
+
<Body as="span" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>
|
|
59
60
|
{formatDate(selectedDate, locale, {
|
|
60
61
|
day: 'numeric',
|
|
61
62
|
month: monthFormat,
|
|
@@ -66,6 +67,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
|
|
|
66
67
|
<span
|
|
67
68
|
className="form-control-placeholder visible-xs-inline visible-sm-inline
|
|
68
69
|
visible-md-inline visible-lg-inline visible-xl-inline"
|
|
70
|
+
id={ariaLabelIds[2]}
|
|
69
71
|
>
|
|
70
72
|
{placeholder}
|
|
71
73
|
</span>
|
package/src/main.css
CHANGED
|
@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
|
|
|
186
186
|
background-color: var(--color-background-neutral);
|
|
187
187
|
color: var(--color-interactive-primary);
|
|
188
188
|
}
|
|
189
|
+
.np-action-btn.btn-priority-3 {
|
|
190
|
+
background-color: transparent !important;
|
|
191
|
+
color: var(--color-interactive-primary);
|
|
192
|
+
}
|
|
189
193
|
.np-action-btn:not(:disabled):hover {
|
|
190
194
|
background-color: #008fc9;
|
|
191
195
|
background-color: var(--color-interactive-accent-hover);
|
|
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
|
|
|
193
197
|
.np-action-btn:not(:disabled):hover.btn-priority-2 {
|
|
194
198
|
background-color: var(--color-background-neutral-hover);
|
|
195
199
|
}
|
|
200
|
+
.np-action-btn:not(:disabled):hover.btn-priority-3 {
|
|
201
|
+
color: var(--color-interactive-primary-hover);
|
|
202
|
+
}
|
|
196
203
|
.np-action-btn:not(:disabled):active {
|
|
197
204
|
box-shadow: none;
|
|
198
205
|
border-color: transparent;
|
|
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
|
|
|
202
209
|
.np-action-btn:not(:disabled):active.btn-priority-2 {
|
|
203
210
|
background-color: var(--color-background-neutral-active);
|
|
204
211
|
}
|
|
212
|
+
.np-action-btn:not(:disabled):active.btn-priority-3 {
|
|
213
|
+
color: var(--color-interactive-primary-active);
|
|
214
|
+
background-color: var(--color-background-screen-active) !important;
|
|
215
|
+
}
|
|
205
216
|
.np-action-btn:not(:disabled):focus {
|
|
206
217
|
box-shadow: none;
|
|
207
218
|
}
|