npm - @transferwise/components - Versions diffs - 0.0.0-experimental-c91775b → 0.0.0-experimental-b34fee0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/build/flowNavigation/FlowNavigation.js +55 -41
package/build/flowNavigation/FlowNavigation.js.map +1 -1
package/build/flowNavigation/FlowNavigation.mjs +55 -41
package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
package/build/main.css +18 -2
package/build/overlayHeader/OverlayHeader.js +3 -0
package/build/overlayHeader/OverlayHeader.js.map +1 -1
package/build/overlayHeader/OverlayHeader.mjs +3 -0
package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
package/build/styles/flowNavigation/FlowNavigation.css +15 -2
package/build/styles/main.css +18 -2
package/build/types/flowNavigation/FlowNavigation.d.ts +14 -1
package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
package/build/types/overlayHeader/OverlayHeader.d.ts +6 -0
package/build/types/overlayHeader/OverlayHeader.d.ts.map +1 -1
package/package.json +1 -1
package/src/flowNavigation/FlowNavigation.css +15 -2
package/src/flowNavigation/FlowNavigation.less +19 -4
package/src/flowNavigation/FlowNavigation.story.tsx +240 -0
package/src/flowNavigation/FlowNavigation.test.tsx +345 -0
package/src/flowNavigation/FlowNavigation.tsx +89 -53
package/src/main.css +18 -2
package/src/overlayHeader/OverlayHeader.story.tsx +4 -0
package/src/overlayHeader/OverlayHeader.tsx +6 -0
package/src/flowNavigation/FlowNavigation.test.js +0 -190

package/src/flowNavigation/FlowNavigation.less CHANGED Viewed

@@ -2,13 +2,15 @@
 @import (reference) "./../styles/less/addons/_spacing-utilities.less";
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  // This prevents jumping when border disappears.
-  min-height: 97px;
+  // This is the natural height of FlowNavigation when the Avatar is displayed.
+  min-height: 96px;
   &--border-bottom {
-    // This is the natural height of FlowNavigation when the Avatar is displayed.
-    min-height: 96px;
     border-bottom: 1px solid var(--color-border-neutral);
   }
@@ -66,6 +68,19 @@
     visibility: hidden;
   }
