@transferwise/components 46.103.1 → 46.105.0

package/src/listItem/Prompt/ListItemPrompt.css

@@ -0,0 +1,157 @@
+.wds-list-item-prompt {
+  grid-area: prompt;
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  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:has(a),
+.wds-list-item-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-prompt a,
+.wds-list-item-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt a:first-of-type:before,
+.wds-list-item-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-prompt.np-prompt-icon {
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  gap: var(--size-4);
+}
+.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.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a,
+.wds-list-item-prompt.negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover,
+.wds-list-item-prompt.negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active,
+.wds-list-item-prompt.negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.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,
+.wds-list-item-prompt.positive button,
+.wds-list-item-prompt.discount button,
+.wds-list-item-prompt.savings button {
+  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,
+.wds-list-item-prompt.positive button:hover,
+.wds-list-item-prompt.discount button:hover,
+.wds-list-item-prompt.savings button: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,
+.wds-list-item-prompt.positive button:active,
+.wds-list-item-prompt.discount button:active,
+.wds-list-item-prompt.savings button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.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,
+.wds-list-item-prompt.neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):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,
+.wds-list-item-prompt.warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover,
+.wds-list-item-prompt.warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active,
+.wds-list-item-prompt.warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}

package/src/listItem/Prompt/ListItemPrompt.less

@@ -0,0 +1,134 @@
+.wds-list-item-prompt {
+  grid-area: prompt;
+
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: var(--padding-x-small);
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  overflow-wrap: break-word;
+
+  &:has(a),
+  &:has(button) {
+    position: relative;
+    z-index: 1;
+  }
+
+  a, button {
+    text-underline-offset: calc(var(--size-4) / 2);
+    &:first-of-type {
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+
+  &.np-prompt-icon {
+    padding-left: calc(var(--padding-x-small) - 1px);
+    padding-right: var(--padding-x-small);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-4);
+  }
+
+  .np-prompt-icon {
+    padding-right: calc(var(--size-12) / 2);
+    padding-top: calc(var(--size-4) - 1px);
+    padding-bottom: calc(var(--size-4) - 1px);
+
+    .tw-icon-tags,
+    .tw-icon-confetti {
+      color: var(--color-sentiment-positive-primary);
+    }
+  }
+
+  &.negative {
+    background-color: var(--color-sentiment-negative-secondary);
+    color: var(--color-sentiment-negative-primary);
+    a, button {
+      color: var(--color-sentiment-negative-primary);
+      &:hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-negative-primary-active);
+      }
+    }
+      .wds-list-item-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-negative-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-negative-secondary-active);
+      }
+    }
+  }
+  &.positive,
+  &.discount,
+  &.savings {
+    background-color: var(--color-sentiment-positive-secondary);
+    color: var(--color-sentiment-positive-primary);
+    a, button {
+      color: var(--color-sentiment-positive-primary);
+      &:hover {
+        color: var(--color-sentiment-positive-primary-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-positive-primary-active);
+      }
+    }
+    .wds-list-item-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-sentiment-positive-secondary-hover);
+      }
+      &:active {
+        background-color: var(--color-sentiment-positive-secondary-active);
+      }
+    }
+  }
+  &.neutral {
+    background-color: var(--color-background-neutral);
+    color: var(--color-content-primary);
+    a, button {
+      color: var(--color-content-primary);
+    }
+    .wds-list-item-prompt&:has(a, button) {
+      &:hover {
+        background-color: var(--color-background-neutral-hover);
+      }
+      &:active {
+        background-color: var(--color-background-neutral-active);
+      }
+    }
+  }
+  &.warning {
+    background-color: var(--color-sentiment-warning-secondary);
+    color: var(--color-sentiment-warning-content);
+    a, button {
+      color: var(--color-sentiment-warning-content);
+      &:hover {
+        color: var(--color-sentiment-warning-content-hover);
+      }
+      &:active {
+        color: var(--color-sentiment-warning-content-active);
+      }
+    }
+    .wds-list-item-prompt&:has(a, button) {
+      &:hover {
+        // someday we'll have hover and active states for warning
+        // background-color: var(--color-sentiment-warning-secondary-hover);
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+      }
+      &:active {
+        // background-color: var(--color-sentiment-warning-secondary-active);
+        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { mockMatchMedia, render, screen } from '../../test-utils';
+import { Sentiment } from '../../common';
+import { ListItem } from '../ListItem';
+import type { ListItemPromptProps } from './ListItemPrompt';
+
+mockMatchMedia();
+
+describe('ListItem.Prompt', () => {
+  it('renders children content', () => {
+    render(
+      <ListItem
+        title="Test Title"
+        prompt={<ListItem.Prompt>This is a prompt message</ListItem.Prompt>}
+      />,
+    );
+
+    expect(screen.getByText('This is a prompt message')).toBeInTheDocument();
+  });
+
+  describe('render icon', () => {
+    it.each([
+      [Sentiment.NEUTRAL, 'info-icon'],
+      [Sentiment.POSITIVE, 'check-icon'],
+      [Sentiment.NEGATIVE, 'cross-icon'],
+      [Sentiment.WARNING, 'alert-icon'],
+    ] as [ListItemPromptProps['sentiment'], string][])('renders %s icon', (sentiment, iconId) => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
+        />,
+      );
+      expect(screen.getByTestId(iconId)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,204 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { lorem10, lorem5 } from '../../test-utils';
+import Link from '../../link';
+import List from '../../list';
+import { Sentiment as Sentiments } from '../../common';
+import { ListItem } from '../ListItem';
+import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import {
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+
+const meta: Meta<ListItemPromptProps> = {
+  component: Prompt,
+  title: 'Content/ListItem/ListItem.Prompt',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    sentiment: undefined,
+    children: 'You have done a terrible thing',
+  },
+  argTypes: {
+    sentiment: {
+      options: [
+        'unset (undefined)',
+        Sentiments.POSITIVE,
+        Sentiments.NEGATIVE,
+        Sentiments.NEUTRAL,
+        Sentiments.WARNING,
+      ],
+      mapping: {
+        'unset (undefined)': undefined,
+      },
+      control: { type: 'radio' },
+    },
+    children: {
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ListItemPromptProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  parameters: {
+    docs: {
+      source: 'dynamic',
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt {...args} />}
+      />
+    </List>
+  ),
+};
+
+export const Sentiment: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
+      />
+    </List>
+  ),
+};
+
+/**
+ * `ListItem.Prompt` is rendered on a separate branch of the Accessibility Tree from the item's
+ * control, so it can include a single instance of `Link` component, which can be rendered as
+ * either HTML anchor or button. That element will spread across the whole surface of the Prompt
+ * so it's easily accessible for all users.
+ */
+export const Interactivity: Story = {
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <Prompt sentiment={args.sentiment}>
+            This prompt includes a{' '}
+            <Link href="https://wise.com" target="_blank" rel="noreferrer">
+              link to some resource
+            </Link>{' '}
+            to help the user in their journey.
+          </Prompt>
+        }
+      />
+
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <Prompt sentiment={args.sentiment}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+            This prompt includes an <Link onClick={action('inline button')}>
+              inline button
+            </Link>{' '}
+            than can e.g. trigger a modal.
+          </Prompt>
+        }
+      />
+    </List>
+  ),
+};
+
+/**
+ * By default, the Prompt will try to occupy as little space as possible, but as soon as you make it more than 1 line long, it will stretch to the full available width.
+ *
+ * **NB:** While Prompt supports multi-line text, its content should be concise and have no more than 2 short sentences so users can quickly understand the message.
+ */
+export const Sizing: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.image}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>This is a short text</ListItem.Prompt>
+        }
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.image}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING}>
+            This is a very, very, very, very, very long text that will wrap into more than 1 line
+            and will make the prompt stretch to a full available width. Technically it can be as
+            long as Vim manual, but we recommend keeping it concise and no more than 2 short
+            sentences.
+          </ListItem.Prompt>
+        }
+      />
+    </List>
+  ),
+};

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -0,0 +1,32 @@
+import { useContext } from 'react';
+import { clsx } from 'clsx';
+import { Sentiment } from '../../common';
+import StatusIcon from '../../statusIcon';
+import Body from '../../body';
+import { ListItemContext, type ListItemContextData } from '../ListItemContext';
+
+export type ListItemPromptProps = {
+  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  children: React.ReactNode;
+};
+
+/**
+ * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
+ */
+export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
+  const { ids } = useContext<ListItemContextData>(ListItemContext);
+
+  return (
+    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>
+      <div className="np-prompt-icon">
+        <StatusIcon size={16} sentiment={sentiment} />
+      </div>
+      <Body>{children}</Body>
+    </div>
+  );
+};
+
+Prompt.displayName = 'ListItem.Prompt';
+export default Prompt;

