@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Modal/Modal.stories.tsx

@@ -1,430 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {SimpleDropdown} from '../Dropdown';
-import {Input} from '../Input';
-import type {MenuOption} from '../Menu';
-import {SubTitleLarge} from '../Text';
-import {Textarea} from '../Textarea';
-import {Tooltip} from '../Tooltip';
-
-import type {ModalProps} from './Modal';
-import {Modal, ModalBody, ModalFooter, ModalHeader} from './Modal';
-
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label:
-      'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Modal',
-  argTypes: {
-    isOpen: {
-      description: 'if **true**, the modal is presented',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    size: {
-      description: `
-Modal supports only three size variants namely small, medium and large. \`small\` < \`medium\` < \`large\`.
-You can always override the sizing by a className. The default value is currently not set to support backward compatibility
-      `,
-      options: ['small', 'medium', 'large'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: ''},
-      },
-    },
-    hideBackdrop: {
-      description:
-        'if **true**, dark backdrop is removed and transparent backdrop is applied on the DOM',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    tapOutsideToClose: {
-      description: 'if **true**, closes the modal on tap of backdrop',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{container?: string, content?: string, backdrop?: string}',
-        },
-      },
-    },
-    customAnimation: {
-      description: `\`<Modal>\` and its derivatives(\`<Dialog>\`, \`<Panel>\`) support
-      \`customAnimation: UseTransitionStylesProps\` prop for
-      all your custom animation needs.
-      It defines the following properties: \n\n
-- \`duration\` (optional): Specifies the duration of the animation in milliseconds.
-It can be a single number to set the duration for both opening and closing animations,
-or an object with separate open and close properties to specify different durations
-for opening and closing animations.
-- \`initial\` (optional): Represents the initial CSS styles for the modal component when
-it is first mounted. This property allows you to define the initial appearance of the
-modal before any animations occur.
-- \`open\` (optional): Defines the CSS styles that should be applied when the modal is fully
-opened. This property specifies the appearance of the modal when it transitions from the
-initial state to the fully open state.
-- \`close\` (optional): Specifies the CSS styles for the modal when it is being closed. This
-property determines the appearance of the modal when it transitions from the fully open
-state to the closed state.
-- \`common\` (optional): Represents the CSS styles that are common to all states of the modal
-component. These styles will be applied throughout the entire lifecycle of the modal,
-regardless of whether it is in the initial, open, or close state. You can use this property
-to define shared styles that should be present in all states.
-\n\nThe modal component follows a predefined order of states as it transitions through
-its lifecycle. It starts in the \`unmounted\` state, then moves to the \`initial\` state when mounted.
-From there, it can transition to the \`open\` state when fully opened, and then to the \`close\` state
-when being closed. Finally, it returns to the \`unmounted\` state when it is no longer needed. This
-is the transition order: \`unmounted\` -> \`initial\` -> \`open\` -> \`close\` -> \`unmounted\`
-By specifying the appropriate values for the \`duration\`, \`initial\`, \`open\`, \`close\`, and \`common\` properties,
-you can control the animation and styling of the modal at each stage of its lifecycle.
-      `,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'UseTransitionStylesProps'},
-      },
-    },
-    children: {
-      description: 'The children to rendered inside the Modal window',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    onClose: {
-      description: '**onClose** handler is triggered on backdrop click',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    initialFocus: {
-      description:
-        'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '-1'},
-      },
-    },
-  },
-
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Modal component',
-      description: {
-        component: `
-\`\`\`js
-import { Modal, ModalBody, ModalHeader, ModalFooter } from "@spaced-out/ui-design-system/lib/components/Modal";
-\`\`\`
-**Modal** component provides the foundational base for creating elements which blocks interaction with the rest of the application.
-It is used as base for Dialog and Panel components. A **Modal** component can be used in cases where you want to have a custom implementation.
-Modal component renders its children on top of a backdrop spanning across the whole page. The backdrop in turn also blurs the background.
-Some features of the Modal components are listed below:
-
-\`Modal implements Focus trapping where in the focus is trapped and rotated inside a modal element only.\`
-
-\`When the Modal is presented, page scrolling is disabled \`
-
-\`Manages stacking \`
-
-Modal is attached on the \`body\` using **React Portal**.
-
-Semantically a \`Modal\` component should be composed from \`ModalHeader\`, \`ModalBody\`, and \`ModalFooter\` components,
-these are nothing but layout components which defines appropriate spacing for the children living in them.
-\`ModalHeader\` adds a **close icon** by default and provides a callback on click. You can pass a **prop to show/hide the close button** as well.
-
-**Styling: **
-
-\`Modal\` accepts a \`classNames\` object. You can style the modal(if required) using the **content className**. Most of the use
-cases of Modal sizing can be handled by \`size\` prop of Modal which accepts \`small\` \`medium\` \`large\` as value.
-
-If you want to assign custom props the parent should set those props of the
-Modal using the content className.
-
-Each of these components also exposes a className
-
-**Usage: **
-
-\`\`\`jsx
-<Modal
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  classNames={{content: css.modalContent}}
->
-  <ModalHeader onCloseButtonClick={() => setIsOpen(false)}>
-    <SubTitleLarge>
-      The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contain
-    </SubTitleLarge>
-  </ModalHeader>
-  <ModalBody>
-    <BodyLarge color="secondary">
-      "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all the letters of the alphabet.
-      The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts,
-      and other applications involving text where the use of all letters in the alphabet is desired.
-    </BodyLarge>
-  </ModalBody>
-  <ModalFooter>
-    <Button type="secondary" onClick={() => setIsOpen(false)}>Secondary Button</Button>
-    <Button type="primary" onClick={() => setIsOpen(false)}>Primary Button</Button>
-  </ModalFooter>
-</Modal>
-\`\`\`
-\`\`\`css
-// You can style the modal(if required) using the **content className**. Most of the use
-// cases of Modal sizing can be handled by size prop of Modal which accepts small, medium and large as value.
-.modalContent {
-  max-height: size720;
-}
-\`\`\`
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Modal/Modal.jsx',
-    },
-  },
-};
-
-export const _Modal = (args: ModalProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <>
-      <Tooltip title="Open">
-        <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
-      </Tooltip>
-      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <ModalHeader onCloseButtonClick={() => setIsOpen(false)}>
-          <SubTitleLarge>Modal Title</SubTitleLarge>
-        </ModalHeader>
-        <ModalBody>
-          <Input
-            type="email"
-            label="Email Address"
-            placeholder="Enter your email address"
-          />
-          <br />
-          <SimpleDropdown
-            label="Issue Type"
-            placeholder="Select an issue type"
-            options={[
-              {
-                iconLeft: 'bug',
-                iconLeftType: 'duotone',
-                key: '1',
-                label: 'Production Issue',
-              },
-              {
-                iconLeft: 'bug-slash',
-                iconLeftType: 'duotone',
-                key: '2',
-                label: 'Dev Issue',
-              },
-              {
-                iconLeft: 'ban-bug',
-                iconLeftType: 'duotone',
-                key: '4',
-                label: 'Product Issue',
-              },
-            ]}
-          />
-          <br />
-          <Textarea
-            label="Description"
-            placeholder="Enter the issue description"
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Tooltip title="Some text" elevation="modal">
-            <Button type="tertiary" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-          </Tooltip>
-          <Button type="secondary" onClick={() => setIsOpen(false)}>
-            Action
-          </Button>
-        </ModalFooter>
-      </Modal>
-    </>
-  );
-};
-
-_Modal.args = {
-  hideBackdrop: false,
-  tapOutsideToClose: true,
-  initialFocus: 1,
-  size: 'medium',
-};
-
-export const _ModalWithOverflowBody = (args: ModalProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <>
-      <Tooltip title="Open">
-        <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
-      </Tooltip>
-      <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <ModalHeader onCloseButtonClick={() => setIsOpen(false)}>
-          <SubTitleLarge>Modal Title</SubTitleLarge>
-        </ModalHeader>
-        <ModalBody>
-          <Input
-            type="email"
-            label="Email Address"
-            placeholder="Enter your email address"
-          />
-          <br />
-          <SimpleDropdown
-            label="Issue Type"
-            placeholder="Select an issue type"
-            showLabelTooltip={{maxLines: 6}}
-            options={options}
-          />
-        </ModalBody>
-      </Modal>
-    </>
-  );
-};
-
-_ModalWithOverflowBody.args = {
-  hideBackdrop: false,
-  tapOutsideToClose: true,
-  initialFocus: 1,
-  size: 'medium',
-};
-
-// export const _FullScreenModal = (args: ModalProps): React.ReactNode => {
-//   const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-//   React.useEffect(() => {
-//     setIsOpen(args.isOpen);
-//   }, [args.isOpen]);
-
-//   return (
-//     <div className={css.container}>
-//       <Tooltip title="Open">
-//         <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
-//       </Tooltip>
-//       <FullScreenModal
-//         {...args}
-//         isOpen={isOpen}
-//         onClose={() => setIsOpen(false)}
-//       >
-//         <ModalHeader onCloseButtonClick={() => setIsOpen(false)}>
-//           <SubTitleLarge>Modal Title</SubTitleLarge>
-//         </ModalHeader>
-//         <ModalBody>
-//           <Input
-//             type="email"
-//             label="Email Address"
-//             placeholder="Enter your email address"
-//           />
-//           <br />
-//           <SimpleDropdown
-//             label="Issue Type"
-//             placeholder="Select an issue type"
-//             options={[
-//               {
-//                 iconLeft: 'bug',
-//                 iconLeftType: 'duotone',
-//                 key: '1',
-//                 label: 'Production Issue',
-//               },
-//               {
-//                 iconLeft: 'bug-slash',
-//                 iconLeftType: 'duotone',
-//                 key: '2',
-//                 label: 'Dev Issue',
-//               },
-//               {
-//                 iconLeft: 'ban-bug',
-//                 iconLeftType: 'duotone',
-//                 key: '4',
-//                 label: 'Product Issue',
-//               },
-//             ]}
-//           />
-//           <br />
-//           <Textarea
-//             label="Description"
-//             placeholder="Enter the issue description"
-//           />
-//         </ModalBody>
-//         <ModalFooter>
-//           <Tooltip title="Some text" elevation="modal">
-//             <Button type="tertiary" onClick={() => setIsOpen(false)}>
-//               Cancel
-//             </Button>
-//           </Tooltip>
-//           <Button type="secondary" onClick={() => setIsOpen(false)}>
-//             Action
-//           </Button>
-//         </ModalFooter>
-//       </FullScreenModal>
-//     </div>
-//   );
-// };
-
-// _FullScreenModal.args = {
-//   hideBackdrop: false,
-//   tapOutsideToClose: true,
-//   initialFocus: 1,
-//   size: 'medium',
-// };