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

package/lib/core/MultiStepForm/MultiStepForm.stories.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => dispatch({ type: 'cancel' }), children: "Cancel" }), _jsxs("div", { children: [state.currentStep > 1 && (_jsx(Button, { onClick: () => dispatch({ type: 'setStep', payload: state.currentStep - 1 }), children: "Previous" })), state.currentStep !== state.numSteps && (_jsx(Button, { variant: 'primary', onClick: () => dispatch({ type: 'submitCurrentStep' }), children: "Next" })), state.currentStep === state.numSteps && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: (e) => {
+                                e.preventDefault();
+                                dispatch({ type: 'submitCurrentStep' });
+                            }, children: "Finish" }))] })] }));
+        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 ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
+                content: (_jsx(ApplicantDetailsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
+                actions: stepActions
+            },
+            {
+                id: 'step_2',
+                name: 'Interview notes',
+                content: (_jsx(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 ? (_jsx(Banner, { id: 'formBanner', heading: 'Your submission failed to process.', messages: ['Please correct all errors and try again.'], variant: 'urgent' })) : undefined,
+                content: (_jsx(RecommendationsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch })),
+                actions: stepActions
+            }
+        ];
+    }, [state.formData, state.formErrors, state.currentStep]);
+    return (_jsxs(_Fragment, { children: [(state.cancelled || state.finished) && (_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Text, { variant: 'h1', children: ["HR screening ", state.cancelled ? 'cancelled' : 'finished'] }), _jsx(Button, { onClick: () => {
+                            dispatch({ type: 'restart' });
+                        }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: 'HR Screening', steps: stepData, currentStepId: `step_${state.currentStep}` }))] }));
+};
+//# sourceMappingURL=MultiStepForm.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStepForm.stories.js","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/lib/core/Number/Number.stories.d.ts

@@ -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/lib/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,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"}
+{"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/lib/core/Number/Number.stories.js

@@ -1,42 +1,182 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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();
+    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 (_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));
+        }, onFocus: inputValue => {
+            args.onFocus?.(inputValue);
+        }, 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,
+    numberOfDecimals: 20,
     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: '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 (_jsx(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' } },
@@ -45,63 +185,111 @@ NumberInputDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const StepperDemo = (args) => {
-    const [value, setValue] = useState();
+    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 (_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));
+        }, onFocus: inputValue => {
+            args.onFocus?.(inputValue);
+        }, 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,
+    numberOfDecimals: 20,
     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: '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 (_jsx(NumberDisplay, { value: args.value, unit: args.unit, unitPlacement: args.unitPlacement, formattingOptions: {
