{"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Button, Modal, useModalManager } from '@pega/cosmos-react-core';\nimport type { ModalMethods } from '@pega/cosmos-react-core';\n\nimport {\n  AlertModalMockModal,\n  AutoWidthModalContentMockModal,\n  DockedModalMockModal,\n  MinimizableModalModal,\n  ModalDemoMockModal,\n  ModalUpdatesMockModal,\n  ProgressStateMockModal,\n  getContent\n} from './Modal.mocks';\nimport type {\n  AlertModalDemoProps,\n  AutoWidthModalContentProps,\n  ModalDemoProps,\n  ModalUpdatesProps\n} from './Modal.mocks';\n\nexport default {\n  title: 'Core/Modal',\n  component: Modal,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    autoWidth: false,\n    stretch: false,\n    center: false,\n    onDismiss: action('Clicked dismiss button'),\n    onMinimize: action('Clicked minimize button'),\n    onActivate: action('Activates minimized modal'),\n    onRequestDismiss: action('onRequestDismiss called'),\n    onRequestMinimize: action('onRequestMinimize called'),\n    onRequestActivate: action('onRequestActivate called'),\n    onRequestDock: action('onRequestActivate called')\n  },\n  argTypes: {\n    autoWidth: { control: { type: 'boolean' } },\n    stretch: { control: { type: 'boolean' } },\n    center: { control: { type: 'boolean' } },\n    onDismiss: { table: { disable: true } },\n    onMinimize: { table: { disable: true } },\n    onActivate: { table: { disable: true } },\n    onRequestDismiss: { table: { disable: true } },\n    onRequestMinimize: { table: { disable: true } },\n    onRequestActivate: { table: { disable: true } },\n    onRequestDock: { table: { disable: true } }\n  }\n} as Meta;\n\nexport const ModalDemo: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const { create } = useModalManager();\n\n  return (\n    <Button\n      onClick={() => {\n        create(ModalDemoMockModal, {\n          ...args,\n          autoWidth: args.autoWidth,\n          stretch: args.stretch,\n          center: args.center\n        });\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nexport const ModalUpdates: StoryFn<ModalUpdatesProps> = (args: ModalUpdatesProps) => {\n  const { create } = useModalManager();\n  const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n  return (\n    <Button\n      onClick={() => {\n        // <ModalUpdatesProps> type arg required to assert disableButton as boolean vs true.\n        modalMethods.current = create<ModalUpdatesProps>(ModalUpdatesMockModal, {\n          ...args,\n          autoWidth: args.autoWidth,\n          stretch: args.stretch,\n          center: args.center,\n          heading: 'This is the Modal heading',\n          content: 'This Modal will automatically update in a few seconds.',\n          disableButton: true\n        });\n\n        setTimeout(() => {\n          modalMethods.current?.update({\n            heading: 'This is the updated Modal heading',\n            content: 'This Modal has been updated from its parent!',\n            disableButton: false\n          });\n        }, 2000);\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nexport const AlertModal: StoryFn<AlertModalDemoProps> = (args: AlertModalDemoProps) => {\n  const { create } = useModalManager();\n\n  return (\n    <Button\n      onClick={() => {\n        create(\n          AlertModalMockModal,\n          { ...args, autoWidth: args.autoWidth, stretch: args.stretch, center: args.center },\n          {\n            onDismiss: args.onDismiss\n          }\n        );\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nAlertModal.args = {\n  onKeyDown: action(\"Called input's onKeyDown\")\n};\n\nAlertModal.argTypes = {\n  onKeyDown: { table: { disable: true } }\n};\n\nexport const ProgressState: StoryFn = () => {\n  const { create } = useModalManager();\n\n  return (\n    <Button\n      onClick={() => {\n        create(ProgressStateMockModal);\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nProgressState.argTypes = {\n  autoWidth: { table: { disable: true } },\n  stretch: { table: { disable: true } },\n  center: { table: { disable: true } }\n};\n\nexport const MinimizableModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const { create } = useModalManager();\n  const [count, setCount] = useState(1);\n\n  return (\n    <Button\n      onClick={() => {\n        setCount(cnt => cnt + 1);\n        create(\n          MinimizableModalModal,\n          { ...args, autoWidth: args.autoWidth, stretch: args.stretch, center: args.center, count },\n          {\n            id: `${count}`,\n            minimizable: true,\n            onDismiss: args.onDismiss,\n            onMinimize: args.onMinimize,\n            onActivate: args.onActivate,\n            defaultMinimized: args.defaultMinimized\n          }\n        );\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nexport const DockedModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const { create } = useModalManager();\n  const [count, setCount] = useState(1);\n\n  return (\n    <Button\n      onClick={() => {\n        setCount(cnt => cnt + 1);\n        create(DockedModalMockModal, args, {\n          id: `${count}`,\n          minimizable: true,\n          maximizable: true,\n          dockable: true\n        });\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nDockedModal.argTypes = {\n  autoWidth: { table: { disable: true } },\n  stretch: { table: { disable: true } },\n  center: { table: { disable: true } }\n};\n\nexport const AutoWidthModalContent: StoryFn<AutoWidthModalContentProps> = (\n  args: AutoWidthModalContentProps\n) => {\n  const { create } = useModalManager();\n\n  return (\n    <Button\n      onClick={() => {\n        create(AutoWidthModalContentMockModal, {\n          ...args,\n          autoWidth: args.autoWidth,\n          contentType: args.content,\n          content: getContent(args.content, args.formColumnWidthFixed)\n        });\n      }}\n    >\n      Open Modal\n    </Button>\n  );\n};\n\nAutoWidthModalContent.args = {\n  autoWidth: true,\n  content: 'short text',\n  formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n  stretch: { table: { disable: true } },\n  center: { table: { disable: true } },\n  content: {\n    options: [\n      'short text',\n      'long text',\n      'image',\n      'table',\n      'form (1 column)',\n      'form (2 column)',\n      'form (3 column)',\n      'random'\n    ],\n    control: { type: 'select' }\n  },\n  formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}