@transferwise/components 0.0.0-experimental-a4458ac → 0.0.0-experimental-210ef2c

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-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-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)}

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,wFA+Df,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,wFAyDf,CAAC;AAEF,eAAe,UAAU,CAAC"}

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,sBAsErB,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,sBA0ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -3,7 +3,8 @@ export interface AnimatedLabelProps {
     activeLabel: number;
     className?: string;
     labels: React.ReactNode[];
+    'aria-label': string;
 }
-declare const AnimatedLabel: ({ activeLabel, className, labels }: AnimatedLabelProps) => React.JSX.Element;
+declare const AnimatedLabel: ({ activeLabel, className, labels, "aria-label": ariaLabel, }: 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;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"}
+{"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"}

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

@@ -1,19 +1,20 @@
 export default BackButton;
-declare function BackButton({ className, onClick, "aria-label": ariaLabel }: {
+declare function BackButton({ label, className, onClick }: {
+    label: any;
     className: any;
     onClick: any;
-    "aria-label": any;
 }): import("react").JSX.Element;
 declare namespace BackButton {
-    const propTypes: {
-        'aria-label': any;
-        className: any;
-        label: any;
-        onClick: any;
-    };
+    namespace propTypes {
+        const className: any;
+        const label: any;
+        const onClick: any;
+    }
     namespace defaultProps {
-        const className: undefined;
-        const label: undefined;
+        const className_1: undefined;
+        export { className_1 as className };
+        const label_1: undefined;
+        export { label_1 as label };
     }
 }
 //# 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":";AAMA;;;;gCAWC"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.js"],"names":[],"mappings":";AAIA;;;;gCASC"}

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a4458ac",
+  "version": "0.0.0-experimental-210ef2c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/flowHeader/FlowHeader.tsx

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

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

package/src/flowNavigation/FlowNavigation.less

@@ -57,6 +57,15 @@
     }
   }
 
+  .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('span.m-x-1')).toBeInTheDocument();
+    expect(container.querySelector('.separator')).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-1')).toBeInTheDocument();
+      expect(screen.getByTestId('activeLabel-0')).toBeInTheDocument();
 
       rerender(<FlowNavigation {...props} activeStep={2} onGoBack={jest.fn()} />);
 
-      expect(screen.getByTestId('activeLabel-2')).toBeInTheDocument();
+      expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
     });
   });
   const logoFull = () => screen.getByAltText(`logo`);

package/src/flowNavigation/FlowNavigation.story.js

@@ -5,10 +5,8 @@ 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 from '../logo';
+import Logo, { LogoType } from '../logo';
 import OverlayHeader from '../overlayHeader';
 
 import FlowNavigation from './FlowNavigation';
@@ -23,18 +21,13 @@ const avatarProfiles = {
   Profile: <ProfileIcon />,
 };
 
-export const Varients = () => {
+export const WithAvatarIcon = () => {
   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 ? (
     <>
@@ -89,15 +82,16 @@ export const Varients = () => {
       />
 
       <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 type={AvatarType.ICON} size={Size.MEDIUM}>
+              {avatarProfiles[showAvatar]}
             </Avatar>
           )
         }
+        logo={<Logo type={LogoType.WISE_BUSINESS} />}
         activeStep={activeStep}
+        done={done}
         steps={[
           {
             label: 'Amount',
@@ -133,14 +127,15 @@ export const Varients = () => {
         ]}
         onClose={showCloseButton && (() => setClosed(true))}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
         }
       />
 
       <FlowNavigation
-        done={done}
-        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        avatar={false}
+        logo={<Logo />}
         activeStep={activeStep}
+        done={done}
         steps={[
           {
             label: 'Amount',
@@ -176,23 +171,187 @@ export const Varients = () => {
         ]}
         onClose={showCloseButton && (() => setClosed(true))}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
         }
       />
 
-      <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
-
-      <Button
-        className="m-t-2"
-        disabled={activeStep === 4}
-        onClick={() => setActiveStep(activeStep + 1)}
+      <FlowNavigation
+        avatar={false}
+        logo={<Logo type={LogoType.WISE_BUSINESS} />}
+        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))
+        }
+      />
+      <div
+        className="bg--dark"
+        style={{
+          textAlign: 'center',
+          width: '538px',
+          height: '30px',
+          margin: '24px auto',
+          color: 'white',
+        }}
       >
-        Next Step
-      </Button>
+        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);
+
+  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))
+      }
+    />
+  ) : null;
+};
+
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.tsx

@@ -50,16 +50,20 @@ const FlowNavigation = ({
     return (
       <>
         {displayGoBack ? (
-          <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
+          <BackButton
+            label={
+              <AnimatedLabel
+                className="m-x-1"
+                labels={steps.map((step) => step.label)}
+                activeLabel={activeStep - 1}
+                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" />
       </>
     );
   };
@@ -73,7 +77,7 @@ const FlowNavigation = ({
       )}
     >
       <FlowHeader
-        className={classNames('np-flow-navigation__content', isSmall ? 'p-x-2' : 'p-x-3', {
+        className={classNames('np-flow-navigation__content 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.
@@ -84,7 +88,7 @@ const FlowNavigation = ({
         rightContent={
           <>
             {newAvatar}
-            {newAvatar && closeButton && <span className="m-x-1" />}
+            {newAvatar && closeButton && <span className="separator" />}
             {closeButton}
           </>
         }

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

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

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

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

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,6 +14,12 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders aria-label if provided', () => {
+    render(<AnimatedLabel {...props} aria-label="hello" />);
+    const checkbox = screen.getByLabelText('hello');
+    expect(checkbox).toBeInTheDocument();
+  });
+
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
@@ -22,33 +28,41 @@ describe('AnimatedLabel', () => {
 
   it('renders only one label with class out', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+    expect(container.querySelectorAll('.np-animated-label--out')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
+
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 });