npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.9.0 → 3.0.0-rc.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (987) hide show

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Input, Modal, ModalManagerContext, Text, ToasterContext, cap } from '@pega/cosmos-react-core';
+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 { getContent } from './Modal.mocks';
 export default {
     title: 'Core/Modal',
@@ -11,12 +12,24 @@ export default {
     args: {
         autoWidth: false,
         stretch: false,
-        center: 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')
     },
     argTypes: {
         autoWidth: { control: { type: 'boolean' } },
         stretch: { control: { type: 'boolean' } },
-        center: { 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 } }
     }
 };
 export const ModalDemo = (args) => {
@@ -24,7 +37,7 @@ export const ModalDemo = (args) => {
         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 } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 create(MyModal);
             }, children: "Open Modal" }));
@@ -33,8 +46,7 @@ export const ModalDemo = (args) => {
 };
 export const ModalUpdates = (args) => {
     const MyModal = props => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { update } = useContext(ModalContext);
+        const { update } = useModalContext();
         const actions = (_jsx(_Fragment, { children: _jsx(Button, { variant: 'primary', disabled: props.disableButton, onClick: () => {
                     update({
                         content: 'This Modal has been updated a second time from within the Modal!'
@@ -43,7 +55,7 @@ export const ModalUpdates = (args) => {
         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 } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         const modalMethods = useRef();
         const openModal = () => {
             modalMethods.current = create(MyModal, {
@@ -65,8 +77,7 @@ export const ModalUpdates = (args) => {
 };
 export const AlertModal = (args) => {
     const MyAlert = (props) => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { dismiss } = useModalContext();
         const actions = useMemo(() => {
             return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "No" }), _jsx(Button, { variant: 'primary', onClick: () => {
                             dismiss();
@@ -77,8 +88,8 @@ export const AlertModal = (args) => {
     };
     const MyModal = () => {
         const [name, setName] = useState('');
-        const { ModalContext, create } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { create } = useModalManager();
+        const { dismiss } = useModalContext();
         const actions = useMemo(() => {
             return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
                             if (name !== '') {
@@ -97,20 +108,27 @@ export const AlertModal = (args) => {
                     create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
                     return false;
                 }
-            }, children: _jsx(Input, { label: 'Name', name: 'name', onChange: onNameChange, value: name, required: true }) }));
+            }, children: _jsx(Input, { label: 'Name', name: 'name', onChange: onNameChange, onKeyDown: args.onKeyDown, value: name, required: true }) }));
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
-                create(MyModal);
+                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 { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        const { dismiss } = useModalContext();
         const [transientState, setTransientState] = useState('loading');
         const actions = transientState === 'loading' ? null : (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: !!transientState, onClick: () => {
                         if (transientState !== 'submitting') {
@@ -144,7 +162,7 @@ export const ProgressState = () => {
             }, [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 } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 create(LoadingStateModal);
             }, children: "Open Modal" }));
@@ -154,13 +172,19 @@ export const ProgressState = () => {
 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, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
+        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 } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 setCount(count + 1);
-                create(MyModal, undefined, { minimizable: true });
+                create(MyModal, undefined, {
+                    minimizable: true,
+                    id: `Modal #${count}`,
+                    onDismiss: args.onDismiss,
+                    onMinimize: args.onMinimize,
+                    onActivate: args.onActivate
+                });
             }, children: "Open Modal" }));
     };
     return _jsx(ModalButton, {});
@@ -171,7 +195,7 @@ export const DockedModal = () => {
         return (_jsx(Modal, { heading: `Modal #${count}`, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 setCount(count + 1);
                 create(MyModal, undefined, {
@@ -189,10 +213,9 @@ DockedModal.argTypes = {
     center: { table: { disable: true } }
 };
 export const AutoWidthModalContent = (args) => {
-    const { push } = useContext(ToasterContext);
+    const { push } = useToaster();
     const MyModal = ({ content }) => {
-        const { ModalContext } = useContext(ModalManagerContext);
-        const { dismiss } = useContext(ModalContext);
+        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!' });
@@ -202,7 +225,7 @@ export const AutoWidthModalContent = (args) => {
                         }, children: "Submit" })] })) : undefined, children: content }));
     };
     const ModalButton = () => {
-        const { create } = useContext(ModalManagerContext);
+        const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 create(MyModal, {
                     content: getContent(args.content, args.formColumnWidthFixed)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n FC,\n ChangeEvent,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n Button,\n Flex,\n Input,\n Modal,\n ModalManagerContext,\n ModalMethods,\n ModalProps,\n Text,\n ToasterContext,\n cap\n} from '@pega/cosmos-react-core';\n\nimport { ContentTypes, getContent } 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 },\n argTypes: {\n autoWidth: { control: { type: 'boolean' } },\n stretch: { control: { type: 'boolean' } },\n center: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface ModalDemoProps {\n autoWidth: ModalProps['autoWidth'];\n center: ModalProps['center'];\n stretch: ModalProps['stretch'];\n}\n\nexport const ModalDemo: Story<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 } = useContext(ModalManagerContext);\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: Story<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 { ModalContext } = useContext(ModalManagerContext);\n const { update } = useContext(ModalContext);\n\n const actions = (\n <>\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\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 } = useContext(ModalManagerContext);\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: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n const MyAlert = (props: { closeInitialModal: () => void }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\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 { ModalContext, create } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\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 label='Name' name='name' onChange={onNameChange} value={name} required />\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\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 ProgressState: Story = () => {\n const LoadingStateModal = () => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\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 }, 3000);\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 } = useContext(ModalManagerContext);\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: Story<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 >\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 } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, { minimizable: true });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const DockedModal: Story = () => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal heading={`Modal #${count}`}>\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 } = useContext(ModalManagerContext);\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\nDockedModal.argTypes = {\n autoWidth: { table: { disable: true } },\n stretch: { table: { disable: true } },\n center: { table: { disable: true } }\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: Story<AutoWidthModalContentProps> = (\n args: AutoWidthModalContentProps\n) => {\n const { push } = useContext(ToasterContext);\n\n const MyModal = ({ content }: { content: ReactNode }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\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 } = useContext(ModalManagerContext);\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"]}
1	+ {"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable demo-patterns/literal-default-args /\n/ eslint-disable demo-patterns/literal-args */\nimport { Meta, Story } from '@storybook/react';\nimport { FC, ChangeEvent, ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Flex,\n Input,\n Modal,\n ModalMethods,\n ModalProps,\n Text,\n useModalManager,\n useModalContext,\n useToaster,\n cap\n} from '@pega/cosmos-react-core';\n\nimport { ContentTypes, getContent } 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 },\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 }\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}\n\ninterface AlertModalDemoProps extends ModalDemoProps {\n onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const ModalDemo: Story<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: Story<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 <>\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\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: Story<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: Story = () => {\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 }, 3000);\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: Story<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: Story = () => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal heading={`Modal #${count}`}>\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\nDockedModal.argTypes = {\n autoWidth: { table: { disable: true } },\n stretch: { table: { disable: true } },\n center: { table: { disable: true } }\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: Story<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 ADDED Viewed

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export interface DemoFormDataType {
+    [key: string]: string | undefined;
+    firstName?: string;
+    lastName?: string;
+    currentTitle?: string;
+    currentCompany?: string;
+    salaryRequested?: string;
+    experienceLevel?: string;
+    priorityOne?: string;
+    priorityTwo?: string;
+    priorityThree?: string;
+    interviewNotes?: string;
+    salaryRequestReview?: string;
+    cultureFit?: string;
+    finalRecommendation?: string;
+    recommendationComments?: string;
+}
+export interface DemoFormErrorsType {
+    [field: string]: string | undefined;
+}
+interface MockFormArgs {
+    formData: DemoFormDataType;
+    formErrors: DemoFormErrorsType;
+    dispatch: (value: {
+        type: string;
+        payload?: any;
+    }) => void;
+}
+export declare const ApplicantDetailsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const InterviewNotesFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const RecommendationsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export {};
+//# sourceMappingURL=MultiStepForm.mocks.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAcA,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,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,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;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,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gBAuGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBAgBpF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAkKrF,CAAC"}

package/lib/core/MultiStepForm/MultiStepForm.mocks.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Grid, FieldGroup, TextArea, RadioButtonGroup, RadioButton, CurrencyInput, Select, Option } from '@pega/cosmos-react-core';
+export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
+    return (_jsxs(Grid, { container: { gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'firstName', label: 'First name', value: formData.firstName, readOnly: true }), _jsx(Input, { name: 'lastName', label: 'Last name', value: formData.lastName, readOnly: true }), _jsx(Input, { name: 'currentTitle', label: 'Current title', value: formData.currentTitle, onChange: (e) => dispatch({
+                    type: 'setFieldValue',
+                    payload: { field: 'currentTitle', value: e.target.value }
+                }) }), _jsx(Input, { name: 'currentCompany', label: 'Current company', value: formData.currentCompany, onChange: (e) => dispatch({
+                    type: 'setFieldValue',
+                    payload: { field: 'currentCompany', value: e.target.value }
+                }) }), _jsx(CurrencyInput, { name: 'salaryRequested', label: 'Salary requested', value: formData.salaryRequested, currencyISOCode: 'USD', onChange: value => dispatch({
+                    type: 'setFieldValue',
+                    payload: { field: 'salaryRequested', value }
+                }), status: formErrors.salaryRequested ? 'error' : undefined, info: formErrors.salaryRequested ? formErrors.salaryRequested : undefined, required: true }), _jsxs(Select, { id: 'experienceLevel', label: 'Weighted experience', value: formData.experienceLevel, onChange: (e) => {
+                    dispatch({
+                        type: 'setFieldValue',
+                        payload: { field: 'experienceLevel', value: e.target.value }
+                    });
+                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
+                                    dispatch({
+                                        type: 'setFieldValue',
+                                        payload: { field: 'priorityOne', value: e.target.value }
+                                    });
+                                } }), _jsx(Input, { name: 'priorityTwo', label: 'Second', value: formData.priorityTwo, onChange: (e) => {
+                                    dispatch({
+                                        type: 'setFieldValue',
+                                        payload: { field: 'priorityTwo', value: e.target.value }
+                                    });
+                                } }), _jsx(Input, { name: 'priorityThree', label: 'Third', value: formData.priorityThree, onChange: (e) => {
+                                    dispatch({
+                                        type: 'setFieldValue',
+                                        payload: { field: 'priorityThree', value: e.target.value }
+                                    });
+                                } })] }) }) })] }));
+};
+export const InterviewNotesFields = ({ formData, formErrors, dispatch }) => {
+    return (_jsx(TextArea, { name: 'impressions', label: 'Impressions', value: formData.interviewNotes, onChange: (e) => {
+            dispatch({
+                type: 'setFieldValue',
+                payload: { field: 'interviewNotes', value: e.target.value }
+            });
+        }, status: formErrors.impressions ? 'error' : undefined, info: formErrors.impressions ? formErrors.impressions : undefined }));
+};
+export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
+    return (_jsxs(Grid, { container: { gap: 1, cols: '1fr' }, children: [_jsx(CurrencyInput, { name: 'salaryRequestedReview', label: 'Salary requested', value: formData.salaryRequested, onChange: () => { }, currencyISOCode: 'USD', readOnly: true }), _jsx("p", { children: "$99,000 is the recommended salary for this position." }), _jsxs(RadioButtonGroup, { label: 'Salary request fit', name: 'salaryRequestReview', onChange: (e) => {
+                    dispatch({
+                        type: 'setFieldValue',
+                        payload: {
+                            field: 'salaryRequestReview',
+                            value: e.target.value
+                        }
+                    });
+                }, status: formErrors.salaryRequestReview ? 'error' : undefined, info: formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Very low', id: 'salaryTargetVeryLow', value: 'salaryTargetVeryLow', checked: formData.salaryRequestReview === 'salaryTargetVeryLow' }), _jsx(RadioButton, { label: 'Low', id: 'salaryTargetLow', value: 'salaryTargetLow', checked: formData.salaryRequestReview === 'salaryTargetLow' }), _jsx(RadioButton, { label: 'On trend', id: 'salaryTargetOnTrend', value: 'salaryTargetOnTrend', checked: formData.salaryRequestReview === 'salaryTargetOnTrend' }), _jsx(RadioButton, { label: 'High', id: 'salaryTargetHigh', value: 'salaryTargetHigh', checked: formData.salaryRequestReview === 'salaryTargetHigh' }), _jsx(RadioButton, { label: 'Very high', id: 'salaryTargetVeryHigh', value: 'salaryTargetVeryHigh', checked: formData.salaryRequestReview === 'salaryTargetVeryHigh' })] }), _jsxs(RadioButtonGroup, { label: 'Culture fit', name: 'cultureFit', onChange: (e) => {
+                    dispatch({
+                        type: 'setFieldValue',
+                        payload: {
+                            field: 'cultureFit',
+                            value: e.target.value
+                        }
+                    });
+                }, status: formErrors.cultureFit ? 'error' : undefined, info: formErrors.cultureFit ? formErrors.cultureFit : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'High risk', id: 'cultureFitHighRisk', value: 'cultureFitHighRisk', checked: formData.cultureFit === 'cultureFitHighRisk' }), _jsx(RadioButton, { label: 'Signs of risk', id: 'cultureFitSomeRisk', value: 'cultureFitSomeRisk', checked: formData.cultureFit === 'cultureFitSomeRisk' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'cultureFitIndeterminate', value: 'cultureFitIndeterminate', checked: formData.cultureFit === 'cultureFitIndeterminate' }), _jsx(RadioButton, { label: 'Good', id: 'cultureFitGood', value: 'cultureFitGood', checked: formData.cultureFit === 'cultureFitGood' }), _jsx(RadioButton, { label: 'Perfect', id: 'cultureFitPerfect', value: 'cultureFitPerfect', checked: formData.cultureFit === 'cultureFitPerfect' })] }), _jsxs(RadioButtonGroup, { label: 'Final recomendation', name: 'finalRecommendation', onChange: (e) => {
+                    dispatch({
+                        type: 'setFieldValue',
+                        payload: {
+                            field: 'finalRecommendation',
+                            value: e.target.value
+                        }
+                    });
+                }, status: formErrors.finalRecommendation ? 'error' : undefined, info: formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Do not recommend', id: 'doNotRecommend', value: 'doNotRecommend', checked: formData.finalRecommendation === 'doNotRecommend' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'noRecommendation', value: 'noRecommendation', checked: formData.finalRecommendation === 'noRecommendation' }), _jsx(RadioButton, { label: 'Recommend', id: 'recommend', value: 'recommend', checked: formData.finalRecommendation === 'recommend' })] }), _jsx(TextArea, { name: 'comments', label: 'Comments', value: formData.recommendationComments, onChange: (e) => {
+                    dispatch({
+                        type: 'setFieldValue',
+                        payload: { field: 'recommendationComments', value: e.target.value }
+                    });
+                } })] }));
+};
+//# sourceMappingURL=MultiStepForm.mocks.js.map

