npm - @pega/cosmos-react-demos - Versions diffs - 4.1.1 → 5.0.0-dev.10.0 - Mend

@pega/cosmos-react-demos 4.1.1 → 5.0.0-dev.10.0

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 (984) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,SAAS,EACT,SAAS,~~EAET~~,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;~~AAqBjC~~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","sourcesContent":["import {\n createUID,\n DateInput,\n ~~FieldGroupListItemProps,\n~~ FileInput,\n Input,\n Option,\n Select,\n TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n \| {\n action: 'add';\n }\n \| {\n action: 'delete';\n id: string;\n };\n\nexport interface FieldMeta {\n label: string;\n type: 'text' \| 'date' \| 'file' \| 'select' \| 'textarea';\n}\n\nexport interface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element \| null) =>\n (\n items: FieldGroupListItemProps[],\n payload: FieldGroupReducerPayload\n ): FieldGroupListItemProps[] => {\n switch (payload.action) {\n case 'add':\n return [\n ...items,\n {\n name: `${groupMeta.label} ${items.length + 1}`,\n headingTag: 'h3',\n id: createUID(),\n children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n }\n ];\n\n case 'delete':\n return items\n .filter(group => group.id !== payload.id)\n .map((group, i) => ({\n ...group,\n name: `${groupMeta.label} ${i + 1}`,\n headingTag: 'h3'\n }));\n\n default:\n return items;\n }\n };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} key={label} />;\n }\n\n return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Advertising</Option>\n <Option>Car and truck expenses</Option>\n <Option>Commissions and fees</Option>\n <Option>Contract labor</Option>\n <Option>Legal and professional services</Option>\n <Option>Office expense</Option>\n <Option>Rent or lease</Option>\n <Option>Vehicles, machinery, and equipment</Option>\n <Option>Repairs and maintenance</Option>\n <Option>Travel and meals</Option>\n <Option>Deductible meals</Option>\n <Option>Utilities</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n if (type === 'file') {\n return <FileInput label={label} multiple />;\n }\n if (type === 'textarea') {\n return <TextArea label={label} />;\n }\n if (type === 'date') {\n return <DateInput label={label} />;\n }\n\n return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n label: 'Expense',\n fields: [\n { type: 'select', label: 'Type of expense' },\n { type: 'date', label: 'Date of expense' },\n { type: 'file', label: 'Receipts' },\n { type: 'textarea', label: 'Notes' }\n ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Mother</Option>\n <Option>Father</Option>\n <Option>Guardian</Option>\n <Option>Child</Option>\n <Option>Spouse</Option>\n <Option>Sibling</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n\n return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n label: 'Entry',\n fields: [\n { type: 'text', label: 'First name' },\n { type: 'text', label: 'Last name' },\n { type: 'select', label: 'Relationship' }\n ]\n};\n"]}
1	+ {"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createUID,\n DateInput,\n FileInput,\n Input,\n Option,\n Select,\n TextArea\n} from '@pega/cosmos-react-core';\nimport type { FieldGroupListItemProps } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n \| {\n action: 'add';\n }\n \| {\n action: 'delete';\n id: string;\n };\n\nexport interface FieldMeta {\n label: string;\n type: 'text' \| 'date' \| 'file' \| 'select' \| 'textarea';\n}\n\nexport interface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element \| null) =>\n (\n items: FieldGroupListItemProps[],\n payload: FieldGroupReducerPayload\n ): FieldGroupListItemProps[] => {\n switch (payload.action) {\n case 'add':\n return [\n ...items,\n {\n name: `${groupMeta.label} ${items.length + 1}`,\n headingTag: 'h3',\n id: createUID(),\n children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n }\n ];\n\n case 'delete':\n return items\n .filter(group => group.id !== payload.id)\n .map((group, i) => ({\n ...group,\n name: `${groupMeta.label} ${i + 1}`,\n headingTag: 'h3'\n }));\n\n default:\n return items;\n }\n };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} key={label} />;\n }\n\n return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Advertising</Option>\n <Option>Car and truck expenses</Option>\n <Option>Commissions and fees</Option>\n <Option>Contract labor</Option>\n <Option>Legal and professional services</Option>\n <Option>Office expense</Option>\n <Option>Rent or lease</Option>\n <Option>Vehicles, machinery, and equipment</Option>\n <Option>Repairs and maintenance</Option>\n <Option>Travel and meals</Option>\n <Option>Deductible meals</Option>\n <Option>Utilities</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n if (type === 'file') {\n return <FileInput label={label} multiple />;\n }\n if (type === 'textarea') {\n return <TextArea label={label} />;\n }\n if (type === 'date') {\n return <DateInput label={label} />;\n }\n\n return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n label: 'Expense',\n fields: [\n { type: 'select', label: 'Type of expense' },\n { type: 'date', label: 'Date of expense' },\n { type: 'file', label: 'Receipts' },\n { type: 'textarea', label: 'Notes' }\n ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Mother</Option>\n <Option>Father</Option>\n <Option>Guardian</Option>\n <Option>Child</Option>\n <Option>Spouse</Option>\n <Option>Sibling</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n\n return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n label: 'Entry',\n fields: [\n { type: 'text', label: 'First name' },\n { type: 'text', label: 'Last name' },\n { type: 'select', label: 'Relationship' }\n ]\n};\n"]}

package/lib/core/File/FileDisplay.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAEpG,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CAmK1D,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,GAAG,oBAAoB,~~CAyB5E~~,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CA2B/D,CAAC"}
1	+ {"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAEpG,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CAmK1D,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,gBAAgB,GAAG,oBAAoB,CA0B5E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CA2B/D,CAAC"}

package/lib/core/File/FileDisplay.stories.js CHANGED Viewed

