@transferwise/components 0.0.0-experimental-9741cfd → 0.0.0-experimental-2d733a4

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 { ids, baseItemProps } = useItemControl('button');
+
+  const commonProps = {
+    ...props,
+    priority,
+    v2: true,
+    size: 'md',
+    disabled: baseItemProps.disabled,
+  };
+
+  return <ButtonComp {...(commonProps as NewButtonProps)} id={ids.control} />;
+};

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,16 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, ListItemContextData, ListItemTypes } from './ListItem';
+
+export function useItemControl(controlType: ListItemTypes) {
+  const {
+    ids,
+    setControlType,
+    props: baseItemProps,
+  } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setControlType(controlType);
+  }, [controlType, setControlType]);
+
+  return { ids, baseItemProps };
+}

package/src/main.css

@@ -1910,17 +1910,10 @@ button.np-option {
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
-.tw-date label {
+.np-theme-personal .tw-date label {
   width: 100%;
-}
-.tw-date .tw-date--year label {
   margin-bottom: 0;
 }
-@media (min-width: 576px) {
-  .np-theme-personal .tw-date label {
-    margin-bottom: 0;
-  }
-}
 .tw-date-lookup-menu {
   width: 400px;
 }
@@ -2669,6 +2662,194 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
+.wds-list-item {
+  padding: 16px;
+  padding: var(--size-16);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  gap: 16px;
+  gap: var(--size-16);
+}
+.wds-list-item-interactive {
+  cursor: pointer;
+}
+.wds-list-item-interactive:hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-media-image {
+  width: var(--item-media-image-size);
+  height: var(--item-media-image-size);
+}
+.wds-list-item-body {
+  width: 100%;
+}
+.wds-list-item-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-additional-info {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-value {
+  flex: 0 0 auto;
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+  border: 1px dashed rgba(0,0,0,0.10196);
+  border: 1px dashed var(--color-border-neutral);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item-prompt {
+  display: inline-flex;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt.np-prompt-interactive {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.negative:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:hover,
+.np-prompt-interactive.wds-list-item-prompt.discount:hover,
+.np-prompt-interactive.wds-list-item-prompt.savings:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.positive:active,
+.np-prompt-interactive.wds-list-item-prompt.discount:active,
+.np-prompt-interactive.wds-list-item-prompt.savings:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-prompt-interactive.wds-list-item-prompt.neutral:active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
+}
+.np-prompt-interactive.wds-list-item-prompt.warning:active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
+}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";