@transferwise/components 0.0.0-experimental-ded76ff → 0.0.0-experimental-adfacd1

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.
Files changed (39) hide show
  1. package/build/index.esm.js +36 -31
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +36 -31
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  7. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  8. package/build/styles/main.css +1 -1
  9. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  10. package/build/types/common/flowHeader/FlowHeader.d.ts.map +1 -1
  11. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  12. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts +1 -2
  13. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map +1 -1
  14. package/build/types/flowNavigation/backButton/BackButton.d.ts +10 -11
  15. package/build/types/flowNavigation/backButton/BackButton.d.ts.map +1 -1
  16. package/build/types/overlayHeader/OverlayHeader.d.ts.map +1 -1
  17. package/package.json +3 -3
  18. package/src/common/flowHeader/FlowHeader.tsx +9 -3
  19. package/src/common/flowHeader/__snapshots__/FlowHeader.spec.js.snap +2 -2
  20. package/src/flowNavigation/FlowNavigation.css +1 -1
  21. package/src/flowNavigation/FlowNavigation.less +0 -9
  22. package/src/flowNavigation/FlowNavigation.spec.js +3 -3
  23. package/src/flowNavigation/FlowNavigation.story.js +24 -183
  24. package/src/flowNavigation/FlowNavigation.tsx +9 -13
  25. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +14 -11
  26. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  27. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +0 -6
  28. package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js +7 -21
  29. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +8 -17
  30. package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap +4 -4
  31. package/src/flowNavigation/backButton/BackButton.js +14 -9
  32. package/src/flowNavigation/backButton/BackButton.spec.js +3 -2
  33. package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap +28 -21
  34. package/src/main.css +1 -1
  35. package/src/overlayHeader/OverlayHeader.css +1 -1
  36. package/src/overlayHeader/OverlayHeader.js +4 -2
  37. package/src/overlayHeader/OverlayHeader.less +0 -8
  38. package/src/overlayHeader/OverlayHeader.spec.js +1 -1
  39. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.js.snap +3 -3
package/build/styles/overlayHeader/OverlayHeader.css CHANGED
@@ -1 +1 @@
1
- .np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-overlay-header .np-overlay-header__content .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);width:1px}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-overlay-header .np-overlay-header__content .separator,html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-overlay-header .np-overlay-header__content .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
1
+ .np-overlay-header .np-overlay-header__content{max-width:1164px;min-height:97px;min-width:320px;width:100%}.np-theme-personal .np-overlay-header{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral)}.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,.np-theme-personal--dark .np-overlay-header .np-flow-header__left path,.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path{fill:var(--color-interactive-primary)}
package/build/types/common/flowHeader/FlowHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowHeader.d.ts","sourceRoot":"","sources":["../../../../src/common/flowHeader/FlowHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,UAAU,wFAyDf,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"FlowHeader.d.ts","sourceRoot":"","sources":["../../../../src/common/flowHeader/FlowHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,UAAU,wFA+Df,CAAC;AAEF,eAAe,UAAU,CAAC"}
package/build/types/flowNavigation/FlowNavigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA0ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBAsErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts CHANGED
@@ -3,8 +3,7 @@ export interface AnimatedLabelProps {
3
3
  activeLabel: number;
4
4
  className?: string;
5
5
  labels: React.ReactNode[];
6
- 'aria-label': string;
7
6
  }
8
- declare const AnimatedLabel: ({ activeLabel, className, labels, "aria-label": ariaLabel, }: AnimatedLabelProps) => React.JSX.Element;
7
+ declare const AnimatedLabel: ({ activeLabel, className, labels }: AnimatedLabelProps) => React.JSX.Element;
9
8
  export default AnimatedLabel;
10
9
  //# sourceMappingURL=AnimatedLabel.d.ts.map
package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,iEAKhB,kBAAkB,sBAwBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC3B;AAED,QAAA,MAAM,aAAa,uCAAwC,kBAAkB,sBAkB5E,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/build/types/flowNavigation/backButton/BackButton.d.ts CHANGED
@@ -1,20 +1,19 @@
1
1
  export default BackButton;
