@transferwise/components 0.0.0-experimental-a087360 → 0.0.0-experimental-73ab65e

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,wFAuCf,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,sBAqErB,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

@@ -23,6 +23,7 @@ export interface SelectInputProps<T = string> {
     value?: T;
     compareValues?: (keyof NonNullable<T> & string) | ((a: T | undefined, b: T | undefined) => boolean);
     renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
+    renderFooter?: (normalizedQuery: string | null | undefined) => React.ReactNode;
     renderTrigger?: (args: {
         content: React.ReactNode;
         placeholderShown: boolean;
@@ -39,7 +40,7 @@ export interface SelectInputProps<T = string> {
     onChange?: (value: T) => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
+export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;

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-a087360",
+  "version": "0.0.0-experimental-73ab65e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/flowHeader/FlowHeader.tsx

@@ -32,13 +32,31 @@ const FlowHeader = React.forwardRef(
           'd-flex',
           'flex-wrap',
           'align-items-center',
-          'justify-content-between',
-          'flex__item--12',
           className,
         )}
       >
-        {leftContent}
-        {rightContent}
+        <div
+          className={classNames('np-flow-header__left', {
+            'flex__item--8': isVertical,
+          })}
+        >
+          {leftContent}
+        </div>
+
+        <div
+          className={classNames(
+            'align-items-center',
+            'd-flex',
+            'np-flow-header__right',
+            'justify-content-end',
+            {
+              'flex__item--4 ': isVertical,
+              'order-2': !isVertical,
+            },
+          )}
+        >
+          {rightContent}
+        </div>
         <div
           className={classNames('align-items-center', 'd-flex', 'justify-content-center', {
             'flex__item--12': isVertical,

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

@@ -3,10 +3,18 @@
 exports[`FlowHeader renders as expected 1`] = `
 <div>
   <div
-    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
+    class="np-flow-header d-flex flex-wrap align-items-center className"
   >
-    leftContent
-    rightContent
+    <div
+      class="np-flow-header__left"
+    >
+      leftContent
+    </div>
+    <div
+      class="align-items-center d-flex np-flow-header__right justify-content-end order-2"
+    >
+      rightContent
+    </div>
     <div
       class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
     >
@@ -19,10 +27,18 @@ exports[`FlowHeader renders as expected 1`] = `
 exports[`FlowHeader renders as expected with vertical layout 1`] = `
 <div>
   <div
-    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
+    class="np-flow-header d-flex flex-wrap align-items-center className"
   >
-    leftContent
-    rightContent
+    <div
+      class="np-flow-header__left flex__item--8"
+    >
+      leftContent
+    </div>
+    <div
+      class="align-items-center d-flex np-flow-header__right justify-content-end flex__item--4 "
+    >
+      rightContent
+    </div>
     <div
       class="align-items-center d-flex justify-content-center flex__item--12"
     >

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

@@ -1,13 +1,12 @@
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
+import { Illustration } from '@wise/art';
 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';
@@ -22,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 ? (
     <>
@@ -88,8 +82,16 @@ export const Varients = () => {
       />
 
       <FlowNavigation
-        done={done}
+        avatar={
+          !showAvatar ? null : (
+            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+              {avatarProfiles[showAvatar]}
+            </Avatar>
+          )
+        }
+        logo={<Logo type={LogoType.WISE_BUSINESS} />}
         activeStep={activeStep}
+        done={done}
         steps={[
           {
             label: 'Amount',
@@ -125,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',
@@ -168,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

@@ -42,11 +42,31 @@ const FlowNavigation = ({
   const [clientWidth] = useClientWidth({ ref: reference });
   const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
   const isSmall = clientWidth != null && clientWidth < Breakpoint.SMALL;
-  const isLarge = clientWidth != null && clientWidth >= Breakpoint.LARGE;
 
   const newAvatar = done ? null : avatar;
 
-  const displayGoBack = onGoBack != null && activeStep > 0;
+  const getLeftContentSmall = () => {
+    const displayGoBack = onGoBack != null && activeStep > 0;
+    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}
+          />
+        ) : (
+          logo
+        )}
+      </>
+    );
+  };
 
   return (
     <div
@@ -62,30 +82,15 @@ const FlowNavigation = ({
           'np-flow-navigation--xs-max': isSmall,
           // Size switches on parent container which may or may not have the same size as the window.
           'np-flow-navigation--sm': clientWidth != null && clientWidth >= Breakpoint.SMALL,
-          'np-flow-navigation--lg': isLarge,
+          'np-flow-navigation--lg': clientWidth != null && clientWidth >= Breakpoint.LARGE,
         })}
-        leftContent={
-          <>
-            {isSmall && displayGoBack ? (
-              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />
-            ) : (
-              logo
-            )}
-            {isSmall && (
-              <AnimatedLabel
-                className="m-x-1"
-                labels={steps.map((step) => step.label)}
-                activeLabel={activeStep}
-              />
-            )}
-          </>
-        }
+        leftContent={isSmall ? getLeftContentSmall() : logo}
         rightContent={
-          <div className={classNames('d-flex', 'align-items-center', { 'order-2': isLarge })}>
+          <>
             {newAvatar}
-            {newAvatar && closeButton && <span className="m-x-1" />}
+            {newAvatar && closeButton && <span className="separator" />}
             {closeButton}
-          </div>
+          </>
         }
         bottomContent={
           !done && (