@transferwise/components 0.0.0-experimental-cdb8834 → 0.0.0-experimental-2b6c540

package/src/iconButton/IconButton.story.tsx

@@ -1,5 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
+import {
+  ArrowLeft,
+  Cross,
+  Defrost,
+  Edit,
+  Menu,
+  Plus,
+  Settings,
+  Star,
+  Travel,
+  Briefcase,
+  Bank,
+  Freeze,
+} from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from 'storybook/actions';
 import Body from '../body';
@@ -114,48 +127,167 @@ export const Basic: Story = {
  */
 export const SentimentAwareness: Story = {
   render: () => {
+    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
+    const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
+
     return (
-      <>
-        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
-          (sentiment) => (
-            <SentimentSurface
-              key={sentiment}
-              sentiment={sentiment}
-              className="p-a-1 d-flex align-items-center"
-              style={{ gap: 'var(--size-8)' }}
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Header row with priority labels */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
+          <div style={{ width: '82px', paddingLeft: '8px' }} />
+          {priorities.map((priority) => (
+            <div
+              key={priority}
+              style={{
+                width: '32px',
+                textAlign: 'center',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                writingMode: 'vertical-rl',
+                transform: 'rotate(180deg)',
+                height: '60px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
             >
-              <IconButton
-                size={32}
-                aria-label="Primary action"
-                priority="primary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Plus />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Secondary action"
-                priority="secondary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Defrost />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Disabled action"
-                priority="primary"
-                type="default"
-                disabled
-                onClick={action('button click')}
-              >
-                <Menu />
-              </IconButton>
-            </SentimentSurface>
-          ),
-        )}
-      </>
+              {priority}
+            </div>
+          ))}
+        </div>
+
+        {/* Rows for each sentiment with base and elevated emphasis */}
+        {sentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (base)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Briefcase />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Bank />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Freeze />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Edit />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Cross />
+            </IconButton>
+          </SentimentSurface>,
+        ])}
+      </div>
     );
   },
   parameters: {
@@ -166,11 +298,4 @@ export const SentimentAwareness: Story = {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Story />
-      </div>
-    ),
-  ],
 };

package/src/iconButton/IconButton.test.story.tsx

@@ -0,0 +1,194 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
+import { action } from 'storybook/actions';
+import IconButton from './IconButton';
+import SentimentSurface from '../sentimentSurface';
+import { allModes } from '../../.storybook/modes';
+
+export default {
+  title: 'Actions/IconButton/Tests',
+  component: IconButton,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof IconButton>;
+
+type Story = StoryObj<typeof IconButton>;
+
+/**
+ * IconButton displayed across all themes and sentiments for visual regression testing.
+ */
+export const AllThemesAndSentiments: Story = {
+  render: () => {
+    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
+    const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
+    const icons = [Plus, Settings, Star, Travel];
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Header row with priority labels */}
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
+          <div style={{ width: '82px', paddingLeft: '8px' }} />
+          {priorities.map((priority) => (
+            <div
+              key={priority}
+              style={{
+                width: '32px',
+                textAlign: 'center',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                writingMode: 'vertical-rl',
+                transform: 'rotate(180deg)',
+                height: '60px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {priority}
+            </div>
+          ))}
+        </div>
+
+        {/* Rows for each sentiment with base and elevated emphasis */}
+        {sentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (base)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
+          >
+            <div
+              style={{
+                width: '82px',
+                fontSize: '11px',
+                fontWeight: 'bold',
+                textAlign: 'left',
+                paddingLeft: '8px',
+              }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <IconButton
+              size={32}
+              aria-label="Primary action"
+              priority="primary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Plus />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Secondary action"
+              priority="secondary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Settings />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Tertiary action"
+              priority="tertiary"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Star />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Minimal action"
+              priority="minimal"
+              type="default"
+              onClick={action('button click')}
+            >
+              <Travel />
+            </IconButton>
+            <IconButton
+              size={32}
+              aria-label="Disabled action"
+              priority="primary"
+              type="default"
+              disabled
+              onClick={action('button click')}
+            >
+              <Menu />
+            </IconButton>
+          </SentimentSurface>,
+        ])}
+      </div>
+    );
+  },
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};

package/src/listItem/_stories/ListItem.story.tsx

@@ -252,7 +252,6 @@ const getPropsForPreview = (args: PreviewStoryArgs): [ListItemProps, Partial<Lis
 };
 
 export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
 

package/src/main.css

@@ -5346,7 +5346,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
-  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;
@@ -5406,9 +5405,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
-.wds-inline-prompt--auto-width {
-  width: auto;
-  width: initial;
+.wds-inline-prompt--full-width {
+  width: 100%;
 }
 .wds-inline-prompt--muted {
   opacity: 0.93;
@@ -5445,14 +5443,12 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-info-prompt {
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
 }
 .wds-info-prompt__content:has(.wds-info-prompt__title) {
   justify-content: flex-start;
@@ -5471,7 +5467,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;
@@ -7488,7 +7486,3 @@ html:not([dir="rtl"]) .np-navigation-option {
     min-width: fit-content;
   }
 }
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx

@@ -31,23 +31,7 @@ If you want to provide a custom label for screen readers, you can use the `aria-
 
 ## Media
 
-You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
-
-<Source
-  dark
-  code={`
-<ActionPrompt
-  media={{
-    'aria-hidden': true,
-    avatar: { asset: <People /> },
-  }}
-  title="Sync contacts for a faster experience"
-  ...
-/>
-`}
-/>
-
-You can also use `aria-label` on media assets to provide a custom label for screen readers.
+You can use `aria-label` on media assets to provide a custom label for screen readers.
 
 <Source
   dark

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -19,7 +19,3 @@
     min-width: fit-content;
   }
 }
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -20,8 +20,4 @@
       }
     }
   }
-
-  &__content{
-    max-width: calc(var(--size-48) * 10);
-  }
-}
+}