@@ -101,7 +101,9 @@ export const FileDisplayDemo = (args) => {
     const handleDownload = args.withDownload
         ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const imageSrc = args.withPreview
+        ? 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg'
+        : 'https://pega.com/media/compress.zip';
     return (_jsx(FileDisplay, { variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }));
 };
 FileDisplayDemo.args = {

package/lib/core/File/FileDisplay.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { FileDisplay, FieldValueList, useToaster, FileUploadItem } from '@pega/cosmos-react-core';\nimport type { FileDisplayProps, FileItemProps, FileUploadItemProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/File/Display',\n component: FileDisplay,\n args: {\n withValue: true,\n withPreview: true,\n withDownload: true\n },\n argTypes: {\n withValue: { control: { type: 'boolean' } },\n withPreview: { control: { type: 'boolean' } },\n withDownload: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n withDisplayText?: boolean;\n withValue?: boolean;\n withPreview?: boolean;\n withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: StoryFn<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n const fields = [\n {\n id: '1',\n name: 'Image file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '1',\n name: 'Image file with thumbnail',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '2',\n name: 'Video file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'video.avi' : undefined}\n value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '3',\n name: 'Audio file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '4',\n name: 'Document file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'document.doc' : undefined}\n value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '5',\n name: 'PDF file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '6',\n name: 'Presentation file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'review.pps' : undefined}\n value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '7',\n name: 'Spreadsheet file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '8',\n name: 'Email',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'message.eml' : undefined}\n value={args.withValue ? 'https://pega.com/media/message.eml' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '9',\n name: 'Database',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'data.odb' : undefined}\n value={args.withValue ? 'https://pega.com/media/data.odb' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '10',\n name: 'Zip file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'compress.zip' : undefined}\n value={args.withValue ? 'https://pega.com/media/compress.zip' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '11',\n name: 'Unknown file type',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'foo.xyz' : undefined}\n value={args.withValue ? 'https://pega.com/media/foo.xyz' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n }\n ];\n\n return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: StoryFn<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n return (\n <FileDisplay\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileDisplayDemo.args = {\n variant: 'file',\n displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n name: FileUploadItemProps['name'];\n meta?: FileUploadItemProps['meta'];\n error?: FileUploadItemProps['error'];\n progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: StoryFn<FileUploadItemDemoProps> = (\n args: FileUploadItemDemoProps\n) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n return (\n <FileUploadItem\n name={args.name}\n meta={args.meta}\n error={args.error}\n progress={args.progress}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileUploadItemDemo.args = {\n name: 'Pega World iNspire',\n meta: 'Some additional information',\n error: false,\n progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n withValue: { table: { disable: true } },\n name: { control: { type: 'text' } },\n meta: { control: { type: 'text' } },\n error: { control: { type: 'boolean' } },\n progress: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { FileDisplay, FieldValueList, useToaster, FileUploadItem } from '@pega/cosmos-react-core';\nimport type { FileDisplayProps, FileItemProps, FileUploadItemProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/File/Display',\n component: FileDisplay,\n args: {\n withValue: true,\n withPreview: true,\n withDownload: true\n },\n argTypes: {\n withValue: { control: { type: 'boolean' } },\n withPreview: { control: { type: 'boolean' } },\n withDownload: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n withDisplayText?: boolean;\n withValue?: boolean;\n withPreview?: boolean;\n withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: StoryFn<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n const fields = [\n {\n id: '1',\n name: 'Image file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '1',\n name: 'Image file with thumbnail',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'image.jpg' : undefined}\n value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '2',\n name: 'Video file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'video.avi' : undefined}\n value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '3',\n name: 'Audio file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '4',\n name: 'Document file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'document.doc' : undefined}\n value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '5',\n name: 'PDF file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '6',\n name: 'Presentation file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'review.pps' : undefined}\n value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '7',\n name: 'Spreadsheet file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '8',\n name: 'Email',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'message.eml' : undefined}\n value={args.withValue ? 'https://pega.com/media/message.eml' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '9',\n name: 'Database',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'data.odb' : undefined}\n value={args.withValue ? 'https://pega.com/media/data.odb' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '10',\n name: 'Zip file',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'compress.zip' : undefined}\n value={args.withValue ? 'https://pega.com/media/compress.zip' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n },\n {\n id: '11',\n name: 'Unknown file type',\n value: (\n <FileDisplay\n displayText={args.withDisplayText ? 'foo.xyz' : undefined}\n value={args.withValue ? 'https://pega.com/media/foo.xyz' : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n )\n }\n ];\n\n return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: StoryFn<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc = args.withPreview\n ? 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg'\n : 'https://pega.com/media/compress.zip';\n\n return (\n <FileDisplay\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileDisplayDemo.args = {\n variant: 'file',\n displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n name: FileUploadItemProps['name'];\n meta?: FileUploadItemProps['meta'];\n error?: FileUploadItemProps['error'];\n progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: StoryFn<FileUploadItemDemoProps> = (\n args: FileUploadItemDemoProps\n) => {\n const { push } = useToaster();\n\n const handlePreview = args.withPreview\n ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n : undefined;\n\n const handleDownload = args.withDownload\n ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n : undefined;\n\n const imageSrc =\n 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n return (\n <FileUploadItem\n name={args.name}\n meta={args.meta}\n error={args.error}\n progress={args.progress}\n thumbnail={imageSrc}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n );\n};\n\nFileUploadItemDemo.args = {\n name: 'Pega World iNspire',\n meta: 'Some additional information',\n error: false,\n progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n withValue: { table: { disable: true } },\n name: { control: { type: 'text' } },\n meta: { control: { type: 'text' } },\n error: { control: { type: 'boolean' } },\n progress: { control: { type: 'number' } }\n};\n"]}

package/lib/core/File/FileInput.stories.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 interface FileInputStoryProps extends FileInputProps {
     sizeLimit?: number;
+    showAdditionalInfo?: boolean;
 }
 export declare const FileInputDemo: StoryFn<FileInputStoryProps>;
 //# sourceMappingURL=FileInput.stories.d.ts.map

package/lib/core/File/FileInput.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAI9D,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;~~CACpB~~;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,mBAAmB,~~CA+EtD~~,CAAC"}
1	+ {"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAI9D,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,mBAAmB,CAsGtD,CAAC"}

package/lib/core/File/FileInput.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo, useCallback, useRef, useContext } from 'react';
-import { FileInput, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import { FileServiceContext } from '../../work/CaseView/FileService.mock';
+import { FileInput, createUID, useAfterInitialEffect, Flex, Link } from '@pega/cosmos-react-core';
+import { FileServiceContext } from './FileService.mock';
 export default {
     title: 'Core/File/Input',
     component: FileInput
@@ -46,7 +46,7 @@ export const FileInputDemo = (args) => {
             ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }))
             : null;
     }, [hasError]);
