@transferwise/components 46.30.0 → 46.30.2
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/index.js +1 -1
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -1
- package/build/index.mjs.map +1 -1
- package/package.json +4 -4
- package/src/flowNavigation/FlowNavigation.spec.js +10 -0
- package/src/flowNavigation/FlowNavigation.story.js +17 -1
- package/src/flowNavigation/FlowNavigation.tsx +1 -1
- package/src/overlayHeader/OverlayHeader.story.js +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.30.
|
|
3
|
+
"version": "46.30.2",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -96,9 +96,9 @@
|
|
|
96
96
|
"react-intl": "^6.6.6",
|
|
97
97
|
"rollup": "^4.17.2",
|
|
98
98
|
"storybook": "^7.6.19",
|
|
99
|
-
"@transferwise/
|
|
99
|
+
"@transferwise/less-config": "3.1.0",
|
|
100
100
|
"@wise/components-theming": "1.2.2",
|
|
101
|
-
"@transferwise/
|
|
101
|
+
"@transferwise/neptune-css": "14.10.0"
|
|
102
102
|
},
|
|
103
103
|
"peerDependencies": {
|
|
104
104
|
"@transferwise/icons": "^3.7.0",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
},
|
|
112
112
|
"dependencies": {
|
|
113
113
|
"@babel/runtime": "^7.24.5",
|
|
114
|
-
"@floating-ui/react": "^0.
|
|
114
|
+
"@floating-ui/react": "^0.25.4",
|
|
115
115
|
"@formatjs/intl-locale": "^3.4.5",
|
|
116
116
|
"@headlessui/react": "^1.7.19",
|
|
117
117
|
"@popperjs/core": "^2.11.8",
|
|
@@ -101,6 +101,16 @@ describe('FlowNavigation', () => {
|
|
|
101
101
|
expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
|
|
102
102
|
});
|
|
103
103
|
|
|
104
|
+
it(`hides label when done is true`, () => {
|
|
105
|
+
const { rerender } = render(<FlowNavigation {...props} done={false} />);
|
|
106
|
+
|
|
107
|
+
expect(screen.getByText('label-0')).toBeInTheDocument();
|
|
108
|
+
|
|
109
|
+
rerender(<FlowNavigation {...props} done />);
|
|
110
|
+
|
|
111
|
+
expect(screen.queryByText('label-0')).not.toBeInTheDocument();
|
|
112
|
+
});
|
|
113
|
+
|
|
104
114
|
it(`renders xs-max class`, () => {
|
|
105
115
|
window.innerWidth = Breakpoint.SMALL - 1;
|
|
106
116
|
const { container } = render(<FlowNavigation {...props} onClose={null} />);
|
|
@@ -22,7 +22,7 @@ const avatarProfiles = {
|
|
|
22
22
|
Profile: <ProfileIcon />,
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
export const
|
|
25
|
+
export const Variants = () => {
|
|
26
26
|
const [activeStep, setActiveStep] = useState(4);
|
|
27
27
|
const [closed, setClosed] = useState(false);
|
|
28
28
|
const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
|
|
@@ -172,6 +172,22 @@ export const Varients = () => {
|
|
|
172
172
|
}
|
|
173
173
|
/>
|
|
174
174
|
|
|
175
|
+
{/* Instance of always `done` FlowNav for visual testing */}
|
|
176
|
+
<FlowNavigation
|
|
177
|
+
done
|
|
178
|
+
avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
|
|
179
|
+
activeStep={activeStep}
|
|
180
|
+
steps={[
|
|
181
|
+
{ label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
|
|
182
|
+
{ label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
|
|
183
|
+
{ label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
|
|
184
|
+
]}
|
|
185
|
+
onClose={showCloseButton && (() => setClosed(true))}
|
|
186
|
+
onGoBack={
|
|
187
|
+
showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
|
|
188
|
+
}
|
|
189
|
+
/>
|
|
190
|
+
|
|
175
191
|
<Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
|
|
176
192
|
|
|
177
193
|
<Button
|
|
@@ -38,7 +38,7 @@ export const Basic = () => {
|
|
|
38
38
|
export const WithAvatarWrapper = () => {
|
|
39
39
|
const avatarURL = text(
|
|
40
40
|
'avatarURL',
|
|
41
|
-
'https://wise.
|
|
41
|
+
'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
|
|
42
42
|
);
|
|
43
43
|
const profileType = select('profileType', Object.keys(ProfileType));
|
|
44
44
|
return (
|