@transferwise/components 45.13.0 → 45.14.1

package/src/avatarWrapper/AvatarWrapper.spec.tsx

@@ -0,0 +1,105 @@
+import { BadgeProps } from '../badge';
+import { Sentiment } from '../common';
+import { Size, ProfileType } from '../common';
+import { render, screen } from '../test-utils';
+
+import AvatarWrapper from '.';
+
+const name = 'Elizabeth Alexandra Mary Windsor';
+
+describe('FlowNavigationAvatar', () => {
+  describe('with a name', () => {
+    it('shows the initials for a long name', () => {
+      render(<AvatarWrapper name={name} />);
+
+      expect(screen.getByText('EW')).toBeInTheDocument();
+    });
+
+    it('shows the first letter for a mononym', () => {
+      render(<AvatarWrapper name="Zichaleangeol" />);
+
+      expect(screen.getByText('Z')).toBeInTheDocument();
+    });
+
+    describe('AND profileType', () => {
+      describe('FlowNavigationAvatar', () => {
+        describe('with a name', () => {
+          it('shows the initials for a long name', () => {
+            render(<AvatarWrapper name={name} />);
+
+            expect(screen.getByText('EW')).toBeInTheDocument();
+          });
+
+          it('shows the first letter for a mononym', () => {
+            render(<AvatarWrapper name="Michelangelo" />);
+
+            expect(screen.getByText('M')).toBeInTheDocument();
+          });
+
+          describe('AND profileType', () => {
+            it('renders as BUSINESS profile type with an icon', () => {
+              const { container } = render(
+                <AvatarWrapper name={name} profileType={ProfileType.BUSINESS} />,
+              );
+
+              expect(container.firstChild).toMatchSnapshot();
+            });
+
+            it('renders as PERSONAL profile type with an icon', () => {
+              const { container } = render(
+                <AvatarWrapper name={name} profileType={ProfileType.PERSONAL} />,
+              );
+
+              expect(container.firstChild).toMatchSnapshot();
+            });
+
+            describe('AND avatar url', () => {
+              it('renders the image', () => {
+                const { container } = render(
+                  <AvatarWrapper
+                    url="https://wise.com"
+                    name={name}
+                    profileType={ProfileType.BUSINESS}
+                    avatarProps={{ theme: 'dark' }}
+                  />,
+                );
+
+                expect(container.firstChild).toMatchSnapshot();
+              });
+            });
+          });
+        });
+      });
+
+      describe('with nothing passed', () => {
+        it('renders a personal icon', () => {
+          const { container } = render(<AvatarWrapper />);
+
+          expect(container.firstChild).toMatchSnapshot();
+        });
+      });
+
+      describe('with a badge url passed', () => {
+        it('renders the badge', () => {
+          const { container } = render(
+            <AvatarWrapper
+              badgeUrl="https://badge.com"
+              badgeAltText="badge alt text"
+              badgeProps={{ size: Size.LARGE } as BadgeProps}
+            />,
+          );
+
+          expect(container.firstChild).toMatchSnapshot();
+        });
+      });
+
+      describe('with a badge status icon passed', () => {
+        it('renders the badge', () => {
+          const { container } = render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);
+
+          expect(container.firstChild).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -9,50 +9,10 @@ import AvatarWrapper from './AvatarWrapper';
 export default {
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper',
-  argTypes: {
-    profileType: {
-      type: {
-        name: 'enum',
-        value: Object.keys(ProfileType),
-      },
-    },
-    badgeStatusIcon: {
-      type: {
-        name: 'enum',
-        value: [
-          Sentiment.POSITIVE,
-          Sentiment.NEGATIVE,
-          Sentiment.NEUTRAL,
-          Sentiment.WARNING,
-          Sentiment.PENDING,
-        ],
-      },
-    },
-  },
-  tags: ['autodocs'],
 } satisfies Meta<typeof AvatarWrapper>;
 
 type Story = StoryObj<typeof AvatarWrapper>;
 
-export const WithBadgeUrl: Story = {
-  args: {
-    badgeUrl: 'https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg',
-    avatarProps: {
-      outlined: true,
-    },
-  },
-};
-
-export const WithBadgeStatus: Story = {
-  args: {
-    profileType: ProfileType.BUSINESS,
-    badgeStatusIcon: Sentiment.PENDING,
-    avatarProps: {
-      outlined: false,
-    },
-  },
-};
-
 export const All: Story = {
   args: {
     avatarProps: { outlined: true },
@@ -85,7 +45,7 @@ export const All: Story = {
           </div>
           Initials
           <div>
-            <AvatarWrapper name="A A" avatarProps={avatarProps} />
+            <AvatarWrapper name="Any Aname" avatarProps={avatarProps} />
           </div>
           Default
           <div>

package/src/avatarWrapper/{AvatarWrapper.js → AvatarWrapper.tsx}

@@ -1,13 +1,19 @@
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
-import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
-import Badge from '../badge';
-import { ProfileType, Size, Sentiment } from '../common';
+import Avatar, { AvatarProps, AvatarType } from '../avatar';
+import Badge, { BadgeProps } from '../badge';
+import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
-const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }) => {
+interface OptionalBadgeProps {
+  url?: string;
+  altText?: string;
+  statusIcon?: Sentiment;
+  children: React.ReactNode;
+}
+
+const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
   if (url) {
     return (
       <Badge badge={<img src={url} alt={altText} />} {...rest}>
@@ -22,27 +28,20 @@ const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }) => {
       </Badge>
     );
   }
-  return children;
+  return <>{children}</>;
 };
 
-OptionalBadge.propTypes = {
-  url: PropTypes.string,
-  altText: PropTypes.string,
-  statusIcon: PropTypes.oneOf([
-    Sentiment.POSITIVE,
-    Sentiment.NEGATIVE,
-    Sentiment.NEUTRAL,
-    Sentiment.WARNING,
-    Sentiment.PENDING,
-  ]),
-  children: PropTypes.node.isRequired,
-};
-
-OptionalBadge.defaultProps = {
-  url: undefined,
-  altText: undefined,
-  statusIcon: undefined,
-};
+export interface AvatarWrapperProps {
+  url?: string;
+  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
+  profileId?: string;
+  badgeUrl?: string;
+  badgeAltText?: string;
+  badgeStatusIcon?: Sentiment;
+  name?: string;
+  avatarProps?: AvatarProps;
+  badgeProps?: BadgeProps;
+}
 
 const AvatarWrapper = ({
   url,
@@ -54,7 +53,7 @@ const AvatarWrapper = ({
   name,
   avatarProps,
   badgeProps,
-}) => {
+}: AvatarWrapperProps) => {
   const [hasImageLoadError, setImageLoadError] = useState(false);
   const isBusinessProfile = profileType === ProfileType.BUSINESS;
 
@@ -103,7 +102,7 @@ const AvatarWrapper = ({
   );
 };
 
-function getInitials(name) {
+function getInitials(name: string) {
   const allInitials = name
     .split(' ')
     .map((part) => part[0])
@@ -117,34 +116,4 @@ function getInitials(name) {
   return allInitials[0] + allInitials.slice(-1);
 }
 
-AvatarWrapper.defaultProps = {
-  url: undefined,
-  profileType: undefined,
-  profileId: undefined,
-  badgeUrl: undefined,
-  badgeAltText: undefined,
-  badgeStatusIcon: undefined,
-  name: undefined,
-  avatarProps: {},
-  badgeProps: {},
-};
-
-AvatarWrapper.propTypes = {
-  url: PropTypes.string,
-  profileType: PropTypes.oneOf([ProfileType.PERSONAL, ProfileType.BUSINESS]),
-  profileId: PropTypes.number,
-  badgeUrl: PropTypes.string,
-  badgeAltText: PropTypes.string,
-  badgeStatusIcon: PropTypes.oneOf([
-    Sentiment.POSITIVE,
-    Sentiment.NEGATIVE,
-    Sentiment.NEUTRAL,
-    Sentiment.WARNING,
-    Sentiment.PENDING,
-  ]),
-  name: PropTypes.string,
-  avatarProps: PropTypes.shape({}),
-  badgeProps: PropTypes.shape({}),
-};
-
 export default AvatarWrapper;

package/src/avatarWrapper/__snapshots__/{AvatarWrapper.spec.js.snap → AvatarWrapper.spec.tsx.snap}

@@ -1,6 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FlowNavigationAvatar with a badge status icon passed renders the badge 1`] = `
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <img
+      alt="avatar"
+      src="https://wise.com"
+    />
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-briefcase "
+      data-testid="briefcase-icon"
+      role="presentation"
+    >
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M21.428 6.429H18V3.857A.86.86 0 0 0 17.143 3H6.857A.86.86 0 0 0 6 3.857V6.43H2.571a.86.86 0 0 0-.857.857v12.857a.86.86 0 0 0 .857.857h18.857a.86.86 0 0 0 .858-.857V7.286a.86.86 0 0 0-.858-.857ZM7.714 4.714h8.572V6.43H7.714V4.714Zm8.572 3.429v11.143H7.714V8.143h8.572Zm-12.857 0H6v11.143H3.429V8.143ZM20.57 19.286H18V8.143h2.571v11.143Z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
+<div
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
+>
+  <div
+    class="tw-avatar__content"
+  >
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-person "
+      data-testid="person-icon"
+      role="presentation"
+    >
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FlowNavigationAvatar with a name AND profileType with a badge status icon passed renders the badge 1`] = `
 <div
   class="tw-badge tw-badge-border-light tw-badge-sm"
 >
@@ -64,7 +137,7 @@ exports[`FlowNavigationAvatar with a badge status icon passed renders the badge
 </div>
 `;
 
-exports[`FlowNavigationAvatar with a badge url passed renders the badge 1`] = `
+exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
 <div
   class="tw-badge tw-badge-border-light tw-badge-lg"
 >
@@ -109,80 +182,7 @@ exports[`FlowNavigationAvatar with a badge url passed renders the badge 1`] = `
 </div>
 `;
 
-exports[`FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <img
-      alt="avatar"
-      src="https://wise.com"
-    />
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      aria-hidden="true"
-      class="tw-icon tw-icon-briefcase "
-      data-testid="briefcase-icon"
-      role="presentation"
-    >
-      <svg
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M21.428 6.429H18V3.857A.86.86 0 0 0 17.143 3H6.857A.86.86 0 0 0 6 3.857V6.43H2.571a.86.86 0 0 0-.857.857v12.857a.86.86 0 0 0 .857.857h18.857a.86.86 0 0 0 .858-.857V7.286a.86.86 0 0 0-.858-.857ZM7.714 4.714h8.572V6.43H7.714V4.714Zm8.572 3.429v11.143H7.714V8.143h8.572Zm-12.857 0H6v11.143H3.429V8.143ZM20.57 19.286H18V8.143h2.571v11.143Z"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      aria-hidden="true"
-      class="tw-icon tw-icon-person "
-      data-testid="person-icon"
-      role="presentation"
-    >
-      <svg
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with nothing passed renders a personal icon 1`] = `
+exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
 <div
   class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >

package/src/badge/Badge.tsx

@@ -12,7 +12,7 @@ import {
   CommonProps,
 } from '../common';
 
-type Props = {
+export type BadgeProps = {
   badge: ReactNode;
   children: ReactNode;
   size?: SizeSmall | SizeMedium | SizeLarge;
@@ -25,7 +25,7 @@ const Badge = ({
   size = Size.SMALL,
   border = Theme.LIGHT,
   children,
-}: Props): ReactElement => {
+}: BadgeProps): ReactElement => {
   const classes: string = classNames(
     'tw-badge',
     {

package/src/badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';

package/src/common/hooks/useEffectEvent.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/*
+ * Inspired by:
+ *
+ * - https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * - https://legacy.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+
+export function useEffectEvent<A extends unknown[], R>(
+  callback: (...args: A) => R,
+): typeof callback {
+  const ref = useRef<typeof callback>(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+
+  useEffect(() => {
+    ref.current = callback;
+  });
+
+  return useCallback((...args) => ref.current(...args), []);
+}

package/src/common/hooks/useResizeObserver.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useEffectEvent } from './useEffectEvent';
+
+export function useResizeObserver(
+  ref: React.RefObject<Element>,
+  callback: (entry: ResizeObserverEntry) => void,
+) {
+  const handleCallback = useEffectEvent(callback);
+  useEffect(() => {
+    if (ref.current != null) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        handleCallback(entry);
+      });
+      resizeObserver.observe(ref.current, { box: 'border-box' });
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [handleCallback, ref]);
+}

package/src/common/index.js

@@ -16,7 +16,7 @@ export * from './propsValues/position';
 export { Layout } from './propsValues/layouts';
 export * from './propsValues/status';
 export { Sentiment } from './propsValues/sentiment';
-export { ProfileType } from './propsValues/profileType';
+export * from './propsValues/profileType';
 export { Variant } from './propsValues/variant';
 export * from './propsValues/scroll';
 export { MarkdownNodeType } from './propsValues/markdownNodeType';

package/src/common/propsValues/profileType.ts

@@ -2,3 +2,6 @@ export enum ProfileType {
   BUSINESS = 'BUSINESS',
   PERSONAL = 'PERSONAL',
 }
+
+export type ProfileTypeBusiness = 'BUSINESS';
+export type ProfileTypePersonal = 'PERSONAL';

package/src/common/propsValues/sentiment.ts

@@ -18,3 +18,13 @@ export enum Sentiment {
    */
   SUCCESS = 'success',
 }
+
+export type SentimentString =
+  | 'negative'
+  | 'neutral'
+  | 'positive'
+  | 'warning'
+  | 'pending'
+  | 'info'
+  | 'error'
+  | 'success';

package/src/image/{Image.spec.js → Image.spec.tsx}

@@ -2,11 +2,11 @@ import '@testing-library/jest-dom';
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 
-import { EmptyTransparentImage } from './Image';
+import { EmptyTransparentImage, ImageProps } from './Image';
 
 import Image from '.';
 
-const props = {
+const props: ImageProps = {
   id: 'id',
   src: 'https://www.a-valid-src.png/',
   alt: 'test',
@@ -23,7 +23,7 @@ describe('Image', () => {
     it(`renders image`, () => {
       render(<Image {...props} loading="eager" />);
 
-      const image = screen.getByRole('img');
+      const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
       expect(image.src).toStrictEqual(props.src);
@@ -37,7 +37,7 @@ describe('Image', () => {
       jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
       render(<Image {...props} />);
 
-      const image = screen.getByRole('img');
+      const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
       expect(image.src).toStrictEqual(EmptyTransparentImage);
@@ -48,7 +48,7 @@ describe('Image', () => {
 
       render(<Image {...props} />);
 
-      const image = screen.getByRole('img');
+      const image: HTMLImageElement = screen.getByRole('img');
 
       expect(image).toBeInTheDocument();
       expect(image.src).toStrictEqual(props.src);

package/src/image/{Image.story.js → Image.story.tsx}

@@ -33,7 +33,7 @@ export const Basic = () => {
         shrink={shrink}
         stretch={stretch}
         onLoad={action('load 1')}
-        onError={(error) => action(error)}
+        onError={action('error')}
       />
       <Image
         alt="test"
@@ -44,7 +44,7 @@ export const Basic = () => {
         shrink={shrink}
         stretch={stretch}
         onLoad={action('load 2')}
-        onError={(error) => action(error)}
+        onError={action('error')}
       />
       <Image
         alt="test"
@@ -55,7 +55,7 @@ export const Basic = () => {
         shrink={shrink}
         stretch={stretch}
         onLoad={action('load 3')}
-        onError={(error) => action(error)}
+        onError={action('error')}
       />
     </>
   );

package/src/image/Image.tsx

@@ -0,0 +1,65 @@
+import classnames from 'classnames';
+import { useRef } from 'react';
+
+import { useHasIntersected } from '../common/hooks';
+
+export interface ImageProps {
+  alt: string;
+  src: string;
+  id?: string;
+  onLoad?: () => void;
+  onError?: () => void;
+  className?: string;
+  loading?: 'lazy' | 'eager';
+  stretch?: boolean;
+  role?: string;
+  shrink?: boolean;
+}
+
+export const EmptyTransparentImage =
+  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+const Image = ({
+  id,
+  src,
+  alt,
+  onLoad,
+  onError,
+  className,
+  loading,
+  stretch = true,
+  role,
+  shrink = true,
+}: ImageProps) => {
+  const elementReference = useRef<HTMLImageElement>(null);
+  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
+
+  return (
+    <img
+      ref={elementReference}
+      id={id}
+      alt={alt}
+      src={imageSource}
+      className={classnames([
+        'tw-image',
+        {
+          'tw-image__stretch': stretch,
+          'tw-image__shrink': shrink,
+        },
+        className,
+      ])}
+      role={role}
+      onLoad={imageOnLoad}
+      onError={onError}
+    />
+  );
+};
+
+export default Image;