@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/lib/core/Modal/Modal.stories.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Flex, Input, Modal, Text, useModalManager, useModalContext, useToaster, cap } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+import { getContent } from './Modal.mocks';
+export default {
+    title: 'Core/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered'
+    },
+    args: {
+        autoWidth: false,
+        stretch: false,
+        center: false,
+        onDismiss: action('Clicked dismiss button'),
+        onMinimize: action('Clicked minimize button'),
+        onActivate: action('Activates minimized modal'),
+        onRequestDismiss: action('onRequestDismiss called'),
+        onRequestMinimize: action('onRequestMinimize called'),
+        onRequestActivate: action('onRequestActivate called'),
+        onRequestDock: action('onRequestActivate called')
+    },
+    argTypes: {
+        autoWidth: { control: { type: 'boolean' } },
+        stretch: { control: { type: 'boolean' } },
+        center: { control: { type: 'boolean' } },
+        onDismiss: { table: { disable: true } },
+        onMinimize: { table: { disable: true } },
+        onActivate: { table: { disable: true } },
+        onRequestDismiss: { table: { disable: true } },
+        onRequestMinimize: { table: { disable: true } },
+        onRequestActivate: { table: { disable: true } },
+        onRequestDock: { table: { disable: true } }
+    }
+};
+export const ModalDemo = (args) => {
+    const MyModal = () => {
+        return (_jsx(Modal, { heading: 'This is the Modal heading', autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, children: _jsx(Text, { children: "This is the content of the Modal." }) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                create(MyModal);
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+export const ModalUpdates = (args) => {
+    const MyModal = props => {
+        const { update } = useModalContext();
+        const actions = (_jsx(Button, { variant: 'primary', disabled: props.disableButton, onClick: () => {
+                update({
+                    content: 'This Modal has been updated a second time from within the Modal!'
+                });
+            }, children: "Update Modal" }));
+        return (_jsx(Modal, { heading: props.heading, actions: actions, autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, children: _jsx(Text, { children: props.content }) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        const modalMethods = useRef();
+        const openModal = () => {
+            modalMethods.current = create(MyModal, {
+                heading: 'This is the Modal heading',
+                content: 'This Modal will automatically update in a few seconds.',
+                disableButton: true
+            });
+            setTimeout(() => {
+                modalMethods.current?.update({
+                    heading: 'This is the updated Modal heading',
+                    content: 'This Modal has been updated from its parent!',
+                    disableButton: false
+                });
+            }, 2000);
+        };
+        return _jsx(Button, { onClick: openModal, children: "Open Modal" });
+    };
+    return _jsx(ModalButton, {});
+};
+export const AlertModal = (args) => {
+    const MyAlert = (props) => {
+        const { dismiss } = useModalContext();
+        const actions = useMemo(() => {
+            return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "No" }), _jsx(Button, { variant: 'primary', onClick: () => {
+                            dismiss();
+                            props.closeInitialModal();
+                        }, children: "Yes" })] }));
+        }, [dismiss]);
+        return (_jsx(Modal, { heading: 'You have unsaved changes!', actions: actions, center: args.center, stretch: args.stretch, children: _jsx(Text, { children: "Are you sure you want to close without saving?" }) }));
+    };
+    const MyModal = () => {
+        const [name, setName] = useState('');
+        const { create } = useModalManager();
+        const { dismiss } = useModalContext();
+        const actions = useMemo(() => {
+            return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
+                            if (name !== '') {
+                                create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
+                            }
+                            else {
+                                dismiss();
+                            }
+                        }, children: "Close" }), _jsx(Button, { variant: 'primary', onClick: dismiss, disabled: name === '', children: "Save" })] }));
+        }, [dismiss, name]);
+        const onNameChange = (e) => {
+            setName(e.target.value);
+        };
+        return (_jsx(Modal, { actions: actions, heading: 'Close the Modal without saving any data to invoke the alert', autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, onRequestDismiss: () => {
+                if (name !== '') {
+                    create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
+                    return false;
+                }
+            }, children: _jsx(Input, { label: 'Name', name: 'name', onChange: onNameChange, onKeyDown: args.onKeyDown, value: name, required: true }) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                create(MyModal, undefined, {
+                    onDismiss: args.onDismiss
+                });
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+AlertModal.args = {
+    onKeyDown: action("Called input's onKeyDown")
+};
+AlertModal.argTypes = {
+    onKeyDown: { table: { disable: true } }
+};
+export const ProgressState = () => {
+    const LoadingStateModal = () => {
+        const { dismiss } = useModalContext();
+        const [transientState, setTransientState] = useState('loading');
+        const actions = transientState === 'loading' ? null : (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: !!transientState, onClick: () => {
+                        if (transientState !== 'submitting') {
+                            dismiss();
+                        }
+                    }, children: "Cancel" }), _jsx(Button, { disabled: !!transientState, variant: 'primary', onClick: () => {
+                        setTransientState('submitting');
+                    }, children: "Submit" })] }));
+        useEffect(() => {
+            let timerID;
+            if (transientState === 'loading' || transientState === 'submitting') {
+                timerID = window.setTimeout(() => {
+                    if (transientState === 'loading') {
+                        setTransientState(null);
+                    }
+                    else {
+                        dismiss();
+                    }
+                }, loadingTimeoutMS);
+            }
+            return () => {
+                window.clearTimeout(timerID);
+            };
+        }, [transientState]);
+        return (_jsx(Modal, { progress: useMemo(() => {
+                if (transientState) {
+                    return {
+                        message: `${cap(transientState)}…`
+                    };
+                }
+            }, [transientState]), heading: 'Modal progress demo', actions: actions, onRequestDismiss: () => transientState !== 'submitting', children: transientState !== 'loading' && (_jsx(Flex, { container: { direction: 'column', gap: 2 }, children: Array.from({ length: 5 }, (_, i) => (_jsx(Input, { label: `Field-${i + 1}` }, i))) })) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                create(LoadingStateModal);
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+export const MinimizableModal = (args) => {
+    const [count, setCount] = useState(1);
+    const MyModal = () => {
+        return (_jsx(Modal, { heading: `Modal #${count}`, autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, onRequestDismiss: args.onRequestDismiss, onRequestMinimize: args.onRequestMinimize, onRequestActivate: args.onRequestActivate, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                setCount(count + 1);
+                create(MyModal, undefined, {
+                    minimizable: true,
+                    id: `Modal #${count}`,
+                    onDismiss: args.onDismiss,
+                    onMinimize: args.onMinimize,
+                    onActivate: args.onActivate
+                });
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+export const DockedModal = (args) => {
+    const [count, setCount] = useState(1);
+    const MyModal = () => {
+        return (_jsx(Modal, { heading: `Modal #${count}`, onRequestDock: args.onRequestDock, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                setCount(count + 1);
+                create(MyModal, undefined, {
+                    minimizable: true,
+                    maximizable: true,
+                    dockable: true
+                });
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+export const AutoWidthModalContent = (args) => {
+    const { push } = useToaster();
+    const MyModal = ({ content }) => {
+        const { dismiss } = useModalContext();
+        return (_jsx(Modal, { heading: `Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`, autoWidth: args.autoWidth, actions: args.content.includes('form') || args.content === 'random' ? (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
+                            dismiss();
+                            push({ content: 'Form cancelled!' });
+                        }, children: "Cancel" }), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: () => {
+                            dismiss();
+                            push({ content: 'Form submitted!' });
+                        }, children: "Submit" })] })) : undefined, children: content }));
+    };
+    const ModalButton = () => {
+        const { create } = useModalManager();
+        return (_jsx(Button, { onClick: () => {
+                create(MyModal, {
+                    content: getContent(args.content, args.formColumnWidthFixed)
+                });
+            }, children: "Open Modal" }));
+    };
+    return _jsx(ModalButton, {});
+};
+AutoWidthModalContent.args = {
+    autoWidth: true,
+    content: 'short text',
+    formColumnWidthFixed: false
+};
+AutoWidthModalContent.argTypes = {
+    stretch: { table: { disable: true } },
+    center: { table: { disable: true } },
+    content: {
+        options: [
+            'short text',
+            'long text',
+            'image',
+            'table',
+            'form (1 column)',
+            'form (2 column)',
+            'form (3 column)',
+            'random'
+        ],
+        control: { type: 'select' }
+    },
+    formColumnWidthFixed: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Modal.stories.js.map

package/lib/core/Modal/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, ChangeEvent, ReactNode } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Flex,\n  Input,\n  Modal,\n  Text,\n  useModalManager,\n  useModalContext,\n  useToaster,\n  cap\n} from '@pega/cosmos-react-core';\nimport type { ModalMethods, ModalProps } from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { getContent } from './Modal.mocks';\nimport type { ContentTypes } 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\ninterface ModalDemoProps {\n  autoWidth: ModalProps['autoWidth'];\n  center: ModalProps['center'];\n  stretch: ModalProps['stretch'];\n  onDismiss?: (id: string) => void;\n  onMinimize?: (id: string) => void;\n  onActivate?: (id: string) => void;\n  onRequestDismiss?: () => boolean;\n  onRequestMinimize?: () => boolean;\n  onRequestActivate?: () => boolean;\n  onRequestDock?: () => boolean;\n}\n\ninterface AlertModalDemoProps extends ModalDemoProps {\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const ModalDemo: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const MyModal = () => {\n    return (\n      <Modal\n        heading='This is the Modal heading'\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal);\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const ModalUpdates: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  interface ModalUpdatesProps {\n    content: string;\n    disableButton: boolean;\n    heading: string;\n  }\n\n  const MyModal: FC<ModalUpdatesProps> = props => {\n    const { update } = useModalContext();\n\n    const actions = (\n      <Button\n        variant='primary'\n        disabled={props.disableButton}\n        onClick={() => {\n          update({\n            content: 'This Modal has been updated a second time from within the Modal!'\n          });\n        }}\n      >\n        Update Modal\n      </Button>\n    );\n\n    return (\n      <Modal\n        heading={props.heading}\n        actions={actions}\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>{props.content}</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n    const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n    const openModal = () => {\n      modalMethods.current = create(MyModal, {\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    return <Button onClick={openModal}>Open Modal</Button>;\n  };\n\n  return <ModalButton />;\n};\n\nexport const AlertModal: StoryFn<AlertModalDemoProps> = (args: AlertModalDemoProps) => {\n  const MyAlert = (props: { closeInitialModal: () => void }) => {\n    const { dismiss } = useModalContext();\n\n    const actions = useMemo(() => {\n      return (\n        <>\n          <Button onClick={dismiss}>No</Button>\n          <Button\n            variant='primary'\n            onClick={() => {\n              dismiss();\n              props.closeInitialModal();\n            }}\n          >\n            Yes\n          </Button>\n        </>\n      );\n    }, [dismiss]);\n\n    return (\n      <Modal\n        heading='You have unsaved changes!'\n        actions={actions}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>Are you sure you want to close without saving?</Text>\n      </Modal>\n    );\n  };\n\n  const MyModal = () => {\n    const [name, setName] = useState('');\n    const { create } = useModalManager();\n    const { dismiss } = useModalContext();\n\n    const actions = useMemo(() => {\n      return (\n        <>\n          <Button\n            onClick={() => {\n              if (name !== '') {\n                create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n              } else {\n                dismiss();\n              }\n            }}\n          >\n            Close\n          </Button>\n          <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n            Save\n          </Button>\n        </>\n      );\n    }, [dismiss, name]);\n\n    const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setName(e.target.value);\n    };\n\n    return (\n      <Modal\n        actions={actions}\n        heading='Close the Modal without saving any data to invoke the alert'\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n        onRequestDismiss={() => {\n          if (name !== '') {\n            create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n            return false;\n          }\n        }}\n      >\n        <Input\n          label='Name'\n          name='name'\n          onChange={onNameChange}\n          onKeyDown={args.onKeyDown}\n          value={name}\n          required\n        />\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal, undefined, {\n            onDismiss: args.onDismiss\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\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 LoadingStateModal = () => {\n    const { dismiss } = useModalContext();\n\n    const [transientState, setTransientState] = useState<'loading' | 'submitting' | null>(\n      'loading'\n    );\n\n    const actions =\n      transientState === 'loading' ? null : (\n        <>\n          <Button\n            disabled={!!transientState}\n            onClick={() => {\n              if (transientState !== 'submitting') {\n                dismiss();\n              }\n            }}\n          >\n            Cancel\n          </Button>\n          <Button\n            disabled={!!transientState}\n            variant='primary'\n            onClick={() => {\n              setTransientState('submitting');\n            }}\n          >\n            Submit\n          </Button>\n        </>\n      );\n\n    useEffect(() => {\n      let timerID: number;\n\n      if (transientState === 'loading' || transientState === 'submitting') {\n        timerID = window.setTimeout(() => {\n          if (transientState === 'loading') {\n            setTransientState(null);\n          } else {\n            dismiss();\n          }\n        }, loadingTimeoutMS);\n      }\n\n      return () => {\n        window.clearTimeout(timerID);\n      };\n    }, [transientState]);\n\n    return (\n      <Modal\n        progress={useMemo(() => {\n          if (transientState) {\n            return {\n              message: `${cap(transientState)}…`\n            };\n          }\n        }, [transientState])}\n        heading='Modal progress demo'\n        actions={actions}\n        onRequestDismiss={() => transientState !== 'submitting'}\n      >\n        {transientState !== 'loading' && (\n          <Flex container={{ direction: 'column', gap: 2 }}>\n            {Array.from({ length: 5 }, (_, i) => (\n              <Input key={i} label={`Field-${i + 1}`} />\n            ))}\n          </Flex>\n        )}\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(LoadingStateModal);\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const MinimizableModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n\n  const MyModal = () => {\n    return (\n      <Modal\n        heading={`Modal #${count}`}\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n        onRequestDismiss={args.onRequestDismiss}\n        onRequestMinimize={args.onRequestMinimize}\n        onRequestActivate={args.onRequestActivate}\n      >\n        <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          setCount(count + 1);\n          create(MyModal, undefined, {\n            minimizable: true,\n            id: `Modal #${count}`,\n            onDismiss: args.onDismiss,\n            onMinimize: args.onMinimize,\n            onActivate: args.onActivate\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const DockedModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n\n  const MyModal = () => {\n    return (\n      <Modal heading={`Modal #${count}`} onRequestDock={args.onRequestDock}>\n        <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          setCount(count + 1);\n          create(MyModal, undefined, {\n            minimizable: true,\n            maximizable: true,\n            dockable: true\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\ninterface AutoWidthModalContentProps {\n  autoWidth: boolean;\n  content: ContentTypes;\n  formColumnWidthFixed: boolean;\n  stretch?: never;\n  center?: never;\n}\n\nexport const AutoWidthModalContent: StoryFn<AutoWidthModalContentProps> = (\n  args: AutoWidthModalContentProps\n) => {\n  const { push } = useToaster();\n\n  const MyModal = ({ content }: { content: ReactNode }) => {\n    const { dismiss } = useModalContext();\n\n    return (\n      <Modal\n        heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n        autoWidth={args.autoWidth}\n        actions={\n          args.content.includes('form') || args.content === 'random' ? (\n            <>\n              <Button\n                name='Cancel'\n                variant='secondary'\n                onClick={() => {\n                  dismiss();\n                  push({ content: 'Form cancelled!' });\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                name='Submit'\n                variant='primary'\n                onClick={() => {\n                  dismiss();\n                  push({ content: 'Form submitted!' });\n                }}\n              >\n                Submit\n              </Button>\n            </>\n          ) : undefined\n        }\n      >\n        {content}\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal, {\n            content: getContent(args.content, args.formColumnWidthFixed)\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\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"]}

package/lib/core/MultiStepForm/MultiStepForm.mocks.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { BannerMessage } from '@pega/cosmos-react-core';
+import MultiStepFormProps from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';
+export interface MultiStepFormDemoProps {
+    heading?: MultiStepFormProps['heading'];
+    stepIndicator?: MultiStepFormProps['stepIndicator'];
+}
+export interface ReducerAction {
+    type: string;
+    payload?: any;
+}
+export interface DemoMultiStepState {
+    formData: DemoFormDataType;
+    formErrors: DemoFormErrorsType;
+    currentStepIndex: number;
+    numSteps: number;
+    cancelled: boolean;
+    finished: boolean;
+}
+interface DemoFormDataType {
+    [key: string]: string | boolean | undefined;
+    firstName?: string;
+    lastName?: string;
+    currentTitle?: string;
+    currentCompany?: string;
+    salaryRequested?: string;
+    experienceLevel?: string;
+    priorityOne?: string;
+    priorityTwo?: string;
+    priorityThree?: string;
+    interviewNotes?: string;
+    additionalInterview?: boolean;
+    nextInterviewer?: string;
+    salaryRequestReview?: string;
+    cultureFit?: string;
+    finalRecommendation?: string;
+    recommendationComments?: string;
+}
+interface DemoFormErrorsType {
+    [field: string]: BannerMessage;
+}
+interface MockFormArgs {
+    formData: DemoFormDataType;
+    formErrors: DemoFormErrorsType;
+    dispatch: (value: {
+        type: string;
+        payload?: any;
+    }) => void;
+}
+interface FieldData {
+    name: string;
+    label: string;
+}
+export declare const stepFields: FieldData[][];
+export declare const initialState: DemoMultiStepState;
+export declare const reducer: (state: DemoMultiStepState, action: ReducerAction) => DemoMultiStepState | {
+    currentStepIndex: any;
+    formErrors: {};
+    formData: DemoFormDataType;
+    numSteps: number;
+    cancelled: boolean;
+    finished: boolean;
+};
+export declare const ApplicantDetailsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const InterviewNotesFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const NextInterviewFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const RecommendationsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const MultiStepModal: (args: MultiStepFormDemoProps) => JSX.Element;
+export {};
+//# sourceMappingURL=MultiStepForm.mocks.d.ts.map

package/lib/core/MultiStepForm/MultiStepForm.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAYA,OAAO,EAGL,aAAa,EAgBd,MAAM,yBAAyB,CAAC;AACjC,OAAO,kBAEN,MAAM,0EAA0E,CAAC;AAIlF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAQD,UAAU,gBAAgB;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,UAAU,kBAAkB;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC;CAChC;AAED,UAAU,YAAY;IACpB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5D;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,SAAS,EAAE,EAwBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,kBAY1B,CAAC;AA6BF,eAAO,MAAM,OAAO,UAAW,kBAAkB,UAAU,aAAa;;;cApH5D,gBAAgB;cAGhB,MAAM;eACL,OAAO;cACR,OAAO;CA8MlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gBAgGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBA2BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gBAsBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAiKrF,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,sBAAsB,gBA4K1D,CAAC"}