+    return (_jsx(NumberDisplay, { value: args.value, unit: args.unit, formattingOptions: {
             fractionDigits: args.fractionDigits,
             groupSeparators: args.groupSeparators,
             notation: args.notation
-        } }, void 0));
+        } }));
 };
 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: {

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

@@ -1 +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  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  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  fractionDigits: number;\n  groupSeparators: boolean;\n  notation: 'standard' | 'compact';\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        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: undefined,\n  unit: 'ml',\n  unitPlacement: 'after',\n  fractionDigits: undefined,\n  notation: undefined,\n  groupSeparators: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  unit: { control: { type: 'text' } },\n  unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  groupSeparators: { control: { type: 'boolean' } },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}
+{"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 { useEffect, useState } from 'react';\n\nimport {\n  NumberDisplay,\n  NumberDisplayProps,\n  NumberInput,\n  NumberInputProps,\n  NumberRangeInput,\n  NumberRangeInputProps,\n  OmitStrict,\n  usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Number',\n  component: NumberInput\n} as Meta;\n\nexport type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {\n  value?: number;\n  onChange?: (value: string) => void;\n  showAdditionalInfo?: boolean;\n};\n\nexport const NumberInputDemo: Story<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value === undefined ? undefined : `${args.value}`\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value === undefined ? undefined : `${args.value}`);\n  }, [prev, args.value]);\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        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\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      additionalInfo={\n        args.showAdditionalInfo\n          ? { heading: 'Additional Info', content: 'Input a number' }\n          : undefined\n      }\n    />\n  );\n};\n\nNumberInputDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\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  showAdditionalInfo: true\n};\n\nNumberInputDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\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  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const NumberRangeInputDemo: Story<NumberRangeInputProps> = (args: NumberRangeInputProps) => {\n  const [value, setValue] = useState(args.value);\n\n  const prevValue = usePrevious(args.value);\n\n  useEffect(() => {\n    if (prevValue?.start !== args.value?.start || prevValue?.end !== args.value?.end) {\n      setValue(args.value);\n    }\n  }, [prevValue?.start, prevValue?.end, args.value?.start, args.value?.end]);\n\n  return (\n    <NumberRangeInput\n      {...args}\n      value={value}\n      onChange={newValue => {\n        setValue(newValue);\n        args.onChange?.(newValue);\n      }}\n      onBlur={newValue => {\n        setValue(newValue);\n        args.onBlur?.(newValue);\n      }}\n      onFocus={newValue => {\n        setValue(newValue);\n        args.onFocus?.(newValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\n      label={args.label}\n      fromLabel={args.fromLabel}\n      toLabel={args.toLabel}\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\nNumberRangeInputDemo.args = {\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\n  fromLabel: 'Min value',\n  toLabel: 'Max value',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  label: 'Numeric value'\n};\n\nNumberRangeInputDemo.argTypes = {\n  numberOfDecimals: { control: { type: 'number' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  label: { control: { type: 'text' } },\n  fromLabel: { control: { type: 'text' } },\n  toLabel: { 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<NumberInputStory> = (args: NumberInputStory) => {\n  const [value, setValue] = useState<string | undefined>(\n    args.value === undefined ? undefined : `${args.value}`\n  );\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value === undefined ? undefined : `${args.value}`);\n  }, [prev, args.value]);\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        args.onBlur?.(inputValue);\n      }}\n      onFocus={inputValue => {\n        args.onFocus?.(inputValue);\n      }}\n      numberOfDecimals={args.numberOfDecimals}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      unit={args.unit}\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      additionalInfo={\n        args.showAdditionalInfo\n          ? { heading: 'Additional Info', content: 'Input a stepper value' }\n          : undefined\n      }\n    />\n  );\n};\n\nStepperDemo.args = {\n  value: undefined,\n  numberOfDecimals: 20,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  unit: undefined,\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  showAdditionalInfo: true\n};\n\nStepperDemo.argTypes = {\n  value: { control: { type: 'number' } },\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\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  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface NumberDisplayStoryProps extends NumberDisplayProps {\n  fractionDigits: number;\n  groupSeparators: boolean;\n  notation: 'standard' | 'compact';\n}\n\nexport const NumberDisplayDemo: Story<NumberDisplayStoryProps> = (\n  args: NumberDisplayStoryProps\n) => {\n  return (\n    <NumberDisplay\n      value={args.value}\n      unit={args.unit}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nNumberDisplayDemo.args = {\n  value: undefined,\n  unit: undefined,\n  fractionDigits: undefined,\n  notation: 'standard',\n  groupSeparators: true\n};\n\nNumberDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  unit: {\n    options: [\n      undefined,\n      'acre',\n      'byte',\n      'celsius',\n      'centimeter',\n      'day',\n      'degree',\n      'fahrenheit',\n      'foot',\n      'gigabyte',\n      'gram',\n      'hectare',\n      'hour',\n      'inch',\n      'kilobyte',\n      'kilogram',\n      'kilometer',\n      'kilometer-per-hour',\n      'liter',\n      'liter-per-meter',\n      'megabyte',\n      'meter',\n      'meter-per-second',\n      'mile',\n      'millimeter',\n      'millisecond',\n      'minute',\n      'month',\n      'percent',\n      'pound',\n      'second',\n      'terabyte',\n      'week',\n      'year',\n      'token'\n    ],\n    control: { type: 'select' }\n  },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  groupSeparators: { control: { type: 'boolean' } },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}