npm - @pega/cosmos-react-demos - Versions diffs - 2.1.2 → 2.1.3 - Mend

@pega/cosmos-react-demos 2.1.2 → 2.1.3

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

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n createUID,\n DateInput,\n FieldGroupList,\n FieldGroupListItemProps,\n FileInput,\n Form,\n Input,\n Select,\n Option,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList\n};\n\ntype FieldGroupReducerPayload =\n \| {\n action: 'add';\n }\n \| {\n action: 'delete';\n id: string;\n };\n\ninterface FieldMeta {\n label: string;\n type: 'text' \| 'date' \| 'file' \| 'select' \| 'textarea';\n}\n\ninterface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nconst 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 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) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n default:\n return items;\n }\n };\n\nconst 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\nconst 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 ExpensesDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n </Form>\n );\n};\n\nconst 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\nconst 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\nexport const InsuranceDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n </Form>\n );\n};\n\nconst DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n\n return null;\n};\n\nconst demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n\nexport const FieldGroupListDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n createUID,\n DateInput,\n FieldGroupList,\n FileInput,\n Form,\n Input,\n Select,\n Option,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n fieldGroupReducer,\n FieldMeta,\n GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList\n};\n\nconst 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\nconst 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 ExpensesDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n </Form>\n );\n};\n\nconst 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\nconst 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\nexport const InsuranceDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo = () => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={state}\n onAdd={() => {\n dispatch({ action: 'add' });\n }}\n onDelete={id => {\n dispatch({ action: 'delete', id });\n }}\n />\n );\n};\n"]}

