@transferwise/components 46.136.1 → 46.137.1

package/src/logo/Logo.story.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo, { LogoType } from '.';
+import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -10,13 +11,21 @@ const meta: Meta<typeof Logo> = {
   title: 'Content/Logo',
   args: {
     type: 'WISE',
-    inverse: false,
   },
   argTypes: {
     type: {
       control: 'radio',
       options: Object.values(LogoType),
     },
+    display: {
+      control: 'radio',
+      options: Object.values(LogoDisplay),
+    },
+    format: {
+      control: 'radio',
+      options: Object.values(LogoFormat),
+    },
+    inverse: { control: { disable: true } },
   },
   parameters: {
     docs: { toc: true },
@@ -29,23 +38,15 @@ type Story = StoryObj<typeof Logo>;
 
 /** Explore all props via the controls panel. */
 export const Playground: Story = {
-  render: (args) => (
-    <div
-      style={{
-        padding: '2rem',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
-      }}
-    >
-      <Logo {...args} />
-    </div>
-  ),
+  args: {
+    type: 'WISE',
+    format: 'primary-lockup',
+  },
+  render: (args) => <Logo {...args} />,
 };
 
 /**
- * The three logo types: standard Wise, Wise Business, and Wise Platform. <br />
- * `WISE_BUSINESS` renders the same SVG as `WISE` but with the accessible label "Wise Business".
+ * The three logo types: standard Wise, Wise Business, and Wise Platform.
  */
 export const Types: Story = {
   argTypes: {
@@ -59,9 +60,6 @@ export const Types: Story = {
         alignItems: 'center',
         padding: '2rem',
         borderRadius: '8px',
-        ...(args.inverse
-          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
-          : {}),
       }}
     >
       {Object.values(LogoType).map((type) => (
@@ -75,14 +73,6 @@ export const Types: Story = {
           }}
         >
           <Logo {...args} type={type} />
-          <span
-            style={{
-              fontSize: '12px',
-              ...(args.inverse ? { color: 'rgba(255,255,255,0.6)' } : { opacity: 0.6 }),
-            }}
-          >
-            {type}
-          </span>
         </div>
       ))}
     </div>
@@ -99,99 +89,137 @@ export const Types: Story = {
 };
 
 /**
- * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
+ * The `format="primary-lockup"` variant shows the product name inline alongside the wordmark.
  */
-export const Responsive: Story = {
+export const PrimaryLockup: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    format: { table: { disable: true } },
   },
   render: (args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'< 576px (flag only)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <span key={type} className="np-logo" style={{ display: 'inline-block' }}>
-              <style>{`.responsive-sm .np-logo-svg--size-md { display: none !important; } .responsive-sm .np-logo-svg--size-sm { display: block !important; }`}</style>
-              <span className="responsive-sm">
-                <Logo type={type} />
-              </span>
-            </span>
-          ))}
-        </div>
-      </div>
-      <div>
-        <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'\u2265 576px (full wordmark)'}
-        </span>
-        <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
-          {Object.values(LogoType).map((type) => (
-            <Logo key={type} type={type} />
-          ))}
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="primary-lockup" />
+          </div>
         </div>
-      </div>
+      ))}
     </div>
   ),
   parameters: {
     docs: {
-      source: { code: null },
+      source: {
+        code: `<Logo type="WISE" format="primary-lockup" />
+<Logo type="WISE_BUSINESS" format="primary-lockup" />
+<Logo type="WISE_PLATFORM" format="primary-lockup" />`,
+      },
     },
   },
 };
 
 /**
- * All logo types on a dark background using the `inverse` prop, which renders a
- * light-coloured version suited for dark surfaces.
+ * The `format="secondary-lockup"` variant uses a stacked two-line layout with the product name.
  */
