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

@pega/cosmos-react-demos 2.1.2 → 2.1.3

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

Files changed (339) hide show

package/jsx/core/Avatar/Avatar.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,~~EAAE~~,MAAM,yBAAyB,CAAC;;~~AAE9D~~,wBAaU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,WAAW,CAE5C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAE7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAShD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAEzC,CAAC;AAUF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAE3C,CAAC"}
1	+ {"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAS,MAAM,yBAAyB,CAAC;;AAErE,wBAaU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,WAAW,CAE5C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAE7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAShD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAEzC,CAAC;AAUF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAE3C,CAAC"}

package/jsx/core/Avatar/Avatar.stories.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Avatar } from '@pega/cosmos-react-core';
+import { Avatar, icons } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Avatar',
     component: Avatar,
@@ -36,7 +36,7 @@ IconAvatar.args = {
     icon: 'headset'
 };
 IconAvatar.argTypes = {
-    icon: { control: { type: 'text' } }
+    icon: { options: icons, control: { type: 'select', icons: true } }
 };
 export const StatusAvatar = (args) => {
     return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status}/>;

package/jsx/core/Avatar/Avatar.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.stories.jsx","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;~~AAE9D~~,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,UAAU;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACvE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC/D,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACpC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACrE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAG,CAAC;AAClG,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,+EAA+E;CAC1F,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACzE,OAAO,CACL,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,QAAQ,CAAC,iFAAiF,EAC1F,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAuB,CAAC,IAAiB,EAAE,EAAE;IAClE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAG,CAAC;AAC1F,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,~~MAAM~~,EAAE,EAAE;~~CACpC~~,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACpE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAG,CAAC;AAC9F,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Avatar',\n component: Avatar,\n args: {\n shape: 'circle',\n size: 'm',\n name: 'John Doe'\n },\n argTypes: {\n shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n size: { options: ['s', 'm', 'l'], control: { type: 'select' } },\n name: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const DefaultAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n name: 'Pegasystems',\n imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return (\n <Avatar\n shape={args.shape}\n size={args.size}\n name={args.name}\n imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n />\n );\n};\n\nexport const IconAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon} />;\n};\n\nIconAvatar.args = {\n icon: 'headset'\n};\n\nIconAvatar.argTypes = {\n icon: { control: { type: '~~text~~' } }\n};\n\nexport const StatusAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n status: 'active'\n};\n\nStatusAvatar.argTypes = {\n status: { options: ['active', undefined], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"Avatar.stories.jsx","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps, icons } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Avatar',\n component: Avatar,\n args: {\n shape: 'circle',\n size: 'm',\n name: 'John Doe'\n },\n argTypes: {\n shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n size: { options: ['s', 'm', 'l'], control: { type: 'select' } },\n name: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const DefaultAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n name: 'Pegasystems',\n imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return (\n <Avatar\n shape={args.shape}\n size={args.size}\n name={args.name}\n imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n />\n );\n};\n\nexport const IconAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon} />;\n};\n\nIconAvatar.args = {\n icon: 'headset'\n};\n\nIconAvatar.argTypes = {\n icon: { options: icons, control: { type: 'select', icons: true } }\n};\n\nexport const StatusAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n status: 'active'\n};\n\nStatusAvatar.argTypes = {\n status: { options: ['active', undefined], control: { type: 'select' } }\n};\n"]}

package/jsx/core/Banner/Banner.mocks.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface DemoFormField {
+    name: string;
+    label: string;
+    info: string;
+    value: string;
+    validator: (value: string) => boolean;
+}
+export declare const demoFields: {
+    name: string;
+    label: string;
+    info: string;
+    value: string;
+    validator: (value: string) => boolean;
+}[];
+export declare const formActions: JSX.Element;
+export declare const fieldReducer: (fields: DemoFormField[], inputEl: any) => DemoFormField[];
+//# sourceMappingURL=Banner.mocks.d.ts.map

package/jsx/core/Banner/Banner.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Banner.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.mocks.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,UAAU;;;;;uBAMA,MAAM;GAgB5B,CAAC;AAEF,eAAO,MAAM,WAAW,aASvB,CAAC;AAGF,eAAO,MAAM,YAAY,WAAY,aAAa,EAAE,WAAW,GAAG,oBAOjE,CAAC"}

package/jsx/core/Banner/Banner.mocks.jsx ADDED Viewed

