@transferwise/components 46.77.0 → 46.79.0

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,16 +1,12 @@
 import { Sentiment, Size } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon, { StatusIconProps } from '.';
+import StatusIcon, { type StatusIconProps } from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
-  const renderStatusIcon = (props?: {
-    sentiment?: StatusIconProps['sentiment'];
-    size?: StatusIconProps['size'];
-    iconLabel?: StatusIconProps['iconLabel'];
-  }) => {
+  const renderStatusIcon = (props?: StatusIconProps) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
@@ -27,23 +23,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';
 
@@ -29,6 +29,37 @@ export const Presentational: Story = {
 };
 
 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 LegacySizes: Story = {
   render: () => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[

package/src/statusIcon/StatusIcon.tsx

@@ -8,9 +8,14 @@ import { useMedia } from '../common/hooks/useMedia';
 
 import messages from './StatusIcon.messages';
 
+/**
+ * @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;
   /**
    * Override for the sentiment's-derived, default, accessible
    * name announced by the screen readers. <br />
@@ -25,11 +30,7 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({
-  sentiment = 'neutral',
-  size: sizeProp = 'md',
-  iconLabel,
-}: StatusIconProps) => {
+const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
@@ -77,13 +78,13 @@ const StatusIcon = ({
 
   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 = 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)}

package/src/stepper/{deviceDetection.js → deviceDetection.ts}

@@ -1,12 +1,8 @@
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
-  const documentTouchIsDefined =
-    typeof window !== 'undefined' &&
-    window.DocumentTouch &&
-    document instanceof window.DocumentTouch;
 
-  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
+  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined);
 }
 
 function userAgentSuggestsTouchDevice() {
@@ -21,7 +17,7 @@ function userAgentSuggestsTouchDevice() {
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
   const regex = new RegExp(matchString, 'gi');
-  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
+  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
 // Only use this for small vanity changes where it still works either way.

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.js → logActionRequired.ts}

@@ -1,11 +1,11 @@
-export function logActionRequired(message) {
+export function logActionRequired(message: string) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message, conditional) {
+export function logActionRequiredIf(message: string, conditional: boolean) {
   if (conditional) {
     logActionRequired(message);
   }

package/src/button/legacyUtils/legacyUtils.js

@@ -1,54 +0,0 @@
-import { ControlType, Priority, Size, Type } from '../../common';
-import { logActionRequiredIf } from '../../utilities';
-
-const deprecatedTypeMap = {
-  [Type.PRIMARY]: ControlType.ACCENT,
-  [Type.SECONDARY]: ControlType.ACCENT,
-  [Type.LINK]: ControlType.ACCENT,
-  [Type.PAY]: ControlType.POSITIVE,
-  [Type.DANGER]: ControlType.NEGATIVE,
-};
-
-const oldTypePriorityMap = {
-  [Type.DANGER]: Priority.SECONDARY,
-  [Type.LINK]: Priority.TERTIARY,
-  [Type.SECONDARY]: Priority.SECONDARY,
-};
-
-const deprecatedTypeMapMessage = {
-  [Type.DANGER]: 'Type.NEGATIVE',
-  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',
-  [Type.PAY]: 'ControlType.POSITIVE',
-  [Type.PRIMARY]: 'ControlType.ACCENT',
-  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',
-};
-
-const deprecatedTypes = Object.keys(deprecatedTypeMap);
-
-export const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;
-
-export const establishNewPriority = (originalPriority, originalType) => {
-  const type = establishNewType(originalType);
-
-  // The old SECONDARY and LINK types now map to priorities. If they're still using one of
-  // these old types, ignore whatever priority they've passed and use this instead.
-  if (oldTypePriorityMap[originalType]) {
-    return oldTypePriorityMap[originalType];
-  }
-  // Only ControlType.ACCENT supports tertiary styles
-  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {
-    return Priority.SECONDARY;
-  }
-  return originalPriority;
-};
-
-export const logDeprecationNotices = ({ size, type }) => {
-  logActionRequiredIf(
-    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',
-    size === Size.EXTRA_SMALL,
-  );
-  logActionRequiredIf(
-    `Button has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,
-    deprecatedTypes.includes(type),
-  );
-};