@transferwise/components 0.0.0-experimental-416f4de → 0.0.0-experimental-238cf3d

package/build/types/logo/Logo.d.ts

@@ -1,21 +1,14 @@
-import { AriaAttributes } from 'react';
 export declare enum LogoType {
     WISE = "WISE",
     WISE_BUSINESS = "WISE_BUSINESS",
     WISE_PLATFORM = "WISE_PLATFORM"
 }
-export declare enum LogoDisplay {
-    RESPONSIVE = "responsive",
-    COMPACT = "compact",
-    FULL = "full"
-}
 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;
     /**
@@ -23,28 +16,6 @@ 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}`;
-    /**
-     * Show the product name alongside the Wise wordmark (e.g. "Wise Business", "Wise Platform").
-     * @default false
-     */
-    lockup?: boolean;
-    /**
-     * Use the stacked (two-line) logo variant. Requires `lockup` to be true.
-     * @default false
-     */
-    secondary?: boolean;
-    /**
-     * Override default ({@link labelByType}) screen reader messages
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
 }
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
@@ -52,5 +23,5 @@ export interface LogoProps {
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */
-export default function Logo({ className, type, lockup, secondary, display, 'aria-label': ariaLabel, }: LogoProps): import("react").JSX.Element;
+export default function Logo({ className, inverse, type }: LogoProps): import("react").JSX.Element;
 //# sourceMappingURL=Logo.d.ts.map

package/build/types/logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,oBAAY,WAAW;IACrB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C;AAiBD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAS,EACT,IAAa,EACb,MAAc,EACd,SAAiB,EACjB,OAAsB,EACtB,YAAY,EAAE,SAAS,GACxB,EAAE,SAAS,+BAuBX"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}

package/build/types/logo/logo-assets.d.ts

