@transferwise/components 46.111.1 → 46.112.0

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -47,6 +47,8 @@ const BADGES = {
       </div>
     ),
   },
+  'Notification badge': { type: 'notification' },
+  'Online badge': { type: 'online' },
 } as const;
 
 export default {
@@ -61,7 +63,6 @@ export default {
     size: 48,
     selected: false,
     badge: { type: 'action' },
-    notification: false,
     profileName: undefined,
     profileType: undefined,
     imgSrc: undefined,
@@ -88,20 +89,23 @@ export default {
         type: { summary: 'ProfileType' },
       },
     },
-    notification: {
-      control: 'boolean',
-      description: 'Shows notification dot',
-    },
-    selected: {
-      control: 'boolean',
-      description: 'Toggles selected state',
-    },
     badge: {
-      description: 'Badge configuration object',
+      control: 'select',
+      options: ['action', 'notification', 'online'],
+      description: 'Badge type',
+      mapping: {
+        action: { type: 'action' },
+        notification: { type: 'notification' },
+        online: { type: 'online' },
+      },
       table: {
         type: { summary: 'AvatarViewBadgeProps' },
       },
     },
+    selected: {
+      control: 'boolean',
+      description: 'Toggles selected state',
+    },
     children: {
       table: {
         type: { summary: 'ReactNode' },
@@ -243,8 +247,48 @@ export const Sizes: Story = {
 };
 
 /**
- * Similarly, AvatarView also support a notification dot, which also adjusts to the Avatar's size. <br />
- * **NB:** You cannot use notification and badge at the same time – badge will always take precedence over notification.
+ * AvatarView supports different types of badges for additional context and information. <br />
+ * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ */
+export const Badges: Story = {
+  args: {
+    imgSrc: '../avatar-square-dude.webp',
+  },
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'notification',
+    'dot',
+    'selected',
+  ]),
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => {
+    return (
+      <List>
+        {Object.entries(BADGES).map(([title, badge]) => (
+          <ListItem
+            key={title}
+            title={title}
+            subtitle={lorem10}
+            media={<ListItem.AvatarView {...args} badge={badge} />}
+            control={CONTROLS.iconButton}
+          />
+        ))}
+      </List>
+    );
+  },
+};
+
+/**
+ * `notification` is a particular `type` of Badge that appears in the top right corner as a red dot. It also adjusts to the Avatar's size. <br />
+ * **NB:** You can only choose one badge at a time, so the notification badge cannot be combined with any other badge type.
  */
 export const Notification: Story = {
   parameters: {
@@ -263,6 +307,7 @@ export const Notification: Story = {
     'profileType',
     'size',
     'notification',
+    'dot',
     'selected',
   ]),
   render: (args) => {
@@ -274,7 +319,7 @@ export const Notification: Story = {
             title={`Size ${size}`}
             subtitle={lorem10}
             media={
-              <ListItem.AvatarView {...args} size={size} notification>
+              <ListItem.AvatarView {...args} size={size} badge={{ type: 'notification' }}>
                 <Taxi />
               </ListItem.AvatarView>
             }
@@ -287,14 +332,11 @@ export const Notification: Story = {
 };
 
 /**
- * AvatarView supports different type of badges for additional context and information. <br />
- * Refer to the [design documentation](https://wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ * Similarly, Badge also has an `online` `type` which is green and also adjusts to the Avatar's size. <br />
+ * **NB:** You can only choose one badge at a time, so the online badge cannot be combined with any other badge type.
  */
-export const Badges: Story = {
-  args: {
-    imgSrc: '../avatar-square-dude.webp',
-  },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+export const Online: Story = {
+  tags: ['new'],
   parameters: {
     docs: {
       canvas: {
@@ -302,15 +344,30 @@ export const Badges: Story = {
       },
     },
   },
+  args: {
+    badge: undefined,
+  },
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'size',
+    'notification',
+    'selected',
+  ]),
   render: (args) => {
     return (
       <List>
-        {Object.entries(BADGES).map(([title, badge]) => (
+        {SIZES.map((size) => (
           <ListItem
-            key={title}
-            title={title}
+            key={size}
+            title={`Size ${size}`}
             subtitle={lorem10}
-            media={<ListItem.AvatarView {...args} badge={badge} />}
+            media={
+              <ListItem.AvatarView {...args} size={size} badge={{ type: 'online' }}>
+                <Taxi />
+              </ListItem.AvatarView>
+            }
             control={CONTROLS.iconButton}
           />
         ))}
@@ -323,7 +380,14 @@ export const Badges: Story = {
  * AvatarView supports selected state for interactive contexts.
  */
 export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
+  argTypes: hideControls([
+    'profileName',
+    'imgSrc',
+    'profileType',
+    'notification',
+    'dot',
+    'selected',
+  ]),
   render: (args) => {
     return (
       <List>

package/src/main.css

@@ -586,26 +586,32 @@
 .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
 }
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
+.np-dot {
+  --np-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-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
-.np-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   right: 0;
 }
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/build/avatarView/NotificationDot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.js","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;;;;;AAOA;;AAEG;AACH,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG;AAAE,CAAS,EAAA;AAC1E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACtE,MAAA,8BAA8B,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC;KAA2B,CAC1C,eAAAE,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC3D;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/avatarView/NotificationDot.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.mjs","sources":["../../src/avatarView/NotificationDot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { Props as AvatarViewProps } from './AvatarView';\n\ntype Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  avatarSize?: AvatarViewProps['size'];\n};\n\n/**\n * Depending on avatar size, notifcation dot size and offset are different\n */\nconst MAP_STYLE_CONFIG = {\n  16: { size: 6, offset: 1 },\n  24: { size: 8, offset: 2 },\n  32: { size: 10, offset: 2 },\n  40: { size: 10, offset: 2 },\n  48: { size: 14, offset: 2 },\n  56: { size: 16, offset: 3 },\n  72: { size: 20, offset: 3 },\n};\n\nexport default function NotificationDot({ children, avatarSize = 48 }: Props) {\n  return (\n    <div\n      className=\"np-notification-dot\"\n      style={{\n        // @ts-expect-error CSS custom props allowed\n        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,\n        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,\n      }}\n    >\n      <div className=\"np-notification-dot-badge\" />\n      <div className=\"np-notification-dot-mask\">{children}</div>\n    </div>\n  );\n}\n"],"names":["MAP_STYLE_CONFIG","size","offset","NotificationDot","children","avatarSize","_jsxs","className","style","_jsx"],"mappings":";;AAOA;;AAEG;AACH,MAAMA,gBAAgB,GAAG;AACvB,EAAA,EAAE,EAAE;AAAEC,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,CAAC;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC1B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;GAAG;AAC3B,EAAA,EAAE,EAAE;AAAED,IAAAA,IAAI,EAAE,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAC;CAC1B;AAEa,SAAUC,eAAeA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,UAAU,GAAG;AAAE,CAAS,EAAA;AAC1E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,qBAAqB;AAC/BC,IAAAA,KAAK,EAAE;AACL;MACA,4BAA4B,EAAE,GAAGR,gBAAgB,CAACK,UAAU,CAAC,CAACJ,IAAI,CAAA,EAAA,CAAI;AACtE,MAAA,8BAA8B,EAAE,CAAA,EAAGD,gBAAgB,CAACK,UAAU,CAAC,CAACH,MAAM,CAAA,EAAA;KACtE;AAAAE,IAAAA,QAAA,gBAEFK,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC;KAA2B,CAC1C,eAAAE,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,0BAA0B;AAAAH,MAAAA,QAAA,EAAEA;AAAQ,KAAM,CAC3D;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/styles/avatarView/NotificationDot.css

@@ -1,20 +0,0 @@
-.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;
-}

package/build/types/avatarView/NotificationDot.d.ts

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Props as AvatarViewProps } from './AvatarView';
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    avatarSize?: AvatarViewProps['size'];
-};
-export default function NotificationDot({ children, avatarSize }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=NotificationDot.d.ts.map

package/build/types/avatarView/NotificationDot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationDot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/NotificationDot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAExD,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9D,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,KAAK,+BAc3E"}

package/src/avatarView/NotificationDot.css

@@ -1,20 +0,0 @@
-.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;
-}

package/src/avatarView/NotificationDot.less

@@ -1,24 +0,0 @@
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-
-  &-mask {
-    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
-    );
-  }
-
-  &-badge {
-    position: absolute;
-    width: var(--np-notification-dot-size);
-    height: var(--np-notification-dot-size);
-    background-color: var(--color-sentiment-negative);
-    border-radius: var(--radius-full);
-    right: 0;
-  }
-}

package/src/avatarView/NotificationDot.tsx

@@ -1,35 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { Props as AvatarViewProps } from './AvatarView';
-
-type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
-  avatarSize?: AvatarViewProps['size'];
-};
-
-/**
- * Depending on avatar size, notifcation dot size and offset are different
- */
-const MAP_STYLE_CONFIG = {
-  16: { size: 6, offset: 1 },
-  24: { size: 8, offset: 2 },
-  32: { size: 10, offset: 2 },
-  40: { size: 10, offset: 2 },
-  48: { size: 14, offset: 2 },
-  56: { size: 16, offset: 3 },
-  72: { size: 20, offset: 3 },
-};
-
-export default function NotificationDot({ children, avatarSize = 48 }: Props) {
-  return (
-    <div
-      className="np-notification-dot"
-      style={{
-        // @ts-expect-error CSS custom props allowed
-        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
-        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
-      }}
-    >
-      <div className="np-notification-dot-badge" />
-      <div className="np-notification-dot-mask">{children}</div>
-    </div>
-  );
-}