@transferwise/components 0.0.0-experimental-c91775b → 0.0.0-experimental-b34fee0

package/src/flowNavigation/FlowNavigation.tsx

@@ -7,6 +7,7 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';
 import Stepper, { type Step } from '../stepper/Stepper';
+import Container from '../container';
 
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
@@ -14,6 +15,8 @@ import AnimatedLabel from './animatedLabel';
 import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
 
+const defaultLogo = <Logo />;
+
 export interface FlowNavigationProps {
   /** @default 0 */
   activeStep?: number;
@@ -28,16 +31,31 @@ export interface FlowNavigationProps {
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
   steps: readonly Step[];
+  /**
+   * When true, renders in composable mode using a fluid Container.
+   * This allows the FlowNavigation to be used within custom layout containers.
+   * @default false
+   */
+  composable?: boolean;
+  /**
+   * Controls whether the bottom border is displayed.
+   * - Non-composable variant: When true (default), shows border based on done state (!done). When false, always hides.
+   * - Composable variant: Directly controls border visibility, ignoring done state.
+   * @default true
+   */
+  showBottomBorder?: boolean;
 }
 
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = <Logo />,
+  logo = defaultLogo,
   done = false,
   onClose,
   onGoBack,
   steps,
+  composable = false,
+  showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
 
@@ -50,62 +68,80 @@ const FlowNavigation = ({
 
   const displayGoBack = onGoBack != null && activeStep > 0;
 
+  const flowHeaderContent = (
+    <FlowHeader
+      className={clsx(
+        'np-flow-navigation__content',
+        !composable && 'p-x-3',
+        screenSm == null
+          ? 'np-flow-navigation--hidden'
+          : {
+              'np-flow-navigation--xs-max': !screenSm,
+              // Size switches on parent container which may or may not have the same size as the window.
+              'np-flow-navigation--sm': screenSm,
+              'np-flow-navigation--lg': screenLg,
+            },
+      )}
+      leftContent={
+        <>
+          {!screenSm && displayGoBack ? (
+            <IconButton
+              size={40}
+              priority="tertiary"
+              type="default"
+              aria-label={intl.formatMessage(messages.back)}
+              onClick={onGoBack}
+            >
+              <ArrowLeft />
+            </IconButton>
+          ) : (
+            <div className="np-flow-header__left">{logo}</div>
+          )}
+          {!screenSm && !done && (
+            <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
+          )}
+        </>
+      }
+      rightContent={
+        <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
+          {newAvatar}
+          {newAvatar && closeButton && <span className="m-x-1" />}
+          {closeButton}
+        </div>
+      }
+      bottomContent={
+        !done && steps.length > 0 ? (
+          <Stepper
+            activeStep={activeStep}
+            steps={steps}
+            className={clsx('np-flow-navigation__stepper')}
+          />
+        ) : null
+      }
+      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
+    />
+  );
+
+  if (composable) {
+    return (
+      <Container
+        size="fluid"
+        className={clsx('np-flow-navigation np-flow-navigation--composable', {
+          'np-flow-navigation--border-bottom': showBottomBorder,
+        })}
+      >
+        {flowHeaderContent}
+      </Container>
+    );
+  }
+
   return (
     <div
-      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
-        'np-flow-navigation--border-bottom': !done,
+      className={clsx('np-flow-navigation p-y-3', {
+        'np-flow-navigation--border-bottom': showBottomBorder && !done,
       })}
     >
-      <FlowHeader
-        className={clsx(
-          'np-flow-navigation__content p-x-3',
-          screenSm == null
-            ? 'np-flow-navigation--hidden'
-            : {
-                'np-flow-navigation--xs-max': !screenSm,
-                // Size switches on parent container which may or may not have the same size as the window.
-                'np-flow-navigation--sm': screenSm,
-                'np-flow-navigation--lg': screenLg,
-              },
-        )}
-        leftContent={
-          <>
-            {!screenSm && displayGoBack ? (
-              <IconButton
-                size={40}
-                priority="tertiary"
-                type="default"
-                aria-label={intl.formatMessage(messages.back)}
-                onClick={onGoBack}
-              >
-                <ArrowLeft />
-              </IconButton>
-            ) : (
-              <div className="np-flow-header__left">{logo}</div>
-            )}
-            {!screenSm && !done && (
-              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
-            )}
-          </>
-        }
-        rightContent={
-          <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
-            {newAvatar}
-            {newAvatar && closeButton && <span className="m-x-1" />}
-            {closeButton}
-          </div>
-        }
-        bottomContent={
-          !done && steps.length > 0 ? (
-            <Stepper
-              activeStep={activeStep}
-              steps={steps}
-              className={clsx('np-flow-navigation__stepper')}
-            />
-          ) : null
-        }
-        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
-      />
+      {flowHeaderContent}
     </div>
   );
 };

package/src/main.css

@@ -28754,12 +28754,14 @@ button.np-option {
 }
 
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  min-height: 96px;
 }
 
 .np-flow-navigation--border-bottom {
-  min-height: 96px;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
@@ -28844,6 +28846,20 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
+.np-flow-navigation--composable {
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation--composable {
+    min-height: 128px;
+  }
+}
+
+.np-flow-navigation--composable .np-flow-navigation__content {
+  max-width: none;
+}
+
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .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 {

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -15,9 +15,13 @@ interface CustomControls {
 }
 export type StoryArgs = OverlayHeaderProps & CustomControls;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 const meta: Meta<StoryArgs> = {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader',
+  tags: ['deprecated'],
   argTypes: {
     avatarType: { control: 'select', options: ['', 'Business', 'Profile'] },
     avatarURL: { control: 'text' },

package/src/overlayHeader/OverlayHeader.tsx

@@ -5,6 +5,9 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 export interface OverlayHeaderProps {
   /** An Avatar */
   avatar?: React.ReactNode;
@@ -15,6 +18,9 @@ export interface OverlayHeaderProps {
 
 const defaultLogo = <Logo />;
 
+/**
+ * @deprecated Use `FlowNavigation` component instead
+ */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
   const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
   return (

package/src/flowNavigation/FlowNavigation.test.js

@@ -1,190 +0,0 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
-import AvatarView from '../avatarView';
-import { mockMatchMedia, render, screen } from '../test-utils';
-
-import FlowNavigation from './FlowNavigation';
-
-mockMatchMedia();
-
-jest.mock('./animatedLabel', () => {
-  return function ({ className, activeLabel }) {
-    return (
-      <div className={className} data-testid={`activeLabel-${activeLabel}`}>
-        AnimatedLabel
-      </div>
-    );
-  };
-});
-
-describe('FlowNavigation', () => {
-  beforeEach(() => {
-    window.innerWidth = Breakpoint.LARGE + 1;
-  });
-
-  const props = {
-    avatar: <AvatarView profileName="Tim Mike" />,
-    logo: <img alt="logo" src="logo.svg" width="138" height="24" />,
-    onClose: jest.fn(),
-    steps: [
-      {
-        label: 'label-0',
-      },
-      { label: 'label-1' },
-      { label: 'label-2' },
-    ],
-    activeStep: 0,
-  };
-
-  it(`renders full Logo`, () => {
-    render(<FlowNavigation {...props} />);
-    expect(logoFull()).toBeInTheDocument();
-  });
-
-  it(`renders separator if avatar and onClose are provided`, () => {
-    const { container } = render(<FlowNavigation {...props} />);
-
-    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
-  });
-
-  it(`doesn't render separator if avatar or onClose are not provided`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-  });
-
-  it(`doesn't render separator if done is true`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.separator')).not.toBeInTheDocument();
-  });
-
-  it(`renders border based on done`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
-  });
-
-  it(`hides stepper when done is true`, () => {
-    const { container, rerender } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} avatar={null} done />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
-  });
-
-  it(`does not render stepper when steps is empty`, () => {
-    const { container } = render(<FlowNavigation {...props} steps={[]} />);
-
-    expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
-    expect(container.querySelector('.tw-stepper')).not.toBeInTheDocument();
-  });
-
-  it(`hides label when done is true`, () => {
-    const { rerender } = render(<FlowNavigation {...props} done={false} />);
-
-    expect(screen.getByText('label-0')).toBeInTheDocument();
-
-    rerender(<FlowNavigation {...props} done />);
-
-    expect(screen.queryByText('label-0')).not.toBeInTheDocument();
-  });
-
-  it(`renders xs-max class`, () => {
-    window.innerWidth = Breakpoint.SMALL - 1;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--xs-max')).toBeInTheDocument();
-  });
-
-  it(`renders sm class`, () => {
-    window.innerWidth = Breakpoint.SMALL;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--sm')).toBeInTheDocument();
-  });
-
-  it(`renders lg class`, () => {
-    window.innerWidth = Breakpoint.LARGE;
-    const { container } = render(<FlowNavigation {...props} onClose={null} />);
-
-    expect(container.querySelector('.np-flow-navigation--lg')).toBeInTheDocument();
-  });
-
-  describe('on mobile', () => {
-    beforeEach(() => {
-      window.innerWidth = Breakpoint.SMALL - 1;
-    });
-
-    it('renders Logo', () => {
-      render(<FlowNavigation {...props} />);
-      expect(screen.getByAltText('logo')).toBeInTheDocument();
-    });
-
-    it('renders flag if activeStep <= 0 onGoBack or is not provided', () => {
-      const { rerender } = render(
-        <FlowNavigation {...props} activeStep={0} onGoBack={undefined} />,
-      );
-
-      const flag = screen.queryByAltText('logo');
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={undefined} />);
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={0} onGoBack={jest.fn()} />);
-
-      expect(flag).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
-
-      expect(flag).not.toBeInTheDocument();
-    });
-
-    it('renders BackButton with AnimatedLabel if onGoBack is provided and activeStep > 0', () => {
-      const { rerender } = render(<FlowNavigation {...props} onGoBack={jest.fn()} />);
-
-      expect(
-        screen.queryByRole('button', { name: /back to previous step/i }),
-      ).not.toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} />);
-      expect(
-        screen.queryByRole('button', { name: /back to previous step/i }),
-      ).not.toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
-
-      expect(screen.getByRole('button', { name: /back to previous step/i })).toBeInTheDocument();
-      expect(screen.getByText('AnimatedLabel')).toBeInTheDocument();
-    });
-
-    it('renders correct AnimatedLabel', () => {
-      const { rerender } = render(
-        <FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />,
-      );
-
-      expect(screen.getByTestId('activeLabel-1')).toBeInTheDocument();
-
-      rerender(<FlowNavigation {...props} activeStep={2} onGoBack={jest.fn()} />);
-
-      expect(screen.getByTestId('activeLabel-2')).toBeInTheDocument();
-    });
-  });
-  const logoFull = () => screen.getByAltText(`logo`);
-});