@transferwise/components 0.0.0-experimental-15914a5 → 0.0.0-experimental-e1870f3

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);
+  padding: var(--size-12) 0;
   container-type: inline-size;
 
   & + .wds-list-item-spotlight,
@@ -47,12 +47,6 @@
       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
     }
@@ -76,32 +70,88 @@
       }
     }
 
-    &: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;
-            }
+    // 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):active {
-        background-color: var(--color-background-screen-active);
+    // 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;
+        }
+      }
     }
 
-    .wds-list-item-button-control {
+    &:not(.disabled, :disabled):hover {
+      .wds-list-item-control-wrapper {
         .wds-Button {
+          background-color: var(--Button-background-hover);
+          color: var(--Button-color-hover);
           transition: none;
         }
       }
+    }
 
-    &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
-      &:hover {
-        background-color: unset;
-      }
+    .wds-list-item-button-control {
+        .wds-Button {
+          transition: none;
+        }
     }
   }
 
@@ -109,8 +159,8 @@
     grid-area: media;
 
       &-image {
-          width: var(--wds-list-item-control-wrapper-height);
-          height: var(--wds-list-item-control-wrapper-height);
+          width: var(--item-media-image-size);
+          height: var(--item-media-image-size);
       }
   }
 
@@ -123,18 +173,8 @@
     word-break: break-word;
   }
 
