@transferwise/components 0.0.0-experimental-c81666a → 0.0.0-experimental-bb07bc5

package/src/listItem/ListItem.tsx

@@ -0,0 +1,282 @@
+import {
+  createContext,
+  ElementType,
+  PropsWithChildren,
+  ReactNode,
+  useId,
+  useMemo,
+  useState,
+} from 'react';
+import { Typography } from '../common';
+import Body from '../body';
+import { AdditionalInfo } from './ListItemAdditionalInfo';
+import { IconButton, ListItemIconButtonProps } from './ListItemIconButton';
+import { Checkbox, ListItemCheckboxProps } from './ListItemCheckbox';
+import { ListItemNavigationProps, Navigation } from './ListItemNavigation';
+import { clsx } from 'clsx';
+import { Button, ListItemButtonProps } from './ListItemButton';
+import { Switch } from './ListItemSwitch';
+import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
+import Prompt from './prompt/Prompt';
+import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
+import { ButtonProps } from '../button/Button.types';
+
+export type ListItemTypes =
+  | 'non-interactive'
+  | 'navigation'
+  | 'radio'
+  | 'checkbox'
+  | 'switch'
+  | 'button'
+  | 'icon-button';
+
+export type ListItemControlProps =
+  | ListItemNavigationProps
+  // TODO: add more types for control props here;
+  | ListItemCheckboxProps
+  | ListItemButtonProps
+  | ListItemIconButtonProps;
+
+export type Props = {
+  as?: 'li' | 'div' | 'span';
+  inverted?: boolean;
+  disabled?: boolean;
+  spotlight?: 'active' | 'inactive';
+  title: ReactNode;
+  subtitle?: ReactNode;
+  additionalInfo?: ReactNode;
+  valueTitle?: ReactNode;
+  valueSubtitle?: ReactNode;
+  media?: ReactNode;
+  control?: ReactNode;
+  prompt?: ReactNode;
+  className?: string;
+};
+
+export type ListItemContextData = {
+  setControlType: (type: ListItemTypes) => void;
+  setControlProps: (props: ListItemControlProps) => void;
+  ids: {
+    label: string;
+    additionalInfo: string;
+    value: string;
+    control: string;
+    prompt: string;
+  };
+  props: Pick<Props, 'disabled' | 'inverted'>;
+};
+
+// @ts-expect-error for now let's mock it with `null` value
+// but actually by default we should specify `setControlType('none')`
+export const ListItemContext = createContext<ListItemContextData>(null);
+
+export const ListItem = ({
+  as: ListItemElement = 'li',
+  title,
+  subtitle,
+  additionalInfo,
+  prompt,
+  inverted,
+  media,
+  spotlight = undefined,
+  valueTitle,
+  valueSubtitle,
+  control = null,
+  disabled,
+  className,
+}: Props) => {
+  /*
+  const returnType = (): ReactNode => {
+    switch (type) {
+      case 'Navigation':
+        return <Chevron orientation={Position.RIGHT} disabled />;
+      case 'Radio':
+        return <RadioButton name="Hello" checked />;
+      case 'Checkbox':
+        return <CheckboxButton name="Hello" checked />;
+      case 'Switch':
+        return <Switch onClick={() => console.log('clicked')} />;
+      case 'Button':
+        return <Button v2>Hello</Button>;
+      case 'IconButton':
+        return (
+          <IconButton size={40} priority="minimal">
+            <InfoCircle />
+          </IconButton>
+        );
+    }
+  };
+  */
+  const idPrefix = useId();
+  const [controlProps, setControlProps] = useState<ListItemControlProps>({});
+  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
+  const ids = {
+    label: `${idPrefix}_label`,
+    value: `${idPrefix}_value`,
+    control: `${idPrefix}_control`,
+    prompt: `${idPrefix}_prompt`,
+    additionalInfo: `${idPrefix}_additional-info`,
+  };
+
+  // TODO: add partially interactive check from Button and IconButtons
+  // (https://transferwise.atlassian.net/browse/DS-7562)
+  const isFullyInteractive = controlType !== 'non-interactive';
+
+  const listItemContext = useMemo(
+    () => ({ setControlType, setControlProps, ids, props: { disabled, inverted } }),
+    [],
+  );
+  return (
+    <ListItemContext.Provider value={listItemContext}>
+      <ListItemElement
+        className={clsx(
+          'wds-list-item',
+          {
+            'wds-list-item-interactive':
+              controlType !== 'non-interactive' &&
+              !(controlProps as ListItemButtonProps | ListItemIconButtonProps)
+                ?.partiallyInteractive,
+          },
+          `wds-list-item-${controlType}`,
+          {
+            [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+          },
+          { disabled },
+          className,
+        )}
+        aria-describedby={[ids.additionalInfo].join(' ')}
+      >
+        <View {...{ prompt, controlType, controlProps }}>
+          {media && <div className="wds-list-item-media">{media}</div>}
+
+          {/* Title + Subtitle + Values + Additional Info - Group */}
+          <div className="wds-list-item-body">
+            {/* Title + Subtitle + Values - Group */}
+            <div className="d-flex justify-content-between">
+              <span>
+                {/* @ts-expect-error div can have role and aria-lavel props */}
+                <Body
+                  type={Typography.BODY_LARGE_BOLD}
+                  className="wds-list-item-title"
+                  // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
+                  // so we enable header semantics via `role` and `aria-level` attrs
+                  role="heading"
+                  aria-level="4"
+                >
+                  {title}
+                </Body>
+                <Body className="wds-list-item-subtitle">{subtitle}</Body>
+              </span>
+              {(valueTitle || valueSubtitle) && (
+                <span
+                  id={ids.value}
+                  className={clsx('wds-list-item-value', 'd-flex align-items-center', {
+                    'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
+                  })}
+                >
+                  {valueTitle && (
+                    <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
+                      {valueTitle}
+                    </Body>
+                  )}
+                  {valueSubtitle && (
+                    <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
+                  )}
+                </span>
+              )}
+            </div>
+
+            {/* Additional Info and Prompt here */}
+            {Boolean(subtitle) && additionalInfo}
+          </div>
+          {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
+        </View>
+      </ListItemElement>
+    </ListItemContext.Provider>
+  );
+};
+
+type ViewProps = PropsWithChildren<{
+  prompt?: ReactNode;
+  controlType?: ListItemTypes;
+  controlProps?: ListItemControlProps;
+}>;
+
+function View({ children, prompt, controlType = 'non-interactive', controlProps }: ViewProps) {
+  const isLinkControl = ['navigation' /* TODO: add other link controls */].includes(controlType);
+
+  const isPartiallyInteractive =
+    (controlType === 'button' || controlType === 'icon-button') &&
+    !!(
+      controlProps &&
+      (controlProps as ListItemButtonProps | ListItemIconButtonProps).partiallyInteractive
+    );
+  const isHrefProvided = isLinkControl
+    ? (controlProps as ListItemNavigationProps)?.href !== '#'
+    : false;
+
+  if (isLinkControl && isHrefProvided) {
+    return (
+      // for link instances of .Navigation, .IconButton, .Button
+      <>
+        <PrimitiveAnchor
+          href={(controlProps as ListItemNavigationProps)?.href}
+          target={(controlProps as ListItemNavigationProps)?.target}
+          className={clsx(
+            'd-flex flex-row',
+            // { 'align-items-center': !subtitle }
+          )}
+        >
+          {children}
+        </PrimitiveAnchor>
+        {prompt}
+      </>
+    );
+  }
+
+  if (isPartiallyInteractive) {
+    return (
+      <>
+        <div
+          className={clsx(
+            'd-flex flex-row partially-interactive',
+            // { 'align-items-center': !subtitle }
+          )}
+        >
+          {children}
+        </div>
+        {prompt}
+      </>
+    );
+  }
+
+  return (
+    // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
+    <fieldset>
+      <label
+        className={clsx(
+          'd-flex flex-row',
+          // { 'align-items-center': !subtitle }
+        )}
+      >
+        {children}
+      </label>
+      {prompt}
+    </fieldset>
+  );
+}
+
+/* eslint-disable functional/immutable-data */
+ListItem.Image = Image;
+ListItem.AvatarView = AvatarView;
+ListItem.AvatarLayout = AvatarLayout;
+ListItem.AdditionalInfo = AdditionalInfo;
+ListItem.Checkbox = Checkbox;
+ListItem.IconButton = IconButton;
+ListItem.Navigation = Navigation;
+ListItem.Button = Button;
+ListItem.Switch = Switch;
+ListItem.Prompt = Prompt;
+/* eslint-enable functional/immutable-data */
+
+export default ListItem;

package/src/listItem/ListItemAdditionalInfo.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren, useContext } from 'react';
+import { ListItemContext, ListItemContextData } from './ListItem';
+import Body from '../body';
+import Link, { LinkProps } from '../link';
+import { Typography } from '../common';
+
+export type ListItemAdditionalInfoProps = PropsWithChildren<{
+  action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
+}>;
+
+export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
+  const { ids } = useContext<ListItemContextData>(ListItemContext);
+
+  return (
+    <Body
+      type={Typography.BODY_DEFAULT}
+      id={ids.additionalInfo}
+      className="wds-list-item-additional-info"
+    >
+      {children}
+      {action ? (
+        <>
+          {' '}
+          <Link href={action.href} target={action.target} onClick={action.onClick}>
+            {action.label}
+          </Link>
+        </>
+      ) : null}
+    </Body>
+  );
+};

