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

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

@@ -71,18 +71,23 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
   const variants = [
     { title },
+    { title, valueTitle },
     { title, subtitle },
+    { title, valueTitle, valueSubtitle },
     { title, subtitle, inverted: true },
     { title, subtitle, valueTitle },
     { title, subtitle, valueTitle, inverted: true },
     { title, subtitle, valueTitle, valueSubtitle },
     { title, subtitle, valueTitle, valueSubtitle, inverted: true },
     { media, title },
+    { media, title, valueTitle },
+    { media, title, subtitle },
+    { media, title, valueTitle, valueSubtitle },
+    { media, title, valueTitle },
+    { media, title, valueSubtitle },
     { media, title, subtitle },
     { media, title, subtitle, valueTitle },
     { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title },
-    { media, title, subtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
     isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
     { media, title, subtitle, additionalInfo, valueTitle },

package/src/listItem/_stories/subcomponents.tsx

@@ -121,6 +121,7 @@ export const SB_LIST_ITEM_MEDIA = {
     <ListItem.Image
       alt="An illustration of a multi-currency account"
       src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
+      height={31.5}
     />
   ),
   avatarSingle: (

package/src/listItem/test-utils.tsx

@@ -0,0 +1,33 @@
+import { render, type RenderResult } from '../test-utils';
+import { ListItemContext } from './ListItemContext';
+
+export const mockSetControlType = jest.fn();
+export const mockSetControlProps = jest.fn();
+export const mockSetMediaSize = jest.fn();
+
+export const renderWithListItemContext = (ui: React.ReactNode): RenderResult => {
+  return render(
+    <ListItemContext.Provider
+      value={{
+        setControlType: mockSetControlType,
+        setControlProps: mockSetControlProps,
+        setMediaSize: mockSetMediaSize,
+        ids: {
+          title: 'title',
+          additionalInfo: 'additional-info',
+          valueTitle: 'value-title',
+          control: 'control',
+          prompt: 'prompt',
+        },
+        props: {},
+        describedByIds: 'described-by-ids',
+      }}
+    >
+      {ui}
+    </ListItemContext.Provider>,
+  );
+};
+
+export const clearListItemMocks = () => {
+  jest.clearAllMocks();
+};

package/src/listItem/useListItemMedia.tsx

@@ -0,0 +1,12 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, type ListItemContextData } from './ListItemContext';
+
+export function useListItemMedia(size?: number) {
+  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setMediaSize(size);
+  }, [size, setMediaSize]);
+
+  return { mediaSize, setMediaSize };
+}

package/src/main.css

@@ -2644,17 +2644,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .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;
@@ -2664,7 +2664,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .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;
@@ -2687,12 +2687,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .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;
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     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;
@@ -3085,7 +3085,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .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;
@@ -3103,6 +3104,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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;
@@ -3110,12 +3119,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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;