@transferwise/components 0.0.0-experimental-6a6c19f → 0.0.0-experimental-e72bc9f

package/src/listItem/ListItemButton.spec.tsx

@@ -0,0 +1,90 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { Button as ItemButton } from './ListItemButton';
+import { ButtonPriority } from '../button/Button.types';
+import { ListItemContext } from './ListItem';
+
+mockMatchMedia();
+
+describe('ItemButton', () => {
+  const mockSetControlType = jest.fn();
+
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ListItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          ids: {
+            label: 'label',
+            additionalInfo: 'additional Info',
+            value: 'value',
+            control: 'control',
+            prompt: 'prompt',
+          },
+          props: {},
+        }}
+      >
+        {ui}
+      </ListItemContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('always sets v2 to true', () => {
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(mockSetControlType).toHaveBeenCalledWith('button');
+  });
+
+  it('always sets size to "md"', () => {
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button--medium');
+  });
+
+  it('supports all priorities', () => {
+    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
+    priorities.forEach((priority) => {
+      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      const button = screen.getByRole('button', { name: `Test ${priority}` });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  it('renders as a button by default', () => {
+    renderWithItemContext(<ItemButton>Click me</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('renders as an anchor when href is provided', () => {
+    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    const link = screen.getByRole('link', { name: 'Go to Example' });
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('spreads additional props to the button', () => {
+    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    const button = screen.getByRole('button', { name: 'Custom Button' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Custom Button');
+  });
+
+  it('spreads additional props to the anchor', () => {
+    renderWithItemContext(
+      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
+        Custom Link
+      </ItemButton>,
+    );
+    const link = screen.getByRole('link', { name: 'Custom Link' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

package/src/listItem/ListItemButton.tsx

@@ -0,0 +1,18 @@
+import { default as ButtonComp, NewButtonProps } from '../button';
+import { useItemControl } from './useItemControl';
+
+export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
+
+export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps) => {
+  const { baseItemProps } = useItemControl('button');
+
+  const commonProps = {
+    ...props,
+    priority,
+    v2: true,
+    size: 'md',
+    disabled: baseItemProps.disabled,
+  };
+
+  return <ButtonComp {...(commonProps as NewButtonProps)} />;
+};

package/src/listItem/ListItemCheckbox.tsx

@@ -0,0 +1,14 @@
+import CheckboxButton from '../checkboxButton';
+import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
+import { useItemControl } from './useItemControl';
+
+export type ListItemCheckboxProps = Pick<
+  CheckboxButtonProps,
+  'checked' | 'indeterminate' | 'onChange'
+>;
+
+export const Checkbox = function (props: ListItemCheckboxProps) {
+  const { baseItemProps } = useItemControl('checkbox');
+
+  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
+};

package/src/listItem/ListItemIconButton.tsx

@@ -0,0 +1,13 @@
+import { default as IconButtonComp, IconButtonProps } from '../iconButton';
+import { useItemControl } from './useItemControl';
+import { ReactNode } from 'react';
+
+export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
+  children: ReactNode;
+};
+
+export const IconButton = function (props: ListItemIconButtonProps) {
+  const { baseItemProps } = useItemControl('icon-button');
+
+  return <IconButtonComp {...props} size={32} disabled={baseItemProps.disabled} />;
+};

package/src/listItem/ListItemMedia.tsx

@@ -0,0 +1,52 @@
+import { default as AvatarViewComp, AvatarViewProps } from '../avatarView';
+import { default as AvatarLayoutComp, AvatarLayoutProps } from '../avatarLayout';
+import { default as ImageComp, ImageProps } from '../image/Image';
+import { clsx } from 'clsx';
+
+type SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };
+
+export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {
+  return (
+    <AvatarViewComp
+      {...props}
+      size={size}
+      className={clsx('wds-list-item-media-avatar-view', className)}
+    />
+  );
+};
+
+export type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;
+
+export const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {
+  return (
+    <AvatarLayoutComp
+      {...props}
+      size={size}
+      className={clsx('wds-list-item-media-avatar-layout', className)}
+    />
+  );
+};
+
+export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt'> &
+  SizeProp & {
+    alt?: string;
+  };
+
+/**
+ * TODO: mention that image is for rare cases not for DS illustrations, they discouraged
+ */
+export const Image = ({ alt = '', size = 48, ...props }: ListItemImageProps) => {
+  return (
+    <div
+      className={clsx('wds-list-item-media-image')}
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--item-media-image-size': `${size}px`,
+      }}
+    >
+      <ImageComp {...props} alt={alt} />
+    </div>
+  );
+};

package/src/listItem/ListItemNavigation.tsx

@@ -0,0 +1,11 @@
+import { ChevronRight, BillSplit as Disabled } from '@transferwise/icons';
+import { ButtonProps } from '../button/Button.types';
+import { useItemControl } from './useItemControl';
+
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
+
+export const Navigation = function Navigation({ onClick }: ListItemNavigationProps) {
+  const { baseItemProps } = useItemControl('navigation');
+
+  return baseItemProps.disabled ? <Disabled size={24} /> : <ChevronRight size={24} />;
+};

package/src/listItem/ListItemSwitch.tsx

@@ -0,0 +1,8 @@
+import { default as SwitchComp, SwitchProps } from '../switch';
+import { useItemControl } from './useItemControl';
+
+export const Switch = function (props: SwitchProps) {
+  const { baseItemProps } = useItemControl('switch');
+
+  return <SwitchComp disabled={baseItemProps.disabled} {...props} />;
+};

package/src/listItem/index.ts

@@ -0,0 +1,10 @@
+export type { Props as ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';
+export type { ListItemCheckboxProps } from './ListItemCheckbox';
+export type {
+  ListItemImageProps,
+  ListItemAvatarViewProps,
+  ListItemAvatarLayoutProps,
+} from './ListItemMedia';
+
+export { default } from './ListItem';

package/src/listItem/prompt/Prompt.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen, mockMatchMedia } from '../../test-utils';
+import { Prompt } from './Prompt';
+import { Sentiment } from '../../common';
+
+mockMatchMedia();
+
+describe('ListItem.Prompt', () => {
+  it('renders the aria-label when provided', () => {
+    const ariaLabel = 'Test aria-label';
+    render(
+      <Prompt
+        type={Sentiment.POSITIVE}
+        action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
+      >
+        Positive prompt
+      </Prompt>,
+    );
+
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+
+  it('applies the interactive class when href is provided', () => {
+    render(
+      <Prompt
+        type={Sentiment.POSITIVE}
+        action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
+      >
+        Interactive link
+      </Prompt>,
+    );
+
+    expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('applies the interactive class when onClick is provided', () => {
+    render(
+      <Prompt
+        type={Sentiment.POSITIVE}
+        action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
+      >
+        Interactive button
+      </Prompt>,
+    );
+
+    expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('does not apply the interactive class when no action is provided', () => {
+    render(<Prompt type={Sentiment.POSITIVE}>Non-interactive prompt</Prompt>);
+
+    expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
+  });
+
+  it('renders the children content', () => {
+    render(<Prompt type={Sentiment.POSITIVE}>This is a child prompt</Prompt>);
+
+    expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
+  });
+
+  it('spreads additional props to the wrapper element', () => {
+    render(
+      <Prompt
+        type={Sentiment.POSITIVE}
+        action={{
+          href: 'https://example.com',
+          target: '_blank',
+          'aria-label': 'Custom props prompt',
+        }}
+      >
+        Custom props prompt
+      </Prompt>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

package/src/listItem/prompt/Prompt.story.tsx

@@ -0,0 +1,170 @@
+import Link from '../../link';
+import { Sentiment } from '../../common';
+import { Prompt, ListItemPromptProps } from './Prompt';
+import { lorem40 } from '../../test-utils';
+import { StoryObj } from '@storybook/react';
+
+export default {
+  component: Prompt,
+  title: 'Content/ListItem/Prompt',
+  args: {
+    type: Sentiment.NEGATIVE,
+    children: 'You have done a terrible thing',
+  },
+  argTypes: {
+    type: {
+      options: [
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.NEUTRAL,
+        Sentiment.WARNING,
+        'discount',
+        'savings',
+      ],
+      control: { type: 'radio' },
+      description: 'The type of prompt to display',
+    },
+    action: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      type: {
+        name: 'string',
+        required: true,
+        description: 'The content of the prompt',
+      },
+    },
+  },
+};
+
+type CustomStory = StoryObj<
+  ListItemPromptProps & {
+    interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
+  }
+>;
+
+export const Basic: CustomStory = {
+  args: {
+    interactivity: 'none',
+  },
+  argTypes: {
+    interactivity: {
+      options: ['none', 'full-button', 'full-anchor', 'link'],
+      control: { type: 'radio' },
+      description: 'The type of interactivity to display',
+    },
+  },
+  render: ({ interactivity, ...args }) => {
+    return (
+      <div>
+        <Prompt
+          type={args.type}
+          action={
+            interactivity === 'full-anchor'
+              ? { href: 'wise.com' }
+              : interactivity === 'full-button'
+                ? {
+                    onClick: () => {
+                      console.log('clicked');
+                    },
+                  }
+                : undefined
+          }
+        >
+          {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
+        </Prompt>
+      </div>
+    );
+  },
+};
+
+export const Variants = () => {
+  return (
+    <>
+      <div className="m-b-2">
+        <Prompt type={Sentiment.POSITIVE}>
+          Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt type={Sentiment.NEGATIVE}>
+          Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt type={Sentiment.NEUTRAL}>
+          Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt type={Sentiment.WARNING}>
+          Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt type="discount">
+          Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt type="savings">
+          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt
+          type="discount"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'hidden anchor tags are accessible, right?',
+          }}
+        >
+          The whole prompt is secretly clickable
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt
+          type="negative"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'clickable <a>',
+          }}
+        >
+          The whole prompt is secretly clickable as an anchor tag
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt
+          type="warning"
+          action={{
+            onClick: () => {
+              console.log('clicked');
+            },
+            'aria-label': 'clickable button',
+          }}
+        >
+          The whole prompt is secretly clickable as a button
+        </Prompt>
+      </div>
+      <div className="m-b-2">
+        <Prompt
+          type="neutral"
+          action={{
+            href: 'www.wise.com',
+            target: '_self',
+            'aria-label': 'clickable prompt',
+          }}
+        >
+          The whole prompt is secretly clickable
+        </Prompt>
+      </div>
+      <div className="m-b-2" style={{ maxWidth: '300px' }}>
+        <Prompt type="warning">The prompt has very long text that wraps {lorem40}</Prompt>
+      </div>
+    </>
+  );
+};

package/src/listItem/prompt/Prompt.tsx

@@ -0,0 +1,44 @@
+import { Confetti, Tags } from '@transferwise/icons';
+import { Sentiment } from '../../common';
+import StatusIcon from '../../statusIcon';
+import { clsx } from 'clsx';
+import { LinkProps } from '../../link';
+import Body from '../../body';
+
+export type ListItemPromptProps = {
+  type:
+    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
+    | 'discount'
+    | 'savings';
+  children: React.ReactNode;
+  action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
+};
+
+export const Prompt = ({ type, children, action }: ListItemPromptProps) => {
+  const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
+
+  const icon =
+    type === 'discount' ? (
+      <Tags size={16} />
+    ) : type === 'savings' ? (
+      <Confetti size={16} />
+    ) : (
+      <StatusIcon size={16} sentiment={type} />
+    );
+
+  return (
+    <Wrapper
+      className={clsx(
+        'wds-list-item-prompt',
+        type,
+        (action?.href || action?.onClick) && 'np-prompt-interactive',
+      )}
+      {...(action ?? {})}
+    >
+      <div className="np-prompt-icon">{icon}</div>
+      <Body>{children}</Body>
+    </Wrapper>
+  );
+};
+
+export default Prompt;

package/src/listItem/useItemControl.tsx

@@ -0,0 +1,12 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, ListItemContextData, ListItemTypes } from './ListItem';
+
+export function useItemControl(controlType: ListItemTypes) {
+  const { setControlType, props: baseItemProps } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setControlType(controlType);
+  }, [controlType, setControlType]);
+
+  return { baseItemProps };
+}