@transferwise/components 46.105.3 → 46.105.5

package/src/main.css

@@ -2649,7 +2649,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: 4px 16px;
   gap: var(--size-4) var(--size-16);
 }
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt,
+.wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) .wds-list-item-prompt {
+  margin-top: -2px;
+}
 @container (min-width: 375px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    height: var(--wds-list-item-control-wrapper-height);
+    align-content: center;
+  }
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: center;
        object-position: center;
@@ -2746,6 +2754,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     -o-object-position: bottom left;
        object-position: bottom left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -2866,8 +2877,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 @container (max-width: 297px) {
+  .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
+    align-content: start;
+  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto;
     grid-template-areas: "body control" "info control" "prompt prompt";
   }
@@ -2877,7 +2891,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body" "info" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "info control";
   }
@@ -2886,7 +2900,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body" "info" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     grid-template-areas: "body control" "prompt prompt";
   }
@@ -2895,7 +2909,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body" "prompt" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: auto;
     grid-template-areas: "body control";
   }
@@ -2904,17 +2918,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body" "control";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
     grid-template-areas: "body" "info" "prompt";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
     grid-template-areas: "body" "info";
   }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
     grid-template-rows: auto auto;
     grid-template-areas: "body" "prompt";
   }
@@ -3320,8 +3334,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-control-wrapper {
   grid-area: control;
-  align-content: center;
-  height: var(--wds-list-item-control-wrapper-height);
 }
 .wds-list-item-navigation .tw-icon-chevron-right {
   color: #c9cbce;

package/src/nudge/Nudge.tsx

@@ -1,4 +1,4 @@
-import { Illustration, Assets, IllustrationNames } from '@wise/art';
+import { Illustration, Assets, type IllustrationNames } from '@wise/art';
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 

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

@@ -1,274 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { MultiCurrency } from '@transferwise/icons';
-import { storyConfig } from '../../test-utils';
-import Link from '../../link';
-import List from '../../list';
-import { ListItem, type ListItemProps } from '../ListItem';
-import {
-  SB_LIST_ITEM_ADDITIONAL_INFO as ADDITIONAL_INFO,
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_PROMPTS as PROMPTS,
-  type SB_ListItem_ControlType as ControlType,
-} from './subcomponents';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem/tests/variants',
-  tags: ['!autodocs'],
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    knobs: { disable: true },
-  },
-} satisfies Meta<ListItemProps>;
-
-type Story = StoryObj<ListItemProps>;
-type VariantPartial = { title: string } & Partial<ListItemProps>;
-
-const title = 'This is a title';
-const subtitle = 'And it also has a subtitle';
-const infoWithoutLink = (
-  <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
-);
-const infoWithLink = (
-  <ListItem.AdditionalInfo
-    action={{
-      label: 'Details about the subject.',
-      href: 'https://wise.com',
-      target: '_blank',
-    }}
-  >
-    Which is augmented with additional info.
-  </ListItem.AdditionalInfo>
-);
-
-const valueTitle = '100 GBP';
-const valueSubtitle = '200 USD';
-const prompt = <ListItem.Prompt sentiment="positive">Finally, there is a prompt.</ListItem.Prompt>;
-const promptWithLink = (
-  <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 media = (
-  <ListItem.AvatarView>
-    <MultiCurrency />
-  </ListItem.AvatarView>
-);
-
-const generateVariantsForControl = (controlType: ControlType): Story => {
-  const control = CONTROLS[controlType];
-  const isInteractive = [
-    'partialButton',
-    'partialButtonAsLink',
-    'partialIconButton',
-    'partialIconButtonAsLink',
-  ].includes(controlType);
-  const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
-  const variants = [
-    { title },
-    { title, valueTitle },
-    { title, subtitle },
-    { title, additionalInfo },
-    { 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, additionalInfo },
-    { media, title, subtitle, valueTitle },
-    { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title, subtitle, additionalInfo: infoWithoutLink },
-    isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
-    { media, title, subtitle, additionalInfo, valueTitle },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: promptWithLink,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: promptWithLink,
-      inverted: true,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: promptWithLink,
-      spotlight: 'active',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: promptWithLink,
-      spotlight: 'inactive',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: promptWithLink,
-      spotlight: 'inactive',
-      disabled: true,
-    },
-  ].filter(Boolean) as VariantPartial[];
-
-  return storyConfig(
-    {
-      render: () => (
-        <List>
-          {variants.map((variant, variantIndex) => (
-            <ListItem
-              key={`${controlType}-${variantIndex}-${Math.random()}`}
-              control={control}
-              {...variant}
-            />
-          ))}
-        </List>
-      ),
-    },
-    { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-  );
-};
-
-export const Button = generateVariantsForControl('button');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
-export const IconButton = generateVariantsForControl('iconButton');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
-export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
-export const IconButtonAsLinkPartiallyInteractive =
-  generateVariantsForControl('partialIconButtonAsLink');
-export const Navigation = generateVariantsForControl('navigation');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
-export const Checkbox = generateVariantsForControl('checkbox');
-export const Radio = generateVariantsForControl('radio');
-export const Switch = generateVariantsForControl('switch');
-export const NonInteractive = generateVariantsForControl('non-interactive');
-
-export const ButtonControlLabel: Story = {
-  render: () => (
-    <List>
-      <ListItem
-        title="Fully interactive button."
-        subtitle="It uses default content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.button}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        inverted
-        title="Fully interactive button."
-        subtitle="It uses inverted content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.button}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        title="Fully interactive button as HTML anchor."
-        subtitle="It uses default content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.buttonAsLink}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        inverted
-        title="Fully interactive button as HTML anchor."
-        subtitle="It uses inverted content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.buttonAsLink}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        title="Partially interactive button."
-        subtitle="It uses default content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.partialButton}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        inverted
-        title="Partially interactive button."
-        subtitle="It uses inverted content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.partialButton}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        title="Partially interactive button as HTML anchor."
-        subtitle="It uses default content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.buttonAsLink}
-        prompt={PROMPTS.nonInteractive}
-      />
-
-      <ListItem
-        inverted
-        title="Partially interactive button as HTML anchor."
-        subtitle="It uses inverted content hierarchy."
-        valueTitle="100 GBP"
-        valueSubtitle="200 USD"
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.buttonAsLink}
-        prompt={PROMPTS.nonInteractive}
-      />
-    </List>
-  ),
-};