@transferwise/components 0.0.0-experimental-d7fd1c8 → 0.0.0-experimental-55ad5c7

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

@@ -1,49 +1,24 @@
-import { render, screen, mockMatchMedia } from '../../test-utils';
+import { screen, mockMatchMedia } from '../../test-utils';
 import { Button as ItemButton } from './ListItemButton';
 import { ButtonPriority } from '../../button/Button.types';
-import { ListItemContext } from '../ListItemContext';
+import { renderWithListItemContext, clearListItemMocks, mockSetControlType } from '../test-utils';
 
 mockMatchMedia();
 
 describe('ItemButton', () => {
-  const mockSetControlType = jest.fn();
-  const mockSetControlProps = jest.fn();
-
-  const renderWithItemContext = (ui: React.ReactNode) => {
-    return render(
-      <ListItemContext.Provider
-        value={{
-          setControlType: mockSetControlType,
-          setControlProps: mockSetControlProps,
-          ids: {
-            title: 'title',
-            additionalInfo: 'additional Info',
-            valueTitle: 'value title',
-            control: 'control',
-            prompt: 'prompt',
-          },
-          props: {},
-          describedByIds: 'described-by-ids',
-        }}
-      >
-        {ui}
-      </ListItemContext.Provider>,
-    );
-  };
-
   beforeEach(() => {
-    jest.clearAllMocks();
+    clearListItemMocks();
   });
 
   it('always sets v2 to true', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(mockSetControlType).toHaveBeenCalledWith('button');
   });
 
   it('always sets size to "sm"', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    renderWithListItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toHaveClass('wds-Button--small');
   });
