@transferwise/components 0.0.0-experimental-b80ad21 → 0.0.0-experimental-f17f6cb

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -6,9 +6,10 @@ import Header from '../header';
 import Link from '../link';
 import IconButton from '../iconButton';
 import StatusIcon from '../statusIcon';
-import AvatarView from '../avatarView';
 import SentimentSurface from './SentimentSurface';
 import type { Sentiment, Emphasis } from './SentimentSurface.types';
+import AvatarView from '../avatarView';
+import AvatarLayout from '../avatarLayout';
 
 const withComponentGrid = (Story: () => JSX.Element) => (
   <div
@@ -31,7 +32,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface',
+  title: 'Content/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',
@@ -229,12 +230,12 @@ export const EmphasisLevels: Story = {
 
 /**
  * By default, `SentimentSurface` exposes the tokens as CSS custom properties and also applies
- * the base styles for `background-color` and `color`. However, you can choose to expose said
- * properties without rendering them, by setting the `hasBaseStyles` prop to `false`.
- * This is useful when you want to create custom components that adapt to the sentiment context
- * without applying default styles.
+ * the base styles for `background-color` and `color`.
+ * However, you can choose to only expose the CSS custom properties by setting the `hasBaseStyles`
+ * prop to `false`. This is useful when you want to create custom components that adapt to the
+ * sentiment context without applying default styles.
  */
-export const RenderingBaseStyles: Story = {
+export const BaseStyles: Story = {
   render: (args) => (
     <>
       <SentimentSurface
@@ -244,8 +245,8 @@ export const RenderingBaseStyles: Story = {
         <div className="p-a-2">This example exposes and applies the tokens.</div>
       </SentimentSurface>
       <SentimentSurface
-        sentiment="success"
         hasBaseStyles={false}
+        sentiment="success"
         style={{ border: `1px dashed var(--color-sentiment-content-primary)` }}
       >
         <div className="p-a-2">This example only exposes the tokens without applying them.</div>
@@ -263,21 +264,6 @@ export const RenderingBaseStyles: Story = {
   ),
   parameters: {
     controls: { disable: true },
-    docs: {
-      source: {
-        // Storybook strips out props that are set to false, so we need to hack it back in :/
-        transform: async (source: string) => {
-          if (source.includes('hasBaseStyles')) {
-            return source;
-          }
-
-          return source.replace(
-            /(<\/SentimentSurface>\s+<SentimentSurface(\s+)sentiment="success")/g,
-            '$1$2hasBaseStyles={false}',
-          );
-        },
-      },
-    },
   },
   decorators: [withComponentGrid],
 };
@@ -364,12 +350,6 @@ export const NestingSurfaces: Story = {
   parameters: {
     controls: { disable: true },
   },
-  /**
-   * As agreed with the design team, this story is temporarily hidden from the public view until we
-   * have proper discussion and documentation around when and how to use nested SentimentSurfaces.
-   * This is to prevent misuse and confusion among consumers.
-   */
-  tags: ['!dev', '!autodocs'],
   render: (args) => {
     return (
       <SentimentSurface sentiment="success" emphasis="base" className="p-a-1">
@@ -386,7 +366,7 @@ export const NestingSurfaces: Story = {
 };
 
 /**
- * Some DS components (namely `Button`, `Link`, `StatusIcon`, `IconButton`, `AvatarView`, and `AvatarLayout`) automatically adapt to the sentiment context when used within a `SentimentSurface`.
+ * Some DS components (namely `Button`, `StatusIcon`, and `IconButton`) automatically adapt to the sentiment context when used within a `SentimentSurface`.
  */
 export const SentimentAwareComponents: Story = {
   name: 'Sentiment-aware Components',
@@ -399,70 +379,59 @@ export const SentimentAwareComponents: Story = {
     },
   },
   render: function Render(args) {
-    const BODY = [
-      <Body key="body">
-        This text and its <Link href="#">inline links</Link> should use sentiment-matched colour.
-      </Body>,
-      <Button key="button1" v2 priority="primary" size="sm">
-        Primary
-      </Button>,
-      <Button key="button2" v2 priority="secondary" size="sm">
-        Secondary
-      </Button>,
-      <IconButton key="iconButton" size={32}>
-        <Defrost />
-      </IconButton>,
-      <AvatarView key="avatar" size={32}>
-        <Bank />
-      </AvatarView>,
-      <AvatarView key="avatar-initials" size={32} profileName="John Doe" />,
-    ];
-    const STATUS_SUCCESS = <StatusIcon size={32} sentiment="success" />;
-    const STATUS_NEGATIVE = <StatusIcon size={32} sentiment="negative" />;
-    const AVATAR_SUCCESS = (
-      <AvatarView
-        size={32}
-        imgSrc="../avatar-rectangle-fox.webp"
-        badge={{ status: 'success' }}
-        interactive
-      />
-    );
-    const AVATAR_NEGATIVE = (
-      <AvatarView
-        size={32}
-        imgSrc="../avatar-rectangle-fox.webp"
-        badge={{ status: 'negative' }}
-        interactive
-      />
+    const inner = (
+      <div className="p-a-2 m-b-2 sentimentAwareComponent">
+        <Body>
+          This text and its <Link href="#">inline links</Link> should use sentiment-matched colour.
+        </Body>
+        <IconButton size={32}>
+          <Defrost />
+        </IconButton>
+        <StatusIcon size={32} sentiment="positive" />
+        <Button v2 priority="primary" size="sm">
+          Primary
+        </Button>
+        <Button v2 priority="secondary" size="sm">
+          Secondary
+        </Button>
+        <AvatarView size={32}>
+          <Bank />
+        </AvatarView>
+        <AvatarView size={32} interactive>
+          <Bank />
+        </AvatarView>
+        <AvatarView size={32} profileName="John Doe" />
+        <AvatarView size={32} profileName="John Doe" interactive />
+        <AvatarView size={32} imgSrc="../avatar-rectangle-fox.webp" badge={{ status: 'warning' }} />
+        <AvatarView
+          size={32}
+          imgSrc="../avatar-rectangle-fox.webp"
+          badge={{ status: 'warning' }}
+          interactive
+        />
+        <AvatarLayout size={32} avatars={[{ asset: <Bank /> }, { profileName: 'John Doe' }]} />
+      </div>
     );
 
     return (
       <>
-        <Header level="group" title="Plain container" />
-        <div className="p-a-2 m-b-2 sentimentAwareComponent">
-          {BODY}
-          {AVATAR_SUCCESS}
-          {AVATAR_NEGATIVE}
-          {STATUS_SUCCESS}
-          {STATUS_NEGATIVE}
-        </div>
+        <Header level="group" title="No sentiment surface" />
+        {inner}
 
         <Header level="group" title="Success sentiment surface" />
-        <SentimentSurface sentiment="success">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_SUCCESS}
-            {STATUS_SUCCESS}
-          </div>
+        <SentimentSurface sentiment="success">{inner}</SentimentSurface>
+
+        <Header level="group" title="Success Elevated sentiment surface" />
+        <SentimentSurface sentiment="success" emphasis="elevated">
+          {inner}
         </SentimentSurface>
 
         <Header level="group" title="Negative sentiment surface" />
-        <SentimentSurface sentiment="negative">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_NEGATIVE}
-            {STATUS_NEGATIVE}
-          </div>
+        <SentimentSurface sentiment="negative">{inner}</SentimentSurface>
+
+        <Header level="group" title="Negative Elevated sentiment surface" />
+        <SentimentSurface sentiment="negative" emphasis="elevated">
+          {inner}
         </SentimentSurface>
       </>
     );

package/src/sentimentSurface/SentimentSurface.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ThemeProvider, type Theming } from '@wise/components-theming';
-import Button from '../button';
 import SentimentSurface from './SentimentSurface';
+import Button from '../button';
 import type { Sentiment, Emphasis } from './SentimentSurface.types';
 
 const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface/Tests',
+  title: 'Content/SentimentSurface/Tests',
   tags: ['!autodocs'],
 } satisfies Meta<typeof SentimentSurface>;