@pega/cosmos-react-demos 2.0.0 → 2.1.3

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { 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  Configuration,\n  Flex,\n  Input,\n  Modal,\n  ModalManagerContext,\n  ModalMethods,\n  ModalProps,\n  Text,\n  ToasterContext,\n  WorkTheme,\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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      <Configuration theme={WorkTheme}>\n        <Modal heading={`Modal #${count}`}>\n          <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n        </Modal>\n      </Configuration>\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      <Configuration theme={WorkTheme}>\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      </Configuration>\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"]}

package/lib/core/MultiStep/MultiStep.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/MultiStep',
+    component: MultiStep
+};
+export const MultiStepDemo = () => {
+    const [currentId, setCurrentId] = useState('Step-1');
+    const [cancelled, setCancelled] = useState(false);
+    const [finished, setFinished] = useState(false);
+    const numSteps = 6;
+    const restart = () => {
+        setCancelled(false);
+        setFinished(false);
+        setCurrentId('Step-1');
+    };
+    const getActions = (stepNum) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setCancelled(true), children: "Cancel" }, void 0), _jsxs("div", { children: [stepNum > 1 && (_jsx(Button, { onClick: () => setCurrentId(`Step-${stepNum - 1}`), children: "Previous" }, void 0)), stepNum !== numSteps && (_jsx(Button, { variant: 'primary', onClick: () => setCurrentId(`Step-${stepNum + 1}`), children: "Next" }, void 0)), stepNum === numSteps && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: () => setFinished(true), children: "Finish" }, void 0))] }, void 0)] }, void 0));
+    };
+    const stepData = Array.from({ length: numSteps }).map((_, index) => {
+        const depth = ((index / 1) % 2);
+        const id = `Step-${index + 1}`;
+        const step = {
+            name: `Label for ${id}`,
+            id,
+            depth,
+            onClick: () => setCurrentId(id),
+            actions: getActions(index + 1)
+        };
+        step.content = _jsxs(Text, { children: ["Content for ", id] }, void 0);
+        return step;
+    });
+    return (_jsxs(_Fragment, { children: [cancelled && (_jsxs(Flex, { container: { gap: 2 }, children: [_jsx(Text, { variant: 'h1', children: "MultiStep cancelled" }, void 0), _jsx(Button, { onClick: restart, children: "Restart" }, void 0)] }, void 0)), finished && (_jsxs(Flex, { container: { gap: 2 }, children: [_jsx(Text, { variant: 'h1', children: "MultiStep finished" }, void 0), _jsx(Button, { onClick: restart, children: "Restart" }, void 0)] }, void 0)), !cancelled && !finished && _jsx(MultiStep, { steps: stepData, currentId: currentId }, void 0)] }, void 0));
+};
+//# sourceMappingURL=MultiStep.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStep.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { Button, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MultiStep',\n  component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo = () => {\n  const [currentId, setCurrentId] = useState('Step-1');\n  const [cancelled, setCancelled] = useState(false);\n  const [finished, setFinished] = useState(false);\n  const numSteps = 6;\n\n  const restart = () => {\n    setCancelled(false);\n    setFinished(false);\n    setCurrentId('Step-1');\n  };\n\n  const getActions = (stepNum: number): ReactNode => {\n    return (\n      <>\n        <Button onClick={() => setCancelled(true)}>Cancel</Button>\n        <div>\n          {stepNum > 1 && (\n            <Button onClick={() => setCurrentId(`Step-${stepNum - 1}`)}>Previous</Button>\n          )}\n          {stepNum !== numSteps && (\n            <Button variant='primary' onClick={() => setCurrentId(`Step-${stepNum + 1}`)}>\n              Next\n            </Button>\n          )}\n          {stepNum === numSteps && (\n            <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n              Finish\n            </Button>\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const stepData = Array.from({ length: numSteps }).map((_, index) => {\n    const depth = ((index / 1) % 2) as 0 | 1;\n    const id = `Step-${index + 1}`;\n    const step: Step = {\n      name: `Label for ${id}`,\n      id,\n      depth,\n      onClick: () => setCurrentId(id),\n      actions: getActions(index + 1)\n    };\n\n    step.content = <Text>Content for {id}</Text>;\n\n    return step;\n  });\n\n  return (\n    <>\n      {cancelled && (\n        <Flex container={{ gap: 2 }}>\n          <Text variant='h1'>MultiStep cancelled</Text>\n          <Button onClick={restart}>Restart</Button>\n        </Flex>\n      )}\n      {finished && (\n        <Flex container={{ gap: 2 }}>\n          <Text variant='h1'>MultiStep finished</Text>\n          <Button onClick={restart}>Restart</Button>\n        </Flex>\n      )}\n      {!cancelled && !finished && <MultiStep steps={stepData} currentId={currentId} />}\n    </>\n  );\n};\n"]}