package/src/listItem/ListItemButton.spec.tsx

@@ -0,0 +1,92 @@
+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 mockSetControlProps = jest.fn();
+
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ListItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          setControlProps: mockSetControlProps,
+          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,24 @@
+import { default as ButtonComp, NewButtonProps } from '../button';
+import { useItemControl } from './useItemControl';
+
+export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'> & {
+  partiallyInteractive?: boolean;
+};
+
+export const Button = ({
+  priority = 'secondary',
+  partiallyInteractive,
+  ...props
+}: ListItemButtonProps) => {
+  const { baseItemProps } = useItemControl('button', { partiallyInteractive, ...props });
+
+  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,16 @@
+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;
+  partiallyInteractive?: boolean;
+};
+
+export const IconButton = function (props: ListItemIconButtonProps) {
+  const { partiallyInteractive, ...restProps } = props;
+
+  const { baseItemProps } = useItemControl('icon-button', { partiallyInteractive, ...restProps });
+
+  return <IconButtonComp {...restProps} 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,23 @@
+import { ChevronRight, BackslashCircle } from '@transferwise/icons';
+import { ButtonProps } from '../button/Button.types';
+import { useItemControl } from './useItemControl';
+import { PrimitiveButton } from '../primitives';
+
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;
+
+export const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {
+  const { baseItemProps } = useItemControl('navigation', { href, ...props });
+  const isLink = href !== '#';
+  const icon = baseItemProps.disabled ? <BackslashCircle size={24} /> : <ChevronRight size={24} />;
+  return isLink ? (
+    <>{icon}</>
+  ) : (
+    <PrimitiveButton
+      className="btn-unstyled"
+      // @ts-expect-error TODO: fix the type error later
+      onClick={props.onClick}
+    >
+      {icon}
+    </PrimitiveButton>
+  );
+};

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');
+  });
+});