2
- declare function BackButton({ label, className, onClick }: {
3
- label: any;
2
+ declare function BackButton({ className, onClick, "aria-label": ariaLabel }: {
4
3
  className: any;
5
4
  onClick: any;
5
+ "aria-label": any;
6
6
  }): import("react").JSX.Element;
7
7
  declare namespace BackButton {
8
- namespace propTypes {
9
- const className: any;
10
- const label: any;
11
- const onClick: any;
12
- }
8
+ const propTypes: {
9
+ 'aria-label': any;
10
+ className: any;
11
+ label: any;
12
+ onClick: any;
13
+ };
13
14
  namespace defaultProps {
14
- const className_1: undefined;
15
- export { className_1 as className };
16
- const label_1: undefined;
17
- export { label_1 as label };
15
+ const className: undefined;
16
+ const label: undefined;
18
17
  }
19
18
  }
20
19
  //# sourceMappingURL=BackButton.d.ts.map
package/build/types/flowNavigation/backButton/BackButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.js"],"names":[],"mappings":";AAIA;;;;gCASC"}
1
+ {"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.js"],"names":[],"mappings":";AAMA;;;;gCAWC"}
package/build/types/overlayHeader/OverlayHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.js"],"names":[],"mappings":";AAMA;;;;gCAiBC"}
1
+ {"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.js"],"names":[],"mappings":";AAQA;;;;gCAiBC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-ded76ff",
3
+ "version": "0.0.0-experimental-adfacd1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,12 +78,12 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.0.6",
81
- "@transferwise/neptune-css": "0.0.0-experimental-ded76ff",
81
+ "@transferwise/neptune-css": "14.7.0",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
86
- "@transferwise/neptune-css": "0.0.0-experimental-ded76ff",
86
+ "@transferwise/neptune-css": "^14.7.0",
87
87
  "@wise/art": "^2.7.0",
88
88
  "@wise/components-theming": "^0.8.4",
89
89
  "currency-flags": "^4.0.2",
package/src/common/flowHeader/FlowHeader.tsx CHANGED
@@ -36,9 +36,15 @@ const FlowHeader = React.forwardRef(
36
36
  )}
37
37
  >
38
38
  <div
39
- className={classNames('np-flow-header__left', {
40
- 'flex__item--8': isVertical,
41
- })}
39
+ className={classNames(
40
+ 'np-flow-header__left',
41
+ 'd-flex',
42
+ 'align-items-center',
43
+ 'justify-content-between',
44
+ {
45
+ 'flex__item--8': isVertical,
46
+ },
47
+ )}
42
48
  >
43
49
  {leftContent}
44
50
  </div>
package/src/common/flowHeader/__snapshots__/FlowHeader.spec.js.snap CHANGED
@@ -6,7 +6,7 @@ exports[`FlowHeader renders as expected 1`] = `
6
6
  class="np-flow-header d-flex flex-wrap align-items-center className"
7
7
  >
8
8
  <div
9
- class="np-flow-header__left"
9
+ class="np-flow-header__left d-flex align-items-center justify-content-between"
10
10
  >
11
11
  leftContent
12
12
  </div>
@@ -30,7 +30,7 @@ exports[`FlowHeader renders as expected with vertical layout 1`] = `
30
30
  class="np-flow-header d-flex flex-wrap align-items-center className"
31
31
  >
32
32
  <div
33
- class="np-flow-header__left flex__item--8"
33
+ class="np-flow-header__left d-flex align-items-center justify-content-between flex__item--8"
34
34
  >
35
35
  leftContent
36
36
  </div>
