@transferwise/components 46.93.2 → 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 +5 -5
- package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +6 -2
- package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +12 -4
- package/src/chips/__snapshots__/Chips.spec.tsx.snap +1 -1
- package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +1 -1
- package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +5 -3
- 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/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +1 -1
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.94.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@testing-library/jest-dom": "^6.4.6",
|
|
69
69
|
"@testing-library/react": "^16.0.0",
|
|
70
70
|
"@testing-library/user-event": "^14.5.2",
|
|
71
|
-
"@transferwise/icons": "^3.
|
|
71
|
+
"@transferwise/icons": "^3.19.0",
|
|
72
72
|
"@tsconfig/recommended": "^1.0.7",
|
|
73
73
|
"@types/babel__core": "^7.20.5",
|
|
74
74
|
"@types/commonmark": "^0.27.9",
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
"storybook": "^8.2.2",
|
|
96
96
|
"@transferwise/less-config": "3.1.0",
|
|
97
97
|
"@transferwise/neptune-css": "14.22.0",
|
|
98
|
-
"@wise/
|
|
99
|
-
"@wise/
|
|
98
|
+
"@wise/wds-configs": "0.0.0",
|
|
99
|
+
"@wise/components-theming": "1.6.1"
|
|
100
100
|
},
|
|
101
101
|
"peerDependencies": {
|
|
102
|
-
"@transferwise/icons": "^3.
|
|
102
|
+
"@transferwise/icons": "^3.19.0",
|
|
103
103
|
"@transferwise/neptune-css": "^14.9.6",
|
|
104
104
|
"@wise/art": "^2.16",
|
|
105
105
|
"@wise/components-theming": "^1.0.0",
|
|
@@ -43,7 +43,9 @@ exports[`AccordionItem open / close renders an item closed 1`] = `
|
|
|
43
43
|
width="24"
|
|
44
44
|
>
|
|
45
45
|
<path
|
|
46
|
-
|
|
46
|
+
clip-rule="evenodd"
|
|
47
|
+
d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
|
|
48
|
+
fill-rule="evenodd"
|
|
47
49
|
/>
|
|
48
50
|
</svg>
|
|
49
51
|
</span>
|
|
@@ -97,7 +99,9 @@ exports[`AccordionItem open / close renders an item open 1`] = `
|
|
|
97
99
|
width="24"
|
|
98
100
|
>
|
|
99
101
|
<path
|
|
100
|
-
|
|
102
|
+
clip-rule="evenodd"
|
|
103
|
+
d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
|
|
104
|
+
fill-rule="evenodd"
|
|
101
105
|
/>
|
|
102
106
|
</svg>
|
|
103
107
|
</span>
|
|
@@ -36,7 +36,9 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
|
|
|
36
36
|
width="24"
|
|
37
37
|
>
|
|
38
38
|
<path
|
|
39
|
-
|
|
39
|
+
clip-rule="evenodd"
|
|
40
|
+
d="M9.01 3A1.01 1.01 0 0 0 8 4.01V7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3V4.01A1.01 1.01 0 0 0 14.99 3zM14 7V5h-4v2zm-4 2h4v9h-4zM8 9H5v9h3zm8 9V9h3v9z"
|
|
41
|
+
fill-rule="evenodd"
|
|
40
42
|
/>
|
|
41
43
|
</svg>
|
|
42
44
|
</span>
|
|
@@ -65,7 +67,9 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
|
|
|
65
67
|
width="24"
|
|
66
68
|
>
|
|
67
69
|
<path
|
|
68
|
-
|
|
70
|
+
clip-rule="evenodd"
|
|
71
|
+
d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
|
|
72
|
+
fill-rule="evenodd"
|
|
69
73
|
/>
|
|
70
74
|
</svg>
|
|
71
75
|
</span>
|
|
@@ -100,7 +104,9 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
|
|
|
100
104
|
width="24"
|
|
101
105
|
>
|
|
102
106
|
<path
|
|
103
|
-
|
|
107
|
+
clip-rule="evenodd"
|
|
108
|
+
d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
|
|
109
|
+
fill-rule="evenodd"
|
|
104
110
|
/>
|
|
105
111
|
</svg>
|
|
106
112
|
</span>
|
|
@@ -139,7 +145,9 @@ exports[`FlowNavigationAvatar with a name AND profileType with nothing passed re
|
|
|
139
145
|
width="24"
|
|
140
146
|
>
|
|
141
147
|
<path
|
|
142
|
-
|
|
148
|
+
clip-rule="evenodd"
|
|
149
|
+
d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
|
|
150
|
+
fill-rule="evenodd"
|
|
143
151
|
/>
|
|
144
152
|
</svg>
|
|
145
153
|
</span>
|
|
@@ -140,7 +140,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
|
|
|
140
140
|
width="16"
|
|
141
141
|
>
|
|
142
142
|
<path
|
|
143
|
-
d="
|
|
143
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
144
144
|
/>
|
|
145
145
|
</svg>
|
|
146
146
|
</span>
|
|
@@ -52,7 +52,7 @@ exports[`BottomSheet renders content when open 1`] = `
|
|
|
52
52
|
width="16"
|
|
53
53
|
>
|
|
54
54
|
<path
|
|
55
|
-
d="
|
|
55
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
56
56
|
/>
|
|
57
57
|
</svg>
|
|
58
58
|
</span>
|
|
@@ -21,7 +21,7 @@ exports[`CloseButton renders as expected 1`] = `
|
|
|
21
21
|
width="24"
|
|
22
22
|
>
|
|
23
23
|
<path
|
|
24
|
-
d="
|
|
24
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
25
25
|
/>
|
|
26
26
|
</svg>
|
|
27
27
|
</span>
|
|
@@ -29,7 +29,9 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
29
29
|
width="16"
|
|
30
30
|
>
|
|
31
31
|
<path
|
|
32
|
-
|
|
32
|
+
clip-rule="evenodd"
|
|
33
|
+
d="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z"
|
|
34
|
+
fill-rule="evenodd"
|
|
33
35
|
/>
|
|
34
36
|
</svg>
|
|
35
37
|
</span>
|
|
@@ -74,7 +76,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
74
76
|
width="24"
|
|
75
77
|
>
|
|
76
78
|
<path
|
|
77
|
-
d="
|
|
79
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
78
80
|
/>
|
|
79
81
|
</svg>
|
|
80
82
|
</span>
|
|
@@ -190,7 +192,7 @@ exports[`FlowNavigation renders as expected 1`] = `
|
|
|
190
192
|
width="24"
|
|
191
193
|
>
|
|
192
194
|
<path
|
|
193
|
-
d="
|
|
195
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
194
196
|
/>
|
|
195
197
|
</svg>
|
|
196
198
|
</span>
|
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;
|
|
@@ -48,7 +48,7 @@ exports[`OverlayHeader renders as expected 1`] = `
|
|
|
48
48
|
width="24"
|
|
49
49
|
>
|
|
50
50
|
<path
|
|
51
|
-
d="
|
|
51
|
+
d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
|
|
52
52
|
/>
|
|
53
53
|
</svg>
|
|
54
54
|
</span>
|