-    return (_jsx(FileInput, { label: args.label, labelHidden: args.labelHidden, multiple: args.multiple, status: hasError ? 'error' : undefined, info: info, required: args.required, disabled: args.disabled, onFilesAdded: onFilesAdded, files: files.map(file => {
+    return (_jsx(FileInput, { label: args.label, labelHidden: args.labelHidden, multiple: args.multiple, status: hasError ? 'error' : args.status, info: info || args.info, required: args.required, disabled: args.disabled, onFilesAdded: onFilesAdded, files: files.map(file => {
             return {
                 ...file,
                 onCancel: undefined,
@@ -57,22 +57,35 @@ export const FileInputDemo = (args) => {
                 }
             };
             return file;
-        }) }));
+        }), additionalInfo: args.showAdditionalInfo
+            ? {
+                content: (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida." }), _jsx("p", { children: "Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus." }), _jsx(Link, { href: '/', target: '_blank', children: "Neque vitae" })] }))
+            }
+            : undefined }));
 };
 FileInputDemo.args = {
     multiple: true,
     sizeLimit: 100,
     label: 'File input label',
     labelHidden: false,
+    info: '',
+    status: undefined,
     required: false,
-    disabled: false
+    disabled: false,
+    showAdditionalInfo: false
 };
 FileInputDemo.argTypes = {
     multiple: { control: { type: 'boolean' } },
     sizeLimit: { control: { type: 'number' } },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: {
+        options: [undefined, 'success', 'warning', 'error', 'pending'],
+        control: { type: 'select' }
+    },
     required: { control: { type: 'boolean' } },
-    disabled: { control: { type: 'boolean' } }
+    disabled: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=FileInput.stories.js.map

package/lib/core/File/FileInput.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;~~AAGtF~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,~~sCAAsC~~,CAAC;~~AAE1E~~,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;CACb,CAAC;~~AAMV~~,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,IAAyB,EAAE,EAAE;IACvF,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC;IAExC,8EAA8E;IAC9E,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,UAAkB,EAAE,EAAE;QACrB,SAAS,CAAC,OAAO,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC;QAEvD,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACrC,IAAI,WAAW,GAAG,IAAI,CAAC;YAEvB,IAAI,CAAC,CAAC,IAAI,GAAG,OAAO,GAAG,SAAS,EAAE;gBAChC,SAAS,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,CAAC;gBACnC,WAAW,GAAG,KAAK,CAAC;aACrB;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAEjD,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAU,EAAE,EAAE;YAC9B,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YACvB,UAAU,CAAC;gBACT,EAAE;gBACF,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;gBAChF,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,EAAE;gBACZ,IAAI;gBACJ,QAAQ,EAAE,GAAG,EAAE;oBACb,UAAU,CAAC,EAAE,CAAC,CAAC;gBACjB,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,QAAQ;YACb,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,IAAI,CACnC,wBAAM,+BAA+B,SAAS,IAAI,GAAO,CAC1D;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,~~SAAS~~,~~EACtC~~,IAAI,EAAE,IAAI,~~EACV~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACtB,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,SAAS;gBACnB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;gBACnB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;gBACpB,QAAQ,EAAE,GAAG,EAAE;oBACb,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;YAEF,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,~~GACF~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~CAC3C~~,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport { FileInput, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';\nimport type { FileInputProps } from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from '~~../../work/CaseView/~~FileService.mock';\n\nexport default {\n title: 'Core/File/Input',\n component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n sizeLimit?: number;\n}\n\nexport const FileInputDemo: StoryFn<FileInputStoryProps> = (args: FileInputStoryProps) => {\n const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n const [hasError, setHasError] = useState(false);\n\n const sizeLimit = args.sizeLimit \|\| 100;\n\n // Fires anytime files are added to the input either through selection or drop\n const onFilesAdded = useCallback(\n (addedFiles: File[]) => {\n errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n const newFiles = addedFiles.filter(f => {\n let isValidSize = true;\n\n if (f.size / 1000000 > sizeLimit) {\n errCounts.current.invalidSize += 1;\n isValidSize = false;\n }\n\n return isValidSize;\n });\n\n setHasError(newFiles.length < addedFiles.length);\n\n newFiles.forEach((File: File) => {\n const id = createUID();\n attachFile({\n id,\n thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n name: File.name,\n category: '',\n File,\n onCancel: () => {\n cancelFile(id);\n }\n });\n });\n },\n [attachFile, deleteFile]\n );\n\n useAfterInitialEffect(() => {\n if (files.length === 0) setHasError(false);\n }, [files.length]);\n\n const info = useMemo(() => {\n return hasError\n ? errCounts.current.invalidSize > 0 && (\n <div>{`File size must be less than ${sizeLimit}MB`}</div>\n )\n : null;\n }, [hasError]);\n\n return (\n <FileInput\n label={args.label}\n labelHidden={args.labelHidden}\n multiple={args.multiple}\n status={hasError ? 'error' : ~~undefined~~}\n info={info}\n required={args.required}\n disabled={args.disabled}\n onFilesAdded={onFilesAdded}\n files={files.map(file => {\n return {\n ...file,\n onCancel: undefined,\n onPreview: () => {},\n onDownload: () => {},\n onDelete: () => {\n deleteFile(file.id);\n }\n };\n\n return file;\n })}\n />\n );\n};\n\nFileInputDemo.args = {\n multiple: true,\n sizeLimit: 100,\n label: 'File input label',\n labelHidden: false,\n required: false,\n disabled: false\n};\n\nFileInputDemo.argTypes = {\n multiple: { control: { type: 'boolean' } },\n sizeLimit: { control: { type: 'number' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport { FileInput, createUID, useAfterInitialEffect, Flex, Link } from '@pega/cosmos-react-core';\nimport type { FileInputProps } from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from './FileService.mock';\n\nexport default {\n title: 'Core/File/Input',\n component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n sizeLimit?: number;\n showAdditionalInfo?: boolean;\n}\n\nexport const FileInputDemo: StoryFn<FileInputStoryProps> = (args: FileInputStoryProps) => {\n const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n const [hasError, setHasError] = useState(false);\n\n const sizeLimit = args.sizeLimit \|\| 100;\n\n // Fires anytime files are added to the input either through selection or drop\n const onFilesAdded = useCallback(\n (addedFiles: File[]) => {\n errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n const newFiles = addedFiles.filter(f => {\n let isValidSize = true;\n\n if (f.size / 1000000 > sizeLimit) {\n errCounts.current.invalidSize += 1;\n isValidSize = false;\n }\n\n return isValidSize;\n });\n\n setHasError(newFiles.length < addedFiles.length);\n\n newFiles.forEach((File: File) => {\n const id = createUID();\n attachFile({\n id,\n thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n name: File.name,\n category: '',\n File,\n onCancel: () => {\n cancelFile(id);\n }\n });\n });\n },\n [attachFile, deleteFile]\n );\n\n useAfterInitialEffect(() => {\n if (files.length === 0) setHasError(false);\n }, [files.length]);\n\n const info = useMemo(() => {\n return hasError\n ? errCounts.current.invalidSize > 0 && (\n <div>{`File size must be less than ${sizeLimit}MB`}</div>\n )\n : null;\n }, [hasError]);\n\n return (\n <FileInput\n label={args.label}\n labelHidden={args.labelHidden}\n multiple={args.multiple}\n status={hasError ? 'error' : args.status}\n info={info \|\| args.info}\n required={args.required}\n disabled={args.disabled}\n onFilesAdded={onFilesAdded}\n files={files.map(file => {\n return {\n ...file,\n onCancel: undefined,\n onPreview: () => {},\n onDownload: () => {},\n onDelete: () => {\n deleteFile(file.id);\n }\n };\n\n return file;\n })}\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nFileInputDemo.args = {\n multiple: true,\n sizeLimit: 100,\n label: 'File input label',\n labelHidden: false,\n info: '',\n status: undefined,\n required: false,\n disabled: false,\n showAdditionalInfo: false\n};\n\nFileInputDemo.argTypes = {\n multiple: { control: { type: 'boolean' } },\n sizeLimit: { control: { type: 'number' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/{work/CaseView → core/File}/FileService.mock.d.ts RENAMED Viewed

@@ -1,5 +1,5 @@
-import { ReactNode, FunctionComponent, Dispatch, SetStateAction } from 'react';
-import { FileUploadItemProps, OmitStrict } from '@pega/cosmos-react-core';
+import type { ReactNode, FunctionComponent, Dispatch, SetStateAction } from 'react';
+import type { FileUploadItemProps, OmitStrict } from '@pega/cosmos-react-core';
 export interface MockFileAttachmentResource {
     id: string;
     name: string;

package/lib/core/File/FileService.mock.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FileService.mock.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileService.mock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK/E,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,IAAI,GAAG,UAAU,CAAC,EACzD,UAAU,CAAC,mBAAmB,EAAE,IAAI,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;CACZ;AAKD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,CAAC,0BAA0B,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAC3D,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACrE,UAAU,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3D,UAAU,EAAE,CAAC,EAAE,EAAE,0BAA0B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CAC5D;AAKD,eAAO,MAAM,kBAAkB,kDAM7B,CAAC;AAuDH,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,CAAC,EAMzF,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO,QAAQ,0BAA0B,EAAE,CA+BhF,CAAC;AAKF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAwFxD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/core/File/FileService.mock.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FileService.mock.js","sourceRoot":"","sources":["../../../src/core/File/FileService.mock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useState, useCallback, useMemo } from 'react';\nimport type { ReactNode, FunctionComponent, Dispatch, SetStateAction } from 'react';\n\nimport { createUID, hasProp, useAfterInitialEffect } from '@pega/cosmos-react-core';\nimport type { FileUploadItemProps, OmitStrict } from '@pega/cosmos-react-core';\n\n// -----------------------------------------------------------------------------\n// MockFileResourceObject\n// -----------------------------------------------------------------------------\nexport interface MockFileAttachmentResource {\n id: string;\n name: string;\n category: string;\n thumbnail?: string;\n createDate?: number;\n modifiedDate?: number;\n}\n\n// -----------------------------------------------------------------------------\n// MockFileSelectionObject\n// -----------------------------------------------------------------------------\nexport interface MockFileUploadItem\n extends Pick<MockFileAttachmentResource, 'id' | 'category'>,\n OmitStrict<FileUploadItemProps, 'id'> {\n File: File;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContextValue\n// -----------------------------------------------------------------------------\nexport interface FileServiceContextValue {\n files: (MockFileAttachmentResource | MockFileUploadItem)[];\n setFiles: Dispatch<SetStateAction<FileServiceContextValue['files']>>;\n attachFile: (file: MockFileUploadItem) => void;\n cancelFile: (id: MockFileAttachmentResource['id']) => void;\n deleteFile: (id: MockFileAttachmentResource['id']) => void;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContext\n// -----------------------------------------------------------------------------\nexport const FileServiceContext = createContext<FileServiceContextValue>({\n files: [],\n setFiles: () => {},\n attachFile: () => {},\n cancelFile: () => {},\n deleteFile: () => {}\n});\n\n// -----------------------------------------------------------------------------\n// FilePostArg\n// -----------------------------------------------------------------------------\ninterface FilePostArg {\n file: MockFileUploadItem;\n onLoadStart: (file: MockFileUploadItem, progress: number) => void;\n onProgress: (file: MockFileUploadItem, progress: number) => void;\n onLoad: (file: MockFileUploadItem) => void;\n}\n\n// -----------------------------------------------------------------------------\n// uploadsInProgress\n// -----------------------------------------------------------------------------\nconst uploadsInProgress: Record<string, XMLHttpRequest> = {};\n\n// -----------------------------------------------------------------------------\n// postFile\n// -----------------------------------------------------------------------------\nconst postFile = ({ file, onLoadStart, onProgress, onLoad }: FilePostArg) => {\n const xhr = new XMLHttpRequest();\n const fd = new FormData();\n\n uploadsInProgress[file.id] = xhr;\n\n xhr.upload.onloadstart = () => {\n onLoadStart(file, 0);\n };\n\n xhr.upload.onprogress = ({ lengthComputable, loaded, total }) => {\n if (lengthComputable) {\n onProgress(file, (loaded / total) * 100);\n }\n };\n\n xhr.upload.onload = () => {\n onLoad(file);\n };\n\n // This is a mock api used to demo upload progress\n xhr.open('POST', 'http://cosmos.eng.pega.com/attachments');\n xhr.setRequestHeader('Content-Type', 'multipart/form-data');\n fd.append('attachments', file.File);\n xhr.send(fd);\n\n return xhr;\n};\n\n// Mock date generator\nconst getMockPriorDate = (h: number) => {\n const d = new Date();\n return d.setHours(d.getHours() - h);\n};\n\nexport const mockCategories: ('HR' | 'Marketing' | 'Sales' | 'Accounting' | 'Engineering')[] = [\n 'HR',\n 'Marketing',\n 'Sales',\n 'Accounting',\n 'Engineering'\n];\n\nexport const mockAttachmentListRequest = (): Promise<MockFileAttachmentResource[]> => {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve([\n {\n id: createUID(),\n name: 'File.doc',\n category: mockCategories[0],\n createDate: getMockPriorDate(1)\n },\n {\n id: createUID(),\n name: 'File.ppt',\n category: mockCategories[1],\n createDate: getMockPriorDate(4)\n },\n {\n id: createUID(),\n name: 'File.xls',\n category: mockCategories[2],\n createDate: getMockPriorDate(30)\n },\n {\n id: createUID(),\n name: 'emptyFile',\n category: '',\n createDate: getMockPriorDate(144)\n }\n ]);\n }, 1000);\n });\n};\n\n// -----------------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------------\nconst Provider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n const [files, setFiles] = useState<FileServiceContextValue['files']>([]);\n\n const attachFile = useCallback(\n (file: MockFileUploadItem) => {\n if (files.some(f => f.id === file.id)) return;\n setFiles(current => [file, ...current]);\n },\n [files]\n );\n\n // Remove a file from the state array\n const cancelFile = useCallback(\n (id: MockFileUploadItem['id']) => {\n if (uploadsInProgress[id]) {\n uploadsInProgress[id].abort();\n delete uploadsInProgress[id];\n }\n setFiles(current => current.filter(f => f.id !== id));\n },\n [uploadsInProgress]\n );\n\n // Mock an api request and remove a file from the state array\n const deleteFile = useCallback(\n async (id: MockFileUploadItem['id']) => {\n const file = files.find(f => f.id === id) as MockFileAttachmentResource;\n fetch(`http://cosmos.eng.pega.com/attachments/${file.id}`, { method: 'DELETE' }).then(() => {\n setFiles(current => current.filter(f => f.id !== file.id));\n });\n },\n [files]\n );\n\n const setProgress = useCallback((file: MockFileUploadItem, progress?: number) => {\n setFiles(current =>\n current.map(f => {\n if (file.id === f.id) {\n (f as MockFileUploadItem).progress = progress;\n }\n return f;\n })\n );\n }, []);\n\n useAfterInitialEffect(() => {\n files.forEach(file => {\n // Return if we have a mock attachment resource object or a File object that is currently uploading.\n if (!hasProp(file, 'File') || typeof file.progress === 'number') return;\n\n // For each File in the array, not uploaded yet, make a POST to the mock service.\n postFile({\n file,\n onLoadStart: setProgress,\n onProgress: setProgress,\n onLoad(loadedFile) {\n delete uploadsInProgress[loadedFile.id];\n\n setFiles(cur => {\n return cur.map(f => {\n if (f.id === loadedFile.id) {\n return {\n ...loadedFile,\n id: createUID(),\n createDate: Date.now()\n };\n }\n\n return f;\n });\n });\n }\n });\n });\n }, [files.length, setProgress]);\n\n const value: FileServiceContextValue = useMemo(\n () => ({\n files,\n setFiles,\n attachFile,\n cancelFile,\n deleteFile\n }),\n [files, attachFile, cancelFile, deleteFile]\n );\n\n return <FileServiceContext.Provider value={value}>{children}</FileServiceContext.Provider>;\n};\n\nexport default Provider;\n"]}

package/lib/core/File/MockFileInput.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core/lib/types';
+import type { FileInputProps } from '@pega/cosmos-react-core';
+declare const MockFileInput: FunctionComponent<FileInputProps & ForwardProps>;
+export default MockFileInput;
+//# sourceMappingURL=MockFileInput.d.ts.map

package/lib/core/File/MockFileInput.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MockFileInput.d.ts","sourceRoot":"","sources":["../../../src/core/File/MockFileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoBnE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/core/File/MockFileInput.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FileInput, createUID } from '@pega/cosmos-react-core';
+const MockFileInput = () => {
+    const [fileStore, setFileStore] = useState([]);
+    const addedFilesHandler = (addedFiles) => {
+        addedFiles.forEach((file) => {
+            const id = createUID();
+            setFileStore([
+                ...fileStore,
+                {
+                    id,
+                    thumbnail: file.type.startsWith('image') ? URL.createObjectURL(file) : undefined,
+                    name: file.name,
+                    category: '',
+                    File: file,
+                    onCancel: () => { }
+                }
+            ]);
+        });
+    };
+    return _jsx(FileInput, { files: fileStore, onFilesAdded: addedFilesHandler, label: 'File input label' });
+};
+export default MockFileInput;
+//# sourceMappingURL=MockFileInput.js.map

package/lib/core/File/MockFileInput.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MockFileInput.js","sourceRoot":"","sources":["../../../src/core/File/MockFileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAK/D,MAAM,aAAa,GAAqD,GAAG,EAAE;IAC3E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAuB,EAAE,CAAC,CAAC;IACrE,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC/C,UAAU,CAAC,OAAO,CAAC,CAAC,IAAU,EAAE,EAAE;YAChC,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YACvB,YAAY,CAAC;gBACX,GAAG,SAAS;gBACZ;oBACE,EAAE;oBACF,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;oBAChF,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,QAAQ,EAAE,EAAE;oBACZ,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;iBACnB;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,KAAK,EAAC,kBAAkB,GAAG,CAAC;AACnG,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport type { ForwardProps } from '@pega/cosmos-react-core/lib/types';\nimport { FileInput, createUID } from '@pega/cosmos-react-core';\nimport type { FileInputProps } from '@pega/cosmos-react-core';\n\nimport type { MockFileUploadItem } from './FileService.mock';\n\nconst MockFileInput: FunctionComponent<FileInputProps & ForwardProps> = () => {\n const [fileStore, setFileStore] = useState<MockFileUploadItem[]>([]);\n const addedFilesHandler = (addedFiles: File[]) => {\n addedFiles.forEach((file: File) => {\n const id = createUID();\n setFileStore([\n ...fileStore,\n {\n id,\n thumbnail: file.type.startsWith('image') ? URL.createObjectURL(file) : undefined,\n name: file.name,\n category: '',\n File: file,\n onCancel: () => {}\n }\n ]);\n });\n };\n\n return <FileInput files={fileStore} onFilesAdded={addedFilesHandler} label='File input label' />;\n};\n\nexport default MockFileInput;\n"]}

package/lib/core/Form/Form.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";~~AAkGA~~,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;~~wBA6IrB~~,CAAC;AAEF,eAAO,MAAM,mBAAmB;UAMxB,MAAM;iBACC,OAAO;;;~~wBAmHrB~~,CAAC"}
1	+ {"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AAgGA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBAiMrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;UAMxB,MAAM;iBACC,OAAO;;;wBAkKrB,CAAC"}

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

