@transferwise/components 46.123.1 → 46.124.0

package/build/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/build/styles/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/build/styles/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.123.1",
+  "version": "46.124.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -86,9 +86,9 @@
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.26.1",
     "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0",
-    "@transferwise/neptune-css": "14.26.1"
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -4,6 +4,7 @@ import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Content/AvatarLayout',
@@ -283,3 +284,55 @@ export const EdgeInstances: Story = {
     </div>
   ),
 };
+
+/**
+ * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
+ * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
+ * 
+ * Features like: `interactive` are not supported.
+ * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`.
+ */
+export const SentimentAwareness: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => (
+    <>
+      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
+        <SentimentSurface
+          key={`${sentiment}-base`}
+          sentiment={sentiment}
+          emphasis="base"
+          className="p-a-1 d-flex"
+          style={{ gap: 'var(--size-16)' }}
+        >
+          <AvatarLayout avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]} />
+          <AvatarLayout
+            orientation="diagonal"
+            avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+          />
+        </SentimentSurface>
+      )}
+    </>
+  ),
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <div
+        style={{
+          width: '100%',
+          display: 'grid',
+          gridTemplateColumns: 'min-content min-content',
+          justifyContent: 'center',
+          gap: '1rem',
+          maxWidth: '800px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;

package/src/avatarView/AvatarView.less

@@ -2,7 +2,7 @@
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-content-primary);
+    color: var(--color-sentiment-content-primary, var(--color-content-primary));
   }
 
   &-interactive {

package/src/avatarView/AvatarView.story.tsx

@@ -17,12 +17,15 @@ import {
   Transport,
   Wallet,
   Water,
+  Bank,
+  GiftBox,
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
 import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
 import Display from '../display';
 import Body from '../body';
+import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Content/AvatarView',
@@ -35,6 +38,20 @@ const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
+const withComponentGrid = (Story: () => JSX.Element) => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      maxWidth: '800px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
 export const Selected: Story = {
   render: () => {
     return (
@@ -420,6 +437,55 @@ export const Profiles: Story = {
   },
 };
 
+/**
+ * `AvatarView` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
+ * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
+ * 
+ * Features like `online`, `notification`, `selected`, and `interactive` are not supported.
+ * For badge (`<AvatarView badge={}>`) only `flagCode` is supported.
+ * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`.
+ */
+export const SentimentAwareness: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+      source: { type: 'code' },
+    },
+  },
+  render: () => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            className="p-a-1 d-flex"
+            style={{ gap: 'var(--size-16)' }}
+          >
+            <AvatarView size={32}>
+              <Bank />
+            </AvatarView>
+            <AvatarView size={32} profileName="John Doe" />
+            <AvatarView size={32}>
+              <Flag code="JPY" intrinsicSize={32} />
+            </AvatarView>
+            <AvatarView size={32} badge={sentiment === 'proposition' ? undefined : { status: sentiment }}>
+              <Bank />
+            </AvatarView>
+            <AvatarView size={32} badge={{ flagCode: 'eu' }}>
+              <Bank />
+            </AvatarView>
+          </SentimentSurface>
+        ))}
+      </>
+    );
+  },
+  decorators: [withComponentGrid],
+};
+
 export const ProfileBrokenImageFallback: Story = {
   parameters: {
     chromatic: {

package/src/main.css

@@ -948,7 +948,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 .np-avatar-view-interactive {
   cursor: pointer;