@transferwise/components 46.91.0 → 46.92.0
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 +1 -1
- package/src/actionOption/ActionOption.spec.tsx +20 -0
- 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
|
@@ -96,4 +96,24 @@ describe('ActionOption', () => {
|
|
|
96
96
|
|
|
97
97
|
expect(document.querySelector('.np-option__container-aligned')).toBeInTheDocument();
|
|
98
98
|
});
|
|
99
|
+
|
|
100
|
+
it('uses the aria-label property', () => {
|
|
101
|
+
render(
|
|
102
|
+
<ActionOption
|
|
103
|
+
media={<FastFlag data-testid="fast-flag" />}
|
|
104
|
+
title={<span>title</span>}
|
|
105
|
+
content="content"
|
|
106
|
+
action={<span>action</span>}
|
|
107
|
+
isContainerAligned
|
|
108
|
+
aria-label="aria label"
|
|
109
|
+
onClick={() => {}}
|
|
110
|
+
/>,
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
expect(
|
|
114
|
+
screen.getByRole('button', {
|
|
115
|
+
name: /aria label/i,
|
|
116
|
+
}),
|
|
117
|
+
).toBeInTheDocument();
|
|
118
|
+
});
|
|
99
119
|
});
|
|
@@ -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
|
/**
|