package/src/listItem/Prompt/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemPromptProps } from './ListItemPrompt';
+export { Prompt } from './ListItemPrompt';

package/src/listItem/Radio/ListItemRadio.spec.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '../../test-utils';
+import userEvent from '@testing-library/user-event';
+import { ListItem, type ListItemProps } from '../ListItem';
+
+describe('ListItem.Radio', () => {
+  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
+    render(<ListItem title="Test Title" {...overrides} />);
+
+  it('renders radio button', () => {
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={() => {}} />,
+    });
+
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  describe('checked state', () => {
+    it('reflects checked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked />,
+      });
+
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+
+    it('reflects unchecked state', () => {
+      renderWith({
+        control: <ListItem.Radio name="test-radio" value="option1" checked={false} />,
+      });
+
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+  });
+
+  it('handles onChange events', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    await userEvent.click(screen.getByRole('radio'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when ListItem is disabled', async () => {
+    const handleChange = jest.fn();
+    renderWith({
+      disabled: true,
+      control: <ListItem.Radio name="test-radio" value="option1" onChange={handleChange} />,
+    });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toBeDisabled();
+    await userEvent.click(radio);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('supports name and value attributes', () => {
+    renderWith({ control: <ListItem.Radio name="test-radio" value="option1" /> });
+
+    const radio = screen.getByRole('radio');
+    expect(radio).toHaveAttribute('name', 'test-radio');
+    // eslint-disable-next-line jest-dom/prefer-to-have-value
+    expect(radio).toHaveAttribute('value', 'option1');
+  });
+});