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

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

@@ -0,0 +1,199 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { lorem10, lorem5 } from '../../test-utils';
+import Link from '../../link';
+import { Sentiment as Sentiments } from '../../common';
+import { ListItem } from '../..';
+import { Prompt, 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) => (
+    <ListItem
+      title={lorem5}
+      subtitle={lorem10}
+      media={MEDIA.avatarSingle}
+      control={CONTROLS.switch}
+      prompt={<Prompt {...args} />}
+    />
+  ),
+};
+
+export const Sentiment: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <ol className="list-unstyled">
+      <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>}
+      />
+    </ol>
+  ),
+};
+
+/**
+ * `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) => (
+    <ol className="list-unstyled">
+      <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={fn()}>inline button</Link> than can e.g. trigger
+            a modal.
+          </Prompt>
+        }
+      />
+    </ol>
+  ),
+};
+
+/**
+ * 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) => (
+    <ol className="list-unstyled">
+      <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>
+        }
+      />
+    </ol>
+  ),
+};

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.story.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useState } from 'react';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+import type { ListItemRadioProps } from './ListItemRadio';
+import { fn } from 'storybook/test';
+import { ProfileType } from '../../common';
+
+const meta: Meta<ListItemRadioProps> = {
+  component: ListItem.Radio,
+  title: 'Content/ListItem/ListItem.Radio',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    name: 'radio-group',
+    value: 'option1',
+    checked: false,
+    onChange: fn(),
+  },
+} satisfies Meta<ListItemRadioProps>;
+
+export default meta;
+
+type Story = StoryObj<ListItemRadioProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemRadioProps) => {
+    return (
+      <ListItem
+        title="List item with radio"
+        subtitle="Select this option"
+        media={MEDIA.avatarSingle}
+        control={<ListItem.Radio {...args} />}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};
+
+/**
+ * Radio controls follow the native HTML behaviour and can be grouped using the `name` prop.
+ */
+export const RadioGroup: Story = {
+  render: function Render() {
+    const [selectedValue, setSelectedValue] = useState('2');
+
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="1"
+              checked={selectedValue === '1'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="First option"
+          subtitle="This is the first choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="2"
+              checked={selectedValue === '2'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="Second option"
+          subtitle="This is the second choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+        <ListItem
+          control={
+            <ListItem.Radio
+              name="group"
+              value="3"
+              checked={selectedValue === '3'}
+              onChange={setSelectedValue}
+            />
+          }
+          title="Third option"
+          subtitle="This is the third choice"
+          media={<ListItem.AvatarView profileType={ProfileType.BUSINESS} />}
+        />
+      </ol>
+    );
+  },
+};

package/src/listItem/Radio/ListItemRadio.tsx

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+import RadioButton, { type RadioButtonProps } from '../../common/RadioButton/RadioButton';
+import { useListItemControl } from '../useListItemControl';
+import { ListItemContext } from '../ListItemContext';
+
+export type ListItemRadioProps = Omit<
+  RadioButtonProps,
+  'disabled' | 'readOnly' | 'className' | 'id'
+>;
+
+/**
+ * This component allows for rendering a Button control. It's a thin wrapper around the
+ * [Button component](https://storybook.wise.design/?path=/docs/content-button--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---button) for details.
+ */
+export const Radio = function (props: ListItemRadioProps) {
+  const { baseItemProps } = useListItemControl('radio', { ...props });
+  const { ids, describedByIds } = useContext(ListItemContext);
+
+  return (
+    <RadioButton
+      {...props}
+      aria-describedby={describedByIds}
+      className="wds-list-item-control"
+      disabled={baseItemProps.disabled}
+      id={ids.control}
+    />
+  );
+};
+
+Radio.displayName = 'ListItem.Radio';

package/src/listItem/Radio/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemRadioProps } from './ListItemRadio';
+export { Radio } from './ListItemRadio';

package/src/listItem/Switch/ListItemSwitch.story.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useState } from 'react';
+import { ListItem } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../_stories/subcomponents';
+import type { ListItemSwitchProps } from './ListItemSwitch';
+import { fn } from 'storybook/test';
+import { lorem10, lorem5 } from '../../test-utils';
+
+const meta: Meta<ListItemSwitchProps> = {
+  component: ListItem.Switch,
+  title: 'Content/ListItem/ListItem.Switch',
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+  args: {
+    checked: false,
+    onClick: fn(),
+  },
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<ListItemSwitchProps>;
+
+export default meta;
+
+type Story = StoryObj<ListItemSwitchProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ListItemSwitchProps) => {
+    return (
+      <ListItem
+        title="List item with switch"
+        subtitle="Toggle this setting"
+        media={MEDIA.avatarSingle}
+        control={<ListItem.Switch {...args} />}
+        additionalInfo={INFO.nonInteractive}
+      />
+    );
+  },
+};
+
+export const States: Story = {
+  render: (args) => {
+    return (
+      <ol className="list-unstyled">
+        <ListItem
+          title={lorem5}
+          subtitle={lorem10}
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Switch {...args} checked />}
+        />
+        <ListItem
+          key={lorem5}
+          title={lorem10}
+          media={MEDIA.avatarSingle}
+          control={<ListItem.Switch {...args} />}
+        />
+      </ol>
+    );
+  },
+};

package/src/listItem/Switch/ListItemSwitch.tsx

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+import SwitchComp, { type SwitchProps } from '../../switch';
+import { useListItemControl } from '../useListItemControl';
+import { ListItemContext } from '../ListItemContext';
+
+export type ListItemSwitchProps = Omit<
+  SwitchProps,
+  'disabled' | 'id' | 'aria-labelledby' | 'aria-label'
+>;
+
+/**
+ * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the
+ * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),
+ * but offers only a subset of its features in line with the ListItem's constraints. <br />
+ *
+ * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.
+ */
+export const Switch = function (props: ListItemSwitchProps) {
+  const { baseItemProps } = useListItemControl('switch', { ...props });
+  const { ids, describedByIds } = useContext(ListItemContext);
+
+  return (
+    <SwitchComp
+      {...props}
+      aria-describedby={describedByIds}
+      className="wds-list-item-control"
+      disabled={baseItemProps.disabled}
+      id={ids.control}
+    />
+  );
+};
+
+Switch.displayName = 'ListItem.Switch';

package/src/listItem/Switch/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemSwitchProps } from './ListItemSwitch';
+export { Switch } from './ListItemSwitch';