@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<import("@pega/cosmos-react-condition-builder").ConditionBuilderProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const DefaultBuilder: () => JSX.Element;
+export declare const FieldConditionDemo: () => JSX.Element;
+export declare const AtomicConditionDemo: () => JSX.Element;
+//# sourceMappingURL=ConditionBuilder.stories.d.ts.map

package/jsx/condition-builder/ConditionBuilder/ConditionBuilder.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.stories.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":";;;;;AAgDA,wBAGE;AAEF,eAAO,MAAM,cAAc,mBAiG1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAoF9B,CAAC;AAgBF,eAAO,MAAM,mBAAmB,mBA+J/B,CAAC"}

package/jsx/condition-builder/ConditionBuilder/props.mock.d.ts

@@ -0,0 +1,6 @@
+import { ComparatorsByType, Condition, DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';
+export declare const demoFields: Field[];
+export declare const demoCondition: Condition;
+export declare const demoComparators: ComparatorsByType[];
+export declare const demoDateFunctions: DateFunctionsByType;
+//# sourceMappingURL=props.mock.d.ts.map

package/jsx/condition-builder/ConditionBuilder/props.mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.mock.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACnB,KAAK,EACN,MAAM,sCAAsC,CAAC;AAE9C,eAAO,MAAM,UAAU,EAAE,KAAK,EAkD7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAiC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,EAI9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAqB/B,CAAC"}

package/jsx/condition-builder/ConditionBuilder/props.mock.js

@@ -0,0 +1,113 @@
+export const demoFields = [
+    { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
+    { name: 'firstName', label: 'First Name', type: 'TEXT' },
+    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
+    { name: 'gender', label: 'Gender', type: 'TEXT' },
+    {
+        name: 'department',
+        label: 'Department',
+        type: 'TEXT',
+        possibleValues: [
+            'Customer Service',
+            'Engineering',
+            'Facilities',
+            'Finance',
+            'HR',
+            'IT',
+            'Sales'
+        ]
+    },
+    { name: 'age', label: 'Age', type: 'NUMBER' },
+    { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },
+    { name: 'salary', label: 'Salary', type: 'NUMBER' },
+    { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },
+    { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },
+    {
+        name: 'shiftStartTime',
+        label: 'Shift start time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'shiftEndTime',
+        label: 'Shift end time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'lastActivityAt',
+        label: 'Last activity at',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'nextPasswordReset',
+        label: 'Next password reset',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }
+];
+export const demoCondition = {
+    AND: [
+        {
+            condition: {
+                lhs: {
+                    field: 'lastActivityAt'
+                },
+                comparator: 'EQ',
+                rhs: {
+                    value: '2021-08-13T14:30'
+                }
+            }
+        },
+        {
+            NOT: {
+                OR: [
+                    {
+                        condition: {
+                            lhs: { field: 'experience' },
+                            comparator: 'GTE',
+                            rhs: { value: 10 }
+                        }
+                    },
+                    {
+                        condition: {
+                            lhs: { field: 'isRemoteEmployee' },
+                            comparator: 'IS_TRUE'
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};
+export const demoComparators = [
+    { type: 'TEXT', comparators: ['EQ', 'NEQ'] },
+    { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },
+    { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }
+];
+export const demoDateFunctions = {
+    DATE_TIME: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'DAYS',
+        'HOURS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ],
+    DATE_ONLY: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ]
+};
+//# sourceMappingURL=props.mock.js.map

package/jsx/condition-builder/ConditionBuilder/props.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.mock.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ComparatorsByType,\n  Condition,\n  DateFunctionsByType,\n  Field\n} from '@pega/cosmos-react-condition-builder';\n\nexport const demoFields: Field[] = [\n  { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n  { name: 'firstName', label: 'First Name', type: 'TEXT' },\n  { name: 'lastName', label: 'Last Name', type: 'TEXT' },\n  { name: 'gender', label: 'Gender', type: 'TEXT' },\n  {\n    name: 'department',\n    label: 'Department',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      'Sales'\n    ]\n  },\n  { name: 'age', label: 'Age', type: 'NUMBER' },\n  { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n  { name: 'salary', label: 'Salary', type: 'NUMBER' },\n  { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n  { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    name: 'shiftStartTime',\n    label: 'Shift start time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'shiftEndTime',\n    label: 'Shift end time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'lastActivityAt',\n    label: 'Last activity at',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'nextPasswordReset',\n    label: 'Next password reset',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'lastActivityAt'\n        },\n        comparator: 'EQ',\n        rhs: {\n          value: '2021-08-13T14:30'\n        }\n      }\n    },\n    {\n      NOT: {\n        OR: [\n          {\n            condition: {\n              lhs: { field: 'experience' },\n              comparator: 'GTE',\n              rhs: { value: 10 }\n            }\n          },\n          {\n            condition: {\n              lhs: { field: 'isRemoteEmployee' },\n              comparator: 'IS_TRUE'\n            }\n          }\n        ]\n      }\n    }\n  ]\n};\n\nexport const demoComparators: ComparatorsByType[] = [\n  { type: 'TEXT', comparators: ['EQ', 'NEQ'] },\n  { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },\n  { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n"]}

package/jsx/core/AppShell/AppShell.mocks.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { AppShellProps, DrawerItemProps, ForwardProps } from '@pega/cosmos-react-core';
+export declare const defaultLinks: AppShellProps['links'];
+export declare const defaultNotifications: (DrawerItemProps & ForwardProps)[];
+export declare const defaultRecents: (DrawerItemProps & ForwardProps)[];
+export declare const defaultMainContent: JSX.Element;
+export declare const operatorData: {
+    avatar: JSX.Element;
+    actions: {
+        text: string;
+        id: string;
+    }[];
+    name: string;
+};
+//# sourceMappingURL=AppShell.mocks.d.ts.map

package/jsx/core/AppShell/AppShell.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,eAAe,EAEf,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,OAAO,CAsD/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA6BlE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA8C5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAUxB,CAAC"}

package/jsx/core/AppShell/AppShell.stories.d.ts

@@ -0,0 +1,31 @@
+import { Meta, Story } from '@storybook/react';
+import { AppShellProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface AppShellStoryProps {
+    main?: AppShellProps['main'];
+    appInfo?: AppShellProps['appInfo'];
+    banners?: AppShellProps['banners'];
+    cases?: AppShellProps['cases'];
+    caseLinks?: AppShellProps['links'];
+    createLinks?: any[];
+    recentItems?: any[];
+    utils?: AppShellProps['utils'];
+    onLinkClick?: (name: string) => void;
+    appName?: AppShellProps['appInfo']['appName'];
+    portalName?: AppShellProps['appInfo']['portalName'];
+    href?: AppShellProps['appInfo']['href'];
+    imageSrc?: AppShellProps['appInfo']['imageSrc'];
+    fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];
+    withSearch?: boolean;
+    appHeader?: AppShellProps['appHeader'];
+    environmentName?: string;
+    environmentColor?: string;
+    notificationsEmpty?: boolean;
+    notificationsLoading?: boolean;
+    recentsEmpty?: boolean;
+    recentsLoading?: boolean;
+    pinsLoading?: boolean;
+}
+export declare const AppShellDemo: Story<AppShellStoryProps>;
+//# sourceMappingURL=AppShell.stories.d.ts.map

package/jsx/core/AppShell/AppShell.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAkBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC"}

package/jsx/core/AppShell/AppShell.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledMainContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=AppShell.styles.d.ts.map

package/jsx/core/AppShell/AppShell.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yGAE7B,CAAC"}

package/jsx/core/AppShell/AppShell.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const StyledMainContent = styled.div `
+  min-height: inherit;
+`;
+//# sourceMappingURL=AppShell.styles.js.map

package/jsx/core/AppShell/AppShell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE1C,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMainContent = styled.div`\n  min-height: inherit;\n`;\n"]}

package/jsx/core/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { AvatarProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const DefaultAvatar: Story<AvatarProps>;
+export declare const TextOnlyAvatar: Story<AvatarProps>;
+export declare const TransparentAvatar: Story<AvatarProps>;
+export declare const IconAvatar: Story<AvatarProps>;
+export declare const StatusAvatar: Story<AvatarProps>;
+//# sourceMappingURL=Avatar.stories.d.ts.map

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

@@ -0,0 +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

@@ -0,0 +1,50 @@
+import { Avatar, icons } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Avatar',
+    component: Avatar,
+    args: {
+        shape: 'circle',
+        size: 'm',
+        name: 'John Doe'
+    },
+    argTypes: {
+        shape: { options: ['circle', 'squircle'], control: { type: 'select' } },
+        size: { options: ['s', 'm', 'l'], control: { type: 'select' } },
+        name: { control: { type: 'text' } }
+    }
+};
+export const DefaultAvatar = (args) => {
+    return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc}/>;
+};
+DefaultAvatar.args = {
+    name: 'Pegasystems',
+    imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
+};
+DefaultAvatar.argTypes = {
+    imageSrc: { control: { type: 'text' } }
+};
+export const TextOnlyAvatar = (args) => {
+    return <Avatar shape={args.shape} size={args.size} name={args.name}/>;
+};
+export const TransparentAvatar = (args) => {
+    return (<Avatar shape={args.shape} size={args.size} name={args.name} imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'/>);
+};
+export const IconAvatar = (args) => {
+    return <Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon}/>;
+};
+IconAvatar.args = {
+    icon: 'headset'
+};
+IconAvatar.argTypes = {
+    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}/>;
+};
+StatusAvatar.args = {
+    status: 'active'
+};
+StatusAvatar.argTypes = {
+    status: { options: ['active', undefined], control: { type: 'select' } }
+};
+//# sourceMappingURL=Avatar.stories.jsx.map

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

@@ -0,0 +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/Backdrop/Backdrop.stories.d.ts

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

package/jsx/core/Backdrop/Backdrop.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Backdrop/Backdrop.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAY,aAAa,EAAmC,MAAM,yBAAyB,CAAC;;AAEnG,wBAaU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAqB7C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,aAAa,CAwBxD,CAAC"}

package/jsx/core/Badges/Alert.stories.d.ts

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

package/jsx/core/Badges/Alert.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Alert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,UAAU,CAExC,CAAC"}

package/jsx/core/Badges/Count.stories.d.ts

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

package/jsx/core/Badges/Count.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Count.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Count.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,UAAU,CAExC,CAAC"}

package/jsx/core/Badges/Selection.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const SelectableBadge: () => JSX.Element;
+//# sourceMappingURL=Selection.stories.d.ts.map

package/jsx/core/Badges/Selection.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Selection.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAIxC,wBAGU;AAEV,eAAO,MAAM,eAAe,mBAE3B,CAAC"}

package/jsx/core/Badges/Status.stories.d.ts

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

package/jsx/core/Badges/Status.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAE1C,CAAC"}

package/jsx/core/Badges/Tag.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const TagBadge: () => JSX.Element;
+//# sourceMappingURL=Tag.stories.d.ts.map

package/jsx/core/Badges/Tag.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAIxC,wBAGU;AAEV,eAAO,MAAM,QAAQ,mBAEpB,CAAC"}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const SuccessBanner: () => JSX.Element;
+export declare const ErrorBanner: () => JSX.Element;
+export declare const WarningBanner: () => JSX.Element;
+export declare const InfoBanner: () => JSX.Element;
+export declare const ShownInForm: () => JSX.Element;
+export declare const ShownInCaseView: {
+    (): JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export declare const ShownInAppShell: {
+    (): JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+//# sourceMappingURL=Banner.stories.d.ts.map

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

@@ -0,0 +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

@@ -0,0 +1,87 @@
+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
+};
+export const SuccessBanner = () => {
+    const [showBanner, setShowBanner] = useState(true);
+    return (<>
+      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}
+      {showBanner && (<Banner id='success' variant='success' onDismiss={() => setShowBanner(false)} heading='2 items uploaded successfully' messages={['pega_data.json', 'business-earnings.xlsx']}/>)}
+    </>);
+};
+export const ErrorBanner = () => {
+    return (<Banner id='error' variant='urgent' heading='Error' action={<div>
+          <Button variant='link'>Try again</Button>
+        </div>} messages={['Your request failed to send!', 'Please review your request and try again']}/>);
+};
+export const WarningBanner = () => {
+    return (<Banner id='warning' variant='warning' action={<div>
+          <Button variant='link'>Why this matters</Button>
+        </div>} messages={['Your submission is missing some important documents.']}/>);
+};
+export const InfoBanner = () => {
+    const [showBanner, setShowBanner] = useState(true);
+    return (<>
+      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}
+      {showBanner && (<Banner id='info' variant='info' onDismiss={() => setShowBanner(false)} messages={[
+                'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'
+            ]}/>)}
+    </>);
+};
+export const ShownInForm = () => {
+    const [fields, setField] = useReducer(fieldReducer, demoFields);
+    const [banner, setBanner] = useState();
+    const onSubmit = useCallback((e) => {
+        e.preventDefault();
+        const errorFields = fields.filter(field => !field.validator(field.value));
+        let heading = 'Wow, great job!';
+        let variant = 'success';
+        let messages = fields.map(f => `${f.name} was typed perfectly`);
+        let bannerAction;
+        if (errorFields.length > 0) {
+            heading = "I'm sorry you're having trouble";
+            variant = 'urgent';
+            messages = errorFields.map(f => `${f.name} was not typed correctly`);
+            bannerAction = (<Link href='https://community.pega.com/support' target='_blank'>
+          Visit Pega support for assistance
+        </Link>);
+        }
+        setBanner(<Banner {...{
+            heading,
+            variant,
+            messages,
+            id: 'formBanner',
+            action: bannerAction,
+            onDismiss() {
+                setBanner(false);
+            }
+        }}/>);
+    }, []);
+    return (<Form banners={banner} actions={formActions} onSubmit={onSubmit} style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}>
+      {fields.map((field) => {
+            return (<Input key={field.name} autoComplete='off' name={field.name} label={field.label} info={field.info} value={field.value} onChange={(e) => setField(e.target)}/>);
+        })}
+    </Form>);
+};
+export const ShownInCaseView = () => {
+    const [hasBanner, setHasBanner] = useState(true);
+    return (<CaseViewDemo banners={hasBanner && (<Banner id='case-view-error' heading='Waring' onDismiss={() => setHasBanner(false)} variant='warning' messages={['Your submission is missing some important documents.']}/>)}/>);
+};
+ShownInCaseView.parameters = {
+    layout: 'fullscreen'
+};
+export const ShownInAppShell = () => {
+    const [hasBanner, setHasBanner] = useState([]);
+    return (<AppShellDemo banners={hasBanner && (<Banner id='app-shell-banner-success' heading='2 items uploaded successfully' onDismiss={() => setHasBanner([])} variant='success' messages={['pega_data.json', 'business-earnings.xlsx']} action={<Link target='_blank' href='https://www.pega.com'>
+                Link Here!
+              </Link>}/>)}/>);
+};
+ShownInAppShell.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Banner.stories.jsx.map