package/jsx/core/File/FileDisplay.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { FileDisplayProps } from '@pega/cosmos-react-core';
+import { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface FileDisplayDemoProps {
@@ -10,4 +10,11 @@ interface FileDisplayDemoProps {
 }
 export declare const FileDisplayTypes: Story<FileDisplayDemoProps>;
 export declare const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps>;
+interface FileUploadItemDemoProps extends FileDisplayDemoProps {
+    name: FileUploadItemProps['name'];
+    meta?: FileUploadItemProps['meta'];
+    error?: FileUploadItemProps['error'];
+    progress?: FileUploadItemProps['progress'];
+}
+export declare const FileUploadItemDemo: Story<FileUploadItemDemoProps>;
 //# sourceMappingURL=FileDisplay.stories.d.ts.map

package/jsx/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,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,~~EAQjB~~,MAAM,yBAAyB,CAAC;;AAEjC,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,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC"}
1	+ {"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,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,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,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,KAAK,CAAC,uBAAuB,CAwC7D,CAAC"}

package/jsx/core/File/FileDisplay.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react';
-import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent } from '@pega/cosmos-react-core';
+import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -84,7 +84,7 @@ export const FileDisplayDemo = (args) => {
         : undefined;
     return (<>
       <FileDisplay ref={setButtonEl} variant={args.variant} displayText={args.displayText} value={args.withValue ? imageSrc : undefined} onPreview={handlePreview} onDownload={handleDownload}/>
-      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl} strategy='fixed'>
+      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>
         <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'}/>
       </Popover>
     </>);
@@ -97,4 +97,39 @@ FileDisplayDemo.argTypes = {
     variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
     displayText: { control: { type: 'text' } }
 };
+export const FileUploadItemDemo = (args) => {
+    const [fileEl, setFileEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (<>
+      <FileUploadItem ref={setFileEl} name={args.name} meta={args.meta} error={args.error} progress={args.progress} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>
+      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>
+        <Image src={imageSrc} alt={args.name}/>
+      </Popover>
+    </>);
+};
+FileUploadItemDemo.args = {
+    name: 'Pega World iNspire',
+    meta: 'Some additional information',
+    error: false,
+    progress: 100
+};
+FileUploadItemDemo.argTypes = {
+    withValue: { table: { disable: true } },
+    name: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+    progress: { control: { type: 'number' } }
+};
 //# sourceMappingURL=FileDisplay.stories.jsx.map

package/jsx/core/File/FileDisplay.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n FileDisplay,\n FileDisplayProps,\n FileItemProps,\n FieldValueList,\n Image,\n Popover,\n ToasterContext,\n useElement,\n useOuterEvent\n} 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: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useContext(ToasterContext);\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 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: '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\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: Story<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const [buttonEl, setButtonEl] = useElement();\n const [popoverEl, setPopoverEl] = useElement();\n const [showPreview, setShowPreview] = useState(false);\n\n useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\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 handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n const handleDownload = args.withDownload\n ? () => {\n const element = document.createElement('a');\n element.href = imageSrc;\n element.download = 'cosmos_file_display_download.jpg';\n element.click();\n }\n : undefined;\n\n return (\n <>\n <FileDisplay\n ref={setButtonEl}\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n <Popover ref={setPopoverEl} show={showPreview} target={buttonEl} strategy='fixed'>\n <Image src={imageSrc} alt={args.displayText \|\| 'Pega World iNspire'} />\n </Popover>\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"]}
1	+ {"version":3,"file":"FileDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n FileDisplay,\n FileDisplayProps,\n FileItemProps,\n FieldValueList,\n Image,\n Popover,\n ToasterContext,\n useElement,\n useOuterEvent,\n FileUploadItemProps,\n FileUploadItem\n} 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: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n const { push } = useContext(ToasterContext);\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 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: '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\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: Story<FileDisplayProps & FileDisplayDemoProps> = (\n args: FileDisplayProps & FileDisplayDemoProps\n) => {\n const [buttonEl, setButtonEl] = useElement();\n const [popoverEl, setPopoverEl] = useElement();\n const [showPreview, setShowPreview] = useState(false);\n\n useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\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 handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n const handleDownload = args.withDownload\n ? () => {\n const element = document.createElement('a');\n element.href = imageSrc;\n element.download = 'cosmos_file_display_download.jpg';\n element.click();\n }\n : undefined;\n\n return (\n <>\n <FileDisplay\n ref={setButtonEl}\n variant={args.variant}\n displayText={args.displayText}\n value={args.withValue ? imageSrc : undefined}\n onPreview={handlePreview}\n onDownload={handleDownload}\n />\n <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n <Image src={imageSrc} alt={args.displayText \|\| 'Pega World iNspire'} />\n </Popover>\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: Story<FileUploadItemDemoProps> = (\n args: FileUploadItemDemoProps\n) => {\n const [fileEl, setFileEl] = useElement();\n const [popoverEl, setPopoverEl] = useElement();\n const [showPreview, setShowPreview] = useState(false);\n\n useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\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 handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n const handleDownload = args.withDownload\n ? () => {\n const element = document.createElement('a');\n element.href = imageSrc;\n element.download = 'cosmos_file_display_download.jpg';\n element.click();\n }\n : undefined;\n\n return (\n <>\n <FileUploadItem\n ref={setFileEl}\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 <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n <Image src={imageSrc} alt={args.name} />\n </Popover>\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/jsx/core/Flex/Flex.styles.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     height?: number | undefined;
     width?: number | undefined;
 }, never>;
-export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     inActive?: boolean | undefined;
     noPadding?: boolean | undefined;
     width?: number | undefined;

package/jsx/core/Flex/Flex.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,~~eAAe~~;;;~~SAiB3B~~,CAAC;AAIF,eAAO,MAAM,~~UAAU~~;;;;~~SAsBtB~~,CAAC"}
1	+ {"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB;;;SAiB/B,CAAC;AAIF,eAAO,MAAM,cAAc;;;;SAwBzB,CAAC"}

package/jsx/core/Flex/Flex.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledContainer = styled.div(({ height, theme, width }) => {
+export const StyledFlexContainer = styled.div(({ height, theme, width }) => {
     return css `
       border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
       background-color: ${theme.base.colors.blue.light};
@@ -16,26 +16,26 @@ export const StyledContainer = styled.div(({ height, theme, width }) => {
       `}
     `;
 });
-StyledContainer.defaultProps = defaultThemeProp;
-export const StyledItem = styled.div(({ inActive, noPadding, theme, width }) => {
+StyledFlexContainer.defaultProps = defaultThemeProp;
+export const StyledFlexItem = styled.div(({ inActive, noPadding, theme, width }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
-      padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
-      text-align: center;
-      background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
-      color: ${theme.base.colors.black};
+    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
+    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
+    text-align: center;
+    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
+    color: ${theme.base.colors.black};
-      ${width &&
+    ${width &&
         css `
-        width: ${width}rem;
-      `}
+      width: ${width}rem;
+    `}
-      span {
-        font-size: ${fontSize.xl};
-        font-weight: ${theme.base['font-weight'].bold};
-      }
-    `;
+    span {
+      font-size: ${fontSize.xl};
+      font-weight: ${theme.base['font-weight'].bold};
+    }
+  `;
 });
-StyledItem.defaultProps = defaultThemeProp;
+StyledFlexItem.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Flex.styles.js.map

package/jsx/core/Flex/Flex.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,~~eAAe~~,GAAG,MAAM,CAAC,GAAG,~~CACvC~~,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,~~eAAe~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAEhD~~,MAAM,CAAC,MAAM,~~UAAU~~,GAAG,MAAM,CAAC,GAAG,~~CAClC~~,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;~~IACxC~~,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;~~2BACa~~,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;~~iBAC9D~~,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;~~0BAE3C~~,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;~~eAC9E~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;~~QAE9B~~,KAAK;QACP,GAAG,CAAA;~~iBACQ~~,KAAK;~~OACf~~;;;~~qBAGc~~,QAAQ,CAAC,EAAE;~~uBACT~~,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;~~KAEhD~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,~~UAAU~~,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const ~~StyledContainer~~ = styled.div<{ height?: number; width?: number }>(\n ({ height, theme, width }) => {\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n background-color: ${theme.base.colors.blue.light};\n\n ${height &&\n css`\n height: ${height}rem;\n `}\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n `;\n }\n);\n\~~nStyledContainer~~.defaultProps = defaultThemeProp;\n\nexport const ~~StyledItem~~ = styled.div<{ inActive?: boolean; noPadding?: boolean; width?: number }>(\n ({ inActive, noPadding, theme, width }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n text-align: center;\n background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n color: ${theme.base.colors.black};\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n\n span {\n font-size: ${fontSize.xl};\n font-weight: ${theme.base['font-weight'].bold};\n }\n `;\n }\n);\n\~~nStyledItem~~.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAIrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;eAC9D,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;wBAE3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aAC9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,KAAK;QACP,GAAG,CAAA;eACQ,KAAK;KACf;;;mBAGc,QAAQ,CAAC,EAAE;qBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledFlexContainer = styled.div<{ height?: number; width?: number }>(\n ({ height, theme, width }) => {\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n background-color: ${theme.base.colors.blue.light};\n\n ${height &&\n css`\n height: ${height}rem;\n `}\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n `;\n }\n);\n\nStyledFlexContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlexItem = styled.div<{\n inActive?: boolean;\n noPadding?: boolean;\n width?: number;\n}>(({ inActive, noPadding, theme, width }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n text-align: center;\n background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n color: ${theme.base.colors.black};\n\n ${width &&\n css`\n width: ${width}rem;\n `}\n\n span {\n font-size: ${fontSize.xl};\n font-weight: ${theme.base['font-weight'].bold};\n }\n `;\n});\n\nStyledFlexItem.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/Flex/FlexContainer.stories.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { FlexContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -17,4 +18,5 @@ export declare const Wrap: Story<FlexStoryProps>;
 export declare const Justify: Story<FlexStoryProps>;
 export declare const AlignItems: Story<FlexStoryProps>;
 export declare const AlignContent: Story<FlexStoryProps>;
+export declare const ResponsiveFlex: () => JSX.Element;
 //# sourceMappingURL=FlexContainer.stories.d.ts.map

package/jsx/core/Flex/FlexContainer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC"}
1	+ {"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC;AAaF,eAAO,MAAM,cAAc,mBAsB1B,CAAC"}

package/jsx/core/Flex/FlexContainer.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Container',
     component: Flex,
@@ -8,14 +8,14 @@ export default {
     }
 };
 export const Direction = (args) => {
-    return (<Flex container={{ direction: args.direction, pad: 2 }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
     </Flex>);
@@ -30,14 +30,14 @@ Direction.argTypes = {
     }
 };
 export const GapAndPadding = (args) => {
-    return (<Flex container={{ pad: args.pad, gap: args.gap }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
     </Flex>);
@@ -51,20 +51,20 @@ GapAndPadding.argTypes = {
     gap: { control: { type: 'number' } }
 };
 export const Wrap = (args) => {
-    return (<Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledContainer} width={35}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 4</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 5</Text>
       </Flex>
     </Flex>);
@@ -76,16 +76,16 @@ Wrap.argTypes = {
     wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
 };
 export const Justify = (args) => {
-    return (<Flex container={{ justify: args.justify, pad: 2 }} as={StyledContainer}>
-      <StyledItem>
+    return (<Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>
+      <StyledFlexItem>
         <Text>Item 1</Text>
-      </StyledItem>
-      <StyledItem>
+      </StyledFlexItem>
+      <StyledFlexItem>
         <Text>Item 2</Text>
-      </StyledItem>
-      <StyledItem>
+      </StyledFlexItem>
+      <StyledFlexItem>
         <Text>Item 3</Text>
-      </StyledItem>
+      </StyledFlexItem>
     </Flex>);
 };
 Justify.args = {
@@ -98,14 +98,14 @@ Justify.argTypes = {
     }
 };
 export const AlignItems = (args) => {
-    return (<Flex container={{ alignItems: args.alignItems, pad: 2 }} as={StyledContainer} height={15} width={30}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ alignItems: args.alignItems, pad: 2 }} as={StyledFlexContainer} height={15} width={30}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem} noPadding>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>
         <Text>Item 2</Text>
       </Flex>
-      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem}>
+      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3 - First line</Text>
         <Text>Item 3 - Second line</Text>
       </Flex>
@@ -121,20 +121,20 @@ AlignItems.argTypes = {
     }
 };
 export const AlignContent = (args) => {
-    return (<Flex container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }} as={StyledContainer} height={20} width={30}>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+    return (<Flex container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }} as={StyledFlexContainer} height={20} width={30}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 2</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 3</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 4</Text>
       </Flex>
-      <Flex item={{ grow: 1 }} as={StyledItem}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
         <Text>Item 5</Text>
       </Flex>
     </Flex>);
