npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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 (1484) hide show

package/jsx/core/Modal/Modal.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.jsx","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\nexport const ModalDemo: Story<ModalProps> = (args: ModalProps) => {\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<ModalProps> = (args: ModalProps) => {\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<ModalProps> = (args: ModalProps) => {\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 >\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<ModalProps> = () => {\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<ModalProps> = (args: ModalProps) => {\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.jsx","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/jsx/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/jsx/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/jsx/core/MultiStepForm/MultiStepForm.mocks.jsx ADDED Viewed

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

package/jsx/core/MultiStepForm/MultiStepForm.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MultiStepForm.mocks.jsx","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/jsx/core/MultiStepForm/MultiStepForm.stories.d.ts ADDED Viewed

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

package/jsx/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"}

package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx ADDED Viewed

@@ -0,0 +1,208 @@
+import { useReducer, useMemo } from 'react';
+import { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';
+import { ApplicantDetailsFields, InterviewNotesFields, RecommendationsFields } from './MultiStepForm.mocks';
+export default {
+    title: 'Core/MultiStepForm',
+    component: MultiStepForm
+};
+export const MultiStepFormDemo = () => {
+    const initialState = useMemo(() => ({
+        currentStep: 1,
+        cancelled: false,
+        finished: false,
+        numSteps: 3,
+        formData: {
+            firstName: 'Marcus',
+            lastName: 'Kennedy',
+            currentTitle: 'Data Analyst',
+            currentCompany: 'Hello Fresh'
+        },
+        formErrors: {}
+    }), []);
+    const formValidation = useMemo(() => ({
+        salaryRequested: {
+            message: 'This field is required.',
+            validator: (value) => value?.length > 0
+        },
+        experienceLevel: {
+            message: 'This field is required.',
+            validator: (value) => value?.length > 0
+        },
+        salaryRequestReview: {
+            message: 'This field is required.',
+            validator: (value) => value?.length > 0
+        },
+        cultureFit: {
+            message: 'This field is required.',
+            validator: (value) => value?.length > 0
+        },
+        finalRecommendation: {
+            message: 'This field is required.',
+            validator: (value) => value?.length > 0
+        }
+    }), []);
+    const stepFields = useMemo(() => {
+        return {
+            '1': [
+                'firstName',
+                'lastName',
+                'currentTitle',
+                'currentCompany',
+                'salaryRequested',
+                'experienceLevel',
+                'priorityOne',
+                'priorityTwo',
+                'priorityThree'
+            ],
+            '2': ['interviewNotes'],
+            '3': ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']
+        };
+    }, []);
+    const reducer = (state, action) => {
+        const type = action.type;
+        const payload = action.payload;
+        switch (type) {
+            case 'restart': {
+                return initialState;
+            }
+            case 'cancel': {
+                return {
+                    ...state,
+                    cancelled: true
+                };
+            }
+            case 'finish': {
+                return {
+                    ...state,
+                    finished: true
+                };
+            }
+            case 'setStep': {
+                return {
+                    ...state,
+                    currentStep: payload
+                };
+            }
+            case 'setFieldValue': {
+                const { field, value } = payload;
+                const formData = {
+                    ...state.formData
+                };
+                const formErrors = {
+                    ...state.formErrors
+                };
+                formData[field] = value;
+                if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                    const valid = formValidation[field].validator(value);
+                    if (valid) {
+                        delete formErrors[field];
+                    }
+                    else {
+                        formErrors[field] = formValidation[field].message;
+                    }
+                }
+                return {
+                    ...state,
+                    formData,
+                    formErrors
+                };
+            }
+            case 'submitCurrentStep': {
+                const step = state.currentStep;
+                const formErrors = { ...state.formErrors };
+                let isValid = true;
+                const validateFields = (fields) => {
+                    if (!fields)
+                        return;
+                    fields.forEach(field => {
+                        if (Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                            const valid = formValidation[field].validator(state.formData[field]);
+                            if (valid) {
+                                delete formErrors[field];
+                            }
+                            else {
+                                isValid = false;
+                                formErrors[field] = formValidation[field].message;
+                            }
+                        }
+                    });
+                };
+                validateFields(stepFields[step]);
+                return {
+                    ...state,
+                    currentStep: isValid && state.currentStep !== state.numSteps
+                        ? state.currentStep + 1
+                        : state.currentStep,
+                    finished: isValid && state.currentStep === state.numSteps,
+                    formErrors
+                };
+            }
+            default:
+                return state;
+        }
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const stepData = useMemo(() => {
+        const stepActions = (<>
+        <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>
+        <div>
+          {state.currentStep > 1 && (<Button onClick={() => dispatch({ type: 'setStep', payload: state.currentStep - 1 })}>
+              Previous
+            </Button>)}
+          {state.currentStep !== state.numSteps && (<Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>
+              Next
+            </Button>)}
+          {state.currentStep === state.numSteps && (<Button type='submit' variant='primary' onClick={(e) => {
+                    e.preventDefault();
+                    dispatch({ type: 'submitCurrentStep' });
+                }}>
+              Finish
+            </Button>)}
+        </div>
+      </>);
+        const step1Errors = Object.keys(state.formErrors).filter(errorField => {
+            return stepFields[1].includes(errorField);
+        });
+        const step3Errors = Object.keys(state.formErrors).filter(errorField => {
+            return stepFields[3].includes(errorField);
+        });
+        return [
+            {
+                id: 'step_1',
+                name: 'Applicant details',
+                description: 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +
+                    'Please confirm their details and have a discussion regarding the open position and the company.',
+                banners: step1Errors?.length ? (<Banner id='formBanner' heading='Your submission failed to process.' messages={['Please correct all errors and try again.']} variant='urgent'/>) : undefined,
+                content: (<ApplicantDetailsFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>),
+                actions: stepActions
+            },
+            {
+                id: 'step_2',
+                name: 'Interview notes',
+                content: (<InterviewNotesFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>),
+                actions: stepActions
+            },
+            {
+                id: 'step_3',
+                name: 'Recommendations',
+                description: 'Based on your screening call with the applicant please submit your recomendations.',
+                banners: step3Errors?.length ? (<Banner id='formBanner' heading='Your submission failed to process.' messages={['Please correct all errors and try again.']} variant='urgent'/>) : undefined,
+                content: (<RecommendationsFields formData={state.formData} formErrors={state.formErrors} dispatch={dispatch}/>),
+                actions: stepActions
+            }
+        ];
+    }, [state.formData, state.formErrors, state.currentStep]);
+    return (<>
+      {(state.cancelled || state.finished) && (<Flex container={{ gap: 2, alignItems: 'center' }}>
+          <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>
+          <Button onClick={() => {
+                dispatch({ type: 'restart' });
+            }}>
+            Restart
+          </Button>
+        </Flex>)}
+      {!state.cancelled && !state.finished && (<MultiStepForm heading='HR Screening' steps={stepData} currentStepId={`step_${state.currentStep}`}/>)}
+    </>);
+};
+//# sourceMappingURL=MultiStepForm.stories.jsx.map

package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MultiStepForm.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { type ReactNode, type Reducer, type MouseEvent, useReducer, useMemo } from 'react';\n\nimport { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-core';\nimport { Step } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';\n\nimport {\n type DemoFormDataType,\n type DemoFormErrorsType,\n ApplicantDetailsFields,\n InterviewNotesFields,\n RecommendationsFields\n} from './MultiStepForm.mocks';\n\nexport default {\n title: 'Core/MultiStepForm',\n component: MultiStepForm\n} as Meta;\n\ninterface DemoMultiStepState {\n formData: DemoFormDataType;\n formErrors: DemoFormErrorsType;\n currentStep: number;\n numSteps: number;\n cancelled: boolean;\n finished: boolean;\n}\n\ninterface ReducerAction {\n type: string;\n payload?: any;\n}\n\ninterface FormValidations {\n [field: string]: {\n message?: string;\n validator: (value: any) => boolean;\n };\n}\n\nexport const MultiStepFormDemo: Story = () => {\n const initialState = useMemo<DemoMultiStepState>(\n () => ({\n currentStep: 1,\n cancelled: false,\n finished: false,\n numSteps: 3,\n formData: {\n firstName: 'Marcus',\n lastName: 'Kennedy',\n currentTitle: 'Data Analyst',\n currentCompany: 'Hello Fresh'\n },\n formErrors: {}\n }),\n []\n );\n\n const formValidation = useMemo<FormValidations>(\n () => ({\n salaryRequested: {\n message: 'This field is required.',\n validator: (value: string) => value?.length > 0\n },\n experienceLevel: {\n message: 'This field is required.',\n validator: (value: string) => value?.length > 0\n },\n salaryRequestReview: {\n message: 'This field is required.',\n validator: (value: string) => value?.length > 0\n },\n cultureFit: {\n message: 'This field is required.',\n validator: (value: string) => value?.length > 0\n },\n finalRecommendation: {\n message: 'This field is required.',\n validator: (value: string) => value?.length > 0\n }\n }),\n []\n );\n\n const stepFields = useMemo<{ [step: string]: string[] }>(() => {\n return {\n '1': [\n 'firstName',\n 'lastName',\n 'currentTitle',\n 'currentCompany',\n 'salaryRequested',\n 'experienceLevel',\n 'priorityOne',\n 'priorityTwo',\n 'priorityThree'\n ],\n '2': ['interviewNotes'],\n '3': ['salaryRequestReview', 'cultureFit', 'finalRecommendation', 'recommendationComments']\n };\n }, []);\n\n const reducer = (state: DemoMultiStepState, action: ReducerAction) => {\n const type = action.type;\n const payload = action.payload;\n\n switch (type) {\n case 'restart': {\n return initialState;\n }\n case 'cancel': {\n return {\n ...state,\n cancelled: true\n };\n }\n case 'finish': {\n return {\n ...state,\n finished: true\n };\n }\n case 'setStep': {\n return {\n ...state,\n currentStep: payload\n };\n }\n case 'setFieldValue': {\n const { field, value } = payload;\n const formData = {\n ...state.formData\n };\n const formErrors = {\n ...state.formErrors\n };\n\n formData[field] = value;\n\n if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {\n const valid = formValidation[field].validator(value);\n\n if (valid) {\n delete formErrors[field];\n } else {\n formErrors[field] = formValidation[field].message;\n }\n }\n\n return {\n ...state,\n formData,\n formErrors\n };\n }\n case 'submitCurrentStep': {\n const step = state.currentStep;\n const formErrors = { ...state.formErrors };\n let isValid = true;\n\n const validateFields = (fields: string[]) => {\n if (!fields) return;\n\n fields.forEach(field => {\n if (Object.prototype.hasOwnProperty.call(formValidation, field)) {\n const valid = formValidation[field].validator(state.formData[field]);\n\n if (valid) {\n delete formErrors[field];\n } else {\n isValid = false;\n formErrors[field] = formValidation[field].message;\n }\n }\n });\n };\n\n validateFields(stepFields[step]);\n\n return {\n ...state,\n currentStep:\n isValid && state.currentStep !== state.numSteps\n ? state.currentStep + 1\n : state.currentStep,\n finished: isValid && state.currentStep === state.numSteps,\n formErrors\n };\n }\n default:\n return state;\n }\n };\n\n const [state, dispatch] = useReducer<Reducer<DemoMultiStepState, ReducerAction>>(\n reducer,\n initialState\n );\n\n const stepData: Step[] = useMemo(() => {\n const stepActions: ReactNode = (\n <>\n <Button onClick={() => dispatch({ type: 'cancel' })}>Cancel</Button>\n <div>\n {state.currentStep > 1 && (\n <Button onClick={() => dispatch({ type: 'setStep', payload: state.currentStep - 1 })}>\n Previous\n </Button>\n )}\n {state.currentStep !== state.numSteps && (\n <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n Next\n </Button>\n )}\n {state.currentStep === state.numSteps && (\n <Button\n type='submit'\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n dispatch({ type: 'submitCurrentStep' });\n }}\n >\n Finish\n </Button>\n )}\n </div>\n </>\n );\n\n const step1Errors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[1].includes(errorField);\n });\n const step3Errors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[3].includes(errorField);\n });\n\n return [\n {\n id: 'step_1',\n name: 'Applicant details',\n description:\n 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +\n 'Please confirm their details and have a discussion regarding the open position and the company.',\n banners: step1Errors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\n content: (\n <ApplicantDetailsFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n },\n {\n id: 'step_2',\n name: 'Interview notes',\n content: (\n <InterviewNotesFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n },\n {\n id: 'step_3',\n name: 'Recommendations',\n description:\n 'Based on your screening call with the applicant please submit your recomendations.',\n banners: step3Errors?.length ? (\n <Banner\n id='formBanner'\n heading='Your submission failed to process.'\n messages={['Please correct all errors and try again.']}\n variant='urgent'\n />\n ) : undefined,\n content: (\n <RecommendationsFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n }\n ];\n }, [state.formData, state.formErrors, state.currentStep]);\n\n return (\n <>\n {(state.cancelled || state.finished) && (\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n <Text variant='h1'>HR screening {state.cancelled ? 'cancelled' : 'finished'}</Text>\n <Button\n onClick={() => {\n dispatch({ type: 'restart' });\n }}\n >\n Restart\n </Button>\n </Flex>\n )}\n\n {!state.cancelled && !state.finished && (\n <MultiStepForm\n heading='HR Screening'\n steps={stepData}\n currentStepId={`step_${state.currentStep}`}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/core/Number/Number.stories.d.ts CHANGED Viewed

@@ -1,9 +1,15 @@
 import { Meta, Story } from '@storybook/react';
-import { NumberDisplayProps, NumberInputProps } from '@pega/cosmos-react-core';
+import { NumberDisplayProps, NumberInputProps, NumberRangeInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const NumberInputDemo: Story<NumberInputProps>;
-export declare const StepperDemo: Story<NumberInputProps>;
+export declare type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {
+    value?: number;
+    onChange?: (value: string) => void;
+    showAdditionalInfo?: boolean;
+};
+export declare const NumberInputDemo: Story<NumberInputStory>;
+export declare const NumberRangeInputDemo: Story<NumberRangeInputProps>;
+export declare const StepperDemo: Story<NumberInputStory>;
 interface NumberDisplayStoryProps extends NumberDisplayProps {
     fractionDigits: number;
     groupSeparators: boolean;

package/jsx/core/Number/Number.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,~~EACjB~~,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,~~CA8BnD~~,CAAC;~~AAiCF~~,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,~~CA+B~~/C,CAAC;~~AAiCF~~,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,~~CAe5D~~,CAAC"}
1	+ {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,EAEhB,qBAAqB,EACrB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,oBAAY,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CA2CnD,CAAC;AA2EF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,qBAAqB,CA2C7D,CAAC;AA2EF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CA4C/C,CAAC;AAqCF,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAc5D,CAAC"}