npm - @transferwise/components - Versions diffs - 46.135.2 → 46.136.0 - Mend

@transferwise/components 46.135.2 → 46.136.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
package/build/container/Container.js +24 -0
package/build/container/Container.js.map +1 -0
package/build/container/Container.mjs +20 -0
package/build/container/Container.mjs.map +1 -0
package/build/index.js +2 -0
package/build/index.js.map +1 -1
package/build/index.mjs +1 -0
package/build/index.mjs.map +1 -1
package/build/listItem/ListItem.js +2 -2
package/build/listItem/ListItem.js.map +1 -1
package/build/listItem/ListItem.mjs +2 -2
package/build/listItem/ListItem.mjs.map +1 -1
package/build/main.css +46 -0
package/build/styles/container/Container.css +38 -0
package/build/styles/main.css +46 -0
package/build/types/body/Body.d.ts +2 -2
package/build/types/container/Container.d.ts +16 -0
package/build/types/container/Container.d.ts.map +1 -0
package/build/types/container/index.d.ts +3 -0
package/build/types/container/index.d.ts.map +1 -0
package/build/types/iconButton/IconButton.d.ts +1 -1
package/build/types/index.d.ts +2 -0
package/build/types/index.d.ts.map +1 -1
package/build/types/listItem/Button/ListItemButton.d.ts +1 -1
package/build/types/listItem/ListItem.d.ts +1 -1
package/build/types/select/searchBox/SearchBox.d.ts +1 -1
package/build/types/title/Title.d.ts +2 -2
package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts +1 -1
package/package.json +3 -3
package/src/actionButton/ActionButton.story.tsx +4 -4
package/src/actionButton/ActionButton.test.story.tsx +4 -4
package/src/avatarWrapper/AvatarWrapper.tsx +3 -3
package/src/common/circle/Circle.story.tsx +3 -3
package/src/container/Container.css +38 -0
package/src/container/Container.less +39 -0
package/src/container/Container.story.tsx +130 -0
package/src/container/Container.test.tsx +37 -0
package/src/container/Container.tsx +37 -0
package/src/container/index.ts +2 -0
package/src/flowNavigation/FlowNavigation.story.tsx +16 -8
package/src/iconButton/IconButton.story.tsx +5 -6
package/src/iconButton/IconButton.test.story.tsx +8 -8
package/src/icons/Icons.story.tsx +381 -0
package/src/index.ts +2 -0
package/src/listItem/ListItem.test.tsx +24 -0
package/src/listItem/ListItem.tsx +2 -2
package/src/listItem/_stories/ListItem.context.test.story.tsx +63 -0
package/src/listItem/_stories/ListItem.scenarios.story.tsx +3 -3
package/src/main.css +46 -0
package/src/main.less +1 -0
package/src/moneyInput/MoneyInput.story.tsx +2 -2
package/src/navigationOption/NavigationOption.story.tsx +3 -3
package/src/overlayHeader/OverlayHeader.story.tsx +2 -2
package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +3 -3
package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +3 -3
package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx +1 -1
package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +3 -3
package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx +1 -1
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +5 -5
package/src/prompt/InlinePrompt/InlinePrompt.test.story.tsx +2 -2
package/src/select/Select.story.tsx +3 -3
package/src/select/option/Option.test.tsx +3 -3
package/src/summary/Summary.story.tsx +5 -5
package/src/summary/Summary.test.story.tsx +2 -2

package/src/flowNavigation/FlowNavigation.story.tsx CHANGED Viewed

@@ -11,6 +11,7 @@ import Display from '../display';
 import Sticky from '../sticky';
 import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';