@@ -83,7 +83,28 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: false, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, required: true }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    } }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(Checkbox, { additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, label: 'Check me, please', required: true }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, required: true, children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        } }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -92,7 +113,10 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
+                        ], onImageAdded: onImageAdded, ref: editorRef, additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
 };
 export const ReadOnlyFormContent = ({ cols, heading, description, showActions }) => {
     const [value, setValue] = useState({ start: 1, end: '3' });
@@ -115,6 +139,27 @@ export const ReadOnlyFormContent = ({ cols, heading, description, showActions })
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { readOnly: true, name: 'name', label: 'Name', value: 'Test', required: false, status: name.status }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'places visited', label: 'Places you have worked', readOnly: true, children: [_jsx(Checkbox, { label: 'Cambridge' }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you really enjoy early morning meetings?', children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't", readOnly: true }, "No.. no I don't")] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'more places visited', label: 'More Places you have worked', children: [_jsx(Checkbox, { label: 'Cambridge', readOnly: true }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', readOnly: true, allReadOnly: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't" }, "No.. no I don't")] }) }), _jsxs(Select, { label: 'What would you like to eat?', info: '', readOnly: true, children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { selected: true, children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { readOnly: true, name: 'notes', required: false, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, value: 'Test copy' }) })] }) }));
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { readOnly: true, name: 'name', label: 'Name', value: 'Test', required: false, status: name.status, additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    } }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'places visited', label: 'Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, readOnly: true, required: true, children: [_jsx(Checkbox, { label: 'Cambridge' }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you really enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't", readOnly: true }, "No.. no I don't")] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(CheckboxGroup, { name: 'more places visited', label: 'More Places you have worked', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, required: true, children: [_jsx(Checkbox, { label: 'Cambridge', readOnly: true }, 'Cambridge'), _jsx(Checkbox, { label: 'Krakow' }, 'Krakow'), _jsx(Checkbox, { label: 'Hyderabad' }, 'Hyderabad'), _jsx(Checkbox, { label: 'Bangalore' }, 'Bangalore')] }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsxs(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        }, readOnly: true, allReadOnly: true, required: true, children: [_jsx(RadioButton, { label: 'Yes' }, 'Yes'), _jsx(RadioButton, { label: "No.. no I don't" }, "No.. no I don't")] }) }), _jsxs(Select, { label: 'What would you like to eat?', info: '', additionalInfo: {
+                        heading: 'Field info',
+                        content: 'Lorem ipsum dolor set amet.'
+                    }, readOnly: true, children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { selected: true, children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { readOnly: true, name: 'notes', required: false, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, value: 'Test copy', additionalInfo: {
+                            heading: 'Field info',
+                            content: 'Lorem ipsum dolor set amet.'
+                        } }) })] }) }));
 };
 //# sourceMappingURL=Form.mocks.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useState, useEffect } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n Form,\n FormControlProps,\n Grid,\n Input,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n useToaster,\n DateRangeInputProps,\n usePrevious\n} from '@pega/cosmos-react-core';\nimport {\n Editor as RichTextEditor,\n EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n help?: string;\n error?: string;\n validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n const common = { value: undefined, status: undefined };\n return [\n {\n ...common,\n name: 'name',\n required: true,\n error: 'Please enter first and last name',\n validator() {\n if (!this.value) return false;\n return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n }\n },\n {\n ...common,\n name: 'email',\n required: true,\n error: 'Enter a @pega.com address',\n validator() {\n if (!this.value) return false;\n return /^\\S+@pega\\.com$/.test(this.value);\n }\n },\n {\n ...common,\n name: 'notes',\n required: true,\n help: 'See how fast you can type 20 characters…go',\n error: 'You need to tell us more than 20 characters',\n validator() {\n if (!this.value) return false;\n return this.value.length >= 20;\n }\n }\n ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n fields: Field[],\n {\n target,\n type\n }:\n \| ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n \| FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\n) => {\n return fields.map(field => {\n if (field.name === target.name) {\n field.value = target.value;\n if (type === 'blur' \|\| field.status === 'error') {\n if ((field.required \|\| field.value) && !field.validator()) {\n field.status = 'error';\n field.info = field.error;\n } else {\n field.status = undefined;\n field.info = field.help;\n }\n }\n }\n return field;\n });\n};\n\nexport const FormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n name='name'\n label='Name'\n value={name.value}\n required={false}\n status={name.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n />\n\n <Input\n name='email'\n value={email.value}\n type='email'\n label='Email'\n required={email.required}\n status={email.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup name='visited' label='Places you have worked'>\n {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n {['Yes', \"No… no I don't\"].map(option => (\n <RadioButton\n key={option}\n label={option}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select label='What would you like to eat?' info='FYI: options are limited'>\n <Option>choose meal…</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name='notes'\n required={notes.required}\n label='Meeting notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RichTextEditor\n label='Detailed meeting notes'\n info='The rich text editor can be used in forms, comments, and documents'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n ref={editorRef}\n />\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <FileInputDemo label='Meeting attachments' />\n </Grid>\n\n <ComboboxFilterableStory label='Select a user' />\n </Grid>\n </Form>\n );\n};\n\nexport const ReadOnlyFormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const [value, setValue] = useState<DateRangeInputProps['value']>({ start: 1, end: '3' });\n const prev = usePrevious(value);\n useEffect(() => {\n if (prev !== value) setValue(value);\n }, [prev, value]);\n const [fields] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n readOnly\n name='name'\n label='Name'\n value='Test'\n required={false}\n status={name.status}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup name='places visited' label='Places you have worked' readOnly>\n <Checkbox key='Cambridge' label='Cambridge' />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup name='meetings' label='Do you really enjoy early morning meetings?'>\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" readOnly />\n </RadioButtonGroup>\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup name='more places visited' label='More Places you have worked'>\n <Checkbox key='Cambridge' label='Cambridge' readOnly />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you enjoy early morning meetings?'\n readOnly\n allReadOnly\n >\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" />\n </RadioButtonGroup>\n </Grid>\n\n <Select label='What would you like to eat?' info='' readOnly>\n <Option>choose meal…</Option>\n <Option selected>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n readOnly\n name='notes'\n required={false}\n label='Meeting notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n value='Test copy'\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n"]}
