npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.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 (1484) hide show

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

@@ -18,20 +18,20 @@ export default {
     }
 };
 export const OneColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 1, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 1, heading: args.heading, description: args.description, showActions: true });
 };
 export const TwoColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 2, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 2, heading: args.heading, description: args.description, showActions: true });
 };
 export const ThreeColumnForm = (args) => {
-    return _jsx(FormContent, { cols: 3, heading: args.heading, description: args.description, showActions: true }, void 0);
+    return _jsx(FormContent, { cols: 3, heading: args.heading, description: args.description, showActions: true });
 };
 export const SimpleFormDemo = (args) => {
     const [inputValue, setInputValue] = useState('');
     const [success, setSuccess] = useState('');
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => setInputValue(''), children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0));
-    const successBanner = (_jsx(Banner, { id: 'success', variant: 'success', heading: 'Success', messages: ['Form submitted', `Input value: ${success}`] }, void 0));
-    const errorBanner = (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['All required fields in the form must be completed.'] }, void 0));
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => setInputValue(''), children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }));
+    const successBanner = (_jsx(Banner, { id: 'success', variant: 'success', heading: 'Success', messages: ['Form submitted', `Input value: ${success}`] }));
+    const errorBanner = (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', messages: ['All required fields in the form must be completed.'] }));
     const banner = success ? successBanner : errorBanner;
     return (_jsx(Form, { banners: args.withBanners ? banner : undefined, actions: actions, heading: args.heading, description: args.description, onSubmit: (e) => {
             e.preventDefault();
@@ -40,7 +40,7 @@ export const SimpleFormDemo = (args) => {
         }, children: _jsx(Flex, { container: { direction: 'column', itemGap: 2 }, children: _jsx(Input, { label: 'Name', info: 'Enter your first name', required: true, value: inputValue, onChange: (e) => {
                     setSuccess('');
                     setInputValue(e.target.value);
-                } }, void 0) }, void 0) }, void 0));
+                } }) }) }));
 };
 SimpleFormDemo.args = {
     withBanners: false
@@ -65,7 +65,7 @@ export const ConfigurableForm = (args) => {
                     }
                 }
             }
-        }, children: _jsx(FormContent, { cols: 2, showActions: true }, void 0) }, void 0));
+        }, children: _jsx(FormContent, { cols: 2, showActions: true }) }));
 };
 ConfigurableForm.args = {
     foregroundColor: '#054a8a',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,KAAK,EACN,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE;QACb,SAAS;KACV;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,WAAW,EAAE,EAAE;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KAC3C;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC7E,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,~~iBAAG~~,CAAC;AACpG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAsD,CAC/E,IAAgD,EAChD,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,CACd,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC~~,+BAEjE~~,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS~~,+BAE5C~~,~~YACR~~,CACJ,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,MAAM,IACL,EAAE,EAAC,SAAS,EACZ,OAAO,EAAC,SAAS,EACjB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,OAAO,EAAE,CAAC,~~WACvD~~,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,KAAC,MAAM,IACL,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,CAAC,oDAAoD,CAAC,~~WAChE~~,CACH,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC;IAErD,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,UAAU,CAAC,CAAC;YACvB,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC,YAED,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YAClD,KAAC,KAAK,IACJ,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,uBAAuB,EAC5B,QAAQ,QACR,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;oBAC7C,UAAU,CAAC,EAAE,CAAC,CAAC;oBACf,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC,~~WACD~~,~~WACG~~,~~WACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAYF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,QAAQ,EAAE;wBACR,cAAc,EAAE,IAAI,CAAC,gBAAgB;qBACtC;oBACD,QAAQ,EAAE;wBACR,cAAc,EAAE,IAAI,CAAC,gBAAgB;qBACtC;iBACF;aACF;SACF,YAED,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,EAAE,WAAW,~~iBAAG~~,~~WACtB~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,gBAAgB,EAAE,aAAa;CAChC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACrC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n Banner,\n Button,\n Configuration,\n Flex,\n Form,\n FormField,\n Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from './Form.mocks';\n\nexport default {\n title: 'Core/Form',\n component: Form,\n subcomponents: {\n FormField\n },\n args: {\n heading: 'Form demo',\n description: ''\n },\n argTypes: {\n heading: { control: { type: 'text' } },\n description: { control: { type: 'text' } }\n }\n} as Meta;\ninterface FormStoryProps {\n heading?: string;\n description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n args: FormStoryProps & { withBanners?: boolean }\n) => {\n const [inputValue, setInputValue] = useState('');\n const [success, setSuccess] = useState('');\n\n const actions = (\n <>\n <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n );\n\n const successBanner = (\n <Banner\n id='success'\n variant='success'\n heading='Success'\n messages={['Form submitted', `Input value: ${success}`]}\n />\n );\n\n const errorBanner = (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n messages={['All required fields in the form must be completed.']}\n />\n );\n\n const banner = success ? successBanner : errorBanner;\n\n return (\n <Form\n banners={args.withBanners ? banner : undefined}\n actions={actions}\n heading={args.heading}\n description={args.description}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n setSuccess(inputValue);\n setInputValue('');\n }}\n >\n <Flex container={{ direction: 'column', itemGap: 2 }}>\n <Input\n label='Name'\n info='Enter your first name'\n required\n value={inputValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSuccess('');\n setInputValue(e.target.value);\n }}\n />\n </Flex>\n </Form>\n );\n};\n\nSimpleFormDemo.args = {\n withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n foregroundColor?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: number;\n hoverBorderColor?: string;\n focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n return (\n <Configuration\n theme={{\n components: {\n 'form-control': {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor,\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n ':hover': {\n 'border-color': args.hoverBorderColor\n },\n ':focus': {\n 'border-color': args.focusBorderColor\n }\n }\n }\n }}\n >\n <FormContent cols={2} showActions />\n </Configuration>\n );\n};\n\nConfigurableForm.args = {\n foregroundColor: '#054a8a',\n backgroundColor: '#e2f1ff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: 0.5,\n hoverBorderColor: '#3f3f3f',\n focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n hoverBorderColor: { control: { type: 'color' } },\n focusBorderColor: { control: { type: 'color' } },\n heading: { table: { disable: true } },\n description: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n Banner,\n Button,\n Configuration,\n Flex,\n Form,\n FormField,\n Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from './Form.mocks';\n\nexport default {\n title: 'Core/Form',\n component: Form,\n subcomponents: {\n FormField\n },\n args: {\n heading: 'Form demo',\n description: ''\n },\n argTypes: {\n heading: { control: { type: 'text' } },\n description: { control: { type: 'text' } }\n }\n} as Meta;\ninterface FormStoryProps {\n heading?: string;\n description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n args: FormStoryProps & { withBanners?: boolean }\n) => {\n const [inputValue, setInputValue] = useState('');\n const [success, setSuccess] = useState('');\n\n const actions = (\n <>\n <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n );\n\n const successBanner = (\n <Banner\n id='success'\n variant='success'\n heading='Success'\n messages={['Form submitted', `Input value: ${success}`]}\n />\n );\n\n const errorBanner = (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n messages={['All required fields in the form must be completed.']}\n />\n );\n\n const banner = success ? successBanner : errorBanner;\n\n return (\n <Form\n banners={args.withBanners ? banner : undefined}\n actions={actions}\n heading={args.heading}\n description={args.description}\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n setSuccess(inputValue);\n setInputValue('');\n }}\n >\n <Flex container={{ direction: 'column', itemGap: 2 }}>\n <Input\n label='Name'\n info='Enter your first name'\n required\n value={inputValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSuccess('');\n setInputValue(e.target.value);\n }}\n />\n </Flex>\n </Form>\n );\n};\n\nSimpleFormDemo.args = {\n withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n foregroundColor?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: number;\n hoverBorderColor?: string;\n focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n return (\n <Configuration\n theme={{\n components: {\n 'form-control': {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor,\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n ':hover': {\n 'border-color': args.hoverBorderColor\n },\n ':focus': {\n 'border-color': args.focusBorderColor\n }\n }\n }\n }}\n >\n <FormContent cols={2} showActions />\n </Configuration>\n );\n};\n\nConfigurableForm.args = {\n foregroundColor: '#054a8a',\n backgroundColor: '#e2f1ff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: 0.5,\n hoverBorderColor: '#3f3f3f',\n focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n hoverBorderColor: { control: { type: 'color' } },\n focusBorderColor: { control: { type: 'color' } },\n heading: { table: { disable: true } },\n description: { table: { disable: true } }\n};\n"]}

package/lib/core/Grid/GridContainer.stories.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { GridContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -12,13 +11,13 @@ interface GridStoryProps {
     alignItems?: GridContainerProps['alignItems'];
     alignContent?: GridContainerProps['alignContent'];
 }
-export declare const ColumnsAndRows: () => JSX.Element;
-export declare const Areas: () => JSX.Element;
-export declare const Template: () => JSX.Element;
+export declare const ColumnsAndRows: Story;
+export declare const Areas: Story;
+export declare const Template: Story;
 export declare const GapsAndPadding: Story<GridStoryProps>;
 export declare const JustifyGridItems: Story<GridStoryProps>;
 export declare const JustifyGridContent: Story<GridStoryProps>;
 export declare const AlignGridItems: Story<GridStoryProps>;
 export declare const AlignGridContent: Story<GridStoryProps>;
-export declare const ResponsiveGrid: () => JSX.Element;
+export declare const ResponsiveGrid: Story;
 //# sourceMappingURL=GridContainer.stories.d.ts.map

package/lib/core/Grid/GridContainer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.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,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,~~mBAkB1B~~,CAAC;AAEF,eAAO,MAAM,KAAK,~~mBA0BjB~~,CAAC;AAEF,eAAO,MAAM,QAAQ,~~mBAyBpB~~,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAoBhD,CAAC;AAcF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAmBlD,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAkBpD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAmBhD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAoBlD,CAAC;AAaF,eAAO,MAAM,cAAc,~~mBAkB1B~~,CAAC"}
1	+ {"version":3,"file":"GridContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.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,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAyBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAoBhD,CAAC;AAcF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAmBlD,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAkBpD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAmBhD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAoBlD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}

package/lib/core/Grid/GridContainer.stories.js CHANGED Viewed

@@ -13,7 +13,7 @@ export const ColumnsAndRows = () => {
             cols: '7rem [line1] 1fr [line2] 3fr [line3]',
             rows: 'repeat(3, 3rem) auto',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRows-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRows-${index}`))) }));
 };
 export const Areas = () => {
     return (_jsxs(Grid, { container: {
@@ -21,12 +21,12 @@ export const Areas = () => {
             rows: 'repeat(3, 3rem) auto',
             areas: '"sidebar header header" "sidebar . main" "sidebar . main" "sidebar footer footer"',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }, void 0) }, void 0)] }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }) }), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }) }), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }) }), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }) })] }));
 };
 export const Template = () => {
     const rowsAndAreas = '"sidebar header header" 3rem "sidebar . main" 3rem "sidebar . main" 3rem "sidebar footer footer" auto';
     const columns = '5rem 1fr 3fr';
-    return (_jsxs(Grid, { container: { template: `${rowsAndAreas} / ${columns}`, pad: 2 }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }, void 0) }, void 0), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { template: `${rowsAndAreas} / ${columns}`, pad: 2 }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { area: 'header' }, as: StyledGridItem, children: _jsx(Text, { children: "Header" }) }), _jsx(Grid, { item: { area: 'sidebar' }, as: StyledGridItem, children: _jsx(Text, { children: "Side" }) }), _jsx(Grid, { item: { area: 'main' }, as: StyledGridItem, children: _jsx(Text, { children: "Main" }) }), _jsx(Grid, { item: { area: 'footer' }, as: StyledGridItem, children: _jsx(Text, { children: "Footer" }) })] }));
 };
 export const GapsAndPadding = (args) => {
     return (_jsx(Grid, { container: {
@@ -35,7 +35,7 @@ export const GapsAndPadding = (args) => {
             rows: 'repeat(3, 3rem) auto',
             rowGap: args.rowGap,
             pad: args.pad
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRowGap-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRowGap-${index}`))) }));
 };
 GapsAndPadding.args = {
     pad: 1,
@@ -53,7 +53,7 @@ export const JustifyGridItems = (args) => {
             rows: 'repeat(3, 3rem) auto',
             justifyItems: args.justifyItems,
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `justifyItems-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `justifyItems-${index}`))) }));
 };
 JustifyGridItems.args = {
     justifyItems: 'stretch'
@@ -67,7 +67,7 @@ export const JustifyGridContent = (args) => {
             rows: 'repeat(4, 3rem)',
             justifyContent: args.justifyContent,
             pad: 2
-        }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `justifyContent-${index}`))) }, void 0));
+        }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `justifyContent-${index}`))) }));
 };
 JustifyGridContent.args = {
     justifyContent: 'start'
@@ -84,7 +84,7 @@ export const AlignGridItems = (args) => {
             rows: 'repeat(3, 5rem) auto',
             alignItems: args.alignItems,
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `alignItems-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `alignItems-${index}`))) }));
 };
 AlignGridItems.args = {
     alignItems: 'stretch'
@@ -98,7 +98,7 @@ export const AlignGridContent = (args) => {
             rows: 'repeat(4, 3rem)',
             alignContent: args.alignContent,
             pad: 2
-        }, as: StyledGridContainer, height: 30, fitContent: true, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `alignContent-${index}`))) }, void 0));
+        }, as: StyledGridContainer, height: 30, fitContent: true, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `alignContent-${index}`))) }));
 };
 AlignGridContent.args = {
     alignContent: 'start'
@@ -110,6 +110,6 @@ AlignGridContent.argTypes = {
     }
 };
 export const ResponsiveGrid = () => {
-    return (_jsx(Grid, { container: { pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }, xl: { container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }, lg: { container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }, md: { container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }, sm: { container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }, xs: { container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }, void 0) }, `colRows-${index}`))) }, void 0));
+    return (_jsx(Grid, { container: { pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }, xl: { container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }, lg: { container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }, md: { container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }, sm: { container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }, xs: { container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }, as: StyledGridContainer, children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (_jsx(StyledGridItem, { children: _jsxs(Text, { children: ["Item ", index] }) }, `colRows-${index}`))) }));
 };
 //# sourceMappingURL=GridContainer.stories.js.map

