@transferwise/components 0.0.0-experimental-bd48fa9 → 0.0.0-experimental-6e333ba
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 +14 -5
- package/build/FlowNavigation/FlowNavigation.js.map +1 -1
- package/build/FlowNavigation/FlowNavigation.mjs +14 -5
- package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/Sticky/Sticky.js +1 -0
- package/build/Sticky/Sticky.js.map +1 -1
- package/build/Sticky/Sticky.mjs +1 -0
- package/build/Sticky/Sticky.mjs.map +1 -1
- package/build/_deprecated/OverlayHeader/OverlayHeader.js +41 -6
- package/build/_deprecated/OverlayHeader/OverlayHeader.js.map +1 -1
- package/build/_deprecated/OverlayHeader/OverlayHeader.mjs +41 -6
- package/build/_deprecated/OverlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/main.css +39 -8
- package/build/styles/FlowNavigation/FlowNavigation.css +13 -7
- package/build/styles/Sticky/Sticky.css +4 -0
- package/build/styles/_deprecated/OverlayHeader/OverlayHeader.css +15 -0
- package/build/styles/main.css +39 -8
- package/build/types/FlowNavigation/FlowNavigation.d.ts +9 -2
- package/build/types/FlowNavigation/FlowNavigation.d.ts.map +1 -1
- package/build/types/Sticky/Sticky.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 +13 -7
- package/src/FlowNavigation/FlowNavigation.less +15 -6
- package/src/FlowNavigation/FlowNavigation.tsx +27 -6
- package/src/FlowNavigation/_stories/FlowNavigation.story.tsx +86 -0
- package/src/Sticky/Sticky.css +4 -0
- package/src/Sticky/Sticky.less +6 -0
- package/src/Sticky/Sticky.test.tsx +1 -0
- package/src/Sticky/Sticky.tsx +1 -0
- package/src/Sticky/_stories/Sticky.test.story.tsx +177 -0
- package/src/_deprecated/OverlayHeader/OverlayHeader.css +15 -0
- package/src/_deprecated/OverlayHeader/OverlayHeader.less +24 -0
- package/src/_deprecated/OverlayHeader/OverlayHeader.tsx +21 -2
- package/src/main.css +39 -8
- package/src/main.less +2 -0
|
@@ -46,6 +46,7 @@ const FlowNavigation = ({
|
|
|
46
46
|
onClose,
|
|
47
47
|
onGoBack,
|
|
48
48
|
steps,
|
|
49
|
+
composable = false,
|
|
49
50
|
showBottomBorder = true
|
|
50
51
|
}) => {
|
|
51
52
|
const intl = reactIntl.useIntl();
|
|
@@ -58,7 +59,7 @@ const FlowNavigation = ({
|
|
|
58
59
|
const newAvatar = done ? null : avatar;
|
|
59
60
|
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
60
61
|
const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
|
|
61
|
-
className: clsx.clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
62
|
+
className: clsx.clsx('np-flow-navigation__content', !composable && 'p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
62
63
|
'np-flow-navigation--xs-max': !screenSm,
|
|
63
64
|
// Size switches on parent container which may or may not have the same size as the window.
|
|
64
65
|
'np-flow-navigation--sm': screenSm,
|
|
@@ -94,10 +95,18 @@ const FlowNavigation = ({
|
|
|
94
95
|
}) : null,
|
|
95
96
|
layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
|
|
96
97
|
});
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
'np-flow-navigation--
|
|
98
|
+
if (composable) {
|
|
99
|
+
return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
|
|
100
|
+
size: "fluid",
|
|
101
|
+
className: clsx.clsx('np-flow-navigation np-flow-navigation--composable', {
|
|
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
|
|
101
110
|
}),
|
|
102
111
|
children: flowHeaderContent
|
|
103
112
|
});
|
|
@@ -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?: (
|
|
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;\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 * When true, renders in composable mode using a fluid Container.\n * This allows the FlowNavigation to be used within custom layout containers.\n * @default false\n */\n composable?: boolean;\n /**\n * Controls whether the bottom border is displayed.\n * Only applies to the composable variant. Non-composable variant always uses the done state.\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 composable = false,\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 !composable && 'p-x-3',\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 if (composable) {\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation np-flow-navigation--composable', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n }\n\n return (\n <div\n className={clsx('np-flow-navigation p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n {flowHeaderContent}\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","composable","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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"}
|
|
@@ -42,6 +42,7 @@ const FlowNavigation = ({
|
|
|
42
42
|
onClose,
|
|
43
43
|
onGoBack,
|
|
44
44
|
steps,
|
|
45
|
+
composable = false,
|
|
45
46
|
showBottomBorder = true
|
|
46
47
|
}) => {
|
|
47
48
|
const intl = useIntl();
|
|
@@ -54,7 +55,7 @@ const FlowNavigation = ({
|
|
|
54
55
|
const newAvatar = done ? null : avatar;
|
|
55
56
|
const displayGoBack = onGoBack != null && activeStep > 0;
|
|
56
57
|
const flowHeaderContent = /*#__PURE__*/jsx(FlowHeader, {
|
|
57
|
-
className: clsx('np-flow-navigation__content', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
58
|
+
className: clsx('np-flow-navigation__content', !composable && 'p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
|
|
58
59
|
'np-flow-navigation--xs-max': !screenSm,
|
|
59
60
|
// Size switches on parent container which may or may not have the same size as the window.
|
|
60
61
|
'np-flow-navigation--sm': screenSm,
|
|
@@ -90,10 +91,18 @@ const FlowNavigation = ({
|
|
|
90
91
|
}) : null,
|
|
91
92
|
layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
|
|
92
93
|
});
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
'np-flow-navigation--
|
|
94
|
+
if (composable) {
|
|
95
|
+
return /*#__PURE__*/jsx(Container, {
|
|
96
|
+
size: "fluid",
|
|
97
|
+
className: clsx('np-flow-navigation np-flow-navigation--composable', {
|
|
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
|
|
97
106
|
}),
|
|
98
107
|
children: flowHeaderContent
|
|
99
108
|
});
|
|
@@ -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?: (
|
|
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;\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 * When true, renders in composable mode using a fluid Container.\n * This allows the FlowNavigation to be used within custom layout containers.\n * @default false\n */\n composable?: boolean;\n /**\n * Controls whether the bottom border is displayed.\n * Only applies to the composable variant. Non-composable variant always uses the done state.\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 composable = false,\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 !composable && 'p-x-3',\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 if (composable) {\n return (\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation np-flow-navigation--composable', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n })}\n >\n {flowHeaderContent}\n </Container>\n );\n }\n\n return (\n <div\n className={clsx('np-flow-navigation p-y-3', {\n 'np-flow-navigation--border-bottom': !done,\n })}\n >\n {flowHeaderContent}\n </div>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","composable","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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"}
|
package/build/Sticky/Sticky.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;
|
|
1
|
+
{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n className=\"wds-sticky\"\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","className","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXC,IAAAA,SAAS,EAAC,YAAY;AACtBH,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBO,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAV,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
package/build/Sticky/Sticky.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;
|
|
1
|
+
{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n /** Optional prop for children components to be rendered inside the Sticky component. */\n children?: React.ReactNode;\n\n /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n open?: boolean;\n\n /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n * <div>\n * <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n * </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n children,\n open = true,\n position = Position.BOTTOM,\n testId,\n}: StickyProps) => {\n return (\n <SlidingPanel\n className=\"wds-sticky\"\n testId={testId}\n open={open}\n position={position}\n slidingPanelPositionFixed\n showSlidingPanelBorder\n >\n {children}\n </SlidingPanel>\n );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","className","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,SAAS,EAAC,YAAY;AACtBH,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAV,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
|
|
@@ -2,9 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
|
|
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');
|
|
7
28
|
var jsxRuntime = require('react/jsx-runtime');
|
|
29
|
+
var FlowHeader = require('../../common/FlowHeader/FlowHeader.js');
|
|
30
|
+
var Logo = require('../../Logo/Logo.js');
|
|
8
31
|
|
|
9
32
|
const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
|
|
10
33
|
/**
|
|
@@ -15,10 +38,22 @@ function OverlayHeader({
|
|
|
15
38
|
onClose,
|
|
16
39
|
logo = defaultLogo
|
|
17
40
|
}) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
onClose
|
|
21
|
-
|
|
41
|
+
const closeButton = onClose && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
|
|
42
|
+
size: size.Size.LARGE,
|
|
43
|
+
onClick: onClose
|
|
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
|
+
})
|
|
22
57
|
});
|
|
23
58
|
}
|
|
24
59
|
|
|
@@ -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 { clsx } from 'clsx';\n\nimport { Size } from '../../common';\nimport { CloseButton } from '../../common/CloseButton';\nimport FlowHeader from '../../common/FlowHeader';\nimport Logo from '../../Logo';\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 const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n return (\n <div className=\"np-overlay-header d-flex justify-content-center\">\n <FlowHeader\n className=\"np-overlay-header__content p-a-3\"\n leftContent={logo}\n rightContent={\n <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n {avatar}\n {avatar && closeButton && <span className={clsx('m-x-1')} />}\n {closeButton}\n </div>\n }\n />\n </div>\n );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,cAAA,CAACO,uBAAW,EAAA;IAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,cAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,cAAA,CAACc,kBAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,eAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
|
|
@@ -1,6 +1,29 @@
|
|
|
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';
|
|
1
26
|
import Logo from '../../Logo/Logo.mjs';
|
|
2
|
-
import FlowNavigation from '../../FlowNavigation/FlowNavigation.mjs';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
27
|
|
|
5
28
|
const defaultLogo = /*#__PURE__*/jsx(Logo, {});
|
|
6
29
|
/**
|
|
@@ -11,10 +34,22 @@ function OverlayHeader({
|
|
|
11
34
|
onClose,
|
|
12
35
|
logo = defaultLogo
|
|
13
36
|
}) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onClose
|
|
17
|
-
|
|
37
|
+
const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
|
|
38
|
+
size: Size.LARGE,
|
|
39
|
+
onClick: onClose
|
|
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
|
+
})
|
|
18
53
|
});
|
|
19
54
|
}
|
|
20
55
|
|
|
@@ -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 { clsx } from 'clsx';\n\nimport { Size } from '../../common';\nimport { CloseButton } from '../../common/CloseButton';\nimport FlowHeader from '../../common/FlowHeader';\nimport Logo from '../../Logo';\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 const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n return (\n <div className=\"np-overlay-header d-flex justify-content-center\">\n <FlowHeader\n className=\"np-overlay-header__content p-a-3\"\n leftContent={logo}\n rightContent={\n <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n {avatar}\n {avatar && closeButton && <span className={clsx('m-x-1')} />}\n {closeButton}\n </div>\n }\n />\n </div>\n );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,GAAA,CAACO,WAAW,EAAA;IAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,GAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,GAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,IAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
|
package/build/main.css
CHANGED
|
@@ -28933,13 +28933,7 @@ button.np-option {
|
|
|
28933
28933
|
justify-content: center;
|
|
28934
28934
|
width: 100%;
|
|
28935
28935
|
box-sizing: border-box;
|
|
28936
|
-
min-height:
|
|
28937
|
-
}
|
|
28938
|
-
|
|
28939
|
-
@media (min-width: 320.02px) {
|
|
28940
|
-
.np-flow-navigation {
|
|
28941
|
-
min-height: 128px;
|
|
28942
|
-
}
|
|
28936
|
+
min-height: 96px;
|
|
28943
28937
|
}
|
|
28944
28938
|
|
|
28945
28939
|
.np-flow-navigation--border-bottom {
|
|
@@ -28950,7 +28944,7 @@ button.np-option {
|
|
|
28950
28944
|
.np-flow-navigation__content {
|
|
28951
28945
|
width: 100%;
|
|
28952
28946
|
min-width: 320px;
|
|
28953
|
-
max-width:
|
|
28947
|
+
max-width: calc(1160px - 36px);
|
|
28954
28948
|
}
|
|
28955
28949
|
|
|
28956
28950
|
.np-flow-navigation__stepper {
|
|
@@ -29027,6 +29021,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29027
29021
|
visibility: hidden;
|
|
29028
29022
|
}
|
|
29029
29023
|
|
|
29024
|
+
.np-flow-navigation--composable {
|
|
29025
|
+
min-height: 80px;
|
|
29026
|
+
}
|
|
29027
|
+
|
|
29028
|
+
@media (min-width: 320.02px) {
|
|
29029
|
+
.np-flow-navigation--composable {
|
|
29030
|
+
min-height: 128px;
|
|
29031
|
+
}
|
|
29032
|
+
}
|
|
29033
|
+
|
|
29034
|
+
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
29035
|
+
max-width: none;
|
|
29036
|
+
}
|
|
29037
|
+
|
|
29030
29038
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
29031
29039
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
29032
29040
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -31527,6 +31535,24 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
31527
31535
|
text-decoration: var(--nudge-link-text-decoration);
|
|
31528
31536
|
}
|
|
31529
31537
|
|
|
31538
|
+
.np-overlay-header .np-overlay-header__content {
|
|
31539
|
+
min-height: 97px;
|
|
31540
|
+
width: 100%;
|
|
31541
|
+
min-width: 320px;
|
|
31542
|
+
max-width: calc(1160px - 36px);
|
|
31543
|
+
}
|
|
31544
|
+
|
|
31545
|
+
.np-theme-personal .np-overlay-header {
|
|
31546
|
+
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
31547
|
+
border-bottom: 1px solid var(--color-border-neutral);
|
|
31548
|
+
}
|
|
31549
|
+
|
|
31550
|
+
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
31551
|
+
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
31552
|
+
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
31553
|
+
fill: var(--color-interactive-primary);
|
|
31554
|
+
}
|
|
31555
|
+
|
|
31530
31556
|
.tw-telephone {
|
|
31531
31557
|
display: flex;
|
|
31532
31558
|
}
|
|
@@ -32686,6 +32712,11 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32686
32712
|
will-change: width;
|
|
32687
32713
|
}
|
|
32688
32714
|
|
|
32715
|
+
.wds-sticky.sliding-panel--open-bottom {
|
|
32716
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
32717
|
+
padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
|
|
32718
|
+
}
|
|
32719
|
+
|
|
32689
32720
|
.np-select .np-dropdown-toggle {
|
|
32690
32721
|
background-color: #ffffff;
|
|
32691
32722
|
background-color: var(--color-background-screen);
|
|
@@ -4,12 +4,7 @@
|
|
|
4
4
|
justify-content: center;
|
|
5
5
|
width: 100%;
|
|
6
6
|
box-sizing: border-box;
|
|
7
|
-
min-height:
|
|
8
|
-
}
|
|
9
|
-
@media (min-width: 320.02px) {
|
|
10
|
-
.np-flow-navigation {
|
|
11
|
-
min-height: 128px;
|
|
12
|
-
}
|
|
7
|
+
min-height: 96px;
|
|
13
8
|
}
|
|
14
9
|
.np-flow-navigation--border-bottom {
|
|
15
10
|
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
@@ -18,7 +13,7 @@
|
|
|
18
13
|
.np-flow-navigation__content {
|
|
19
14
|
width: 100%;
|
|
20
15
|
min-width: 320px;
|
|
21
|
-
max-width:
|
|
16
|
+
max-width: calc(1160px - 36px);
|
|
22
17
|
}
|
|
23
18
|
.np-flow-navigation__stepper {
|
|
24
19
|
padding-bottom: 0 !important;
|
|
@@ -77,6 +72,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
77
72
|
.np-flow-navigation--hidden {
|
|
78
73
|
visibility: hidden;
|
|
79
74
|
}
|
|
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
|
+
}
|
|
80
86
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
81
87
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
82
88
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
+
}
|
package/build/styles/main.css
CHANGED
|
@@ -28933,13 +28933,7 @@ button.np-option {
|
|
|
28933
28933
|
justify-content: center;
|
|
28934
28934
|
width: 100%;
|
|
28935
28935
|
box-sizing: border-box;
|
|
28936
|
-
min-height:
|
|
28937
|
-
}
|
|
28938
|
-
|
|
28939
|
-
@media (min-width: 320.02px) {
|
|
28940
|
-
.np-flow-navigation {
|
|
28941
|
-
min-height: 128px;
|
|
28942
|
-
}
|
|
28936
|
+
min-height: 96px;
|
|
28943
28937
|
}
|
|
28944
28938
|
|
|
28945
28939
|
.np-flow-navigation--border-bottom {
|
|
@@ -28950,7 +28944,7 @@ button.np-option {
|
|
|
28950
28944
|
.np-flow-navigation__content {
|
|
28951
28945
|
width: 100%;
|
|
28952
28946
|
min-width: 320px;
|
|
28953
|
-
max-width:
|
|
28947
|
+
max-width: calc(1160px - 36px);
|
|
28954
28948
|
}
|
|
28955
28949
|
|
|
28956
28950
|
.np-flow-navigation__stepper {
|
|
@@ -29027,6 +29021,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
29027
29021
|
visibility: hidden;
|
|
29028
29022
|
}
|
|
29029
29023
|
|
|
29024
|
+
.np-flow-navigation--composable {
|
|
29025
|
+
min-height: 80px;
|
|
29026
|
+
}
|
|
29027
|
+
|
|
29028
|
+
@media (min-width: 320.02px) {
|
|
29029
|
+
.np-flow-navigation--composable {
|
|
29030
|
+
min-height: 128px;
|
|
29031
|
+
}
|
|
29032
|
+
}
|
|
29033
|
+
|
|
29034
|
+
.np-flow-navigation--composable .np-flow-navigation__content {
|
|
29035
|
+
max-width: none;
|
|
29036
|
+
}
|
|
29037
|
+
|
|
29030
29038
|
.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
|
|
29031
29039
|
.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
|
|
29032
29040
|
.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
|
|
@@ -31527,6 +31535,24 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
31527
31535
|
text-decoration: var(--nudge-link-text-decoration);
|
|
31528
31536
|
}
|
|
31529
31537
|
|
|
31538
|
+
.np-overlay-header .np-overlay-header__content {
|
|
31539
|
+
min-height: 97px;
|
|
31540
|
+
width: 100%;
|
|
31541
|
+
min-width: 320px;
|
|
31542
|
+
max-width: calc(1160px - 36px);
|
|
31543
|
+
}
|
|
31544
|
+
|
|
31545
|
+
.np-theme-personal .np-overlay-header {
|
|
31546
|
+
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
31547
|
+
border-bottom: 1px solid var(--color-border-neutral);
|
|
31548
|
+
}
|
|
31549
|
+
|
|
31550
|
+
.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
|
|
31551
|
+
.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
|
|
31552
|
+
.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
|
|
31553
|
+
fill: var(--color-interactive-primary);
|
|
31554
|
+
}
|
|
31555
|
+
|
|
31530
31556
|
.tw-telephone {
|
|
31531
31557
|
display: flex;
|
|
31532
31558
|
}
|
|
@@ -32686,6 +32712,11 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32686
32712
|
will-change: width;
|
|
32687
32713
|
}
|
|
32688
32714
|
|
|
32715
|
+
.wds-sticky.sliding-panel--open-bottom {
|
|
32716
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
32717
|
+
padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
|
|
32718
|
+
}
|
|
32719
|
+
|
|
32689
32720
|
.np-select .np-dropdown-toggle {
|
|
32690
32721
|
background-color: #ffffff;
|
|
32691
32722
|
background-color: var(--color-background-screen);
|
|
@@ -8,17 +8,24 @@ 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?: (
|
|
11
|
+
onClose?: () => void;
|
|
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;
|
|
16
22
|
/**
|
|
17
23
|
* Controls whether the bottom border is displayed.
|
|
24
|
+
* Only applies to the composable variant. Non-composable variant always uses the done state.
|
|
18
25
|
* @default true
|
|
19
26
|
*/
|
|
20
27
|
showBottomBorder?: boolean;
|
|
21
28
|
}
|
|
22
|
-
declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
|
|
29
|
+
declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, composable, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
|
|
23
30
|
export default FlowNavigation;
|
|
24
31
|
//# 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,
|
|
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;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,6FAUrB,mBAAmB,gCAsFrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|