@transferwise/components 0.0.0-experimental-e1870f3 → 0.0.0-experimental-302d967

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

@@ -1,226 +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 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 {
-  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';
-
-/**
- * Recent storybook versions render the full source including all story parameters which
- * creates noise, this simple workaround only shows the render function.
- * This is a workaround for the issue.
- * @see https://github.com/storybookjs/storybook/issues/22281
- */
-const storySourceWithoutNoise = (config: Story): Story => {
-  const newConfig: Story = {
-    ...config,
-    parameters: {
-      ...config.parameters,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      docs: {
-        ...config.parameters?.docs,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        source: {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          ...config.parameters?.docs?.source,
-          type: 'code' as const,
-          transform: (code: string) =>
-            // eslint-disable-next-line regexp/no-super-linear-backtracking
-            code.replace(/storySourceWithoutNoise\(\{\s+render\s?:\s+(.*)\}\)$/gms, '$1'),
-        },
-      },
-    },
-  };
-
-  return newConfig;
-};
-
-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({
-  render: function WithModals(listItemProps) {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-
-    const handleOpening = () => {
-      setIsModalOpen(true);
-      action('Modal opening')();
-    };
-    const handleClosing = () => {
-      setIsModalOpen(false);
-      action('Modal closing')();
-    };
-
-    return (
-      <>
-        <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} />
-      </>
-    );
-  },
-});
-
-/**
- * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
- */
-export const WithPopover: Story = {
-  render: (listItemProps) => {
-    return (
-      <ListItem
-        {...listItemProps}
-        control={
-          <Popover preferredPlacement={Position.BOTTOM} title={lorem5} content={lorem20}>
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          </Popover>
-        }
-        prompt={PROMPTS.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
- */
-export const WithTooltip: Story = {
-  render: (listItemProps) => {
-    return (
-      <ListItem
-        {...listItemProps}
-        control={
-          <Tooltip position={Position.BOTTOM} label={lorem10}>
-            <ListItem.IconButton partiallyInteractive>
-              <InfoCircle />
-            </ListItem.IconButton>
-          </Tooltip>
-        }
-        prompt={PROMPTS.nonInteractive}
-      />
-    );
-  },
-};
-
-/**
- * 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({
-  render: function CopyAndPaste() {
-    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 (
-      <ListItem
-        title={title}
-        subtitle={subtitle}
-        inverted
-        control={
-          <SnackbarProvider>
-            <SnackbarConsumer>
-              {({ createSnackbar }) => {
-                return (
-                  <ListItem.IconButton
-                    partiallyInteractive
-                    onClick={async () => handleCopy(createSnackbar)}
-                  >
-                    <Documents />
-                  </ListItem.IconButton>
-                );
-              }}
-            </SnackbarConsumer>
-          </SnackbarProvider>
-        }
-        media={
-          <ListItem.AvatarView
-            imgSrc="../avatar-square-dude.webp"
-            profileName="John Smith"
-            size={48}
-          />
-        }
-      />
-    );
-  },
-});