package/src/flowNavigation/FlowNavigation.css CHANGED
@@ -1 +1 @@
1
- .np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important;padding-left:var(--size-24)!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation .separator{background-color:#0000001a;background-color:var(--color-border-neutral);height:32px;height:var(--size-32);min-width:1px;width:1px}[dir=rtl] .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}[dir=rtl] .np-flow-navigation .separator,html:not([dir=rtl]) .np-flow-navigation .separator{margin-left:16px!important;margin-left:var(--size-16)!important}html:not([dir=rtl]) .np-flow-navigation .separator{margin-right:16px!important;margin-right:var(--size-16)!important}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}
1
+ .np-flow-navigation{min-height:97px;width:100%}.np-flow-navigation--border-bottom{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);min-height:96px}.np-flow-navigation__content{max-width:1164px;min-width:320px;width:100%}.np-flow-navigation__stepper{padding-bottom:0!important}[dir=rtl] .np-flow-navigation__stepper{padding-right:0!important}[dir=rtl] .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation__stepper{padding-left:0!important}html:not([dir=rtl]) .np-flow-navigation__stepper{padding-right:0!important}.np-flow-navigation--xs-max .np-flow-navigation__stepper .tw-stepper-steps{display:none}.np-flow-navigation--xs-max .np-flow-navigation__stepper .progress{margin-bottom:0}.np-flow-navigation--xs-max .np-animated-label{height:auto}.np-flow-navigation--sm .np-flow-navigation__stepper{min-height:56px}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}[dir=rtl] .np-flow-navigation--sm .np-flow-navigation__stepper,html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-left:24px!important;padding-left:var(--size-24)!important}html:not([dir=rtl]) .np-flow-navigation--sm .np-flow-navigation__stepper{padding-right:24px!important;padding-right:var(--size-24)!important}.np-flow-navigation--lg .np-flow-navigation__stepper{max-width:562px}.np-flow-navigation--lg .np-flow-header__left,.np-flow-navigation--lg .np-flow-header__right{width:180px}.np-flow-navigation--hidden{visibility:hidden}.np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,.np-theme-personal--dark .np-flow-navigation .np-flow-header__left path,.np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path{fill:var(--color-interactive-primary)}
package/src/flowNavigation/FlowNavigation.less CHANGED
@@ -57,15 +57,6 @@
57
57
  }
58
58
  }
59
59
 
60
- .separator {
61
- .m-x-2;
62
-
63
- height: var(--size-32);
64
- width: 1px;
65
- min-width: 1px;
66
- background-color: var(--color-border-neutral);
67
- }
68
-
69
60
  &--hidden {
70
61
  visibility: hidden;
71
62
  }
