@transferwise/components 46.103.0 → 46.104.0

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

@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../list';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import landscapeImage from '../../test-utils/assets/placeholder-landscape.svg';
+import portraitImage from '../../test-utils/assets/placeholder-portrait.svg';
+import type { ListItemImageProps } from './ListItemImage';
+
+export default {
+  component: ListItem.Image,
+  title: 'Content/ListItem/ListItem.Image',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    size: 48,
+    loading: undefined,
+    alt: undefined,
+  },
+} satisfies Meta<ListItemImageProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = ListItemImageProps & {
+  previewOrientation?: ListItemImageProps['src'];
+};
+
+const previewArgGroup = {
+  category: 'Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewOrientation: {
+    name: 'Preview image with orientation',
+    control: 'radio',
+    options: ['unset (use `src` prop)', 'landscape', 'portrait'],
+    mapping: {
+      'unset (use `src` prop)': undefined,
+      landscape: landscapeImage,
+      portrait: portraitImage,
+    },
+    table: previewArgGroup,
+  },
+} as const;
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
+  },
+  render: (args: PreviewStoryArgs) => {
+    const { previewOrientation, src, ...imageProps } = args as {
+      previewOrientation: string;
+      src: PreviewStoryArgs['src'];
+      props: PreviewStoryArgs;
+    };
+
+    return (
+      <List>
+        <ListItem
+          title="List item title"
+          subtitle="Subtitle goes here"
+          media={<ListItem.Image {...imageProps} src={previewOrientation || src} />}
+          control={CONTROLS.partialButton}
+          additionalInfo={INFO.nonInteractive}
+        />
+      </List>
+    );
+  },
+};

package/src/listItem/Image/ListItemImage.tsx

@@ -0,0 +1,46 @@
+import ImageComp, { type ImageProps } from '../../image';
+import { clsx } from 'clsx';
+import { useListItemMedia } from '../useListItemMedia';
+
+export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
+  /**
+   * The size of square container for the image, matching available avatar sizes.
+   */
+  size?: 32 | 40 | 48 | 56 | 72;
+  /**
+   * When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
+   */
+  alt?: string;
+};
+
+/**
+ * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`
+ * or `<ListItem.AvatarLayout />` are insufficient.
+ * It's a wrapper around the
+ * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only
+ * a subset of its props, in line with the ListItem's constraints.
+ *
+ * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).
+ */
+export const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {
+  useListItemMedia(size);
+
+  return (
+    <div
+      className={clsx('wds-list-item-media-image-wrapper')}
+      style={
+        {
+          '--wds-list-item-media-size': `${size}px`,
+        } as React.CSSProperties
+      }
+    >
+      <ImageComp
+        {...props}
+        className={clsx(className, 'wds-list-item-media-image')}
+        alt={alt}
+        role={alt ? undefined : 'presentation'}
+      />
+    </div>
+  );
+};
+Image.displayName = 'ListItem.Image';

package/src/listItem/Image/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemImageProps } from './ListItemImage';
+export { Image } from './ListItemImage';