@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

package/src/listItem/IconButton/ListItemIconButton.story.tsx

@@ -0,0 +1,236 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Edit, Heart } from '@transferwise/icons';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPTS,
+} from '../_stories/subcomponents';
+import type { ListItemIconButtonProps } from './ListItemIconButton';
+import { fn } from 'storybook/test';
+
+/**
+ * Use IconButton to provide compact action controls within a ListItem context using iconography.
+ *
+ * Refer to the [design documentation](https://wise.design/components/list-item) for more details.
+ */
+const meta: Meta<ListItemIconButtonProps> = {
+  component: ListItem.IconButton,
+  title: 'Content/ListItem/ListItem.IconButton',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    partiallyInteractive: false,
+    priority: undefined,
+    type: undefined,
+    children: <Edit />,
+    href: undefined,
+    target: undefined,
+    onClick: fn(),
+  },
+  argTypes: {
+    children: {
+      description: 'Once of the [Icon components](https://transferwise.github.io/icons/).',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+      control: false,
+    },
+    priority: {
+      control: 'radio',
+      options: ['unset (undefined)', 'primary', 'secondary', 'tertiary', 'minimal'],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+      description: 'IconButton priority/style variant',
+    },
+    type: {
+      control: 'radio',
+      options: ['unset (undefined)', 'default', 'negative'],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+      description:
+        'Sets a visual hierarchy amongst the buttons displayed on the screen. <br /> **NB:** `negative` sentiment only affects the `primary` and `secondary` priorities.',
+    },
+    partiallyInteractive: {
+      control: 'boolean',
+      description: 'Whether the icon button allows partial interactivity in the ListItem',
+    },
+    href: {
+      control: 'text',
+      description: 'URL for icon button rendered as link',
+    },
+    target: {
+      control: 'select',
+      options: [undefined, '_blank', '_self', '_parent', '_top'],
+      description:
+        'The `target` attribute for HTML anchor. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.',
+    },
+  },
+} satisfies Meta<ListItemIconButtonProps>;
+
+export default meta;
+
+type Story = StoryObj<ListItemIconButtonProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemIconButtonProps) => {
+    return (
+      <ListItem
+        title="List item title"
+        subtitle="Subtitle goes here"
+        media={MEDIA.avatarSingle}
+        control={<ListItem.IconButton {...args} />}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * By default, ListItem is fully interactive, which means its whole surface is clickable
+ * and triggers the control. To remain WCAG-compliant there can be no nested interactive
+ * elements inside the item.<br />
+ *
+ * To work around this limitation, this control also allows for a partially interactive mode,
+ * which can be enabled via `partiallyInteractive` prop. Once set, only the control will
+ * remain interactive, which allows for interactive element to be attached to the
+ * `ListItem.AdditionalInfo`. This allows for more complex layouts while still providing a
+ * clear, accessible action point for users. <br />
+ *
+ * If you still require a fully interactive ListItem, you can alternatively use `ListItem.Prompt`
+ * which allows for a single instance of a link or an inline button.
+ *
+ * Refer to the [design documentation](https://wise.design/components/list-item#interaction) for details.
+ */
+export const Interactivity: Story = {
+  args: {
+    children: <Edit />,
+  },
+  render: (args: ListItemIconButtonProps) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          control={<ListItem.IconButton {...args} />}
+          title="Fully interactive ListItem"
+          subtitle="IconButton in fully interactive context"
+          media={MEDIA.avatarSingle}
+          additionalInfo={INFO.nonInteractive}
+          prompt={PROMPTS.interactive}
+        />
+
+        <ListItem
+          control={<ListItem.IconButton {...args} partiallyInteractive />}
+          title="Partially interactive ListItem"
+          subtitle="IconButton in partially interactive context"
+          media={MEDIA.avatarSingle}
+          additionalInfo={INFO.interactive}
+          prompt={PROMPTS.interactive}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * There are two different types of icon button – default and negative – designed to emphasise the nature of the action. <br />
+ * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
+ * [Design documentation](https://wise.design/components/icon-button#types)
+ */
+export const Sentiment: Story = {
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          control={<ListItem.IconButton {...args} priority="primary" type="default" />}
+          title="Default Sentiment - Primary"
+          subtitle="Default sentiment with primary priority"
+          media={MEDIA.avatarSingle}
+        />
+        <ListItem
+          control={<ListItem.IconButton {...args} priority="secondary" type="default" />}
+          title="Default Sentiment - Secondary"
+          subtitle="Default sentiment with secondary priority"
+          media={MEDIA.avatarSingle}
+        />
+        <ListItem
+          control={<ListItem.IconButton {...args} priority="primary" type="negative" />}
+          title="Negative Sentiment - Primary"
+          subtitle="Negative sentiment with primary priority"
+          media={MEDIA.avatarSingle}
+        />
+        <ListItem
+          control={<ListItem.IconButton {...args} priority="secondary" type="negative" />}
+          title="Negative Sentiment - Secondary"
+          subtitle="Negative sentiment with secondary priority"
+          media={MEDIA.avatarSingle}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * Priorities set a visual hierarchy amongst the buttons displayed on the
+ * screen to help more important buttons to take precedence over others. <br />
+ * [Design documentation](https://wise.design/components/icon-button#priorities)
+ */
+export const Priority: Story = {
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          title="Primary Priority"
+          subtitle="Primary priority (default)"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.IconButton {...args} priority="primary" />}
+        />
+        <ListItem
+          title="Secondary Priority"
+          subtitle="Secondary priority"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.IconButton {...args} priority="secondary" />}
+        />
+        <ListItem
+          title="Secondary Neutral Priority"
+          subtitle="Secondary neutral priority"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.IconButton {...args} priority="tertiary" />}
+        />
+        <ListItem
+          title="Tertiary Priority"
+          subtitle="Tertiary priority"
+          media={MEDIA.avatarSingle}
+          control={<ListItem.IconButton {...args} priority="minimal" />}
+        />
+      </ol>
+    );
+  },
+};
+
+/**
+ * If `href` prop is set, the component will be automatically rendered as an HTML anchor element.
+ */
+export const AsAnchor: Story = {
+  args: {
+    children: <Edit />,
+    href: 'https://wise.com',
+    target: '_blank',
+    onClick: undefined,
+  },
+  render: (args: ListItemIconButtonProps) => {
+    return (
+      <ListItem
+        control={<ListItem.IconButton {...args} />}
+        title="List item with icon button link"
+        subtitle="IconButton rendered as anchor element"
+        media={MEDIA.avatarSingle}
+      />
+    );
+  },
+};

package/src/listItem/IconButton/ListItemIconButton.tsx

@@ -0,0 +1,56 @@
+import { clsx } from 'clsx';
+import { useContext, type ReactNode } from 'react';
+import IconButtonComp, { type IconButtonProps } from '../../iconButton';
+import { useListItemControl } from '../useListItemControl';
+import { ListItemContext } from '../ListItemContext';
+
+export type ListItemIconButtonProps = Pick<
+  IconButtonProps,
+  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'
+> & {
+  children: ReactNode;
+  partiallyInteractive?: boolean;
+};
+
+/**
+ * This component allows for rendering a IconButton control. It's a thin wrapper around the
+ * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--docs), but offers only
+ * a subset of its features in line with the ListItem's constraints. <br />
+ * <br />
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---icon-button) for details.
+ */
+export const IconButton = function ({ priority = 'minimal', ...props }: ListItemIconButtonProps) {
+  const { partiallyInteractive, ...restProps } = props;
+
+  const { ids, props: itemProps } = useContext(ListItemContext);
+  const { baseItemProps } = useListItemControl('icon-button', {
+    partiallyInteractive,
+    ...restProps,
+  });
+
+  const descriptorIds = [
+    itemProps.inverted ? ids.subtitle : ids.title,
+    itemProps.inverted ? ids.title : ids.subtitle,
+    itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,
+    itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,
+    ids.additionalInfo,
+    ids.prompt,
+  ].join(' ');
+
+  return (
+    <IconButtonComp
+      {...restProps}
+      aria-describedby={descriptorIds}
+      className={clsx(
+        'wds-list-item-control',
+        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',
+      )}
+      id={ids.control}
+      size={40}
+      priority={priority}
+      disabled={baseItemProps.disabled}
+    />
+  );
+};
+
+IconButton.displayName = 'ListItem.IconButton';

package/src/listItem/IconButton/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemIconButtonProps } from './ListItemIconButton';
+export { IconButton } from './ListItemIconButton';

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

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+} from '../_stories/subcomponents';
+import { ListItemImageProps } from './ListItemImage';
+
+export default {
+  component: ListItem.Image,
+  title: 'Content/ListItem/ListItem.Image',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
+    size: undefined,
+    loading: undefined,
+    alt: undefined,
+  },
+} satisfies Meta<ListItemImageProps>;
+
+type Story = StoryObj<ListItemImageProps>;
+
+export const Playground: Story = {
+  render: (args: ListItemImageProps) => {
+    return (
+      <ListItem
+        title="List item title"
+        subtitle="Subtitle goes here"
+        media={<ListItem.Image {...args} />}
+        control={CONTROLS.partialButton}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};

package/src/listItem/Image/ListItemImage.tsx

@@ -0,0 +1,40 @@
+import ImageComp, { type ImageProps } from '../../image';
+import { clsx } from 'clsx';
+
+type SizeProp = {};
+
+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, it will set `role="graphics-symbol"`.
+   */
+  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, ...props }: ListItemImageProps) => {
+  return (
+    <div
+      className={clsx('wds-list-item-media-image')}
+      style={
+        {
+          '--item-media-image-size': `${size}px`,
+        } as React.CSSProperties
+      }
+    >
+      <ImageComp {...props} alt={alt} role={alt ? 'graphics-symbol' : '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';