npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.1.2 → 4.0.0-dev.10.1 - Mend

@pega/cosmos-react-demos 4.0.0-dev.1.2 → 4.0.0-dev.10.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 (487) hide show

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 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: '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 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\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 { 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"]}

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { NumberDisplayProps, NumberInputProps, NumberRangeInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {
+export type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {
     value?: number;
     onChange?: (value: string) => void;
     showAdditionalInfo?: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,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"}
1	+ {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,EAEhB,qBAAqB,EACrB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,MAAM,MAAM,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/PageTemplates/PageTemplates.stories.d.ts CHANGED Viewed

@@ -28,6 +28,6 @@ interface CategorySubPageStoryProps {
     maxActions?: TemplateProps['maxActions'];
 }
 export declare const CategorySubPageDemo: Story<CategorySubPageStoryProps>;
-declare type TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;
+type TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;
 export declare const TabbedPageDemo: Story<TabbedPageStoryProps>;
 //# sourceMappingURL=PageTemplates.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAMb,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAWjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,uBAAuB,~~CA0EzD~~,CAAC;AAwCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC;AAkBF,~~aAAK~~,oBAAoB,GAAG,UAAU,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC;AAE5E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,~~CA+EtD~~,CAAC"}
1	+ {"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,wBAAwB,EAWxB,iBAAiB,EAKjB,aAAa,EAMb,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAWjC,wBAKU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EACL,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,uBAAuB,CAsEzD,CAAC;AAwCF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAoE5D,CAAC;AAiBF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAkFhE,CAAC;AAkBF,KAAK,oBAAoB,GAAG,UAAU,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC;AAE5E,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CA2EtD,CAAC"}

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

@@ -16,7 +16,7 @@ export default {
 };
 export const ColumnPageDemo = (args) => {
     const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }), _jsx(Button, { children: "Page action 2" })] }));
-    const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
+    const banners = args.showBanners && (_jsx(Banner, { variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
     const pageTemplateProps = {
         scrollContent: args.scrollContent,
         title: args.title || 'Demo page',
@@ -211,7 +211,7 @@ CategorySubPageDemo.argTypes = {
 };
 export const TabbedPageDemo = (args) => {
     const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }), _jsx(Button, { children: "Page action 2" })] }));
