@transferwise/components 0.0.0-experimental-bb1b18d → 0.0.0-experimental-dabe7c7
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 +2 -4
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +2 -4
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/common/Option/Option.js +2 -5
- package/build/common/Option/Option.js.map +1 -1
- package/build/common/Option/Option.mjs +2 -5
- package/build/common/Option/Option.mjs.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +1 -2
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/build/types/common/Option/Option.d.ts +0 -1
- package/build/types/common/Option/Option.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +2 -2
- package/src/actionOption/ActionOption.tsx +0 -3
- package/src/common/Option/Option.tsx +2 -9
|
@@ -20,8 +20,7 @@ const ActionOption = ({
|
|
|
20
20
|
showMediaAtAllSizes,
|
|
21
21
|
showMediaCircle,
|
|
22
22
|
isContainerAligned,
|
|
23
|
-
as
|
|
24
|
-
swapTitleContentSize
|
|
23
|
+
as
|
|
25
24
|
}) => {
|
|
26
25
|
const sharedProps = {
|
|
27
26
|
media,
|
|
@@ -33,8 +32,7 @@ const ActionOption = ({
|
|
|
33
32
|
showMediaCircle,
|
|
34
33
|
className: clsx.clsx('tw-action-option', className),
|
|
35
34
|
isContainerAligned,
|
|
36
|
-
as
|
|
37
|
-
swapTitleContentSize
|
|
35
|
+
as
|
|
38
36
|
};
|
|
39
37
|
const getAriaLabel = () => {
|
|
40
38
|
const labels = [];
|
|
@@ -1 +1 @@
|
|
|
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';\nimport { ChevronRight } from '@transferwise/icons';\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
|
|
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';\nimport { ChevronRight } from '@transferwise/icons';\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 {priority === Priority.TERTIARY && (\n <>\n \n <ChevronRight className=\"np-action-btn-chevron\" />\n </>\n )}\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","_jsxs","ActionButton","children","TERTIARY","_Fragment","ChevronRight"],"mappings":";;;;;;;;;AA4BMA,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,eACJC,eAAA,CAACC,YAAY,EAAA;AACXzB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAsB,QAAA,EAAA,CAEhB3B,MAAM,EACNC,QAAQ,KAAKC,gBAAQ,CAAC0B,QAAQ,iBAC7BH,eAAA,CAAAI,mBAAA,EAAA;AAAAF,QAAAA,QAAA,EACE,CAAA,MACA,eAAAL,cAAA,CAACQ,kBAAY,EAAA;AAACpB,UAAAA,SAAS,EAAC,uBAAA;AAAuB,SACjD,CAAA,CAAA;AAAA,OAAA,CACD,CAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -18,8 +18,7 @@ const ActionOption = ({
|
|
|
18
18
|
showMediaAtAllSizes,
|
|
19
19
|
showMediaCircle,
|
|
20
20
|
isContainerAligned,
|
|
21
|
-
as
|
|
22
|
-
swapTitleContentSize
|
|
21
|
+
as
|
|
23
22
|
}) => {
|
|
24
23
|
const sharedProps = {
|
|
25
24
|
media,
|
|
@@ -31,8 +30,7 @@ const ActionOption = ({
|
|
|
31
30
|
showMediaCircle,
|
|
32
31
|
className: clsx('tw-action-option', className),
|
|
33
32
|
isContainerAligned,
|
|
34
|
-
as
|
|
35
|
-
swapTitleContentSize
|
|
33
|
+
as
|
|
36
34
|
};
|
|
37
35
|
const getAriaLabel = () => {
|
|
38
36
|
const labels = [];
|
|
@@ -1 +1 @@
|
|
|
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';\nimport { ChevronRight } from '@transferwise/icons';\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
|
|
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';\nimport { ChevronRight } from '@transferwise/icons';\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 {priority === Priority.TERTIARY && (\n <>\n \n <ChevronRight className=\"np-action-btn-chevron\" />\n </>\n )}\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","_jsxs","ActionButton","children","TERTIARY","_Fragment","ChevronRight"],"mappings":";;;;;;;AA4BMA,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,eACJC,IAAA,CAACC,YAAY,EAAA;AACXzB,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAYa,EAAAA,YAAY,EAAG;AAC3BZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAsB,QAAA,EAAA,CAEhB3B,MAAM,EACNC,QAAQ,KAAKC,QAAQ,CAAC0B,QAAQ,iBAC7BH,IAAA,CAAAI,QAAA,EAAA;AAAAF,QAAAA,QAAA,EACE,CAAA,MACA,eAAAL,GAAA,CAACQ,YAAY,EAAA;AAACpB,UAAAA,SAAS,EAAC,uBAAA;AAAuB,SACjD,CAAA,CAAA;AAAA,OAAA,CACD,CAAA;KACW,CAAA;AACf,GAAA,CACD,CAAA;AAEN;;;;"}
|
|
@@ -19,12 +19,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
showMediaAtAllSizes,
|
|
20
20
|
showMediaCircle = true,
|
|
21
21
|
isContainerAligned = false,
|
|
22
|
-
swapTitleContentSize = false,
|
|
23
22
|
...rest
|
|
24
23
|
}, reference) => {
|
|
25
24
|
const Element = component ?? 'label';
|
|
26
|
-
const titleText = ['np-option__title', 'np-text-body-large-bold', 'text-primary'];
|
|
27
|
-
const bodyText = ['np-option__body', 'd-block'];
|
|
28
25
|
return /*#__PURE__*/jsxRuntime.jsx(Element, {
|
|
29
26
|
...rest,
|
|
30
27
|
ref: reference,
|
|
@@ -52,10 +49,10 @@ const Option = /*#__PURE__*/React.forwardRef(({
|
|
|
52
49
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
53
50
|
className: "media-body",
|
|
54
51
|
children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
|
|
55
|
-
className:
|
|
52
|
+
className: "np-text-body-large-bold text-primary np-option__title",
|
|
56
53
|
children: title
|
|
57
54
|
}), content && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
58
|
-
className:
|
|
55
|
+
className: "d-block np-option__body",
|
|
59
56
|
children: content
|
|
60
57
|
})]
|
|
61
58
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className=\"media\">\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n <h4 className=\"np-text-body-large-bold text-primary np-option__title\">{title}</h4>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","rest","reference","Element","_jsx","ref","clsx","children","_jsxs","Body"],"mappings":";;;;;;;AAoCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1B,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGZ,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEa,cAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfL,IAAAA,SAAS,EAAES,SAAI,CAAC,WAAW,EAAET,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIS,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,eAE3CC,eAAA,CAAA,KAAA,EAAA;AAAKX,MAAAA,SAAS,EAAC,OAAO;MAAAU,QAAA,EAAA,CACnBpB,KAAK,iBACJiB,cAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EACxBR,eAAe,gBACdK,cAAA,CAAA,KAAA,EAAA;AACEP,UAAAA,SAAS,EAAES,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEV,kBAAAA;AACnB,WAAA,CAAE;AAAAW,UAAAA,QAAA,EAEFpB,KAAAA;SACE,CAAC,gBAENiB,cAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,4BAA4B;AAAAU,UAAAA,QAAA,EAAEpB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDqB,eAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,YAAY;AAAAU,QAAAA,QAAA,gBACzBH,cAAA,CAAA,IAAA,EAAA;AAAIP,UAAAA,SAAS,EAAC,uDAAuD;AAAAU,UAAAA,QAAA,EAAEnB,KAAAA;AAAK,SAAK,CACjF,EAACC,OAAO,iBAAIe,cAAA,CAACK,IAAI,EAAA;AAACZ,UAAAA,SAAS,EAAC,yBAAyB;AAAAU,UAAAA,QAAA,EAAElB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAe,cAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,aAAa;AAAAU,QAAAA,QAAA,EAAEf,MAAAA;AAAM,OAAM,CAC5C,CAAA;KAAK,CAAA;AACP,GAAS,CAAC,CAAA;AAEd,CAAC;;;;"}
|
|
@@ -17,12 +17,9 @@ const Option = /*#__PURE__*/forwardRef(({
|
|
|
17
17
|
showMediaAtAllSizes,
|
|
18
18
|
showMediaCircle = true,
|
|
19
19
|
isContainerAligned = false,
|
|
20
|
-
swapTitleContentSize = false,
|
|
21
20
|
...rest
|
|
22
21
|
}, reference) => {
|
|
23
22
|
const Element = component ?? 'label';
|
|
24
|
-
const titleText = ['np-option__title', 'np-text-body-large-bold', 'text-primary'];
|
|
25
|
-
const bodyText = ['np-option__body', 'd-block'];
|
|
26
23
|
return /*#__PURE__*/jsx(Element, {
|
|
27
24
|
...rest,
|
|
28
25
|
ref: reference,
|
|
@@ -50,10 +47,10 @@ const Option = /*#__PURE__*/forwardRef(({
|
|
|
50
47
|
}), /*#__PURE__*/jsxs("div", {
|
|
51
48
|
className: "media-body",
|
|
52
49
|
children: [/*#__PURE__*/jsx("h4", {
|
|
53
|
-
className:
|
|
50
|
+
className: "np-text-body-large-bold text-primary np-option__title",
|
|
54
51
|
children: title
|
|
55
52
|
}), content && /*#__PURE__*/jsx(Body, {
|
|
56
|
-
className:
|
|
53
|
+
className: "d-block np-option__body",
|
|
57
54
|
children: content
|
|
58
55
|
})]
|
|
59
56
|
}), /*#__PURE__*/jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n
|
|
1
|
+
{"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className=\"media\">\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n <h4 className=\"np-text-body-large-bold text-primary np-option__title\">{title}</h4>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","rest","reference","Element","_jsx","ref","clsx","children","_jsxs","Body"],"mappings":";;;;;AAoCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1B,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGZ,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEa,GAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfL,IAAAA,SAAS,EAAES,IAAI,CAAC,WAAW,EAAET,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIS,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,eAE3CC,IAAA,CAAA,KAAA,EAAA;AAAKX,MAAAA,SAAS,EAAC,OAAO;MAAAU,QAAA,EAAA,CACnBpB,KAAK,iBACJiB,GAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,YAAY;QAAAU,QAAA,EACxBR,eAAe,gBACdK,GAAA,CAAA,KAAA,EAAA;AACEP,UAAAA,SAAS,EAAES,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEV,kBAAAA;AACnB,WAAA,CAAE;AAAAW,UAAAA,QAAA,EAEFpB,KAAAA;SACE,CAAC,gBAENiB,GAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,4BAA4B;AAAAU,UAAAA,QAAA,EAAEpB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDqB,IAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,YAAY;AAAAU,QAAAA,QAAA,gBACzBH,GAAA,CAAA,IAAA,EAAA;AAAIP,UAAAA,SAAS,EAAC,uDAAuD;AAAAU,UAAAA,QAAA,EAAEnB,KAAAA;AAAK,SAAK,CACjF,EAACC,OAAO,iBAAIe,GAAA,CAACK,IAAI,EAAA;AAACZ,UAAAA,SAAS,EAAC,yBAAyB;AAAAU,UAAAA,QAAA,EAAElB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAe,GAAA,CAAA,KAAA,EAAA;AAAKP,QAAAA,SAAS,EAAC,aAAa;AAAAU,QAAAA,QAAA,EAAEf,MAAAA;AAAM,OAAM,CAC5C,CAAA;KAAK,CAAA;AACP,GAAS,CAAC,CAAA;AAEd,CAAC;;;;"}
|
|
@@ -12,8 +12,7 @@ export type ActionOptionProps = {
|
|
|
12
12
|
showMediaCircle?: boolean;
|
|
13
13
|
isContainerAligned?: boolean;
|
|
14
14
|
as?: React.ElementType;
|
|
15
|
-
swapTitleContentSize?: boolean;
|
|
16
15
|
} & CommonProps;
|
|
17
|
-
declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as,
|
|
16
|
+
declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, as, }: ActionOptionProps) => import("react").JSX.Element;
|
|
18
17
|
export default ActionOption;
|
|
19
18
|
//# 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,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;
|
|
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,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,gCAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -20,7 +20,6 @@ export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
|
|
|
20
20
|
showMediaAtAllSizes?: boolean;
|
|
21
21
|
showMediaCircle?: boolean;
|
|
22
22
|
isContainerAligned?: boolean;
|
|
23
|
-
swapTitleContentSize?: boolean;
|
|
24
23
|
}
|
|
25
24
|
interface AnchorOptionProps extends BaseOptionProps, LinkProps {
|
|
26
25
|
as: 'a';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/common/Option/Option.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/common/Option/Option.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,iBAAkB,SAAQ,eAAe,EAAE,SAAS;IAC5D,EAAE,EAAE,GAAG,CAAC;CACT;AAED,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAE5D,QAAA,MAAM,MAAM,uGA4DX,CAAC;AAEF,eAAe,MAAM,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-dabe7c7",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@
|
|
96
|
-
"@
|
|
95
|
+
"@transferwise/neptune-css": "14.19.1",
|
|
96
|
+
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
@@ -19,7 +19,7 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
|
|
|
19
19
|
class="media-body"
|
|
20
20
|
>
|
|
21
21
|
<h4
|
|
22
|
-
class="np-
|
|
22
|
+
class="np-text-body-large-bold text-primary np-option__title"
|
|
23
23
|
>
|
|
24
24
|
This is title number one
|
|
25
25
|
</h4>
|
|
@@ -71,7 +71,7 @@ exports[`AccordionItem open / close renders an item open 1`] = `
|
|
|
71
71
|
class="media-body"
|
|
72
72
|
>
|
|
73
73
|
<h4
|
|
74
|
-
class="np-
|
|
74
|
+
class="np-text-body-large-bold text-primary np-option__title"
|
|
75
75
|
>
|
|
76
76
|
This is title number one
|
|
77
77
|
</h4>
|
|
@@ -24,7 +24,6 @@ export type ActionOptionProps = {
|
|
|
24
24
|
showMediaCircle?: boolean;
|
|
25
25
|
isContainerAligned?: boolean;
|
|
26
26
|
as?: React.ElementType;
|
|
27
|
-
swapTitleContentSize?: boolean;
|
|
28
27
|
} & CommonProps;
|
|
29
28
|
|
|
30
29
|
const ActionOption = ({
|
|
@@ -41,7 +40,6 @@ const ActionOption = ({
|
|
|
41
40
|
showMediaCircle,
|
|
42
41
|
isContainerAligned,
|
|
43
42
|
as,
|
|
44
|
-
swapTitleContentSize,
|
|
45
43
|
}: ActionOptionProps) => {
|
|
46
44
|
const sharedProps = {
|
|
47
45
|
media,
|
|
@@ -54,7 +52,6 @@ const ActionOption = ({
|
|
|
54
52
|
className: clsx('tw-action-option', className),
|
|
55
53
|
isContainerAligned,
|
|
56
54
|
as,
|
|
57
|
-
swapTitleContentSize,
|
|
58
55
|
};
|
|
59
56
|
|
|
60
57
|
const getAriaLabel = (): string | undefined => {
|
|
@@ -24,7 +24,6 @@ export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
|
|
|
24
24
|
showMediaAtAllSizes?: boolean;
|
|
25
25
|
showMediaCircle?: boolean;
|
|
26
26
|
isContainerAligned?: boolean;
|
|
27
|
-
swapTitleContentSize?: boolean;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
interface AnchorOptionProps extends BaseOptionProps, LinkProps {
|
|
@@ -51,16 +50,12 @@ const Option = forwardRef<ReferenceType, OptionProps>(
|
|
|
51
50
|
showMediaAtAllSizes,
|
|
52
51
|
showMediaCircle = true,
|
|
53
52
|
isContainerAligned = false,
|
|
54
|
-
swapTitleContentSize = false,
|
|
55
53
|
...rest
|
|
56
54
|
},
|
|
57
55
|
reference,
|
|
58
56
|
) => {
|
|
59
57
|
const Element = component ?? 'label';
|
|
60
58
|
|
|
61
|
-
const titleText = ['np-option__title', 'np-text-body-large-bold', 'text-primary'];
|
|
62
|
-
const bodyText = ['np-option__body', 'd-block'];
|
|
63
|
-
|
|
64
59
|
return (
|
|
65
60
|
<Element
|
|
66
61
|
{...rest}
|
|
@@ -91,10 +86,8 @@ const Option = forwardRef<ReferenceType, OptionProps>(
|
|
|
91
86
|
</div>
|
|
92
87
|
)}
|
|
93
88
|
<div className="media-body">
|
|
94
|
-
<h4 className=
|
|
95
|
-
{content &&
|
|
96
|
-
<Body className={clsx(swapTitleContentSize ? titleText : bodyText)}>{content}</Body>
|
|
97
|
-
)}
|
|
89
|
+
<h4 className="np-text-body-large-bold text-primary np-option__title">{title}</h4>
|
|
90
|
+
{content && <Body className="d-block np-option__body">{content}</Body>}
|
|
98
91
|
</div>
|
|
99
92
|
<div className="media-right">{button}</div>
|
|
100
93
|
</div>
|