@transferwise/components 46.148.1 → 46.149.0

package/src/checkbox/Checkbox.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import Checkbox from './Checkbox';

package/src/chevron/Chevron.story.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Chevron>;
 
 export const Sandbox = createSandboxStory({
   code: `<Chevron orientation="bottom" size="md" />`,
-  scope: {Chevron},
+  scope: { Chevron },
 });
 
 export const Basic: Story = {

package/src/container/Container.story.tsx

@@ -4,10 +4,7 @@ import Body from '../body';
 import Title from '../title';
 
 import Container from './Container';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Container,

package/src/dateInput/DateInput.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { DateInput } from '..';
 
 const meta: Meta<typeof DateInput> = {

package/src/dateLookup/DateLookup.story.tsx

@@ -1,9 +1,6 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';

package/src/decision/Decision.story.tsx

@@ -3,10 +3,7 @@ import { fn } from 'storybook/test';
 import { Size } from '../common';
 import AvatarView from '../avatarView';
 import Decision, { DecisionPresentation, DecisionType } from '.';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Decision,

package/src/definitionList/DefinitionList.story.tsx

@@ -6,10 +6,7 @@ import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
 import { lorem10 } from '../test-utils';
 import Section from '../section';
 import Header from '../header';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: DefinitionList,

package/src/dimmer/Dimmer.story.tsx

@@ -3,10 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Button, Dimmer } from '..';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Dimmer,
@@ -60,4 +57,3 @@ export const Basic: Story = {
     );
   },
 };
-

package/src/display/Display.story.tsx

@@ -3,10 +3,7 @@ import Money from '../money/Money';
 import Title from '../title/Title';
 
 import Display from './Display';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Display',

package/src/emphasis/Emphasis.story.tsx

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Emphasis from './Emphasis';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   component: Emphasis,
@@ -28,4 +25,3 @@ export const Basic: Story = {
       '<script>alert("nice try!")</script>',
   },
 };
-

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -3,10 +3,7 @@ import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Flag } from '@wise/art';
 import { Rewards, Tags } from '@transferwise/icons';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
 import { lorem10, lorem5 } from '../test-utils';
 import { Sentiment } from '../common';

package/src/field/Field.story.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { action } from 'storybook/actions';
 
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Input } from '../inputs/Input';
 import { Field, FieldProps } from './Field';
 import { Sentiment } from '../common';

package/src/flowNavigation/FlowNavigation.css

@@ -1,9 +1,12 @@
 .np-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  min-height: 97px;
+  box-sizing: border-box;
+  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);
 }
@@ -69,6 +72,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   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/flowNavigation/FlowNavigation.less

@@ -2,13 +2,16 @@
 @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;
+  box-sizing: border-box;
+
+  // 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 +69,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

@@ -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,244 @@ 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 WithoutStepper: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [closed, setClosed] = useState(false);
+
+    if (closed) return <Body className="text-xs-center m-a-3">FlowNavigation closed</Body>;
+
+    return (
+      <FlowNavigation
+        avatar={<AvatarView profileType={args.profileType} />}
+        logo={<Logo />}
+        onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+      />
+    );
+  },
+};
+
+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 controlled by <code>done</code> property only
+        </Body>
+
+        {/* Non-composable: done=false - SHOWS BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>done=false</code> → ✅ Border shown
+        </Body>
+
+        {/* Non-composable: done=true - HIDES BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done
+          steps={steps}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-5">
+          <code>done=true</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>
+      </>
+    );
+  },
+};