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

package/src/listItem/Radio/ListItemRadio.story.tsx

@@ -23,13 +23,6 @@ const meta: Meta<ListItemRadioProps> = {
     checked: false,
     onChange: fn(),
   },
-  argTypes: {
-    onChange: {
-      table: {
-        type: { summary: '(value: string | number) => void' },
-      },
-    },
-  },
 } satisfies Meta<ListItemRadioProps>;
 
 export default meta;
@@ -55,9 +48,6 @@ export const Playground: Story = {
  * Radio controls follow the native HTML behaviour and can be grouped using the `name` prop.
  */
 export const RadioGroup: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: function Render() {
     const [selectedValue, setSelectedValue] = useState('2');
 

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -8,6 +8,7 @@ import {
 import type { ListItemSwitchProps } from './ListItemSwitch';
 import { fn } from 'storybook/test';
 import { lorem10, lorem5 } from '../../test-utils';
+import { List } from '../List';
 
 const meta: Meta<ListItemSwitchProps> = {
   component: ListItem.Switch,
@@ -25,11 +26,6 @@ const meta: Meta<ListItemSwitchProps> = {
     checked: {
       control: 'boolean',
     },
-    onClick: {
-      table: {
-        type: { summary: '(event?: MouseEvent<HTMLButtonElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemSwitchProps>;
 
@@ -53,12 +49,9 @@ export const Playground: Story = {
 };
 
 export const States: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title={lorem5}
           subtitle={lorem10}
@@ -71,7 +64,7 @@ export const States: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.Switch {...args} />}
         />
-      </ol>
+      </List>
     );
   },
 };

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

@@ -12,7 +12,6 @@ import SnackbarProvider from '../../snackbar/SnackbarProvider';
 import Tooltip from '../../tooltip';
 import { Position } from '../../common';
 import { ListItem, type Props as ItemProps } from '../ListItem';
-import { storySourceWithoutNoise } from './helpers';
 import {
   SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -20,6 +19,36 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
 } from './subcomponents';
 
+/**
+ * Recent storybook versions render the full source including all story parameters which
+ * creates noise, this simple workaround only shows the render function.
+ * This is a workaround for the issue.
+ * @see https://github.com/storybookjs/storybook/issues/22281
+ */
+const storySourceWithoutNoise = (config: Story): Story => {
+  const newConfig: Story = {
+    ...config,
+    parameters: {
+      ...config.parameters,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      docs: {
+        ...config.parameters?.docs,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        source: {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ...config.parameters?.docs?.source,
+          type: 'code' as const,
+          transform: (code: string) =>
+            // eslint-disable-next-line regexp/no-super-linear-backtracking
+            code.replace(/storySourceWithoutNoise\(\{\s+render\s?:\s+(.*)\}\)$/gms, '$1'),
+        },
+      },
+    },
+  };
+
+  return newConfig;
+};
+
 export default {
   component: ListItem,
   title: 'Content/ListItem/common scenarios',
@@ -54,9 +83,6 @@ type Story = StoryObj<ItemProps>;
  * or `<ListItem.Prompt>`.
  */
 export const WithModals: Story = storySourceWithoutNoise({
-  parameters: {
-    controls: { disable: true },
-  },
   render: function WithModals(listItemProps) {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -105,9 +131,6 @@ export const WithModals: Story = storySourceWithoutNoise({
  * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
  */
 export const WithPopover: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: (listItemProps) => {
     return (
       <ListItem
@@ -129,9 +152,6 @@ export const WithPopover: Story = {
  * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
  */
 export const WithTooltip: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: (listItemProps) => {
     return (
       <ListItem
@@ -156,9 +176,6 @@ export const WithTooltip: Story = {
  * which may not be suitable or sufficient for your needs.
  */
 export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
-  parameters: {
-    controls: { disable: true },
-  },
   render: function CopyAndPaste() {
     const title = 'Artie Choke';
     const subtitle = 'Account holder';

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

@@ -10,20 +10,7 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
-import { disableControls, storySourceWithoutNoise, withoutKey } from './helpers';
-import Link from '../../link';
-
-const hideControls = disableControls([
-  'additionalInfo',
-  'control',
-  'prompt',
-  'media',
-  'className',
-  'id',
-  'role',
-  'aria-labelledby',
-  'as',
-]);
+import { List } from '../List';
 
 /**
  * List Items let users review or select options from a dynamic list.<br />
@@ -256,9 +243,9 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <ol className="list-unstyled">
+      <List key={args.disabled ? 'disabled' : 'enabled'} as="ol">
         <ListItem {...props} {...previewProps} />
-      </ol>
+      </List>
     );
   },
   argTypes: previewArgTypes,
@@ -271,17 +258,16 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     previewAdditionalInfoFull: 'non-interactive',
     previewAdditionalInfoPartial: 'non-interactive',
   },
-  decorators: [withoutKey],
 };
 
 /**
  * ListItem uses container queries under the hood, which means its layout self-adjusts based on
  * the available space. At the 100% zoom level, these breakpoints correspond to
- * containers under `290px`, those between `291px and 380px`, and finally everything including
- * and above `381px`. <br />
+ * containers under `320px`, those between `321px and 399px`, and finally everything including
+ * and above `400px`. <br />
  * This also supports high levels of zoom for assistive tech users.
  */
-export const Responsiveness: StoryObj<PreviewStoryArgs> = {
+export const Responsiveness: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -289,32 +275,42 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
       },
     },
   },
-  argTypes: {
-    ...hideControls(),
-    ...previewArgTypes,
-  },
-  args: {
-    subtitle: lorem10,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-  },
-  decorators: [withoutKey],
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
     return (
       <ol
         className="list-unstyled"
         style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
       >
-        <ListItem {...props} {...previewProps} />
-        <ListItem {...props} {...previewProps} />
-        <ListItem {...props} {...previewProps} />
+        <div style={{ width: '290px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={ADDITIONAL_INFO.nonInteractive}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
+        <div style={{ width: '350px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={ADDITIONAL_INFO.nonInteractive}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
+        <div style={{ width: '381px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={<div />}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
       </ol>
     );
   },
@@ -333,7 +329,7 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
  * **NB:** This behaviour is slightly different on mobile platforms as they have more control over
  * layout calculations.
  */
-export const ContentRatio: StoryObj<PreviewStoryArgs> = {
+export const ContentRatio: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -342,56 +338,45 @@ export const ContentRatio: StoryObj<PreviewStoryArgs> = {
     },
   },
   args: {
-    valueColumnWidth: 70,
-    subtitle: lorem5,
     valueTitle: `${lorem5} ${lorem5}`,
     valueSubtitle: lorem5,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-    as: 'div',
-  },
-  argTypes: {
-    ...hideControls(['disabled', 'spotlight']),
-    ...previewArgTypes,
+    valueColumnWidth: 70,
   },
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return <ListItem {...props} {...previewProps} />;
+    return (
+      <ListItem
+        {...args}
+        subtitle={lorem5}
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        media={MEDIA.image}
+        prompt={PROMPTS.interactive}
+      />
+    );
   },
 };
 
 /**
  * List item supports default and inverted title and description to allow for further flexibility
- * in the component. No other content elements are affected by this prop.
+ * in the component.
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#content-hierarchy) for more details.
  */
-export const ContentHierarchy: StoryObj<PreviewStoryArgs> = {
+export const ContentHierarchy: Story = {
   args: {
     inverted: true,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-    as: 'div',
-  },
-  argTypes: {
-    ...hideControls(['valueColumnWidth', 'disabled']),
-    ...previewArgTypes,
   },
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return <ListItem {...props} {...previewProps} />;
+    return (
+      <ListItem
+        {...args}
+        subtitle={lorem10}
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        media={MEDIA.image}
+        prompt={PROMPTS.interactive}
+      />
+    );
   },
 };
 
@@ -400,29 +385,28 @@ export const ContentHierarchy: StoryObj<PreviewStoryArgs> = {
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#spotlight) for more details.
  */
-export const Spotlight: StoryObj<PreviewStoryArgs> = {
-  argTypes: {
-    ...hideControls(['spotlight', 'valueColumnWidth']),
-    ...previewArgTypes,
-  },
-  args: {
-    subtitle: lorem10,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-  },
-  decorators: [withoutKey],
+export const Spotlight: Story = {
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
     return (
       <ol className="list-unstyled">
-        <ListItem {...props} {...previewProps} spotlight="inactive" />
-        <ListItem {...props} {...previewProps} spotlight="active" />
+        <ListItem
+          {...args}
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={CONTROLS.button}
+          media={MEDIA.image}
+          prompt={PROMPTS.interactive}
+          spotlight="inactive"
+        />
+        <ListItem
+          {...args}
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={CONTROLS.button}
+          media={MEDIA.image}
+          prompt={PROMPTS.interactive}
+          spotlight="active"
+        />
       </ol>
     );
   },
@@ -445,116 +429,74 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
  *
  * Please refer to the [design documentation](https://wise.design/components/list-item#interaction) for more details.
  */
-export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise({
-  argTypes: {
-    ...hideControls([
-      'title',
-      'subtitle',
-      'valueTitle',
-      'valueSubtitle',
-      'valueColumnWidth',
-      'inverted',
-    ]),
-  },
-  args: {
-    subtitle: lorem10,
-  },
-  decorators: [withoutKey],
-  render: function Render(args) {
+export const Interactivity: Story = {
+  render: function Render() {
     const [clicked, setClicked] = useState(0);
 
-    const renderPrompt = () => (
-      <ListItem.Prompt sentiment="positive">
-        Finally, there is a prompt{' '}
-        <Link href="https://wise.com" target="_blank" rel="noreferrer">
-          referencing some details
-        </Link>{' '}
-        for your convenience.
-      </ListItem.Prompt>
-    );
-
-    const renderInteractiveInfo = () => (
-      <ListItem.AdditionalInfo
-        action={{
-          label: 'Details about the subject.',
-          href: 'https://wise.com',
-          target: '_blank',
-        }}
-      >
-        Which is augmented with additional info.
-      </ListItem.AdditionalInfo>
-    );
-
-    const renderStaticInfo = () => (
-      <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
-    );
-
     return (
       <>
         <label>Count: {clicked}</label>
-        <ol className="list-unstyled">
-          <ListItem
-            {...args}
-            title="Fully interactive"
-            control={
-              <ListItem.Button
-                priority="secondary-neutral"
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                as Button
-              </ListItem.Button>
-            }
-            additionalInfo={renderStaticInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Partially interactive"
-            control={
-              <ListItem.Button
-                priority="secondary-neutral"
-                partiallyInteractive
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                as Button
-              </ListItem.Button>
-            }
-            additionalInfo={renderInteractiveInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Fully interactive"
-            control={
-              <ListItem.IconButton
-                aria-label="Add something to me"
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                <Plus />
-              </ListItem.IconButton>
-            }
-            additionalInfo={renderStaticInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Partially interactive"
-            control={
-              <ListItem.IconButton
-                partiallyInteractive
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                <Plus />
-              </ListItem.IconButton>
-            }
-            additionalInfo={renderInteractiveInfo()}
-            prompt={renderPrompt()}
-          />
-        </ol>
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              as Button
+            </ListItem.Button>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.interactive}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              partiallyInteractive
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              as Button
+            </ListItem.Button>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={
+            <ListItem.IconButton
+              aria-label="Add something to me"
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              <Plus />
+            </ListItem.IconButton>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.interactive}
+          control={
+            <ListItem.IconButton
+              partiallyInteractive
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              <Plus />
+            </ListItem.IconButton>
+          }
+          prompt={PROMPTS.interactive}
+        />
       </>
     );
   },
-});
+};
 
 /**
  * While most disabled states will show as grayed out, the navigation control switches from chevron
@@ -571,11 +513,9 @@ export const Disabled: Story = {
         sourceState: 'hidden',
       },
     },
-    controls: { disable: true },
-    knobs: { disable: true },
   },
-  render: (args) => (
-    <ol className="list-unstyled">
+  render: () => (
+    <div>
       <ListItem
         disabled
         media={
@@ -729,7 +669,7 @@ export const Disabled: Story = {
           </ListItem.Button>
         }
       />
-    </ol>
+    </div>
   ),
 };
 
@@ -742,9 +682,6 @@ export const Disabled: Story = {
  * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
  */
 export const StylingLabels: Story = {
-  argTypes: {
-    ...hideControls(['spotlight', 'valueColumnWidth']),
-  },
   args: {
     title: lorem5,
     subtitle: lorem10,
@@ -752,7 +689,6 @@ export const StylingLabels: Story = {
     control: CONTROLS.iconButton,
     prompt: PROMPTS.interactive,
   },
-  decorators: [withoutKey],
   render: function Render(args) {
     return (
       <ol className="list-unstyled">

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

@@ -9,6 +9,7 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   type SB_ListItem_ControlType as ControlType,
 } from './subcomponents';
+import { List } from '../List';
 
 export default {
   component: ListItem,
@@ -143,7 +144,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   return storyConfig(
     {
       render: () => (
-        <ol className="list-unstyled">
+        <List as="ol">
           {variants.map((variant, variantIndex) => (
             <ListItem
               key={`${controlType}-${variantIndex}-${Math.random()}`}
@@ -151,7 +152,7 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
               {...variant}
             />
           ))}
-        </ol>
+        </List>
       ),
     },
     { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
@@ -177,7 +178,7 @@ export const Switch = generateVariantsForControl('switch');
 
 export const ButtonControlLabel: Story = {
   render: () => (
-    <ol className="list-unstyled">
+    <List as="ol">
       <ListItem
         title="Fully interactive button."
         subtitle="It uses default content hierarchy."
@@ -261,6 +262,6 @@ export const ButtonControlLabel: Story = {
         control={CONTROLS.buttonAsLink}
         prompt={PROMPTS.nonInteractive}
       />
-    </ol>
+    </List>
   ),
 };

package/src/listItem/index.ts

@@ -12,3 +12,6 @@ export type { ListItemRadioProps } from './Radio';
 export type { ListItemSwitchProps } from './Switch';
 
 export { default } from './ListItem';
+
+export { List } from './List';
+export type { ListProps } from './List';

package/src/switch/Switch.tsx

@@ -20,7 +20,7 @@ export type SwitchProps = CommonProps & {
   /** ID to apply to the switch container */
   id?: string;
   /** Function called when the switch is toggled */
-  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;
+  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
 };
 
 const Switch = (props: SwitchProps) => {

package/build/legacylistItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAK,CAAC;AACzE;;;;"}