@transferwise/components 0.0.0-experimental-f7495f3 → 0.0.0-experimental-37d8e2c

package/src/main.css

@@ -421,6 +421,56 @@ 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-avatar-view {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  color: var(--color-interactive-primary);
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.np-avatar-view .np-circle {
+  background-color: transparent;
+  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
+  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
+}
+.np-avatar-view-selected .np-circle {
+  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  border: none;
+}
+.np-avatar-group {
+  display: inline-flex;
+  --np-avatar-group-size: 48px;
+  --np-avatar-size: 32px;
+}
+.np-avatar-group-diagonal {
+  width: var(--np-avatar-group-size);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
+}
+.np-avatar-group-diagonal-child {
+  margin-left: calc((var(--np-avatar-size) / 2) * -1);
+  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
+}
+.np-avatar-group-horizontal {
+  width: calc((var(--np-avatar-size) * 2) - 2px);
+  height: var(--np-avatar-group-size);
+}
+.np-avatar-group-horizontal-mask {
+  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
+}
+.np-avatar-group-horizontal-child {
+  margin-left: calc((var(--np-avatar-size) / 4) * -1);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -437,16 +487,16 @@ 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 var(--badge-mask-position) 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 var(--badge-mask-position) 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));
 }
 [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));
-          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));
+  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) 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));
+          mask-image: radial-gradient(circle at var(--badge-mask-position) 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));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: 0;
+  bottom: var(--badge-bottom-position);
   right: 0;
   box-sizing: border-box;
   text-align: center;
@@ -985,30 +1035,6 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
@@ -1157,6 +1183,23 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+  font-size: var(--circle-font-size);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+}
+.np-circle img {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}
+.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-bottom-sheet {
   border-radius: 10px 10px 0 0;
@@ -1439,6 +1482,16 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-notification-dot {
+  --badge-notification-dot-size: 14px;
+  width: 14px;
+  width: var(--badge-notification-dot-size);
+  height: 14px;
+  height: var(--badge-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -4144,12 +4197,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4165,12 +4212,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/src/main.less

@@ -2,6 +2,8 @@
 @import "./accordion/Accordion.less";
 @import "./actionButton/ActionButton.less";
 @import "./avatar/Avatar.less";
+@import "./avatarView/AvatarView.less";
+@import "./avatarGroup/AvatarGroup.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -14,6 +16,7 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
+@import "./common/notificationDot/NotificationDot.less";
 @import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";

package/src/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,12 +13,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
 @media (max-width: 320px) {
   .status-circle-sm .status-icon > svg {
     width: 24px;

package/src/statusIcon/StatusIcon.less

@@ -1,7 +1,7 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
+// .status-icon > svg {
+//   height: var(--size-32);
+//   width: var(--size-32);
+// }
 
 .status-circle {
   .light {
@@ -25,8 +25,8 @@
 
   &-sm {
     .status-icon > svg {
-      height: var(--size-14);
-      width: var(--size-14);
+      // height: var(--size-14);
+      // width: var(--size-14);
 
       @media (--screen-400-zoom) {
         width: var(--size-24);

package/src/statusIcon/StatusIcon.story.tsx

@@ -20,32 +20,36 @@ export const Basic: Story = {
 };
 
 export const Variants: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        Sentiment.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
+  render: () => {
+    const sizes = [16, 24, 32, 40, 48, 56, 72];
+    return (
+      <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',
+                gap: '1em',
+                justifyContent: 'space-between',
+                flexDirection: 'column',
+                minHeight: '150px',
+                alignItems: 'center',
+              }}
+            >
+              {sizes.map((size) => {
+                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              })}
+            </span>
+          );
+        })}
+      </span>
+    );
+  },
 };

package/src/statusIcon/StatusIcon.tsx

@@ -5,9 +5,14 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '.
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
+/**
+ * @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;
 };
 
 const iconTypeMap = {
@@ -31,13 +36,22 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIcon
   const Icon = iconTypeMap[sentiment];
   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 =
+    sizeProp === Size.SMALL && isTinyViewport
+      ? 32
+      : typeof sizeProp === 'string'
+        ? mapLegacySize[sizeProp]
+        : sizeProp;
   return (
     <Circle
       as="span"
       size={size}
       data-testid="status-icon"
-      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
+      className={clsx(
+        'status-circle',
+        // `status-circle-${sizeProp}`,
+        sentiment,
+      )}
     >
       <Icon className={clsx('status-icon', iconColor)} />
     </Circle>