@transferwise/components 0.0.0-experimental-e06e456 → 0.0.0-experimental-e3978a5

package/src/listItem/_stories/ListItem.scenarios.story.tsx

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { InfoCircle, Documents } from '@transferwise/icons';
+import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
+import Modal from '../../modal';
+import Link from '../../link';
+import List from '../../list';
+import Popover from '../../popover';
+import { SnackbarConsumer, type SnackbarContextType } from '../../snackbar/SnackbarContext';
+import SnackbarProvider from '../../snackbar/SnackbarProvider';
+import Tooltip from '../../tooltip';
+import { Position } from '../../common';
+import { ListItem, type ListItemProps } from '../ListItem';
+import { storySourceWithoutNoise } from './helpers';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPTS,
+} from './subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/common scenarios',
+  tags: ['autodocs'],
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    media: MEDIA.image,
+    additionalInfo: INFO.nonInteractive,
+    prompt: PROMPTS.interactive,
+    control: CONTROLS.button,
+  },
+  parameters: {
+    docs: {
+      toc: true,
+      page: () => (
+        <>
+          <Title>Common scenarios</Title>
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * Aside from using the main control for triggering a [Modal](?path=/docs/dialogs-modal--docs),
+ * it's also possible to toggle it via inline-button as part of the `<ListItem.AdditionalInfo>`
+ * or `<ListItem.Prompt>`.
+ */
+export const WithModals: Story = storySourceWithoutNoise({
+  parameters: {
+    controls: { disable: true },
+  },
+  render: function WithModals(listItemProps) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleOpening = () => {
+      setIsModalOpen(true);
+      action('Modal opening')();
+    };
+    const handleClosing = () => {
+      setIsModalOpen(false);
+      action('Modal closing')();
+    };
+
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <ListItem.Button partiallyInteractive onClick={handleOpening}>
+              Open modal
+            </ListItem.Button>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'button opening a modal', onClick: handleOpening }}
+            >
+              This is additional information that contains a
+            </ListItem.AdditionalInfo>
+          }
+          prompt={
+            <ListItem.Prompt sentiment="positive">
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+              This prompt also has a <Link onClick={handleOpening}>
+                button that opens a modal
+              </Link>{' '}
+              for your convenience.
+            </ListItem.Prompt>
+          }
+        />
+        <Modal body={lorem100} open={isModalOpen} onClose={handleClosing} />
+      </List>
+    );
+  },
+});
+
+/**
+ * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
+ */
+export const WithPopover: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (listItemProps) => {
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <Popover preferredPlacement={Position.BOTTOM} title={lorem5} content={lorem20}>
+              <ListItem.IconButton
+                partiallyInteractive
+                aria-label="Learn more about {enter subject here}"
+              >
+                <InfoCircle />
+              </ListItem.IconButton>
+            </Popover>
+          }
+          prompt={PROMPTS.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
+ */
+export const WithTooltip: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (listItemProps) => {
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <Tooltip position={Position.BOTTOM} label={lorem10}>
+              <ListItem.IconButton
+                partiallyInteractive
+                aria-label="Learn more about {enter subject here}"
+              >
+                <InfoCircle />
+              </ListItem.IconButton>
+            </Tooltip>
+          }
+          prompt={PROMPTS.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * ListItem is often used as a simple copy and paste button augmented with a [Snackbar](?path=/docs/dialogs-snackbar--docs). <br />
+ *
+ * **NB** The snippet below uses a simplified example implementation of a clipboard handler,
+ * which may not be suitable or sufficient for your needs.
+ */
+export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
+  parameters: {
+    controls: { disable: true },
+  },
+  args: {
+    prompt: undefined,
+    additionalInfo: undefined,
+  },
+  render: function CopyAndPaste(listItemProps) {
+    const title = 'Artie Choke';
+    const subtitle = 'Account holder';
+
+    const handleCopy = async (createSnackbar: SnackbarContextType['createSnackbar']) =>
+      navigator.clipboard
+        .writeText(`${subtitle}: ${title}`)
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        })
+        .then(() => {
+          createSnackbar({
+            text: `${subtitle} copied to clipboard.`,
+          });
+        });
+
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          title={title}
+          subtitle={subtitle}
+          inverted
+          control={
+            <SnackbarProvider>
+              <SnackbarConsumer>
+                {({ createSnackbar }) => {
+                  return (
+                    <ListItem.IconButton
+                      aria-label={`Copy ${subtitle} to clipboard`}
+                      partiallyInteractive
+                      onClick={async () => handleCopy(createSnackbar)}
+                    >
+                      <Documents />
+                    </ListItem.IconButton>
+                  );
+                }}
+              </SnackbarConsumer>
+            </SnackbarProvider>
+          }
+          media={
+            <ListItem.AvatarView
+              imgSrc="../avatar-square-dude.webp"
+              profileName="John Smith"
+              size={48}
+            />
+          }
+        />
+      </List>
+    );
+  },
+});