npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.11.1 → 4.0.0-dev.12.1 - Mend

@pega/cosmos-react-demos 4.0.0-dev.11.1 → 4.0.0-dev.12.1

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

Files changed (71) hide show

package/lib/core/FieldGroup/FieldGroupList.stories.js CHANGED Viewed

@@ -16,10 +16,11 @@ export default {
     }
 };
 export const ExpensesDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
         {
             name: `${expensesGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
         }
     ]);
@@ -39,10 +40,11 @@ export const ExpensesDemo = (args) => {
                     : undefined })] }));
 };
 export const InsuranceDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
         {
             name: `${insuranceGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
         }
     ]);
@@ -62,10 +64,11 @@ export const InsuranceDemo = (args) => {
                     : undefined })] }));
 };
 export const FieldGroupListDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
         {
             name: `${demoGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);

package/lib/core/FieldGroup/FieldGroupList.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAyB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,IAAI;KAClB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC9C;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,EAC3D~~,SAAS,EACT,GAAG,EAAE,CAAC~~;~~QACJ~~;YACE,IAAI,EAAE,GAAG,iBAAiB,CAAC,KAAK,IAAI;YACpC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC;SAC9D;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,+BAAsB,EACxC,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;oBACd,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,EAC7D~~,SAAS,EACT,GAAG,EAAE,CAAC~~;~~QACJ~~;YACE,IAAI,EAAE,GAAG,kBAAkB,CAAC,KAAK,IAAI;YACrC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,sBAAsB,CAAC;SAChE;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iCAAwB,EAC1C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,2BAAkB,EACpC,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;oBACd,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,~~CAClC~~,iBAAiB,CAAC,aAAa,EAAE,iBAAiB,CAAC,~~EACnD,SAAS,EACT,GAAG,~~EAAE~~,CAAC~~;~~QACJ~~;YACE,IAAI,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI;YAChC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC;SACtD;KACF,~~CACF~~,CAAC;~~IAEF~~,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,KAAK,EACH,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n ~~undefined,\n () =>~~ [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n ~~undefined,\n () =>~~ [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer)~~,\n undefined,\n ()~~ => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}
1	+ {"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n headingTag: 'h3',\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n headingTag: 'h3',\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n headingTag: 'h3',\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]);\n\n return (\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}

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

@@ -15,7 +15,7 @@ export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
                         type: 'setFieldValue',
                         payload: { field: 'experienceLevel', value: e.target.value }
                     });
-                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
+                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', headingTag: 'h3', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
                                     dispatch({
                                         type: 'setFieldValue',
                                         payload: { field: 'priorityOne', value: e.target.value }

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

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

package/lib/core/MultiStepForm/MultiStepForm.stories.d.ts CHANGED Viewed

@@ -1,5 +1,10 @@
 import { Meta, Story } from '@storybook/react';
+import MultiStepFormProps from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const MultiStepFormDemo: Story;
+interface MultiStepFormDemoProps {
+    heading?: MultiStepFormProps['heading'];
+    stepIndicator?: MultiStepFormProps['stepIndicator'];
+}
+export declare const MultiStepFormDemo: Story<MultiStepFormDemoProps>;
 //# sourceMappingURL=MultiStepForm.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC~~;;AAe~~/C,~~wBAGU~~;~~AAuBV~~,eAAO,MAAM,iBAAiB,EAAE,~~KA+T/B~~,CAAC"}
1	+ {"version":3,"file":"MultiStepForm.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,kBAEN,MAAM,0EAA0E,CAAC;;AAWlF,wBAWU;AAEV,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAuBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAgU3D,CAAC"}

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

@@ -4,9 +4,17 @@ import { Button, Banner, Flex, MultiStepForm, Text } from '@pega/cosmos-react-co
 import { ApplicantDetailsFields, InterviewNotesFields, RecommendationsFields, NextInterviewFields } from './MultiStepForm.mocks';
 export default {
     title: 'Core/MultiStepForm',
-    component: MultiStepForm
+    component: MultiStepForm,
+    args: {
+        heading: 'HR Screening',
+        stepIndicator: 'horizontal'
+    },
+    argTypes: {
+        heading: { control: { type: 'text' } },
+        stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }
+    }
 };
-export const MultiStepFormDemo = () => {
+export const MultiStepFormDemo = (args) => {
     const initialState = useMemo(() => ({
         currentStepIndex: 0,
         cancelled: false,
@@ -166,7 +174,7 @@ export const MultiStepFormDemo = () => {
         const steps = [
             {
                 id: 'applicant_details',
-                name: 'Applicant details',
+                name: 'Applicant details - personal information',
                 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: applicantErrors?.length ? (_jsx(Banner, { messages: [
@@ -212,6 +220,6 @@ export const MultiStepFormDemo = () => {
     }, [state.formData, state.formErrors, state.currentStepIndex]);
     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: stepData[state.currentStepIndex].id }))] }));
+                        }, children: "Restart" })] })), !state.cancelled && !state.finished && (_jsx(MultiStepForm, { heading: args.heading, steps: stepData, currentStepId: stepData[state.currentStepIndex].id, stepIndicator: args.stepIndicator }))] }));
 };
 //# sourceMappingURL=MultiStepForm.stories.js.map

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

	@@ -1 +1 @@
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 NextInterviewFields\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 currentStepIndex: 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 currentStepIndex: 0,\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 nextInterviewer: {\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<string[][]>(() => {\n return [\n [\n 'firstName',\n 'lastName',\n 'currentTitle',\n 'currentCompany',\n 'salaryRequested',\n 'experienceLevel',\n 'priorityOne',\n 'priorityTwo',\n 'priorityThree'\n ],\n ['interviewNotes', 'additionalInterview'],\n ['nextInterviewer'],\n ['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 currentStepIndex: payload,\n formErrors: {}\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 stepIndex =\n state.numSteps === 4 \|\| state.currentStepIndex <= 1\n ? state.currentStepIndex\n : state.currentStepIndex + 1;\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[stepIndex]);\n\n return {\n ...state,\n numSteps: state.formData.additionalInterview ? 4 : 3,\n currentStepIndex:\n isValid && state.currentStepIndex !== state.numSteps - 1\n ? state.currentStepIndex + 1\n : state.currentStepIndex,\n finished: isValid && state.currentStepIndex === state.numSteps - 1,\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.currentStepIndex > 0 && (\n <Button\n onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })}\n >\n Previous\n </Button>\n )}\n {state.currentStepIndex !== state.numSteps - 1 && (\n <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n Next\n </Button>\n )}\n {state.currentStepIndex === state.numSteps - 1 && (\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 applicantErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[0].includes(errorField);\n });\n const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[3].includes(errorField);\n });\n\n const steps = [\n {\n id: 'applicant_details',\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: applicantErrors?.length ? (\n <Banner\n messages={[\n {\n label: 'Your submission failed to process.',\n description: 'Please correct all errors and try again.'\n }\n ]}\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: 'interview_notes',\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: 'recommendations',\n name: 'Final recommendations',\n description:\n 'Based on your screening call with the applicant please submit your recomendations.',\n banners: recommendationErrors?.length ? (\n <Banner\n messages={[\n {\n label: 'Your submission failed to process.',\n description: 'Please correct all errors and try again.'\n }\n ]}\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\n if (state.numSteps === 4) {\n steps.splice(2, 0, {\n id: 'next_interview',\n name: 'Next interview',\n description: 'Please select an individual to conduct the next interview.',\n banners: undefined,\n content: (\n <NextInterviewFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n });\n }\n\n return steps;\n }, [state.formData, state.formErrors, state.currentStepIndex]);\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={stepData[state.currentStepIndex].id}\n />\n )}\n </>\n );\n};\n"]}
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 MultiStepFormProps, {\n Step\n} 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 NextInterviewFields\n} from './MultiStepForm.mocks';\n\nexport default {\n title: 'Core/MultiStepForm',\n component: MultiStepForm,\n args: {\n heading: 'HR Screening',\n stepIndicator: 'horizontal'\n },\n argTypes: {\n heading: { control: { type: 'text' } },\n stepIndicator: { options: ['horizontal', 'vertical', 'none'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface MultiStepFormDemoProps {\n heading?: MultiStepFormProps['heading'];\n stepIndicator?: MultiStepFormProps['stepIndicator'];\n}\n\ninterface DemoMultiStepState {\n formData: DemoFormDataType;\n formErrors: DemoFormErrorsType;\n currentStepIndex: 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<MultiStepFormDemoProps> = (args: MultiStepFormDemoProps) => {\n const initialState = useMemo<DemoMultiStepState>(\n () => ({\n currentStepIndex: 0,\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 nextInterviewer: {\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<string[][]>(() => {\n return [\n [\n 'firstName',\n 'lastName',\n 'currentTitle',\n 'currentCompany',\n 'salaryRequested',\n 'experienceLevel',\n 'priorityOne',\n 'priorityTwo',\n 'priorityThree'\n ],\n ['interviewNotes', 'additionalInterview'],\n ['nextInterviewer'],\n ['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 currentStepIndex: payload,\n formErrors: {}\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 stepIndex =\n state.numSteps === 4 \|\| state.currentStepIndex <= 1\n ? state.currentStepIndex\n : state.currentStepIndex + 1;\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[stepIndex]);\n\n return {\n ...state,\n numSteps: state.formData.additionalInterview ? 4 : 3,\n currentStepIndex:\n isValid && state.currentStepIndex !== state.numSteps - 1\n ? state.currentStepIndex + 1\n : state.currentStepIndex,\n finished: isValid && state.currentStepIndex === state.numSteps - 1,\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.currentStepIndex > 0 && (\n <Button\n onClick={() => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 })}\n >\n Previous\n </Button>\n )}\n {state.currentStepIndex !== state.numSteps - 1 && (\n <Button variant='primary' onClick={() => dispatch({ type: 'submitCurrentStep' })}>\n Next\n </Button>\n )}\n {state.currentStepIndex === state.numSteps - 1 && (\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 applicantErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[0].includes(errorField);\n });\n const recommendationErrors = Object.keys(state.formErrors).filter(errorField => {\n return stepFields[3].includes(errorField);\n });\n\n const steps = [\n {\n id: 'applicant_details',\n name: 'Applicant details - personal information',\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: applicantErrors?.length ? (\n <Banner\n messages={[\n {\n label: 'Your submission failed to process.',\n description: 'Please correct all errors and try again.'\n }\n ]}\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: 'interview_notes',\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: 'recommendations',\n name: 'Final recommendations',\n description:\n 'Based on your screening call with the applicant please submit your recomendations.',\n banners: recommendationErrors?.length ? (\n <Banner\n messages={[\n {\n label: 'Your submission failed to process.',\n description: 'Please correct all errors and try again.'\n }\n ]}\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\n if (state.numSteps === 4) {\n steps.splice(2, 0, {\n id: 'next_interview',\n name: 'Next interview',\n description: 'Please select an individual to conduct the next interview.',\n banners: undefined,\n content: (\n <NextInterviewFields\n formData={state.formData}\n formErrors={state.formErrors}\n dispatch={dispatch}\n />\n ),\n actions: stepActions\n });\n }\n\n return steps;\n }, [state.formData, state.formErrors, state.currentStepIndex]);\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={args.heading}\n steps={stepData}\n currentStepId={stepData[state.currentStepIndex].id}\n stepIndicator={args.stepIndicator}\n />\n )}\n </>\n );\n};\n"]}

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

@@ -61,7 +61,7 @@ export const RadioButtonCardGroup = (args) => {
                         heading: 'Additional Info',
                         content: 'Some additional info'
                     }
-                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', headingTag: 'h3', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true,\n showNestedAdditionalInfo: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </RadioButtonGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true,\n showNestedAdditionalInfo: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </RadioButtonGroup>\n );\n};\n"]}

package/lib/core/Tabs/Tabs.stories.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react';
-import { TabsProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface TabDemoProps {
@@ -7,9 +6,4 @@ interface TabDemoProps {
 }
 export declare const TabsDemo: Story<TabDemoProps>;
 export declare const TabsCountDemo: Story<TabDemoProps>;
-interface ConfigurableTabsProps {
-    foreground?: string;
-    type?: TabsProps['type'];
-}
-export declare const ConfigurableTabs: Story<ConfigurableTabsProps>;
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/lib/core/Tabs/Tabs.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC~~;AAG~~/C,~~OAAO,EAAuC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAEzF,wBAUU~~;AAEV,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,YAAY,CA6BxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,YAAY,CA6B7C,CAAC~~;AAEF,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAuCzD,CAAC~~"}
1	+ {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBASU;AAEV,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,YAAY,CA6BxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,YAAY,CA6B7C,CAAC"}

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Configuration, Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
+import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tabs',
     component: Tabs,
-    excludeStories: ['ConfigurableTabs'],
     args: {
         type: 'horizontal'
     },
@@ -40,33 +39,4 @@ export const TabsCountDemo = (args) => {
     ];
     return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
 };
-export const ConfigurableTabs = (args) => {
-    const [panelShown, changePanel] = useState('1');
-    const handleTabChange = (id) => {
-        changePanel(id);
-    };
-    const tabs = [
-        { name: 'Tab 1', id: '1' },
-        { name: 'Tab 2', id: '2' },
-        { name: 'Tab 3', id: '3' },
-        { name: 'Tab 4', id: '4', disabled: true },
-        { name: 'Tab 5', id: '5' }
-    ];
-    return (_jsxs(Configuration, { theme: {
-            components: {
-                tabs: {
-                    base: {
-                        foreground: args.foreground
-                    }
-                }
-            }
-        }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, onTabClick: handleTabChange, currentTabId: panelShown }) }), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }) }, tab.id))) })] }));
-};
-ConfigurableTabs.args = {
-    foreground: '#076bc9'
-};
-ConfigurableTabs.argTypes = {
-    foreground: { control: { type: 'color' } },
-    type: { table: { disable: true } }
-};
 //# sourceMappingURL=Tabs.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,~~aAAa,EAAE,~~IAAI,EAAE,QAAQ,EAAE,IAAI,~~EAAa~~,MAAM,yBAAyB,CAAC;~~AAEzF~~,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,~~cAAc,EAAE,CAAC,kBAAkB,CAAC;IACpC,~~IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC3E;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,IAAkB,EAAE,EAAE;IAClE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,GAAI,GACvF,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,wBAAM,GAAG,CAAC,IAAI,GAAO,IADiC,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAwB,CAAC,IAAkB,EAAE,EAAE;IACvE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;QACrC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;KACvC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAC3E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,GAAI,GACvF,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,0BAAM,GAAG,CAAC,IAAI,gBAAe,IADyB,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B;iBACF;aACF;SACF,aAED,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,GAAI,GACtE,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAChD,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,YAC/C,0BAAM,GAAG,CAAC,IAAI,gBAAe,IADyB,GAAG,CAAC,EAAE,CAEnD,CACZ,CAAC,GACG,IACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { ~~Configuration,~~ Flex, TabPanel, Tabs, ~~TabsProps~~ } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n ~~excludeStories: ['ConfigurableTabs'],\n~~ args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface TabDemoProps {\n type: 'horizontal' \| 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name}</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\ninterface ConfigurableTabsProps {\n foreground?: string;\n type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n tabs: {\n base: {\n foreground: args.foreground\n }\n }\n }\n }}\n >\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableTabs.args = {\n foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n foreground: { control: { type: 'color' } },\n type: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Tabs',\n component: Tabs,\n args: {\n type: 'horizontal'\n },\n argTypes: {\n type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n }\n} as Meta;\n\ninterface TabDemoProps {\n type: 'horizontal' \| 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1' },\n { name: 'Tab 2', id: '2' },\n { name: 'Tab 3', id: '3' },\n { name: 'Tab 4', id: '4', disabled: true },\n { name: 'Tab 5', id: '5' }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name}</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n const [panelShown, changePanel] = useState('1');\n\n const handleTabChange = (id: string) => {\n changePanel(id);\n };\n\n const tabs = [\n { name: 'Tab 1', id: '1', count: 5 },\n { name: 'Tab 2', id: '2', count: 14 },\n { name: 'Tab 3', id: '3', count: 0 },\n { name: 'Tab 4', id: '4', count: 56, disabled: true },\n { name: 'Tab 5', id: '5', count: 150 }\n ];\n\n return (\n <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n <Flex item={{ grow: 1 }}>\n <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n </Flex>\n <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n <div>{tab.name} content</div>\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n};\n"]}

package/lib/cs/CallControlPanel/CallControlPanel.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAOL,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;AAW/B,wBAaU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,~~CAiRlE~~,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CAuE5F,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAOL,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;AAW/B,wBAaU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAkRlE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CAuE5F,CAAC"}

package/lib/cs/CallControlPanel/CallControlPanel.stories.js CHANGED Viewed

@@ -230,6 +230,7 @@ export const CallControlPanelDemo = (args) => {
                 onConsultAction,
                 onConferenceAction,
                 transferOptions: transferReasons,
+                defaultTransfer: transferReasons[1].id,
                 interactionOptions,
                 onTransferAction: (id, data) => {
                     action('onTransferAction')(id, data);