@transferwise/components 0.0.0-experimental-62f7040 → 0.0.0-experimental-adfacd1

package/build/styles/overlayHeader/OverlayHeader.css

@@ -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)}
+.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

@@ -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"}
+{"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/common/locale/index.d.ts

@@ -10,8 +10,13 @@ export function adjustLocale(locale: string): string | null;
  * Provides corresponding lang (iso2) for provided locale
  * if locale is invalid or language is unsupported returns null
  *
+ * @deprecated The use of this function almost always breaks language variants
+ * e.g. Simplified and Traditional Chinese.
+ * There should be no use case for this function.
+ * To select the correct translations from a translations object, pass the
+ * locale directly into Crab's getLocalisedMessages.
  * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
+ * @returns {string|null} two-letter ISO639-1 language
  */
 export function getLangFromLocale(locale: string): string | null;
 /**
@@ -48,6 +53,10 @@ export const DEFAULT_LOCALE: string;
  * @type {string[]}
  */
 export const RTL_LANGUAGES: string[];
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ * @type {string[]}
+ */
 export const SUPPORTED_LANGUAGES: string[];
 import { Direction } from "../direction";
 //# sourceMappingURL=index.d.ts.map

package/build/types/common/locale/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/locale/index.js"],"names":[],"mappings":"AA0CA;;;;;;GAMG;AACH,qCAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAcvB;AAED;;;;;;GAMG;AACH,0CAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAmBvB;AAED;;;;;;GAMG;AACH,6CAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAevB;AAED;;;;;;GAMG;AACH,+CAHW,MAAM,GACJ,SAAS,CAarB;AA/HD;;;;GAIG;AACH,2BAFU,MAAM,CAEiB;AAEjC;;;;GAIG;AACH,6BAFU,MAAM,CAEsB;AAEtC;;;;GAIG;AACH,4BAFU,MAAM,EAAE,CAEwB;AAE1C,2CAiBE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/locale/index.js"],"names":[],"mappings":"AA8CA;;;;;;GAMG;AACH,qCAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAcvB;AAED;;;;;;;;;;;GAWG;AACH,0CAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAmBvB;AAED;;;;;;GAMG;AACH,6CAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAevB;AAED;;;;;;GAMG;AACH,+CAHW,MAAM,GACJ,SAAS,CAarB;AAxID;;;;GAIG;AACH,2BAFU,MAAM,CAEiB;AAEjC;;;;GAIG;AACH,6BAFU,MAAM,CAEsB;AAEtC;;;;GAIG;AACH,4BAFU,MAAM,EAAE,CAEwB;AAE1C;;;GAGG;AACH,kCAFU,MAAM,EAAE,CAmBhB"}

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -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"}
+{"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

@@ -3,8 +3,7 @@ export interface AnimatedLabelProps {
     activeLabel: number;
     className?: string;
     labels: React.ReactNode[];
-    'aria-label': string;
 }
-declare const AnimatedLabel: ({ activeLabel, className, labels, "aria-label": ariaLabel, }: AnimatedLabelProps) => React.JSX.Element;
+declare const AnimatedLabel: ({ activeLabel, className, labels }: AnimatedLabelProps) => React.JSX.Element;
 export default AnimatedLabel;
 //# sourceMappingURL=AnimatedLabel.d.ts.map

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map

@@ -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"}
+{"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

@@ -1,20 +1,19 @@
 export default BackButton;
-declare function BackButton({ label, className, onClick }: {
-    label: any;
+declare function BackButton({ className, onClick, "aria-label": ariaLabel }: {
     className: any;
     onClick: any;
+    "aria-label": any;
 }): import("react").JSX.Element;
 declare namespace BackButton {
-    namespace propTypes {
-        const className: any;
-        const label: any;
-        const onClick: any;
-    }
+    const propTypes: {
+        'aria-label': any;
+        className: any;
+        label: any;
+        onClick: any;
+    };
     namespace defaultProps {
-        const className_1: undefined;
-        export { className_1 as className };
-        const label_1: undefined;
-        export { label_1 as label };
+        const className: undefined;
+        const label: undefined;
     }
 }
 //# sourceMappingURL=BackButton.d.ts.map

package/build/types/flowNavigation/backButton/BackButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.js"],"names":[],"mappings":";AAIA;;;;gCASC"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.js"],"names":[],"mappings":";AAMA;;;;gCAWC"}

package/build/types/logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AAsBA;;;;uCAkBC"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.js"],"names":[],"mappings":";AAsBA;;;;gCAaC"}

package/build/types/overlayHeader/OverlayHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.js"],"names":[],"mappings":";AAMA;;;;gCAiBC"}
+{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../src/overlayHeader/OverlayHeader.js"],"names":[],"mappings":";AAQA;;;;gCAiBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-62f7040",
+  "version": "0.0.0-experimental-adfacd1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -53,7 +53,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.6.0",
+    "@transferwise/neptune-tokens": "^8.7.0",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
@@ -78,12 +78,12 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "0.0.0-experimental-62f7040",
+    "@transferwise/neptune-css": "14.7.0",
     "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-62f7040",
+    "@transferwise/neptune-css": "^14.7.0",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^0.8.4",
     "currency-flags": "^4.0.2",

package/src/common/flowHeader/FlowHeader.tsx

@@ -36,9 +36,15 @@ const FlowHeader = React.forwardRef(
         )}
       >
         <div
-          className={classNames('np-flow-header__left', {
-            'flex__item--8': isVertical,
-          })}
+          className={classNames(
+            'np-flow-header__left',
+            'd-flex',
+            'align-items-center',
+            'justify-content-between',
+            {
+              'flex__item--8': isVertical,
+            },
+          )}
         >
           {leftContent}
         </div>

package/src/common/flowHeader/__snapshots__/FlowHeader.spec.js.snap

@@ -6,7 +6,7 @@ exports[`FlowHeader renders as expected 1`] = `
     class="np-flow-header d-flex flex-wrap align-items-center className"
   >
     <div
-      class="np-flow-header__left"
+      class="np-flow-header__left d-flex align-items-center justify-content-between"
     >
       leftContent
     </div>
@@ -30,7 +30,7 @@ exports[`FlowHeader renders as expected with vertical layout 1`] = `
     class="np-flow-header d-flex flex-wrap align-items-center className"
   >
     <div
-      class="np-flow-header__left flex__item--8"
+      class="np-flow-header__left d-flex align-items-center justify-content-between flex__item--8"
     >
       leftContent
     </div>

package/src/common/locale/index.js

@@ -21,6 +21,10 @@ export const DEFAULT_LOCALE = 'en-GB';
  */
 export const RTL_LANGUAGES = ['ar', 'he'];
 
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ * @type {string[]}
+ */
 export const SUPPORTED_LANGUAGES = [
   DEFAULT_LANG,
   'de',
@@ -65,8 +69,13 @@ export function adjustLocale(locale) {
  * Provides corresponding lang (iso2) for provided locale
  * if locale is invalid or language is unsupported returns null
  *
+ * @deprecated The use of this function almost always breaks language variants
+ * e.g. Simplified and Traditional Chinese.
+ * There should be no use case for this function.
+ * To select the correct translations from a translations object, pass the
+ * locale directly into Crab's getLocalisedMessages.
  * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
+ * @returns {string|null} two-letter ISO639-1 language
  */
 export function getLangFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);

package/src/flowNavigation/FlowNavigation.css

@@ -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)}
+.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

