@transferwise/components 45.21.3 → 45.22.0

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,wFAuCf,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,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,sBAqErB,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/inputs/SelectInput.d.ts

@@ -23,6 +23,10 @@ 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?: (args: {
+        resultsEmpty: boolean;
+        normalizedQuery: string | null | undefined;
+    }) => React.ReactNode;
     renderTrigger?: (args: {
         content: React.ReactNode;
         placeholderShown: boolean;
@@ -39,7 +43,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":";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": "45.21.3",
+  "version": "45.22.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/flowHeader/FlowHeader.tsx

@@ -32,31 +32,13 @@ const FlowHeader = React.forwardRef(
           'd-flex',
           'flex-wrap',
           'align-items-center',
+          'justify-content-between',
+          'flex__item--12',
           className,
         )}
       >
-        <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>
+        {leftContent}
+        {rightContent}
         <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,18 +3,10 @@
 exports[`FlowHeader renders as expected 1`] = `
 <div>
   <div
-    class="np-flow-header d-flex flex-wrap align-items-center className"
+    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
   >
-    <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>
+    leftContent
+    rightContent
     <div
       class="align-items-center d-flex justify-content-center order-1 flex-grow-1"
     >
@@ -27,18 +19,10 @@ 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 className"
+    class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 className"
   >
-    <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>
+    leftContent
+    rightContent
     <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 .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

@@ -1,12 +1,13 @@
 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, { LogoType } from '../logo';
+import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 
 import FlowNavigation from './FlowNavigation';
@@ -21,13 +22,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,60 +88,8 @@ export const WithAvatarIcon = () => {
       />
 
       <FlowNavigation
-        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',
-            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 />}
         activeStep={activeStep}
-        done={done}
         steps={[
           {
             label: 'Amount',
@@ -171,15 +125,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 type={LogoType.WISE_BUSINESS} />}
-        activeStep={activeStep}
         done={done}
+        avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+        activeStep={activeStep}
         steps={[
           {
             label: 'Amount',
@@ -215,140 +168,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);
+      <Body className="text-xs-center m-a-3">Content to test that the flow nav is centred</Body>
 
-  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))
-      }
-    />
+      <Button
+        className="m-t-2"
+        disabled={activeStep === 4}
+        onClick={() => setActiveStep(activeStep + 1)}
+      >
+        Next Step
+      </Button>
+    </>
   ) : null;
 };
 

package/src/flowNavigation/FlowNavigation.tsx

@@ -42,31 +42,11 @@ 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 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
-        )}
-      </>
-    );
-  };
+  const displayGoBack = onGoBack != null && activeStep > 0;
 
   return (
     <div
@@ -82,15 +62,30 @@ 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': clientWidth != null && clientWidth >= Breakpoint.LARGE,
+          'np-flow-navigation--lg': isLarge,
         })}
-        leftContent={isSmall ? getLeftContentSmall() : logo}
-        rightContent={
+        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}
+              />
+            )}
+          </>
+        }
+        rightContent={
+          <div className={classNames('d-flex', 'align-items-center', { 'order-2': isLarge })}>
             {newAvatar}
-            {newAvatar && closeButton && <span className="separator" />}
+            {newAvatar && closeButton && <span className="m-x-1" />}
             {closeButton}
-          </>
+          </div>
         }
         bottomContent={
           !done && (