-  &-title {
-    color: var(--color-content-primary);
-  }
-
-  &-value {
-    text-align: right;
-  }
-
-  &-body-center {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  &-title, &-title-value {
+      color: var(--color-content-primary);
   }
 
   &-additional-info {
@@ -143,16 +183,13 @@
       margin-top: calc(var(--size-4) * -1);
   }
 
-  &-control-wrapper {
-      grid-area: control;
-      align-content: center;
-      max-height: var(--wds-list-item-control-wrapper-height);
+  &-value {
+      align-items: end;
+      text-align: right;
   }
 
-  &-navigation {
-    .tw-icon-chevron-right {
-      color: var(--color-interactive-secondary);
-    }
+  &-control-wrapper {
+      grid-area: control;
   }
 
   &-control {
@@ -175,6 +212,9 @@
 
 
   &-spotlight {
+      padding-left: var(--size-12);
+      padding-right: var(--size-12);
+
       &-active {
           background-color: var(--color-background-neutral);
           &:not(.disabled, :disabled):hover {
@@ -187,7 +227,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);
           }
@@ -197,6 +237,31 @@
       }
   }
 
+  .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,7 +4,6 @@ import {
   useId,
   useMemo,
   useState,
-  useEffect,
   type PropsWithChildren,
   type ReactNode,
 } from 'react';
@@ -23,11 +22,7 @@ import { AvatarView } from './AvatarView';
 import { Image } from './Image';
 import { Prompt } from './Prompt';
 import { PrimitiveAnchor } from '../primitives';
-import {
-  ListItemContext,
-  type ListItemContextData,
-  type ListItemMediaSize,
-} from './ListItemContext';
+import { ListItemContext, type ListItemContextData } from './ListItemContext';
 
 export type ListItemTypes =
   | 'non-interactive'
@@ -124,8 +119,6 @@ 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` } : {}),
@@ -163,13 +156,11 @@ export const ListItem = ({
     () => ({
       setControlType,
       setControlProps,
-      setMediaSize,
       ids,
       props: { disabled, inverted },
-      mediaSize,
       describedByIds,
     }),
-    [describedByIds, mediaSize],
+    [describedByIds],
   );
   const gridColumnsStyle = {
     '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',
@@ -236,6 +227,12 @@ 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,
@@ -256,11 +253,7 @@ export const ListItem = ({
             style={valueColumnWidth ? gridColumnsStyle : undefined}
           >
             {/* Title + Subtitle + Values - Group */}
-            <span
-              className={clsx({
-                'wds-list-item-body-center': title && !subtitle,
-              })}
-            >
+            <span>
               {(() => {
                 const titles = [
                   <Body
@@ -287,8 +280,6 @@ 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),
                 })}
               >
                 {(() => {
@@ -327,11 +318,6 @@ 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>
@@ -384,6 +370,7 @@ 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}
@@ -399,7 +386,13 @@ 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')}>{children}</div>
+        <div
+          className={clsx('wds-list-item-view d-flex flex-row', {
+            'align-items-center': !subtitle,
+          })}
+        >
+          {children}
+        </div>
 
         {renderExtras()}
       </div>
@@ -414,6 +407,7 @@ 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,13 +1,9 @@
 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;
@@ -18,7 +14,6 @@ export type ListItemContextData = {
     prompt?: string;
   };
   props: Pick<ListItemProps, 'disabled' | 'inverted'>;
-  mediaSize?: ListItemAvatarViewProps['size'];
   describedByIds: string;
 };
 

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={16} />;
+  const icon = <ChevronRight size={24} />;
 
   if (baseItemProps.disabled) return <BackslashCircle size={24} />;
 

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>
   ),
 };

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,
@@ -50,7 +51,7 @@ export const Playground: Story = {
 export const States: Story = {
   render: (args) => {
     return (
-      <ol className="list-unstyled">
+      <List as="ol">
         <ListItem
           title={lorem5}
           subtitle={lorem10}
@@ -63,7 +64,7 @@ export const States: Story = {
           media={MEDIA.avatarSingle}
           control={<ListItem.Switch {...args} />}
         />
-      </ol>
+      </List>
     );
   },
 };

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

@@ -0,0 +1,226 @@
+import { useState } from 'react';
+import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { InfoCircle, Documents } from '@transferwise/icons';
+import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
+import Modal from '../../modal';
+import Link from '../../link';
+import Popover from '../../popover';
+import { SnackbarConsumer, type SnackbarContextType } from '../../snackbar/SnackbarContext';
+import SnackbarProvider from '../../snackbar/SnackbarProvider';
+import Tooltip from '../../tooltip';
+import { Position } from '../../common';
+import { ListItem, type Props as ItemProps } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  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',
+  tags: ['autodocs'],
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    media: MEDIA.image,
+    additionalInfo: INFO.nonInteractive,
+    prompt: PROMPTS.interactive,
+    control: CONTROLS.button,
+  },
+  parameters: {
+    docs: {
+      toc: true,
+      page: () => (
+        <>
+          <Title>Common scenarios</Title>
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<ItemProps>;
+type Story = StoryObj<ItemProps>;
+
+/**
+ * Aside from using the main control for triggering a [Modal](?path=/docs/dialogs-modal--docs),
+ * it's also possible to toggle it via inline-button as part of the `<ListItem.AdditionalInfo>`
+ * or `<ListItem.Prompt>`.
+ */
+export const WithModals: Story = storySourceWithoutNoise({
+  render: function WithModals(listItemProps) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleOpening = () => {
+      setIsModalOpen(true);
+      action('Modal opening')();
+    };
+    const handleClosing = () => {
+      setIsModalOpen(false);
+      action('Modal closing')();
+    };
+
+    return (
+      <>
+        <ListItem
+          {...listItemProps}
+          control={
+            <ListItem.Button partiallyInteractive onClick={handleOpening}>
+              Open modal
+            </ListItem.Button>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'button opening a modal', onClick: handleOpening }}
+            >
+              This is additional information that contains a
+            </ListItem.AdditionalInfo>
+          }
+          prompt={
+            <ListItem.Prompt sentiment="positive">
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+              This prompt also has a <Link onClick={handleOpening}>
+                button that opens a modal
+              </Link>{' '}
+              for your convenience.
+            </ListItem.Prompt>
+          }
+        />
+        <Modal body={lorem100} open={isModalOpen} onClose={handleClosing} />
+      </>
+    );
+  },
+});
+
+/**
+ * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
+ */
+export const WithPopover: Story = {
+  render: (listItemProps) => {
+    return (
+      <ListItem
+        {...listItemProps}
+        control={
+          <Popover preferredPlacement={Position.BOTTOM} title={lorem5} content={lorem20}>
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          </Popover>
+        }
+        prompt={PROMPTS.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
+ */
+export const WithTooltip: Story = {
+  render: (listItemProps) => {
+    return (
+      <ListItem
+        {...listItemProps}
+        control={
+          <Tooltip position={Position.BOTTOM} label={lorem10}>
+            <ListItem.IconButton partiallyInteractive>
+              <InfoCircle />
+            </ListItem.IconButton>
+          </Tooltip>
+        }
+        prompt={PROMPTS.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * ListItem is often used as a simple copy and paste button augmented with a [Snackbar](?path=/docs/dialogs-snackbar--docs). <br />
+ *
+ * **NB** The snippet below uses a simplified example implementation of a clipboard handler,
+ * which may not be suitable or sufficient for your needs.
+ */
+export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
+  render: function CopyAndPaste() {
+    const title = 'Artie Choke';
+    const subtitle = 'Account holder';
+
+    const handleCopy = async (createSnackbar: SnackbarContextType['createSnackbar']) =>
+      navigator.clipboard
+        .writeText(`${subtitle}: ${title}`)
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        })
+        .then(() => {
+          createSnackbar({
+            text: `${subtitle} copied to clipboard.`,
+          });
+        });
+
+    return (
+      <ListItem
+        title={title}
+        subtitle={subtitle}
+        inverted
+        control={
+          <SnackbarProvider>
+            <SnackbarConsumer>
+              {({ createSnackbar }) => {
+                return (
+                  <ListItem.IconButton
+                    partiallyInteractive
+                    onClick={async () => handleCopy(createSnackbar)}
+                  >
+                    <Documents />
+                  </ListItem.IconButton>
+                );
+              }}
+            </SnackbarConsumer>
+          </SnackbarProvider>
+        }
+        media={
+          <ListItem.AvatarView
+            imgSrc="../avatar-square-dude.webp"
+            profileName="John Smith"
+            size={48}
+          />
+        }
+      />
+    );
+  },
+});