package/lib/core/Number/Number.stories.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NumberDisplay, NumberInput } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Number',
+    component: NumberInput
+};
+export const NumberInputDemo = (args) => {
+    const [value, setValue] = useState();
+    return (_jsx(NumberInput, { ...args, value: value, onChange: inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }, onBlur: inputValue => {
+            setValue(inputValue);
+            args.onBlur?.(inputValue);
+        }, numberOfDecimals: args.numberOfDecimals, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, unit: args.unit, unitPlacement: args.unitPlacement, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+};
+NumberInputDemo.args = {
+    numberOfDecimals: 100,
+    showDecimal: true,
+    showGroupSeparators: true,
+    step: 1,
+    unit: 'ml',
+    unitPlacement: 'after',
+    label: 'Number input',
+    labelHidden: false,
+    info: 'Enter a numerical value',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+NumberInputDemo.argTypes = {
+    numberOfDecimals: { control: { type: 'number' } },
+    showDecimal: { control: { type: 'boolean' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    step: { control: { type: 'number' } },
+    unit: { control: { type: 'text' } },
+    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const StepperDemo = (args) => {
+    const [value, setValue] = useState();
+    return (_jsx(NumberInput, { ...args, variant: 'stepper', value: value, onChange: inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }, onBlur: inputValue => {
+            setValue(inputValue);
+            args.onBlur?.(inputValue);
+        }, numberOfDecimals: args.numberOfDecimals, showDecimal: args.showDecimal, showGroupSeparators: args.showGroupSeparators, step: args.step, unit: args.unit, unitPlacement: args.unitPlacement, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+};
+StepperDemo.args = {
+    numberOfDecimals: 100,
+    showDecimal: true,
+    showGroupSeparators: true,
+    step: 1,
+    unit: 'ml',
+    unitPlacement: 'after',
+    label: 'Stepper input',
+    labelHidden: false,
+    info: 'Enter a numerical value',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+StepperDemo.argTypes = {
+    numberOfDecimals: { control: { type: 'number' } },
+    showDecimal: { control: { type: 'boolean' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    step: { control: { type: 'number' } },
+    unit: { control: { type: 'text' } },
+    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const NumberDisplayDemo = (args) => {
+    return (_jsx(NumberDisplay, { value: args.value, unit: args.unit, unitPlacement: args.unitPlacement, formattingOptions: {
+            numberOfDecimals: args.numberOfDecimals,
+            showGroupSeparators: args.showGroupSeparators,
+            showDecimal: args.showDecimal
+        } }, void 0));
+};
+NumberDisplayDemo.args = {
+    value: '12345.6789',
+    unit: 'ml',
+    unitPlacement: 'after',
+    numberOfDecimals: 100,
+    showGroupSeparators: true,
+    showDecimal: true
+};
+NumberDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    unit: { control: { type: 'text' } },
+    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    numberOfDecimals: { control: { type: 'number' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    showDecimal: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Number.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Number.stories.js","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport const NumberInputDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Number input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nNumberInputDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const StepperDemo: Story<NumberInputProps> = (args: NumberInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <NumberInput\n      {...args}\n      variant='stepper'\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        args.onChange?.(inputValue);\n      }}\n      onBlur={inputValue => {\n        setValue(inputValue);\n        args.onBlur?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nStepperDemo.args = {\n  numberOfDecimals: 100,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: 'ml',\n  unitPlacement: 'after',\n  label: 'Stepper input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nStepperDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  numberOfDecimals: number;\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      unitPlacement={args.unitPlacement}\n      formattingOptions={{\n        numberOfDecimals: args.numberOfDecimals,\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: '12345.6789',\n  unit: 'ml',\n  unitPlacement: 'after',\n  numberOfDecimals: 100,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/PageTemplates/PageTemplates.stories.d.ts

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 import { DashboardPageLayoutProps, PageTemplateProps, TemplateProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface PageTemplatesStoryProps extends PageTemplateProps {
-    template: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+interface PageTemplatesStoryProps {
+    template?: 'demo page' | 'one column' | 'two column' | 'three column' | 'four column' | 'wide narrow' | 'narrow wide' | 'wide wide narrow' | 'narrow wide wide' | 'narrow wide narrow' | 'tabbed';
+    title?: PageTemplateProps['title'];
+    icon?: PageTemplateProps['icon'];
+    scrollContent?: PageTemplateProps['scrollContent'];
     showIcon?: boolean;
     showBreadcrumbs?: boolean;
     pathData?: string;

package/lib/core/PageTemplates/PageTemplates.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AASjC,wBAKU;AAEV,UAAU,uBAAwB,SAAQ,iBAAiB;IACzD,QAAQ,EACJ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiG5D,CAAC;AAyCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC"}
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AASjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAiG5D,CAAC;AAyCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC"}