@@ -57,15 +57,6 @@
     }
   }
 
-  .separator {
-    .m-x-2;
-
-    height: var(--size-32);
-    width: 1px;
-    min-width: 1px;
-    background-color: var(--color-border-neutral);
-  }
-
   &--hidden {
     visibility: hidden;
   }

package/src/flowNavigation/FlowNavigation.spec.js

@@ -73,7 +73,7 @@ describe('FlowNavigation', () => {
   it(`renders separator if avatar and onClose are provided`, () => {
     const { container } = render(<FlowNavigation {...props} />);
 
-    expect(container.querySelector('.separator')).toBeInTheDocument();
+    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
   });
 
   it(`doesn't render separator if avatar or onClose are not provided`, () => {
@@ -194,11 +194,11 @@ describe('FlowNavigation', () => {
         <FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />,
       );
 
-      expect(screen.getByTestId('activeLabel-0')).toBeInTheDocument();
+      expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
 
       rerender(<FlowNavigation {...props} activeStep={2} onGoBack={jest.fn()} />);
 
-      expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
+      expect(screen.getByTestId('activeLabel-2')).toBeInTheDocument();
     });
   });
   const logoFull = () => screen.getByAltText(`logo`);

package/src/flowNavigation/FlowNavigation.story.js

@@ -5,8 +5,10 @@ import { useState } from 'react';
 
 import Avatar, { AvatarType } from '../avatar';
 import AvatarWrapper from '../avatarWrapper';
+import Body from '../body';
+import Button from '../button';
 import { ProfileType, Size } from '../common';
-import Logo, { LogoType } from '../logo';
+import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
 import FlowNavigation from './FlowNavigation';
@@ -21,13 +23,18 @@ const avatarProfiles = {
   Profile: <ProfileIcon />,
 };
 
-export const WithAvatarIcon = () => {
+export const Varients = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);
   const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
+  const profileType = select('profileType', Object.keys(ProfileType));
+  const avatarURL = text(
+    'avatarURL',
+    'https://wise.design/api/images/Logo-LogoFastFlagAvatar.webp',
+  );
 
   return !closed ? (
     <>
@@ -82,16 +89,15 @@ export const WithAvatarIcon = () => {
       />
 
       <FlowNavigation
+        done={done}
         avatar={
           !showAvatar ? null : (
-            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {avatarProfiles[showAvatar]}
+            <Avatar type={AvatarType.THUMBNAIL} size={Size.MEDIUM}>
+              <Illustration name="multi-currency" alt="stack of cash and coins" disableMargin />
             </Avatar>
           )
         }
-        logo={<Logo type={LogoType.WISE_BUSINESS} />}
         activeStep={activeStep}
-        done={done}
         steps={[
           {
             label: 'Amount',
@@ -127,59 +133,14 @@ export const WithAvatarIcon = () => {
         ]}
         onClose={showCloseButton && (() => setClosed(true))}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
         }
       />
 
       <FlowNavigation
-        avatar={false}
-        logo={<Logo />}
-        activeStep={activeStep}
         done={done}
-        steps={[
-          {
-            label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
-            onClick: () => setActiveStep(0),
-          },
-          {
-            label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
-            onClick: () => setActiveStep(1),
-          },
-          { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-          { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-          {
-            label: 'Pay',
-            hoverLabel: 'Enrico Gusso II',
-            onClick: () => setActiveStep(4),
-          },
-        ]}
-        onClose={showCloseButton && (() => setClosed(true))}
-        onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
-        }
-      />
-
-      <FlowNavigation
-        avatar={false}
-        logo={<Logo type={LogoType.WISE_BUSINESS} />}
+        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
-        done={done}
         steps={[
           {
             label: 'Amount',
@@ -215,140 +176,20 @@ export const WithAvatarIcon = () => {
         ]}
         onClose={showCloseButton && (() => setClosed(true))}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
         }
       />
-      <div
-        className="bg--dark"
-        style={{
-          textAlign: 'center',
-          width: '538px',
-          height: '30px',
-          margin: '24px auto',
-          color: 'white',
-        }}
-      >
-        Content to test that the flow nav is centred
-      </div>
-    </>
-  ) : null;
-};
 
-export const WithCustomAvatarImage = () => {
-  const [activeStep, setActiveStep] = useState(4);
-  const [closed, setClosed] = useState(false);
-  const showAvatar = boolean('show avatar', true);
-  const showCloseButton = boolean('show closeButton', true);
-  const showMobileBackButton = boolean('show mobile backButton', true);
-  const done = boolean('done', false);
-
-  return !closed ? (
-    <FlowNavigation
-      done={done}
-      avatar={
-        !showAvatar ? null : (
-          <Avatar type={AvatarType.THUMBNAIL} size={Size.MEDIUM}>
-            <Illustration name="multi-currency" alt="stack of cash and coins" disableMargin />
-          </Avatar>
-        )
-      }
-      activeStep={activeStep}
-      steps={[
-        {
-          label: 'Amount',
-          hoverLabel: (
-            <>
-              <div>
-                <strong>100 GBP</strong>
-              </div>
-              0.2351 ETH
-            </>
-          ),
-          onClick: () => setActiveStep(0),
-        },
-        {
-          label: 'You',
-          hoverLabel: (
-            <>
-              <div>
-                <strong>Elena Durante</strong>
-              </div>
-              elenadurante@test.com
-            </>
-          ),
-          onClick: () => setActiveStep(1),
-        },
-        { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-        { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-        {
-          label: 'Pay',
-          hoverLabel: 'Enrico Gusso II',
-          onClick: () => setActiveStep(4),
-        },
-      ]}
-      onClose={showCloseButton && (() => setClosed(true))}
-      onGoBack={
-        showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
-      }
-    />
-  ) : null;
-};
-
-export const WithAvatarWrapper = () => {
-  const [activeStep, setActiveStep] = useState(4);
-  const [closed, setClosed] = useState(false);
-  const profileType = select('profileType', Object.keys(ProfileType));
-  const showCloseButton = boolean('show closeButton', true);
-  const showMobileBackButton = boolean('show mobile backButton', true);
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.design/api/images/Logo-LogoFastFlagAvatar.webp',
-  );
-  const done = boolean('done', false);
+      <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
 
-  return !closed ? (
-    <FlowNavigation
-      done={done}
-      avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
-      activeStep={activeStep}
-      steps={[
-        {
-          label: 'Amount',
-          hoverLabel: (
-            <>
-              <div>
-                <strong>100 GBP</strong>
-              </div>
-              0.2351 ETH
-            </>
-          ),
-          onClick: () => setActiveStep(0),
-        },
-        {
-          label: 'You',
-          hoverLabel: (
-            <>
-              <div>
-                <strong>Elena Durante</strong>
-              </div>
-              elenadurante@test.com
-            </>
-          ),
-          onClick: () => setActiveStep(1),
-        },
-        { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
-        { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(3) },
-        {
-          label: 'Pay',
-          hoverLabel: 'Enrico Gusso II',
-          onClick: () => setActiveStep(4),
-        },
-      ]}
-      onClose={showCloseButton && (() => setClosed(true))}
-      onGoBack={
-        showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
-      }
-    />
+      <Button
+        className="m-t-2"
+        disabled={activeStep === 4}
+        onClick={() => setActiveStep(activeStep + 1)}
+      >
+        Next Step
+      </Button>
+    </>
   ) : null;
 };
 

package/src/flowNavigation/FlowNavigation.tsx

@@ -50,20 +50,16 @@ const FlowNavigation = ({
     return (
       <>
         {displayGoBack ? (
-          <BackButton
-            label={
-              <AnimatedLabel
-                className="m-x-1"
-                labels={steps.map((step) => step.label)}
-                activeLabel={activeStep - 1}
-                aria-label={intl.formatMessage(messages.back)}
-              />
-            }
-            onClick={onGoBack}
-          />
+          <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
         ) : (
           logo
         )}
+        <AnimatedLabel
+          className="m-x-1"
+          labels={steps.map((step) => step.label)}
+          activeLabel={activeStep}
+        />
+        <span className="m-x-1" />
       </>
     );
   };
@@ -77,7 +73,7 @@ const FlowNavigation = ({
       )}
     >
       <FlowHeader
-        className={classNames('np-flow-navigation__content p-x-3', {
+        className={classNames('np-flow-navigation__content', isSmall ? 'p-x-2' : 'p-x-3', {
           'np-flow-navigation--hidden': !clientWidth,
           'np-flow-navigation--xs-max': isSmall,
           // Size switches on parent container which may or may not have the same size as the window.
@@ -88,7 +84,7 @@ const FlowNavigation = ({
         rightContent={
           <>
             {newAvatar}
-            {newAvatar && closeButton && <span className="separator" />}
+            {newAvatar && closeButton && <span className="m-x-1" />}
             {closeButton}
           </>
         }

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -6,20 +6,23 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
     class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
+      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-2 np-flow-navigation--xs-max"
     >
       <div
-        class="np-flow-header__left flex__item--8"
+        class="np-flow-header__left d-flex align-items-center justify-content-between flex__item--8"
       >
         <div>
           BackButton
-          <div
-            class="m-x-1"
-            data-testid="activeLabel-0"
-          >
-            AnimatedLabel
-          </div>
         </div>
+        <div
+          class="m-x-1"
+          data-testid="activeLabel-1"
+        >
+          AnimatedLabel
+        </div>
+        <span
+          class="m-x-1"
+        />
       </div>
       <div
         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`] = `
           </div>
         </div>
         <span
-          class="separator"
+          class="m-x-1"
         />
         <button
           aria-label="Close"
@@ -125,7 +128,7 @@ exports[`FlowNavigation renders as expected 1`] = `
       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"
     >
       <div
-        class="np-flow-header__left"
+        class="np-flow-header__left d-flex align-items-center justify-content-between"
       >
         <img
           alt="logo"
@@ -147,7 +150,7 @@ exports[`FlowNavigation renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="separator"
+          class="m-x-1"
         />
         <button
           aria-label="Close"

package/src/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -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)}
+.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

@@ -28,10 +28,4 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
-
-  &--out {
-    position: relative;
-    top: -@label-height;
-    transform: translateX(@slide-length);
-  }
 }