+import Container from '../container';
 interface CustomControls {
   showCloseButton: boolean;
@@ -228,6 +229,9 @@ export const SendFlow: Story = {
     done: false,
     avatarURL: '../tapestry-01.png',
   },
+  parameters: {
+    padding: '0',
+  },
   render: (args) => {
     const [activeStep, setActiveStep] = useState(2);
     const steps = [
@@ -269,15 +273,19 @@ export const SendFlow: Story = {
           onClose={() => alert('close & move away')}
           onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
         />
-        <Body className="m-a-3">
-          <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
-          <br />
-          {lorem10}
-        </Body>
+        <Container size="narrow">
+          <Body className="m-a-3">
+            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+            <br />
+            {lorem10}
+          </Body>
+        </Container>
         <Sticky>
-          <div className="d-flex justify-content-center align-items-center p-a-3">
+          <Container
+            size="narrow"
+            className="d-flex justify-content-center align-items-center p-y-3"
+          >
             <Button
               v2
               disabled={activeStep === 3}
@@ -286,7 +294,7 @@ export const SendFlow: Story = {
             >
               Continue
             </Button>
-          </div>
+          </Container>
         </Sticky>
       </>
     );

package/src/iconButton/IconButton.story.tsx CHANGED Viewed

@@ -2,13 +2,12 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   ArrowLeft,
   Cross,
-  Defrost,
   Edit,
   Menu,
   Plus,
-  Settings,
+  Cog,
   Star,
-  Travel,
+  Suitcase,
   Briefcase,
   Bank,
   Freeze,
@@ -96,7 +95,7 @@ export const Priority: Story = {
         <Plus />
       </IconButton>
       <IconButton priority="secondary" type={args.type} aria-label="Secondary" onClick={fn()}>
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton priority="tertiary" type={args.type} aria-label="Tertiary" onClick={fn()}>
         <Star />
@@ -363,7 +362,7 @@ export const SentimentAwareness: Story = {
               type="default"
               onClick={fn()}
             >
-              <Settings />
+              <Cog />
             </IconButton>
             <IconButton
               size={args.size}
@@ -381,7 +380,7 @@ export const SentimentAwareness: Story = {
               type="default"
               onClick={fn()}
             >
-              <Travel />
+              <Suitcase />
             </IconButton>
             <IconButton
               size={args.size}

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

@@ -2,9 +2,9 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   Menu,
   Plus,
-  Settings,
+  Cog,
   Star,
-  Travel,
+  Suitcase,
   Cross,
   Edit,
   Briefcase,
@@ -109,7 +109,7 @@ export const Variants: Story = {
               type="default"
               onClick={fn()}
             >
-              <Settings />
+              <Cog />
             </IconButton>
             <IconButton
               size={size}
@@ -127,7 +127,7 @@ export const Variants: Story = {
               type="default"
               onClick={fn()}
             >
-              <Travel />
+              <Suitcase />
             </IconButton>
             <IconButton
               size={size}
@@ -261,13 +261,13 @@ export const KeyboardInteraction: Story = {
         type="default"
         onClick={fn()}
       >
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton size={48} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
         <Star />
       </IconButton>
       <IconButton size={48} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
-        <Travel />
+        <Suitcase />
       </IconButton>
       <IconButton
         size={48}
@@ -343,13 +343,13 @@ export const Zoom400: Story = {
         type="default"
         onClick={fn()}
       >
-        <Settings />
+        <Cog />
       </IconButton>
       <IconButton size={40} aria-label="Tertiary" priority="tertiary" type="default" onClick={fn()}>
         <Star />
       </IconButton>
       <IconButton size={40} aria-label="Minimal" priority="minimal" type="default" onClick={fn()}>
-        <Travel />
+        <Suitcase />
       </IconButton>
       <IconButton
         size={40}

package/src/icons/Icons.story.tsx ADDED Viewed

@@ -0,0 +1,381 @@
+import React, { useState, useCallback, memo, useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import * as AllIcons from '@transferwise/icons';
+import iconsPkg from '@transferwise/icons/package.json';
+import { ThemeProvider } from '@wise/components-theming';
+import Chips, { type ChipValue } from '../chips/Chips';
+import { SearchInput } from '../inputs/SearchInput';
+import SnackbarProvider from '../snackbar/SnackbarProvider';
+import useSnackbar from '../snackbar/useSnackbar';
+const ICONS_VERSION: string = iconsPkg.version;
+type IconComponent = React.FunctionComponent<{
+  size?: '16' | '24' | '32' | 16 | 24 | 32;
+  className?: string;
+  title?: string;
+}>;
+const ALIAS_TO_CANONICAL: Record<string, string> = {
+  Investments: 'Balance',
+  Holidays: 'Beach',
+  Rent: 'Building',
+  Insights: 'Bulb',
+  CardTransferwise: 'CardWise',
+  SalesAndRoyalties: 'CashRegister',
+  Settings: 'Cog',
+  Boxes: 'CostOfGoodsSold',
+  Car: 'DriversLicense',
+  Invite: 'GiftBox',
+  ContractServices: 'Handshake',
+  Do: 'HappyEmoji',
+  Emoji: 'HappyEmoji',
+  Cs: 'Headset',
+  Home: 'House',
+  Picture: 'Image',
+  Atm: 'InsertCard',
+  Activity: 'List',
+  TwoStep: 'MobileLock',
+  Unlock: 'PadlockUnlocked',
+  Lock: 'Padlock',
+  Salary: 'PayIn',
+  Recipients: 'People',
+  Tax: 'PercentageCircle',
+  Profile: 'Person',
+  Expenses: 'PieChart',
+  Help: 'QuestionMark',
+  HelpCircle: 'QuestionMarkCircle',
+  Refresh: 'Reload',
+  Dont: 'SadEmoji',
+  ECommerce: 'ShoppingBag',
+  Chat: 'SpeechBubble',
+  Pending: 'SpeechBubblePending',
+  Feedback: 'SpeechBubbleMessage',
+  Comments: 'SpeechBubbles',
+  OfficeExpenses: 'Stationery',
+  Travel: 'Suitcase',
+  Marketing: 'Target',
+  ExchangeRate: 'UpwardGraph',
+  OwnersWithdrawal: 'Withdrawal',
+  Family: 'Heart',
+  CalendarSuccess: 'CalendarCheck',
+  Dial: 'PinCode',
+  PendingCircle: 'Clock',
+  Verified: 'Check',
+  SoftwareAndWebHosting: 'SoftwareAndHosting',
+};
+const CANONICAL_TO_ALIASES: Record<string, string[]> = {};
+for (const [alias, canonical] of Object.entries(ALIAS_TO_CANONICAL)) {
+  if (!CANONICAL_TO_ALIASES[canonical]) {
+    CANONICAL_TO_ALIASES[canonical] = [];
+  }
+  CANONICAL_TO_ALIASES[canonical].push(alias);
+}
+type IconEntry = {
+  name: string;
+  component: IconComponent;
+  aliases: string[];
+  searchKey: string;
+};
+const iconEntries: IconEntry[] = Object.entries(AllIcons as Record<string, IconComponent>)
+  .filter(([name]) => !ALIAS_TO_CANONICAL[name])
+  .map(([name, component]) => {
+    const aliases = CANONICAL_TO_ALIASES[name] ?? [];
+    return {
+      name,
+      component,
+      aliases,
+      searchKey: [name, ...aliases].join(' ').toLowerCase(),
+    };
+  })
+  .sort((a, b) => a.name.localeCompare(b.name));
+const sizeChips = [
+  { value: 16, label: '16' },
+  { value: 24, label: '24' },
+  { value: 32, label: '32' },
+];
+const themeChips = [
+  { value: 'personal', label: 'Personal' },
+  { value: 'personal-dark', label: 'Dark' },
+  { value: 'bright-green', label: 'Bright Green' },
+  { value: 'forest-green', label: 'Forest Green' },
+];
+type ThemeSelection = {
+  theme: 'personal' | 'bright-green' | 'forest-green';
+  screenMode: 'light' | 'dark';
+};
+function resolveTheme(value: string): ThemeSelection {
+  if (value === 'personal-dark') return { theme: 'personal', screenMode: 'dark' };
+  return { theme: value as ThemeSelection['theme'], screenMode: 'light' };
+}
+const IconCell = memo(function IconCell({
+  name,
+  component: Icon,
+  aliases,
+  iconSize,
+  onCopy,
+}: {
+  name: string;
+  component: IconComponent;
+  aliases: string[];
+  iconSize: 16 | 24 | 32;
+  onCopy: (name: string) => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '12px 4px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        flex: 1,
+        background: hovered ? 'var(--color-background-neutral)' : 'transparent',
+        transition: 'background 150ms ease',
+      }}
+      role="button"
+      tabIndex={0}
+      aria-label={`Copy import for ${name}`}
+      onClick={() => onCopy(name)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onCopy(name);
+        }
+      }}
+    >
+      <div style={{ padding: '8px' }}>
+        <Icon size={iconSize} />
+      </div>
+      <span
+        style={{
+          textAlign: 'center',
+          wordBreak: 'break-word',
+          fontSize: '12px',
+          lineHeight: '1.3',
+        }}
+      >
+        {name}
+      </span>
+      {aliases.length > 0 && (
+        <span
+          style={{
+            textAlign: 'center',
+            wordBreak: 'break-word',
+            fontSize: '11px',
+            lineHeight: '1.3',
+            color: 'var(--color-content-tertiary)',
+          }}
+        >
+          alias: {aliases.join(', ')}
+        </span>
+      )}
+    </div>
+  );
+});
+function IconGallery() {
+  const [size, setSize] = useState<ChipValue>(32);
+  const [theme, setTheme] = useState<ChipValue>('personal');
+  const resolved = resolveTheme(String(theme));
+  return (
+    <SnackbarProvider timeout={2000}>
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        <Toolbar size={size} theme={theme} onSizeChange={setSize} onThemeChange={setTheme} />
+        <ThemeProvider theme={resolved.theme} screenMode={resolved.screenMode}>
+          <IconGrid size={size} screenMode={resolved.screenMode} />
+        </ThemeProvider>
+      </div>
+    </SnackbarProvider>
+  );
+}
+function Toolbar({
+  size,
+  onSizeChange,
+  theme,
+  onThemeChange,
+}: {
+  size: ChipValue;
+  onSizeChange: (v: ChipValue) => void;
+  theme: ChipValue;
+  onThemeChange: (v: ChipValue) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '12px 24px',
+        borderBottom: '1px solid var(--color-border-neutral)',
+        background: 'var(--color-background-elevated)',
+        flexShrink: 0,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', paddingRight: '12px' }}>
+        <span style={{ fontSize: '13px', fontWeight: 500, whiteSpace: 'nowrap' }}>Size</span>
+        <Chips
+          chips={sizeChips}
+          selected={size}
+          aria-label="Icon size"
+          onChange={({ selectedValue }) => onSizeChange(selectedValue)}
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <span style={{ fontSize: '13px', fontWeight: 500, whiteSpace: 'nowrap' }}>Theme</span>
+        <Chips
+          chips={themeChips}
+          selected={theme}
+          aria-label="Theme"
+          onChange={({ selectedValue }) => onThemeChange(selectedValue)}
+        />
+      </div>
+    </div>
+  );
+}
+function IconGrid({ size, screenMode }: { size: ChipValue; screenMode: 'light' | 'dark' }) {
+  const [search, setSearch] = useState('');
+  const gridRef = useRef<HTMLDivElement>(null);
+  const countRef = useRef<HTMLSpanElement>(null);
+  const createSnackbar = useSnackbar();
+  const iconSize = Number(size) as 16 | 24 | 32;
+  const handleCopy = useCallback(
+    async (name: string) => {
+      try {
+        await navigator.clipboard.writeText(`<${name} />`);
+        createSnackbar({
+          text: `Copied`,
+          theme: screenMode,
+        });
+      } catch (error) {
+        console.error('Failed to copy icon import to clipboard', error);
+        createSnackbar({
+          text: `Failed to copy`,
+          theme: screenMode,
+        });
+      }
+    },
+    [createSnackbar, screenMode],
+  );
+  const applyFilter = useCallback((query: string) => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const q = query.toLowerCase();
+    let visible = 0;
+    const children = grid.children as HTMLCollectionOf<HTMLElement>;
+    for (let i = 0; i < children.length; i += 1) {
+      const el = children[i];
+      const match = !q || (el.dataset.search?.includes(q) ?? false);
+      el.style.display = match ? '' : 'none';
+      if (match) visible += 1;
+    }
+    if (countRef.current) {
+      countRef.current.textContent = `${visible} icon${visible !== 1 ? 's' : ''}`;
+    }
+  }, []);
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value;
+      setSearch(val);
+      applyFilter(val);
+    },
+    [applyFilter],
+  );
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        padding: '24px',
+        background: 'var(--color-background-screen)',
+        color: 'var(--color-content-primary)',
+        flex: 1,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap' }}>
+        <div style={{ maxWidth: '320px', flex: 1 }}>
+          <SearchInput
+            placeholder="Search icons..."
+            value={search}
+            aria-label="Search icons"
+            onChange={handleSearchChange}
+          />
+        </div>
+        <span ref={countRef} style={{ fontSize: '13px', color: 'var(--color-content-secondary)' }}>
+          {iconEntries.length} icons
+        </span>
+        <code>@transferwise/icons@{ICONS_VERSION}</code>
+      </div>
+      <div style={{ fontSize: '11px', color: 'var(--color-content-tertiary)', lineHeight: '1.8' }}>
+        <div>
+          Icons package must be imported first:{' '}
+          <code>{`import { Bank } from '@transferwise/icons'`}</code>
+        </div>
+      </div>
+      <div
+        ref={gridRef}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+          gap: '12px',
+          gridAutoRows: '1fr',
+        }}
+      >
+        {iconEntries.map(({ name, component, aliases, searchKey }) => (
+          <div key={name} data-search={searchKey} style={{ display: 'flex' }}>
+            <IconCell
+              name={name}
+              component={component}
+              aliases={aliases}
+              iconSize={iconSize}
+              onCopy={handleCopy}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+const meta: Meta = {
+  title: 'Foundations/Icons',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    padding: '0',
+  },
+};
+export default meta;
+type Story = StoryObj;
+export const Gallery: Story = {
+  render: () => <IconGallery />,
+};

package/src/index.ts CHANGED Viewed

@@ -3,6 +3,7 @@
 /**
  * Types
  */
+export type { ContainerProps } from './container';
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
@@ -152,6 +153,7 @@ export { default as CheckboxOption } from './checkboxOption';
 export { default as Chevron } from './chevron';
 export { Chip, default as Chips } from './chips';
 export { default as CircularButton } from './circularButton';
+export { default as Container } from './container';
 export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/bottomSheet';
 export { default as BaseCard } from './common/baseCard';

package/src/listItem/ListItem.test.tsx CHANGED Viewed

@@ -1541,5 +1541,29 @@ describe('ListItem', () => {
         ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
     });
+    describe('dynamic context updates', () => {
+      it('should update Switch disabled state when ListItem disabled prop changes', () => {
+        const { rerender } = render(
+          <ListItem title={title} disabled={false} control={<ListItem.Switch onClick={cb} />} />,
+        );
+        const switchControl = screen.getByRole('switch');
+        expect(switchControl).toBeEnabled();
+        expect(screen.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+        rerender(<ListItem title={title} disabled control={<ListItem.Switch onClick={cb} />} />);
+        expect(switchControl).toBeDisabled();
+        expect(screen.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
+        rerender(
+          <ListItem title={title} disabled={false} control={<ListItem.Switch onClick={cb} />} />,
+        );
+        expect(switchControl).toBeEnabled();
+        expect(screen.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+      });
+    });
   });
 });

package/src/listItem/ListItem.tsx CHANGED Viewed

@@ -163,7 +163,7 @@ export const ListItem = ({
     return isFullyInteractive && !isButtonAsLink
       ? additionalInfoPrompt
       : `${titlesAndValues} ${additionalInfoPrompt}`;
-  }, [isFullyInteractive]);
+  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);
   const listItemContext = useMemo(
     () => ({
       setControlType,
@@ -175,7 +175,7 @@ export const ListItem = ({
       isPartiallyInteractive,
       describedByIds,
     }),
-    [describedByIds, mediaSize],
+    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],
   );
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',

package/src/listItem/_stories/ListItem.context.test.story.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+import { MultiCurrency } from '@transferwise/icons';
+import List from '../../list';
+import { ListItem, type ListItemProps } from '../ListItem';
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/Tests/Context Updates',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+/**
+ * Test: Dynamic state updates should propagate through listItemContext to control subcomponents.
+ * The Switch control toggles the disabled state of the ListItem.
+ * When disabled changes, the Switch should correctly update its disabled state via the context.
+ */
+export const DisabledToggle: Story = {
+  render: () => {
+    const [disabled, setDisabled] = useState(false);
+    return (
+      <List>
+        <ListItem
+          disabled={disabled}
+          title="Payment notifications"
+          subtitle={`ListItem disabled: ${disabled ? 'true' : 'false'}`}
+          media={
+            <ListItem.AvatarView>
+              <MultiCurrency />
+            </ListItem.AvatarView>
+          }
+          control={<ListItem.Switch checked={!disabled} onClick={() => setDisabled(!disabled)} />}
+        />
+      </List>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const switchControl = canvas.getByRole('switch');
+    // Initial state: disabled should be false, switch should be enabled and checked
+    await expect(switchControl).toBeEnabled();
+    await expect(switchControl).toBeChecked();
+    await expect(canvas.getByRole('listitem')).not.toHaveAttribute('aria-disabled', 'true');
+    // Click switch to set disabled to true
+    await userEvent.click(switchControl);
+    // Verify switch is now disabled and unchecked
+    await expect(switchControl).toBeDisabled();
+    await expect(switchControl).not.toBeChecked();
+    await expect(canvas.getByRole('listitem')).toHaveAttribute('aria-disabled', 'true');
+  },
+};

package/src/listItem/_stories/ListItem.scenarios.story.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import {
   InfoCircle,
   Documents,
   Warning,
-  Home,
+  House,
   Globe,
   People,
   Link as LinkIcon,
@@ -273,7 +273,7 @@ export const Summary: Story = storySourceWithoutNoise({
           subtitle="Update your payment address"
           media={
             <ListItem.AvatarView size={32}>
-              <Home />
+              <House />
             </ListItem.AvatarView>
           }
           additionalInfo={
@@ -287,7 +287,7 @@ export const Summary: Story = storySourceWithoutNoise({
           subtitle="Update your payment address"
           media={
             <ListItem.AvatarView size={32}>
-              <Home />
+              <House />
             </ListItem.AvatarView>
           }
           additionalInfo={