@transferwise/components 46.95.1 → 46.96.0

package/src/alert/Alert.tsx

@@ -9,7 +9,8 @@ import Title from '../title/Title';
 import { logActionRequired } from '../utilities';
 
 import InlineMarkdown from './inlineMarkdown';
-import { Action } from '../common/action/Action';
+import Button from '../button';
+import Link from '../link';
 
 export type AlertAction = {
   'aria-label'?: string;
@@ -193,15 +194,31 @@ export default function Alert({
                 {children || <InlineMarkdown>{message}</InlineMarkdown>}
               </Body>
             </div>
-            {action && (
-              <Action
-                action={action}
-                variant="action-button"
-                className="alert__action"
-                sentiment="default"
-                priority="secondary-neutral"
-              />
-            )}
+            {action &&
+              ('href' in action ? (
+                <Link
+                  href={action.href}
+                  aria-label={action['aria-label']}
+                  target={action.target}
+                  type={Typography.LINK_LARGE}
+                  className="alert__action"
+                  onClick={action.onClick}
+                >
+                  {action.text}
+                </Link>
+              ) : (
+                <Button
+                  v2
+                  size="sm"
+                  sentiment="default"
+                  aria-label={action['aria-label']}
+                  priority="secondary-neutral"
+                  className="alert__action"
+                  onClick={action.onClick}
+                >
+                  {action.text}
+                </Button>
+              ))}
           </div>
         </div>
         {onDismiss && (

package/src/dateLookup/DateLookup.less

@@ -11,7 +11,6 @@
 
   > tbody > tr > td.weekend button {
     color: var(--color-content-secondary);
-    &:extend(.np-text-body-default);
   }
 
   > tbody > tr > td {

package/src/decision/Decision.spec.tsx

@@ -1,10 +1,10 @@
-import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia } from '../mocks';
 import { render, screen } from '../test-utils';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
 import { DecisionProps } from './Decision';
+import AvatarView from '../avatarView';
 
 mockMatchMedia(jest);
 
@@ -13,7 +13,7 @@ describe('Decision', () => {
     options: [
       {
         media: {
-          list: <Avatar type="initials">HM</Avatar>,
+          list: <AvatarView profileName="Henry Mike" />,
           block: <img src="img.jpg" alt="alt" />,
         },
         href: '#href',

package/src/decision/Decision.story.tsx

@@ -2,10 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import { Illustration } from '@wise/art';
 
-import Avatar from '../avatar';
 import { Size } from '../common';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
+import AvatarView from '../avatarView';
 
 export default {
   component: Decision,
@@ -33,11 +33,7 @@ export const Basic = () => {
           disabled,
           media: {
             block: <Illustration name="globe" alt="" disablePadding />,
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -50,11 +46,7 @@ export const Basic = () => {
           href: '#href2',
           media: {
             block: <Illustration name="confetti" alt="" disablePadding />,
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -109,11 +101,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -131,11 +119,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -152,11 +136,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           disabled,
@@ -175,11 +155,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -197,11 +173,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -219,11 +191,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -241,11 +209,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',

package/src/flowNavigation/FlowNavigation.spec.js

@@ -1,5 +1,5 @@
-import Avatar, { AvatarType } from '../avatar';
-import { Breakpoint, Size } from '../common';
+import AvatarView from '../avatarView';
+import { Breakpoint } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';
@@ -22,11 +22,7 @@ describe('FlowNavigation', () => {
   });
 
   const props = {
-    avatar: (
-      <Avatar type={AvatarType.INITIALS} size={Size.MEDIUM}>
-        TM
-      </Avatar>
-    ),
+    avatar: <AvatarView profileName="Tim Mike" />,
     logo: <img alt="logo" src="logo.svg" width="138" height="24" />,
     onClose: jest.fn(),
     steps: [

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

@@ -46,10 +46,12 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>
@@ -162,10 +164,12 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>

package/src/link/Link.css

@@ -1,4 +1,5 @@
-a {
+a,
+button.np-link {
   border-radius: 2px;
 }
 .np-link .tw-icon {

package/src/link/Link.less

@@ -1,7 +1,7 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
-a {
+a, button.np-link {
   border-radius: 2px;
 }
 

package/src/link/Link.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../test-utils';
+import { render, screen, userEvent } from '../test-utils';
 
 import Link from '.';
 
@@ -32,6 +32,37 @@ describe('Link', () => {
     expect(link).toHaveAttribute('rel', 'noreferrer');
   });
 
+  it('renders as link (`a` element) when href and onClick provided', async () => {
+    const href = 'wise.com';
+    const onClick = jest.fn();
+    render(
+      <Link href={href} onClick={onClick}>
+        link text
+      </Link>,
+    );
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    const link = screen.getByText('link text');
+
+    expect(link).toHaveAttribute('href', href);
+    await userEvent.click(link);
+    expect(link.tagName).toBe('A');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders as button element when only onClick provided', async () => {
+    const onClick = jest.fn();
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    render(<Link onClick={onClick}>link text</Link>);
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    const link = screen.getByText('link text');
+
+    await userEvent.click(link);
+    expect(link.tagName).toBe('BUTTON');
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
   it('renders with the provided aria-label', () => {
     render(
       <Link {...props} aria-label="make me accessible">

package/src/link/Link.story.tsx

@@ -24,6 +24,18 @@ export const Basic = () => {
       <Link type={Typography.LINK_LARGE} target="_blank" className="m-t-3" href="#">
         Large link
       </Link>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <Link className="m-t-3" onClick={() => console.log('click link')}>
+        button as Link
+      </Link>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <Link
+        className="m-t-3"
+        type={Typography.LINK_LARGE}
+        onClick={() => console.log('click link')}
+      >
+        button as Link
+      </Link>
       <Title type={Typography.TITLE_SCREEN} className="m-t-3">
         Links via <code>{'<Link />'}</code> component in all types of body copy
       </Title>

package/src/link/Link.tsx

@@ -1,14 +1,15 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import { PrimitiveAnchor } from '../primitives';
-import type { PrimitiveAnchorProps } from '../primitives';
+import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
+import type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';
 
-import { LinkLarge, LinkDefault } from '../common';
+import { LinkLarge, LinkDefault, Typography } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
+export type Props = PrimitiveAnchorProps &
+  Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -20,12 +21,13 @@ const Link = ({
   children,
   href,
   target,
-  type,
+  type = Typography.LINK_DEFAULT,
   'aria-label': ariaLabel,
   onClick,
   ...props
 }: Props) => {
   const { formatMessage } = useIntl();
+  const isButton = Boolean(onClick) && href === undefined;
   const isBlank = target === '_blank';
 
   const classNames = clsx(
@@ -37,7 +39,16 @@ const Link = ({
     className,
   );
 
-  return (
+  return isButton ? (
+    <PrimitiveButton
+      type="button"
+      aria-label={ariaLabel}
+      className={clsx(classNames, 'btn-unstyled', className)}
+      onClick={onClick}
+    >
+      {children}
+    </PrimitiveButton>
+  ) : (
     <PrimitiveAnchor
       href={href}
       target={target}

package/src/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
-}
 @media (min-width: 768px) {
 }
 @media (min-width: 768px) {
@@ -3106,7 +3102,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .tw-instructions .instruction .dont {
   color: var(--color-sentiment-negative);
 }
-a {
+a,
+button.np-link {
   border-radius: 2px;
 }
 .np-link .tw-icon {
@@ -4541,13 +4538,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-.btn-unstyled {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: block;
-}
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -5093,10 +5083,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
 }
 .np-summary + .np-summary {
   margin-top: 24px;

package/src/navigationOption/NavigationOption.story.tsx

@@ -7,10 +7,11 @@ import {
   PlusCircle,
   Profile,
   UpwardGraph as UpwardGraphIcon,
+  FastFlag,
 } from '@transferwise/icons';
 import { Illustration, Assets, Flag } from '@wise/art';
 
-import { Badge, Nudge, Avatar, Header, Title, Typography } from '..';
+import { Nudge, Header, Title, Typography, AvatarView } from '..';
 
 import NavigationOption from './NavigationOption';
 
@@ -85,11 +86,9 @@ export const Variants = () => (
       <Template
         showMediaCircle={false}
         media={
-          <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
-            <Avatar type="icon">
-              <Profile size="24" />
-            </Avatar>
-          </Badge>
+          <AvatarView badge={{ type: 'reference' }}>
+            <Profile />
+          </AvatarView>
         }
       />
     </div>
@@ -98,20 +97,13 @@ export const Variants = () => (
       <Template
         showMediaCircle={false}
         media={
-          <Badge
-            badge={
-              <img
-                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                alt=""
-                height="24px"
-                width="24px"
-              />
-            }
-          >
-            <Avatar type="initials" size="md">
-              <span aria-hidden>SP</span>
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{
+              icon: <FastFlag />,
+              type: 'action',
+            }}
+            profileName="Spencer Penn"
+          />
         }
       />
     </div>
@@ -125,20 +117,13 @@ export const Variants = () => (
       <Template
         showMediaCircle
         media={
-          <Badge
-            badge={
-              <img
-                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                alt=""
-                height="24px"
-                width="24px"
-              />
-            }
-          >
-            <Avatar type="initials" size="md">
-              <span aria-hidden>SP</span>
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{
+              icon: <FastFlag />,
+              type: 'action',
+            }}
+            profileName="Spencer Penn"
+          />
         }
       />
     </div>
@@ -222,9 +207,9 @@ export const BalanceContent = () => (
     content="British pound"
     showMediaCircle={false}
     media={
-      <Avatar type="icon">
+      <AvatarView>
         <Flag code="GBP" />
-      </Avatar>
+      </AvatarView>
     }
   />
 );
@@ -234,11 +219,9 @@ export const NewContactContent = () => (
     title="New Contact"
     showMediaCircle={false}
     media={
-      <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
-        <Avatar type="icon">
-          <Profile size="24" />
-        </Avatar>
-      </Badge>
+      <AvatarView badge={{ type: 'reference' }}>
+        <Profile size="24" />
+      </AvatarView>
     }
   />
 );
@@ -248,13 +231,7 @@ export const ExistingContactContent = () => (
     title="Wise Customer"
     content="EUR account ending in 1111"
     showMediaCircle={false}
-    media={
-      <Badge badge={<Flag code="EUR" />}>
-        <Avatar type="initials" size="md">
-          <span aria-hidden>WS</span>
-        </Avatar>
-      </Badge>
-    }
+    media={<AvatarView profileName="Walter Smith" badge={{ flagCode: 'EUR' }} />}
   />
 );
 
@@ -280,9 +257,9 @@ export const ManageAccountContent = () => (
       content="View and share your account details to get paid."
       showMediaCircle={false}
       media={
-        <Avatar type="icon">
-          <BankIcon size={24} />
-        </Avatar>
+        <AvatarView>
+          <BankIcon />
+        </AvatarView>
       }
     />
     <NavigationOptionTemplate
@@ -290,9 +267,9 @@ export const ManageAccountContent = () => (
       content="Convert money between your balances at your desired exchange rate."
       showMediaCircle={false}
       media={
-        <Avatar type="icon">
+        <AvatarView>
           <UpwardGraphIcon size={24} />
-        </Avatar>
+        </AvatarView>
       }
     />
   </>

package/src/nudge/Nudge.tsx

@@ -6,7 +6,7 @@ import Body from '../body';
 import { Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
 import Link from '../link';
-import { Action, ActionOptions } from '../common/action/Action';
+import type { AlertAction } from '../alert';
 
 // WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
 export const STORAGE_NAME = 'dismissedNudges';
@@ -52,7 +52,7 @@ type BaseProps = {
   /** Fired when the user clicks on close button */
   onDismiss?: () => void;
   /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
-  action?: ActionOptions;
+  action?: AlertAction;
   className?: string;
 };
 
@@ -151,6 +151,7 @@ const Nudge = ({
           <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
             {title}
           </Body>
+          {/* Merge these two Link instances into one */}
           {link && (
             <Link
               href={href}
@@ -161,7 +162,18 @@ const Nudge = ({
               {link}
             </Link>
           )}
-          {action && <Action action={action} className="m-t-1" />}
+          {action && (
+            <Link
+              href={action.href}
+              target={action.target}
+              className="m-t-1"
+              aria-label={action['aria-label']}
+              type={Typography.LINK_LARGE}
+              onClick={action.onClick}
+            >
+              {action.text}
+            </Link>
+          )}
         </div>
         {onDismiss || persistDismissal ? (
           <CloseButton className="wds-nudge-control" size="sm" onClick={handleOnDismiss} />

package/src/overlayHeader/OverlayHeader.spec.tsx

@@ -1,16 +1,13 @@
-import Avatar, { AvatarType } from '../avatar';
-import { Size } from '../common';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import OverlayHeader from '.';
+import AvatarView from '../avatarView';
+
+mockMatchMedia();
 
 describe('OverlayHeader', () => {
   const props = {
-    avatar: (
-      <Avatar type={AvatarType.INITIALS} size={Size.MEDIUM}>
-        TM
-      </Avatar>
-    ),
+    avatar: <AvatarView profileName="Tim Morris" />,
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };

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

@@ -18,10 +18,12 @@ exports[`OverlayHeader renders as expected 1`] = `
         class="d-flex align-items-center order-2"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>