package/src/flowNavigation/FlowNavigation.spec.js CHANGED
@@ -73,7 +73,7 @@ describe('FlowNavigation', () => {
73
73
  it(`renders separator if avatar and onClose are provided`, () => {
74
74
  const { container } = render(<FlowNavigation {...props} />);
75
75
 
76
- expect(container.querySelector('.separator')).toBeInTheDocument();
76
+ expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
77
77
  });
78
78
 
79
79
  it(`doesn't render separator if avatar or onClose are not provided`, () => {
@@ -194,11 +194,11 @@ describe('FlowNavigation', () => {
194
194
  <FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />,
195
195
  );
196
196
 
197
- expect(screen.getByTestId('activeLabel-0')).toBeInTheDocument();
197
+ expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
198
198
 
199
199
  rerender(<FlowNavigation {...props} activeStep={2} onGoBack={jest.fn()} />);
200
200
 
201
- expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
201
+ expect(screen.getByTestId('activeLabel-2')).toBeInTheDocument();
202
202
  });
203
203
  });
204
204
  const logoFull = () => screen.getByAltText(`logo`);
package/src/flowNavigation/FlowNavigation.story.js CHANGED
@@ -5,8 +5,10 @@ import { useState } from 'react';
5
5
 
6
6
  import Avatar, { AvatarType } from '../avatar';
7
7
  import AvatarWrapper from '../avatarWrapper';
8
+ import Body from '../body';
9
+ import Button from '../button';
8
10
  import { ProfileType, Size } from '../common';
9
- import Logo, { LogoType } from '../logo';
11
+ import Logo from '../logo';
10
12
  import OverlayHeader from '../overlayHeader';
11
13
 
12
14
  import FlowNavigation from './FlowNavigation';
@@ -21,13 +23,18 @@ const avatarProfiles = {
21
23
  Profile: <ProfileIcon />,
22
24
  };
23
25
 
24
- export const WithAvatarIcon = () => {
26
+ export const Varients = () => {
25
27
  const [activeStep, setActiveStep] = useState(4);
26
28
  const [closed, setClosed] = useState(false);
27
29
  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
28
30
  const showCloseButton = boolean('show closeButton', true);
29
31
  const showMobileBackButton = boolean('show mobile backButton', true);
30
32
  const done = boolean('done', false);
33
+ const profileType = select('profileType', Object.keys(ProfileType));
34
+ const avatarURL = text(
35
+ 'avatarURL',
36
+ 'https://wise.design/api/images/Logo-LogoFastFlagAvatar.webp',
37
+ );
31
38
 
32
39
  return !closed ? (
33
40
  <>
@@ -82,16 +89,15 @@ export const WithAvatarIcon = () => {
82
89
  />
83
90
 
84
91
  <FlowNavigation
92
+ done={done}
85
93
  avatar={
86
94
  !showAvatar ? null : (
87
- <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
88
- {avatarProfiles[showAvatar]}
95
+ <Avatar type={AvatarType.THUMBNAIL} size={Size.MEDIUM}>
96
+ <Illustration name="multi-currency" alt="stack of cash and coins" disableMargin />
89
97
  </Avatar>
90
98
  )
91
99
  }
92
- logo={<Logo type={LogoType.WISE_BUSINESS} />}
93
100
  activeStep={activeStep}
94
- done={done}
95
101
  steps={[
96
102
  {
97
103
  label: 'Amount',
@@ -127,59 +133,14 @@ export const WithAvatarIcon = () => {
127
133
  ]}
128
134
  onClose={showCloseButton && (() => setClosed(true))}
129
135
  onGoBack={
130
- showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
136
+ showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
131
137
  }
132
138
  />
133
139
 
134
140
  <FlowNavigation
135
- avatar={false}
136
- logo={<Logo />}
137
- activeStep={activeStep}
138
141
  done={done}
139
- steps={[
140
- {
141
- label: 'Amount',
142
- hoverLabel: (
143
- <>
144
- <div>
145
- <strong>100 GBP</strong>
146
- </div>
147
- 0.2351 ETH
148
- </>
149
- ),
150
- onClick: () => setActiveStep(0),
151
- },
152
- {
153
- label: 'You',
154
- hoverLabel: (
155
- <>
156
- <div>
157
- <strong>Elena Durante</strong>
158
- </div>
159
- elenadurante@test.com
160
- </>
161
- ),
162
- onClick: () => setActiveStep(1),
163
- },
164
- { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
165
- { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
166
- {
167
- label: 'Pay',
168
- hoverLabel: 'Enrico Gusso II',
169
- onClick: () => setActiveStep(4),
170
- },
171
- ]}
172
- onClose={showCloseButton && (() => setClosed(true))}
173
- onGoBack={
174
- showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
175
- }
176
- />
177
-
178
- <FlowNavigation
179
- avatar={false}
180
- logo={<Logo type={LogoType.WISE_BUSINESS} />}
142
+ avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
181
143
  activeStep={activeStep}
182
- done={done}
183
144
  steps={[
184
145
  {
185
146
  label: 'Amount',
@@ -215,140 +176,20 @@ export const WithAvatarIcon = () => {
215
176
  ]}
216
177
  onClose={showCloseButton && (() => setClosed(true))}
217
178
  onGoBack={
218
- showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
179
+ showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
219
180
  }
220
181
  />
221
- <div
222
- className="bg--dark"
223
- style={{
224
- textAlign: 'center',
225
- width: '538px',
226
- height: '30px',
227
- margin: '24px auto',
228
- color: 'white',
229
- }}
230
- >
231
- Content to test that the flow nav is centred
232
- </div>
233
- </>
234
- ) : null;
235
- };
236
182
 
237
- export const WithCustomAvatarImage = () => {
238
- const [activeStep, setActiveStep] = useState(4);
239
- const [closed, setClosed] = useState(false);
240
- const showAvatar = boolean('show avatar', true);
241
- const showCloseButton = boolean('show closeButton', true);
242
- const showMobileBackButton = boolean('show mobile backButton', true);
243
- const done = boolean('done', false);
244
-
245
- return !closed ? (
246
- <FlowNavigation
247
- done={done}
248
- avatar={
249
- !showAvatar ? null : (
250
- <Avatar type={AvatarType.THUMBNAIL} size={Size.MEDIUM}>
251
- <Illustration name="multi-currency" alt="stack of cash and coins" disableMargin />
252
- </Avatar>
253
- )
254
- }
255
- activeStep={activeStep}
256
- steps={[
257
- {
258
- label: 'Amount',
259
- hoverLabel: (
260
- <>
261
- <div>
262
- <strong>100 GBP</strong>
263
- </div>
264
- 0.2351 ETH
265
- </>
266
- ),
267
- onClick: () => setActiveStep(0),
268
- },
269
- {
270
- label: 'You',
271
- hoverLabel: (
272
- <>
273
- <div>
274
- <strong>Elena Durante</strong>
275
- </div>
276
- elenadurante@test.com
277
- </>
278
- ),
279
- onClick: () => setActiveStep(1),
280
- },
281
- { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
282
- { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
283
- {
284
- label: 'Pay',
285
- hoverLabel: 'Enrico Gusso II',
286
- onClick: () => setActiveStep(4),
287
- },
288
- ]}
289
- onClose={showCloseButton && (() => setClosed(true))}
290
- onGoBack={
291
- showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
292
- }
293
- />
294
- ) : null;
295
- };
296
-
297
- export const WithAvatarWrapper = () => {
298
- const [activeStep, setActiveStep] = useState(4);
299
- const [closed, setClosed] = useState(false);
300
- const profileType = select('profileType', Object.keys(ProfileType));
301
- const showCloseButton = boolean('show closeButton', true);
302
- const showMobileBackButton = boolean('show mobile backButton', true);
303
- const avatarURL = text(
304
- 'avatarURL',
305
- 'https://wise.design/api/images/Logo-LogoFastFlagAvatar.webp',
306
- );
307
- const done = boolean('done', false);
183
+ <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
308
184
 
309
- return !closed ? (
310
- <FlowNavigation
311
- done={done}
312
- avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
313
- activeStep={activeStep}
314
- steps={[
315
- {
316
- label: 'Amount',
317
- hoverLabel: (
318
- <>
319
- <div>
320
- <strong>100 GBP</strong>
321
- </div>
322
- 0.2351 ETH
323
- </>
324
- ),
325
- onClick: () => setActiveStep(0),
326
- },
327
- {
328
- label: 'You',
329
- hoverLabel: (
330
- <>
331
- <div>
332
- <strong>Elena Durante</strong>
333
- </div>
334
- elenadurante@test.com
335
- </>
336
- ),
337
- onClick: () => setActiveStep(1),
338
- },
339
- { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
340
- { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
341
- {
342
- label: 'Pay',
343
- hoverLabel: 'Enrico Gusso II',
344
- onClick: () => setActiveStep(4),
345
- },
346
- ]}
347
- onClose={showCloseButton && (() => setClosed(true))}
348
- onGoBack={
349
- showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
350
- }
351
- />
185
+ <Button
186
+ className="m-t-2"
187
+ disabled={activeStep === 4}
188
+ onClick={() => setActiveStep(activeStep + 1)}
189
+ >
190
+ Next Step
191
+ </Button>
192
+ </>
352
193
  ) : null;
353
194
  };
354
195
 
package/src/flowNavigation/FlowNavigation.tsx CHANGED
@@ -50,20 +50,16 @@ const FlowNavigation = ({
50
50
  return (
51
51
  <>
52
52
  {displayGoBack ? (
53
- <BackButton
54
- label={
55
- <AnimatedLabel
56
- className="m-x-1"
57
- labels={steps.map((step) => step.label)}
58
- activeLabel={activeStep - 1}
59
- aria-label={intl.formatMessage(messages.back)}
60
- />
61
- }
62
- onClick={onGoBack}
63
- />
53
+ <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
64
54
  ) : (
65
55
  logo
66
56
  )}
57
+ <AnimatedLabel
58
+ className="m-x-1"
59
+ labels={steps.map((step) => step.label)}
60
+ activeLabel={activeStep}
61
+ />
62
+ <span className="m-x-1" />
67
63
  </>
68
64
  );
69
65
  };
@@ -77,7 +73,7 @@ const FlowNavigation = ({
77
73
  )}
78
74
  >
79
75
  <FlowHeader
80
- className={classNames('np-flow-navigation__content p-x-3', {
76
+ className={classNames('np-flow-navigation__content', isSmall ? 'p-x-2' : 'p-x-3', {
81
77
  'np-flow-navigation--hidden': !clientWidth,
82
78
  'np-flow-navigation--xs-max': isSmall,
83
79
  // Size switches on parent container which may or may not have the same size as the window.
@@ -88,7 +84,7 @@ const FlowNavigation = ({
88
84
  rightContent={
89
85
  <>
90
86
  {newAvatar}
91
- {newAvatar && closeButton && <span className="separator" />}
87
+ {newAvatar && closeButton && <span className="m-x-1" />}
92
88
  {closeButton}
93
89
  </>
94
90
  }
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -6,20 +6,23 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
6
6
  class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
7
7
  >
8
8
  <div
9
- class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
9
+ class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-2 np-flow-navigation--xs-max"
10
10
  >
11
11
  <div
12
- class="np-flow-header__left flex__item--8"
12
+ class="np-flow-header__left d-flex align-items-center justify-content-between flex__item--8"
13
13
  >
14
14
  <div>
15
15
  BackButton
16
- <div
17
- class="m-x-1"
18
- data-testid="activeLabel-0"
19
- >
20
- AnimatedLabel
21
- </div>
22
16
  </div>
17
+ <div
18
+ class="m-x-1"
19
+ data-testid="activeLabel-1"
20
+ >
21
+ AnimatedLabel
22
+ </div>
23
+ <span
24
+ class="m-x-1"
25
+ />
23
26
  </div>
24
27
  <div
25
28
  class="align-items-center d-flex np-flow-header__right justify-content-end flex__item--4 "
@@ -34,7 +37,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
34
37
  </div>
35
38
  </div>
36
39
  <span
37
- class="separator"
40
+ class="m-x-1"
38
41
  />
39
42
  <button
40
43
  aria-label="Close"
@@ -125,7 +128,7 @@ exports[`FlowNavigation renders as expected 1`] = `
125
128
  class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
126
129
  >
127
130
  <div
128
- class="np-flow-header__left"
131
+ class="np-flow-header__left d-flex align-items-center justify-content-between"
129
132
  >
130
133
  <img
131
134
  alt="logo"
@@ -147,7 +150,7 @@ exports[`FlowNavigation renders as expected 1`] = `
147
150
  </div>
148
151
  </div>
149
152
  <span
150
- class="separator"
153
+ class="m-x-1"
151
154
  />
152
155
  <button
153
156
  aria-label="Close"
package/src/flowNavigation/animatedLabel/AnimatedLabel.css CHANGED
@@ -1 +1 @@
1
- .np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}.np-animated-label--out{position:relative;top:-24px;transform:translateX(8px)}
1
+ .np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}
package/src/flowNavigation/animatedLabel/AnimatedLabel.less CHANGED
@@ -28,10 +28,4 @@
28
28
  transform: translateX(0);
29
29
  transition: all @transition-duration ease-in @transition-duration;
30
30
  }
31
-
32
- &--out {
33
- position: relative;
34
- top: -@label-height;
35
- transform: translateX(@slide-length);
36
- }
37
31
  }
package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js CHANGED
@@ -14,12 +14,6 @@ describe('AnimatedLabel', () => {
14
14
  expect(container).toMatchSnapshot();
15
15
  });
16
16
 
17
- it('renders aria-label if provided', () => {
18
- render(<AnimatedLabel {...props} aria-label="hello" />);
19
- const checkbox = screen.getByLabelText('hello');
20
- expect(checkbox).toBeInTheDocument();
21
- });
22
-
23
17
  it('renders only one label with class in', () => {
24
18
  const { container } = render(<AnimatedLabel {...props} />);
25
19
  expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
@@ -28,41 +22,33 @@ describe('AnimatedLabel', () => {
28
22
 
29
23
  it('renders only one label with class out', () => {
30
24
  const { container } = render(<AnimatedLabel {...props} />);
31
- expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
32
- expect(container.querySelectorAll('.np-animated-label--out')).toHaveLength(1);
25
+ expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
26
+ expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
33
27
  });
34
28
 
35
29
  it('when activeLabel increase it switches class accordingly', () => {
36
30
  const { rerender } = render(<AnimatedLabel {...props} />);
37
31
  expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
38
- expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
39
-
40
- expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
32
+ expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
41
33
  expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
42
34
 
43
35
  rerender(<AnimatedLabel {...props} activeLabel={1} />);
44
36
 
45
- expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
46
37
  expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
47
-
48
38
  expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
49
- expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
39
+ expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
50
40
  });
51
41
 
52
42
  it('when activeLabel decrease it switches class accordingly', () => {
53
43
  const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
54
- expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
55
- expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
56
-
57
- expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
58
44
  expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
45
+ expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
46
+ expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
59
47
 
60
48
  rerender(<AnimatedLabel {...props} activeLabel={0} />);
61
49
 
62
50
  expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
63
- expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
64
-
65
- expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
51
+ expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
66
52
  expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
67
53
  });
68
54
  });