@transferwise/components 0.0.0-experimental-3179be2 → 0.0.0-experimental-279b29c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-3179be2",
+  "version": "0.0.0-experimental-279b29c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -86,8 +86,8 @@
     "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",
+    "@transferwise/neptune-css": "14.26.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -303,21 +303,19 @@ export const SentimentAwareness: Story = {
   render: (args) => (
     <>
       {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
-        (['base', 'elevated'] as const).map((emphasis) => (
-          <SentimentSurface
-            key={`${sentiment}-${emphasis}`}
-            sentiment={sentiment}
-            emphasis={emphasis}
-            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>
-        )),
+        <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>
       )}
     </>
   ),

package/src/avatarView/AvatarView.story.tsx

@@ -442,6 +442,7 @@ export const Profiles: Story = {
  * [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 = {
@@ -471,36 +472,10 @@ export const SentimentAwareness: Story = {
             <AvatarView size={32}>
               <Flag code="JPY" intrinsicSize={32} />
             </AvatarView>
-            {sentiment === 'proposition' ? (
-              <AvatarView
-                size={32}
-                badge={{
-                  asset: (
-                    <div
-                      className="d-flex align-items-center justify-content-center"
-                      style={{
-                        backgroundColor: 'var(--color-sentiment-interactive-primary)',
-                        color: 'var(--color-sentiment-interactive-control)',
-                        width: '100%',
-                        height: '100%',
-                      }}
-                    >
-                      <GiftBox />
-                    </div>
-                  ),
-                }}
-              >
-                <Bank />
-              </AvatarView>
-            ) : (
-              <AvatarView size={32} badge={{ status: sentiment }}>
-                <Bank />
-              </AvatarView>
-            )}
-            <AvatarView size={32} badge={{ type: 'reference' }}>
+            <AvatarView size={32} badge={sentiment === 'proposition' ? undefined : { status: sentiment }}>
               <Bank />
             </AvatarView>
-            <AvatarView size={32} badge={{ type: 'action' }}>
+            <AvatarView size={32} badge={{ flagCode: 'eu' }}>
               <Bank />
             </AvatarView>
           </SentimentSurface>