@@ -0,0 +1,41 @@
+import { Button } from '@pega/cosmos-react-core';
+export const demoFields = [
+    {
+        name: 'field-1',
+        label: 'Field 1',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 1'
+    },
+    {
+        name: 'field-2',
+        label: 'Field 2',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 2'
+    },
+    {
+        name: 'field-3',
+        label: 'Field 3',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 3'
+    }
+];
+export const formActions = (<>
+    <Button name='Cancel' variant='secondary'>
+      Cancel
+    </Button>
+    <Button name='Submit' type='submit' variant='primary'>
+      Submit
+    </Button>
+  </>);
+export const fieldReducer = (fields, inputEl) => {
+    return fields.map(field => {
+        if (inputEl.name === field.name) {
+            field.value = inputEl.value;
+        }
+        return field;
+    });
+};
+//# sourceMappingURL=Banner.mocks.jsx.map

package/jsx/core/Banner/Banner.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Banner.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Banner/Banner.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAUjD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,mCAAmC;QACzC,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS;KAClD;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,mCAAmC;QACzC,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS;KAClD;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,mCAAmC;QACzC,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS;KAClD;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,EACE;IAAA,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,CACvC;;IACF,EAAE,MAAM,CACR;IAAA,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CACnD;;IACF,EAAE,MAAM,CACV;EAAA,GAAG,CACJ,CAAC;AAGF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAuB,EAAE,OAAY,EAAE,EAAE;IACpE,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACxB,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE;YAC/B,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;SAC7B;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { Button } from '@pega/cosmos-react-core';\n\nexport interface DemoFormField {\n name: string;\n label: string;\n info: string;\n value: string;\n validator: (value: string) => boolean;\n}\n\nexport const demoFields = [\n {\n name: 'field-1',\n label: 'Field 1',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 1'\n },\n {\n name: 'field-2',\n label: 'Field 2',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 2'\n },\n {\n name: 'field-3',\n label: 'Field 3',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 3'\n }\n];\n\nexport const formActions = (\n <>\n <Button name='Cancel' variant='secondary'>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n);\n\n// Handles setting of state for all fields\nexport const fieldReducer = (fields: DemoFormField[], inputEl: any) => {\n return fields.map(field => {\n if (inputEl.name === field.name) {\n field.value = inputEl.value;\n }\n return field;\n });\n};\n"]}

package/jsx/core/Banner/Banner.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAOxC~~,wBAGU;AAEV,eAAO,MAAM,aAAa,mBAiBzB,CAAC;AAEF,eAAO,MAAM,WAAW,mBAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,mBAazB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAkBtB,CAAC;~~AA0DF~~,eAAO,MAAM,WAAW,mBA6DvB,CAAC;AAKF,eAAO,MAAM,eAAe;;;;;CAiB3B,CAAC;AASF,eAAO,MAAM,eAAe;;;;;CAsB3B,CAAC"}
1	+ {"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AASxC,wBAGU;AAEV,eAAO,MAAM,aAAa,mBAiBzB,CAAC;AAEF,eAAO,MAAM,WAAW,mBAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,mBAazB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAkBtB,CAAC;AAMF,eAAO,MAAM,WAAW,mBA6DvB,CAAC;AAKF,eAAO,MAAM,eAAe;;;;;CAiB3B,CAAC;AASF,eAAO,MAAM,eAAe;;;;;CAsB3B,CAAC"}

package/jsx/core/Banner/Banner.stories.jsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { useState, useCallback, useReducer } from 'react';
 import { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';
 import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
 import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
+import { demoFields, fieldReducer, formActions } from './Banner.mocks';
 export default {
     title: 'Core/Banner',
     component: Banner
@@ -32,45 +33,6 @@ export const InfoBanner = () => {
             ]}/>)}
     </>);
 };
