@transferwise/components 0.0.0-experimental-eec707b → 0.0.0-experimental-dc27730

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/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;

package/src/inlineAlert/{InlineAlert.story.js → InlineAlert.story.tsx}

@@ -1,14 +1,15 @@
 import { select, text } from '@storybook/addon-knobs';
+import { Meta } from '@storybook/react';
 
 import { Sentiment } from '../common';
 import { Input } from '../inputs/Input';
 
-import InlineAlert from './InlineAlert';
+import InlineAlert, { InlineAlertProps } from './InlineAlert';
 
 export default {
   component: InlineAlert,
   title: 'Forms/InlineAlert',
-};
+} as Meta<InlineAlertProps>;
 
 export const Basic = () => {
   const type = select(

package/src/inlineAlert/InlineAlert.tsx

@@ -0,0 +1,59 @@
+import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+import withArrow, { AlertArrowPosition } from '../alert/withArrow';
+import { Sentiment } from '../common';
+import { SentimentString } from '../common/propsValues/sentiment';
+
+export interface InlineAlertProps {
+  id?: string;
+  type?: Sentiment | SentimentString;
+  className?: string;
+  children: ReactNode;
+}
+
+const typeClassMap: Record<Sentiment.ERROR | Sentiment.NEGATIVE, string> = {
+  [Sentiment.ERROR]: 'danger',
+  [Sentiment.NEGATIVE]: 'danger',
+};
+
+const InlineAlert = ({ id, type = Sentiment.NEUTRAL, className, children }: InlineAlertProps) => {
+  const { isModern } = useTheme();
+
+  const typeClass = `alert-${typeClassMap[type as Sentiment.ERROR | Sentiment.NEGATIVE] || type}`;
+
+  if (isModern) {
+    return (
+      <div role="alert" id={id} className={classNames('alert alert-detach', typeClass, className)}>
+        {(type === 'error' || type === 'negative') && <AlertCircleIcon />}
+        <div>{children}</div>
+      </div>
+    );
+  }
+
+  const getAlertContents = ({
+    children,
+    className,
+  }: {
+    children: ReactNode;
+    className?: string;
+  }) => {
+    return (
+      <div
+        role="alert"
+        id={id}
+        className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
+
+  return <AlertWithArrow {...{ id, type, className, children }} />;
+};
+
+export default InlineAlert;

package/src/promoCard/PromoCard.tsx

@@ -326,12 +326,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
         <Body className="np-Card-description">{description}</Body>
         {imageSource && (
           <div className={classNames('np-Card-image', { imageClass })}>
-            <Image
-              src={imageSource}
-              alt={imageAlt}
-              role={!imageAlt ? 'presentation' : null}
-              loading="lazy"
-            />
+            <Image src={imageSource} alt={imageAlt || ''} loading="lazy" />
           </div>
         )}
         <PromoCardIndicator label={indicatorLabel} icon={icon} />

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -31,8 +31,8 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       class="np-Card-image"
     >
       <img
+        alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
-        role="presentation"
         src="https://via.placeholder.com/150"
       />
     </div>
@@ -65,8 +65,8 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       class="np-Card-image"
     >
       <img
+        alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
-        role="presentation"
         src="https://via.placeholder.com/150"
       />
     </div>

package/src/avatarWrapper/AvatarWrapper.spec.js

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

package/src/badge/index.js

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

package/src/image/Image.js

@@ -1,78 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { useRef } from 'react';
-
-import { useHasIntersected } from '../common/hooks';
-
-/**
- * Image component provides a wrapper for image tag. Optional lazy loading functionalities can also be enabled passing prop loading = "lazy.
- * Once element intersects viewport image loads.
- *
- * @param {string} [alt=""] - string that contains the alt text. Required.
- * @param {string} [src=""] - string that contains the src text. Required.
- * @param {string} [id=""] - string that contains the id text.
- * @param {Function} [onLoad=()=>{}] - function that contains load callback. Doesn't fire on SSR https://github.com/facebook/react/issues/15446
- * @param {Function} [onError=()=>{}] - function that contains error callback. Doesn't fire on SSR https://github.com/facebook/react/issues/15446
- * @param {boolean} [loading="lazy"] - This attribute follows the loading API attribute. If set to eager image will load immediately just like a normal image tag otherwise it will lazy load.
- * @usage `<Image alt="alt" src="src" id="id1" onLoad={()=>{}} onError={())=>{}} loading="lazy" />`
- */
-
-export const EmptyTransparentImage =
-  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-
-const Image = ({ id, src, alt, onLoad, onError, className, loading, stretch, role, shrink }) => {
-  const elementReference = useRef();
-  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = null;
-  }
-
-  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}
-    />
-  );
-};
-
-Image.propTypes = {
-  id: PropTypes.string,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  onLoad: PropTypes.func,
-  onError: PropTypes.func,
-  className: PropTypes.string,
-  loading: PropTypes.oneOf(['lazy', 'eager']),
-  stretch: PropTypes.bool,
-  shrink: PropTypes.bool,
-  role: PropTypes.string,
-};
-
-Image.defaultProps = {
-  id: null,
-  className: '',
-  onLoad: () => {},
-  onError: () => {},
-  loading: 'eager',
-  stretch: true,
-  shrink: true,
-};
-
-export default Image;