@transferwise/components 0.0.0-experimental-a12c97e → 0.0.0-experimental-e1870f3

package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx

@@ -2,11 +2,11 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Flag } from '@wise/art';
 import { lorem10 } from '../../test-utils';
 import { ListItem } from '../ListItem';
+import { List } from '../List';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';
 
 export default {
@@ -64,10 +64,9 @@ export const Playground: Story = {
  * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
  */
 export const Orientations: Story = {
-  argTypes: disableControls()(['orientation']),
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Horizontal orientation"
           subtitle={lorem10}
@@ -81,7 +80,7 @@ export const Orientations: Story = {
           media={<ListItem.AvatarLayout {...args} orientation="diagonal" />}
           control={CONTROLS.iconButton}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -97,13 +96,12 @@ export const Sizes: Story = {
       },
     },
   },
-  argTypes: disableControls()(['size', 'orientation']),
   render: (args) => {
     const sizes = [32, 40, 48, 56, 72] as const;
     const orientations = ['horizontal', 'diagonal'] as const;
 
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         {orientations.map((orientation) =>
           sizes.map((size) => (
             <ListItem
@@ -115,7 +113,7 @@ export const Sizes: Story = {
             />
           )),
         )}
-      </ol>
+      </List>
     );
   },
 };

package/src/listItem/AvatarView/ListItemAvatarView.story.tsx

@@ -1,16 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Leaf, Taxi } from '@transferwise/icons';
-import { lorem10 } from '../../test-utils';
-import { ProfileType } from '../../common';
 import { ListItem } from '../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import { ListItemAvatarViewProps } from './ListItemAvatarView';
-
-const hideControls = disableControls(['badge', 'children']);
+import { lorem10 } from '../../test-utils';
+import { ProfileType } from '../../common';
+import { List } from '../List';
 
 const SIZES = [32, 40, 48, 56, 72] as const;
 const BADGES = {
@@ -81,11 +79,8 @@ export default {
     },
     profileType: {
       control: 'select',
-      options: [ProfileType.PERSONAL, ProfileType.BUSINESS],
+      options: ['personal', 'business'],
       description: 'Type of profile for default icons',
-      table: {
-        type: { summary: 'ProfileType' },
-      },
     },
     notification: {
       control: 'boolean',
@@ -139,7 +134,6 @@ export const ContentTypes: Story = {
   args: {
     badge: undefined,
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType']),
   parameters: {
     docs: {
       canvas: {
@@ -217,10 +211,9 @@ export const Sizes: Story = {
       },
     },
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'size']),
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -234,7 +227,7 @@ export const Sizes: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </ol>
+      </List>
     );
   },
 };
@@ -254,17 +247,9 @@ export const Notification: Story = {
   args: {
     badge: undefined,
   },
-  argTypes: hideControls([
-    'profileName',
-    'imgSrc',
-    'profileType',
-    'size',
-    'notification',
-    'selected',
-  ]),
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         {SIZES.map((size) => (
           <ListItem
             key={size}
@@ -278,7 +263,7 @@ export const Notification: Story = {
             control={CONTROLS.iconButton}
           />
         ))}
-      </ol>
+      </List>
     );
   },
 };