-    const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
+    const banners = args.showBanners && (_jsx(Banner, { variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
     const pageTemplateProps = {
         scrollContent: args.scrollContent,
         title: args.title || 'Tabbed page',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n Banner,\n Button,\n CategorySubPage,\n ComboBox,\n DashboardPage,\n DashboardPageLayoutProps,\n TabbedPage,\n OneColumnPage,\n TwoColumnPage,\n ThreeColumnPage,\n FourColumnPage,\n WideNarrowPage,\n NarrowWidePage,\n WideWideNarrowPage,\n NarrowWideWidePage,\n NarrowWideNarrowPage,\n PageTemplateProps,\n icons,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n TemplateProps,\n createUID,\n Table,\n ColumnProps,\n Text,\n StyledRegion,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { commitsData } from '../Table/Table.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n title: 'Core/PageTemplates',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n template?:\n \| 'demo page'\n \| 'one column'\n \| 'two column'\n \| 'three column'\n \| 'four column'\n \| 'wide narrow'\n \| 'narrow wide'\n \| 'wide wide narrow'\n \| 'narrow wide wide'\n \| 'narrow wide narrow';\n title?: PageTemplateProps['title'];\n icon?: PageTemplateProps['icon'];\n scrollContent?: PageTemplateProps['scrollContent'];\n showIcon?: boolean;\n showBreadcrumbs?: boolean;\n pathData?: string;\n showActions?: boolean;\n showBanners?: boolean;\n}\n\nexport const ColumnPageDemo: Story<PageTemplatesStoryProps> = (args: PageTemplatesStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title \|\| 'Demo page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData),\n as: args.template !== 'demo page' ? StyledStoryPage : undefined\n };\n\n let page;\n\n switch (args.template) {\n case 'one column':\n page = <OneColumnPage a='a' {...pageTemplateProps} />;\n break;\n case 'two column':\n page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'three column':\n page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'four column':\n page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n break;\n case 'wide narrow':\n page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'narrow wide':\n page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'wide wide narrow':\n page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide wide':\n page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide narrow':\n page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'demo page':\n default:\n page = (\n <TwoColumnPage\n a={<FeedDemo />}\n b={\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n }\n {...pageTemplateProps}\n />\n );\n break;\n }\n\n return <AppShellDemo main={page} appHeader />;\n};\n\nColumnPageDemo.args = {\n template: 'demo page',\n scrollContent: false,\n title: 'Demo page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nColumnPageDemo.argTypes = {\n template: {\n options: [\n 'demo page',\n 'one column',\n 'two column',\n 'three column',\n 'four column',\n 'wide narrow',\n 'narrow wide',\n 'wide wide narrow',\n 'narrow wide wide',\n 'narrow wide narrow'\n ],\n control: { type: 'select' }\n },\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n title?: DashboardPageLayoutProps['title'];\n filterPosition?: DashboardPageLayoutProps['filterPosition'];\n numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n args: DashboardPageStoryProps\n) => {\n const FilterComboBox = () => {\n const [filterSearchValue, setFilterSearchValue] = useState('');\n const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n Array.from({ length: 10 }, (_, i) => ({\n id: createUID(),\n primary: `Filter ${i + 1}`,\n selected: false\n }))\n );\n\n const selected = useMemo(() => {\n return menuHelpers\n .getSelected(filterOptions)\n .map(item => ({ text: item.primary, id: item.id }));\n }, [filterOptions]);\n\n const toggleItem = (id: MenuItemProps['id']) => {\n setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n };\n\n return (\n <ComboBox\n mode='multi-select'\n label='Filters'\n placeholder='Choose filters'\n value={filterSearchValue}\n onChange={e => {\n setFilterSearchValue(e.target.value);\n }}\n selected={{ items: selected, onRemove: toggleItem }}\n menu={{\n items: filterSearchValue\n ? menuHelpers\n .flatten(filterOptions)\n .filter(({ primary }) => primary.includes(filterSearchValue))\n : filterOptions,\n emptyText: 'No filters',\n onItemClick: toggleItem\n }}\n />\n );\n };\n\n const filterControls = Array.from({ length: args.numberOfFilters \|\| 3 }, (_, i) => (\n <FilterComboBox key={i} />\n ));\n\n return (\n <AppShellDemo\n main={\n <DashboardPage\n a='a'\n b='b'\n c='c'\n path={getPath()}\n filters={filterControls}\n filterPosition={args.filterPosition}\n fitToViewport\n title={args.title \|\| 'Dashboard'}\n as={StyledStoryPage}\n />\n }\n appHeader\n />\n );\n};\n\nDashboardPageDemo.args = {\n title: 'Dashboard',\n filterPosition: 'block-start',\n numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n title: { control: { type: 'text' } },\n filterPosition: {\n options: ['block-start', 'inline-start', 'inline-end'],\n control: { type: 'select' }\n },\n numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n category?: TemplateProps['category'];\n categoryIcon?: TemplateProps['categoryIcon'];\n showIcon?: boolean;\n viewLoading?: TemplateProps['viewLoading'];\n maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n args: CategorySubPageStoryProps\n) => {\n const [activeItem, setActiveItem] = useState('Profile');\n\n const mockNavLinks = (itemTextArray: string[]) => {\n return itemTextArray.map(itemText => {\n return {\n text: itemText,\n active: itemText === activeItem,\n href: '#',\n onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent \|\| '')\n };\n });\n };\n\n return (\n <AppShellDemo\n main={\n <CategorySubPage\n viewLoading={args.viewLoading}\n category={args.category \|\| 'Administration'}\n categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n navItemGroups={[\n {\n title: 'General',\n items: useMemo(\n () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n [activeItem]\n )\n },\n {\n title: 'Second Group',\n items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n },\n {\n items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n },\n {\n items: useMemo(\n () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n [activeItem]\n )\n },\n {\n items: [\n {\n text: 'Button Item'\n }\n ]\n }\n ]}\n pageTitle={activeItem}\n maxActions={args.maxActions}\n pageActions={[\n {\n id: 'saveChanges',\n text: 'Save'\n },\n {\n id: 'cancelChanges',\n text: 'Cancel'\n },\n {\n id: 'goToRule',\n text: 'Go to Rule'\n },\n {\n id: 'viewInClipboard',\n text: 'View in Clipboard'\n }\n ]}\n region={\n <StyledStoryPage secondary>\n <StyledRegion style={{ minHeight: '150vh' }} />\n </StyledStoryPage>\n }\n />\n }\n appHeader\n />\n );\n};\n\nCategorySubPageDemo.args = {\n category: 'Administration',\n categoryIcon: 'gear-solid',\n showIcon: true,\n viewLoading: false,\n maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n category: { control: { type: 'text' } },\n categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n viewLoading: { control: { type: 'boolean' } },\n maxActions: { control: { type: 'number' } }\n};\n\ntype TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;\n\nexport const TabbedPageDemo: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title \|\| 'Tabbed page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData)\n };\n\n const tableData = commitsData;\n\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <Text>{data.id}</Text>, label: 'ID' },\n { renderer: data => <Text>{data.author}</Text>, label: 'Author' },\n { renderer: data => <Text>{data.date}</Text>, label: 'Date' },\n { renderer: data => <Text>{data.message}</Text>, label: 'Message' }\n ];\n\n return (\n <AppShellDemo\n main={\n <TabbedPage\n {...pageTemplateProps}\n tabs={{\n tabs: [\n {\n id: 'table',\n name: 'Audit',\n content: (\n <StyledDemoTableWrapper>\n <Table\n title='Commit History'\n hoverHighlight={false}\n data={tableData}\n columns={columns}\n />\n </StyledDemoTableWrapper>\n )\n },\n {\n id: 'team',\n name: 'My Team',\n content: (\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n )\n },\n {\n id: 'chat',\n name: 'Chat',\n content: <FeedDemo />\n }\n ],\n type: 'horizontal',\n defaultTabId: 'chat'\n }}\n />\n }\n appHeader\n />\n );\n};\n\nTabbedPageDemo.args = {\n scrollContent: false,\n title: 'Tabbed page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nTabbedPageDemo.argTypes = {\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n Banner,\n Button,\n CategorySubPage,\n ComboBox,\n DashboardPage,\n DashboardPageLayoutProps,\n TabbedPage,\n OneColumnPage,\n TwoColumnPage,\n ThreeColumnPage,\n FourColumnPage,\n WideNarrowPage,\n NarrowWidePage,\n WideWideNarrowPage,\n NarrowWideWidePage,\n NarrowWideNarrowPage,\n PageTemplateProps,\n icons,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n TemplateProps,\n createUID,\n Table,\n ColumnProps,\n Text,\n StyledRegion,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { commitsData } from '../Table/Table.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n title: 'Core/PageTemplates',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n template?:\n \| 'demo page'\n \| 'one column'\n \| 'two column'\n \| 'three column'\n \| 'four column'\n \| 'wide narrow'\n \| 'narrow wide'\n \| 'wide wide narrow'\n \| 'narrow wide wide'\n \| 'narrow wide narrow';\n title?: PageTemplateProps['title'];\n icon?: PageTemplateProps['icon'];\n scrollContent?: PageTemplateProps['scrollContent'];\n showIcon?: boolean;\n showBreadcrumbs?: boolean;\n pathData?: string;\n showActions?: boolean;\n showBanners?: boolean;\n}\n\nexport const ColumnPageDemo: Story<PageTemplatesStoryProps> = (args: PageTemplatesStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner variant='warning' messages={['This is a warning banner. You have been warned!']} />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title \|\| 'Demo page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData),\n as: args.template !== 'demo page' ? StyledStoryPage : undefined\n };\n\n let page;\n\n switch (args.template) {\n case 'one column':\n page = <OneColumnPage a='a' {...pageTemplateProps} />;\n break;\n case 'two column':\n page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'three column':\n page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'four column':\n page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n break;\n case 'wide narrow':\n page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'narrow wide':\n page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'wide wide narrow':\n page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide wide':\n page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide narrow':\n page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'demo page':\n default:\n page = (\n <TwoColumnPage\n a={<FeedDemo />}\n b={\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n }\n {...pageTemplateProps}\n />\n );\n break;\n }\n\n return <AppShellDemo main={page} appHeader />;\n};\n\nColumnPageDemo.args = {\n template: 'demo page',\n scrollContent: false,\n title: 'Demo page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nColumnPageDemo.argTypes = {\n template: {\n options: [\n 'demo page',\n 'one column',\n 'two column',\n 'three column',\n 'four column',\n 'wide narrow',\n 'narrow wide',\n 'wide wide narrow',\n 'narrow wide wide',\n 'narrow wide narrow'\n ],\n control: { type: 'select' }\n },\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n title?: DashboardPageLayoutProps['title'];\n filterPosition?: DashboardPageLayoutProps['filterPosition'];\n numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n args: DashboardPageStoryProps\n) => {\n const FilterComboBox = () => {\n const [filterSearchValue, setFilterSearchValue] = useState('');\n const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n Array.from({ length: 10 }, (_, i) => ({\n id: createUID(),\n primary: `Filter ${i + 1}`,\n selected: false\n }))\n );\n\n const selected = useMemo(() => {\n return menuHelpers\n .getSelected(filterOptions)\n .map(item => ({ text: item.primary, id: item.id }));\n }, [filterOptions]);\n\n const toggleItem = (id: MenuItemProps['id']) => {\n setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n };\n\n return (\n <ComboBox\n mode='multi-select'\n label='Filters'\n placeholder='Choose filters'\n value={filterSearchValue}\n onChange={e => {\n setFilterSearchValue(e.target.value);\n }}\n selected={{ items: selected, onRemove: toggleItem }}\n menu={{\n items: filterSearchValue\n ? menuHelpers\n .flatten(filterOptions)\n .filter(({ primary }) => primary.includes(filterSearchValue))\n : filterOptions,\n emptyText: 'No filters',\n onItemClick: toggleItem\n }}\n />\n );\n };\n\n const filterControls = Array.from({ length: args.numberOfFilters \|\| 3 }, (_, i) => (\n <FilterComboBox key={i} />\n ));\n\n return (\n <AppShellDemo\n main={\n <DashboardPage\n a='a'\n b='b'\n c='c'\n path={getPath()}\n filters={filterControls}\n filterPosition={args.filterPosition}\n fitToViewport\n title={args.title \|\| 'Dashboard'}\n as={StyledStoryPage}\n />\n }\n appHeader\n />\n );\n};\n\nDashboardPageDemo.args = {\n title: 'Dashboard',\n filterPosition: 'block-start',\n numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n title: { control: { type: 'text' } },\n filterPosition: {\n options: ['block-start', 'inline-start', 'inline-end'],\n control: { type: 'select' }\n },\n numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n category?: TemplateProps['category'];\n categoryIcon?: TemplateProps['categoryIcon'];\n showIcon?: boolean;\n viewLoading?: TemplateProps['viewLoading'];\n maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n args: CategorySubPageStoryProps\n) => {\n const [activeItem, setActiveItem] = useState('Profile');\n\n const mockNavLinks = (itemTextArray: string[]) => {\n return itemTextArray.map(itemText => {\n return {\n text: itemText,\n active: itemText === activeItem,\n href: '#',\n onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent \|\| '')\n };\n });\n };\n\n return (\n <AppShellDemo\n main={\n <CategorySubPage\n viewLoading={args.viewLoading}\n category={args.category \|\| 'Administration'}\n categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n navItemGroups={[\n {\n title: 'General',\n items: useMemo(\n () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n [activeItem]\n )\n },\n {\n title: 'Second Group',\n items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n },\n {\n items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n },\n {\n items: useMemo(\n () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n [activeItem]\n )\n },\n {\n items: [\n {\n text: 'Button Item'\n }\n ]\n }\n ]}\n pageTitle={activeItem}\n maxActions={args.maxActions}\n pageActions={[\n {\n id: 'saveChanges',\n text: 'Save'\n },\n {\n id: 'cancelChanges',\n text: 'Cancel'\n },\n {\n id: 'goToRule',\n text: 'Go to Rule'\n },\n {\n id: 'viewInClipboard',\n text: 'View in Clipboard'\n }\n ]}\n region={\n <StyledStoryPage secondary>\n <StyledRegion style={{ minHeight: '150vh' }} />\n </StyledStoryPage>\n }\n />\n }\n appHeader\n />\n );\n};\n\nCategorySubPageDemo.args = {\n category: 'Administration',\n categoryIcon: 'gear-solid',\n showIcon: true,\n viewLoading: false,\n maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n category: { control: { type: 'text' } },\n categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n viewLoading: { control: { type: 'boolean' } },\n maxActions: { control: { type: 'number' } }\n};\n\ntype TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;\n\nexport const TabbedPageDemo: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner variant='warning' messages={['This is a warning banner. You have been warned!']} />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title \|\| 'Tabbed page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData)\n };\n\n const tableData = commitsData;\n\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <Text>{data.id}</Text>, label: 'ID' },\n { renderer: data => <Text>{data.author}</Text>, label: 'Author' },\n { renderer: data => <Text>{data.date}</Text>, label: 'Date' },\n { renderer: data => <Text>{data.message}</Text>, label: 'Message' }\n ];\n\n return (\n <AppShellDemo\n main={\n <TabbedPage\n {...pageTemplateProps}\n tabs={{\n tabs: [\n {\n id: 'table',\n name: 'Audit',\n content: (\n <StyledDemoTableWrapper>\n <Table\n title='Commit History'\n hoverHighlight={false}\n data={tableData}\n columns={columns}\n />\n </StyledDemoTableWrapper>\n )\n },\n {\n id: 'team',\n name: 'My Team',\n content: (\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n )\n },\n {\n id: 'chat',\n name: 'Chat',\n content: <FeedDemo />\n }\n ],\n type: 'horizontal',\n defaultTabId: 'chat'\n }}\n />\n }\n appHeader\n />\n );\n};\n\nTabbedPageDemo.args = {\n scrollContent: false,\n title: 'Tabbed page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nTabbedPageDemo.argTypes = {\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -2,8 +2,13 @@ import { Meta, Story } from '@storybook/react';
 import { ProgressProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const IndeterminateProgress: Story<ProgressProps>;
-export declare const DeterminateProgress: Story<ProgressProps>;
+interface ProgressDemoProps extends ProgressProps {
+    announce?: boolean;
+    determinate?: boolean;
+    focusOnVisible?: boolean;
+    cycleProp?: 'none' | 'value' | 'message' | 'visible';
+}
+export declare const ProgressDemo: Story<ProgressDemoProps>;
 interface ConfigurableProgressProps extends ProgressProps {
     progressColor?: string;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAG~~/C,OAAO,~~EAKL~~,aAAa,~~EAEd~~,MAAM,yBAAyB,CAAC;;~~AAIjC~~,~~wBAcU~~;AAEV,~~eAAO~~,~~MAAM~~,~~qBAAqB~~,EAAE,~~KAAK~~,CAAC,~~aAAa~~,~~CA+BtD~~,CAAC;~~AAMF~~,eAAO,MAAM,~~mBAAmB~~,EAAE,KAAK,CAAC,~~aAAa~~,~~CAgCpD~~,CAAC;~~AAUF~~,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAkBjE,CAAC"}
1	+ {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAiC,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAI7F,wBA0BU;AAEV,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAsFjD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAkBjE,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Button, Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
+import { useEffect, useMemo, useState } from 'react';
+import { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
 import { StyledDemoWrap } from './Progress.styles';
 export default {
     title: 'Core/Progress',
@@ -9,58 +9,82 @@ export default {
     args: {
         variant: 'ring',
         placement: 'local',
-        message: ''
+        message: '',
+        determinate: false,
+        value: 67,
+        focusOnVisible: false,
+        visible: true,
+        announce: false,
+        cycleProp: 'none'
     },
     argTypes: {
         variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
-        placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },
-        message: { control: { type: 'text' } }
+        placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },
+        message: { control: { type: 'text' } },
+        focusOnVisible: { control: { type: 'boolean' } },
+        determinate: { control: { type: 'boolean' } },
+        value: { control: { type: 'number' } },
+        visible: { control: { type: 'boolean' } },
+        announce: { control: { type: 'boolean' } },
+        cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }
     }
 };
-export const IndeterminateProgress = (args) => {
-    const [loading, setLoading] = useState(false);
-    const handleClick = () => {
-        setLoading(true);
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    };
-    useEffect(() => {
-        if (args.placement === 'global') {
-            setLoading(false);
+export const ProgressDemo = (args) => {
+    const cycling = args.cycleProp !== 'none';
+    const [visible, setVisible] = useState(args.visible);
+    const [value, setValue] = useState(args.value ?? 0);
+    const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];
+    const [messageIndex, setMessageIndex] = useState(0);
+    const message = useMemo(() => {
+        if (args.cycleProp === 'message') {
+            return messages[messageIndex];
         }
-        else {
-            setLoading(true);
+        return args.message;
+    }, [args.cycleProp, args.message, messageIndex]);
+    useEffect(() => {
+        if (args.cycleProp !== 'value') {
+            setValue(args.value ?? 0);
         }
-    }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading })] }));
-};
-IndeterminateProgress.args = {
-    message: 'Loading'
-};
-export const DeterminateProgress = (args) => {
-    const [loading, setLoading] = useState(false);
-    const handleClick = () => {
-        setLoading(true);
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    };
+    }, [args.cycleProp, args.value]);
     useEffect(() => {
-        if (args.placement === 'global') {
-            setLoading(false);
+        if (args.cycleProp !== 'visible') {
+            setVisible(args.visible);
         }
-        else {
-            setLoading(true);
+    }, [args.cycleProp, args.visible]);
+    useEffect(() => {
+        if (args.cycleProp === 'none')
+            return;
+        const duration = args.cycleProp === 'value' ? 2000 : 3000;
+        const timeout = setTimeout(() => {
+            switch (args.cycleProp) {
+                case 'message': {
+                    if (messageIndex < messages.length - 1)
+                        setMessageIndex(messageIndex + 1);
+                    else
+                        setMessageIndex(0);
+                    break;
+                }
+                case 'value': {
+                    if (value < 100)
+                        setValue(Math.min(value + 10, 100));
+                    else
+                        setValue(0);
+                    break;
+                }
+                case 'visible': {
+                    setVisible(!visible);
+                    break;
+                }
+                default:
+                    break;
+            }
+        }, duration);
+        if (!cycling) {
+            clearTimeout(timeout);
         }
-    }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading })] }));
-};
-DeterminateProgress.args = {
-    value: 67
-};
-DeterminateProgress.argTypes = {
-    value: { control: { type: 'number' } }
+        return () => clearTimeout(timeout);
+    }, [args.cycleProp, message, visible, value, cycling]);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: "Demo Content" }), _jsxs(StyledDemoWrap, { children: [['block', 'local'].includes(args.placement || '') && (_jsx(Text, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), args.placement === 'inline' && _jsx(Text, { children: "Progress demo " }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: message, value: args.determinate || args.cycleProp === 'value' ? value : undefined, visible: visible, focusOnVisible: args.focusOnVisible, liveConfig: args.announce ? { contextualLabel: 'Demo' } : undefined })] })] }));
 };
 export const ConfigurableProgress = (args) => {
     return (_jsx(Configuration, { theme: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":";~~AACA~~,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAE5C~~,OAAO,~~EACL~~,~~MAAM,EACN,~~aAAa,~~EACb~~,IAAI,~~EACJ~~,QAAQ,~~EAER~~,IAAI,~~EACL~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;IACxC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,EAAE;~~KACZ~~;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;~~QAClF~~,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~KACvC~~;CACM,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,~~qBAAqB~~,~~GAAyB~~,CAAC,~~IAAmB~~,EAAE,EAAE;~~IACjF~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,~~KAAK~~,CAAC,CAAC;~~IAE9C~~,MAAM,~~WAAW~~,~~GAAG~~,GAAG,~~EAAE;QACvB~~,~~UAAU~~,CAAC,IAAI,CAAC,CAAC;~~QAEjB~~,~~UAAU~~,~~CAAC~~,GAAG,EAAE~~;YACd~~,~~UAAU~~,~~CAAC~~,~~KAAK~~,CAAC,CAAC;~~QACpB~~,CAAC,EAAE,~~IAAI~~,CAAC,CAAC~~;IACX~~,CAAC,CAAC;~~IAEF~~,~~SAAS~~,CAAC,GAAG,EAAE;~~QACb~~,IAAI,IAAI,CAAC,SAAS,KAAK,~~QAAQ~~,EAAE;~~YAC/B~~,~~UAAU~~,CAAC,~~KAAK~~,CAAC,CAAC;~~SACnB~~;~~aAAM;YACL~~,~~UAAU~~,~~CAAC,~~IAAI,CAAC,CAAC;~~SAClB;IACH~~,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;~~IAErB~~,~~OAAO~~,~~CACL~~,~~MAAC~~,IAAI,~~IAAC~~,SAAS,~~EAAE~~,~~EAAE,~~OAAO,EAAE,QAAQ,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,EAAE,~~cAAc~~,~~aAC7E,~~IAAI,CAAC,SAAS,~~KAAK~~,~~QAAQ,~~IAAI,~~KAAC~~,~~MAAM~~,~~IAAC~~,~~OAAO~~,~~EAAE~~,~~WAAW~~,~~8BAAwB~~,~~EACnF~~,IAAI,CAAC,SAAS,KAAK,~~QAAQ~~,~~IAAI~~,~~KAAC~~,IAAI,~~gCAAqB~~,~~EAC1D~~,~~KAAC~~,~~QAAQ~~,~~IACP~~,~~OAAO~~,EAAE,IAAI,CAAC,OAAO,~~EACrB~~,SAAS,EAAE,IAAI,CAAC,SAAS,~~EACzB~~,OAAO,~~EAAE~~,IAAI,CAAC,~~OAAO~~,~~EACrB~~,OAAO,~~EAAE~~,~~OAAO~~,~~GAChB~~,~~IACG~~,~~CACR~~,CAAC~~;AACJ~~,CAAC,CAAC;~~AAEF~~,~~qBAAqB~~,CAAC,~~IAAI~~,~~GAAG~~;~~IAC3B~~,~~OAAO~~,~~EAAE~~,SAAS;~~CACnB~~,CAAC;~~AAEF~~,~~MAAM~~,CAAC,MAAM,~~mBAAmB~~,~~GAAyB,~~CAAC,~~IAAmB~~,~~EAAE~~,~~EAAE;IAC/E~~,~~MAAM~~,CAAC,~~OAAO~~,~~EAAE~~,~~UAAU~~,CAAC,~~GAAG~~,~~QAAQ~~,CAAC,KAAK,CAAC,CAAC;~~IAE9C~~,~~MAAM~~,~~WAAW~~,GAAG,GAAG~~,EAAE~~;~~QACvB~~,~~UAAU~~,CAAC,IAAI,CAAC,CAAC~~;QAEjB~~,~~UAAU~~,~~CAAC,~~GAAG,EAAE~~;YACd~~,~~UAAU~~,CAAC,~~KAAK~~,CAAC,CAAC~~;QACpB~~,CAAC,~~EAAE~~,~~IAAI~~,CAAC,CAAC;~~IACX~~,CAAC,CAAC~~;IAEF~~,~~SAAS~~,CAAC,~~GAAG~~,~~EAAE~~;~~QACb~~,~~IAAI~~,~~IAAI~~,CAAC,~~SAAS~~,~~KAAK~~,~~QAAQ~~,EAAE;~~YAC/B~~,~~UAAU~~,CAAC,~~KAAK~~,CAAC,CAAC;~~SACnB~~;~~aAAM;YACL~~,~~UAAU~~,CAAC,~~IAAI~~,CAAC,CAAC;~~SAClB;IACH~~,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;~~IAErB~~,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,~~OAAO~~,EAAE,QAAQ,EAAE,~~UAAU~~,EAAE,~~QAAQ~~,EAAE,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~cAAc~~,~~aAC7E~~,IAAI,~~CAAC~~,~~SAAS~~,~~KAAK~~,~~QAAQ~~,~~IAAI~~,~~KAAC~~,~~MAAM~~,~~IAAC~~,OAAO,~~EAAE~~,~~WAAW~~,~~8BAAwB~~,~~EACnF~~,IAAI,CAAC,SAAS,~~KAAK~~,~~QAAQ~~,IAAI,KAAC,IAAI,~~gCAAqB~~,~~EAC1D~~,~~KAAC~~,~~QAAQ~~,~~IACP~~,KAAK,~~EAAE~~,IAAI,~~CAAC~~,~~KAAK~~,~~EACjB~~,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,~~OAAO~~,IAAI,~~GAAG,~~IAAI,CAAC,KAAK,~~GAAG,EACzC,~~OAAO,~~EAAE~~,~~OAAO~~,~~GAChB~~,~~IACG~~,~~CACR,~~CAAC~~;AACJ~~,CAAC,CAAC~~;AAEF~~,~~mBAAmB~~,~~CAAC~~,~~IAAI~~,~~GAAG;IACzB~~,~~KAAK~~,~~EAAE~~,EAAE~~;CACV~~,CAAC~~;AAEF~~,~~mBAAmB~~,CAAC,QAAQ,~~GAAG;IAC7B~~,~~KAAK~~,~~EAAE~~,EAAE,~~OAAO~~,EAAE,EAAE,~~IAAI~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~EAAE~~;~~CACvC~~,CAAC;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC;aACF;SACF,YAED,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAC9E,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,SAAG,GAC1E,GACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { ~~Meta~~, ~~Story~~ } from '~~@storybook/~~react';\nimport { ~~useEffect~~, ~~useState~~ } from 'react';\n\nimport {~~\n Button,\n~~ Configuration~~,\n~~ Flex~~,\n~~ Progress~~,\n~~ ProgressProps~~,\n~~ Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n excludeStories: ['ConfigurableProgress'],\n args: {\n variant: 'ring',\n placement: 'local',\n message: ''\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const ~~IndeterminateProgress~~: Story<~~ProgressProps~~> = (args: ~~ProgressProps~~) => {\n const [~~loading~~, ~~setLoading~~] = useState(~~false~~);\n\n const ~~handleClick~~ = () => {\n ~~setLoading~~(~~true~~);\n~~\n setTimeout~~(() => {\n ~~setLoading~~(~~false~~);\n }, ~~2000)~~;\n };\n\n useEffect(() => {\n if (args.~~placement~~ ~~===~~ '~~global~~') {\n ~~setLoading~~(~~false~~);\n } ~~else~~ {\n ~~setLoading~~(~~true~~);\n }\n }, [args.~~placement~~]);\n\n ~~return~~ (\n ~~<Flex~~ ~~container={{~~ ~~justify:~~ '~~center~~', ~~alignItems:~~ ~~'center'~~ }} ~~as={StyledDemoWrap}>\n {~~args.~~placement~~ === '~~global~~' && ~~<Button~~ ~~onClick={handleClick}>Start~~ ~~loading</Button>}\~~n ~~{args.placement~~ ~~===~~ ~~'inline'~~ && ~~<Text>Progress~~ ~~demo</Text>}~~\n ~~<Progress\n variant={~~args.~~variant}\n placement=~~{~~args.placement}~~\n message={~~args.message}~~\n ~~visible={loading}\~~n ~~/>\n </Flex>\n~~ );\n};\n\~~nIndeterminateProgress.args = {\~~n ~~message:~~ '~~Loading~~'\n~~};\n\nexport~~ ~~const~~ ~~DeterminateProgress: Story~~<~~ProgressProps>~~ = (~~args:~~ ~~ProgressProps)~~ => {\n ~~const~~ ~~[loading, setLoading] = useState~~(~~false~~);\n\n ~~const~~ ~~handleClick~~ ~~= () =>~~ {\n ~~setLoading~~(~~true~~);\n\n ~~setTimeout(() => {~~\n ~~setLoading(false)~~;\n }, ~~2000~~);\n ~~};\n~~\n ~~useEffect(() => {\n~~ if (~~args.placement === 'global'~~) {\n ~~setLoading~~(~~false~~);\n } ~~else {~~\n ~~setLoading~~(~~true~~);\n ~~}\n~~ }, [args.~~placement~~]);\n\n return (\n <Flex container={{ ~~justify~~: '~~center~~', ~~alignItems~~: ~~'center'~~ }} as={StyledDemoWrap}>\n {args.placement ~~===~~ '~~global~~' && <~~Button~~ ~~onClick={handleClick}>Start~~ ~~loading~~</~~Button>~~}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n ~~value={args.value}\n~~ variant={args.variant}\n placement={args.placement}\n message={args.~~message~~ \|\| ~~`${~~args.value}~~%`}~~\n visible={~~loading~~}\n ~~/>\n </Flex>\n );\n};\n\nDeterminateProgress.args~~ = {\n ~~value: 67\n};\n\nDeterminateProgress.argTypes~~ = {~~\n value:~~ { ~~control:~~ { ~~type~~: '~~number~~' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Flex, Progress, ProgressProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n excludeStories: ['ConfigurableProgress'],\n args: {\n variant: 'ring',\n placement: 'local',\n message: '',\n determinate: false,\n value: 67,\n focusOnVisible: false,\n visible: true,\n announce: false,\n cycleProp: 'none'\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } },\n focusOnVisible: { control: { type: 'boolean' } },\n determinate: { control: { type: 'boolean' } },\n value: { control: { type: 'number' } },\n visible: { control: { type: 'boolean' } },\n announce: { control: { type: 'boolean' } },\n cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n }\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n announce?: boolean;\n determinate?: boolean;\n focusOnVisible?: boolean;\n cycleProp?: 'none' \| 'value' \| 'message' \| 'visible';\n}\n\nexport const ProgressDemo: Story<ProgressDemoProps> = (args: ProgressDemoProps) => {\n const cycling = args.cycleProp !== 'none';\n const [visible, setVisible] = useState(args.visible);\n const [value, setValue] = useState(args.value ?? 0);\n const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n const [messageIndex, setMessageIndex] = useState(0);\n const message = useMemo(() => {\n if (args.cycleProp === 'message') {\n return messages[messageIndex];\n }\n\n return args.message;\n }, [args.cycleProp, args.message, messageIndex]);\n\n useEffect(() => {\n if (args.cycleProp !== 'value') {\n setValue(args.value ?? 0);\n }\n }, [args.cycleProp, args.value]);\n\n useEffect(() => {\n if (args.cycleProp !== 'visible') {\n setVisible(args.visible);\n }\n }, [args.cycleProp, args.visible]);\n\n useEffect(() => {\n if (args.cycleProp === 'none') return;\n\n const duration = args.cycleProp === 'value' ? 2000 : 3000;\n const timeout = setTimeout(() => {\n switch (args.cycleProp) {\n case 'message': {\n if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n else setMessageIndex(0);\n break;\n }\n case 'value': {\n if (value < 100) setValue(Math.min(value + 10, 100));\n else setValue(0);\n break;\n }\n case 'visible': {\n setVisible(!visible);\n break;\n }\n default:\n break;\n }\n }, duration);\n\n if (!cycling) {\n clearTimeout(timeout);\n }\n\n return () => clearTimeout(timeout);\n }, [args.cycleProp, message, visible, value, cycling]);\n\n return (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h1'>Demo Content</Text>\n\n <StyledDemoWrap>\n {['block', 'local'].includes(args.placement \|\| '') && (\n <Text>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n </Text>\n )}\n {args.placement === 'inline' && <Text>Progress demo </Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={message}\n value={args.determinate \|\| args.cycleProp === 'value' ? value : undefined}\n visible={visible}\n focusOnVisible={args.focusOnVisible}\n liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n />\n </StyledDemoWrap>\n </Flex>\n );\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}

package/lib/core/Progress/Progress.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,~~yGAQzB~~,CAAC"}
1	+ {"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,yGASzB,CAAC"}

package/lib/core/Progress/Progress.styles.js CHANGED Viewed

@@ -4,9 +4,10 @@ export const StyledDemoWrap = styled.div(({ theme }) => {
     return css `
     position: relative;
     width: 50vw;
-    height: 15vh;
+    min-height: 15vh;
     background: ${theme.base.palette['primary-background']};
     border: 0.0625rem solid ${theme.base.palette['border-line']};
+    padding: calc(2 * ${theme.base.spacing});
   `;
 });
 StyledDemoWrap.defaultProps = defaultThemeProp;

package/lib/core/Progress/Progress.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;;;kBAIM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;8BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;~~GAC5D~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledDemoWrap = styled.div(({ theme }) => {\n return css`\n position: relative;\n width: 50vw;\n height: 15vh;\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\n\nStyledDemoWrap.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;;;kBAIM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;8BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBACvC,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledDemoWrap = styled.div(({ theme }) => {\n return css`\n position: relative;\n width: 50vw;\n min-height: 15vh;\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledDemoWrap.defaultProps = defaultThemeProp;\n"]}

package/lib/core/QRCode/QRCode.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface QRCodeDemoProps {
+    value: string;
+    label: string;
+}
+export declare const QRCodeDemo: Story<QRCodeDemoProps>;
+//# sourceMappingURL=QRCode.stories.d.ts.map

package/lib/core/QRCode/QRCode.stories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"QRCode.stories.d.ts","sourceRoot":"","sources":["../../../src/core/QRCode/QRCode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAWU;AAEV,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAE7C,CAAC"}

package/lib/core/QRCode/QRCode.stories.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QRCode } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/QRCode',
+    component: QRCode,
+    args: {
+        value: 'QRCode Demo',
+        label: 'QRCode'
+    },
+    argTypes: {
+        value: { type: 'string' },
+        label: { type: 'string' }
+    }
+};
+export const QRCodeDemo = (args) => {
+    return _jsx(QRCode, { value: args.value, label: args.label });
+};
+//# sourceMappingURL=QRCode.stories.js.map

package/lib/core/QRCode/QRCode.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"QRCode.stories.js","sourceRoot":"","sources":["../../../src/core/QRCode/QRCode.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACzB,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC1B;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,UAAU,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC1E,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { QRCode } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/QRCode',\n component: QRCode,\n args: {\n value: 'QRCode Demo',\n label: 'QRCode'\n },\n argTypes: {\n value: { type: 'string' },\n label: { type: 'string' }\n }\n} as Meta;\n\ninterface QRCodeDemoProps {\n value: string;\n label: string;\n}\n\nexport const QRCodeDemo: Story<QRCodeDemoProps> = (args: QRCodeDemoProps) => {\n return <QRCode value={args.value} label={args.label} />;\n};\n"]}

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

@@ -35,7 +35,7 @@ export const EnhancedSearchInputDemo = () => {
                 }));
             }
             setLoading(false);
-        }, 1000);
+        }, 2200);
     };
     return (_jsx(SearchInput, { filters: ['Story', 'Very long filter'], loading: loading, searchResults: searchResults?.map(result => ({
             ...result,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACjG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,EACH,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,aAAa,EAC7B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,EAAE,IAAI,EAAE,uDAAuD,EAAE,GACrF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n const [value, setValue] = useState('');\n return (\n <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n );\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n const [value, setValue] = useState('');\n const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n const [loading, setLoading] = useState(false);\n const timeout = useRef<number \| null>(null);\n const onValueChange = (val: string) => {\n setValue(val);\n setLoading(true);\n setSearchResults([]);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = window.setTimeout(() => {\n if (val) {\n setSearchResults(\n mockSearchResults.filter(res => {\n return res.primary.toLowerCase().includes(val.toLowerCase());\n })\n );\n }\n setLoading(false);\n }, ~~1000~~);\n };\n\n return (\n <SearchInput\n filters={['Story', 'Very long filter']}\n loading={loading}\n searchResults={searchResults?.map(result => ({\n ...result,\n onClick: (id, e) => e.preventDefault()\n }))}\n value={value}\n onSearchChange={onValueChange}\n recentSearches={recentSearches}\n advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACjG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,EACH,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,aAAa,EAC7B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,EAAE,IAAI,EAAE,uDAAuD,EAAE,GACrF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n const [value, setValue] = useState('');\n return (\n <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n );\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n const [value, setValue] = useState('');\n const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n const [loading, setLoading] = useState(false);\n const timeout = useRef<number \| null>(null);\n const onValueChange = (val: string) => {\n setValue(val);\n setLoading(true);\n setSearchResults([]);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = window.setTimeout(() => {\n if (val) {\n setSearchResults(\n mockSearchResults.filter(res => {\n return res.primary.toLowerCase().includes(val.toLowerCase());\n })\n );\n }\n setLoading(false);\n }, 2200);\n };\n\n return (\n <SearchInput\n filters={['Story', 'Very long filter']}\n loading={loading}\n searchResults={searchResults?.map(result => ({\n ...result,\n onClick: (id, e) => e.preventDefault()\n }))}\n value={value}\n onSearchChange={onValueChange}\n recentSearches={recentSearches}\n advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n />\n );\n};\n"]}