@transferwise/components 45.12.0 → 45.14.0

package/src/flowNavigation/FlowNavigation.story.js

@@ -0,0 +1,397 @@
+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 { ProfileType, Size } from '../common';
+import Logo, { LogoType } from '../logo';
+import OverlayHeader from '../overlayHeader';
+
+import FlowNavigation from './FlowNavigation';
+
+export default {
+  component: FlowNavigation,
+  title: 'Navigation/FlowNavigation',
+};
+const avatarProfiles = {
+  '': null,
+  Business: <BriefcaseIcon />,
+  Profile: <ProfileIcon />,
+};
+
+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);
+
+  return !closed ? (
+    <>
+      <FlowNavigation
+        avatar={
+          !showAvatar ? null : (
+            <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+              {avatarProfiles[showAvatar]}
+            </Avatar>
+          )
+        }
+        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={
+          !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',
+            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} />}
+        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',
+        }}
+      >
+        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);
+  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);
+
+  return !closed ? (
+    <>
+      <div style={{ border: '1px solid #e8e8e8' }}>
+        <FlowNavigation
+          avatar={
+            showAvatar ? (
+              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+                {avatarProfiles[showAvatar]}
+              </Avatar>
+            ) : null
+          }
+          activeStep={activeStep}
+          done={done}
+          steps={[]}
+          onClose={showCloseButton && (() => setClosed(true))}
+          onGoBack={
+            showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          }
+        />
+      </div>
+      <div style={{ border: '1px solid #e8e8e8' }}>
+        <OverlayHeader
+          avatar={
+            showAvatar ? (
+              <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+                {avatarProfiles[showAvatar]}
+              </Avatar>
+            ) : null
+          }
+          onClose={showCloseButton && (() => setClosed(true))}
+        />
+      </div>
+    </>
+  ) : null;
+};

package/src/flowNavigation/FlowNavigation.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import { useRef } from 'react';
+import React from 'react';
+
+import { Breakpoint, Layout } from '../common';
+import { CloseButton } from '../common/closeButton';
+import FlowHeader from '../common/flowHeader/FlowHeader';
+import { useClientWidth } from '../common/hooks';
+import Logo from '../logo';
+import Stepper, { Step } from '../stepper/Stepper';
+
+import AnimatedLabel from './animatedLabel';
+import BackButton from './backButton';
+
+export interface FlowNavigationProps {
+  activeStep?: number;
+  avatar?: React.ReactNode;
+  logo?: React.ReactNode;
+  done?: boolean;
+  /** Called when the close button is clicked. If not provided the close button won't show */
+  onClose?: () => void;
+  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
+  onGoBack?: () => void;
+  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
+  steps: Step[];
+}
+
+const FlowNavigation = ({
+  activeStep = 0,
+  avatar,
+  logo = <Logo />,
+  done = false,
+  onClose,
+  onGoBack,
+  steps,
+}: FlowNavigationProps) => {
+  const reference = useRef<HTMLDivElement>(null);
+
+  const [clientWidth] = useClientWidth({ ref: reference });
+  const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
+  const isSmall = clientWidth != null && clientWidth < Breakpoint.SMALL;
+
+  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}
+              />
+            }
+            onClick={onGoBack}
+          />
+        ) : (
+          logo
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div
+      ref={reference}
+      className={classNames(
+        'np-flow-navigation d-flex align-items-center justify-content-center p-y-3',
+        { 'np-flow-navigation--border-bottom': !done },
+      )}
+    >
+      <FlowHeader
+        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.
+          'np-flow-navigation--sm': clientWidth != null && clientWidth >= Breakpoint.SMALL,
+          'np-flow-navigation--lg': clientWidth != null && clientWidth >= Breakpoint.LARGE,
+        })}
+        leftContent={isSmall ? getLeftContentSmall() : logo}
+        rightContent={
+          <>
+            {newAvatar}
+            {newAvatar && closeButton && <span className="separator" />}
+            {closeButton}
+          </>
+        }
+        bottomContent={
+          !done && (
+            <Stepper
+              activeStep={activeStep}
+              steps={steps}
+              className={classNames('np-flow-navigation__stepper')}
+            />
+          )
+        }
+        layout={
+          clientWidth != null && clientWidth < Breakpoint.LARGE
+            ? Layout.VERTICAL
+            : Layout.HORIZONTAL
+        }
+      />
+    </div>
+  );
+};
+
+export default FlowNavigation;