1	+ {"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, useRef, useState, useEffect } from 'react';\nimport type { ChangeEvent, FocusEvent, FormEvent } from 'react';\n\nimport {\n Button,\n Checkbox,\n CheckboxGroup,\n Form,\n Grid,\n Input,\n RadioButton,\n RadioButtonGroup,\n Select,\n Option,\n TextArea,\n useToaster,\n usePrevious\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps, DateRangeInputProps } from '@pega/cosmos-react-core';\nimport { Editor as RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { EditorState as RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n help?: string;\n error?: string;\n validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n const common = { value: undefined, status: undefined };\n return [\n {\n ...common,\n name: 'name',\n required: true,\n error: 'Please enter first and last name',\n validator() {\n if (!this.value) return false;\n return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n }\n },\n {\n ...common,\n name: 'email',\n required: true,\n error: 'Enter a @pega.com address',\n validator() {\n if (!this.value) return false;\n return /^\\S+@pega\\.com$/.test(this.value);\n }\n },\n {\n ...common,\n name: 'notes',\n required: true,\n help: 'See how fast you can type 20 characters…go',\n error: 'You need to tell us more than 20 characters',\n validator() {\n if (!this.value) return false;\n return this.value.length >= 20;\n }\n }\n ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n fields: Field[],\n {\n target,\n type\n }:\n \| ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>\n \| FocusEvent<HTMLInputElement \| HTMLTextAreaElement>\n) => {\n return fields.map(field => {\n if (field.name === target.name) {\n field.value = target.value;\n if (type === 'blur' \|\| field.status === 'error') {\n if ((field.required \|\| field.value) && !field.validator()) {\n field.status = 'error';\n field.info = field.error;\n } else {\n field.status = undefined;\n field.info = field.help;\n }\n }\n }\n return field;\n });\n};\n\nexport const FormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const editorRef = useRef<RichTextEditorState>(null);\n const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n name='name'\n label='Name'\n value={name.value}\n status={name.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n />\n\n <Input\n name='email'\n value={email.value}\n type='email'\n label='Email'\n required={email.required}\n status={email.status}\n info='some help text here'\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='visited'\n label='Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n <Checkbox\n key={office}\n label={office}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <Checkbox\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n label='Check me, please'\n required\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n {['Yes', \"No… no I don't\"].map(option => (\n <RadioButton\n key={option}\n label={option}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n />\n ))}\n </RadioButtonGroup>\n </Grid>\n\n <Select\n label='What would you like to eat?'\n info='FYI: options are limited'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n <Option>choose meal…</Option>\n <Option>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n name='notes'\n required={notes.required}\n label='Meeting notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RichTextEditor\n label='Detailed meeting notes'\n info='The rich text editor can be used in forms, comments, and documents'\n toolbar={[\n 'inline-styling',\n 'headers',\n 'tables',\n 'links',\n 'images',\n 'lists',\n 'cut-copy-paste',\n 'indentation'\n ]}\n onImageAdded={onImageAdded}\n ref={editorRef}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n />\n </Grid>\n <Grid item={{ colStartEnd: '1/-1' }}>\n <FileInputDemo label='Meeting attachments' />\n </Grid>\n\n <ComboboxFilterableStory label='Select a user' />\n </Grid>\n </Form>\n );\n};\n\nexport const ReadOnlyFormContent = ({\n cols,\n heading,\n description,\n showActions\n}: {\n cols: number;\n showActions: boolean;\n heading?: string;\n description?: string;\n}) => {\n const [value, setValue] = useState<DateRangeInputProps['value']>({ start: 1, end: '3' });\n const prev = usePrevious(value);\n useEffect(() => {\n if (prev !== value) setValue(value);\n }, [prev, value]);\n const [fields] = useReducer(fieldReducer, undefined, initFields);\n const { push } = useToaster();\n\n const name = fields.find(field => field.name === 'name');\n const email = fields.find(field => field.name === 'email');\n const notes = fields.find(field => field.name === 'notes');\n\n if (!name \|\| !email \|\| !notes) return null;\n\n const canSubmit = fields.every(field => field.value && field.validator());\n\n const actions = (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n Submit\n </Button>\n </>\n );\n\n return (\n <Form\n actions={showActions ? actions : undefined}\n description={description}\n heading={heading}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n push({ content: 'Form submitted!' });\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n <Input\n readOnly\n name='name'\n label='Name'\n value='Test'\n required={false}\n status={name.status}\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='places visited'\n label='Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n required\n >\n <Checkbox key='Cambridge' label='Cambridge' />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you really enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" readOnly />\n </RadioButtonGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <CheckboxGroup\n name='more places visited'\n label='More Places you have worked'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n required\n >\n <Checkbox key='Cambridge' label='Cambridge' readOnly />\n <Checkbox key='Krakow' label='Krakow' />\n <Checkbox key='Hyderabad' label='Hyderabad' />\n <Checkbox key='Bangalore' label='Bangalore' />\n </CheckboxGroup>\n </Grid>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <RadioButtonGroup\n name='meetings'\n label='Do you enjoy early morning meetings?'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n allReadOnly\n required\n >\n <RadioButton key='Yes' label='Yes' />\n <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" />\n </RadioButtonGroup>\n </Grid>\n\n <Select\n label='What would you like to eat?'\n info=''\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n readOnly\n >\n <Option>choose meal…</Option>\n <Option selected>Pizza</Option>\n <Option>Sandwich</Option>\n <Option>Salad</Option>\n </Select>\n\n <Grid item={{ colStartEnd: '1/-1' }}>\n <TextArea\n readOnly\n name='notes'\n required={false}\n label='Meeting notes'\n status={notes.status}\n info={notes.info \|\| notes.help}\n value='Test copy'\n additionalInfo={{\n heading: 'Field info',\n content: 'Lorem ipsum dolor set amet.'\n }}\n />\n </Grid>\n </Grid>\n </Form>\n );\n};\n"]}

package/lib/core/Icon/Icon.mocks.d.ts CHANGED Viewed

@@ -1,3 +1,26 @@
-import { DefaultTheme } from 'styled-components';
+import type { DefaultTheme } from 'styled-components';
+import type { IconProps } from '@pega/cosmos-react-core';
 export declare const createCustomIcon: (theme: DefaultTheme) => void;
+export declare const iconSizeArgs: {
+    size: IconProps['size'];
+    demoSizeOverride: boolean;
+};
+export declare const iconSizeArgTypes: {
+    size: {
+        options: string[];
+        control: {
+            type: string;
+        };
+        if: {
+            arg: string;
+            truthy: boolean;
+        };
+    };
+    demoSizeOverride: {
+        control: {
+            type: string;
+        };
+    };
+};
+export declare const iconNameSelectOptions: string[];
 //# sourceMappingURL=Icon.mocks.d.ts.map