@@ -51,21 +26,21 @@ describe('ItemButton', () => {
   it('supports all priorities', () => {
     const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
     priorities.forEach((priority) => {
-      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      renderWithListItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
       const button = screen.getByRole('button', { name: `Test ${priority}` });
       expect(button).toBeInTheDocument();
     });
   });
 
   it('renders as a button by default', () => {
-    renderWithItemContext(<ItemButton>Click me</ItemButton>);
+    renderWithListItemContext(<ItemButton>Click me</ItemButton>);
     const button = screen.getByRole('button');
     expect(button).toBeInTheDocument();
     expect(button.tagName).toBe('BUTTON');
   });
 
   it('renders as an anchor when href is provided', () => {
-    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    renderWithListItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
     const link = screen.getByRole('link', { name: 'Go to Example' });
     expect(link).toBeInTheDocument();
     expect(link.tagName).toBe('A');
@@ -73,14 +48,14 @@ describe('ItemButton', () => {
   });
 
   it('spreads additional props to the button', () => {
-    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    renderWithListItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
     const button = screen.getByRole('button', { name: 'Custom Button' });
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('aria-label', 'Custom Button');
   });
 
   it('spreads additional props to the anchor', () => {
-    renderWithItemContext(
+    renderWithListItemContext(
       <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
         Custom Link
       </ItemButton>,

package/src/listItem/Image/ListItemImage.spec.tsx

@@ -1,14 +1,17 @@
 import { render, screen } from '../../test-utils';
-import { ListItem } from '../ListItem';
+import { ListItem, type Props as ListItemProps } from '../ListItem';
+
+const renderWithMedia = (media: ListItemProps['media']) =>
+  render(<ListItem title="Test Title" media={media} />);
 
 describe('ListItem.Image', () => {
   it('renders image with presentation role when no alt text', () => {
-    render(<ListItem.Image src="test-image.jpg" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" />);
     expect(screen.getByRole('presentation')).toHaveAttribute('src', 'test-image.jpg');
   });
 
   it('renders image with graphics-symbol role when alt text provided', () => {
-    render(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" alt="Test image description" />);
 
     const image = screen.getByRole('graphics-symbol');
     expect(image).toHaveAttribute('alt', 'Test image description');
@@ -16,12 +19,12 @@ describe('ListItem.Image', () => {
   });
 
   it('renders image with loading prop', () => {
-    render(<ListItem.Image src="test-image.jpg" loading="lazy" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" loading="lazy" />);
     expect(screen.getByRole('presentation')).toHaveAttribute('loading', 'lazy');
   });
 
   it('renders image with className prop', () => {
-    render(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
+    renderWithMedia(<ListItem.Image src="test-image.jpg" className="custom-image-class" />);
     expect(screen.getByRole('presentation')).toHaveClass('custom-image-class');
   });
 });

package/src/listItem/Image/ListItemImage.story.tsx

@@ -16,7 +16,8 @@ export default {
   },
   args: {
     src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
-    size: undefined,
+    size: 72,
+    height: 47,
     loading: undefined,
     alt: undefined,
   },

package/src/listItem/Image/ListItemImage.tsx

@@ -1,5 +1,6 @@
 import ImageComp, { type ImageProps } from '../../image';
 import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
 
 type SizeProp = {};
 
@@ -8,6 +9,10 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
    * The size of square container for the image, matching available avatar sizes.
    */
   size?: 32 | 40 | 48 | 56 | 72;
+  /**
+   * If you're using an image that isn't a square or circle, also tell us the height so that we can align the control to it properly.
+   */
+  height?: number;
   /**
    * When unset, it will force `role="presentation"` on the image. Otherwise, it will set `role="graphics-symbol"`.
    */
@@ -23,7 +28,9 @@ export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' |
  *
  * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
  */
-export const Image = ({ alt = '', size = 48, ...props }: ListItemImageProps) => {
+export const Image = ({ alt = '', size = 48, height, ...props }: ListItemImageProps) => {
+  useListItemMedia(height ?? size);
+
   return (
     <div
       className={clsx('wds-list-item-media-image')}

package/src/listItem/ListItem.css

@@ -9,17 +9,17 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" "media info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" "media info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" "media info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 296px) {
+@container (max-width: 297px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;
@@ -450,7 +450,8 @@
 }
 .wds-list-item-media-image {
   width: var(--item-media-image-size);
-  height: var(--item-media-image-size);
+  height: auto;
+  height: var(--wds-list-item-control-wrapper-height, auto);
 }
 .wds-list-item-body {
   grid-area: body;
@@ -468,6 +469,14 @@
   color: #37517e;
   color: var(--color-content-primary);
 }
+.wds-list-item-value {
+  text-align: right;
+}
+.wds-list-item-body-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .wds-list-item-additional-info {
   grid-area: info;
   color: #768e9c;
@@ -475,12 +484,14 @@
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
 }
-.wds-list-item-value {
-  align-items: end;
-  text-align: right;
-}
 .wds-list-item-control-wrapper {
   grid-area: control;
+  align-content: center;
+  max-height: var(--wds-list-item-control-wrapper-height);
+}
+.wds-list-item-navigation .tw-icon-chevron-right {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
 }
 .wds-list-item-control {
   flex: 0 0 auto;

package/src/listItem/ListItem.grid.css

@@ -9,17 +9,17 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "media body control" "media info control" "media prompt prompt";
+    grid-template-areas: "media body control" "media info ." ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media info control";
+    grid-template-areas: "media body control" "media info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body control" "media prompt prompt";
+    grid-template-areas: "media body control" ". prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
     grid-template-columns: auto 1fr auto;
@@ -29,7 +29,7 @@
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
-    grid-template-areas: "media body" "media info" "media prompt";
+    grid-template-areas: "media body" "media info" ". prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: auto 1fr;
@@ -52,12 +52,12 @@
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
-    grid-template-areas: "body control" "info control" "prompt prompt";
+    grid-template-areas: "body control" "info ." "prompt prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
-    grid-template-areas: "body control" "info control";
+    grid-template-areas: "body control" "info .";
   }
   .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
     grid-template-columns: 1fr auto;
@@ -221,7 +221,7 @@
     grid-template-areas: "body";
   }
 }
-@container (max-width: 296px) {
+@container (max-width: 297px) {
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto auto;

package/src/listItem/ListItem.grid.less

@@ -10,8 +10,8 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
-              "media prompt prompt";
+              "media info ."
+              ". prompt prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -19,7 +19,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media info control"
+              "media info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -27,7 +27,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "media body control"
-              "media prompt prompt";
+              ". prompt prompt";
         }
 
         &.wds-list-item-noInfo-noPrompt {
@@ -45,7 +45,7 @@
           grid-template-areas:
               "media body"
               "media info"
-              "media prompt";
+              ". prompt";
         }
 
         &.wds-list-item-hasInfo-noPrompt {
@@ -53,7 +53,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media body"
-              "media info" 
+              "media info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -82,7 +82,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
               "prompt prompt";
         }
 
@@ -91,7 +91,7 @@
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
-              "info control"
+              "info ."
         }
 
         &.wds-list-item-noInfo-hasPrompt {
@@ -246,7 +246,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "media media"
-              "body body" 
+              "body body"
               "info info";
         }
 
@@ -378,7 +378,7 @@
       }
     }
 
-    @container (max-width: 296px) {
+    @container (max-width: 297px) {
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: auto 1fr;
@@ -461,7 +461,7 @@
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body"
-              "info" 
+              "info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {

package/src/listItem/ListItem.less

@@ -110,7 +110,7 @@
 
       &-image {
           width: var(--item-media-image-size);
-          height: var(--item-media-image-size);
+          height: var(--wds-list-item-control-wrapper-height, auto);
       }
   }
 
@@ -124,7 +124,17 @@
   }
 
   &-title {
-      color: var(--color-content-primary);
+    color: var(--color-content-primary);
+  }
+
+  &-value {
+    text-align: right;
+  }
+
+  &-body-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
 
   &-additional-info {
@@ -133,13 +143,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 {

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<number | 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',
@@ -247,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
@@ -274,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),
                 })}
               >
                 {(() => {
@@ -312,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>
@@ -364,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}
@@ -380,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>
@@ -401,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: number | undefined) => void;
   ids: {
     title: string;
     subtitle?: string;
@@ -14,6 +18,7 @@ export type ListItemContextData = {
     prompt?: string;
   };
   props: Pick<ListItemProps, 'disabled' | 'inverted'>;
+  mediaSize?: number;
   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={24} />;
+  const icon = <ChevronRight size={16} />;
 
   if (baseItemProps.disabled) return <BackslashCircle size={24} />;
 

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
-import Emphasis from '../../emphasis';
 import { ListItem, Props as ItemProps } from '../ListItem';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -242,7 +241,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     const [props, previewProps] = getPropsForPreview(args);
 
     return (
-      <ol key={args.disabled ? 'disabled' : 'enabled'} className="list-unstyled">
+      <ol className="list-unstyled">
         <ListItem {...props} {...previewProps} />
       </ol>
     );
@@ -426,7 +425,7 @@ export const Spotlight: Story = {
  * All of these limitations were put in place to ensure that the list item is compliant with
  * accessibility guidance and offers consistent experience across all engineering platforms.
  *
- * Please refer to the [design documentation](https://wise.design/components/list-item#interaction) for more details.
+ * Please refer to the [design documentation](https://wise.design/components/list-item#:~:text=specific%20list%20item.-,Interaction,-The%20list%20item) for more details.
  */
 export const Interactivity: Story = {
   render: function Render() {
@@ -502,8 +501,6 @@ export const Interactivity: Story = {
  * to a new icon for improved user experience and accessibility. <br />
  * For the same reason, only the control part of the List Item is dimmed, while all the content
  * retains high contrast and interactivity.
- *
- * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
  */
 export const Disabled: Story = {
   parameters: {
@@ -671,37 +668,3 @@ export const Disabled: Story = {
     </div>
   ),
 };
-
-/**
- * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
- * That said, most of them should be fed with plain text only. The exception is `valueTitle`
- * and `valueSubtitle` which can be augmented with sentiment colours, strikethrough or bold
- * styles. <br />
- *
- * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
- */
-export const StylingLabels: Story = {
-  args: {
-    title: lorem5,
-    subtitle: lorem10,
-    media: MEDIA.image,
-    control: CONTROLS.iconButton,
-    prompt: PROMPTS.interactive,
-  },
-  render: function Render(args) {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          {...args}
-          valueTitle={<Emphasis text="<negative>100 GBP</negative>" />}
-          valueSubtitle={<s>125 GBP</s>}
-        />
-        <ListItem
-          {...args}
-          valueTitle={<Emphasis text="<positive>100 GBP</positive>" />}
-          valueSubtitle={<strong>125 GBP</strong>}
-        />
-      </ol>
-    );
-  },
-};