@@ -291,7 +276,6 @@ export const Badges: Story = {
   args: {
     imgSrc: '../avatar-square-dude.webp',
   },
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
   parameters: {
     docs: {
       canvas: {
@@ -320,7 +304,6 @@ export const Badges: Story = {
  * AvatarView supports selected state for interactive contexts.
  */
 export const Selected: Story = {
-  argTypes: hideControls(['profileName', 'imgSrc', 'profileType', 'notification', 'selected']),
   render: (args) => {
     return (
       <ol className="list-unstyled">

package/src/listItem/Button/ListItemButton.story.tsx

@@ -7,15 +7,7 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
 import type { ListItemButtonProps } from './ListItemButton';
-import { disableControls } from '../_stories/helpers';
-
-const hideControls = disableControls([
-  'onClick',
-  'children',
-  'className',
-  'addonStart',
-  'addonEnd',
-]);
+import { List } from '../List';
 
 /**
  * Convenience controls for previewing rich markup,
@@ -137,11 +129,6 @@ const meta: Meta<typeof ListItem.Button> = {
     addonEnd: {
       description: 'Icon accessory to be displayed after the label',
     },
-    onClick: {
-      table: {
-        type: { summary: '(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemButtonProps>;
 
@@ -189,35 +176,27 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
  */
-export const Interactivity: StoryObj<PreviewStoryArgs> = {
+export const Interactivity: Story = {
   args: {
     children: 'Action',
-    previewAddonStart: false,
-    previewAddonEnd: false,
   },
-  argTypes: {
-    ...hideControls(['partiallyInteractive']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+  render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Fully interactive ListItem"
           subtitle="Button in fully interactive context"
           media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...props} {...previewProps} />}
+          control={<ListItem.Button {...args} />}
         />
 
         <ListItem
           title="Partially interactive ListItem"
           subtitle="Button in partially interactive context"
           media={MEDIA.avatarSingle}
-          control={<ListItem.Button {...props} {...previewProps} partiallyInteractive />}
+          control={<ListItem.Button {...args} partiallyInteractive />}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -225,27 +204,20 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = {
 /**
  * If `href` prop is set, the component will be automatically rendered as an HTML anchor element.
  */
-export const AsAnchor: StoryObj<PreviewStoryArgs> = {
+export const AsAnchor: Story = {
   args: {
     children: 'Visit link',
     href: 'https://wise.com',
     target: '_blank',
-    previewAddonStart: false,
-    previewAddonEnd: false,
   },
-  argTypes: {
-    ...hideControls(['partiallyInteractive']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+  render: (args: ListItemButtonProps) => {
     return (
       <ListItem
-        title="List item with a Button control"
-        subtitle="But it renders as HTML anchor element"
+        title="List item with button link"
+        subtitle="Button rendered as anchor element"
         media={MEDIA.avatarSingle}
-        control={<ListItem.Button {...props} {...previewProps} />}
+        control={<ListItem.Button {...args} />}
+        additionalInfo={INFO.nonInteractive}
       />
     );
   },
@@ -256,27 +228,16 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
  * [Design documentation](https://wise.design/components/button#types)
  */
-export const Sentiment: StoryObj<PreviewStoryArgs> = {
-  args: {
-    children: 'Button text',
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['sentiment', 'priority']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Sentiment: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Default Sentiment - Primary"
           subtitle="Default sentiment with primary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary">
+            <ListItem.Button {...args} priority="primary">
               Default Sentiment
             </ListItem.Button>
           }
@@ -286,7 +247,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Negative sentiment with primary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary" sentiment="negative">
+            <ListItem.Button {...args} priority="primary" sentiment="negative">
               Negative Sentiment
             </ListItem.Button>
           }
@@ -296,7 +257,7 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Default sentiment with secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary">
+            <ListItem.Button {...args} priority="secondary">
               Default Sentiment
             </ListItem.Button>
           }
@@ -306,14 +267,17 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
           subtitle="Negative sentiment with secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary" sentiment="negative">
+            <ListItem.Button {...args} priority="secondary" sentiment="negative">
               Negative Sentiment
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };
 
 /**
@@ -321,27 +285,16 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
  * screen to help more important buttons to take precedence over others. <br />
  * [Design documentation](https://wise.design/components/button#priorities)
  */
-export const Priority: StoryObj<PreviewStoryArgs> = {
-  args: {
-    children: 'Button text',
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['priority']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Priority: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Primary Priority"
           subtitle="Primary priority (default)"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="primary">
+            <ListItem.Button {...args} priority="primary">
               Primary Priority
             </ListItem.Button>
           }
@@ -351,7 +304,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Secondary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary">
+            <ListItem.Button {...args} priority="secondary">
               Secondary Priority
             </ListItem.Button>
           }
@@ -361,7 +314,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Secondary neutral priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="secondary-neutral">
+            <ListItem.Button {...args} priority="secondary-neutral">
               Secondary Neutral Priority
             </ListItem.Button>
           }
@@ -371,46 +324,37 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
           subtitle="Tertiary priority"
           media={MEDIA.avatarSingle}
           control={
-            <ListItem.Button {...props} {...previewProps} priority="tertiary">
+            <ListItem.Button {...args} priority="tertiary">
               Tertiary Priority
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };
 
 /**
  * Button in loading state.
  */
-export const Loading: StoryObj<PreviewStoryArgs> = {
-  args: {
-    loading: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  argTypes: {
-    ...hideControls(['loading']),
-    ...previewArgTypes,
-  },
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
+export const Loading: Story = {
+  render: (args: ListItemButtonProps) => {
     return (
       <ListItem
         title="Loading Button"
         subtitle="Button in loading state"
         media={MEDIA.avatarSingle}
-        control={
-          <ListItem.Button {...props} {...previewProps}>
-            Loading Button
-          </ListItem.Button>
-        }
+        control={<ListItem.Button {...args}>Loading Button</ListItem.Button>}
         additionalInfo={INFO.nonInteractive}
       />
     );
   },
+  args: {
+    loading: true,
+  },
 };
 
 const addonProps = {
@@ -423,13 +367,9 @@ const addonProps = {
  * **NB:** ListItem.Button only supports icon addons.
  */
 export const WithIcons: Story = {
-  args: {
-    children: 'Button text',
-  },
-  argTypes: hideControls(),
   render: (args: ListItemButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="With Start Icon"
           subtitle="Button with icon before the label"
@@ -460,7 +400,10 @@ export const WithIcons: Story = {
             </ListItem.Button>
           }
         />
-      </ol>
+      </List>
     );
   },
+  args: {
+    children: 'Button text',
+  },
 };

package/src/listItem/Checkbox/ListItemCheckbox.story.tsx

@@ -32,21 +32,6 @@ const meta: Meta<ListItemCheckboxProps> = {
     indeterminate: {
       control: 'boolean',
     },
-    onChange: {
-      table: {
-        type: { summary: '(event: ChangeEvent<HTMLInputElement>) => void' },
-      },
-    },
-    onFocus: {
-      table: {
-        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
-      },
-    },
-    onBlur: {
-      table: {
-        type: { summary: '(event: FocusEvent<HTMLInputElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemCheckboxProps>;
 
@@ -73,9 +58,6 @@ export const Playground: Story = {
  * Checkbox controls demonstrate different states including checked, unchecked, and indeterminate.
  */
 export const States: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: function Render() {
     const [isChecked0, setisChecked0] = useState(false);
     const [isChecked1, setisChecked1] = useState(true);

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -1,22 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import ListItem, { List } from '..';
 import { Edit } from '@transferwise/icons';
-import { fn } from 'storybook/test';
-import { ListItem } from '../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_MEDIA as MEDIA,
   SB_LIST_ITEM_PROMPTS as PROMPTS,
 } from '../_stories/subcomponents';
-import { disableControls } from '../_stories/helpers';
 import type { ListItemIconButtonProps } from './ListItemIconButton';
-
-const hideControls = disableControls([
-  'onClick',
-  'children',
-  'className',
-  'addonStart',
-  'addonEnd',
-]);
+import { fn } from 'storybook/test';
 
 /**
  * Use IconButton to provide compact action controls within a ListItem context using iconography.
@@ -121,10 +112,9 @@ export const Interactivity: Story = {
   args: {
     children: <Edit />,
   },
-  argTypes: hideControls(['partiallyInteractive']),
   render: (args: ListItemIconButtonProps) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           control={<ListItem.IconButton {...args} />}
           title="Fully interactive ListItem"
@@ -142,7 +132,7 @@ export const Interactivity: Story = {
           additionalInfo={INFO.interactive}
           prompt={PROMPTS.interactive}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -153,10 +143,9 @@ export const Interactivity: Story = {
  * [Design documentation](https://wise.design/components/icon-button#types)
  */
 export const Sentiment: Story = {
-  argTypes: hideControls(['sentiment', 'priority']),
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           control={<ListItem.IconButton {...args} priority="primary" type="default" />}
           title="Default Sentiment - Primary"
@@ -181,7 +170,7 @@ export const Sentiment: Story = {
           subtitle="Negative sentiment with secondary priority"
           media={MEDIA.avatarSingle}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -192,10 +181,9 @@ export const Sentiment: Story = {
  * [Design documentation](https://wise.design/components/icon-button#priorities)
  */
 export const Priority: Story = {
-  argTypes: hideControls(['sentiment', 'priority']),
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title="Primary Priority"
           subtitle="Primary priority (default)"
@@ -220,7 +208,7 @@ export const Priority: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.IconButton {...args} priority="minimal" />}
         />
-      </ol>
+      </List>
     );
   },
 };
@@ -235,7 +223,6 @@ export const AsAnchor: Story = {
     target: '_blank',
     onClick: undefined,
   },
-  argTypes: hideControls(),
   render: (args: ListItemIconButtonProps) => {
     return (
       <ListItem

package/src/listItem/List.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+export interface ListProps {
+  as?: 'ul' | 'ol' | 'div';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function List({ as: Element = 'ul', className, children }: ListProps) {
+  return <Element className={clsx('wds-list', 'list-unstyled', className)}>{children}</Element>;
+}

package/src/listItem/Navigation/ListItemNavigation.story.tsx

@@ -1,6 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import { lorem10 } from '../../test-utils';
 import { ListItem } from '../ListItem';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
@@ -8,6 +6,8 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from '../_stories/subcomponents';
 import type { ListItemNavigationProps } from './ListItemNavigation';
+import { lorem10 } from '../../test-utils';
+import { fn } from 'storybook/test';
 
 const meta: Meta<ListItemNavigationProps> = {
   component: ListItem.Navigation,
@@ -62,9 +62,6 @@ export const AsButton: Story = {
   args: {
     onClick: fn(),
   },
-  parameters: {
-    controls: { disable: true },
-  },
   render: (args) => {
     return (
       <ol className="list-unstyled">

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

@@ -3,7 +3,7 @@ import { action } from 'storybook/actions';
 import { lorem10, lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { Sentiment as Sentiments } from '../../common';
-import { ListItem } from '../..';
+import { List, ListItem } from '../..';
 import { Prompt, ListItemPromptProps } from './ListItemPrompt';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -74,7 +74,7 @@ export const Sentiment: Story = {
     knobs: { disable: true },
   },
   render: (args) => (
-    <ol className="list-unstyled">
+    <List as="ol">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -103,7 +103,7 @@ export const Sentiment: Story = {
         control={CONTROLS.switch}
         prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
       />
-    </ol>
+    </List>
   ),
 };
 
@@ -122,7 +122,7 @@ export const Interactivity: Story = {
     },
   },
   render: (args) => (
-    <ol className="list-unstyled">
+    <List as="ol">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -154,7 +154,7 @@ export const Interactivity: Story = {
           </Prompt>
         }
       />
-    </ol>
+    </List>
   ),
 };
 
@@ -172,7 +172,7 @@ export const Sizing: Story = {
     },
   },
   render: (args) => (
-    <ol className="list-unstyled">
+    <List as="ol">
       <ListItem
         title={lorem5}
         subtitle={lorem10}
@@ -196,6 +196,6 @@ export const Sizing: Story = {
           </ListItem.Prompt>
         }
       />
-    </ol>
+    </List>
   ),
 };