-const demoFields = [
-    {
-        name: 'field-1',
-        label: 'Field 1',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 1'
-    },
-    {
-        name: 'field-2',
-        label: 'Field 2',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 2'
-    },
-    {
-        name: 'field-3',
-        label: 'Field 3',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 3'
-    }
-];
-const formActions = (<>
-    <Button name='Cancel' variant='secondary'>
-      Cancel
-    </Button>
-    <Button name='Submit' type='submit' variant='primary'>
-      Submit
-    </Button>
-  </>);
-const fieldReducer = (fields, inputEl) => {
-    return fields.map(field => {
-        if (inputEl.name === field.name) {
-            field.value = inputEl.value;
-        }
-        return field;
-    });
-};
 export const ShownInForm = () => {
     const [fields, setField] = useReducer(fieldReducer, demoFields);
     const [banner, setBanner] = useState();

package/jsx/core/Banner/Banner.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.stories.jsx","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\n\nexport default {\n title: 'Core/Banner',\n component: Banner\n} as Meta;\n\nexport const SuccessBanner = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='success'\n variant='success'\n onDismiss={() => setShowBanner(false)}\n heading='2 items uploaded successfully'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n />\n )}\n </>\n );\n};\n\nexport const ErrorBanner = () => {\n return (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n );\n};\n\nexport const WarningBanner = () => {\n return (\n <Banner\n id='warning'\n variant='warning'\n action={\n <div>\n <Button variant='link'>Why this matters</Button>\n </div>\n }\n messages={['Your submission is missing some important documents.']}\n />\n );\n};\n\nexport const InfoBanner = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='info'\n variant='info'\n onDismiss={() => setShowBanner(false)}\n messages={[\n 'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n ]}\n />\n )}\n </>\n );\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\ninterface DemoFormField {\n name: string;\n label: string;\n info: string;\n value: string;\n validator: (value: string) => boolean;\n}\n\nconst demoFields = [\n {\n name: 'field-1',\n label: 'Field 1',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 1'\n },\n {\n name: 'field-2',\n label: 'Field 2',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 2'\n },\n {\n name: 'field-3',\n label: 'Field 3',\n info: 'Hint: type exact label text above',\n value: '',\n validator: (value: string) => value === 'Field 3'\n }\n];\n\nconst formActions = (\n <>\n <Button name='Cancel' variant='secondary'>\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n);\n\n// Handles setting of state for all fields\nconst fieldReducer = (fields: DemoFormField[], inputEl: any) => {\n return fields.map(field => {\n if (inputEl.name === field.name) {\n field.value = inputEl.value;\n }\n return field;\n });\n};\n\nexport const ShownInForm = () => {\n const [fields, setField] = useReducer(fieldReducer, demoFields);\n const [banner, setBanner] = useState<any>();\n\n const onSubmit = useCallback((e: FormEvent) => {\n e.preventDefault();\n const errorFields = fields.filter(field => !field.validator(field.value));\n let heading = 'Wow, great job!';\n let variant: 'success' \| 'urgent' = 'success';\n let messages = fields.map(f => `${f.name} was typed perfectly`);\n let bannerAction;\n\n if (errorFields.length > 0) {\n heading = \"I'm sorry you're having trouble\";\n variant = 'urgent';\n messages = errorFields.map(f => `${f.name} was not typed correctly`);\n bannerAction = (\n <Link href='https://community.pega.com/support' target='_blank'>\n Visit Pega support for assistance\n </Link>\n );\n }\n\n setBanner(\n <Banner\n {...{\n heading,\n variant,\n messages,\n id: 'formBanner',\n action: bannerAction,\n onDismiss() {\n setBanner(false);\n }\n }}\n />\n );\n }, []);\n\n return (\n <Form\n banners={banner}\n actions={formActions}\n onSubmit={onSubmit}\n style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n >\n {fields.map((field: DemoFormField) => {\n return (\n <Input\n key={field.name}\n autoComplete='off'\n name={field.name}\n label={field.label}\n info={field.info}\n value={field.value}\n onChange={(e: InputEvent) => setField(e.target as any)}\n />\n );\n })}\n </Form>\n );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView = () => {\n const [hasBanner, setHasBanner] = useState(true);\n return (\n <CaseViewDemo\n banners={\n hasBanner && (\n <Banner\n id='case-view-error'\n heading='Waring'\n onDismiss={() => setHasBanner(false)}\n variant='warning'\n messages={['Your submission is missing some important documents.']}\n />\n )\n }\n />\n );\n};\n\nShownInCaseView.parameters = {\n layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell = () => {\n const [hasBanner, setHasBanner] = useState([]);\n return (\n <AppShellDemo\n banners={\n hasBanner && (\n <Banner\n id='app-shell-banner-success'\n heading='2 items uploaded successfully'\n onDismiss={() => setHasBanner([])}\n variant='success'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n action={\n <Link target='_blank' href='https://www.pega.com'>\n Link Here!\n </Link>\n }\n />\n )\n }\n />\n );\n};\n\nShownInAppShell.parameters = {\n layout: 'fullscreen'\n};\n"]}
1	+ {"version":3,"file":"Banner.stories.jsx","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n title: 'Core/Banner',\n component: Banner\n} as Meta;\n\nexport const SuccessBanner = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='success'\n variant='success'\n onDismiss={() => setShowBanner(false)}\n heading='2 items uploaded successfully'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n />\n )}\n </>\n );\n};\n\nexport const ErrorBanner = () => {\n return (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n );\n};\n\nexport const WarningBanner = () => {\n return (\n <Banner\n id='warning'\n variant='warning'\n action={\n <div>\n <Button variant='link'>Why this matters</Button>\n </div>\n }\n messages={['Your submission is missing some important documents.']}\n />\n );\n};\n\nexport const InfoBanner = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='info'\n variant='info'\n onDismiss={() => setShowBanner(false)}\n messages={[\n 'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n ]}\n />\n )}\n </>\n );\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm = () => {\n const [fields, setField] = useReducer(fieldReducer, demoFields);\n const [banner, setBanner] = useState<any>();\n\n const onSubmit = useCallback((e: FormEvent) => {\n e.preventDefault();\n const errorFields = fields.filter(field => !field.validator(field.value));\n let heading = 'Wow, great job!';\n let variant: 'success' \| 'urgent' = 'success';\n let messages = fields.map(f => `${f.name} was typed perfectly`);\n let bannerAction;\n\n if (errorFields.length > 0) {\n heading = \"I'm sorry you're having trouble\";\n variant = 'urgent';\n messages = errorFields.map(f => `${f.name} was not typed correctly`);\n bannerAction = (\n <Link href='https://community.pega.com/support' target='_blank'>\n Visit Pega support for assistance\n </Link>\n );\n }\n\n setBanner(\n <Banner\n {...{\n heading,\n variant,\n messages,\n id: 'formBanner',\n action: bannerAction,\n onDismiss() {\n setBanner(false);\n }\n }}\n />\n );\n }, []);\n\n return (\n <Form\n banners={banner}\n actions={formActions}\n onSubmit={onSubmit}\n style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n >\n {fields.map((field: DemoFormField) => {\n return (\n <Input\n key={field.name}\n autoComplete='off'\n name={field.name}\n label={field.label}\n info={field.info}\n value={field.value}\n onChange={(e: InputEvent) => setField(e.target as any)}\n />\n );\n })}\n </Form>\n );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView = () => {\n const [hasBanner, setHasBanner] = useState(true);\n return (\n <CaseViewDemo\n banners={\n hasBanner && (\n <Banner\n id='case-view-error'\n heading='Waring'\n onDismiss={() => setHasBanner(false)}\n variant='warning'\n messages={['Your submission is missing some important documents.']}\n />\n )\n }\n />\n );\n};\n\nShownInCaseView.parameters = {\n layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell = () => {\n const [hasBanner, setHasBanner] = useState([]);\n return (\n <AppShellDemo\n banners={\n hasBanner && (\n <Banner\n id='app-shell-banner-success'\n heading='2 items uploaded successfully'\n onDismiss={() => setHasBanner([])}\n variant='success'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n action={\n <Link target='_blank' href='https://www.pega.com'>\n Link Here!\n </Link>\n }\n />\n )\n }\n />\n );\n};\n\nShownInAppShell.parameters = {\n layout: 'fullscreen'\n};\n"]}

package/jsx/core/Button/Button.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,~~EAAsB~~,MAAM,yBAAyB,CAAC;;~~AAMlF~~,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,mBAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC"}
1	+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAA4B,MAAM,yBAAyB,CAAC;;AAMxF,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,mBAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC"}

package/jsx/core/Button/Button.stories.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Button, Icon, registerIcon } from '@pega/cosmos-react-core';
+import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 registerIcon(plusIcon);
@@ -45,7 +45,7 @@ export const DisabledButtons = () => {
     </>);
 };
 export const IconButtons = ({ compact }) => {
-    return (<>
+    return (<Flex container={{ alignItems: 'center' }}>
       <Button variant='primary' label='Icon button primary' icon compact={compact}>
         <Icon name='plus'/>
       </Button>
@@ -61,7 +61,7 @@ export const IconButtons = ({ compact }) => {
       <Button variant='text' label='Icon button text' icon compact={compact}>
         <Icon name='plus'/>
       </Button>
-    </>);
+    </Flex>);
 };
 IconButtons.args = {
     compact: false

package/jsx/core/Button/Button.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAe,IAAI,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AAClF~~,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACnD;;IACF,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAChC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAClC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC/B;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC7B;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC7B;;MACF,EAAE,MAAM,CACV;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAuB,CAAC,EAAE,OAAO,EAAe,EAAE,EAAE;IAC1E,OAAO,CACL,~~EACE~~;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAC1E;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAC9E;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CACxE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,~~GAAG~~,~~CACJ~~,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CACrE;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC,CAAC,CAAC,SAAS,CAC/C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CACnE;;IACF,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAChE;;IACF,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACpC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, ButtonProps, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Button',\n component: Button,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} compact={args.compact}>\n Click me\n </Button>\n );\n};\n\nButtonVariants.args = {\n variant: 'primary',\n compact: false\n};\n\nButtonVariants.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'simple', 'link', 'text'],\n control: { type: 'select' }\n },\n compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n return (\n <>\n <Button variant='primary' disabled>\n Primary disabled\n </Button>\n <Button variant='secondary' disabled>\n Secondary disabled\n </Button>\n <Button variant='simple' disabled>\n Simple disabled\n </Button>\n <Button variant='link' disabled>\n Link disabled\n </Button>\n <Button variant='text' disabled>\n Text disabled\n </Button>\n </>\n );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n return (\n ~~<>\~~n <Button variant='primary' label='Icon button primary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='simple' label='Icon button simple' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='link' label='Icon button link' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='text' label='Icon button text' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n ~~</>\~~n );\n};\n\nIconButtons.args = {\n compact: false\n};\n\nIconButtons.argTypes = {\n compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n {args.icon ? <Icon name='plus' /> : 'Loading'}\n </Button>\n );\n};\n\nLoadingButtons.args = {\n variant: 'primary',\n icon: false\n};\n\nLoadingButtons.argTypes = {\n variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n return (\n <Button variant='primary' href='https://www.pega.com' target='_blank'>\n Go to pega.com\n </Button>\n );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <BareButton disabled={args.disabled} href={args.href \|\| undefined}>\n Click me\n </BareButton>\n );\n};\n\nBareButtonDemo.args = {\n disabled: false,\n href: ''\n};\n\nBareButtonDemo.argTypes = {\n disabled: { control: { type: 'boolean' } },\n href: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, ButtonProps, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Button',\n component: Button,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} compact={args.compact}>\n Click me\n </Button>\n );\n};\n\nButtonVariants.args = {\n variant: 'primary',\n compact: false\n};\n\nButtonVariants.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'simple', 'link', 'text'],\n control: { type: 'select' }\n },\n compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n return (\n <>\n <Button variant='primary' disabled>\n Primary disabled\n </Button>\n <Button variant='secondary' disabled>\n Secondary disabled\n </Button>\n <Button variant='simple' disabled>\n Simple disabled\n </Button>\n <Button variant='link' disabled>\n Link disabled\n </Button>\n <Button variant='text' disabled>\n Text disabled\n </Button>\n </>\n );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n return (\n <Flex container={{ alignItems: 'center' }}>\n <Button variant='primary' label='Icon button primary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='simple' label='Icon button simple' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='link' label='Icon button link' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='text' label='Icon button text' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n};\n\nIconButtons.args = {\n compact: false\n};\n\nIconButtons.argTypes = {\n compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n {args.icon ? <Icon name='plus' /> : 'Loading'}\n </Button>\n );\n};\n\nLoadingButtons.args = {\n variant: 'primary',\n icon: false\n};\n\nLoadingButtons.argTypes = {\n variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n return (\n <Button variant='primary' href='https://www.pega.com' target='_blank'>\n Go to pega.com\n </Button>\n );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <BareButton disabled={args.disabled} href={args.href \|\| undefined}>\n Click me\n </BareButton>\n );\n};\n\nBareButtonDemo.args = {\n disabled: false,\n href: ''\n};\n\nBareButtonDemo.argTypes = {\n disabled: { control: { type: 'boolean' } },\n href: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/Configuration/Configuration.stories.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 import { Button, Configuration, MenuButton, resetToInitial } from '@pega/cosmos-react-core';
-import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.stories';
+import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';
 export default {
     title: 'Core/Configuration',
     component: Configuration

package/jsx/core/Configuration/Configuration.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Configuration.stories.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,~~qDAAqD~~,CAAC;~~AAElF~~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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Configuration,\n MenuButton,\n resetToInitial,\n DefaultSettableTheme\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.~~stories~~';\n\nexport default {\n title: 'Core/Configuration',\n component: Configuration\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' \| 'theme1' }> = (args: {\n theme: 'default' \| 'theme1';\n}) => {\n const themes: Record<string, DefaultSettableTheme> = {\n default: {},\n theme1: {\n base: {\n palette: {\n interactive: '#AC75F0'\n }\n },\n components: {\n button: {\n 'border-radius': 1\n },\n 'form-control': {\n 'background-color': '#80008033',\n 'border-color': 'purple'\n },\n input: {\n height: '50px'\n }\n }\n }\n };\n\n return (\n <Configuration theme={themes[args.theme]}>\n <FormContent cols={1} showActions={false} />\n </Configuration>\n );\n};\n\nThemedForm.args = {\n theme: 'default'\n};\n\nThemedForm.argTypes = {\n theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n padding: 1rem 5%;\n margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n font-weight: bold;\n`;\n\nconst FlipFlop = ({\n flipFlop,\n first,\n second\n}: {\n flipFlop: boolean;\n first: string;\n second: string;\n}) => {\n return flipFlop ? (\n <>\n <BoldSpan>{first}</BoldSpan> → {second}\n </>\n ) : (\n <>\n {first} ← <BoldSpan>{second}</BoldSpan>\n </>\n );\n};\n\nexport const ThemingHierarchy = () => {\n const [redOrOrange, setRedOrOrange] = useState(true);\n const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n return (\n <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n <legend>Initial Theme</legend>\n <Button style={buttonStyles} variant='primary'>\n Base interactive\n </Button>\n <StyledFieldset>\n <legend>Override Interactive to</legend>\n <Configuration\n theme={{\n base: {\n palette: {\n interactive: redOrOrange ? 'red' : 'darkorange'\n }\n }\n }}\n >\n <Button\n style={buttonStyles}\n variant='primary'\n onClick={() => setRedOrOrange(val => !val)}\n >\n <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n </Button>\n <StyledFieldset>\n <legend>Override Button Primary BG to</legend>\n <Configuration\n theme={{\n components: {\n button: { color: greenOrPurple ? 'green' : 'purple' }\n }\n }}\n >\n <Button\n style={buttonStyles}\n variant='primary'\n onClick={() => setGreenOrPurple(val => !val)}\n >\n <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n </Button>\n <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n Secondary still inherits interactive\n </Button>\n <StyledFieldset>\n <legend>Reset Button BG</legend>\n <Configuration\n theme={{\n components: { button: { color: resetToInitial } }\n }}\n >\n <Button style={buttonStyles} variant='primary'>\n Inherited from interactive\n </Button>\n <StyledFieldset>\n <legend>Reset Interactive</legend>\n <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n <Button style={buttonStyles} variant='primary'>\n Inherited from base\n </Button>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </StyledFieldset>\n );\n};\n\nexport const OverridableActionMenu = () => {\n const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n return (\n <>\n <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n <Configuration overrideMap={{}}>\n <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n </Configuration>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"Configuration.stories.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Configuration,\n MenuButton,\n resetToInitial,\n DefaultSettableTheme\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';\n\nexport default {\n title: 'Core/Configuration',\n component: Configuration\n} as Meta;\n\nexport const ThemedForm: Story<{ theme: 'default' \| 'theme1' }> = (args: {\n theme: 'default' \| 'theme1';\n}) => {\n const themes: Record<string, DefaultSettableTheme> = {\n default: {},\n theme1: {\n base: {\n palette: {\n interactive: '#AC75F0'\n }\n },\n components: {\n button: {\n 'border-radius': 1\n },\n 'form-control': {\n 'background-color': '#80008033',\n 'border-color': 'purple'\n },\n input: {\n height: '50px'\n }\n }\n }\n };\n\n return (\n <Configuration theme={themes[args.theme]}>\n <FormContent cols={1} showActions={false} />\n </Configuration>\n );\n};\n\nThemedForm.args = {\n theme: 'default'\n};\n\nThemedForm.argTypes = {\n theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nconst buttonStyles = {\n width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n padding: 1rem 5%;\n margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n font-weight: bold;\n`;\n\nconst FlipFlop = ({\n flipFlop,\n first,\n second\n}: {\n flipFlop: boolean;\n first: string;\n second: string;\n}) => {\n return flipFlop ? (\n <>\n <BoldSpan>{first}</BoldSpan> → {second}\n </>\n ) : (\n <>\n {first} ← <BoldSpan>{second}</BoldSpan>\n </>\n );\n};\n\nexport const ThemingHierarchy = () => {\n const [redOrOrange, setRedOrOrange] = useState(true);\n const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n return (\n <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n <legend>Initial Theme</legend>\n <Button style={buttonStyles} variant='primary'>\n Base interactive\n </Button>\n <StyledFieldset>\n <legend>Override Interactive to</legend>\n <Configuration\n theme={{\n base: {\n palette: {\n interactive: redOrOrange ? 'red' : 'darkorange'\n }\n }\n }}\n >\n <Button\n style={buttonStyles}\n variant='primary'\n onClick={() => setRedOrOrange(val => !val)}\n >\n <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n </Button>\n <StyledFieldset>\n <legend>Override Button Primary BG to</legend>\n <Configuration\n theme={{\n components: {\n button: { color: greenOrPurple ? 'green' : 'purple' }\n }\n }}\n >\n <Button\n style={buttonStyles}\n variant='primary'\n onClick={() => setGreenOrPurple(val => !val)}\n >\n <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n </Button>\n <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n Secondary still inherits interactive\n </Button>\n <StyledFieldset>\n <legend>Reset Button BG</legend>\n <Configuration\n theme={{\n components: { button: { color: resetToInitial } }\n }}\n >\n <Button style={buttonStyles} variant='primary'>\n Inherited from interactive\n </Button>\n <StyledFieldset>\n <legend>Reset Interactive</legend>\n <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n <Button style={buttonStyles} variant='primary'>\n Inherited from base\n </Button>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </Configuration>\n </StyledFieldset>\n </StyledFieldset>\n );\n};\n\nexport const OverridableActionMenu = () => {\n const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n return (\n <>\n <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n <Configuration overrideMap={{}}>\n <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n </Configuration>\n </>\n );\n};\n"]}

package/jsx/core/DateTime/DateTimeDisplay.stories.jsx CHANGED Viewed

@@ -23,6 +23,7 @@ DateTimeDisplayDemo.args = {
     clockFormat: undefined
 };
 DateTimeDisplayDemo.argTypes = {
+    value: { control: { type: 'date' } },
     variant: {
         options: [
             'date',

package/jsx/core/DateTime/DateTimeDisplay.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimeDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EAEf,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAG,CAAC;AACzF,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;CACpB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE;QACP,OAAO,EAAE;YACP,MAAM;YACN,UAAU;YACV,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,WAAW;YACX,aAAa;YACb,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;KAClC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateTimeDisplay,\n DateTimeDisplayProps,\n DurationDisplay,\n DurationDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: Story<DurationDisplayProps> = (args: DurationDisplayProps) => {\n return <DurationDisplay value={args.value} significantUnits={args.significantUnits} />;\n};\n\nDurationDisplayDemo.args = {\n value: 462553844,\n significantUnits: 4\n};\n\nDurationDisplayDemo.argTypes = {\n value: { control: { type: 'number' } },\n significantUnits: { options: [1, 2, 3, 4], control: { type: 'select' } }\n};\n\nexport const DateTimeDisplayDemo: Story<DateTimeDisplayProps> = (args: DateTimeDisplayProps) => {\n return (\n <DateTimeDisplay\n value={args.value}\n variant={args.variant}\n format={args.format}\n clockFormat={args.clockFormat}\n />\n );\n};\n\nDateTimeDisplayDemo.args = {\n value: new Date(),\n variant: 'date',\n format: 'short',\n clockFormat: undefined\n};\n\nDateTimeDisplayDemo.argTypes = {\n variant: {\n options: [\n 'date',\n 'datetime',\n 'time',\n 'week',\n 'month',\n 'year',\n 'monthyear',\n 'quarteryear',\n 'relative'\n ],\n control: { type: 'select' }\n },\n format: { options: ['short', 'long', 'numeric'], control: { type: 'select' } },\n clockFormat: {\n options: [undefined, 12, 24],\n control: { type: 'inline-radio' }\n }\n};\n"]}
1	+ {"version":3,"file":"DateTimeDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/DateTime/DateTimeDisplay.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EAEf,eAAe,EAEhB,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAG,CAAC;AACzF,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,gBAAgB,EAAE,CAAC;CACpB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,gBAAgB,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,OAAO,CACL,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,MAAM;YACN,UAAU;YACV,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,WAAW;YACX,aAAa;YACb,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,WAAW,EAAE;QACX,OAAO,EAAE,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC;QAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;KAClC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateTimeDisplay,\n DateTimeDisplayProps,\n DurationDisplay,\n DurationDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime'\n} as Meta;\n\nexport const DurationDisplayDemo: Story<DurationDisplayProps> = (args: DurationDisplayProps) => {\n return <DurationDisplay value={args.value} significantUnits={args.significantUnits} />;\n};\n\nDurationDisplayDemo.args = {\n value: 462553844,\n significantUnits: 4\n};\n\nDurationDisplayDemo.argTypes = {\n value: { control: { type: 'number' } },\n significantUnits: { options: [1, 2, 3, 4], control: { type: 'select' } }\n};\n\nexport const DateTimeDisplayDemo: Story<DateTimeDisplayProps> = (args: DateTimeDisplayProps) => {\n return (\n <DateTimeDisplay\n value={args.value}\n variant={args.variant}\n format={args.format}\n clockFormat={args.clockFormat}\n />\n );\n};\n\nDateTimeDisplayDemo.args = {\n value: new Date(),\n variant: 'date',\n format: 'short',\n clockFormat: undefined\n};\n\nDateTimeDisplayDemo.argTypes = {\n value: { control: { type: 'date' } },\n variant: {\n options: [\n 'date',\n 'datetime',\n 'time',\n 'week',\n 'month',\n 'year',\n 'monthyear',\n 'quarteryear',\n 'relative'\n ],\n control: { type: 'select' }\n },\n format: { options: ['short', 'long', 'numeric'], control: { type: 'select' } },\n clockFormat: {\n options: [undefined, 12, 24],\n control: { type: 'inline-radio' }\n }\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;~~SASvB~~,CAAC"}
1	+ {"version":3,"file":"ExpandCollapse.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;SAcvB,CAAC"}

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

@@ -6,6 +6,11 @@ export const StyledRegion = styled.div(({ innerRegion, theme }) => {
     padding: calc(4 * ${theme.base.spacing});
     display: flex;
     justify-content: center;
+    button {
+      height: max-content;
+      align-self: center;
+    }
   `;
 });
 StyledRegion.defaultProps = defaultThemeProp;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO~~;;;GAGvC~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n return css`\n background-color: ${theme.base.palette[\n innerRegion ? 'primary-background' : 'secondary-background'\n ]};\n padding: calc(4 * ${theme.base.spacing});\n display: flex;\n justify-content: center;\n `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"ExpandCollapse.styles.js","sourceRoot":"","sources":["../../../src/core/ExpandCollapse/ExpandCollapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CACpC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAC5D;wBACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;GAQvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledRegion = styled.div<{ innerRegion?: boolean }>(({ innerRegion, theme }) => {\n return css`\n background-color: ${theme.base.palette[\n innerRegion ? 'primary-background' : 'secondary-background'\n ]};\n padding: calc(4 * ${theme.base.spacing});\n display: flex;\n justify-content: center;\n\n button {\n height: max-content;\n align-self: center;\n }\n `;\n});\n\nStyledRegion.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
+declare type FieldGroupReducerPayload = {
+    action: 'add';
+} | {
+    action: 'delete';
+    id: string;
+};
+export interface FieldMeta {
+    label: string;
+    type: 'text' | 'date' | 'file' | 'select' | 'textarea';
+}
+export interface GroupMeta {
+    label: string;
+    fields: FieldMeta[];
+}
+export declare const fieldGroupReducer: (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) => (items: FieldGroupListItemProps[], payload: FieldGroupReducerPayload) => FieldGroupListItemProps[];
+export declare const DemoFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const demoGroupMeta: GroupMeta;
+export {};
+//# sourceMappingURL=FieldGroupList.mocks.d.ts.map

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,uBAAuB,EAAS,MAAM,yBAAyB,CAAC;AAEpF,aAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC"}

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { createUID, Input } from '@pega/cosmos-react-core';
+export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
+    switch (payload.action) {
+        case 'add':
+            return [
+                ...items,
+                {
+                    name: `${groupMeta.label} ${items.length + 1}`,
+                    id: createUID(),
+                    children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label}/>)
+                }
+            ];
+        case 'delete':
+            return items
+                .filter(group => group.id !== payload.id)
+                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+        default:
+            return items;
+    }
+};
+export const DemoFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return <Input label={label}/>;
+    }
+    return null;
+};
+export const demoGroupMeta = {
+    label: 'Applicant',
+    fields: [
+        {
+            type: 'text',
+            label: 'Applicant name'
+        }
+    ]
+};
+//# sourceMappingURL=FieldGroupList.mocks.jsx.map

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldGroupList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAE5E;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;KAChC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n | {\n action: 'add';\n }\n | {\n action: 'delete';\n id: string;\n };\n\nexport interface FieldMeta {\n label: string;\n type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n (\n items: FieldGroupListItemProps[],\n payload: FieldGroupReducerPayload\n ): FieldGroupListItemProps[] => {\n switch (payload.action) {\n case 'add':\n return [\n ...items,\n {\n name: `${groupMeta.label} ${items.length + 1}`,\n id: createUID(),\n children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n }\n ];\n\n case 'delete':\n return items\n .filter(group => group.id !== payload.id)\n .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n default:\n return items;\n }\n };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n\n return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;~~AAkBA~~,wBAGE;~~AA+FF~~,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;~~AAoBF~~,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
1	+ {"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAyBA,wBAGE;AAiDF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}

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

@@ -1,29 +1,11 @@
 import { useReducer } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
 export default {
     title: 'Core/FieldGroupList',
     component: FieldGroupList
 };
-const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
-    switch (payload.action) {
-        case 'add':
-            return [
-                ...items,
-                {
-                    name: `${groupMeta.label} ${items.length + 1}`,
-                    id: createUID(),
-                    children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label}/>)
-                }
-            ];
-        case 'delete':
-            return items
-                .filter(group => group.id !== payload.id)
-                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
-        default:
-            return items;
-    }
-};
 const ExpensesFieldRenderer = ({ label, type }) => {
     if (type === 'text') {
         return <Input label={label}/>;
@@ -151,21 +133,6 @@ export const InsuranceDemo = () => {
         }}/>
     </Form>);
 };
-const DemoFieldRenderer = ({ label, type }) => {
-    if (type === 'text') {
-        return <Input label={label}/>;
-    }
-    return null;
-};
-const demoGroupMeta = {
-    label: 'Applicant',
-    fields: [
-        {
-            type: 'text',
-            label: 'Applicant name'
-        }
-    ]
-};
 export const FieldGroupListDemo = () => {
     const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
         {