+  &--composable {
+    min-height: 80px;
+    @media (--screen-xs) {
+      min-height: 128px;
+    }
+    .np-flow-navigation__content {
+      // Remove max-width constraint for fluid layout
+      max-width: none;
+    }
+  }
   .np-theme-personal--forest-green &,
   .np-theme-personal--bright-green &,
   .np-theme-personal--dark & {

package/src/flowNavigation/FlowNavigation.story.tsx CHANGED Viewed

@@ -25,6 +25,13 @@ export type StoryArgs = FlowNavigationProps & CustomControls;
 type Story = StoryObj<StoryArgs>;
+/**
+ * FlowNavigation component for multi-step flows with progress tracking.
+ *
+ * **Border Behavior:**
+ * - Non-composable (default): Border respects `done` prop when `showBottomBorder=true`.
+ * - Composable: Border controlled only by `showBottomBorder`, ignoring the `done` property.
+ **/
 const meta: Meta<StoryArgs> = {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation',
@@ -32,6 +39,7 @@ const meta: Meta<StoryArgs> = {
     showCloseButton: { control: 'boolean', defaultValue: true },
     showMobileBackButton: { control: 'boolean', defaultValue: true },
     done: { control: 'boolean', defaultValue: false },
+    showBottomBorder: { control: 'boolean', defaultValue: true },
     avatarURL: { control: 'text', defaultValue: '../tapestry-01.png' },
     profileType: {
       control: 'radio',
@@ -372,3 +380,235 @@ export const WithOverlayHeaderComparison: Story = {
     );
   },
 };
+export const ComposableVariant: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    done: false,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    padding: '0',
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: () => setActiveStep(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
+      },
+    ];
+    return (
+      <>
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          steps={steps}
+          onClose={args.showCloseButton ? () => alert('close') : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+        <Container size="narrow">
+          <Body className="m-a-3">
+            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+            <br />
+            {lorem10}
+          </Body>
+        </Container>
+        <Sticky>
+          <Container
+            size="narrow"
+            className="d-flex justify-content-center align-items-center p-y-3"
+          >
+            <Button
+              v2
+              disabled={activeStep === 3}
+              block
+              onClick={() => setActiveStep(activeStep + 1)}
+            >
+              Continue
+            </Button>
+          </Container>
+        </Sticky>
+      </>
+    );
+  },
+};
+export const BorderControl: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: () => setActiveStep(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
+      },
+    ];
+    return (
+      <>
+        <Body className="text-xs-center m-b-3">
+          <Display type={Typography.DISPLAY_SMALL}>Non-composable Variant</Display>
+          <br />
+          Border follows <code>done</code> when <code>showBottomBorder=true</code>
+        </Body>
+        {/* Non-composable: showBottomBorder=true, done=false - SHOWS BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=false</code> → ✅ Border shown
+        </Body>
+        {/* Non-composable: showBottomBorder=true, done=true - HIDES BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=true</code> → ❌ Border hidden
+        </Body>
+        {/* Non-composable: showBottomBorder=false, done=false - HIDES BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder={false}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-5">
+          <code>showBottomBorder=false, done=false</code> → ❌ Border hidden
+        </Body>
+        <Body className="text-xs-center m-b-3 m-t-5">
+          <Display type={Typography.DISPLAY_SMALL}>Composable Variant</Display>
+          <br />
+          Border ignores <code>done</code>, follows <code>showBottomBorder</code> only
+        </Body>
+        {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=false</code> → ✅ Border shown
+        </Body>
+        {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=true</code> → ✅ Border shown (ignores done)
+        </Body>
+        {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder={false}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=false, done=false</code> → ❌ Border hidden
+        </Body>
+      </>
+    );
+  },
+};

package/src/flowNavigation/FlowNavigation.test.tsx ADDED Viewed

@@ -0,0 +1,345 @@
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import AvatarView from '../avatarView';
+import { mockMatchMedia, render, screen } from '../test-utils';
+import FlowNavigation, { type FlowNavigationProps } from './FlowNavigation';
+mockMatchMedia();
+jest.mock('./animatedLabel', () => {
+  return function ({ className, activeLabel }: { className: string; activeLabel: number }) {
+    return (
+      <div className={className} data-testid={`activeLabel-${activeLabel}`}>
+        AnimatedLabel
+      </div>
+    );
+  };
+});
+describe('FlowNavigation', () => {
+  beforeEach(() => {
+    window.innerWidth = Breakpoint.LARGE + 1;
+  });
+  const props: FlowNavigationProps = {
+    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={undefined} />);
+    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={undefined} />);
+    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={undefined} />);
+    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={undefined} />);
+    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={undefined} />);
+    expect(container.querySelector('.np-flow-navigation--xs-max')).toBeInTheDocument();
+  });
+  it(`renders sm class`, () => {
+    window.innerWidth = Breakpoint.SMALL;
+    const { container } = render(<FlowNavigation {...props} onClose={undefined} />);
+    expect(container.querySelector('.np-flow-navigation--sm')).toBeInTheDocument();
+  });
+  it(`renders lg class`, () => {
+    window.innerWidth = Breakpoint.LARGE;
+    const { container } = render(<FlowNavigation {...props} onClose={undefined} />);
+    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();
+    });
+  });
+  describe('composable variant', () => {
+    it('renders Container component when composable is true', () => {
+      const { container } = render(<FlowNavigation {...props} composable />);
+      expect(container.querySelector('.wds-container')).toBeInTheDocument();
+      expect(container.querySelector('.wds-container--fluid')).toBeInTheDocument();
+    });
+    it('renders Container as root element with FlowNavigation classes when composable is true', () => {
+      const { container } = render(<FlowNavigation {...props} composable />);
+      const containerElement = container.querySelector('.wds-container');
+      expect(containerElement).toHaveClass('np-flow-navigation');
+      expect(containerElement).toHaveClass('np-flow-navigation--composable');
+      expect(containerElement).toHaveClass('np-flow-navigation--border-bottom');
+    });
+    it('does not apply layout-specific classes to composable variant', () => {
+      const { container } = render(<FlowNavigation {...props} composable />);
+      const containerElement = container.querySelector('.wds-container');
+      // These layout classes should NOT be present on composable variant
+      expect(containerElement).not.toHaveClass('d-flex');
+      expect(containerElement).not.toHaveClass('align-items-center');
+      expect(containerElement).not.toHaveClass('justify-content-center');
+      expect(containerElement).not.toHaveClass('p-y-3');
+    });
+    it('renders div as root element when composable is false', () => {
+      const { container } = render(<FlowNavigation {...props} composable={false} />);
+      const flowNavElement = container.querySelector('.np-flow-navigation');
+      expect(flowNavElement?.tagName).toBe('DIV');
+      expect(flowNavElement).not.toHaveClass('wds-container');
+    });
+    it('does not render Container component when composable is false', () => {
+      const { container } = render(<FlowNavigation {...props} composable={false} />);
+      expect(container.querySelector('.wds-container')).not.toBeInTheDocument();
+    });
+    it('does not render Container component by default', () => {
+      const { container } = render(<FlowNavigation {...props} />);
+      expect(container.querySelector('.wds-container')).not.toBeInTheDocument();
+    });
+    it('applies composable class when composable is true', () => {
+      const { container } = render(<FlowNavigation {...props} composable />);
+      expect(container.querySelector('.np-flow-navigation--composable')).toBeInTheDocument();
+    });
+    it('does not apply composable class when composable is false', () => {
+      const { container } = render(<FlowNavigation {...props} composable={false} />);
+      expect(container.querySelector('.np-flow-navigation--composable')).not.toBeInTheDocument();
+    });
+    it('does not apply horizontal padding to FlowHeader when composable', () => {
+      const { container } = render(<FlowNavigation {...props} composable />);
+      const flowHeaderContent = container.querySelector('.np-flow-navigation__content');
+      expect(flowHeaderContent).not.toHaveClass('p-x-3');
+    });
+    it('applies horizontal padding to FlowHeader when not composable', () => {
+      const { container } = render(<FlowNavigation {...props} composable={false} />);
+      const flowHeaderContent = container.querySelector('.np-flow-navigation__content');
+      expect(flowHeaderContent).toHaveClass('p-x-3');
+    });
+    it('applies horizontal padding to FlowHeader by default', () => {
+      const { container } = render(<FlowNavigation {...props} />);
+      const flowHeaderContent = container.querySelector('.np-flow-navigation__content');
+      expect(flowHeaderContent).toHaveClass('p-x-3');
+    });
+  });
+  describe('showBottomBorder prop', () => {
+    it('shows border by default when done=false', () => {
+      const { container } = render(<FlowNavigation {...props} done={false} />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
+    });
+    it('hides border by default when done=true', () => {
+      const { container } = render(<FlowNavigation {...props} done />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('shows border when showBottomBorder=true and done=false', () => {
+      const { container } = render(<FlowNavigation {...props} showBottomBorder done={false} />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
+    });
+    it('hides border when showBottomBorder=true and done=true', () => {
+      const { container } = render(<FlowNavigation {...props} showBottomBorder done />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('always hides border when showBottomBorder=false regardless of done', () => {
+      const { container, rerender } = render(
+        <FlowNavigation {...props} done={false} showBottomBorder={false} />,
+      );
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+      rerender(<FlowNavigation {...props} done showBottomBorder={false} />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('follows done prop when showBottomBorder=true (default)', () => {
+      const { container, rerender } = render(<FlowNavigation {...props} done={false} />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
+      rerender(<FlowNavigation {...props} done />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('composable variant shows border when showBottomBorder=true regardless of done', () => {
+      const { container, rerender } = render(
+        <FlowNavigation {...props} composable showBottomBorder done={false} />,
+      );
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
+      rerender(<FlowNavigation {...props} composable showBottomBorder done />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).toBeInTheDocument();
+    });
+    it('composable variant hides border when showBottomBorder=false regardless of done', () => {
+      const { container, rerender } = render(
+        <FlowNavigation {...props} composable showBottomBorder={false} done={false} />,
+      );
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+      rerender(<FlowNavigation {...props} composable showBottomBorder={false} done />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('can completely disable bottom border with showBottomBorder=false', () => {
+      const { container } = render(<FlowNavigation {...props} showBottomBorder={false} />);
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+    it('disabled bottom border works with composable variant', () => {
+      const { container } = render(
+        <FlowNavigation {...props} composable showBottomBorder={false} />,
+      );
+      expect(container.querySelector('.np-flow-navigation--border-bottom')).not.toBeInTheDocument();
+    });
+  });
+  const logoFull = () => screen.getByAltText(`logo`);
+});