@transferwise/components 0.0.0-experimental-92c557b → 0.0.0-experimental-97a6be6

package/src/logo/Logo.story.tsx

@@ -1,9 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType, LogoDisplay, LogoFormat } from './Logo';
-import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
-import Body from '../body';
 
 /**
  * **Design guidance**: <a href="https://wise.design/foundations/logo" target="_blank">wise.design/foundations/logo</a>
@@ -27,10 +25,6 @@ const meta: Meta<typeof Logo> = {
       control: 'radio',
       options: Object.values(LogoFormat),
     },
-    size: {
-      control: 'radio',
-      options: [16, 18, 20, 24, 28, 36] satisfies LogoSize[],
-    },
     inverse: { control: { disable: true } },
   },
   parameters: {
@@ -168,40 +162,6 @@ export const SecondaryLockup: Story = {
   },
 };
 
-/**
- * Controls the height and width of the logo in pixels.
- */
-export const Sizes: Story = {
-  argTypes: {
-    size: { table: { disable: true } },
-  },
-  render: (args) => (
-    <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end', padding: '2rem' }}>
-      {([16, 18, 20, 24, 28, 36] as const).map((size) => (
-        <div
-          key={size}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '0.5rem',
-          }}
-        >
-          <Logo {...args} size={size} />
-          <Body>{size}</Body>
-        </div>
-      ))}
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `<Logo size={..} />`,
-      },
-    },
-  },
-};
-
 /**
  * When `display` is `"compact"`, only the fast-flag mark is rendered regardless of type or other settings.
  */

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

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import Logo, { LogoType } from '.';
-import { LogoFormat } from './Logo';
-import type { LogoSize } from './Logo';
 import { withVariantConfig } from '../../.storybook/helpers';
-import Body from '../body';
 
 const meta: Meta<typeof Logo> = {
   component: Logo,
@@ -45,51 +42,3 @@ export const Responsive: Story = {
   render: () => <AllVariants />,
   ...withVariantConfig(['mobile']),
 };
-
-const sizes: LogoSize[] = [16, 18, 20, 24, 28, 36];
-
-export const Sizes = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-    {(['compact', 'full'] as const).map((display) => (
-      <div key={display} style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}>
-        {sizes.map((size) => (
-          <div
-            key={size}
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: '0.5rem',
-            }}
-          >
-            <Logo type="WISE" size={size} display={display} />
-            <Body>{size}</Body>
-          </div>
-        ))}
-      </div>
-    ))}
-    {[LogoType.WISE_BUSINESS, LogoType.WISE_PLATFORM].map((type) =>
-      [LogoFormat.PRIMARY_LOCKUP, LogoFormat.SECONDARY_LOCKUP].map((format) => (
-        <div
-          key={`${type}-${format}`}
-          style={{ display: 'flex', gap: '2rem', alignItems: 'flex-end' }}
-        >
-          {sizes.map((size) => (
-            <div
-              key={size}
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '0.5rem',
-              }}
-            >
-              <Logo type={type} format={format} size={size} display="full" />
-              <Body>{size}</Body>
-            </div>
-          ))}
-        </div>
-      )),
-    )}
-  </div>
-);

package/src/logo/Logo.tsx

@@ -32,8 +32,6 @@ export enum LogoFormat {
   SECONDARY_LOCKUP = 'secondary-lockup',
 }
 
