@transferwise/components 0.0.0-experimental-e068634 → 0.0.0-experimental-ea9a101

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

@@ -1,80 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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