@transferwise/components 46.80.0 → 46.81.0

package/src/listItem/ListItem.story.tsx

@@ -1,15 +1,13 @@
 /* eslint-disable react/jsx-child-element-spacing */
 
 import { action } from '@storybook/addon-actions';
-import { Documents } from '@transferwise/icons';
+import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
 import ActionButton from '../actionButton/ActionButton';
-import Avatar from '../avatar';
-import Badge from '../badge';
+import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-
 import ListItem, { List } from '.';
 
 export default {
@@ -40,17 +38,7 @@ export const Variants = () => {
       <div className="m-t-4 m-b-2">
         <Title type="title-body">With Icon Avatar</Title>
         <List>
-          <Template
-            media={
-              <Avatar>
-                <img
-                  style={{ width: 32, height: 32 }}
-                  src="https://wise.com/public-resources/assets/balances/savings-emoji/google/✈️.png"
-                  alt=""
-                />
-              </Avatar>
-            }
-          />
+          <Template media={<AvatarView imgSrc="../tapestry-01.png" />} />
         </List>
       </div>
       <div className="m-t-4 m-b-2">
@@ -59,22 +47,7 @@ export const Variants = () => {
           <Template
             title="Sandra Pepper"
             value="Personal account"
-            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>
-            }
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
           />
         </List>
       </div>
@@ -84,22 +57,7 @@ export const Variants = () => {
           <Template
             title="Account holder"
             value="Sandra Pepper"
-            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>
-            }
+            media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
             action={<ActionButton>Share details</ActionButton>}
           />
         </List>

package/src/main.css

@@ -469,6 +469,42 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.np-notification-dot {
+  --np-notification-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-notification-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+}
+.np-notification-dot-badge {
+  position: absolute;
+  width: var(--np-notification-dot-size);
+  height: var(--np-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-avatar-view .np-avatar-view-content {
+  color: var(--color-interactive-primary);
+}
+.np-avatar-view-interactive {
+  cursor: pointer;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-avatar-view-non-interactive .np-circle {
+  background-color: transparent;
+}
+.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
+  box-shadow: none;
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -476,6 +512,7 @@ div.critical-comms .critical-comms-body {
   --badge-mask: 2px;
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
+  --badge-content-position: 0px;
 }
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
@@ -485,8 +522,8 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
@@ -496,8 +533,8 @@ div.critical-comms .critical-comms-body {
   position: absolute;
   width: var(--badge-size);
   height: var(--badge-size);
-  bottom: 0;
-  right: 0;
+  bottom: var(--badge-content-position);
+  right: var(--badge-content-position);
   box-sizing: border-box;
   border-radius: 50%;
   text-align: center;
@@ -510,7 +547,7 @@ div.critical-comms .critical-comms-body {
           user-select: none;
 }
 [dir="rtl"] .tw-badge > .tw-badge__content {
-  left: 0;
+  left: var(--badge-content-position);
   right: auto;
   right: initial;
 }
@@ -1211,11 +1248,43 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  --circle-border-color: var(--color-border-neutral);
+  --circle-border-width: 1px;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle .np-display {
+  font-size: var(--circle-font-size);
 }
 .np-circle .tw-icon > svg {
   height: var(--circle-icon-size);
   width: var(--circle-icon-size);
 }
+.np-circle img,
+.np-circle .wds-flag {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.np-circle-border {
+  position: relative;
+}
+.np-circle-border::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }

package/src/main.less

@@ -3,6 +3,7 @@
 @import "./actionButton/ActionButton.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
+@import "./avatarView/AvatarView.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -2,9 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { select, text } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 
-import Avatar, { AvatarType } from '../avatar';
-import AvatarWrapper from '../avatarWrapper';
-import { ProfileType, Size } from '../common';
+import AvatarView from '../avatarView';
+import { ProfileType } from '../common';
 import Logo from '../logo';
 
 import OverlayHeader from './OverlayHeader';
@@ -29,30 +28,23 @@ export const Basic = () => {
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={
-        <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-          {avatarProfiles[showAvatar]}
-        </Avatar>
-      }
+      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
       onClose={action('Close clicked')}
     />
   );
 };
 
 export const WithAvatarWrapper = () => {
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
   const profileType = select(
     'profileType',
-    Object.keys(ProfileType) as `${ProfileType}`[],
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
     undefined,
   );
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
       onClose={action('Close clicked')}
     />
   );

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -1,381 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CircularButton defaults renders a button of type accent and priority primary 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 2`] = `
-<div>
-  <label
-    class="np-circular-btn primary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders primary buttons 3`] = `
-<div>
-  <label
-    class="np-circular-btn primary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn secondary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 2`] = `
-<div>
-  <label
-    class="np-circular-btn secondary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton priorities renders secondary buttons 3`] = `
-<div>
-  <label
-    class="np-circular-btn secondary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders accent buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary accent"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders negative buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary negative"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;
-
-exports[`CircularButton types renders positive buttons 1`] = `
-<div>
-  <label
-    class="np-circular-btn primary positive"
-  >
-    <input
-      aria-label="Add money"
-      class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
-      type="button"
-    />
-    <span
-      class="tw-icon tw-icon-plus "
-      data-testid="plus-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          d="M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
-        />
-      </svg>
-    </span>
-    <span
-      class="np-text-body-default-bold np-circular-btn__label"
-    >
-      Add money
-    </span>
-  </label>
-</div>
-`;