package/lib/core/MultiStepForm/MultiStepForm.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MultiStepForm.mocks.js","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent } from 'react';\n\nimport {\n Input,\n Grid,\n FieldGroup,\n TextArea,\n RadioButtonGroup,\n RadioButton,\n CurrencyInput,\n Select,\n Option\n} from '@pega/cosmos-react-core';\n\nexport interface DemoFormDataType {\n [key: string]: string | undefined;\n firstName?: string;\n lastName?: string;\n currentTitle?: string;\n currentCompany?: string;\n salaryRequested?: string;\n experienceLevel?: string;\n priorityOne?: string;\n priorityTwo?: string;\n priorityThree?: string;\n interviewNotes?: string;\n salaryRequestReview?: string;\n cultureFit?: string;\n finalRecommendation?: string;\n recommendationComments?: string;\n}\n\nexport interface DemoFormErrorsType {\n [field: string]: string | undefined;\n}\n\ninterface MockFormArgs {\n formData: DemoFormDataType;\n formErrors: DemoFormErrorsType;\n dispatch: (value: { type: string; payload?: any }) => void;\n}\n\nexport const ApplicantDetailsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n return (\n <Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>\n <Input name='firstName' label='First name' value={formData.firstName} readOnly />\n <Input name='lastName' label='Last name' value={formData.lastName} readOnly />\n <Input\n name='currentTitle'\n label='Current title'\n value={formData.currentTitle}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'currentTitle', value: e.target.value }\n })\n }\n />\n <Input\n name='currentCompany'\n label='Current company'\n value={formData.currentCompany}\n onChange={(e: ChangeEvent<HTMLInputElement>) =>\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'currentCompany', value: e.target.value }\n })\n }\n />\n <CurrencyInput\n name='salaryRequested'\n label='Salary requested'\n value={formData.salaryRequested}\n currencyISOCode='USD'\n onChange={value =>\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'salaryRequested', value }\n })\n }\n status={formErrors.salaryRequested ? 'error' : undefined}\n info={formErrors.salaryRequested ? formErrors.salaryRequested : undefined}\n required\n />\n <Select\n id='experienceLevel'\n label='Weighted experience'\n value={formData.experienceLevel}\n onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'experienceLevel', value: e.target.value }\n });\n }}\n status={formErrors.experienceLevel ? 'error' : undefined}\n info={formErrors.experienceLevel ? formErrors.experienceLevel : undefined}\n required\n >\n <Option value=''>--</Option>\n <Option value='junior'>0-3 years (junior)</Option>\n <Option value='mid-level'>4-6 years (mid)</Option>\n <Option value='senior'>7-10 years (senior)</Option>\n <Option value='expert'>10+ years (expert)</Option>\n </Select>\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <FieldGroup name='Work priorities'>\n <Grid container={{ gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }}>\n <Input\n name='priorityOne'\n label='First'\n value={formData.priorityOne}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'priorityOne', value: e.target.value }\n });\n }}\n />\n <Input\n name='priorityTwo'\n label='Second'\n value={formData.priorityTwo}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'priorityTwo', value: e.target.value }\n });\n }}\n />\n <Input\n name='priorityThree'\n label='Third'\n value={formData.priorityThree}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'priorityThree', value: e.target.value }\n });\n }}\n />\n </Grid>\n </FieldGroup>\n </Grid>\n </Grid>\n );\n};\n\nexport const InterviewNotesFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n return (\n <TextArea\n name='impressions'\n label='Impressions'\n value={formData.interviewNotes}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'interviewNotes', value: e.target.value }\n });\n }}\n status={formErrors.impressions ? 'error' : undefined}\n info={formErrors.impressions ? formErrors.impressions : undefined}\n />\n );\n};\n\nexport const RecommendationsFields = ({ formData, formErrors, dispatch }: MockFormArgs) => {\n return (\n <Grid container={{ gap: 1, cols: '1fr' }}>\n <CurrencyInput\n name='salaryRequestedReview'\n label='Salary requested'\n value={formData.salaryRequested}\n onChange={() => {}}\n currencyISOCode='USD'\n readOnly\n />\n\n <p>$99,000 is the recommended salary for this position.</p>\n\n <RadioButtonGroup\n label='Salary request fit'\n name='salaryRequestReview'\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: {\n field: 'salaryRequestReview',\n value: e.target.value\n }\n });\n }}\n status={formErrors.salaryRequestReview ? 'error' : undefined}\n info={formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined}\n inline\n required\n >\n <RadioButton\n label='Very low'\n id='salaryTargetVeryLow'\n value='salaryTargetVeryLow'\n checked={formData.salaryRequestReview === 'salaryTargetVeryLow'}\n />\n <RadioButton\n label='Low'\n id='salaryTargetLow'\n value='salaryTargetLow'\n checked={formData.salaryRequestReview === 'salaryTargetLow'}\n />\n <RadioButton\n label='On trend'\n id='salaryTargetOnTrend'\n value='salaryTargetOnTrend'\n checked={formData.salaryRequestReview === 'salaryTargetOnTrend'}\n />\n <RadioButton\n label='High'\n id='salaryTargetHigh'\n value='salaryTargetHigh'\n checked={formData.salaryRequestReview === 'salaryTargetHigh'}\n />\n <RadioButton\n label='Very high'\n id='salaryTargetVeryHigh'\n value='salaryTargetVeryHigh'\n checked={formData.salaryRequestReview === 'salaryTargetVeryHigh'}\n />\n </RadioButtonGroup>\n\n <RadioButtonGroup\n label='Culture fit'\n name='cultureFit'\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: {\n field: 'cultureFit',\n value: e.target.value\n }\n });\n }}\n status={formErrors.cultureFit ? 'error' : undefined}\n info={formErrors.cultureFit ? formErrors.cultureFit : undefined}\n inline\n required\n >\n <RadioButton\n label='High risk'\n id='cultureFitHighRisk'\n value='cultureFitHighRisk'\n checked={formData.cultureFit === 'cultureFitHighRisk'}\n />\n <RadioButton\n label='Signs of risk'\n id='cultureFitSomeRisk'\n value='cultureFitSomeRisk'\n checked={formData.cultureFit === 'cultureFitSomeRisk'}\n />\n <RadioButton\n label='Indeterminate'\n id='cultureFitIndeterminate'\n value='cultureFitIndeterminate'\n checked={formData.cultureFit === 'cultureFitIndeterminate'}\n />\n <RadioButton\n label='Good'\n id='cultureFitGood'\n value='cultureFitGood'\n checked={formData.cultureFit === 'cultureFitGood'}\n />\n <RadioButton\n label='Perfect'\n id='cultureFitPerfect'\n value='cultureFitPerfect'\n checked={formData.cultureFit === 'cultureFitPerfect'}\n />\n </RadioButtonGroup>\n\n <RadioButtonGroup\n label='Final recomendation'\n name='finalRecommendation'\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: {\n field: 'finalRecommendation',\n value: e.target.value\n }\n });\n }}\n status={formErrors.finalRecommendation ? 'error' : undefined}\n info={formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined}\n inline\n required\n >\n <RadioButton\n label='Do not recommend'\n id='doNotRecommend'\n value='doNotRecommend'\n checked={formData.finalRecommendation === 'doNotRecommend'}\n />\n <RadioButton\n label='Indeterminate'\n id='noRecommendation'\n value='noRecommendation'\n checked={formData.finalRecommendation === 'noRecommendation'}\n />\n <RadioButton\n label='Recommend'\n id='recommend'\n value='recommend'\n checked={formData.finalRecommendation === 'recommend'}\n />\n </RadioButtonGroup>\n\n <TextArea\n name='comments'\n label='Comments'\n value={formData.recommendationComments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {\n dispatch({\n type: 'setFieldValue',\n payload: { field: 'recommendationComments', value: e.target.value }\n });\n }}\n />\n </Grid>\n );\n};\n"]}

package/lib/core/{MultiStep/MultiStep.stories.d.ts → MultiStepForm/MultiStepForm.stories.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const MultiStepDemo: Story;
-//# sourceMappingURL=MultiStep.stories.d.ts.map
+export declare const MultiStepFormDemo: Story;
+//# sourceMappingURL=MultiStepForm.stories.d.ts.map

package/lib/core/MultiStepForm/MultiStepForm.stories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAGU;AAuBV,eAAO,MAAM,iBAAiB,EAAE,KA0R/B,CAAC"}