@transferwise/components 0.0.0-experimental-e068634 → 0.0.0-experimental-ea9a101

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

@@ -1,228 +0,0 @@
-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 Props as ItemProps } 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<ItemProps>;
-type Story = StoryObj<ItemProps>;
-
-/**
- * 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>
-    );
-  },
-});