@transferwise/components 46.160.3 → 46.160.4
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 +6 -4
- package/build/FlowNavigation/FlowNavigation.js.map +1 -1
- package/build/FlowNavigation/FlowNavigation.mjs +6 -4
- package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/main.css +10 -0
- package/build/styles/FlowNavigation/FlowNavigation.css +10 -0
- package/build/styles/main.css +10 -0
- package/build/types/FlowNavigation/FlowNavigation.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/FlowNavigation/FlowNavigation.css +10 -0
- package/src/FlowNavigation/FlowNavigation.less +11 -0
- package/src/FlowNavigation/FlowNavigation.tsx +6 -4
- package/src/main.css +10 -0
|
@@ -51,12 +51,13 @@ const FlowNavigation = ({
|
|
|
51
51
|
const intl = reactIntl.useIntl();
|
|
52
52
|
const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
|
|
53
53
|
const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
|
|
54
|
+
const hasSteps = steps && steps.length > 0;
|
|
55
|
+
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
54
56
|
const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
|
|
55
57
|
size: "lg",
|
|
56
58
|
onClick: onClose
|
|
57
59
|
});
|
|
58
60
|
const newAvatar = done ? null : avatar;
|
|
59
|
-
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
60
61
|
const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
|
|
61
62
|
className: clsx.clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
62
63
|
'np-flow-navigation--xs-max': !screenSm,
|
|
@@ -75,7 +76,7 @@ const FlowNavigation = ({
|
|
|
75
76
|
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
76
77
|
className: "np-flow-header__left",
|
|
77
78
|
children: logo
|
|
78
|
-
}), !screenSm && !done &&
|
|
79
|
+
}), !screenSm && !done && hasSteps && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
|
|
79
80
|
className: "m-x-1",
|
|
80
81
|
steps: steps,
|
|
81
82
|
activeLabel: activeStep
|
|
@@ -87,7 +88,7 @@ const FlowNavigation = ({
|
|
|
87
88
|
className: "m-x-1"
|
|
88
89
|
}), closeButton]
|
|
89
90
|
}),
|
|
90
|
-
bottomContent: !done &&
|
|
91
|
+
bottomContent: !done && hasSteps ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
|
|
91
92
|
activeStep: activeStep,
|
|
92
93
|
steps: steps,
|
|
93
94
|
className: clsx.clsx('np-flow-navigation__stepper')
|
|
@@ -97,7 +98,8 @@ const FlowNavigation = ({
|
|
|
97
98
|
return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
|
|
98
99
|
size: "fluid",
|
|
99
100
|
className: clsx.clsx('np-flow-navigation', {
|
|
100
|
-
'np-flow-navigation--border-bottom': showBottomBorder
|
|
101
|
+
'np-flow-navigation--border-bottom': showBottomBorder,
|
|
102
|
+
'np-flow-navigation--no-steps': !hasSteps || done
|
|
101
103
|
}),
|
|
102
104
|
children: flowHeaderContent
|
|
103
105
|
});
|
|
@@ -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) | 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
|
|
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 hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\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 && hasSteps && (\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 && hasSteps ? (\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 'np-flow-navigation--no-steps': !hasSteps || done,\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","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}
|
|
@@ -47,12 +47,13 @@ const FlowNavigation = ({
|
|
|
47
47
|
const intl = useIntl();
|
|
48
48
|
const screenSm = useScreenSize(Breakpoint.SMALL);
|
|
49
49
|
const screenLg = useScreenSize(Breakpoint.LARGE);
|
|
50
|
+
const hasSteps = steps && steps.length > 0;
|
|
51
|
+
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
50
52
|
const closeButton = onClose != null && /*#__PURE__*/jsx(CloseButton, {
|
|
51
53
|
size: "lg",
|
|
52
54
|
onClick: onClose
|
|
53
55
|
});
|
|
54
56
|
const newAvatar = done ? null : avatar;
|
|
55
|
-
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
56
57
|
const flowHeaderContent = /*#__PURE__*/jsx(FlowHeader, {
|
|
57
58
|
className: clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
58
59
|
'np-flow-navigation--xs-max': !screenSm,
|
|
@@ -71,7 +72,7 @@ const FlowNavigation = ({
|
|
|
71
72
|
}) : /*#__PURE__*/jsx("div", {
|
|
72
73
|
className: "np-flow-header__left",
|
|
73
74
|
children: logo
|
|
74
|
-
}), !screenSm && !done &&
|
|
75
|
+
}), !screenSm && !done && hasSteps && /*#__PURE__*/jsx(AnimatedLabel, {
|
|
75
76
|
className: "m-x-1",
|
|
76
77
|
steps: steps,
|
|
77
78
|
activeLabel: activeStep
|
|
@@ -83,7 +84,7 @@ const FlowNavigation = ({
|
|
|
83
84
|
className: "m-x-1"
|
|
84
85
|
}), closeButton]
|
|
85
86
|
}),
|
|
86
|
-
bottomContent: !done &&
|
|
87
|
+
bottomContent: !done && hasSteps ? /*#__PURE__*/jsx(Stepper, {
|
|
87
88
|
activeStep: activeStep,
|
|
88
89
|
steps: steps,
|
|
89
90
|
className: clsx('np-flow-navigation__stepper')
|
|
@@ -93,7 +94,8 @@ const FlowNavigation = ({
|
|
|
93
94
|
return /*#__PURE__*/jsx(Container, {
|
|
94
95
|
size: "fluid",
|
|
95
96
|
className: clsx('np-flow-navigation', {
|
|
96
|
-
'np-flow-navigation--border-bottom': showBottomBorder
|
|
97
|
+
'np-flow-navigation--border-bottom': showBottomBorder,
|
|
98
|
+
'np-flow-navigation--no-steps': !hasSteps || done
|
|
97
99
|
}),
|
|
98
100
|
children: flowHeaderContent
|
|
99
101
|
});
|
|
@@ -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) | 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
|
|
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 hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\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 && hasSteps && (\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 && hasSteps ? (\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 'np-flow-navigation--no-steps': !hasSteps || done,\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","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -22323,6 +22323,16 @@ button.np-option {
|
|
|
22323
22323
|
min-block-size: 128px;
|
|
22324
22324
|
}
|
|
22325
22325
|
}
|
|
22326
|
+
.np-flow-navigation--no-steps {
|
|
22327
|
+
block-size: 80px;
|
|
22328
|
+
min-block-size: 80px;
|
|
22329
|
+
}
|
|
22330
|
+
@media (min-width: 320.02px) {
|
|
22331
|
+
.np-flow-navigation--no-steps {
|
|
22332
|
+
block-size: 80px;
|
|
22333
|
+
min-block-size: 80px;
|
|
22334
|
+
}
|
|
22335
|
+
}
|
|
22326
22336
|
.np-flow-navigation--border-bottom {
|
|
22327
22337
|
border-block-end: 1px solid rgba(0,0,0,0.10196);
|
|
22328
22338
|
border-block-end: 1px solid #0000001a;
|
|
@@ -11,6 +11,16 @@
|
|
|
11
11
|
min-block-size: 128px;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
.np-flow-navigation--no-steps {
|
|
15
|
+
block-size: 80px;
|
|
16
|
+
min-block-size: 80px;
|
|
17
|
+
}
|
|
18
|
+
@media (min-width: 320.02px) {
|
|
19
|
+
.np-flow-navigation--no-steps {
|
|
20
|
+
block-size: 80px;
|
|
21
|
+
min-block-size: 80px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
14
24
|
.np-flow-navigation--border-bottom {
|
|
15
25
|
border-block-end: 1px solid rgba(0,0,0,0.10196);
|
|
16
26
|
border-block-end: 1px solid #0000001a;
|
package/build/styles/main.css
CHANGED
|
@@ -22323,6 +22323,16 @@ button.np-option {
|
|
|
22323
22323
|
min-block-size: 128px;
|
|
22324
22324
|
}
|
|
22325
22325
|
}
|
|
22326
|
+
.np-flow-navigation--no-steps {
|
|
22327
|
+
block-size: 80px;
|
|
22328
|
+
min-block-size: 80px;
|
|
22329
|
+
}
|
|
22330
|
+
@media (min-width: 320.02px) {
|
|
22331
|
+
.np-flow-navigation--no-steps {
|
|
22332
|
+
block-size: 80px;
|
|
22333
|
+
min-block-size: 80px;
|
|
22334
|
+
}
|
|
22335
|
+
}
|
|
22326
22336
|
.np-flow-navigation--border-bottom {
|
|
22327
22337
|
border-block-end: 1px solid rgba(0,0,0,0.10196);
|
|
22328
22338
|
border-block-end: 1px solid #0000001a;
|
|
@@ -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,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,
|
|
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,gCA2ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.160.
|
|
3
|
+
"version": "46.160.4",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
"storybook": "^10.5.4",
|
|
92
92
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
93
93
|
"storybook-addon-test-codegen": "^3.0.4",
|
|
94
|
-
"@transferwise/less-config": "3.2.0",
|
|
95
94
|
"@wise/components-theming": "1.10.3",
|
|
95
|
+
"@transferwise/less-config": "3.2.0",
|
|
96
96
|
"@wise/wds-configs": "0.0.0"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
@@ -11,6 +11,16 @@
|
|
|
11
11
|
min-block-size: 128px;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
.np-flow-navigation--no-steps {
|
|
15
|
+
block-size: 80px;
|
|
16
|
+
min-block-size: 80px;
|
|
17
|
+
}
|
|
18
|
+
@media (min-width: 320.02px) {
|
|
19
|
+
.np-flow-navigation--no-steps {
|
|
20
|
+
block-size: 80px;
|
|
21
|
+
min-block-size: 80px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
14
24
|
.np-flow-navigation--border-bottom {
|
|
15
25
|
border-block-end: 1px solid rgba(0,0,0,0.10196);
|
|
16
26
|
border-block-end: 1px solid #0000001a;
|
|
@@ -15,6 +15,17 @@
|
|
|
15
15
|
min-height: 128px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
// When there are no steps, use 80px height on all screen sizes
|
|
19
|
+
&--no-steps {
|
|
20
|
+
height: 80px;
|
|
21
|
+
min-height: 80px;
|
|
22
|
+
|
|
23
|
+
@media (--screen-xs) {
|
|
24
|
+
height: 80px;
|
|
25
|
+
min-height: 80px;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
18
29
|
&--border-bottom {
|
|
19
30
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
20
31
|
}
|
|
@@ -52,10 +52,11 @@ const FlowNavigation = ({
|
|
|
52
52
|
const screenSm = useScreenSize(Breakpoint.SMALL);
|
|
53
53
|
const screenLg = useScreenSize(Breakpoint.LARGE);
|
|
54
54
|
|
|
55
|
-
const
|
|
55
|
+
const hasSteps = steps && steps.length > 0;
|
|
56
|
+
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
56
57
|
|
|
58
|
+
const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
|
|
57
59
|
const newAvatar = done ? null : avatar;
|
|
58
|
-
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
59
60
|
|
|
60
61
|
const flowHeaderContent = (
|
|
61
62
|
<FlowHeader
|
|
@@ -85,7 +86,7 @@ const FlowNavigation = ({
|
|
|
85
86
|
) : (
|
|
86
87
|
<div className="np-flow-header__left">{logo}</div>
|
|
87
88
|
)}
|
|
88
|
-
{!screenSm && !done &&
|
|
89
|
+
{!screenSm && !done && hasSteps && (
|
|
89
90
|
<AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
|
|
90
91
|
)}
|
|
91
92
|
</>
|
|
@@ -98,7 +99,7 @@ const FlowNavigation = ({
|
|
|
98
99
|
</div>
|
|
99
100
|
}
|
|
100
101
|
bottomContent={
|
|
101
|
-
!done &&
|
|
102
|
+
!done && hasSteps ? (
|
|
102
103
|
<Stepper
|
|
103
104
|
activeStep={activeStep}
|
|
104
105
|
steps={steps}
|
|
@@ -115,6 +116,7 @@ const FlowNavigation = ({
|
|
|
115
116
|
size="fluid"
|
|
116
117
|
className={clsx('np-flow-navigation', {
|
|
117
118
|
'np-flow-navigation--border-bottom': showBottomBorder,
|
|
119
|
+
'np-flow-navigation--no-steps': !hasSteps || done,
|
|
118
120
|
})}
|
|
119
121
|
>
|
|
120
122
|
{flowHeaderContent}
|
package/src/main.css
CHANGED
|
@@ -22323,6 +22323,16 @@ button.np-option {
|
|
|
22323
22323
|
min-block-size: 128px;
|
|
22324
22324
|
}
|
|
22325
22325
|
}
|
|
22326
|
+
.np-flow-navigation--no-steps {
|
|
22327
|
+
block-size: 80px;
|
|
22328
|
+
min-block-size: 80px;
|
|
22329
|
+
}
|
|
22330
|
+
@media (min-width: 320.02px) {
|
|
22331
|
+
.np-flow-navigation--no-steps {
|
|
22332
|
+
block-size: 80px;
|
|
22333
|
+
min-block-size: 80px;
|
|
22334
|
+
}
|
|
22335
|
+
}
|
|
22326
22336
|
.np-flow-navigation--border-bottom {
|
|
22327
22337
|
border-block-end: 1px solid rgba(0,0,0,0.10196);
|
|
22328
22338
|
border-block-end: 1px solid #0000001a;
|