@transferwise/components 46.94.0 → 46.94.1
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/info/Info.js +7 -13
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +7 -13
- package/build/info/Info.mjs.map +1 -1
- package/build/main.css +0 -23
- package/build/styles/info/Info.css +0 -23
- package/build/styles/main.css +0 -23
- package/build/types/info/Info.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/info/Info.css +0 -23
- package/src/info/Info.less +0 -28
- package/src/info/Info.tsx +8 -14
- package/src/listItem/ListItem.story.tsx +4 -9
- package/src/main.css +0 -23
package/build/info/Info.js
CHANGED
|
@@ -29,6 +29,7 @@ var Modal = require('../modal/Modal.js');
|
|
|
29
29
|
var Popover = require('../popover/Popover.js');
|
|
30
30
|
var Info_messages = require('./Info.messages.js');
|
|
31
31
|
var infoPresentations = require('./infoPresentations.js');
|
|
32
|
+
var IconButton = require('../iconButton/IconButton.js');
|
|
32
33
|
|
|
33
34
|
const Info = ({
|
|
34
35
|
className = undefined,
|
|
@@ -44,22 +45,16 @@ const Info = ({
|
|
|
44
45
|
const [open, setOpen] = React.useState(false);
|
|
45
46
|
ariaLabel ??= intl.formatMessage(Info_messages.ariaLabel);
|
|
46
47
|
const isModal = presentation === infoPresentations.InfoPresentation.MODAL;
|
|
47
|
-
const isSmall = size$1 === size.Size.SMALL;
|
|
48
48
|
const buttonProps = {
|
|
49
49
|
'aria-label': ariaLabel,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
})
|
|
50
|
+
priority: 'minimal',
|
|
51
|
+
size: 24,
|
|
52
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.QuestionMarkCircle, {})
|
|
54
53
|
};
|
|
55
54
|
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
56
|
-
className: clsx.clsx(className, 'np-info',
|
|
57
|
-
'np-info__small': isSmall,
|
|
58
|
-
'np-info__large': !isSmall
|
|
59
|
-
}),
|
|
55
|
+
className: clsx.clsx(className, 'np-info'),
|
|
60
56
|
children: isModal ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
61
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(
|
|
62
|
-
type: "button",
|
|
57
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
63
58
|
onClick: () => {
|
|
64
59
|
setOpen(!open);
|
|
65
60
|
if (onClick) {
|
|
@@ -77,8 +72,7 @@ const Info = ({
|
|
|
77
72
|
content: content,
|
|
78
73
|
preferredPlacement: preferredPlacement,
|
|
79
74
|
title: title,
|
|
80
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
81
|
-
type: "button",
|
|
75
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
82
76
|
...buttonProps,
|
|
83
77
|
onClick: () => {
|
|
84
78
|
if (onClick) {
|
package/build/info/Info.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n
|
|
1
|
+
{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,aAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,cAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
|
package/build/info/Info.mjs
CHANGED
|
@@ -27,6 +27,7 @@ import Modal from '../modal/Modal.mjs';
|
|
|
27
27
|
import Popover from '../popover/Popover.mjs';
|
|
28
28
|
import messages from './Info.messages.mjs';
|
|
29
29
|
import { InfoPresentation } from './infoPresentations.mjs';
|
|
30
|
+
import IconButton from '../iconButton/IconButton.mjs';
|
|
30
31
|
|
|
31
32
|
const Info = ({
|
|
32
33
|
className = undefined,
|
|
@@ -42,22 +43,16 @@ const Info = ({
|
|
|
42
43
|
const [open, setOpen] = useState(false);
|
|
43
44
|
ariaLabel ??= intl.formatMessage(messages.ariaLabel);
|
|
44
45
|
const isModal = presentation === InfoPresentation.MODAL;
|
|
45
|
-
const isSmall = size === Size.SMALL;
|
|
46
46
|
const buttonProps = {
|
|
47
47
|
'aria-label': ariaLabel,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
})
|
|
48
|
+
priority: 'minimal',
|
|
49
|
+
size: 24,
|
|
50
|
+
children: /*#__PURE__*/jsx(QuestionMarkCircle, {})
|
|
52
51
|
};
|
|
53
52
|
return /*#__PURE__*/jsx("span", {
|
|
54
|
-
className: clsx(className, 'np-info',
|
|
55
|
-
'np-info__small': isSmall,
|
|
56
|
-
'np-info__large': !isSmall
|
|
57
|
-
}),
|
|
53
|
+
className: clsx(className, 'np-info'),
|
|
58
54
|
children: isModal ? /*#__PURE__*/jsxs(Fragment, {
|
|
59
|
-
children: [/*#__PURE__*/jsx(
|
|
60
|
-
type: "button",
|
|
55
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
61
56
|
onClick: () => {
|
|
62
57
|
setOpen(!open);
|
|
63
58
|
if (onClick) {
|
|
@@ -75,8 +70,7 @@ const Info = ({
|
|
|
75
70
|
content: content,
|
|
76
71
|
preferredPlacement: preferredPlacement,
|
|
77
72
|
title: title,
|
|
78
|
-
children: /*#__PURE__*/jsx(
|
|
79
|
-
type: "button",
|
|
73
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
80
74
|
...buttonProps,
|
|
81
75
|
onClick: () => {
|
|
82
76
|
if (onClick) {
|
package/build/info/Info.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n
|
|
1
|
+
{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
|
package/build/main.css
CHANGED
|
@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2482
2482
|
width: 100%;
|
|
2483
2483
|
}
|
|
2484
2484
|
.np-info {
|
|
2485
|
-
height: 16px;
|
|
2486
|
-
line-height: 1;
|
|
2487
2485
|
vertical-align: middle;
|
|
2488
|
-
color: var(--color-interactive-primary);
|
|
2489
|
-
}
|
|
2490
|
-
.np-info button,
|
|
2491
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2492
|
-
--ring-outline-offset: 0;
|
|
2493
|
-
height: 16px;
|
|
2494
|
-
overflow: hidden;
|
|
2495
|
-
display: inline-block;
|
|
2496
|
-
}
|
|
2497
|
-
.np-info__large {
|
|
2498
|
-
height: 24px;
|
|
2499
|
-
}
|
|
2500
|
-
.np-info__large button,
|
|
2501
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
2502
|
-
height: 24px;
|
|
2503
|
-
display: inline-block;
|
|
2504
|
-
}
|
|
2505
|
-
.np-info .tw-icon {
|
|
2506
|
-
cursor: pointer;
|
|
2507
|
-
color: var(--color-interactive-primary);
|
|
2508
|
-
display: inline-block;
|
|
2509
2486
|
}
|
|
2510
2487
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2511
2488
|
border-bottom: none !important;
|
|
@@ -1,28 +1,5 @@
|
|
|
1
1
|
.np-info {
|
|
2
|
-
height: 16px;
|
|
3
|
-
line-height: 1;
|
|
4
2
|
vertical-align: middle;
|
|
5
|
-
color: var(--color-interactive-primary);
|
|
6
|
-
}
|
|
7
|
-
.np-info button,
|
|
8
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
9
|
-
--ring-outline-offset: 0;
|
|
10
|
-
height: 16px;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
display: inline-block;
|
|
13
|
-
}
|
|
14
|
-
.np-info__large {
|
|
15
|
-
height: 24px;
|
|
16
|
-
}
|
|
17
|
-
.np-info__large button,
|
|
18
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
19
|
-
height: 24px;
|
|
20
|
-
display: inline-block;
|
|
21
|
-
}
|
|
22
|
-
.np-info .tw-icon {
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
color: var(--color-interactive-primary);
|
|
25
|
-
display: inline-block;
|
|
26
3
|
}
|
|
27
4
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
28
5
|
border-bottom: none !important;
|
package/build/styles/main.css
CHANGED
|
@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2482
2482
|
width: 100%;
|
|
2483
2483
|
}
|
|
2484
2484
|
.np-info {
|
|
2485
|
-
height: 16px;
|
|
2486
|
-
line-height: 1;
|
|
2487
2485
|
vertical-align: middle;
|
|
2488
|
-
color: var(--color-interactive-primary);
|
|
2489
|
-
}
|
|
2490
|
-
.np-info button,
|
|
2491
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2492
|
-
--ring-outline-offset: 0;
|
|
2493
|
-
height: 16px;
|
|
2494
|
-
overflow: hidden;
|
|
2495
|
-
display: inline-block;
|
|
2496
|
-
}
|
|
2497
|
-
.np-info__large {
|
|
2498
|
-
height: 24px;
|
|
2499
|
-
}
|
|
2500
|
-
.np-info__large button,
|
|
2501
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
2502
|
-
height: 24px;
|
|
2503
|
-
display: inline-block;
|
|
2504
|
-
}
|
|
2505
|
-
.np-info .tw-icon {
|
|
2506
|
-
cursor: pointer;
|
|
2507
|
-
color: var(--color-interactive-primary);
|
|
2508
|
-
display: inline-block;
|
|
2509
2486
|
}
|
|
2510
2487
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2511
2488
|
border-bottom: none !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAgB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAgB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAMhE,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,6GASP,SAAS,gCA0CX,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
package/package.json
CHANGED
package/src/info/Info.css
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
1
|
.np-info {
|
|
2
|
-
height: 16px;
|
|
3
|
-
line-height: 1;
|
|
4
2
|
vertical-align: middle;
|
|
5
|
-
color: var(--color-interactive-primary);
|
|
6
|
-
}
|
|
7
|
-
.np-info button,
|
|
8
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
9
|
-
--ring-outline-offset: 0;
|
|
10
|
-
height: 16px;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
display: inline-block;
|
|
13
|
-
}
|
|
14
|
-
.np-info__large {
|
|
15
|
-
height: 24px;
|
|
16
|
-
}
|
|
17
|
-
.np-info__large button,
|
|
18
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
19
|
-
height: 24px;
|
|
20
|
-
display: inline-block;
|
|
21
|
-
}
|
|
22
|
-
.np-info .tw-icon {
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
color: var(--color-interactive-primary);
|
|
25
|
-
display: inline-block;
|
|
26
3
|
}
|
|
27
4
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
28
5
|
border-bottom: none !important;
|
package/src/info/Info.less
CHANGED
|
@@ -1,35 +1,7 @@
|
|
|
1
1
|
@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
|
|
2
2
|
|
|
3
3
|
.np-info {
|
|
4
|
-
height: 16px;
|
|
5
|
-
line-height: 1;
|
|
6
4
|
vertical-align: middle;
|
|
7
|
-
color: var(--color-interactive-primary);
|
|
8
|
-
|
|
9
|
-
button,
|
|
10
|
-
[data-toggle="popover"]:not(.btn) {
|
|
11
|
-
.ring-offset-0();
|
|
12
|
-
|
|
13
|
-
height: 16px;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
display: inline-block;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&__large {
|
|
19
|
-
height: 24px;
|
|
20
|
-
|
|
21
|
-
button,
|
|
22
|
-
[data-toggle="popover"]:not(.btn) {
|
|
23
|
-
height: 24px;
|
|
24
|
-
display: inline-block;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.tw-icon {
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
color: var(--color-interactive-primary);
|
|
31
|
-
display: inline-block;
|
|
32
|
-
}
|
|
33
5
|
|
|
34
6
|
[data-toggle="popover"]:not(.btn) {
|
|
35
7
|
// Bootstrap popover has !important dotted border bottom
|
package/src/info/Info.tsx
CHANGED
|
@@ -9,6 +9,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
|
|
|
9
9
|
|
|
10
10
|
import messages from './Info.messages';
|
|
11
11
|
import { InfoPresentation } from './infoPresentations';
|
|
12
|
+
import IconButton, { IconButtonProps } from '../iconButton';
|
|
12
13
|
|
|
13
14
|
export interface InfoProps {
|
|
14
15
|
'aria-label'?: string;
|
|
@@ -53,25 +54,19 @@ const Info = ({
|
|
|
53
54
|
const [open, setOpen] = useState(false);
|
|
54
55
|
ariaLabel ??= intl.formatMessage(messages.ariaLabel);
|
|
55
56
|
const isModal = presentation === InfoPresentation.MODAL;
|
|
56
|
-
const isSmall = size === Size.SMALL;
|
|
57
57
|
|
|
58
|
-
const buttonProps = {
|
|
58
|
+
const buttonProps: IconButtonProps = {
|
|
59
59
|
'aria-label': ariaLabel,
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
priority: 'minimal',
|
|
61
|
+
size: 24,
|
|
62
|
+
children: <HelpCircleIcon />,
|
|
62
63
|
};
|
|
63
64
|
|
|
64
65
|
return (
|
|
65
|
-
<span
|
|
66
|
-
className={clsx(className, 'np-info', {
|
|
67
|
-
'np-info__small': isSmall,
|
|
68
|
-
'np-info__large': !isSmall,
|
|
69
|
-
})}
|
|
70
|
-
>
|
|
66
|
+
<span className={clsx(className, 'np-info')}>
|
|
71
67
|
{isModal ? (
|
|
72
68
|
<>
|
|
73
|
-
<
|
|
74
|
-
type="button"
|
|
69
|
+
<IconButton
|
|
75
70
|
onClick={() => {
|
|
76
71
|
setOpen(!open);
|
|
77
72
|
if (onClick) {
|
|
@@ -84,8 +79,7 @@ const Info = ({
|
|
|
84
79
|
</>
|
|
85
80
|
) : (
|
|
86
81
|
<Popover content={content} preferredPlacement={preferredPlacement} title={title}>
|
|
87
|
-
<
|
|
88
|
-
type="button"
|
|
82
|
+
<IconButton
|
|
89
83
|
{...buttonProps}
|
|
90
84
|
onClick={() => {
|
|
91
85
|
if (onClick) {
|
|
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
|
|
|
2
2
|
import { Documents, FastFlag } from '@transferwise/icons';
|
|
3
3
|
import { ComponentProps } from 'react';
|
|
4
4
|
|
|
5
|
-
import { Button } from '..';
|
|
5
|
+
import { Button, IconButton } from '..';
|
|
6
6
|
import AvatarView from '../avatarView';
|
|
7
7
|
import Info from '../info';
|
|
8
8
|
import Title from '../title/Title';
|
|
@@ -92,14 +92,9 @@ export const Variants = () => {
|
|
|
92
92
|
title="Account number"
|
|
93
93
|
value="123456789"
|
|
94
94
|
action={
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
style={{ background: 'none', border: 0 }}
|
|
99
|
-
onClick={() => action('clicked')}
|
|
100
|
-
>
|
|
101
|
-
<Documents size="24" />
|
|
102
|
-
</button>
|
|
95
|
+
<IconButton size={24} aria-label="Copy" priority="minimal">
|
|
96
|
+
<Documents />
|
|
97
|
+
</IconButton>
|
|
103
98
|
}
|
|
104
99
|
/>
|
|
105
100
|
</List>
|
package/src/main.css
CHANGED
|
@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2482
2482
|
width: 100%;
|
|
2483
2483
|
}
|
|
2484
2484
|
.np-info {
|
|
2485
|
-
height: 16px;
|
|
2486
|
-
line-height: 1;
|
|
2487
2485
|
vertical-align: middle;
|
|
2488
|
-
color: var(--color-interactive-primary);
|
|
2489
|
-
}
|
|
2490
|
-
.np-info button,
|
|
2491
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2492
|
-
--ring-outline-offset: 0;
|
|
2493
|
-
height: 16px;
|
|
2494
|
-
overflow: hidden;
|
|
2495
|
-
display: inline-block;
|
|
2496
|
-
}
|
|
2497
|
-
.np-info__large {
|
|
2498
|
-
height: 24px;
|
|
2499
|
-
}
|
|
2500
|
-
.np-info__large button,
|
|
2501
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
2502
|
-
height: 24px;
|
|
2503
|
-
display: inline-block;
|
|
2504
|
-
}
|
|
2505
|
-
.np-info .tw-icon {
|
|
2506
|
-
cursor: pointer;
|
|
2507
|
-
color: var(--color-interactive-primary);
|
|
2508
|
-
display: inline-block;
|
|
2509
2486
|
}
|
|
2510
2487
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2511
2488
|
border-bottom: none !important;
|