@transferwise/components 0.0.0-experimental-a12c97e → 0.0.0-experimental-302d967

package/src/listItem/ListItem.less

@@ -7,7 +7,7 @@
   border-radius: var(--radius-medium);
   background-color: var(--color-background-screen);
   position: relative;
-  padding: var(--size-12) 0;
+  padding: var(--size-12);
   container-type: inline-size;
 
   & + .wds-list-item-spotlight,
@@ -47,6 +47,12 @@
       outline: none;
     }
 
+    &:has(.wds-list-item-control:focus-visible),
+    &:has(input[type="checkbox"]:focus-visible) {
+      .ring();
+      outline-offset: -1px;
+    }
+
     .wds-list-item-additional-info {
       .ring-offset-0
     }
@@ -70,102 +76,58 @@
       }
     }
 
-    // spotlighted list item has extra horizontal padding so the focus
-    // and hover styles can be rendered within the main container.
-    &.wds-list-item-spotlight {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        .ring();
-        outline-offset: -1px;
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover {
-          background-color: unset;
+    &:not(.disabled, :disabled):hover {
+        background-color: var(--color-background-screen-hover);
+
+        .wds-list-item-control-wrapper {
+            .wds-Button {
+              background-color: var(--Button-background-hover);
+              color: var(--Button-color-hover);
+              transition: none;
+            }
         }
-      }
     }
 
-    // non-spotlighted list item has no horizontal padding so the focus
-    // and hover styles have to be rendered out of bounds.
-    &:not(.wds-list-item-spotlight) {
-      &:has(.wds-list-item-control:focus-visible),
-      &:has(input[type="checkbox"]:focus-visible) {
-        &:before {
-          .ring();
-          content: '';
-          position: absolute;
-          inset: 0 -8px;
-          border-radius: var(--radius-medium);
-          outline-offset: -1px;
-        }
-      }
-
-      &:not(.disabled, :disabled) {
-        &:hover,
-        &:active {
-          &:before {
-            content: '';
-            position: absolute;
-            inset: 0 -8px;
-            border-radius: var(--radius-medium);
-          }
-        }
-
-        &:hover:before {
-          background-color: var(--color-background-screen-hover);
-        }
-
-        &:active:before {
-          background-color: var(--color-background-screen-active);
-        }
-      }
-
-      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-        &:hover:before {
-          background-color: unset;
-        }
-      }
+    &:not(.disabled, :disabled):active {
+        background-color: var(--color-background-screen-active);
     }
 
-    &:not(.disabled, :disabled):hover {
-      .wds-list-item-control-wrapper {
+    .wds-list-item-button-control {
         .wds-Button {
-          background-color: var(--Button-background-hover);
-          color: var(--Button-color-hover);
           transition: none;
         }
       }
-    }
 
-    .wds-list-item-button-control {
-        .wds-Button {
-          transition: none;
-        }
+    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
+      &:hover {
+        background-color: unset;
+      }
     }
   }
 
   &-media {
     grid-area: media;
+    display: flex;
+    align-items: center;
 
-      &-image {
-          width: var(--item-media-image-size);
-          height: var(--item-media-image-size);
-      }
+    &-image-wrapper {
+      width: var(--wds-list-item-media-size);
+      height: var(--wds-list-item-media-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
   }
 
   &-body {
     grid-area: body;
+    align-items: center;
     width: 100%;
     display: grid;
     grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
@@ -173,8 +135,18 @@
     word-break: break-word;
   }
 
-  &-title, &-title-value {
-      color: var(--color-content-primary);
+  &-title {
+    color: var(--color-content-primary);
+  }
+
+  &-value {
+    text-align: right;
+  }
+
+  &-body-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
 
   &-additional-info {
@@ -183,13 +155,16 @@
       margin-top: calc(var(--size-4) * -1);
   }
 
-  &-value {
-      align-items: end;
-      text-align: right;
-  }
-
   &-control-wrapper {
       grid-area: control;
+      align-content: center;
+    //  max-height: var(--wds-list-item-control-wrapper-height);
+  }
+
+  &-navigation {
+    .tw-icon-chevron-right {
+      color: var(--color-interactive-secondary);
+    }
   }
 
   &-control {
@@ -212,9 +187,6 @@
 
 
   &-spotlight {
-      padding-left: var(--size-12);
-      padding-right: var(--size-12);
-
       &-active {
           background-color: var(--color-background-neutral);
           &:not(.disabled, :disabled):hover {
@@ -227,7 +199,7 @@
 
       &-inactive {
           background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-
+          border: 1px dashed var(--color-border-neutral);
           &:not(.disabled, :disabled):hover {
               background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
           }
@@ -237,31 +209,6 @@
       }
   }
 
-  .wds-list-item-spotlight__border{
-    position: absolute;
-    inset:0;
-    width: 100%;
-    height: 100%;
-
-    rect {
-      --wds-list-item-spotlight-borderWidth: 1px;
-      --wds-list-item-spotlight-borderWidthOffset: .5px; // half of the border width to center the border
-      --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * .5);
-
-      fill: none;
-      stroke: var(--color-border-neutral);
-      width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-      height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
-      x: var(--wds-list-item-spotlight-borderWidthOffset);
-      y: var(--wds-list-item-spotlight-borderWidthOffset);
-      rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-      ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
-      stroke-dasharray:
-        var(--wds-list-item-spotlight-strokeDashSize)
-        var(--wds-list-item-spotlight-strokeDashSize);
-    }
-  }
-
   &-prompt {
     grid-area: prompt;
 

package/src/listItem/ListItem.tsx

@@ -4,6 +4,7 @@ import {
   useId,
   useMemo,
   useState,
+  useEffect,
   type PropsWithChildren,
   type ReactNode,
 } from 'react';
@@ -22,7 +23,11 @@ import { AvatarView } from './AvatarView';
 import { Image } from './Image';
 import { Prompt } from './Prompt';
 import { PrimitiveAnchor } from '../primitives';
-import { ListItemContext, type ListItemContextData } from './ListItemContext';
+import {
+  ListItemContext,
+  type ListItemContextData,
+  type ListItemMediaSize,
+} from './ListItemContext';
 
 export type ListItemTypes =
   | 'non-interactive'
@@ -119,6 +124,8 @@ export const ListItem = ({
   const idPrefix = useId();
   const [controlProps, setControlProps] = useState<ListItemControlProps>({});
   const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
+  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();
+
   const ids: ListItemContextData['ids'] = {
     title: `${idPrefix}_title`,
     ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),
@@ -156,11 +163,13 @@ export const ListItem = ({
     () => ({
       setControlType,
       setControlProps,
+      setMediaSize,
       ids,
       props: { disabled, inverted },
+      mediaSize,
       describedByIds,
     }),
-    [describedByIds],
+    [describedByIds, mediaSize],
   );
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
@@ -227,12 +236,6 @@ export const ListItem = ({
         aria-disabled={disabled}
         aria-labelledby={ariaLabelledby}
       >
-        {spotlight === 'inactive' && (
-          <svg aria-hidden="true" className="wds-list-item-spotlight__border">
-            <rect />
-          </svg>
-        )}
-
         <View
           {...{
             isPartiallyInteractive,
@@ -253,7 +256,11 @@ export const ListItem = ({
             style={valueColumnWidth ? gridColumnsStyle : undefined}
           >
             {/* Title + Subtitle + Values - Group */}
-            <span>
+            <span
+              className={clsx({
+                'wds-list-item-body-center': title && !subtitle,
+              })}
+            >
               {(() => {
                 const titles = [
                   <Body
@@ -280,6 +287,8 @@ export const ListItem = ({
               <span
                 className={clsx('wds-list-item-value', {
                   'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
+                  'wds-list-item-body-center':
+                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
                 })}
               >
                 {(() => {
@@ -318,6 +327,11 @@ export const ListItem = ({
               className={clsx('wds-list-item-control-wrapper', {
                 'wds-list-item-button-control': controlType === 'button',
               })}
+              style={
+                {
+                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',
+                } as React.CSSProperties
+              }
             >
               {control}
             </Body>
@@ -370,7 +384,6 @@ function View({
           href={(controlProps as ListItemNavigationProps)?.href}
           target={(controlProps as ListItemNavigationProps)?.target}
           className={clsx('wds-list-item-view d-flex flex-row', {
-            'align-items-center': !subtitle,
             'wds-list-item-control': controlType === 'navigation',
           })}
           disabled={disabled}
@@ -386,13 +399,7 @@ function View({
   if (isPartiallyInteractive || controlType === 'non-interactive') {
     return (
       <div className={clsx('wds-list-item-gridWrapper', className)}>
-        <div
-          className={clsx('wds-list-item-view d-flex flex-row', {
-            'align-items-center': !subtitle,
-          })}
-        >
-          {children}
-        </div>
+        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>
 
         {renderExtras()}
       </div>
@@ -407,7 +414,6 @@ function View({
       <label
         htmlFor={ids.control}
         className={clsx('wds-list-item-view', {
-          'align-items-center': !subtitle,
           clickable: !disabled,
           fullyInteractive: !isPartiallyInteractive,
         })}

package/src/listItem/ListItemContext.tsx

@@ -1,9 +1,13 @@
 import { createContext } from 'react';
 import type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';
+import type { ListItemAvatarViewProps } from './AvatarView';
+
+export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
 
 export type ListItemContextData = {
   setControlType: (type: ListItemTypes) => void;
   setControlProps: (props: ListItemControlProps) => void;
+  setMediaSize: (size: ListItemMediaSize | undefined) => void;
   ids: {
     title: string;
     subtitle?: string;
@@ -14,6 +18,7 @@ export type ListItemContextData = {
     prompt?: string;
   };
   props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+  mediaSize?: ListItemAvatarViewProps['size'];
   describedByIds: string;
 };
 

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/Navigation/ListItemNavigation.tsx

@@ -19,7 +19,7 @@ export const Navigation = function Navigation({ href = '#', ...props }: ListItem
   const { baseItemProps } = useListItemControl('navigation', { href, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
   const isLink = href !== '#';
-  const icon = <ChevronRight size={24} />;
+  const icon = <ChevronRight size={16} />;
 
   if (baseItemProps.disabled) return <BackslashCircle size={24} />;
 

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

@@ -25,11 +25,6 @@ const meta: Meta<ListItemSwitchProps> = {
     checked: {
       control: 'boolean',
     },
-    onClick: {
-      table: {
-        type: { summary: '(event?: MouseEvent<HTMLButtonElement>) => void' },
-      },
-    },
   },
 } satisfies Meta<ListItemSwitchProps>;
 
@@ -53,9 +48,6 @@ export const Playground: Story = {
 };
 
 export const States: Story = {
-  parameters: {
-    controls: { disable: true },
-  },
   render: (args) => {
     return (
       <ol className="list-unstyled">

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

@@ -2,8 +2,12 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Bank, FastFlag, MultiCurrency, Receipt, Savings } from '@transferwise/icons';
 import Link from '../../link';
 import { ListItem, Props as ItemProps } from '../ListItem';
-import { lorem10, lorem5 } from '../../test-utils';
+import { lorem10, lorem20, lorem5 } from '../../test-utils';
 import { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
+import portraitImage from './images/portrait.svg';
+import landscapeImage from './images/landscape.svg';
+import type { ListItemButtonProps } from '../Button';
+import { ListItemMediaSize } from '../ListItemContext';
 
 const withSizedContainer = (width: number) => (Story: any) => (
   <ol
@@ -20,7 +24,6 @@ const withSizedContainer = (width: number) => (Story: any) => (
 );
 
 export default {
-  component: ListItem,
   title: 'Content/ListItem/tests/layout',
   tags: ['!autodocs'],
   parameters: {
@@ -187,3 +190,140 @@ export const GapsBetweenItems: Story = {
     );
   },
 };
+
+type PreviewStoryArgs = ItemProps & {
+  previewImageSize: ListItemMediaSize;
+  previewWithLineGuides: boolean;
+  previewPrompt: boolean | ItemProps['prompt'];
+};
+
+const previewArgGroup = {
+  category: 'Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewImageSize: {
+    options: [32, 40, 48, 56, 72],
+    control: {
+      type: 'inline-radio',
+    },
+    name: 'Preview with image size',
+    table: previewArgGroup,
+  },
+  previewWithLineGuides: {
+    control: {
+      type: 'boolean',
+    },
+    name: 'Preview with line guides',
+    table: previewArgGroup,
+  },
+  previewPrompt: {
+    control: {
+      type: 'boolean',
+    },
+    mapping: {
+      true: <ListItem.Prompt sentiment="positive">This is a prompt</ListItem.Prompt>,
+      false: null,
+    },
+    name: 'Preview with `prompt`',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (args: PreviewStoryArgs) => {
+  const { previewImageSize, previewWithLineGuides, previewPrompt, ...props } = args as {
+    previewImageSize: ListItemMediaSize;
+    previewWithLineGuides: boolean;
+    previewPrompt: boolean | ItemProps['prompt'];
+    [key: string]: any;
+  };
+
+  return [
+    {
+      ...props,
+      prompt: previewPrompt,
+    },
+    {
+      previewImageSize,
+      previewWithLineGuides,
+    },
+  ] as const;
+};
+
+// Create a completely untyped story object
+const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  decorators: [
+    (Story: any, { args }: { args: PreviewStoryArgs }) => (
+      <>
+        {args.previewWithLineGuides && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+                .wds-list-item-media-image-wrapper::after {
+                  content: '';
+                  border: 1px dashed red;
+                  position: absolute;
+                  left: 0;
+                  width: 100%;
+                  height: ${args.previewImageSize}px;
+                }
+              `,
+            }}
+          />
+        )}
+        <Story />
+      </>
+    ),
+  ],
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+
+    const title = lorem5;
+    const subtitle = lorem10;
+    const additionalInfo = <ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>;
+    const control = CONTROLS.button;
+    const size = previewProps.previewImageSize;
+
+    const instances = [
+      { title, ...props },
+      { title, subtitle, ...props },
+      { title, subtitle, additionalInfo, ...props },
+      { title, control, ...props },
+      { title, subtitle, control, ...props },
+      { title, subtitle, additionalInfo, control, ...props },
+    ] as const;
+
+    return (
+      <ol className="list-unstyled">
+        {instances.map((itemProps, index) => (
+          <ListItem
+            key={`landscape-${index}`}
+            {...itemProps}
+            media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
+          />
+        ))}
+        {instances.map((itemProps, index) => (
+          <ListItem
+            key={`portrait-${index}`}
+            {...itemProps}
+            media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
+          />
+        ))}
+      </ol>
+    );
+  },
+};
+
+export const ImageAlignment = ImageAlignmentStory;