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

package/jsx/core/MultiStepForm/MultiStepForm.stories.jsx

@@ -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

@@ -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

@@ -1,11 +1,14 @@
 import { Meta, Story } from '@storybook/react';
-import { NumberDisplayProps, NumberInputProps, OmitStrict } 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 type NumberInputStory = OmitStrict<NumberInputProps, 'onChange'> & {
+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;

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

@@ -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,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,oBAAY,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAgCnD,CAAC;AAoCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAiC/C,CAAC;AAoCF,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"}
+{"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"}

package/jsx/core/Number/Number.stories.jsx

@@ -1,11 +1,16 @@
-import { useState } from 'react';
-import { NumberDisplay, NumberInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { NumberDisplay, NumberInput, NumberRangeInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Number',
     component: NumberInput
 };
 export const NumberInputDemo = (args) => {
-    const [value, setValue] = useState(args.value ?? '');
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
     return (<NumberInput {...args} value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
@@ -13,7 +18,9 @@ export const NumberInputDemo = (args) => {
             args.onBlur?.(inputValue);
         }} onFocus={inputValue => {
             args.onFocus?.(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}/>);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
+            ? { heading: 'Additional Info', content: 'Input a number' }
+            : undefined}/>);
 };
 NumberInputDemo.args = {
     value: undefined,
@@ -21,34 +28,168 @@ NumberInputDemo.args = {
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: undefined,
     label: 'Number input',
     labelHidden: false,
     info: 'Enter a numerical value',
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 NumberInputDemo.argTypes = {
-    value: { control: { type: 'text' } },
+    value: { control: { type: 'number' } },
     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' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        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' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+export const NumberRangeInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prevValue = usePrevious(args.value);
+    useEffect(() => {
+        if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {
+            setValue(args.value);
+        }
+    }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);
+    return (<NumberRangeInput {...args} value={value} onChange={newValue => {
+            setValue(newValue);
+            args.onChange?.(newValue);
+        }} onBlur={newValue => {
+            setValue(newValue);
+            args.onBlur?.(newValue);
+        }} onFocus={newValue => {
+            setValue(newValue);
+            args.onFocus?.(newValue);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} fromLabel={args.fromLabel} toLabel={args.toLabel} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+NumberRangeInputDemo.args = {
+    numberOfDecimals: 20,
+    showDecimal: true,
+    showGroupSeparators: true,
+    step: 1,
+    unit: undefined,
+    fromLabel: 'Min value',
+    toLabel: 'Max value',
+    labelHidden: false,
+    info: 'Enter a numerical value',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    label: 'Numeric value'
+};
+NumberRangeInputDemo.argTypes = {
+    numberOfDecimals: { control: { type: 'number' } },
+    showDecimal: { control: { type: 'boolean' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    step: { control: { type: 'number' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        control: { type: 'select' }
+    },
+    label: { control: { type: 'text' } },
+    fromLabel: { control: { type: 'text' } },
+    toLabel: { 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(args.value ?? '');
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
     return (<NumberInput {...args} variant='stepper' value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
@@ -56,7 +197,9 @@ export const StepperDemo = (args) => {
             args.onBlur?.(inputValue);
         }} onFocus={inputValue => {
             args.onFocus?.(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}/>);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
+            ? { heading: 'Additional Info', content: 'Input a stepper value' }
+            : undefined}/>);
 };
 StepperDemo.args = {
     value: undefined,
@@ -64,34 +207,34 @@ StepperDemo.args = {
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: undefined,
     label: 'Stepper input',
     labelHidden: false,
     info: 'Enter a numerical value',
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 StepperDemo.argTypes = {
-    value: { control: { type: 'text' } },
+    value: { control: { type: 'number' } },
     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' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const NumberDisplayDemo = (args) => {
-    return (<NumberDisplay value={args.value} unit={args.unit} unitPlacement={args.unitPlacement} formattingOptions={{
+    return (<NumberDisplay value={args.value} unit={args.unit} formattingOptions={{
             fractionDigits: args.fractionDigits,
             groupSeparators: args.groupSeparators,
             notation: args.notation
@@ -99,16 +242,53 @@ export const NumberDisplayDemo = (args) => {
 };
 NumberDisplayDemo.args = {
     value: undefined,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: undefined,
     fractionDigits: undefined,
-    notation: undefined,
+    notation: 'standard',
     groupSeparators: true
 };
 NumberDisplayDemo.argTypes = {
     value: { control: { type: 'number' } },
-    unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        control: { type: 'select' }
+    },
     fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
     groupSeparators: { control: { type: 'boolean' } },
     notation: {