@transferwise/components 46.105.4 → 46.106.0

package/src/listItem/_stories/variants/helpers.tsx

@@ -0,0 +1,127 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { StoryConfig, storyConfig } from '../../../test-utils';
+import List from '../../../list';
+import { ListItem, type ListItemProps } 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 PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_ListItem_ControlType as ControlType,
+} from '../subcomponents';
+
+type Story = StoryObj<ListItemProps>;
+type VariantPartial = { title: string } & Partial<ListItemProps>;
+
+const { title, subtitle, valueTitle, valueSubtitle } = TEXT;
+const prompt = PROMPT.nonInteractive;
+const media = MEDIA.avatarSingle;
+
+export const generateVariantsForControl = (
+  controlType: ControlType,
+  variant: NonNullable<StoryConfig['variants']>[number] = 'default',
+): Story => {
+  const control = CONTROLS[controlType];
+  const isInteractive = [
+    'partialButton',
+    'partialButtonAsLink',
+    'partialIconButton',
+    'partialIconButtonAsLink',
+  ].includes(controlType);
+  const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
+  const instances = [
+    { 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: INFO.nonInteractive },
+    isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : 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: PROMPT.interactive,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: PROMPT.interactive,
+      inverted: true,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: PROMPT.interactive,
+      spotlight: 'active',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: PROMPT.interactive,
+      spotlight: 'inactive',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: PROMPT.interactive,
+      spotlight: 'inactive',
+      disabled: true,
+    },
+  ].filter(Boolean) as VariantPartial[];
+
+  return storyConfig(
+    {
+      render: () => (
+        <List>
+          {instances.map((instance, instanceIndex) => (
+            <ListItem
+              key={`${variant}-${controlType}-${instanceIndex}`}
+              control={control}
+              {...instance}
+            />
+          ))}
+        </List>
+      ),
+    },
+    { variants: [variant] },
+  );
+};

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