@transferwise/components 46.126.0 → 46.127.1

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -11,6 +11,7 @@ import {
 } from '../_stories/subcomponents';
 import { ListItem } from '../ListItem';
 import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import { Clock } from '@transferwise/icons';
 
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
@@ -66,7 +67,7 @@ export const Playground: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt {...args} />}
+        prompt={<ListItem.Prompt {...args} />}
       />
     </List>
   ),
@@ -86,28 +87,89 @@ export const Sentiment: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
+            This is a neutral prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
+            This is a positive prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING}>
+            This is a warning prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEGATIVE}>
+            This is a negative prompt.
+          </ListItem.Prompt>
+        }
+      />
+    </List>
+  ),
+};
+
+/**
+ * While all main sentiments (`warning`, `negative`, `positive` and `neutral`) are associated with a
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
+ * closer to the prompt's content. <br /><br />
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
+ */
+export const IconOverrides: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} mediaLabel="Processing: ">
+            This prompt uses default Icon, but with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} media={<Clock title="Processing: " />}>
+            This prompt uses custom Icon with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
       />
     </List>
   ),
@@ -135,13 +197,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             This prompt includes a{' '}
             <Link href="https://wise.com" target="_blank" rel="noreferrer">
               link to some resource
             </Link>{' '}
             to help the user in their journey.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
 
@@ -151,13 +213,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
             This prompt includes an <Link onClick={action('inline button')}>
               inline button
             </Link>{' '}
             than can e.g. trigger a modal.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
     </List>

package/src/listItem/Prompt/ListItemPrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { Sentiment } from '../../common';
 import { ListItem } from '../ListItem';