@@ -1,34 +1,10 @@
-export declare const logoAssetsDimensions: {
-    readonly FastFlag: {
-        readonly width: 22;
-        readonly height: 24;
-    };
-    readonly WiseLogo: {
-        readonly width: 94;
-        readonly height: 24;
-    };
-    readonly WiseBusinessPrimary: {
-        readonly width: 210;
-        readonly height: 24;
-    };
-    readonly WiseBusinessSecondary: {
-        readonly width: 97;
-        readonly height: 46;
-    };
-    readonly WisePlatformPrimary: {
-        readonly width: 205;
-        readonly height: 24;
-    };
-    readonly WisePlatformSecondary: {
-        readonly width: 94;
-        readonly height: 46;
-    };
-};
-export type LogoAssetName = keyof typeof logoAssetsDimensions;
-export declare function FastFlag(): import("react").JSX.Element;
-export declare function WiseLogo(): import("react").JSX.Element;
-export declare function WiseBusinessPrimary(): import("react").JSX.Element;
-export declare function WiseBusinessSecondary(): import("react").JSX.Element;
-export declare function WisePlatformPrimary(): import("react").JSX.Element;
-export declare function WisePlatformSecondary(): import("react").JSX.Element;
+import { CommonProps } from '../common';
+export declare function LogoFlagInverse({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoFlagPlatformInverse({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoFlagPlatform({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoFlag({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoWiseInverse({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoWisePlatformInverse({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoWisePlatform({ className }: CommonProps): import("react").JSX.Element;
+export declare function LogoWise({ className }: CommonProps): import("react").JSX.Element;
 //# sourceMappingURL=logo-assets.d.ts.map

package/build/types/logo/logo-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo-assets.d.ts","sourceRoot":"","sources":["../../../src/logo/logo-assets.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;CAOvB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAO9D,wBAAgB,QAAQ,gCASvB;AAED,wBAAgB,QAAQ,gCASvB;AAED,wBAAgB,mBAAmB,gCASlC;AAED,wBAAgB,qBAAqB,gCASpC;AAED,wBAAgB,mBAAmB,gCASlC;AAED,wBAAgB,qBAAqB,gCASpC"}
+{"version":3,"file":"logo-assets.d.ts","sourceRoot":"","sources":["../../../src/logo/logo-assets.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAezD;AAED,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAejE;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAe1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAelD;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAezD;AAED,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAejE;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAe1D;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,+BAelD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-416f4de",
+  "version": "0.0.0-experimental-238cf3d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/logo/Logo.css

@@ -1,6 +1,26 @@
 .np-logo {
   display: inline-block;
-  color: var(--color-interactive-primary);
-  width: var(--wds-logo-width);
-  height: var(--wds-logo-height);
+}
+.np-theme-personal--forest-green .np-logo-svg path,
+.np-theme-personal--bright-green .np-logo-svg path {
+  fill: var(--color-interactive-primary);
+}
+.np-theme-personal--dark .np-logo-svg path {
+  fill: var(--color-white);
+}
+.np-logo-svg--size-sm {
+  display: block;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-sm {
+    display: none;
+  }
+}
+.np-logo-svg--size-md {
+  display: none;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-md {
+    display: block;
+  }
 }

package/src/logo/Logo.less

@@ -1,6 +1,32 @@
 .np-logo {
   display: inline-block;
-  color: var(--color-interactive-primary);
-  width: var(--wds-logo-width);
-  height: var(--wds-logo-height);
+}
+
+.np-logo-svg {
+  path {
+    .np-theme-personal--forest-green &,
+    .np-theme-personal--bright-green & {
+      fill: var(--color-interactive-primary);
+    }
+
+    .np-theme-personal--dark & {
+      fill: var(--color-white);
+    }
+  }
+  
+  &--size-sm {
+    display: block;
+  
+    @media (--screen-sm) {
+      display: none;
+    }
+  }
+  
+  &--size-md {
+    display: none;
+  
+    @media (--screen-sm) {
+      display: block;
+    }
+  }
 }

package/src/logo/Logo.story.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo, { LogoType, LogoDisplay } from './Logo';
-import { withVariantConfig } from '../../.storybook/helpers';
+import Logo, { LogoType } from '.';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -11,17 +10,13 @@ const meta: Meta<typeof Logo> = {
   title: 'Content/Logo',
   args: {
     type: 'WISE',
-    secondary: false,
+    inverse: false,
   },
   argTypes: {
     type: {
       control: 'radio',
       options: Object.values(LogoType),
     },
-    display: {
-      control: 'radio',
-      options: Object.values(LogoDisplay),
-    },
   },
   parameters: {
     docs: { toc: true },
@@ -34,15 +29,23 @@ type Story = StoryObj<typeof Logo>;
 
 /** Explore all props via the controls panel. */
 export const Playground: Story = {
-  args: {
-    type: 'WISE',
-    lockup: true,
-  },
-  render: (args) => <Logo {...args} />,
+  render: (args) => (
+    <div
+      style={{
+        padding: '2rem',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
+      }}
+    >
+      <Logo {...args} />
+    </div>
+  ),
 };
 
 /**
- * The three logo types: standard Wise, Wise Business, and Wise Platform.
+ * 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".
  */
 export const Types: Story = {
   argTypes: {
@@ -56,6 +59,9 @@ export const Types: Story = {
         alignItems: 'center',
         padding: '2rem',
         borderRadius: '8px',
+        ...(args.inverse
+          ? { backgroundColor: 'var(--color-background-screen-dark, #0e0f0c)' }
+          : {}),
       }}
     >
       {Object.values(LogoType).map((type) => (
@@ -69,6 +75,14 @@ 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>
@@ -85,138 +99,99 @@ export const Types: Story = {
 };
 
 /**
- * The `lockup` prop shows the product name alongside the wordmark.
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
  */
-export const Lockup: Story = {
+export const Responsive: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    lockup: { table: { disable: true } },
+    inverse: { table: { disable: true } },
   },
   render: (args) => (
-    <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} lockup />
-          </div>
+    <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>
+      </div>
     </div>
   ),
   parameters: {
     docs: {
-      source: {
-        code: `<Logo type="WISE" lockup />
-<Logo type="WISE_BUSINESS" lockup />
-<Logo type="WISE_PLATFORM" lockup />`,
-      },
+      source: { code: null },
     },
   },
 };
 
 /**
- * The `secondary` prop (combined with `lockup`) uses a stacked two-line layout.
+ * All logo types on a dark background using the `inverse` prop, which renders a
+ * light-coloured version suited for dark surfaces.
  */
-export const Secondary: Story = {
+export const Inverse: Story = {
   argTypes: {
     type: { table: { disable: true } },
-    lockup: { table: { disable: true } },
-    secondary: { table: { disable: true } },
+    inverse: { 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} lockup secondary />
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `<Logo type="WISE" lockup secondary />
-<Logo type="WISE_BUSINESS" lockup secondary />
-<Logo type="WISE_PLATFORM" lockup secondary />`,
-      },
-    },
-  },
-};
-
-/**
- * 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 {...args} type={type} lockup display="compact" />
-          <Logo {...args} type={type} lockup secondary display="compact" />
+          <Logo type={type} inverse />
+          <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>{type}</span>
         </div>
       ))}
-    </div>
+    </>
   ),
   parameters: {
     docs: {
       source: {
-        code: `<Logo type=".." lockup display="compact" />
-<Logo type=".." lockup secondary display="compact" />`,
+        code: `<Logo type="WISE" inverse />
+<Logo type="WISE_BUSINESS" inverse />
+<Logo type="WISE_PLATFORM" inverse />`,
       },
     },
   },
 };
-
-/**
- * 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} lockup display="full" />
-            <Logo {...args} type={type} lockup secondary display="full" />
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-  ...withVariantConfig(['mobile'], {
-    parameters: {
-      docs: {
-        source: {
-          code: `<Logo type=".." lockup display="compact" />
-<Logo type=".." lockup secondary display="compact" />`,
-        },
-      },
-    },
-  }),
-};

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

@@ -17,13 +17,21 @@ const AllVariants = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
     <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
       {Object.values(LogoType).map((type) => (
-        <div key={type}>
-          <Logo type={type} className="d-block" lockup />
-          <Logo type={type} className="d-block" lockup secondary />
-          <Logo type={type} className="d-block" lockup display="compact" />
-          <Logo type={type} className="d-block" lockup display="full" />
-          <Logo type={type} className="d-block" lockup display="responsive" />
-        </div>
+        <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>
   </div>
@@ -31,14 +39,15 @@ const AllVariants = () => (
 
 export const Variants: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
-    parameters: {
-      padding: '',
-    },
-  }),
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green']),
+};
+
+export const RTL: Story = {
+  render: () => <AllVariants />,
+  ...withVariantConfig(['rtl']),
 };
 
-export const Responsive: Story = {
+export const Zoom400: Story = {
   render: () => <AllVariants />,
-  ...withVariantConfig(['mobile']),
+  ...withVariantConfig(['400%']),
 };