@transferwise/components 46.158.0 → 46.159.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/FlowNavigation/FlowNavigation.js +5 -14
- package/build/FlowNavigation/FlowNavigation.js.map +1 -1
- package/build/FlowNavigation/FlowNavigation.mjs +5 -14
- package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/_deprecated/OverlayHeader/OverlayHeader.js +6 -41
- package/build/_deprecated/OverlayHeader/OverlayHeader.js.map +1 -1
- package/build/_deprecated/OverlayHeader/OverlayHeader.mjs +6 -41
- package/build/_deprecated/OverlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/main.css +8 -34
- package/build/styles/FlowNavigation/FlowNavigation.css +7 -13
- package/build/styles/main.css +8 -34
- package/build/types/FlowNavigation/FlowNavigation.d.ts +2 -9
- package/build/types/FlowNavigation/FlowNavigation.d.ts.map +1 -1
- package/build/types/_deprecated/OverlayHeader/OverlayHeader.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/FlowNavigation/FlowNavigation.css +7 -13
- package/src/FlowNavigation/FlowNavigation.less +6 -15
- package/src/FlowNavigation/FlowNavigation.tsx +6 -27
- package/src/FlowNavigation/_stories/FlowNavigation.story.tsx +0 -86
- package/src/_deprecated/OverlayHeader/OverlayHeader.tsx +2 -21
- package/src/common/Panel/_stories/Panel.story.tsx +107 -36
- package/src/main.css +8 -34
- package/src/main.less +0 -1
- package/build/styles/_deprecated/OverlayHeader/OverlayHeader.css +0 -15
- package/src/_deprecated/OverlayHeader/OverlayHeader.css +0 -15
- package/src/_deprecated/OverlayHeader/OverlayHeader.less +0 -24
|
@@ -46,7 +46,6 @@ const FlowNavigation = ({
|
|
|
46
46
|
onClose,
|
|
47
47
|
onGoBack,
|
|
48
48
|
steps,
|
|
49
|
-
composable = false,
|
|
50
49
|
showBottomBorder = true
|
|
51
50
|
}) => {
|
|
52
51
|
const intl = reactIntl.useIntl();
|
|
@@ -59,7 +58,7 @@ const FlowNavigation = ({
|
|
|
59
58
|
const newAvatar = done ? null : avatar;
|
|
60
59
|
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
61
60
|
const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
|
|
62
|
-
className: clsx.clsx('np-flow-navigation__content',
|
|
61
|
+
className: clsx.clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
63
62
|
'np-flow-navigation--xs-max': !screenSm,
|
|
64
63
|
// Size switches on parent container which may or may not have the same size as the window.
|
|
65
64
|
'np-flow-navigation--sm': screenSm,
|
|
@@ -95,18 +94,10 @@ const FlowNavigation = ({
|
|
|
95
94
|
}) : null,
|
|
96
95
|
layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
|
|
97
96
|
});
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
'np-flow-navigation--border-bottom': showBottomBorder
|
|
103
|
-
}),
|
|
104
|
-
children: flowHeaderContent
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
108
|
-
className: clsx.clsx('np-flow-navigation p-y-3', {
|
|
109
|
-
'np-flow-navigation--border-bottom': !done
|
|
97
|
+
return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
|
|
98
|
+
size: "fluid",
|
|
99
|
+
className: clsx.clsx('np-flow-navigation', {
|
|
100
|
+
'np-flow-navigation--border-bottom': showBottomBorder
|
|
110
101
|
}),
|
|
111
102
|
children: flowHeaderContent
|
|
112
103
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void
|
|
1
|
+
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const newAvatar = done ? null : avatar;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && steps && steps.length > 0 && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && steps && steps.length > 0 ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAuB5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,WAAW,GAAGZ,OAAO,IAAI,IAAI,iBAAIP,cAAA,CAACoB,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAEf;AAAQ,IAAG;AAElF,EAAA,MAAMgB,SAAS,GAAGjB,IAAI,GAAG,IAAI,GAAGF,MAAM;EACtC,MAAMoB,aAAa,GAAGhB,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;AAExD,EAAA,MAAMsB,iBAAiB,gBACrBzB,cAAA,CAAC0B,kBAAU,EAAA;IACTC,SAAS,EAAEC,SAAI,CACb,6BAA6B,EAC7Bf,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFY,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACnB,QAAQ,IAAIW,aAAa,gBACzBxB,cAAA,CAACiC,kBAAU,EAAA;AACTZ,QAAAA,IAAI,EAAE,EAAG;AACTa,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAYxB,IAAI,CAACyB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9ChB,QAAAA,OAAO,EAAEd,QAAS;AAAAwB,QAAAA,QAAA,eAElBhC,cAAA,CAACuC,eAAS,EAAA,EAAA;OACA,CAAC,gBAEbvC,cAAA,CAAA,KAAA,EAAA;AAAK2B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE3B;AAAI,OAAM,CAClD,EACA,CAACQ,QAAQ,IAAI,CAACP,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAAC+B,MAAM,GAAG,CAAC,iBAC9CxC,cAAA,CAACyC,qBAAa,EAAA;AAACd,QAAAA,SAAS,EAAC,OAAO;AAAClB,QAAAA,KAAK,EAAEA,KAAM;AAACiC,QAAAA,WAAW,EAAEvC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDwC,IAAAA,YAAY,eACVb,eAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FT,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAInB,cAAA,CAAA,MAAA,EAAA;AAAM2B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDR,WAAW;AAAA,KACT,CACN;AACDyB,IAAAA,aAAa,EACX,CAACtC,IAAI,IAAIG,KAAK,IAAIA,KAAK,CAAC+B,MAAM,GAAG,CAAC,gBAChCxC,cAAA,CAAC6C,eAAO,EAAA;AACN1C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACbkB,SAAS,EAAEC,SAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDkB,MAAM,EAAE,CAAC7B,QAAQ,GAAG8B,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;AAAW,GAAA,CAE3D;EAED,oBACEjD,cAAA,CAACkD,iBAAS,EAAA;AACR7B,IAAAA,IAAI,EAAC,OAAO;AACZM,IAAAA,SAAS,EAAEC,SAAI,CAAC,oBAAoB,EAAE;AACpC,MAAA,mCAAmC,EAAElB;AACtC,KAAA,CAAE;AAAAsB,IAAAA,QAAA,EAEFP;AAAiB,GACT,CAAC;AAEhB;;;;"}
|
|
@@ -42,7 +42,6 @@ const FlowNavigation = ({
|
|
|
42
42
|
onClose,
|
|
43
43
|
onGoBack,
|
|
44
44
|
steps,
|
|
45
|
-
composable = false,
|
|
46
45
|
showBottomBorder = true
|
|
47
46
|
}) => {
|
|
48
47
|
const intl = useIntl();
|
|
@@ -55,7 +54,7 @@ const FlowNavigation = ({
|
|
|
55
54
|
const newAvatar = done ? null : avatar;
|
|
56
55
|
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
57
56
|
const flowHeaderContent = /*#__PURE__*/jsx(FlowHeader, {
|
|
58
|
-
className: clsx('np-flow-navigation__content',
|
|
57
|
+
className: clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
59
58
|
'np-flow-navigation--xs-max': !screenSm,
|
|
60
59
|
// Size switches on parent container which may or may not have the same size as the window.
|
|
61
60
|
'np-flow-navigation--sm': screenSm,
|
|
@@ -91,18 +90,10 @@ const FlowNavigation = ({
|
|
|
91
90
|
}) : null,
|
|
92
91
|
layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
|
|
93
92
|
});
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
'np-flow-navigation--border-bottom': showBottomBorder
|
|
99
|
-
}),
|
|
100
|
-
children: flowHeaderContent
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
return /*#__PURE__*/jsx("div", {
|
|
104
|
-
className: clsx('np-flow-navigation p-y-3', {
|
|
105
|
-
'np-flow-navigation--border-bottom': !done
|
|
93
|
+
return /*#__PURE__*/jsx(Container, {
|
|
94
|
+
size: "fluid",
|
|
95
|
+
className: clsx('np-flow-navigation', {
|
|
96
|
+
'np-flow-navigation--border-bottom': showBottomBorder
|
|
106
97
|
}),
|
|
107
98
|
children: flowHeaderContent
|
|
108
99
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: () => void
|
|
1
|
+
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n const newAvatar = done ? null : avatar;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <>\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && steps && steps.length > 0 && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && steps && steps.length > 0 ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","closeButton","CloseButton","size","onClick","newAvatar","displayGoBack","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","length","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}
|
|
@@ -2,32 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
require('../../common/theme.js');
|
|
7
|
-
require('../../common/direction.js');
|
|
8
|
-
require('@transferwise/neptune-tokens');
|
|
9
|
-
require('../../common/PropsValues/control.js');
|
|
10
|
-
var size = require('../../common/PropsValues/size.js');
|
|
11
|
-
require('../../common/PropsValues/typography.js');
|
|
12
|
-
require('../../common/PropsValues/width.js');
|
|
13
|
-
require('../../common/PropsValues/type.js');
|
|
14
|
-
require('../../common/PropsValues/dateMode.js');
|
|
15
|
-
require('../../common/PropsValues/monthFormat.js');
|
|
16
|
-
require('../../common/PropsValues/position.js');
|
|
17
|
-
require('../../common/PropsValues/layouts.js');
|
|
18
|
-
require('../../common/PropsValues/status.js');
|
|
19
|
-
require('../../common/PropsValues/sentiment.js');
|
|
20
|
-
require('../../common/PropsValues/profileType.js');
|
|
21
|
-
require('../../common/PropsValues/variant.js');
|
|
22
|
-
require('../../common/PropsValues/scroll.js');
|
|
23
|
-
require('../../common/PropsValues/markdownNodeType.js');
|
|
24
|
-
require('../../common/fileType.js');
|
|
25
|
-
require('@transferwise/formatting');
|
|
26
|
-
var CloseButton = require('../../common/CloseButton/CloseButton.js');
|
|
27
|
-
require('react');
|
|
28
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
29
|
-
var FlowHeader = require('../../common/FlowHeader/FlowHeader.js');
|
|
30
5
|
var Logo = require('../../Logo/Logo.js');
|
|
6
|
+
var FlowNavigation = require('../../FlowNavigation/FlowNavigation.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
31
8
|
|
|
32
9
|
const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
|
|
33
10
|
/**
|
|
@@ -38,22 +15,10 @@ function OverlayHeader({
|
|
|
38
15
|
onClose,
|
|
39
16
|
logo = defaultLogo
|
|
40
17
|
}) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
46
|
-
className: "np-overlay-header d-flex justify-content-center",
|
|
47
|
-
children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
|
|
48
|
-
className: "np-overlay-header__content p-a-3",
|
|
49
|
-
leftContent: logo,
|
|
50
|
-
rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
51
|
-
className: clsx.clsx('d-flex', 'align-items-center', 'order-2'),
|
|
52
|
-
children: [avatar, avatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
53
|
-
className: clsx.clsx('m-x-1')
|
|
54
|
-
}), closeButton]
|
|
55
|
-
})
|
|
56
|
-
})
|
|
18
|
+
return /*#__PURE__*/jsxRuntime.jsx(FlowNavigation.default, {
|
|
19
|
+
avatar,
|
|
20
|
+
onClose,
|
|
21
|
+
logo
|
|
57
22
|
});
|
|
58
23
|
}
|
|
59
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n /** An Avatar */\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n /** Function called when the close is clicked */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;;;;;AAcA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,cAAA,CAACM,sBAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}
|
|
@@ -1,29 +1,6 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import '../../common/theme.mjs';
|
|
3
|
-
import '../../common/direction.mjs';
|
|
4
|
-
import '@transferwise/neptune-tokens';
|
|
5
|
-
import '../../common/PropsValues/control.mjs';
|
|
6
|
-
import { Size } from '../../common/PropsValues/size.mjs';
|
|
7
|
-
import '../../common/PropsValues/typography.mjs';
|
|
8
|
-
import '../../common/PropsValues/width.mjs';
|
|
9
|
-
import '../../common/PropsValues/type.mjs';
|
|
10
|
-
import '../../common/PropsValues/dateMode.mjs';
|
|
11
|
-
import '../../common/PropsValues/monthFormat.mjs';
|
|
12
|
-
import '../../common/PropsValues/position.mjs';
|
|
13
|
-
import '../../common/PropsValues/layouts.mjs';
|
|
14
|
-
import '../../common/PropsValues/status.mjs';
|
|
15
|
-
import '../../common/PropsValues/sentiment.mjs';
|
|
16
|
-
import '../../common/PropsValues/profileType.mjs';
|
|
17
|
-
import '../../common/PropsValues/variant.mjs';
|
|
18
|
-
import '../../common/PropsValues/scroll.mjs';
|
|
19
|
-
import '../../common/PropsValues/markdownNodeType.mjs';
|
|
20
|
-
import '../../common/fileType.mjs';
|
|
21
|
-
import '@transferwise/formatting';
|
|
22
|
-
import { CloseButton } from '../../common/CloseButton/CloseButton.mjs';
|
|
23
|
-
import 'react';
|
|
24
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
25
|
-
import FlowHeader from '../../common/FlowHeader/FlowHeader.mjs';
|
|
26
1
|
import Logo from '../../Logo/Logo.mjs';
|
|
2
|
+
import FlowNavigation from '../../FlowNavigation/FlowNavigation.mjs';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
27
4
|
|
|
28
5
|
const defaultLogo = /*#__PURE__*/jsx(Logo, {});
|
|
29
6
|
/**
|
|
@@ -34,22 +11,10 @@ function OverlayHeader({
|
|
|
34
11
|
onClose,
|
|
35
12
|
logo = defaultLogo
|
|
36
13
|
}) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return /*#__PURE__*/jsx("div", {
|
|
42
|
-
className: "np-overlay-header d-flex justify-content-center",
|
|
43
|
-
children: /*#__PURE__*/jsx(FlowHeader, {
|
|
44
|
-
className: "np-overlay-header__content p-a-3",
|
|
45
|
-
leftContent: logo,
|
|
46
|
-
rightContent: /*#__PURE__*/jsxs("div", {
|
|
47
|
-
className: clsx('d-flex', 'align-items-center', 'order-2'),
|
|
48
|
-
children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
|
|
49
|
-
className: clsx('m-x-1')
|
|
50
|
-
}), closeButton]
|
|
51
|
-
})
|
|
52
|
-
})
|
|
14
|
+
return /*#__PURE__*/jsx(FlowNavigation, {
|
|
15
|
+
avatar,
|
|
16
|
+
onClose,
|
|
17
|
+
logo
|
|
53
18
|
});
|
|
54
19
|
}
|
|
55
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n /** An Avatar */\n avatar?: React.ReactNode;\n logo?: React.ReactNode;\n /** Function called when the close is clicked */\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;AAcA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,GAAA,CAACM,cAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}
|
package/build/main.css
CHANGED
|
@@ -29013,7 +29013,13 @@ button.np-option {
|
|
|
29013
29013
|
justify-content: center;
|
|
29014
29014
|
width: 100%;
|
|
29015
29015
|
box-sizing: border-box;
|
|
29016
|
-
min-height:
|
|
29016
|
+
min-height: 80px;
|
|
29017
|
+
}
|
|
29018
|
+
|
|
29019
|
+
@media (min-width: 320.02px) {
|
|
29020
|
+
.np-flow-navigation {
|
|
29021
|
+
min-height: 128px;
|
|
29022
|
+
}
|
|
29017
29023
|
}
|
|
29018
29024
|
|
|
29019
29025
|
.np-flow-navigation--border-bottom {
|
|
@@ -29024,7 +29030,7 @@ button.np-option {
|
|
|
29024
29030
|
.np-flow-navigation__content {
|
|
29025
29031
|
width: 100%;
|
|
29026
29032
|
min-width: 320px;
|
|
29027
|
-
max-width:
|
|
29033
|
+
max-width: none;
|
|
29028
29034
|
}
|
|
29029
29035
|
|
|
29030
29036
|
.np-flow-navigation__stepper {
|
|
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29101
29107
|
visibility: hidden;
|
|
29102
29108
|
}
|
|
29103
29109
|
|
|
29104
|
-
.np-flow-navigation--composable {
|
|
29105
|
-
min-height: 80px;
|
|
29106
|
-
}
|
|
29107
|
-
|
|
29108
|
-
@media (min-width: 320.02px) {
|
|
29109
|
-
.np-flow-navigation--composable {
|
|
29110
|
-
min-height: 128px;
|
|
29111
|
-
}
|
|
29112
|
-
}
|
|
29113
|
-
|
|
29114
|
-
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
29115
|
-
max-width: none;
|
|
29116
|
-
}
|
|
29117
|
-
|
|
29118
29110
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
29119
29111
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
29120
29112
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
31650
31642
|
text-decoration: var(--nudge-link-text-decoration);
|
|
31651
31643
|
}
|
|
31652
31644
|
|
|
31653
|
-
.np-overlay-header .np-overlay-header__content {
|
|
31654
|
-
min-height: 97px;
|
|
31655
|
-
width: 100%;
|
|
31656
|
-
min-width: 320px;
|
|
31657
|
-
max-width: calc(1160px - 36px);
|
|
31658
|
-
}
|
|
31659
|
-
|
|
31660
|
-
.np-theme-personal .np-overlay-header {
|
|
31661
|
-
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
31662
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
31663
|
-
}
|
|
31664
|
-
|
|
31665
|
-
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
31666
|
-
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
31667
|
-
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
31668
|
-
fill: var(--color-interactive-primary);
|
|
31669
|
-
}
|
|
31670
|
-
|
|
31671
31645
|
.tw-telephone {
|
|
31672
31646
|
display: flex;
|
|
31673
31647
|
}
|
|
@@ -4,7 +4,12 @@
|
|
|
4
4
|
justify-content: center;
|
|
5
5
|
width: 100%;
|
|
6
6
|
box-sizing: border-box;
|
|
7
|
-
min-height:
|
|
7
|
+
min-height: 80px;
|
|
8
|
+
}
|
|
9
|
+
@media (min-width: 320.02px) {
|
|
10
|
+
.np-flow-navigation {
|
|
11
|
+
min-height: 128px;
|
|
12
|
+
}
|
|
8
13
|
}
|
|
9
14
|
.np-flow-navigation--border-bottom {
|
|
10
15
|
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
@@ -13,7 +18,7 @@
|
|
|
13
18
|
.np-flow-navigation__content {
|
|
14
19
|
width: 100%;
|
|
15
20
|
min-width: 320px;
|
|
16
|
-
max-width:
|
|
21
|
+
max-width: none;
|
|
17
22
|
}
|
|
18
23
|
.np-flow-navigation__stepper {
|
|
19
24
|
padding-bottom: 0 !important;
|
|
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
72
77
|
.np-flow-navigation--hidden {
|
|
73
78
|
visibility: hidden;
|
|
74
79
|
}
|
|
75
|
-
.np-flow-navigation--composable {
|
|
76
|
-
min-height: 80px;
|
|
77
|
-
}
|
|
78
|
-
@media (min-width: 320.02px) {
|
|
79
|
-
.np-flow-navigation--composable {
|
|
80
|
-
min-height: 128px;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
84
|
-
max-width: none;
|
|
85
|
-
}
|
|
86
80
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
87
81
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
88
82
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
package/build/styles/main.css
CHANGED
|
@@ -29013,7 +29013,13 @@ button.np-option {
|
|
|
29013
29013
|
justify-content: center;
|
|
29014
29014
|
width: 100%;
|
|
29015
29015
|
box-sizing: border-box;
|
|
29016
|
-
min-height:
|
|
29016
|
+
min-height: 80px;
|
|
29017
|
+
}
|
|
29018
|
+
|
|
29019
|
+
@media (min-width: 320.02px) {
|
|
29020
|
+
.np-flow-navigation {
|
|
29021
|
+
min-height: 128px;
|
|
29022
|
+
}
|
|
29017
29023
|
}
|
|
29018
29024
|
|
|
29019
29025
|
.np-flow-navigation--border-bottom {
|
|
@@ -29024,7 +29030,7 @@ button.np-option {
|
|
|
29024
29030
|
.np-flow-navigation__content {
|
|
29025
29031
|
width: 100%;
|
|
29026
29032
|
min-width: 320px;
|
|
29027
|
-
max-width:
|
|
29033
|
+
max-width: none;
|
|
29028
29034
|
}
|
|
29029
29035
|
|
|
29030
29036
|
.np-flow-navigation__stepper {
|
|
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29101
29107
|
visibility: hidden;
|
|
29102
29108
|
}
|
|
29103
29109
|
|
|
29104
|
-
.np-flow-navigation--composable {
|
|
29105
|
-
min-height: 80px;
|
|
29106
|
-
}
|
|
29107
|
-
|
|
29108
|
-
@media (min-width: 320.02px) {
|
|
29109
|
-
.np-flow-navigation--composable {
|
|
29110
|
-
min-height: 128px;
|
|
29111
|
-
}
|
|
29112
|
-
}
|
|
29113
|
-
|
|
29114
|
-
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
29115
|
-
max-width: none;
|
|
29116
|
-
}
|
|
29117
|
-
|
|
29118
29110
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
29119
29111
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
29120
29112
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
31650
31642
|
text-decoration: var(--nudge-link-text-decoration);
|
|
31651
31643
|
}
|
|
31652
31644
|
|
|
31653
|
-
.np-overlay-header .np-overlay-header__content {
|
|
31654
|
-
min-height: 97px;
|
|
31655
|
-
width: 100%;
|
|
31656
|
-
min-width: 320px;
|
|
31657
|
-
max-width: calc(1160px - 36px);
|
|
31658
|
-
}
|
|
31659
|
-
|
|
31660
|
-
.np-theme-personal .np-overlay-header {
|
|
31661
|
-
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
31662
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
31663
|
-
}
|
|
31664
|
-
|
|
31665
|
-
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
31666
|
-
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
31667
|
-
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
31668
|
-
fill: var(--color-interactive-primary);
|
|
31669
|
-
}
|
|
31670
|
-
|
|
31671
31645
|
.tw-telephone {
|
|
31672
31646
|
display: flex;
|
|
31673
31647
|
}
|
|
@@ -8,24 +8,17 @@ export interface FlowNavigationProps {
|
|
|
8
8
|
/** @default false */
|
|
9
9
|
done?: boolean;
|
|
10
10
|
/** Called when the close button is clicked. If not provided the close button won't show */
|
|
11
|
-
onClose?: () => void
|
|
11
|
+
onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
|
|
12
12
|
/** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
|
|
13
13
|
onGoBack?: () => void;
|
|
14
14
|
/** Steps to be displayed in stepper. If not provided, the stepper won't show. */
|
|
15
15
|
steps?: readonly Step[];
|
|
16
|
-
/**
|
|
17
|
-
* When true, renders in composable mode using a fluid Container.
|
|
18
|
-
* This allows the FlowNavigation to be used within custom layout containers.
|
|
19
|
-
* @default false
|
|
20
|
-
*/
|
|
21
|
-
composable?: boolean;
|
|
22
16
|
/**
|
|
23
17
|
* Controls whether the bottom border is displayed.
|
|
24
|
-
* Only applies to the composable variant. Non-composable variant always uses the done state.
|
|
25
18
|
* @default true
|
|
26
19
|
*/
|
|
27
20
|
showBottomBorder?: boolean;
|
|
28
21
|
}
|
|
29
|
-
declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps,
|
|
22
|
+
declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
|
|
30
23
|
export default FlowNavigation;
|
|
31
24
|
//# sourceMappingURL=FlowNavigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCAyErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAEhG"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,12 @@
|
|
|
4
4
|
justify-content: center;
|
|
5
5
|
width: 100%;
|
|
6
6
|
box-sizing: border-box;
|
|
7
|
-
min-height:
|
|
7
|
+
min-height: 80px;
|
|
8
|
+
}
|
|
9
|
+
@media (min-width: 320.02px) {
|
|
10
|
+
.np-flow-navigation {
|
|
11
|
+
min-height: 128px;
|
|
12
|
+
}
|
|
8
13
|
}
|
|
9
14
|
.np-flow-navigation--border-bottom {
|
|
10
15
|
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
@@ -13,7 +18,7 @@
|
|
|
13
18
|
.np-flow-navigation__content {
|
|
14
19
|
width: 100%;
|
|
15
20
|
min-width: 320px;
|
|
16
|
-
max-width:
|
|
21
|
+
max-width: none;
|
|
17
22
|
}
|
|
18
23
|
.np-flow-navigation__stepper {
|
|
19
24
|
padding-bottom: 0 !important;
|
|
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
72
77
|
.np-flow-navigation--hidden {
|
|
73
78
|
visibility: hidden;
|
|
74
79
|
}
|
|
75
|
-
.np-flow-navigation--composable {
|
|
76
|
-
min-height: 80px;
|
|
77
|
-
}
|
|
78
|
-
@media (min-width: 320.02px) {
|
|
79
|
-
.np-flow-navigation--composable {
|
|
80
|
-
min-height: 128px;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
84
|
-
max-width: none;
|
|
85
|
-
}
|
|
86
80
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
87
81
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
88
82
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -9,7 +9,11 @@
|
|
|
9
9
|
box-sizing: border-box;
|
|
10
10
|
|
|
11
11
|
// This is the natural height of FlowNavigation when the Avatar is displayed.
|
|
12
|
-
min-height:
|
|
12
|
+
min-height: 80px;
|
|
13
|
+
|
|
14
|
+
@media (--screen-xs) {
|
|
15
|
+
min-height: 128px;
|
|
16
|
+
}
|
|
13
17
|
|
|
14
18
|
&--border-bottom {
|
|
15
19
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
@@ -18,7 +22,7 @@
|
|
|
18
22
|
&__content {
|
|
19
23
|
width: 100%;
|
|
20
24
|
min-width: 320px;
|
|
21
|
-
max-width:
|
|
25
|
+
max-width: none;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
&__stepper {
|
|
@@ -69,19 +73,6 @@
|
|
|
69
73
|
visibility: hidden;
|
|
70
74
|
}
|
|
71
75
|
|
|
72
|
-
&--composable {
|
|
73
|
-
min-height: 80px;
|
|
74
|
-
|
|
75
|
-
@media (--screen-xs) {
|
|
76
|
-
min-height: 128px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.np-flow-navigation__content {
|
|
80
|
-
// Remove max-width constraint for fluid layout
|
|
81
|
-
max-width: none;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
76
|
.np-theme-personal--forest-green &,
|
|
86
77
|
.np-theme-personal--bright-green &,
|
|
87
78
|
.np-theme-personal--dark & {
|
|
@@ -26,20 +26,13 @@ export interface FlowNavigationProps {
|
|
|
26
26
|
/** @default false */
|
|
27
27
|
done?: boolean;
|
|
28
28
|
/** Called when the close button is clicked. If not provided the close button won't show */
|
|
29
|
-
onClose?: () => void
|
|
29
|
+
onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
|
|
30
30
|
/** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
|
|
31
31
|
onGoBack?: () => void;
|
|
32
32
|
/** Steps to be displayed in stepper. If not provided, the stepper won't show. */
|
|
33
33
|
steps?: readonly Step[];
|
|
34
|
-
/**
|
|
35
|
-
* When true, renders in composable mode using a fluid Container.
|
|
36
|
-
* This allows the FlowNavigation to be used within custom layout containers.
|
|
37
|
-
* @default false
|
|
38
|
-
*/
|
|
39
|
-
composable?: boolean;
|
|
40
34
|
/**
|
|
41
35
|
* Controls whether the bottom border is displayed.
|
|
42
|
-
* Only applies to the composable variant. Non-composable variant always uses the done state.
|
|
43
36
|
* @default true
|
|
44
37
|
*/
|
|
45
38
|
showBottomBorder?: boolean;
|
|
@@ -53,7 +46,6 @@ const FlowNavigation = ({
|
|
|
53
46
|
onClose,
|
|
54
47
|
onGoBack,
|
|
55
48
|
steps,
|
|
56
|
-
composable = false,
|
|
57
49
|
showBottomBorder = true,
|
|
58
50
|
}: FlowNavigationProps) => {
|
|
59
51
|
const intl = useIntl();
|
|
@@ -69,7 +61,6 @@ const FlowNavigation = ({
|
|
|
69
61
|
<FlowHeader
|
|
70
62
|
className={clsx(
|
|
71
63
|
'np-flow-navigation__content',
|
|
72
|
-
!composable && 'p-x-3',
|
|
73
64
|
screenSm == null
|
|
74
65
|
? 'np-flow-navigation--hidden'
|
|
75
66
|
: {
|
|
@@ -119,27 +110,15 @@ const FlowNavigation = ({
|
|
|
119
110
|
/>
|
|
120
111
|
);
|
|
121
112
|
|
|
122
|
-
if (composable) {
|
|
123
|
-
return (
|
|
124
|
-
<Container
|
|
125
|
-
size="fluid"
|
|
126
|
-
className={clsx('np-flow-navigation np-flow-navigation--composable', {
|
|
127
|
-
'np-flow-navigation--border-bottom': showBottomBorder,
|
|
128
|
-
})}
|
|
129
|
-
>
|
|
130
|
-
{flowHeaderContent}
|
|
131
|
-
</Container>
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
113
|
return (
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
114
|
+
<Container
|
|
115
|
+
size="fluid"
|
|
116
|
+
className={clsx('np-flow-navigation', {
|
|
117
|
+
'np-flow-navigation--border-bottom': showBottomBorder,
|
|
139
118
|
})}
|
|
140
119
|
>
|
|
141
120
|
{flowHeaderContent}
|
|
142
|
-
</
|
|
121
|
+
</Container>
|
|
143
122
|
);
|
|
144
123
|
};
|
|
145
124
|
|
|
@@ -384,89 +384,6 @@ export const WithOverlayHeaderComparison: Story = {
|
|
|
384
384
|
},
|
|
385
385
|
};
|
|
386
386
|
|
|
387
|
-
export const ComposableVariant: Story = {
|
|
388
|
-
args: {
|
|
389
|
-
profileType: ProfileType.PERSONAL,
|
|
390
|
-
showCloseButton: true,
|
|
391
|
-
showMobileBackButton: true,
|
|
392
|
-
done: false,
|
|
393
|
-
avatarURL: '../tapestry-01.png',
|
|
394
|
-
},
|
|
395
|
-
parameters: {
|
|
396
|
-
padding: '0',
|
|
397
|
-
chromatic: {
|
|
398
|
-
viewports,
|
|
399
|
-
},
|
|
400
|
-
},
|
|
401
|
-
render: (args) => {
|
|
402
|
-
const [activeStep, setActiveStep] = useState(2);
|
|
403
|
-
const steps = [
|
|
404
|
-
{
|
|
405
|
-
label: 'Recipient',
|
|
406
|
-
onClick: () => setActiveStep(0),
|
|
407
|
-
},
|
|
408
|
-
{
|
|
409
|
-
label: 'Amount',
|
|
410
|
-
hoverLabel: (
|
|
411
|
-
<>
|
|
412
|
-
You send 100 GBP <br />
|
|
413
|
-
You get 99.39 GBP{' '}
|
|
414
|
-
</>
|
|
415
|
-
),
|
|
416
|
-
...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
|
|
417
|
-
},
|
|
418
|
-
{
|
|
419
|
-
label: 'Review',
|
|
420
|
-
...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
|
|
421
|
-
},
|
|
422
|
-
{
|
|
423
|
-
label: 'Pay',
|
|
424
|
-
...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
|
|
425
|
-
},
|
|
426
|
-
];
|
|
427
|
-
return (
|
|
428
|
-
<>
|
|
429
|
-
<FlowNavigation
|
|
430
|
-
composable
|
|
431
|
-
avatar={<AvatarView profileType={args.profileType} />}
|
|
432
|
-
logo={<Logo />}
|
|
433
|
-
activeStep={activeStep}
|
|
434
|
-
steps={steps}
|
|
435
|
-
onClose={args.showCloseButton ? () => alert('close') : undefined}
|
|
436
|
-
onGoBack={
|
|
437
|
-
args.showMobileBackButton
|
|
438
|
-
? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
|
|
439
|
-
: undefined
|
|
440
|
-
}
|
|
441
|
-
/>
|
|
442
|
-
<Container size="narrow">
|
|
443
|
-
<Body className="m-a-3">
|
|
444
|
-
<Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
|
|
445
|
-
<br />
|
|
446
|
-
{lorem10}
|
|
447
|
-
</Body>
|
|
448
|
-
</Container>
|
|
449
|
-
|
|
450
|
-
<Sticky>
|
|
451
|
-
<Container
|
|
452
|
-
size="narrow"
|
|
453
|
-
className="d-flex justify-content-center align-items-center p-y-3"
|
|
454
|
-
>
|
|
455
|
-
<Button
|
|
456
|
-
v2
|
|
457
|
-
disabled={activeStep === 3}
|
|
458
|
-
block
|
|
459
|
-
onClick={() => setActiveStep(activeStep + 1)}
|
|
460
|
-
>
|
|
461
|
-
Continue
|
|
462
|
-
</Button>
|
|
463
|
-
</Container>
|
|
464
|
-
</Sticky>
|
|
465
|
-
</>
|
|
466
|
-
);
|
|
467
|
-
},
|
|
468
|
-
};
|
|
469
|
-
|
|
470
387
|
export const WithoutStepper: Story = {
|
|
471
388
|
args: {
|
|
472
389
|
profileType: ProfileType.PERSONAL,
|
|
@@ -575,7 +492,6 @@ export const BorderControl: Story = {
|
|
|
575
492
|
|
|
576
493
|
{/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
|
|
577
494
|
<FlowNavigation
|
|
578
|
-
composable
|
|
579
495
|
avatar={<AvatarView profileType={args.profileType} />}
|
|
580
496
|
logo={<Logo />}
|
|
581
497
|
activeStep={activeStep}
|
|
@@ -591,7 +507,6 @@ export const BorderControl: Story = {
|
|
|
591
507
|
|
|
592
508
|
{/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
|
|
593
509
|
<FlowNavigation
|
|
594
|
-
composable
|
|
595
510
|
avatar={<AvatarView profileType={args.profileType} />}
|
|
596
511
|
logo={<Logo />}
|
|
597
512
|
activeStep={activeStep}
|
|
@@ -607,7 +522,6 @@ export const BorderControl: Story = {
|
|
|
607
522
|
|
|
608
523
|
{/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
|
|
609
524
|
<FlowNavigation
|
|
610
|
-
composable
|
|
611
525
|
avatar={<AvatarView profileType={args.profileType} />}
|
|
612
526
|
logo={<Logo />}
|
|
613
527
|
activeStep={activeStep}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
|
|
3
|
-
import { Size } from '../../common';
|
|
4
|
-
import { CloseButton } from '../../common/CloseButton';
|
|
5
|
-
import FlowHeader from '../../common/FlowHeader';
|
|
6
1
|
import Logo from '../../Logo';
|
|
2
|
+
import FlowNavigation from '../../FlowNavigation';
|
|
7
3
|
|
|
8
4
|
/**
|
|
9
5
|
* @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
|
|
@@ -22,20 +18,5 @@ const defaultLogo = <Logo />;
|
|
|
22
18
|
* @deprecated Use `FlowNavigation` component instead
|
|
23
19
|
*/
|
|
24
20
|
export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<div className="np-overlay-header d-flex justify-content-center">
|
|
28
|
-
<FlowHeader
|
|
29
|
-
className="np-overlay-header__content p-a-3"
|
|
30
|
-
leftContent={logo}
|
|
31
|
-
rightContent={
|
|
32
|
-
<div className={clsx('d-flex', 'align-items-center', 'order-2')}>
|
|
33
|
-
{avatar}
|
|
34
|
-
{avatar && closeButton && <span className={clsx('m-x-1')} />}
|
|
35
|
-
{closeButton}
|
|
36
|
-
</div>
|
|
37
|
-
}
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
40
|
-
);
|
|
21
|
+
return <FlowNavigation {...{ avatar, onClose, logo }} />;
|
|
41
22
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { screen, userEvent, within } from 'storybook/test';
|
|
2
3
|
import { useRef, useState } from 'react';
|
|
3
4
|
|
|
4
5
|
import Button from '../../../Button';
|
|
@@ -15,6 +16,9 @@ export default {
|
|
|
15
16
|
'Panel is a low-level floating component used by Popover and ResponsivePanel. It supports all floating-ui placements.',
|
|
16
17
|
},
|
|
17
18
|
},
|
|
19
|
+
chromatic: {
|
|
20
|
+
delay: 500,
|
|
21
|
+
},
|
|
18
22
|
},
|
|
19
23
|
} satisfies Meta<typeof Panel>;
|
|
20
24
|
|
|
@@ -50,7 +54,10 @@ const PanelDemo = ({
|
|
|
50
54
|
);
|
|
51
55
|
};
|
|
52
56
|
|
|
53
|
-
export const
|
|
57
|
+
export const AllPositions: Story = {
|
|
58
|
+
parameters: {
|
|
59
|
+
chromatic: { disableSnapshot: true },
|
|
60
|
+
},
|
|
54
61
|
render: () => (
|
|
55
62
|
<div
|
|
56
63
|
style={{
|
|
@@ -63,49 +70,113 @@ export const CardinalPositions: Story = {
|
|
|
63
70
|
}}
|
|
64
71
|
>
|
|
65
72
|
<PanelDemo position={Position.TOP} label="top" />
|
|
73
|
+
<PanelDemo position={Position.TOP_LEFT} label="top-left" />
|
|
74
|
+
<PanelDemo position={Position.TOP_RIGHT} label="top-right" />
|
|
66
75
|
<PanelDemo position={Position.RIGHT} label="right" />
|
|
76
|
+
<PanelDemo position={Position.RIGHT_TOP} label="right-top" />
|
|
77
|
+
<PanelDemo position={Position.RIGHT_BOTTOM} label="right-bottom" />
|
|
67
78
|
<PanelDemo position={Position.BOTTOM} label="bottom" />
|
|
79
|
+
<PanelDemo position={Position.BOTTOM_LEFT} label="bottom-left" />
|
|
80
|
+
<PanelDemo position={Position.BOTTOM_RIGHT} label="bottom-right" />
|
|
68
81
|
<PanelDemo position={Position.LEFT} label="left" />
|
|
82
|
+
<PanelDemo position={Position.LEFT_TOP} label="left-top" />
|
|
83
|
+
<PanelDemo position={Position.LEFT_BOTTOM} label="left-bottom" />
|
|
69
84
|
</div>
|
|
70
85
|
),
|
|
71
86
|
};
|
|
72
87
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
>
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
88
|
+
const SinglePanelDemo = ({
|
|
89
|
+
position,
|
|
90
|
+
label,
|
|
91
|
+
}: {
|
|
92
|
+
position: Parameters<typeof Panel>[0]['position'];
|
|
93
|
+
label: string;
|
|
94
|
+
}) => {
|
|
95
|
+
const anchorRef = useRef<HTMLButtonElement>(null);
|
|
96
|
+
const [open, setOpen] = useState(false);
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<div style={{ padding: '120px 250px' }}>
|
|
100
|
+
<Button ref={anchorRef} onClick={() => setOpen((prev) => !prev)}>
|
|
101
|
+
{label}
|
|
102
|
+
</Button>
|
|
103
|
+
<Panel
|
|
104
|
+
open={open}
|
|
105
|
+
position={position}
|
|
106
|
+
anchorRef={anchorRef}
|
|
107
|
+
onClose={() => setOpen(false)}
|
|
108
|
+
aria-label={`Panel positioned ${label}`}
|
|
109
|
+
>
|
|
110
|
+
<div style={{ padding: '16px', maxWidth: '200px' }}>
|
|
111
|
+
Panel content positioned at <strong>{label}</strong>
|
|
112
|
+
</div>
|
|
113
|
+
</Panel>
|
|
89
114
|
</div>
|
|
90
|
-
)
|
|
115
|
+
);
|
|
91
116
|
};
|
|
92
117
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
)
|
|
118
|
+
const openPanelPlay = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
|
|
119
|
+
const canvas = within(canvasElement);
|
|
120
|
+
await userEvent.click(canvas.getByRole('button'));
|
|
121
|
+
await screen.findByText(/Panel content positioned at/i);
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
export const Top: Story = {
|
|
125
|
+
render: () => <SinglePanelDemo position={Position.TOP} label="top" />,
|
|
126
|
+
play: openPanelPlay,
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
export const Right: Story = {
|
|
130
|
+
render: () => <SinglePanelDemo position={Position.RIGHT} label="right" />,
|
|
131
|
+
play: openPanelPlay,
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export const Bottom: Story = {
|
|
135
|
+
render: () => <SinglePanelDemo position={Position.BOTTOM} label="bottom" />,
|
|
136
|
+
play: openPanelPlay,
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
export const Left: Story = {
|
|
140
|
+
render: () => <SinglePanelDemo position={Position.LEFT} label="left" />,
|
|
141
|
+
play: openPanelPlay,
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export const TopLeft: Story = {
|
|
145
|
+
render: () => <SinglePanelDemo position={Position.TOP_LEFT} label="top-left" />,
|
|
146
|
+
play: openPanelPlay,
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
export const TopRight: Story = {
|
|
150
|
+
render: () => <SinglePanelDemo position={Position.TOP_RIGHT} label="top-right" />,
|
|
151
|
+
play: openPanelPlay,
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export const RightTop: Story = {
|
|
155
|
+
render: () => <SinglePanelDemo position={Position.RIGHT_TOP} label="right-top" />,
|
|
156
|
+
play: openPanelPlay,
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
export const RightBottom: Story = {
|
|
160
|
+
render: () => <SinglePanelDemo position={Position.RIGHT_BOTTOM} label="right-bottom" />,
|
|
161
|
+
play: openPanelPlay,
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
export const BottomRight: Story = {
|
|
165
|
+
render: () => <SinglePanelDemo position={Position.BOTTOM_RIGHT} label="bottom-right" />,
|
|
166
|
+
play: openPanelPlay,
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export const BottomLeft: Story = {
|
|
170
|
+
render: () => <SinglePanelDemo position={Position.BOTTOM_LEFT} label="bottom-left" />,
|
|
171
|
+
play: openPanelPlay,
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
export const LeftBottom: Story = {
|
|
175
|
+
render: () => <SinglePanelDemo position={Position.LEFT_BOTTOM} label="left-bottom" />,
|
|
176
|
+
play: openPanelPlay,
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
export const LeftTop: Story = {
|
|
180
|
+
render: () => <SinglePanelDemo position={Position.LEFT_TOP} label="left-top" />,
|
|
181
|
+
play: openPanelPlay,
|
|
111
182
|
};
|
package/src/main.css
CHANGED
|
@@ -29013,7 +29013,13 @@ button.np-option {
|
|
|
29013
29013
|
justify-content: center;
|
|
29014
29014
|
width: 100%;
|
|
29015
29015
|
box-sizing: border-box;
|
|
29016
|
-
min-height:
|
|
29016
|
+
min-height: 80px;
|
|
29017
|
+
}
|
|
29018
|
+
|
|
29019
|
+
@media (min-width: 320.02px) {
|
|
29020
|
+
.np-flow-navigation {
|
|
29021
|
+
min-height: 128px;
|
|
29022
|
+
}
|
|
29017
29023
|
}
|
|
29018
29024
|
|
|
29019
29025
|
.np-flow-navigation--border-bottom {
|
|
@@ -29024,7 +29030,7 @@ button.np-option {
|
|
|
29024
29030
|
.np-flow-navigation__content {
|
|
29025
29031
|
width: 100%;
|
|
29026
29032
|
min-width: 320px;
|
|
29027
|
-
max-width:
|
|
29033
|
+
max-width: none;
|
|
29028
29034
|
}
|
|
29029
29035
|
|
|
29030
29036
|
.np-flow-navigation__stepper {
|
|
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29101
29107
|
visibility: hidden;
|
|
29102
29108
|
}
|
|
29103
29109
|
|
|
29104
|
-
.np-flow-navigation--composable {
|
|
29105
|
-
min-height: 80px;
|
|
29106
|
-
}
|
|
29107
|
-
|
|
29108
|
-
@media (min-width: 320.02px) {
|
|
29109
|
-
.np-flow-navigation--composable {
|
|
29110
|
-
min-height: 128px;
|
|
29111
|
-
}
|
|
29112
|
-
}
|
|
29113
|
-
|
|
29114
|
-
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
29115
|
-
max-width: none;
|
|
29116
|
-
}
|
|
29117
|
-
|
|
29118
29110
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
29119
29111
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
29120
29112
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
31650
31642
|
text-decoration: var(--nudge-link-text-decoration);
|
|
31651
31643
|
}
|
|
31652
31644
|
|
|
31653
|
-
.np-overlay-header .np-overlay-header__content {
|
|
31654
|
-
min-height: 97px;
|
|
31655
|
-
width: 100%;
|
|
31656
|
-
min-width: 320px;
|
|
31657
|
-
max-width: calc(1160px - 36px);
|
|
31658
|
-
}
|
|
31659
|
-
|
|
31660
|
-
.np-theme-personal .np-overlay-header {
|
|
31661
|
-
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
31662
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
31663
|
-
}
|
|
31664
|
-
|
|
31665
|
-
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
31666
|
-
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
31667
|
-
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
31668
|
-
fill: var(--color-interactive-primary);
|
|
31669
|
-
}
|
|
31670
|
-
|
|
31671
31645
|
.tw-telephone {
|
|
31672
31646
|
display: flex;
|
|
31673
31647
|
}
|
package/src/main.less
CHANGED
|
@@ -63,7 +63,6 @@
|
|
|
63
63
|
@import "./_deprecated/NavigationOption/NavigationOption.less";
|
|
64
64
|
@import "./_deprecated/NavigationOptionsList/NavigationOptionsList.less";
|
|
65
65
|
@import "./Nudge/Nudge.less";
|
|
66
|
-
@import "./_deprecated/OverlayHeader/OverlayHeader.less";
|
|
67
66
|
@import "./PhoneNumberInput/PhoneNumberInput.less";
|
|
68
67
|
@import "./Popover/Popover.less";
|
|
69
68
|
@import "./PromoCard/PromoCard.less";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.np-overlay-header .np-overlay-header__content {
|
|
2
|
-
min-height: 97px;
|
|
3
|
-
width: 100%;
|
|
4
|
-
min-width: 320px;
|
|
5
|
-
max-width: calc(1160px - 36px);
|
|
6
|
-
}
|
|
7
|
-
.np-theme-personal .np-overlay-header {
|
|
8
|
-
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
9
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
10
|
-
}
|
|
11
|
-
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
12
|
-
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
13
|
-
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
14
|
-
fill: var(--color-interactive-primary);
|
|
15
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.np-overlay-header .np-overlay-header__content {
|
|
2
|
-
min-height: 97px;
|
|
3
|
-
width: 100%;
|
|
4
|
-
min-width: 320px;
|
|
5
|
-
max-width: calc(1160px - 36px);
|
|
6
|
-
}
|
|
7
|
-
.np-theme-personal .np-overlay-header {
|
|
8
|
-
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
9
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
10
|
-
}
|
|
11
|
-
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
12
|
-
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
13
|
-
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
14
|
-
fill: var(--color-interactive-primary);
|
|
15
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
|
|
2
|
-
@import (reference) "./../../styles/less/addons/_spacing-utilities.less";
|
|
3
|
-
|
|
4
|
-
.np-overlay-header {
|
|
5
|
-
.np-overlay-header__content {
|
|
6
|
-
// Same height and width as in FlowNavigation
|
|
7
|
-
min-height: 97px;
|
|
8
|
-
width: 100%;
|
|
9
|
-
min-width: @screen-xs-min;
|
|
10
|
-
max-width: calc(@screen-lg-min - 36px);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.np-theme-personal & {
|
|
14
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.np-theme-personal--forest-green &,
|
|
18
|
-
.np-theme-personal--bright-green &,
|
|
19
|
-
.np-theme-personal--dark & {
|
|
20
|
-
.np-flow-header__left path {
|
|
21
|
-
fill: var(--color-interactive-primary);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|