@transferwise/components 46.71.6 → 46.71.7
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/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/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/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;;;;"}
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.71.
|
|
3
|
+
"version": "46.71.7",
|
|
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",
|
|
@@ -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;
|
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
|
}
|