@transferwise/components 0.0.0-experimental-daa78e3 → 0.0.0-experimental-b18fbc4

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -22,11 +22,11 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>
@@ -139,11 +139,11 @@ exports[`FlowNavigation renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>

package/src/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,6 +1169,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4155,12 +4159,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4176,20 +4174,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/overlayHeader/OverlayHeader.spec.tsx

@@ -1,9 +1,11 @@
 import Avatar, { AvatarType } from '../avatar';
 import { Size } from '../common';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import OverlayHeader from '.';
 
+mockMatchMedia();
+
 describe('OverlayHeader', () => {
   const props = {
     avatar: (

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -19,11 +19,11 @@ exports[`OverlayHeader renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,8 +1,10 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
+mockMatchMedia();
+
 describe('PromoCard', () => {
   const defaultProps = {
     title: 'Test Title',

package/src/radio/Radio.rtl.spec.tsx

@@ -1,8 +1,9 @@
 import Avatar, { AvatarType } from '../avatar';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import Radio from '.';
 
+mockMatchMedia();
 jest.mock('../common/hooks');
 
 describe('Radio', () => {

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -35,11 +35,11 @@ exports[`Radio shows the avatar when supplied 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             HD
           </div>

package/src/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,20 +13,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/statusIcon/StatusIcon.less

@@ -1,8 +1,3 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
-
 .status-circle {
   .light {
     color: var(--color-contrast);
@@ -22,18 +17,6 @@
       }
     }
   }
-
-  &-sm {
-    .status-icon > svg {
-      height: var(--size-14);
-      width: var(--size-14);
-
-      @media (--screen-400-zoom) {
-        width: var(--size-24);
-        height: var(--size-24);
-      }
-    }
-  }
 }
 
 .status-circle.negative,

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,15 +1,12 @@
-import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Sentiment, Size } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon from '.';
+import StatusIcon, { type StatusIconProps } from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
-  const renderStatusIcon = (props?: {
-    sentiment?: Sentiment;
-    size?: SizeLarge | SizeMedium | SizeSmall;
-  }) => {
+  const renderStatusIcon = (props?: StatusIconProps) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
@@ -25,23 +22,8 @@ describe('StatusIcon', () => {
 
     expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
     expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
   });
 
-  it.each([
-    [Size.SMALL as const, 'status-circle-sm'],
-    [Size.MEDIUM as const, 'status-circle-md'],
-    [Size.LARGE as const, 'status-circle-lg'],
-  ])(
-    "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
-    (size, expectedClass) => {
-      renderStatusIcon({ size });
-
-      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
-      cleanup();
-    },
-  );
-
   it.each([
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Size, Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
 
 import StatusIcon from './StatusIcon';
 
@@ -11,22 +11,45 @@ export default {
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Basic: Story = {
-  render: (args) => (
-    <span style={{ display: 'flex' }}>
-      <StatusIcon {...args} />
+export const Variants: Story = {
+  render: () => (
+    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+      {[
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.WARNING,
+        Sentiment.NEUTRAL,
+        Sentiment.PENDING,
+      ].map((sentiment) => {
+        return (
+          <span
+            key={sentiment}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              minHeight: '150px',
+              alignItems: 'center',
+            }}
+          >
+            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
+              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+            })}
+          </span>
+        );
+      })}
     </span>
   ),
 };
 
-export const Variants: Story = {
-  render: () => (
+export const LegacySizes: Story = {
+  render: (args) => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[
         Sentiment.POSITIVE,
         Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
         Sentiment.WARNING,
+        Sentiment.NEUTRAL,
         Sentiment.PENDING,
       ].map((sentiment) => {
         return (

package/src/statusIcon/StatusIcon.tsx

@@ -5,9 +5,14 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '.
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
+/**
+ * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ */
+type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
+
 export type StatusIconProps = {
-  sentiment: `${Sentiment}`;
-  size: SizeSmall | SizeMedium | SizeLarge;
+  sentiment?: `${Sentiment}`;
+  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
 };
 
 const iconTypeMap = {
@@ -27,17 +32,18 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {
+const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size: CircleProps['size'] =
+    typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return (
     <Circle
       as="span"
-      size={size}
+      size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
-      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
+      className={clsx('status-circle', sentiment)}
     >
       <Icon className={clsx('status-icon', iconColor)} />
     </Circle>

package/build/constants.js

@@ -1,15 +0,0 @@
-'use strict';
-
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-const WDS_LIVE_REGION_DELAY_MS = 175;
-
-exports.WDS_LIVE_REGION_DELAY_MS = WDS_LIVE_REGION_DELAY_MS;
-//# sourceMappingURL=constants.js.map

package/build/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":";;AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}

package/build/constants.mjs

@@ -1,13 +0,0 @@
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-const WDS_LIVE_REGION_DELAY_MS = 175;
-
-export { WDS_LIVE_REGION_DELAY_MS };
-//# sourceMappingURL=constants.mjs.map

package/build/constants.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.mjs","sources":["../src/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":"AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}

package/build/types/constants.d.ts

@@ -1,11 +0,0 @@
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-export declare const WDS_LIVE_REGION_DELAY_MS = 175;
-//# sourceMappingURL=constants.d.ts.map

package/build/types/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC"}

package/src/alert/Alert.spec.story.tsx

@@ -1,87 +0,0 @@
-import { useState } from 'react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
-import { Button, Field, SelectInput, Sentiment } from '..';
-import Alert from './Alert';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Feedback/Alert/tests',
-  component: Alert,
-  argTypes: {},
-  args: {
-    type: Sentiment.POSITIVE,
-    active: true,
-    message: 'Payments sent to your bank details today might not arrive in time for the holidays.',
-  },
-} satisfies Meta<typeof Alert>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export const SimpleTrigger: Story = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await wait();
-    await userEvent.tab();
-    await wait();
-    await userEvent.keyboard('{Enter}');
-
-    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
-  },
-  render: function Render(args) {
-    const [isActive, setIsActive] = useState(false);
-
-    return (
-      <>
-        <Button htmlType="button" onClick={() => setIsActive(true)}>
-          Trigger Alert
-        </Button>
-
-        <Alert {...args} active={isActive} className="m-t-4" />
-      </>
-    );
-  },
-};
-
-export const ComplexTrigger: Story = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await wait();
-    await userEvent.tab();
-    await wait();
-    await userEvent.keyboard('{ArrowDown}');
-    await wait();
-    await userEvent.keyboard('{ArrowDown}');
-    await wait();
-    await userEvent.keyboard('{Enter}');
-
-    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
-  },
-  render: function Render(args) {
-    const [isActive, setIsActive] = useState(false);
-    const [value, setValue] = useState<string>();
-
-    return (
-      <>
-        <Field label="Select option to triger Alert">
-          <SelectInput
-            items={[
-              { type: 'option', value: 'one' },
-              { type: 'option', value: 'two' },
-            ]}
-            onChange={setValue}
-            onClose={() => setIsActive(Boolean(value))}
-          />
-        </Field>
-
-        <Alert {...args} active={isActive} className="m-t-2" />
-      </>
-    );
-  },
-};

package/src/constants.ts

@@ -1,11 +0,0 @@
-/**
- * This file holds repository-wide constants that are reusable by more than 1 component.
- */
-
-/**
- * A delay [ms] after which it's OK to update a live region content,
- * taking under consideration delayed programmatic refocusing
- * of triggering components (e.g., SelectInput) and Accessibility
- * Tree updates that prevent the screen reader announcements.
- */
-export const WDS_LIVE_REGION_DELAY_MS = 175;