package/lib/core/Grid/GridContainer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Container',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n colGap?: GridContainerProps['colGap'];\n rowGap?: GridContainerProps['rowGap'];\n pad?: GridContainerProps['pad'];\n justifyItems?: GridContainerProps['justifyItems'];\n justifyContent?: GridContainerProps['justifyContent'];\n alignItems?: GridContainerProps['alignItems'];\n alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows = () => {\n return (\n <Grid\n container={{\n cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nexport const Areas = () => {\n return (\n <Grid\n container={{\n cols: '5rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const Template = () => {\n const rowsAndAreas =\n '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n const columns = '5rem 1fr 3fr';\n\n return (\n <Grid\n container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const GapsAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n colGap: args.colGap,\n rows: 'repeat(3, 3rem) auto',\n rowGap: args.rowGap,\n pad: args.pad\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRowGap-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nGapsAndPadding.args = {\n pad: 1,\n colGap: 1,\n rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n justifyItems: args.justifyItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridItems.args = {\n justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n justifyContent: args.justifyContent,\n pad: 2\n }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridContent.args = {\n justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n justifyContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 5rem) auto',\n alignItems: args.alignItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridItems.args = {\n alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n alignContent: args.alignContent,\n pad: 2\n }}\n as={StyledGridContainer}\n height={30}\n fitContent\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridContent.args = {\n alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n alignContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveGrid = () => {\n return (\n <Grid\n container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n"]}
1	+ {"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Container',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n colGap?: GridContainerProps['colGap'];\n rowGap?: GridContainerProps['rowGap'];\n pad?: GridContainerProps['pad'];\n justifyItems?: GridContainerProps['justifyItems'];\n justifyContent?: GridContainerProps['justifyContent'];\n alignItems?: GridContainerProps['alignItems'];\n alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows: Story = () => {\n return (\n <Grid\n container={{\n cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nexport const Areas: Story = () => {\n return (\n <Grid\n container={{\n cols: '5rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const Template: Story = () => {\n const rowsAndAreas =\n '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n const columns = '5rem 1fr 3fr';\n\n return (\n <Grid\n container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ area: 'header' }} as={StyledGridItem}>\n <Text>Header</Text>\n </Grid>\n <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n <Text>Side</Text>\n </Grid>\n <Grid item={{ area: 'main' }} as={StyledGridItem}>\n <Text>Main</Text>\n </Grid>\n <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n <Text>Footer</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const GapsAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n colGap: args.colGap,\n rows: 'repeat(3, 3rem) auto',\n rowGap: args.rowGap,\n pad: args.pad\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRowGap-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nGapsAndPadding.args = {\n pad: 1,\n colGap: 1,\n rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n pad: { control: { type: 'number' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 3rem) auto',\n justifyItems: args.justifyItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridItems.args = {\n justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n justifyContent: args.justifyContent,\n pad: 2\n }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`justifyContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nJustifyGridContent.args = {\n justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n justifyContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const AlignGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: '7rem 1fr 3fr',\n rows: 'repeat(3, 5rem) auto',\n alignItems: args.alignItems,\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignItems-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridItems.args = {\n alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{\n cols: 'repeat(3, 7rem)',\n rows: 'repeat(4, 3rem)',\n alignContent: args.alignContent,\n pad: 2\n }}\n as={StyledGridContainer}\n height={30}\n fitContent\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`alignContent-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n\nAlignGridContent.args = {\n alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n alignContent: {\n options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n control: { type: 'select' }\n }\n};\n\nexport const ResponsiveGrid: Story = () => {\n return (\n <Grid\n container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n as={StyledGridContainer}\n >\n {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n <StyledGridItem key={`colRows-${index}`}>\n <Text>Item {index}</Text>\n </StyledGridItem>\n ))}\n </Grid>\n );\n};\n"]}

package/lib/core/Grid/GridItem.stories.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { GridItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -7,7 +6,7 @@ interface GridStoryProps {
     justifySelf?: GridItemProps['justifySelf'];
     alignSelf?: GridItemProps['alignSelf'];
 }
-export declare const StartAndEnd: () => JSX.Element;
+export declare const StartAndEnd: Story;
 export declare const JustifyGridSelf: Story<GridStoryProps>;
 export declare const AlignGridSelf: Story<GridStoryProps>;
 //# sourceMappingURL=GridItem.stories.d.ts.map

package/lib/core/Grid/GridItem.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAIpE,wBAMU;AAEV,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,~~mBAkCvB~~,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAcjD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAmB/C,CAAC"}
1	+ {"version":3,"file":"GridItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAIpE,wBAMU;AAEV,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAcjD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAmB/C,CAAC"}

package/lib/core/Grid/GridItem.stories.js CHANGED Viewed

@@ -13,10 +13,10 @@ export const StartAndEnd = () => {
             cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',
             rows: 'repeat(3, 3rem) auto',
             pad: 2
-        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { colStart: 'line0', colEnd: 'col3-start' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Grid, { item: { colStart: 'line1', colEnd: 'line3' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Grid, { item: { rowStart: '3', rowEnd: '5' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0), _jsx(Grid, { item: { colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 6" }, void 0) }, void 0)] }, void 0));
+        }, as: StyledGridContainer, height: 20, children: [_jsx(Grid, { item: { colStart: 'line0', colEnd: 'col3-start' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) }), _jsx(Grid, { item: { colStart: 'line1', colEnd: 'line3' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Grid, { item: { rowStart: '3', rowEnd: '5' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 5" }) }), _jsx(Grid, { item: { colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }, as: StyledGridItem, children: _jsx(Text, { children: "Item 6" }) })] }));
 };
 export const JustifyGridSelf = (args) => {
-    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Grid, { item: { justifySelf: args.justifySelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(Grid, { item: { justifySelf: args.justifySelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 JustifyGridSelf.args = {
     justifySelf: 'stretch'
@@ -25,7 +25,7 @@ JustifyGridSelf.argTypes = {
     justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
 };
 export const AlignGridSelf = (args) => {
-    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, height: 10, fitContent: true, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Grid, { item: { alignSelf: args.alignSelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { cols: '7rem 1fr 3fr', pad: 2 }, as: StyledGridContainer, height: 10, fitContent: true, children: [_jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(Grid, { item: { alignSelf: args.alignSelf }, as: StyledGridItem, editable: true, children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledGridItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 AlignGridSelf.args = {
     alignSelf: 'stretch'

package/lib/core/Grid/GridItem.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridItem.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAiB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,WAAW,~~GAAG~~,GAAG,EAAE;~~IAC9B~~,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,4DAA4D;YAClE,IAAI,EAAE,sBAAsB;YAC5B,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,aAEV,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,YACzE,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,EACjB,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,EACjB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,cAAc,YACpE,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,cAAc,YAC5D,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,EAC9E,EAAE,EAAE,cAAc,YAElB,KAAC,IAAI,~~iCAAc~~,~~WACd~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC7E,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,aACxE,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,EACjB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,kBACzE,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,~~YACZ~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,EACV,UAAU,mBAEV,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,EACjB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,kBACrE,KAAC,IAAI,~~iCAAc~~,~~WACd~~,EACP,KAAC,cAAc,cACb,KAAC,IAAI,~~iCAAc~~,~~WACJ~~,~~YACZ~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Item',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n justifySelf?: GridItemProps['justifySelf'];\n alignSelf?: GridItemProps['alignSelf'];\n}\n\nexport const StartAndEnd = () => {\n return (\n <Grid\n container={{\n cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledGridItem}>\n <Text>Item 1</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 2</Text>\n </StyledGridItem>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledGridItem}>\n <Text>Item 4</Text>\n </Grid>\n <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledGridItem}>\n <Text>Item 5</Text>\n </Grid>\n <Grid\n item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }}\n as={StyledGridItem}\n >\n <Text>Item 6</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const JustifyGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer}>\n <StyledGridItem>\n <Text>Item 1</Text>\n </StyledGridItem>\n <Grid item={{ justifySelf: args.justifySelf }} as={StyledGridItem} editable>\n <Text>Item 2</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n </Grid>\n );\n};\n\nJustifyGridSelf.args = {\n justifySelf: 'stretch'\n};\n\nJustifyGridSelf.argTypes = {\n justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{ cols: '7rem 1fr 3fr', pad: 2 }}\n as={StyledGridContainer}\n height={10}\n fitContent\n >\n <StyledGridItem>\n <Text>Item 1</Text>\n </StyledGridItem>\n <Grid item={{ alignSelf: args.alignSelf }} as={StyledGridItem} editable>\n <Text>Item 2</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n </Grid>\n );\n};\n\nAlignGridSelf.args = {\n alignSelf: 'stretch'\n};\n\nAlignGridSelf.argTypes = {\n alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"GridItem.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n title: 'Core/Grid/Item',\n component: Grid,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GridStoryProps {\n justifySelf?: GridItemProps['justifySelf'];\n alignSelf?: GridItemProps['alignSelf'];\n}\n\nexport const StartAndEnd: Story = () => {\n return (\n <Grid\n container={{\n cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',\n rows: 'repeat(3, 3rem) auto',\n pad: 2\n }}\n as={StyledGridContainer}\n height={20}\n >\n <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledGridItem}>\n <Text>Item 1</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 2</Text>\n </StyledGridItem>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledGridItem}>\n <Text>Item 4</Text>\n </Grid>\n <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledGridItem}>\n <Text>Item 5</Text>\n </Grid>\n <Grid\n item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }}\n as={StyledGridItem}\n >\n <Text>Item 6</Text>\n </Grid>\n </Grid>\n );\n};\n\nexport const JustifyGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer}>\n <StyledGridItem>\n <Text>Item 1</Text>\n </StyledGridItem>\n <Grid item={{ justifySelf: args.justifySelf }} as={StyledGridItem} editable>\n <Text>Item 2</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n </Grid>\n );\n};\n\nJustifyGridSelf.args = {\n justifySelf: 'stretch'\n};\n\nJustifyGridSelf.argTypes = {\n justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n return (\n <Grid\n container={{ cols: '7rem 1fr 3fr', pad: 2 }}\n as={StyledGridContainer}\n height={10}\n fitContent\n >\n <StyledGridItem>\n <Text>Item 1</Text>\n </StyledGridItem>\n <Grid item={{ alignSelf: args.alignSelf }} as={StyledGridItem} editable>\n <Text>Item 2</Text>\n </Grid>\n <StyledGridItem>\n <Text>Item 3</Text>\n </StyledGridItem>\n </Grid>\n );\n};\n\nAlignGridSelf.args = {\n alignSelf: 'stretch'\n};\n\nAlignGridSelf.argTypes = {\n alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { HTMLProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const HTMLDemo: Story<HTMLProps>;
+//# sourceMappingURL=HTML.stories.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HTML.stories.d.ts","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAwD,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HTML } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/HTML',
+    component: HTML
+};
+export const HTMLDemo = (args) => _jsx(HTML, { content: args.content });
+HTMLDemo.args = {
+    content: '<div><p>Hello, World!<p><ul><li>List item 1<ul><li>Sub list item 1</li></ul></li><li>List item 2</li></ul></div>'
+};
+HTMLDemo.argTypes = {
+    content: { control: { type: 'text' } }
+};
+//# sourceMappingURL=HTML.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"HTML.stories.js","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AAE/F,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EACL,kHAAkH;CACrH,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { HTML, HTMLProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/HTML',\n component: HTML\n} as Meta;\n\nexport const HTMLDemo: Story<HTMLProps> = (args: HTMLProps) => <HTML content={args.content} />;\n\nHTMLDemo.args = {\n content:\n '<div><p>Hello, World!<p><ul><li>List item 1<ul><li>Sub list item 1</li></ul></li><li>List item 2</li></ul></div>'\n};\n\nHTMLDemo.argTypes = {\n content: { control: { type: 'text' } }\n};\n"]}

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

@@ -3,7 +3,7 @@ import { registerIcon } from '@pega/cosmos-react-core';
 export const createCustomIcon = (theme) => {
     registerIcon({
         name: 'custom-pega',
-        Component: () => (_jsx("path", { fill: theme.base.palette.interactive, d: 'M12.9734375,9.91015625 C12.9734375,9.91015625 12.9734375,9.91015625 12.9734375,9.91015625 C13.5960937,9.2875 14.3625,9 15.3203125,9 C15.3203125,9 15.3203125,9 15.3203125,9 C16.2304688,9 16.9484375,9.2390625 17.5234375,9.76640625 C17.5234375,9.76640625 17.5234375,9.76640625 17.5234375,9.76640625 C17.5234375,9.76640625 16.8046875,10.7242188 16.8046875,10.7242188 C16.6132812,10.5328125 16.421875,10.3890625 16.1820313,10.3414063 C16.1820313,10.3414063 16.1820313,10.3414063 16.1820313,10.3414063 C15.9429687,10.2453125 15.703125,10.1976563 15.3679687,10.1976563 C15.3679687,10.1976563 15.3679687,10.1976563 15.3679687,10.1976563 C14.7929687,10.1976563 14.3140625,10.3890625 13.93125,10.7726563 C13.5484375,11.15625 13.35625,11.634375 13.35625,12.209375 C13.35625,12.209375 13.35625,12.209375 13.35625,12.209375 C13.35625,12.8320313 13.5476562,13.3109375 13.93125,13.69375 C13.93125,13.69375 13.93125,13.69375 13.93125,13.69375 C14.3625,14.0289063 14.7929688,14.2203125 15.271875,14.2203125 C15.271875,14.2203125 15.271875,14.2203125 15.271875,14.2203125 C15.7984375,14.2203125 16.2296875,14.1242188 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,13.9328125 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,12.7835938 16.5648438,12.7835938 C16.5648438,12.7835938 15.2242188,12.7835938 15.2242188,12.7835938 C15.2242188,12.7835938 15.2242188,11.6820313 15.2242188,11.6820313 C15.2242188,11.6820313 17.8585938,11.6820313 17.8585938,11.6820313 C17.8585938,11.6820313 17.8585938,14.4601563 17.8585938,14.4601563 C17.8585938,14.4601563 17.8109375,14.5078125 17.8109375,14.5078125 C17.2359375,15.1304688 16.421875,15.465625 15.3203125,15.465625 C15.3203125,15.465625 15.3203125,15.465625 15.3203125,15.465625 C14.4101563,15.465625 13.64375,15.178125 12.9734375,14.5554688 C12.9734375,14.5554688 12.9734375,14.5554688 12.9734375,14.5554688 C12.3507812,13.9328125 12.015625,13.11875 12.015625,12.2085938 C12.015625,12.2085938 12.015625,12.2085938 12.015625,12.2085938 C12.015625,11.2984375 12.3507812,10.5320313 12.9734375,9.909375 L12.9734375,9.91015625 Z M1,9.23984375 C1,9.23984375 3.39453125,9.23984375 3.39453125,9.23984375 C4.11328125,9.23984375 4.6875,9.43125 5.11875,9.81484375 C5.55,10.1984375 5.74140625,10.725 5.74140625,11.3476562 C5.74140625,11.3476562 5.74140625,11.3476562 5.74140625,11.3476562 C5.74140625,12.0179687 5.50234375,12.5453125 5.07109375,12.8804688 C4.5921875,13.2632812 4.0171875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 3.29921875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 2.29375,13.4554687 2.29375,13.4554687 C2.29375,13.4554687 2.29375,15.275 2.29375,15.275 C2.29375,15.275 1.00078125,15.275 1.00078125,15.275 C1.00078125,15.275 1.00078125,9.240625 1.00078125,9.240625 L1,9.23984375 Z M10.675,12.83125 C10.675,12.83125 8.040625,12.83125 8.040625,12.83125 C8.040625,12.83125 8.040625,14.0765625 8.040625,14.0765625 C8.040625,14.0765625 11.2976563,14.0765625 11.2976563,14.0765625 C11.2976563,14.0765625 11.2976563,15.2742188 11.2976563,15.2742188 C11.2976563,15.2742188 6.7,15.2742188 6.7,15.2742188 C6.7,15.2742188 6.7,9.23984375 6.7,9.23984375 C6.7,9.23984375 11.2976563,9.23984375 11.2976563,9.23984375 C11.2976563,9.23984375 11.2976563,10.4375 11.2976563,10.4375 C11.2976563,10.4375 8.040625,10.4375 8.040625,10.4375 C8.040625,10.4375 8.040625,11.6828125 8.040625,11.6828125 C8.040625,11.6828125 10.675,11.6828125 10.675,11.6828125 C10.675,11.6828125 10.675,12.8320312 10.675,12.8320312 L10.675,12.83125 Z M18.48125,15.2742187 C18.48125,15.2742187 21.0671875,9.23984375 21.0671875,9.23984375 C21.0671875,9.23984375 22.2648438,9.23984375 22.2648438,9.23984375 C22.2648438,9.23984375 24.8507813,15.2742187 24.8507813,15.2742187 C24.8507813,15.2742187 23.4617188,15.2742187 23.4617188,15.2742187 C23.4617188,15.2742187 22.8867188,13.9335937 22.8867188,13.9335937 C22.8867188,13.9335937 20.3960938,13.9335937 20.3960938,13.9335937 C20.3960938,13.9335937 19.8210938,15.2742187 19.8210938,15.2742187 C19.8210938,15.2742187 18.4804688,15.2742187 18.4804688,15.2742187 L18.48125,15.2742187 Z M23.8453125,9.23984375 C23.8453125,9.23984375 23.8453125,9.23984375 23.8453125,9.23984375 C24.1804687,9.23984375 24.3242188,9.38359375 24.3242188,9.67109375 C24.3242188,9.67109375 24.3242188,9.67109375 24.3242188,9.67109375 C24.3242188,10.00625 24.1804687,10.15 23.8453125,10.15 C23.8453125,10.15 23.8453125,10.15 23.8453125,10.15 C23.5578125,10.15 23.4140625,10.00625 23.4140625,9.67109375 C23.4140625,9.67109375 23.4140625,9.67109375 23.4140625,9.67109375 C23.4140625,9.38359375 23.5578125,9.23984375 23.8453125,9.23984375 Z M24.228125,9.67109375 C24.228125,9.67109375 24.228125,9.67109375 24.228125,9.67109375 C24.228125,9.43203125 24.084375,9.28828125 23.8453125,9.28828125 C23.60625,9.28828125 23.4625,9.43203125 23.4625,9.67109375 C23.4625,9.67109375 23.4625,9.67109375 23.4625,9.67109375 C23.4625,9.95859375 23.60625,10.1023437 23.8453125,10.1023437 C24.084375,10.1023437 24.228125,9.95859375 24.228125,9.67109375 Z M23.796875,9.76640625 C23.796875,9.76640625 23.796875,9.9578125 23.796875,9.9578125 C23.796875,9.9578125 23.7007812,9.9578125 23.7007812,9.9578125 C23.7007812,9.9578125 23.7007812,9.43125 23.7007812,9.43125 C23.7007812,9.43125 23.8445312,9.43125 23.8445312,9.43125 C23.8445312,9.43125 23.9882812,9.43125 23.9882812,9.43125 C24.0359375,9.47890625 24.0359375,9.52734375 24.0359375,9.575 C24.0359375,9.575 24.0359375,9.575 24.0359375,9.575 C24.0359375,9.62265625 24.0359375,9.62265625 23.9882812,9.67109375 C23.9882812,9.67109375 23.9882812,9.67109375 23.9882812,9.67109375 C23.9882812,9.67109375 23.940625,9.71875 23.940625,9.71875 C23.940625,9.71875 24.084375,9.9578125 24.084375,9.9578125 C24.084375,9.9578125 23.940625,9.9578125 23.940625,9.9578125 C23.940625,9.9578125 23.8445312,9.76640625 23.8445312,9.76640625 C23.8445312,9.76640625 23.796875,9.76640625 23.796875,9.76640625 L23.796875,9.76640625 Z M23.8453125,9.47890625 C23.8453125,9.47890625 23.7976562,9.47890625 23.7976562,9.47890625 C23.7976562,9.47890625 23.7976562,9.6703125 23.7976562,9.6703125 C23.7976562,9.6703125 23.8453125,9.6703125 23.8453125,9.6703125 C23.8929687,9.6703125 23.8929687,9.6703125 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.62265625 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.575 23.9414062,9.575 C23.9414062,9.575 23.9414062,9.52734375 23.9414062,9.52734375 C23.89375,9.4796875 23.89375,9.4796875 23.8453125,9.4796875 C23.8453125,9.4796875 23.8453125,9.4796875 23.8453125,9.4796875 L23.8453125,9.47890625 Z M3.346875,12.2570312 C4.065625,12.2570312 4.40078125,11.9695312 4.40078125,11.346875 C4.40078125,10.7242187 4.01796875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 3.29921875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 2.29375,10.4367187 2.29375,10.4367187 C2.29375,10.4367187 2.29375,12.25625 2.29375,12.25625 C2.29375,12.25625 3.34765625,12.25625 3.34765625,12.25625 L3.346875,12.2570312 Z M21.6421875,10.8203125 C21.6421875,10.8203125 20.828125,12.7835937 20.828125,12.7835937 C20.828125,12.7835937 22.45625,12.7835937 22.45625,12.7835937 C22.45625,12.7835937 21.6421875,10.8203125 21.6421875,10.8203125 L21.6421875,10.8203125 Z' }, void 0)),
+        Component: () => (_jsx("path", { fill: theme.base.palette.interactive, d: 'M12.9734375,9.91015625 C12.9734375,9.91015625 12.9734375,9.91015625 12.9734375,9.91015625 C13.5960937,9.2875 14.3625,9 15.3203125,9 C15.3203125,9 15.3203125,9 15.3203125,9 C16.2304688,9 16.9484375,9.2390625 17.5234375,9.76640625 C17.5234375,9.76640625 17.5234375,9.76640625 17.5234375,9.76640625 C17.5234375,9.76640625 16.8046875,10.7242188 16.8046875,10.7242188 C16.6132812,10.5328125 16.421875,10.3890625 16.1820313,10.3414063 C16.1820313,10.3414063 16.1820313,10.3414063 16.1820313,10.3414063 C15.9429687,10.2453125 15.703125,10.1976563 15.3679687,10.1976563 C15.3679687,10.1976563 15.3679687,10.1976563 15.3679687,10.1976563 C14.7929687,10.1976563 14.3140625,10.3890625 13.93125,10.7726563 C13.5484375,11.15625 13.35625,11.634375 13.35625,12.209375 C13.35625,12.209375 13.35625,12.209375 13.35625,12.209375 C13.35625,12.8320313 13.5476562,13.3109375 13.93125,13.69375 C13.93125,13.69375 13.93125,13.69375 13.93125,13.69375 C14.3625,14.0289063 14.7929688,14.2203125 15.271875,14.2203125 C15.271875,14.2203125 15.271875,14.2203125 15.271875,14.2203125 C15.7984375,14.2203125 16.2296875,14.1242188 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,13.9328125 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,12.7835938 16.5648438,12.7835938 C16.5648438,12.7835938 15.2242188,12.7835938 15.2242188,12.7835938 C15.2242188,12.7835938 15.2242188,11.6820313 15.2242188,11.6820313 C15.2242188,11.6820313 17.8585938,11.6820313 17.8585938,11.6820313 C17.8585938,11.6820313 17.8585938,14.4601563 17.8585938,14.4601563 C17.8585938,14.4601563 17.8109375,14.5078125 17.8109375,14.5078125 C17.2359375,15.1304688 16.421875,15.465625 15.3203125,15.465625 C15.3203125,15.465625 15.3203125,15.465625 15.3203125,15.465625 C14.4101563,15.465625 13.64375,15.178125 12.9734375,14.5554688 C12.9734375,14.5554688 12.9734375,14.5554688 12.9734375,14.5554688 C12.3507812,13.9328125 12.015625,13.11875 12.015625,12.2085938 C12.015625,12.2085938 12.015625,12.2085938 12.015625,12.2085938 C12.015625,11.2984375 12.3507812,10.5320313 12.9734375,9.909375 L12.9734375,9.91015625 Z M1,9.23984375 C1,9.23984375 3.39453125,9.23984375 3.39453125,9.23984375 C4.11328125,9.23984375 4.6875,9.43125 5.11875,9.81484375 C5.55,10.1984375 5.74140625,10.725 5.74140625,11.3476562 C5.74140625,11.3476562 5.74140625,11.3476562 5.74140625,11.3476562 C5.74140625,12.0179687 5.50234375,12.5453125 5.07109375,12.8804688 C4.5921875,13.2632812 4.0171875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 3.29921875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 2.29375,13.4554687 2.29375,13.4554687 C2.29375,13.4554687 2.29375,15.275 2.29375,15.275 C2.29375,15.275 1.00078125,15.275 1.00078125,15.275 C1.00078125,15.275 1.00078125,9.240625 1.00078125,9.240625 L1,9.23984375 Z M10.675,12.83125 C10.675,12.83125 8.040625,12.83125 8.040625,12.83125 C8.040625,12.83125 8.040625,14.0765625 8.040625,14.0765625 C8.040625,14.0765625 11.2976563,14.0765625 11.2976563,14.0765625 C11.2976563,14.0765625 11.2976563,15.2742188 11.2976563,15.2742188 C11.2976563,15.2742188 6.7,15.2742188 6.7,15.2742188 C6.7,15.2742188 6.7,9.23984375 6.7,9.23984375 C6.7,9.23984375 11.2976563,9.23984375 11.2976563,9.23984375 C11.2976563,9.23984375 11.2976563,10.4375 11.2976563,10.4375 C11.2976563,10.4375 8.040625,10.4375 8.040625,10.4375 C8.040625,10.4375 8.040625,11.6828125 8.040625,11.6828125 C8.040625,11.6828125 10.675,11.6828125 10.675,11.6828125 C10.675,11.6828125 10.675,12.8320312 10.675,12.8320312 L10.675,12.83125 Z M18.48125,15.2742187 C18.48125,15.2742187 21.0671875,9.23984375 21.0671875,9.23984375 C21.0671875,9.23984375 22.2648438,9.23984375 22.2648438,9.23984375 C22.2648438,9.23984375 24.8507813,15.2742187 24.8507813,15.2742187 C24.8507813,15.2742187 23.4617188,15.2742187 23.4617188,15.2742187 C23.4617188,15.2742187 22.8867188,13.9335937 22.8867188,13.9335937 C22.8867188,13.9335937 20.3960938,13.9335937 20.3960938,13.9335937 C20.3960938,13.9335937 19.8210938,15.2742187 19.8210938,15.2742187 C19.8210938,15.2742187 18.4804688,15.2742187 18.4804688,15.2742187 L18.48125,15.2742187 Z M23.8453125,9.23984375 C23.8453125,9.23984375 23.8453125,9.23984375 23.8453125,9.23984375 C24.1804687,9.23984375 24.3242188,9.38359375 24.3242188,9.67109375 C24.3242188,9.67109375 24.3242188,9.67109375 24.3242188,9.67109375 C24.3242188,10.00625 24.1804687,10.15 23.8453125,10.15 C23.8453125,10.15 23.8453125,10.15 23.8453125,10.15 C23.5578125,10.15 23.4140625,10.00625 23.4140625,9.67109375 C23.4140625,9.67109375 23.4140625,9.67109375 23.4140625,9.67109375 C23.4140625,9.38359375 23.5578125,9.23984375 23.8453125,9.23984375 Z M24.228125,9.67109375 C24.228125,9.67109375 24.228125,9.67109375 24.228125,9.67109375 C24.228125,9.43203125 24.084375,9.28828125 23.8453125,9.28828125 C23.60625,9.28828125 23.4625,9.43203125 23.4625,9.67109375 C23.4625,9.67109375 23.4625,9.67109375 23.4625,9.67109375 C23.4625,9.95859375 23.60625,10.1023437 23.8453125,10.1023437 C24.084375,10.1023437 24.228125,9.95859375 24.228125,9.67109375 Z M23.796875,9.76640625 C23.796875,9.76640625 23.796875,9.9578125 23.796875,9.9578125 C23.796875,9.9578125 23.7007812,9.9578125 23.7007812,9.9578125 C23.7007812,9.9578125 23.7007812,9.43125 23.7007812,9.43125 C23.7007812,9.43125 23.8445312,9.43125 23.8445312,9.43125 C23.8445312,9.43125 23.9882812,9.43125 23.9882812,9.43125 C24.0359375,9.47890625 24.0359375,9.52734375 24.0359375,9.575 C24.0359375,9.575 24.0359375,9.575 24.0359375,9.575 C24.0359375,9.62265625 24.0359375,9.62265625 23.9882812,9.67109375 C23.9882812,9.67109375 23.9882812,9.67109375 23.9882812,9.67109375 C23.9882812,9.67109375 23.940625,9.71875 23.940625,9.71875 C23.940625,9.71875 24.084375,9.9578125 24.084375,9.9578125 C24.084375,9.9578125 23.940625,9.9578125 23.940625,9.9578125 C23.940625,9.9578125 23.8445312,9.76640625 23.8445312,9.76640625 C23.8445312,9.76640625 23.796875,9.76640625 23.796875,9.76640625 L23.796875,9.76640625 Z M23.8453125,9.47890625 C23.8453125,9.47890625 23.7976562,9.47890625 23.7976562,9.47890625 C23.7976562,9.47890625 23.7976562,9.6703125 23.7976562,9.6703125 C23.7976562,9.6703125 23.8453125,9.6703125 23.8453125,9.6703125 C23.8929687,9.6703125 23.8929687,9.6703125 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.62265625 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.575 23.9414062,9.575 C23.9414062,9.575 23.9414062,9.52734375 23.9414062,9.52734375 C23.89375,9.4796875 23.89375,9.4796875 23.8453125,9.4796875 C23.8453125,9.4796875 23.8453125,9.4796875 23.8453125,9.4796875 L23.8453125,9.47890625 Z M3.346875,12.2570312 C4.065625,12.2570312 4.40078125,11.9695312 4.40078125,11.346875 C4.40078125,10.7242187 4.01796875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 3.29921875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 2.29375,10.4367187 2.29375,10.4367187 C2.29375,10.4367187 2.29375,12.25625 2.29375,12.25625 C2.29375,12.25625 3.34765625,12.25625 3.34765625,12.25625 L3.346875,12.2570312 Z M21.6421875,10.8203125 C21.6421875,10.8203125 20.828125,12.7835937 20.828125,12.7835937 C20.828125,12.7835937 22.45625,12.7835937 22.45625,12.7835937 C22.45625,12.7835937 21.6421875,10.8203125 21.6421875,10.8203125 L21.6421875,10.8203125 Z' })),
         viewBox: '0 0 25 25'
     });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.mocks.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtD,YAAY,CAAC;QACX,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,CACf,eACE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACpC,CAAC,EAAC,s/NAAs/N,~~WACx~~/N,CACH;QACD,OAAO,EAAE,WAAW;KACrB,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { DefaultTheme } from 'styled-components';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\n\nexport const createCustomIcon = (theme: DefaultTheme) => {\n registerIcon({\n name: 'custom-pega',\n Component: () => (\n <path\n fill={theme.base.palette.interactive}\n d='M12.9734375,9.91015625 C12.9734375,9.91015625 12.9734375,9.91015625 12.9734375,9.91015625 C13.5960937,9.2875 14.3625,9 15.3203125,9 C15.3203125,9 15.3203125,9 15.3203125,9 C16.2304688,9 16.9484375,9.2390625 17.5234375,9.76640625 C17.5234375,9.76640625 17.5234375,9.76640625 17.5234375,9.76640625 C17.5234375,9.76640625 16.8046875,10.7242188 16.8046875,10.7242188 C16.6132812,10.5328125 16.421875,10.3890625 16.1820313,10.3414063 C16.1820313,10.3414063 16.1820313,10.3414063 16.1820313,10.3414063 C15.9429687,10.2453125 15.703125,10.1976563 15.3679687,10.1976563 C15.3679687,10.1976563 15.3679687,10.1976563 15.3679687,10.1976563 C14.7929687,10.1976563 14.3140625,10.3890625 13.93125,10.7726563 C13.5484375,11.15625 13.35625,11.634375 13.35625,12.209375 C13.35625,12.209375 13.35625,12.209375 13.35625,12.209375 C13.35625,12.8320313 13.5476562,13.3109375 13.93125,13.69375 C13.93125,13.69375 13.93125,13.69375 13.93125,13.69375 C14.3625,14.0289063 14.7929688,14.2203125 15.271875,14.2203125 C15.271875,14.2203125 15.271875,14.2203125 15.271875,14.2203125 C15.7984375,14.2203125 16.2296875,14.1242188 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,13.9328125 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,12.7835938 16.5648438,12.7835938 C16.5648438,12.7835938 15.2242188,12.7835938 15.2242188,12.7835938 C15.2242188,12.7835938 15.2242188,11.6820313 15.2242188,11.6820313 C15.2242188,11.6820313 17.8585938,11.6820313 17.8585938,11.6820313 C17.8585938,11.6820313 17.8585938,14.4601563 17.8585938,14.4601563 C17.8585938,14.4601563 17.8109375,14.5078125 17.8109375,14.5078125 C17.2359375,15.1304688 16.421875,15.465625 15.3203125,15.465625 C15.3203125,15.465625 15.3203125,15.465625 15.3203125,15.465625 C14.4101563,15.465625 13.64375,15.178125 12.9734375,14.5554688 C12.9734375,14.5554688 12.9734375,14.5554688 12.9734375,14.5554688 C12.3507812,13.9328125 12.015625,13.11875 12.015625,12.2085938 C12.015625,12.2085938 12.015625,12.2085938 12.015625,12.2085938 C12.015625,11.2984375 12.3507812,10.5320313 12.9734375,9.909375 L12.9734375,9.91015625 Z M1,9.23984375 C1,9.23984375 3.39453125,9.23984375 3.39453125,9.23984375 C4.11328125,9.23984375 4.6875,9.43125 5.11875,9.81484375 C5.55,10.1984375 5.74140625,10.725 5.74140625,11.3476562 C5.74140625,11.3476562 5.74140625,11.3476562 5.74140625,11.3476562 C5.74140625,12.0179687 5.50234375,12.5453125 5.07109375,12.8804688 C4.5921875,13.2632812 4.0171875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 3.29921875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 2.29375,13.4554687 2.29375,13.4554687 C2.29375,13.4554687 2.29375,15.275 2.29375,15.275 C2.29375,15.275 1.00078125,15.275 1.00078125,15.275 C1.00078125,15.275 1.00078125,9.240625 1.00078125,9.240625 L1,9.23984375 Z M10.675,12.83125 C10.675,12.83125 8.040625,12.83125 8.040625,12.83125 C8.040625,12.83125 8.040625,14.0765625 8.040625,14.0765625 C8.040625,14.0765625 11.2976563,14.0765625 11.2976563,14.0765625 C11.2976563,14.0765625 11.2976563,15.2742188 11.2976563,15.2742188 C11.2976563,15.2742188 6.7,15.2742188 6.7,15.2742188 C6.7,15.2742188 6.7,9.23984375 6.7,9.23984375 C6.7,9.23984375 11.2976563,9.23984375 11.2976563,9.23984375 C11.2976563,9.23984375 11.2976563,10.4375 11.2976563,10.4375 C11.2976563,10.4375 8.040625,10.4375 8.040625,10.4375 C8.040625,10.4375 8.040625,11.6828125 8.040625,11.6828125 C8.040625,11.6828125 10.675,11.6828125 10.675,11.6828125 C10.675,11.6828125 10.675,12.8320312 10.675,12.8320312 L10.675,12.83125 Z M18.48125,15.2742187 C18.48125,15.2742187 21.0671875,9.23984375 21.0671875,9.23984375 C21.0671875,9.23984375 22.2648438,9.23984375 22.2648438,9.23984375 C22.2648438,9.23984375 24.8507813,15.2742187 24.8507813,15.2742187 C24.8507813,15.2742187 23.4617188,15.2742187 23.4617188,15.2742187 C23.4617188,15.2742187 22.8867188,13.9335937 22.8867188,13.9335937 C22.8867188,13.9335937 20.3960938,13.9335937 20.3960938,13.9335937 C20.3960938,13.9335937 19.8210938,15.2742187 19.8210938,15.2742187 C19.8210938,15.2742187 18.4804688,15.2742187 18.4804688,15.2742187 L18.48125,15.2742187 Z M23.8453125,9.23984375 C23.8453125,9.23984375 23.8453125,9.23984375 23.8453125,9.23984375 C24.1804687,9.23984375 24.3242188,9.38359375 24.3242188,9.67109375 C24.3242188,9.67109375 24.3242188,9.67109375 24.3242188,9.67109375 C24.3242188,10.00625 24.1804687,10.15 23.8453125,10.15 C23.8453125,10.15 23.8453125,10.15 23.8453125,10.15 C23.5578125,10.15 23.4140625,10.00625 23.4140625,9.67109375 C23.4140625,9.67109375 23.4140625,9.67109375 23.4140625,9.67109375 C23.4140625,9.38359375 23.5578125,9.23984375 23.8453125,9.23984375 Z M24.228125,9.67109375 C24.228125,9.67109375 24.228125,9.67109375 24.228125,9.67109375 C24.228125,9.43203125 24.084375,9.28828125 23.8453125,9.28828125 C23.60625,9.28828125 23.4625,9.43203125 23.4625,9.67109375 C23.4625,9.67109375 23.4625,9.67109375 23.4625,9.67109375 C23.4625,9.95859375 23.60625,10.1023437 23.8453125,10.1023437 C24.084375,10.1023437 24.228125,9.95859375 24.228125,9.67109375 Z M23.796875,9.76640625 C23.796875,9.76640625 23.796875,9.9578125 23.796875,9.9578125 C23.796875,9.9578125 23.7007812,9.9578125 23.7007812,9.9578125 C23.7007812,9.9578125 23.7007812,9.43125 23.7007812,9.43125 C23.7007812,9.43125 23.8445312,9.43125 23.8445312,9.43125 C23.8445312,9.43125 23.9882812,9.43125 23.9882812,9.43125 C24.0359375,9.47890625 24.0359375,9.52734375 24.0359375,9.575 C24.0359375,9.575 24.0359375,9.575 24.0359375,9.575 C24.0359375,9.62265625 24.0359375,9.62265625 23.9882812,9.67109375 C23.9882812,9.67109375 23.9882812,9.67109375 23.9882812,9.67109375 C23.9882812,9.67109375 23.940625,9.71875 23.940625,9.71875 C23.940625,9.71875 24.084375,9.9578125 24.084375,9.9578125 C24.084375,9.9578125 23.940625,9.9578125 23.940625,9.9578125 C23.940625,9.9578125 23.8445312,9.76640625 23.8445312,9.76640625 C23.8445312,9.76640625 23.796875,9.76640625 23.796875,9.76640625 L23.796875,9.76640625 Z M23.8453125,9.47890625 C23.8453125,9.47890625 23.7976562,9.47890625 23.7976562,9.47890625 C23.7976562,9.47890625 23.7976562,9.6703125 23.7976562,9.6703125 C23.7976562,9.6703125 23.8453125,9.6703125 23.8453125,9.6703125 C23.8929687,9.6703125 23.8929687,9.6703125 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.62265625 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.575 23.9414062,9.575 C23.9414062,9.575 23.9414062,9.52734375 23.9414062,9.52734375 C23.89375,9.4796875 23.89375,9.4796875 23.8453125,9.4796875 C23.8453125,9.4796875 23.8453125,9.4796875 23.8453125,9.4796875 L23.8453125,9.47890625 Z M3.346875,12.2570312 C4.065625,12.2570312 4.40078125,11.9695312 4.40078125,11.346875 C4.40078125,10.7242187 4.01796875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 3.29921875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 2.29375,10.4367187 2.29375,10.4367187 C2.29375,10.4367187 2.29375,12.25625 2.29375,12.25625 C2.29375,12.25625 3.34765625,12.25625 3.34765625,12.25625 L3.346875,12.2570312 Z M21.6421875,10.8203125 C21.6421875,10.8203125 20.828125,12.7835937 20.828125,12.7835937 C20.828125,12.7835937 22.45625,12.7835937 22.45625,12.7835937 C22.45625,12.7835937 21.6421875,10.8203125 21.6421875,10.8203125 L21.6421875,10.8203125 Z'\n />\n ),\n viewBox: '0 0 25 25'\n });\n};\n"]}
1	+ {"version":3,"file":"Icon.mocks.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtD,YAAY,CAAC;QACX,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,GAAG,EAAE,CAAC,CACf,eACE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EACpC,CAAC,EAAC,s/NAAs/N,GACx/N,CACH;QACD,OAAO,EAAE,WAAW;KACrB,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { DefaultTheme } from 'styled-components';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\n\nexport const createCustomIcon = (theme: DefaultTheme) => {\n registerIcon({\n name: 'custom-pega',\n Component: () => (\n <path\n fill={theme.base.palette.interactive}\n d='M12.9734375,9.91015625 C12.9734375,9.91015625 12.9734375,9.91015625 12.9734375,9.91015625 C13.5960937,9.2875 14.3625,9 15.3203125,9 C15.3203125,9 15.3203125,9 15.3203125,9 C16.2304688,9 16.9484375,9.2390625 17.5234375,9.76640625 C17.5234375,9.76640625 17.5234375,9.76640625 17.5234375,9.76640625 C17.5234375,9.76640625 16.8046875,10.7242188 16.8046875,10.7242188 C16.6132812,10.5328125 16.421875,10.3890625 16.1820313,10.3414063 C16.1820313,10.3414063 16.1820313,10.3414063 16.1820313,10.3414063 C15.9429687,10.2453125 15.703125,10.1976563 15.3679687,10.1976563 C15.3679687,10.1976563 15.3679687,10.1976563 15.3679687,10.1976563 C14.7929687,10.1976563 14.3140625,10.3890625 13.93125,10.7726563 C13.5484375,11.15625 13.35625,11.634375 13.35625,12.209375 C13.35625,12.209375 13.35625,12.209375 13.35625,12.209375 C13.35625,12.8320313 13.5476562,13.3109375 13.93125,13.69375 C13.93125,13.69375 13.93125,13.69375 13.93125,13.69375 C14.3625,14.0289063 14.7929688,14.2203125 15.271875,14.2203125 C15.271875,14.2203125 15.271875,14.2203125 15.271875,14.2203125 C15.7984375,14.2203125 16.2296875,14.1242188 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,13.9328125 16.5648438,13.9328125 C16.5648438,13.9328125 16.5648438,12.7835938 16.5648438,12.7835938 C16.5648438,12.7835938 15.2242188,12.7835938 15.2242188,12.7835938 C15.2242188,12.7835938 15.2242188,11.6820313 15.2242188,11.6820313 C15.2242188,11.6820313 17.8585938,11.6820313 17.8585938,11.6820313 C17.8585938,11.6820313 17.8585938,14.4601563 17.8585938,14.4601563 C17.8585938,14.4601563 17.8109375,14.5078125 17.8109375,14.5078125 C17.2359375,15.1304688 16.421875,15.465625 15.3203125,15.465625 C15.3203125,15.465625 15.3203125,15.465625 15.3203125,15.465625 C14.4101563,15.465625 13.64375,15.178125 12.9734375,14.5554688 C12.9734375,14.5554688 12.9734375,14.5554688 12.9734375,14.5554688 C12.3507812,13.9328125 12.015625,13.11875 12.015625,12.2085938 C12.015625,12.2085938 12.015625,12.2085938 12.015625,12.2085938 C12.015625,11.2984375 12.3507812,10.5320313 12.9734375,9.909375 L12.9734375,9.91015625 Z M1,9.23984375 C1,9.23984375 3.39453125,9.23984375 3.39453125,9.23984375 C4.11328125,9.23984375 4.6875,9.43125 5.11875,9.81484375 C5.55,10.1984375 5.74140625,10.725 5.74140625,11.3476562 C5.74140625,11.3476562 5.74140625,11.3476562 5.74140625,11.3476562 C5.74140625,12.0179687 5.50234375,12.5453125 5.07109375,12.8804688 C4.5921875,13.2632812 4.0171875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 3.29921875,13.4554687 3.29921875,13.4554687 C3.29921875,13.4554687 2.29375,13.4554687 2.29375,13.4554687 C2.29375,13.4554687 2.29375,15.275 2.29375,15.275 C2.29375,15.275 1.00078125,15.275 1.00078125,15.275 C1.00078125,15.275 1.00078125,9.240625 1.00078125,9.240625 L1,9.23984375 Z M10.675,12.83125 C10.675,12.83125 8.040625,12.83125 8.040625,12.83125 C8.040625,12.83125 8.040625,14.0765625 8.040625,14.0765625 C8.040625,14.0765625 11.2976563,14.0765625 11.2976563,14.0765625 C11.2976563,14.0765625 11.2976563,15.2742188 11.2976563,15.2742188 C11.2976563,15.2742188 6.7,15.2742188 6.7,15.2742188 C6.7,15.2742188 6.7,9.23984375 6.7,9.23984375 C6.7,9.23984375 11.2976563,9.23984375 11.2976563,9.23984375 C11.2976563,9.23984375 11.2976563,10.4375 11.2976563,10.4375 C11.2976563,10.4375 8.040625,10.4375 8.040625,10.4375 C8.040625,10.4375 8.040625,11.6828125 8.040625,11.6828125 C8.040625,11.6828125 10.675,11.6828125 10.675,11.6828125 C10.675,11.6828125 10.675,12.8320312 10.675,12.8320312 L10.675,12.83125 Z M18.48125,15.2742187 C18.48125,15.2742187 21.0671875,9.23984375 21.0671875,9.23984375 C21.0671875,9.23984375 22.2648438,9.23984375 22.2648438,9.23984375 C22.2648438,9.23984375 24.8507813,15.2742187 24.8507813,15.2742187 C24.8507813,15.2742187 23.4617188,15.2742187 23.4617188,15.2742187 C23.4617188,15.2742187 22.8867188,13.9335937 22.8867188,13.9335937 C22.8867188,13.9335937 20.3960938,13.9335937 20.3960938,13.9335937 C20.3960938,13.9335937 19.8210938,15.2742187 19.8210938,15.2742187 C19.8210938,15.2742187 18.4804688,15.2742187 18.4804688,15.2742187 L18.48125,15.2742187 Z M23.8453125,9.23984375 C23.8453125,9.23984375 23.8453125,9.23984375 23.8453125,9.23984375 C24.1804687,9.23984375 24.3242188,9.38359375 24.3242188,9.67109375 C24.3242188,9.67109375 24.3242188,9.67109375 24.3242188,9.67109375 C24.3242188,10.00625 24.1804687,10.15 23.8453125,10.15 C23.8453125,10.15 23.8453125,10.15 23.8453125,10.15 C23.5578125,10.15 23.4140625,10.00625 23.4140625,9.67109375 C23.4140625,9.67109375 23.4140625,9.67109375 23.4140625,9.67109375 C23.4140625,9.38359375 23.5578125,9.23984375 23.8453125,9.23984375 Z M24.228125,9.67109375 C24.228125,9.67109375 24.228125,9.67109375 24.228125,9.67109375 C24.228125,9.43203125 24.084375,9.28828125 23.8453125,9.28828125 C23.60625,9.28828125 23.4625,9.43203125 23.4625,9.67109375 C23.4625,9.67109375 23.4625,9.67109375 23.4625,9.67109375 C23.4625,9.95859375 23.60625,10.1023437 23.8453125,10.1023437 C24.084375,10.1023437 24.228125,9.95859375 24.228125,9.67109375 Z M23.796875,9.76640625 C23.796875,9.76640625 23.796875,9.9578125 23.796875,9.9578125 C23.796875,9.9578125 23.7007812,9.9578125 23.7007812,9.9578125 C23.7007812,9.9578125 23.7007812,9.43125 23.7007812,9.43125 C23.7007812,9.43125 23.8445312,9.43125 23.8445312,9.43125 C23.8445312,9.43125 23.9882812,9.43125 23.9882812,9.43125 C24.0359375,9.47890625 24.0359375,9.52734375 24.0359375,9.575 C24.0359375,9.575 24.0359375,9.575 24.0359375,9.575 C24.0359375,9.62265625 24.0359375,9.62265625 23.9882812,9.67109375 C23.9882812,9.67109375 23.9882812,9.67109375 23.9882812,9.67109375 C23.9882812,9.67109375 23.940625,9.71875 23.940625,9.71875 C23.940625,9.71875 24.084375,9.9578125 24.084375,9.9578125 C24.084375,9.9578125 23.940625,9.9578125 23.940625,9.9578125 C23.940625,9.9578125 23.8445312,9.76640625 23.8445312,9.76640625 C23.8445312,9.76640625 23.796875,9.76640625 23.796875,9.76640625 L23.796875,9.76640625 Z M23.8453125,9.47890625 C23.8453125,9.47890625 23.7976562,9.47890625 23.7976562,9.47890625 C23.7976562,9.47890625 23.7976562,9.6703125 23.7976562,9.6703125 C23.7976562,9.6703125 23.8453125,9.6703125 23.8453125,9.6703125 C23.8929687,9.6703125 23.8929687,9.6703125 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.62265625 23.9414062,9.62265625 C23.9414062,9.62265625 23.9414062,9.575 23.9414062,9.575 C23.9414062,9.575 23.9414062,9.52734375 23.9414062,9.52734375 C23.89375,9.4796875 23.89375,9.4796875 23.8453125,9.4796875 C23.8453125,9.4796875 23.8453125,9.4796875 23.8453125,9.4796875 L23.8453125,9.47890625 Z M3.346875,12.2570312 C4.065625,12.2570312 4.40078125,11.9695312 4.40078125,11.346875 C4.40078125,10.7242187 4.01796875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 3.29921875,10.4367187 3.29921875,10.4367187 C3.29921875,10.4367187 2.29375,10.4367187 2.29375,10.4367187 C2.29375,10.4367187 2.29375,12.25625 2.29375,12.25625 C2.29375,12.25625 3.34765625,12.25625 3.34765625,12.25625 L3.346875,12.2570312 Z M21.6421875,10.8203125 C21.6421875,10.8203125 20.828125,12.7835937 20.828125,12.7835937 C20.828125,12.7835937 22.45625,12.7835937 22.45625,12.7835937 C22.45625,12.7835937 21.6421875,10.8203125 21.6421875,10.8203125 L21.6421875,10.8203125 Z'\n />\n ),\n viewBox: '0 0 25 25'\n });\n};\n"]}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const StaticIcon: () => JSX.Element;
-export declare const CustomIcon: () => JSX.Element;
-export declare const DynamicIcon: () => JSX.Element;
-export declare const IconList: () => JSX.Element;
+export declare const StaticIcon: Story;
+export declare const CustomIcon: Story;
+export declare const DynamicIcon: Story;
+export declare const IconList: Story;
 //# sourceMappingURL=Icon.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAuBxC~~,wBAGU;AAIV,eAAO,MAAM,UAAU,~~mBAItB~~,CAAC;AAEF,eAAO,MAAM,UAAU,~~mBAQtB~~,CAAC;AAEF,eAAO,MAAM,WAAW,~~mBAEvB~~,CAAC;~~AAkCF~~,eAAO,MAAM,QAAQ,~~mBAoEpB~~,CAAC"}
1	+ {"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAqB/C,wBAGU;AAIV,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAC"}

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

@@ -1,50 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useCallback, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp, EmptyState, StyledEmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection, useTheme } from '@pega/cosmos-react-core';
+import { EmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection, useTheme } from '@pega/cosmos-react-core';
 import * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';
 import { createCustomIcon } from './Icon.mocks';
+import { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';
 export default {
     title: 'Core/Icon',
     component: Icon
 };
 registerIcon(pegasusIcon);
 export const StaticIcon = () => {
-    return (_jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'pegasus', "aria-label": 'Informative label' }, void 0));
+    return (_jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'pegasus', "aria-label": 'Informative label' }));
 };
 export const CustomIcon = () => {
     const theme = useTheme();
     createCustomIcon(theme);
-    return (_jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'custom-pega', "aria-label": 'Custom icon' }, void 0));
+    return (_jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'custom-pega', "aria-label": 'Custom icon' }));
 };
 export const DynamicIcon = () => {
-    return _jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'pega' }, void 0);
+    return _jsx(Icon, { style: { height: '5rem', width: '5rem' }, name: 'pega' });
 };
-// Default # of icons to display in a page
-const PAGE_SIZE = 50;
-const StyledIconList = styled.ul `
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style: none;
-  height: 100%;
-  ${StyledEmptyState} {
-    width: 100%;
-    height: 100%;
-  }
-`;
-const StyledIconListItem = styled.li(({ theme }) => css `
-      padding: calc(2 * ${theme.base.spacing});
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      width: 20%;
-    `);
-StyledIconListItem.defaultProps = defaultThemeProp;
-const StyledProgressContainer = styled.li `
-  position: relative;
-  height: 2.8rem;
-  width: 100%;
-`;
 export const IconList = () => {
+    const pageSize = 50;
     const [search, setSearch] = useState('');
     const totalMatches = useRef(0);
     const [currentPageIndex, setCurrentPageIndex] = useState(0);
@@ -53,21 +30,21 @@ export const IconList = () => {
         const matches = search
             ? icons.filter(icon => icon.includes(search))
             : icons;
-        const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;
+        const totalItemsToRender = (1 + currentPageIndex) * pageSize;
         totalMatches.current = matches.length;
         if (matches.length === 0) {
-            return _jsx(EmptyState, { forwardedAs: 'li' }, void 0);
+            return _jsx(EmptyState, { forwardedAs: 'li' });
         }
         return matches.slice(0, totalItemsToRender).map(icon => (_jsxs(Flex, { container: {
                 direction: 'column',
                 justify: 'center',
                 alignItems: 'center',
                 alignContent: 'center'
-            }, as: StyledIconListItem, children: [_jsx(Icon, { style: { height: '3rem', width: '3rem' }, name: icon }, void 0), _jsx("p", { style: { textAlign: 'center' }, children: icon }, void 0)] }, icon)));
+            }, as: StyledIconListItem, children: [_jsx(Icon, { style: { height: '3rem', width: '3rem' }, name: icon }), _jsx("p", { style: { textAlign: 'center' }, children: icon })] }, icon)));
     }, [search, currentPageIndex]);
-    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);
+    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);
     const itemsToLoadMore = totalMatches.current - itemsShown;
-    // When reaches to the bottom of the results, loads next PAGE_SIZE items
+    // When reaches to the bottom of the results, loads next pageSize items
     useItemIntersection(ulRef, itemsShown, () => {
         setCurrentPageIndex(prev => 1 + prev);
     }, ':scope > li');
@@ -77,6 +54,6 @@ export const IconList = () => {
         setCurrentPageIndex(0);
         ulRef?.current?.scrollIntoView();
     }, []);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, style: { height: '90vh' }, children: [_jsx(SearchInput, { value: search, onSearchChange: onSearchChange }, void 0), itemsShown > 0 && _jsxs(Text, { variant: 'secondary', children: [totalMatches.current, " results"] }, void 0), _jsxs(Flex, { container: { wrap: 'wrap', alignContent: 'start' }, as: StyledIconList, ref: ulRef, children: [listContent, itemsToLoadMore > 0 && (_jsx(StyledProgressContainer, { children: _jsx(Progress, { placement: 'local' }, void 0) }, void 0))] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, style: { height: '90vh' }, children: [_jsx(SearchInput, { value: search, onSearchChange: onSearchChange }), itemsShown > 0 && _jsxs(Text, { variant: 'secondary', children: [totalMatches.current, " results"] }), _jsxs(Flex, { container: { wrap: 'wrap', alignContent: 'start' }, as: StyledIconList, ref: ulRef, children: [listContent, itemsToLoadMore > 0 && (_jsx(StyledProgressContainer, { children: _jsx(Progress, { placement: 'local' }) }))] })] }));
 };
 //# sourceMappingURL=Icon.stories.js.map