@@ -18,6 +19,8 @@ describe('ListItem.Prompt', () => {
   });
 
   describe('render icon', () => {
+    const customLabel = 'Custom icon label';
+
     it.each([
       [Sentiment.NEUTRAL, 'info-icon'],
       [Sentiment.POSITIVE, 'check-icon'],
@@ -32,6 +35,34 @@ describe('ListItem.Prompt', () => {
       );
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });
+
+    it('should accept accessible name override for a status icon', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} mediaLabel={customLabel}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
+
+    it('should accept icon accessible name override', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} media={<Clock title={customLabel} />}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
   });
 
   describe('muted state', () => {

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -3,7 +3,10 @@ import { Sentiment } from '../../common';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
 import { InlinePrompt, type InlinePromptProps } from '../../prompt';
 
-export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
+export type ListItemPromptProps = Pick<
+  InlinePromptProps,
+  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
+>;
 
 /**
  * This component allows for rendering an Inline Prompt. <br />
@@ -15,6 +18,8 @@ export const Prompt = ({
   sentiment = Sentiment.NEUTRAL,
   mediaLabel,
   children,
+  media,
+  loading,
 }: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -23,6 +28,8 @@ export const Prompt = ({
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
+      media={media}
+      loading={loading}
       mediaLabel={mediaLabel}
       muted={isLongLivedMuted}
       className="wds-list-item-prompt"
@@ -33,4 +40,3 @@ export const Prompt = ({
 };
 
 Prompt.displayName = 'ListItem.Prompt';
-export default Prompt;

package/src/logo/Logo.story.tsx

@@ -1,15 +1,29 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo from '.';
+import Logo, { LogoType } from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: ({ inverse, type }) => {
+  render: () => {
     return (
-      <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
-        <Logo type={type} inverse={inverse} />
-      </div>
+      <>
+        <div>
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} />
+            </div>
+          ))}
+        </div>
+        <div className="bg--dark">
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} inverse />
+            </div>
+          ))}
+        </div>
+      </>
     );
   },
 } satisfies Meta<typeof Logo>;
@@ -22,3 +36,8 @@ export const Basic: Story = {
     inverse: false,
   },
 };
+
+export const Mobile: Story = {
+  ...Basic,
+  ...withVariantConfig(['mobile']),
+};

package/src/main.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

package/src/overlayHeader/OverlayHeader.test.tsx

@@ -11,9 +11,6 @@ describe('OverlayHeader', () => {
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };
-  it('renders as expected', () => {
-    expect(render(<OverlayHeader {...props} />).container).toMatchSnapshot();
-  });
 
   it('renders separator only if avatar and onClose are provided', () => {
     const { container } = render(<OverlayHeader {...props} />);

package/src/popover/Popover.test.tsx

@@ -22,19 +22,6 @@ describe('Popover', () => {
   let rerender;
 
   describe('on desktop', () => {
-    it('renders when is open', async () => {
-      render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      await userEvent.click(screen.getByText('Open'));
-
-      await waitForPanel();
-      expect(getPanel()).toMatchSnapshot();
-    });
-
     describe('title', () => {
       it('renders title', async () => {
         ({ container, rerender } = render(
@@ -122,18 +109,6 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', async () => {
-      ({ container } = render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      ));
-
-      await userEvent.click(screen.getByText('Open'));
-
-      expect(container).toMatchSnapshot();
-    });
-
     it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>

package/src/promoCard/PromoCard.test.tsx

@@ -26,12 +26,6 @@ describe('PromoCard', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCard {...defaultProps} id="test-promo-card" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/promoCard/PromoCardGroup.test.tsx

@@ -41,11 +41,6 @@ describe('PromoCardGroup', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCardGroup {...defaultProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -225,24 +225,27 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
- * It's also possible to override the default icon's accessible name announced by screen readers
- * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
-          Your travel account is set up and ready to use.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
-          Connect Wise with your taxi app to get exclusive discounts.
+        <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
+          This prompt uses default Icon, but with a custom label for screen readers.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+        <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
-          The identity document you provided has expired.
+        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
       </>
     );

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
@@ -91,11 +92,22 @@ describe('InlinePrompt', () => {
           });
         }
 
-        it('should allow for customisation of aria label', () => {
+        it('should allow for customisation of aria label for StatusIcon', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
           expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
         });
 
+        it('should allow for customisation of aria label for a custom Icon', () => {
+          render(
+            <InlinePrompt
+              {...defaultProps}
+              sentiment={sentiment}
+              media={<Clock title={mediaLabel} />}
+            />,
+          );
+          expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
+        });
+
         it('should retain custom label while muted', () => {
           render(
             <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,

package/src/sentimentSurface/SentimentSurface.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

package/src/sentimentSurface/SentimentSurface.less

@@ -178,12 +178,12 @@
     .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #454745, #353635, #232423,  // content-primary (default, hover, active)
-                    #454745, #353635, #232423,  // interactive-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
-                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
-                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
+                    #454745, #353635, #232423,                                            // content-primary (default, hover, active)
+                    #454745, #353635, #232423,                                            // interactive-primary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary-neutral
+                    #F1F1ED, #E7E7E1, #DFDED5,                                            // interactive-control
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17)  // background-surface
                 );
       }
       &-elevated {
@@ -191,7 +191,7 @@
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                     #454745, #353635, #232423,  // interactive-secondary
-                    #5A5C5A, #6D6F6D, #727472,  // interactive-secondary-neutral
+                    #585958, #6A6C6A, #7D7E7D,  // interactive-secondary-neutral
                     #454745, #353635, #232423,  // interactive-control
                     #454745, #353635, #232423   // background-surface
                 );
@@ -205,12 +205,12 @@
     .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
-                    #2A2C29, #414441, #595B58,  // interactive-secondary
-                    #424441, #4C4E4B, #565955,  // interactive-secondary-neutral
-                    #2A2C29, #414441, #595B58,  // interactive-control
-                    #2A2C29, #414441, #595B58   // background-surface
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // interactive-primary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary-neutral
+                    #2A2C29, #414441, #595B58,                                                       // interactive-control
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30)   // background-surface
                 );
       }
       &-elevated {

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -31,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface',
+  title: 'Content/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',