-export type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';
-
 export interface LogoProps {
   /** Extra classes applied to Logo */
   className?: string;
@@ -64,11 +62,6 @@ export interface LogoProps {
    * @default 'default'
    */
   format?: `${LogoFormat}`;
-  /**
-   * Controls the height and width of the logo in pixels.
-   * @default 24
-   */
-  size?: LogoSize;
   /**
    * Override default ({@link labelByType}) screen reader messages
    */
@@ -101,7 +94,6 @@ export default function Logo({
   type = 'WISE',
   format = 'default',
   display = 'responsive',
-  size = 24,
   'aria-label': ariaLabel,
 }: LogoProps) {
   const isScreenSm = !useScreenSize(Breakpoint.SMALL);
@@ -109,9 +101,7 @@ export default function Logo({
 
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];
-  const sizes = logoAssetsDimensions[assetName];
-  const { width, height } =
-    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];
+  const { width, height } = logoAssetsDimensions[assetName];
 
   return (
     <span

package/src/logo/logo-assets.tsx

@@ -1,64 +1,17 @@
 export const logoAssetsDimensions = {
-  FastFlag: {
-    16: { width: 16, height: 16 },
-    18: { width: 18, height: 18 },
-    20: { width: 20, height: 20 },
-    24: { width: 24, height: 24 },
-    28: { width: 28, height: 28 },
-    36: { width: 36, height: 36 },
-  },
-  WiseLogo: {
-    16: { width: 64, height: 16 },
-    18: { width: 72, height: 18 },
-    20: { width: 80, height: 20 },
-    24: { width: 96, height: 24 },
-    28: { width: 112, height: 28 },
-    36: { width: 144, height: 36 },
-  },
-  WiseBusinessPrimary: {
-    16: { width: 140, height: 16 },
-    18: { width: 157.5, height: 18 },
-    20: { width: 175, height: 20 },
-    24: { width: 210, height: 24 },
-    28: { width: 245, height: 28 },
-    36: { width: 315, height: 36 },
-  },
-  WiseBusinessSecondary: {
-    16: { width: 68, height: 32 },
-    18: { width: 76.5, height: 36 },
-    20: { width: 85, height: 40 },
-    24: { width: 102, height: 48 },
-    28: { width: 119, height: 56 },
-    36: { width: 153, height: 72 },
-  },
-  WisePlatformPrimary: {
-    16: { width: 136, height: 16 },
-    18: { width: 153, height: 18 },
-    20: { width: 170, height: 20 },
-    24: { width: 204, height: 24 },
-    28: { width: 238, height: 28 },
-    36: { width: 306, height: 36 },
-  },
-  WisePlatformSecondary: {
-    16: { width: 64, height: 32 },
-    18: { width: 72, height: 36 },
-    20: { width: 80, height: 40 },
-    24: { width: 96, height: 48 },
-    28: { width: 112, height: 56 },
-    36: { width: 144, height: 72 },
-  },
+  FastFlag: { width: 22, height: 24 },
+  WiseLogo: { width: 94, height: 24 },
+  WiseBusinessPrimary: { width: 210, height: 24 },
+  WiseBusinessSecondary: { width: 97, height: 46 },
+  WisePlatformPrimary: { width: 205, height: 24 },
+  WisePlatformSecondary: { width: 94, height: 46 },
 } as const;
 
 export type LogoAssetName = keyof typeof logoAssetsDimensions;
 
 function svgProps(name: LogoAssetName) {
-  const { width, height } = logoAssetsDimensions[name][24];
-  return {
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: '100%',
-    height: '100%',
-    viewBox: `0 0 ${width} ${height}`,
-  };
+  const { width, height } = logoAssetsDimensions[name];
+  return { xmlns: 'http://www.w3.org/2000/svg', width, height, viewBox: `0 0 ${width} ${height}` };
 }
 
 export function FastFlag() {

package/src/main.css

@@ -29481,8 +29481,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-4) var(--size-12);
 }
 
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
-.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not( :has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
   margin-top: -2px;
 }
 
@@ -29490,8 +29490,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
-    display: grid;
-    align-items: center;
   }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;

package/src/ssr.test.tsx

@@ -183,7 +183,6 @@ describe('Server side rendering', () => {
 
   // Override props in case of name collision.
   const overrideProps: Partial<Record<keyof ExposedLibraryItemsType, Record<string, unknown>>> = {
-    Logo: { size: 16 },
     ActionPrompt: { action: { label: 'Action', onClick: jest.fn(), href: '#' } },
     Alert: { children: undefined, message: 'Fluffy kittens', size: undefined },
     Card: { isExpanded: true },