-export const Inverse: Story = {
+export const SecondaryLockup: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    inverse: { table: { disable: true } },
+    format: { table: { disable: true } },
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: 'flex',
-          gap: '3rem',
-          alignItems: 'center',
-          backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)',
-          padding: '2rem',
-          borderRadius: '8px',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
   render: (args) => (
-    <>
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="secondary-lockup" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Logo type="WISE" format="secondary-lockup" />
+<Logo type="WISE_BUSINESS" format="secondary-lockup" />
+<Logo type="WISE_PLATFORM" format="secondary-lockup" />`,
+      },
+    },
+  },
+};
+
+/**
+ * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
+ */
+export const Compact: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center', padding: '2rem' }}>
       {Object.values(LogoType).map((type) => (
         <div
           key={type}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '0.5rem',
-          }}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}
         >
-          <Logo type={type} inverse />
-          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
+          <Logo {...args} type={type} format="primary-lockup" display="compact" />
+          <Logo {...args} type={type} format="secondary-lockup" display="compact" />
         </div>
       ))}
-    </>
+    </div>
   ),
   parameters: {
     docs: {
       source: {
-        code: `<Logo type="WISE" inverse />
-<Logo type="WISE_BUSINESS" inverse />
-<Logo type="WISE_PLATFORM" inverse />`,
+        code: `<Logo type=".." format="primary-lockup" display="compact" />
+<Logo type=".." format="secondary-lockup" display="compact" />`,
       },
     },
   },
 };
+
+/**
+ * When `display` is `"full"`, the full wordmark/lockup is rendered regardless of screen width.
+ */
+export const Full: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end', padding: '2rem' }}>
+      {Object.values(LogoType).map((type) => (
+        <div key={type} style={{ display: 'flex', gap: '3rem', alignItems: 'flex-end' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <Logo {...args} type={type} format="primary-lockup" display="full" />
+            <Logo {...args} type={type} format="secondary-lockup" display="full" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  ...withVariantConfig(['mobile'], {
+    parameters: {
+      docs: {
+        source: {
+          code: `<Logo type=".." format="primary-lockup" display="full" />
+<Logo type=".." format="secondary-lockup" display="full" />`,
+        },
+      },
+    },
+  }),
+};

package/src/logo/Logo.test.story.tsx

@@ -17,37 +17,28 @@ const AllVariants = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
     <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
       {Object.values(LogoType).map((type) => (
-        <Logo key={type} type={type} />
-      ))}
-    </div>
-    <div
-      style={{
-        display: 'flex',
-        gap: '2rem',
-        alignItems: 'center',
-        backgroundColor: 'var(--color-content-primary)',
-        padding: '1rem',
-        borderRadius: '8px',
-      }}
-    >
-      {Object.values(LogoType).map((type) => (
-        <Logo key={type} type={type} inverse />
+        <div key={type}>
+          <Logo type={type} className="d-block" format="primary-lockup" />
+          <Logo type={type} className="d-block" format="secondary-lockup" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="compact" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="full" />
+          <Logo type={type} className="d-block" format="primary-lockup" display="responsive" />
+        </div>
       ))}
     </div>
   </div>
 );
 
-export const Variants: Story = {
-  render: () => <AllVariants />,
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
-};
-
-export const RTL: Story = {
+export const Themes: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['rtl']),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+    parameters: {
+      padding: '',
+    },
+  }),
 };
 
-export const Zoom400: Story = {
+export const Responsive: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['400%']),
+  ...withVariantConfig(['mobile']),
 };

package/src/logo/Logo.tsx

@@ -1,28 +1,18 @@
 import { clsx } from 'clsx';
 
 import {
-  LogoWise,
-  LogoWiseInverse,
-  LogoWisePlatform,
-  LogoWisePlatformInverse,
-  LogoFlag,
-  LogoFlagInverse,
-  LogoFlagPlatform,
-  LogoFlagPlatformInverse,
+  WiseLogo,
+  WiseBusinessPrimary,
+  WiseBusinessSecondary,
+  WisePlatformPrimary,
+  WisePlatformSecondary,
+  FastFlag,
+  logoAssetsDimensions,
 } from './logo-assets';
-
-const svgPaths = {
-  WISE: LogoWise,
-  WISE_BUSINESS: LogoWise,
-  WISE_INVERSE: LogoWiseInverse,
-  WISE_BUSINESS_INVERSE: LogoWiseInverse,
-  WISE_PLATFORM: LogoWisePlatform,
-  WISE_PLATFORM_INVERSE: LogoWisePlatformInverse,
-  WISE_FLAG: LogoFlag,
-  WISE_FLAG_INVERSE: LogoFlagInverse,
-  WISE_FLAG_PLATFORM: LogoFlagPlatform,
-  WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
-};
+import type { LogoAssetName } from './logo-assets';
+import { Breakpoint } from '../common';
+import { useScreenSize } from '../common/hooks/useScreenSize';
+import { AriaAttributes } from 'react';
 
 export enum LogoType {
   WISE = 'WISE',
@@ -30,12 +20,25 @@ export enum LogoType {
   WISE_PLATFORM = 'WISE_PLATFORM',
 }
 
+export enum LogoDisplay {
+  RESPONSIVE = 'responsive',
+  COMPACT = 'compact',
+  FULL = 'full',
+}
+
+export enum LogoFormat {
+  DEFAULT = 'default',
+  PRIMARY_LOCKUP = 'primary-lockup',
+  SECONDARY_LOCKUP = 'secondary-lockup',
+}
+
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
   /**
    * Renders a light-coloured version suited for dark backgrounds.
    * @default false
+   * @deprecated dark mode comes out of the box, this property has no effect
    */
   inverse?: boolean;
   /**
@@ -43,6 +46,26 @@ export interface LogoProps {
    * @default 'WISE'
    */
   type?: `${LogoType}`;
+  /**
+   * Controls which logo variant is shown.
+   * - `"responsive"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).
+   * - `"compact"`: always renders the fast-flag mark regardless of screen size.
+   * - `"full"`: always renders the full wordmark/lockup regardless of screen size.
+   * @default 'responsive'
+   */
+  display?: `${LogoDisplay}`;
+  /**
+   * Controls the format of the logo.
+   * - `"default"`: plain Wise wordmark, no product name.
+   * - `"primary-lockup"`: product name shown inline alongside the wordmark.
+   * - `"secondary-lockup"`: stacked (two-line) variant with the product name.
+   * @default 'default'
+   */
+  format?: `${LogoFormat}`;
+  /**
+   * Override default ({@link labelByType}) screen reader messages
+   */
+  'aria-label'?: AriaAttributes['aria-label'];
 }
 
 const labelByType = {
@@ -51,21 +74,60 @@ const labelByType = {
   WISE_PLATFORM: 'Wise Platform',
 } satisfies Record<`${LogoType}`, string>;
 
+const logoAssets: Record<LogoAssetName, () => JSX.Element> = {
+  FastFlag,
+  WiseLogo,
+  WiseBusinessPrimary,
+  WiseBusinessSecondary,
+  WisePlatformPrimary,
+  WisePlatformSecondary,
+};
+
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
  * and the full wordmark on ≥576px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */
-export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
-  const LogoSm =
-    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
-  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+export default function Logo({
+  className,
+  type = 'WISE',
+  format = 'default',
+  display = 'responsive',
+  'aria-label': ariaLabel,
+}: LogoProps) {
+  const isScreenSm = !useScreenSize(Breakpoint.SMALL);
+  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);
+
+  const assetName = compact ? 'FastFlag' : getAssetName(type, format);
+  const Asset = logoAssets[assetName];
+  const { width, height } = logoAssetsDimensions[assetName];
 
   return (
-    <span aria-label={labelByType[type]} role="img" className={clsx(className, 'np-logo')}>
-      <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
-      <LogoMd className="np-logo-svg np-logo-svg--size-md" />
+    <span
+      className={clsx('np-logo', className)}
+      role="img"
+      aria-label={ariaLabel ?? labelByType[type]}
+      style={
+        {
+          '--wds-logo-width': `${width}px`,
+          '--wds-logo-height': `${height}px`,
+        } as React.CSSProperties
+      }
+    >
+      <Asset />
     </span>
   );
 }
+
+function getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {
+  if (format !== 'default') {
+    if (type === 'WISE_BUSINESS') {
+      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';
+    }
+    if (type === 'WISE_PLATFORM') {
+      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';
+    }
+  }
+  return 'WiseLogo';
+}