@transferwise/components 0.0.0-experimental-a04dfbe → 0.0.0-experimental-304e6fb
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/actionOption/ActionOption.js +9 -5
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +9 -5
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +3 -3
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/actionOption/ActionOption.tsx +12 -5
- package/src/button/Button.story.tsx +8 -0
|
@@ -41,7 +41,8 @@ const ActionOption = ({
|
|
|
41
41
|
showMediaAtAllSizes,
|
|
42
42
|
showMediaCircle,
|
|
43
43
|
isContainerAligned,
|
|
44
|
-
as
|
|
44
|
+
as,
|
|
45
|
+
'aria-label': ariaLabel
|
|
45
46
|
}) => {
|
|
46
47
|
const sharedProps = {
|
|
47
48
|
media,
|
|
@@ -56,14 +57,17 @@ const ActionOption = ({
|
|
|
56
57
|
as
|
|
57
58
|
};
|
|
58
59
|
const getAriaLabel = () => {
|
|
59
|
-
|
|
60
|
+
if (ariaLabel) {
|
|
61
|
+
return ariaLabel;
|
|
62
|
+
}
|
|
63
|
+
const generatedLabels = [];
|
|
60
64
|
if (typeof title === 'string') {
|
|
61
|
-
|
|
65
|
+
generatedLabels.push(title);
|
|
62
66
|
}
|
|
63
67
|
if (typeof action === 'string') {
|
|
64
|
-
|
|
68
|
+
generatedLabels.push(action);
|
|
65
69
|
}
|
|
66
|
-
return
|
|
70
|
+
return generatedLabels.join(', ') || undefined;
|
|
67
71
|
};
|
|
68
72
|
const mapPriority = priority => {
|
|
69
73
|
switch (priority) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\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?: ActionOptionPriority;\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
|
|
1
|
+
{"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\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?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\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 'aria-label': ariaLabel,\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 if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\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","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,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;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,cAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,eAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -39,7 +39,8 @@ const ActionOption = ({
|
|
|
39
39
|
showMediaAtAllSizes,
|
|
40
40
|
showMediaCircle,
|
|
41
41
|
isContainerAligned,
|
|
42
|
-
as
|
|
42
|
+
as,
|
|
43
|
+
'aria-label': ariaLabel
|
|
43
44
|
}) => {
|
|
44
45
|
const sharedProps = {
|
|
45
46
|
media,
|
|
@@ -54,14 +55,17 @@ const ActionOption = ({
|
|
|
54
55
|
as
|
|
55
56
|
};
|
|
56
57
|
const getAriaLabel = () => {
|
|
57
|
-
|
|
58
|
+
if (ariaLabel) {
|
|
59
|
+
return ariaLabel;
|
|
60
|
+
}
|
|
61
|
+
const generatedLabels = [];
|
|
58
62
|
if (typeof title === 'string') {
|
|
59
|
-
|
|
63
|
+
generatedLabels.push(title);
|
|
60
64
|
}
|
|
61
65
|
if (typeof action === 'string') {
|
|
62
|
-
|
|
66
|
+
generatedLabels.push(action);
|
|
63
67
|
}
|
|
64
|
-
return
|
|
68
|
+
return generatedLabels.join(', ') || undefined;
|
|
65
69
|
};
|
|
66
70
|
const mapPriority = priority => {
|
|
67
71
|
switch (priority) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\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?: ActionOptionPriority;\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
|
|
1
|
+
{"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\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?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\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 'aria-label': ariaLabel,\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 if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\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","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCMA,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;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBV,KAAK;IACLC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPL,QAAQ;IACRO,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;AAClBC,IAAAA,EAAAA;GACD,CAAA;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;IAEA,MAAMI,eAAe,GAAa,EAAE,CAAA;AAEpC,IAAA,IAAI,OAAOZ,KAAK,KAAK,QAAQ,EAAE;AAC7BY,MAAAA,eAAe,CAACC,IAAI,CAACb,KAAK,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BmB,MAAAA,eAAe,CAACC,IAAI,CAACpB,MAAM,CAAC,CAAA;AAC9B,KAAA;AAEA,IAAA,OAAOmB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS,CAAA;GAC/C,CAAA;EAED,MAAMC,WAAW,GAAItB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS,CAAA;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB,CAAA;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU,CAAA;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW,CAAA;AACpB,MAAA;AACE,QAAA,OAAO,SAAS,CAAA;AACpB,KAAA;GACD,CAAA;EAED,oBACEuB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT5B,MAAAA,QAAQ,EAAEsB,WAAW,CAACtB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYc,EAAAA,YAAY,EAAG;AAC3Bb,MAAAA,OAAO,EAAEA,OAAQ;AAAAyB,MAAAA,QAAA,EAEhB9B,MAAAA;KACK,CAAA;AACT,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
|
|
1
|
+
import { AriaLabelProperty, CommonProps, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
|
|
2
2
|
type ActionOptionPriority = PriorityPrimary | PrioritySecondary | PriorityTertiary | 'secondary-send';
|
|
3
3
|
export type ActionOptionProps = {
|
|
4
4
|
complex?: boolean;
|
|
@@ -13,7 +13,7 @@ export type ActionOptionProps = {
|
|
|
13
13
|
showMediaCircle?: boolean;
|
|
14
14
|
isContainerAligned?: boolean;
|
|
15
15
|
as?: React.ElementType;
|
|
16
|
-
} & CommonProps;
|
|
17
|
-
declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, }: ActionOptionProps) => import("react").JSX.Element;
|
|
16
|
+
} & CommonProps & AriaLabelProperty;
|
|
17
|
+
declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, "aria-label": ariaLabel, }: ActionOptionProps) => import("react").JSX.Element;
|
|
18
18
|
export default ActionOption;
|
|
19
19
|
//# sourceMappingURL=ActionOption.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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;AAInB,KAAK,oBAAoB,GACrB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,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,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"ActionOption.d.ts","sourceRoot":"","sources":["../../../src/actionOption/ActionOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EACjB,WAAW,EAEX,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,WAAW,CAAC;AAInB,KAAK,oBAAoB,GACrB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,CAAC;AAErB,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,oBAAoB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,GAAG,WAAW,GACb,iBAAiB,CAAC;AAEpB,QAAA,MAAM,YAAY,+KAef,iBAAiB,gCAgEnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-304e6fb",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,12 +92,12 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@transferwise/neptune-css": "
|
|
95
|
+
"@transferwise/neptune-css": "14.22.0",
|
|
96
96
|
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
100
|
-
"@transferwise/neptune-css": "
|
|
100
|
+
"@transferwise/neptune-css": "^14.9.6",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
|
|
3
3
|
import Button from '../button';
|
|
4
4
|
import {
|
|
5
|
+
AriaLabelProperty,
|
|
5
6
|
CommonProps,
|
|
6
7
|
Priority,
|
|
7
8
|
PriorityPrimary,
|
|
@@ -30,7 +31,8 @@ export type ActionOptionProps = {
|
|
|
30
31
|
showMediaCircle?: boolean;
|
|
31
32
|
isContainerAligned?: boolean;
|
|
32
33
|
as?: React.ElementType;
|
|
33
|
-
} & CommonProps
|
|
34
|
+
} & CommonProps &
|
|
35
|
+
AriaLabelProperty;
|
|
34
36
|
|
|
35
37
|
const ActionOption = ({
|
|
36
38
|
action,
|
|
@@ -46,6 +48,7 @@ const ActionOption = ({
|
|
|
46
48
|
showMediaCircle,
|
|
47
49
|
isContainerAligned,
|
|
48
50
|
as,
|
|
51
|
+
'aria-label': ariaLabel,
|
|
49
52
|
}: ActionOptionProps) => {
|
|
50
53
|
const sharedProps = {
|
|
51
54
|
media,
|
|
@@ -61,17 +64,21 @@ const ActionOption = ({
|
|
|
61
64
|
};
|
|
62
65
|
|
|
63
66
|
const getAriaLabel = (): string | undefined => {
|
|
64
|
-
|
|
67
|
+
if (ariaLabel) {
|
|
68
|
+
return ariaLabel;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
const generatedLabels: string[] = [];
|
|
65
72
|
|
|
66
73
|
if (typeof title === 'string') {
|
|
67
|
-
|
|
74
|
+
generatedLabels.push(title);
|
|
68
75
|
}
|
|
69
76
|
|
|
70
77
|
if (typeof action === 'string') {
|
|
71
|
-
|
|
78
|
+
generatedLabels.push(action);
|
|
72
79
|
}
|
|
73
80
|
|
|
74
|
-
return
|
|
81
|
+
return generatedLabels.join(', ') || undefined;
|
|
75
82
|
};
|
|
76
83
|
|
|
77
84
|
const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {
|
|
@@ -246,6 +246,13 @@ const meta: Meta<typeof Button> = {
|
|
|
246
246
|
disable: true,
|
|
247
247
|
},
|
|
248
248
|
},
|
|
249
|
+
children: {
|
|
250
|
+
table: {
|
|
251
|
+
type: {
|
|
252
|
+
summary: 'ReactNode',
|
|
253
|
+
},
|
|
254
|
+
},
|
|
255
|
+
},
|
|
249
256
|
},
|
|
250
257
|
args: {
|
|
251
258
|
v2: true,
|
|
@@ -302,6 +309,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
|
|
|
302
309
|
onMouseLeave: { table: { disable: true } },
|
|
303
310
|
...previewArgTypes,
|
|
304
311
|
},
|
|
312
|
+
tags: ['!autodocs'],
|
|
305
313
|
};
|
|
306
314
|
|
|
307
315
|
/**
|