@transferwise/components 46.117.0 → 46.118.0

package/src/sentimentSurface/SentimentSurface.less

@@ -6,7 +6,10 @@
 
   &-negative {
     .np-theme-personal &,
-    .np-theme-personal--bright-green & {
+    .np-theme-business &,
+    .np-theme-platform &,
+    .np-theme-personal--bright-green &,
+    .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
                     #CB272F, #B8232B, #A72027,
@@ -30,7 +33,10 @@
     }
 
     .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
+    .np-theme-business--dark &,
+    .np-theme-personal--forest-green &,
+    .np-theme-business--forest-green &,
+    .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
                     #FFA8AD, #FFBDC0, #FFD1D3,
@@ -56,7 +62,10 @@
 
   &-warning {
     .np-theme-personal &,
-    .np-theme-personal--bright-green & {
+    .np-theme-business &,
+    .np-theme-platform &,
+    .np-theme-personal--bright-green &,
+    .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
                     #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
@@ -80,7 +89,10 @@
     }
 
     .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
+    .np-theme-business--dark &,
+    .np-theme-personal--forest-green &,
+    .np-theme-business--forest-green &,
+    .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
                     #FADC65, #F9D648, #F8CD20,  // content-primary
@@ -105,7 +117,10 @@
   }
   &-success {
     .np-theme-personal &,
-    .np-theme-personal--bright-green & {
+    .np-theme-business &,
+    .np-theme-platform &,
+    .np-theme-personal--bright-green &,
+    .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
                     #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
@@ -129,7 +144,10 @@
     }
 
     .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
+    .np-theme-business--dark &,
+    .np-theme-personal--forest-green &,
+    .np-theme-business--forest-green &,
+    .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
                     #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
@@ -154,7 +172,10 @@
   }
   &-neutral {
     .np-theme-personal &,
-    .np-theme-personal--bright-green & {
+    .np-theme-business &,
+    .np-theme-platform &,
+    .np-theme-personal--bright-green &,
+    .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
                     #454745, #353635, #232423,  // content-primary (default, hover, active)
@@ -178,7 +199,10 @@
     }
 
     .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
+    .np-theme-business--dark &,
+    .np-theme-personal--forest-green &,
+    .np-theme-business--forest-green &,
+    .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
@@ -203,7 +227,10 @@
   }
   &-proposition {
     .np-theme-personal &,
-    .np-theme-personal--bright-green & {
+    .np-theme-business &,
+    .np-theme-platform &,
+    .np-theme-personal--bright-green &,
+    .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
                     #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
@@ -227,7 +254,10 @@
     }
 
     .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
+    .np-theme-business--dark &,
+    .np-theme-personal--forest-green &,
+    .np-theme-business--forest-green &,
+    .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -1,11 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Defrost } from '@transferwise/icons';
+import { Bank, Defrost } from '@transferwise/icons';
 import Body from '../body';
 import Button from '../button';
 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';
 
@@ -30,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface',
+  title: 'Foundations/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',
@@ -228,12 +229,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 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.
+ * 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.
  */
-export const BaseStyles: Story = {
+export const RenderingBaseStyles: Story = {
   render: (args) => (
     <>
       <SentimentSurface
@@ -243,8 +244,8 @@ export const BaseStyles: Story = {
         <div className="p-a-2">This example exposes and applies the tokens.</div>
       </SentimentSurface>
       <SentimentSurface
-        hasBaseStyles={false}
         sentiment="success"
+        hasBaseStyles={false}
         style={{ border: `1px dashed var(--color-sentiment-content-primary)` }}
       >
         <div className="p-a-2">This example only exposes the tokens without applying them.</div>
@@ -260,85 +261,25 @@ export const BaseStyles: Story = {
       </SentimentSurface>
     </>
   ),
-  parameters: {
-    controls: { disable: true },
-  },
-  decorators: [withComponentGrid],
-};
-
-/**
- * The component exposes token groups for all 5 sentiment types (`negative`, `warning`, `neutral`, `proposition` and `success`) each of them with two emphasis levels (`base` and `elevated`).
- */
-export const ExposedTokens: Story = {
-  render: () => (
-    <section style={{ display: 'flex', flexDirection: 'column', gap: '32px', maxWidth: '100%' }}>
-      {sentiments.map((sentiment) =>
-        emphasisLevels.map((emphasis) => (
-          <SentimentSurface
-            key={`${sentiment}-${emphasis}`}
-            sentiment={sentiment}
-            emphasis={emphasis}
-            style={{
-              padding: '24px',
-              borderRadius: '16px',
-            }}
-          >
-            <h4
-              className="d-block m-b-2 text-capitalize np-text-title-body"
-              style={{
-                color: 'inherit',
-              }}
-            >
-              {sentiment} - {emphasis}
-            </h4>
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                gap: '24px',
-              }}
-            >
-              {tokenCategories.map((category) => (
-                <div key={category.name}>
-                  <h5
-                    style={{
-                      color: 'inherit',
-                      fontSize: '12px',
-                      fontWeight: 600,
-                      marginBottom: '8px',
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.5px',
-                      opacity: 0.8,
-                    }}
-                  >
-                    {category.name}
-                  </h5>
-                  {category.tokens.map((token) => (
-                    <TokenSwatch key={token} token={token} />
-                  ))}
-                </div>
-              ))}
-            </div>
-          </SentimentSurface>
-        )),
-      )}
-    </section>
-  ),
   parameters: {
     controls: { disable: true },
     docs: {
-      canvas: {
-        sourceState: 'hidden',
+      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: [
-    (Story: () => JSX.Element) => (
-      <div style={{ padding: '2rem', maxWidth: '1200px' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  decorators: [withComponentGrid],
 };
 
 /**
@@ -348,6 +289,12 @@ 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">
@@ -364,7 +311,9 @@ export const NestingSurfaces: Story = {
 };
 
 /**
- * Some DS components (namely `Button`, `StatusIcon`, and `IconButton`) automatically adapt to the sentiment context when used within a `SentimentSurface`.
+ * Some DS components (namely `Button`, `Link`, `StatusIcon`, `IconButton`) automatically adapt to the sentiment context when used within a `SentimentSurface`. <br/>
+ *
+ * > ⚠️ You should not mix sentiments within the same surface. For example, avoid using a `StatusIcon` with `sentiment="negative"` inside a `SentimentSurface` with `sentiment="success"`.
  */
 export const SentimentAwareComponents: Story = {
   name: 'Sentiment-aware Components',
@@ -377,34 +326,71 @@ export const SentimentAwareComponents: Story = {
     },
   },
   render: function Render(args) {
-    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>
-      </div>
+    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
+      />
     );
 
     return (
       <>
-        <Header level="group" title="No sentiment surface" />
-        {inner}
+        <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="Success sentiment surface" />
-        <SentimentSurface sentiment="success">{inner}</SentimentSurface>
+        <SentimentSurface sentiment="success">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_SUCCESS}
+            {STATUS_SUCCESS}
+          </div>
+        </SentimentSurface>
 
         <Header level="group" title="Negative sentiment surface" />
-        <SentimentSurface sentiment="negative">{inner}</SentimentSurface>
+        <SentimentSurface sentiment="negative">
+          <div className="p-a-2 m-b-2 sentimentAwareComponent">
+            {BODY}
+            {AVATAR_NEGATIVE}
+            {STATUS_NEGATIVE}
+          </div>
+        </SentimentSurface>
       </>
     );
   },
@@ -516,3 +502,78 @@ function View() {
     },
   },
 };
+
+/**
+ * The component exposes token groups for all 5 sentiment types (`negative`, `warning`, `neutral`, `proposition` and `success`) each of them with two emphasis levels (`base` and `elevated`).
+ */
+export const ExposedTokens: Story = {
+  render: () => (
+    <section style={{ display: 'flex', flexDirection: 'column', gap: '32px', maxWidth: '100%' }}>
+      {sentiments.map((sentiment) =>
+        emphasisLevels.map((emphasis) => (
+          <SentimentSurface
+            key={`${sentiment}-${emphasis}`}
+            sentiment={sentiment}
+            emphasis={emphasis}
+            style={{
+              padding: '24px',
+              borderRadius: '16px',
+            }}
+          >
+            <h4
+              className="d-block m-b-2 text-capitalize np-text-title-body"
+              style={{
+                color: 'inherit',
+              }}
+            >
+              {sentiment} - {emphasis}
+            </h4>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: '24px',
+              }}
+            >
+              {tokenCategories.map((category) => (
+                <div key={category.name}>
+                  <h5
+                    style={{
+                      color: 'inherit',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                      marginBottom: '8px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                      opacity: 0.8,
+                    }}
+                  >
+                    {category.name}
+                  </h5>
+                  {category.tokens.map((token) => (
+                    <TokenSwatch key={token} token={token} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          </SentimentSurface>
+        )),
+      )}
+    </section>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <div style={{ padding: '2rem', maxWidth: '1200px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

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 SentimentSurface from './SentimentSurface';
 import Button from '../button';
+import SentimentSurface from './SentimentSurface';
 import type { Sentiment, Emphasis } from './SentimentSurface.types';
 
 const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
@@ -21,13 +21,14 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface/Tests',
+  title: 'Foundations/SentimentSurface/Tests',
   tags: ['!autodocs'],
 } satisfies Meta<typeof SentimentSurface>;
 
 type Story = StoryObj<typeof SentimentSurface>;
 
 export const NestedSentiments: Story = {
+  tags: ['!dev'],
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
       <SentimentSurface sentiment="negative" emphasis="base">
@@ -86,6 +87,9 @@ const ButtonsGrid = () => (
           <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
             Secondary Neutral
           </Button>
+          <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+            Tertiary
+          </Button>
         </SentimentSurface>
       )),
     )}

package/src/test-utils/story-config.ts

@@ -36,6 +36,11 @@ export interface StoryConfig {
     | 'dark'
     | 'bright-green'
     | 'forest-green'
+    | 'business'
+    | 'business--forest-green'
+    | 'business--bright-green'
+    | 'platform'
+    | 'platform--forest-green'
     | 'rtl'
     | 'mobile'
     | '400%'

package/src/{neptune-css/NeptuneCSS.story.tsx → tokens/tokens.story.tsx}

@@ -7,8 +7,8 @@ import IconButton from '../iconButton';
 import Body from '../body';
 
 const meta: Meta = {
-  title: 'NeptuneCSS',
-  component: () => <div>NeptuneCSS Example</div>,
+  title: 'Foundations/tokens',
+  tags: ['!autodocs'],
 };
 
 export default meta;

package/src/withId/withId.story.tsx

@@ -26,6 +26,7 @@ DescribedButton.displayName = 'DescribedButton';
 
 export default {
   component: DescribedButton,
+  title: 'HoCs/withId',
   tags: ['docs-only'],
 } satisfies Meta<typeof withId>;