@@ -148,4 +148,17 @@ AlignContent.argTypes = {
         control: { type: 'select' }
     }
 };
+export const ResponsiveFlex = () => {
+    return (<Flex container={{ pad: 1, gap: 6 }} xl={{ container: { gap: 12 } }} lg={{ container: { gap: 9 } }} md={{ container: { gap: 6 } }} sm={{ container: { gap: 3 } }} xs={{ container: { gap: 0 } }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 1</Text>
+      </Flex>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 2</Text>
+      </Flex>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem}>
+        <Text>Item 3</Text>
+      </Flex>
+    </Flex>);
+};
 //# sourceMappingURL=FlexContainer.stories.jsx.map

package/jsx/core/Flex/FlexContainer.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledContainer, StyledItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Container',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n direction?: FlexContainerProps['direction'];\n gap?: FlexContainerProps['gap'];\n pad?: FlexContainerProps['pad'];\n wrap?: FlexContainerProps['wrap'];\n justify?: FlexContainerProps['justify'];\n alignItems?: FlexContainerProps['alignItems'];\n alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ direction: args.direction, pad: 2 }} as={StyledContainer}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nDirection.args = {\n direction: 'row'\n};\n\nDirection.argTypes = {\n direction: {\n options: ['row', 'column', 'row-reverse', 'column-reverse'],\n control: { type: 'select' }\n }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledContainer}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nGapAndPadding.args = {\n pad: 1,\n gap: 1\n};\n\nGapAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledContainer} width={35}>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nWrap.args = {\n wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ justify: args.justify, pad: 2 }} as={StyledContainer}>\n <StyledItem>\n <Text>Item 1</Text>\n </StyledItem>\n <StyledItem>\n <Text>Item 2</Text>\n </StyledItem>\n <StyledItem>\n <Text>Item 3</Text>\n </StyledItem>\n </Flex>\n );\n};\n\nJustify.args = {\n justify: 'start'\n};\n\nJustify.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignItems: args.alignItems, pad: 2 }}\n as={StyledContainer}\n height={15}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignItems.args = {\n alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n alignItems: {\n options: ['stretch', 'start', 'end', 'center', 'baseline'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n as={StyledContainer}\n height={20}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignContent.args = {\n alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n alignContent: {\n options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n control: { type: 'select' }\n }\n};\n"]}
1	+ {"version":3,"file":"FlexContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n title: 'Core/Flex/Container',\n component: Flex,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface FlexStoryProps {\n direction?: FlexContainerProps['direction'];\n gap?: FlexContainerProps['gap'];\n pad?: FlexContainerProps['pad'];\n wrap?: FlexContainerProps['wrap'];\n justify?: FlexContainerProps['justify'];\n alignItems?: FlexContainerProps['alignItems'];\n alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nDirection.args = {\n direction: 'row'\n};\n\nDirection.argTypes = {\n direction: {\n options: ['row', 'column', 'row-reverse', 'column-reverse'],\n control: { type: 'select' }\n }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n\nGapAndPadding.args = {\n pad: 1,\n gap: 1\n};\n\nGapAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nWrap.args = {\n wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n <StyledFlexItem>\n <Text>Item 1</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 2</Text>\n </StyledFlexItem>\n <StyledFlexItem>\n <Text>Item 3</Text>\n </StyledFlexItem>\n </Flex>\n );\n};\n\nJustify.args = {\n justify: 'start'\n};\n\nJustify.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignItems: args.alignItems, pad: 2 }}\n as={StyledFlexContainer}\n height={15}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n <Text>Item 2</Text>\n </Flex>\n <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3 - First line</Text>\n <Text>Item 3 - Second line</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignItems.args = {\n alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n alignItems: {\n options: ['stretch', 'start', 'end', 'center', 'baseline'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n return (\n <Flex\n container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n as={StyledFlexContainer}\n height={20}\n width={30}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 4</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 5</Text>\n </Flex>\n </Flex>\n );\n};\n\nAlignContent.args = {\n alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n alignContent: {\n options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveFlex = () => {\n return (\n <Flex\n container={{ pad: 1, gap: 6 }}\n xl={{ container: { gap: 12 } }}\n lg={{ container: { gap: 9 } }}\n md={{ container: { gap: 6 } }}\n sm={{ container: { gap: 3 } }}\n xs={{ container: { gap: 0 } }}\n as={StyledFlexContainer}\n >\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 1</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 2</Text>\n </Flex>\n <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n <Text>Item 3</Text>\n </Flex>\n </Flex>\n );\n};\n"]}

package/jsx/core/Flex/FlexItem.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Item',
     component: Flex,
@@ -8,14 +8,14 @@ export default {
     }
 };
 export const AlignSelf = (args) => {
-    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledContainer} height={10}>
-      <Flex item={{ grow: 1 }} as={StyledItem} inActive>
+    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Item 1</Text>
       </Flex>
-      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledItem} noPadding>
+      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>
         <Text>Item 2</Text>
       </Flex>
-      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem} inActive>
+      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Item 3 - First line</Text>
         <Text>Item 3 - Second line</Text>
       </Flex>
@@ -31,14 +31,14 @@ AlignSelf.argTypes = {
     }
 };
 export const Grow = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledContainer}>
-      <Flex item={{ grow: 1 }} as={StyledItem} inActive>
+    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer}>
+      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
         <Text>Grow: 1</Text>
       </Flex>
-      <Flex item={{ grow: args.grow }} as={StyledItem}>
+      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>
         <Text>Grow: {args.grow}</Text>
       </Flex>
-      <Flex item={{ grow: 0 }} as={StyledItem} inActive>
+      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>
         <Text>Grow: 0</Text>
       </Flex>
     </Flex>);
@@ -50,14 +50,14 @@ Grow.argTypes = {
     grow: { control: { type: 'number' } }
 };
 export const Shrink = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledContainer} width={42}>
-      <Flex item={{ shrink: 1 }} as={StyledItem} width={15} inActive>
+    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>
+      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>
         <Text>Shrink: 1</Text>
       </Flex>
-      <Flex item={{ shrink: args.shrink }} as={StyledItem} width={15}>
+      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>
         <Text>Shrink: {args.shrink}</Text>
       </Flex>
-      <Flex item={{ shrink: 0 }} as={StyledItem} width={15} inActive>
+      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>
         <Text>Shrink: 0</Text>
       </Flex>
     </Flex>);