@pega/cosmos-react-demos 4.0.0-dev.8.3 → 4.0.0-dev.9.0

package/lib/build/PageTemplates/GalleryPage.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACvF,MAAM,eAAe,GAAG,CAAC,EACvB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACL,EAAE,EAAE,CAAC,CACrB,KAAC,WAAW,IACV,OAAO,EAAE,aAAa,EACtB,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE;YACL,GAAG,EAAE,kGAAkG;YACvG,GAAG,EAAE,sBAAsB;SAC5B,EACD,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAClD,UAAU,EAAE;YACV,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,qBAAqB;SACnC,EACD,MAAM,EAAE;YACN,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;SAClD,EACD,WAAW,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAC/C,CACH,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,KAAC,eAAe,OAAK,IAAI,GAAI,EACnC,OAAO,QACP,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,kBAAkB,EACvB,qBAAqB,QACrB,WAAW,QACX,UAAU,SACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,aAAa,EAAE,cAAc;IAC7B,iBAAiB,EAAE,iCAAiC;IACpD,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { GalleryPage } from '@pega/cosmos-react-build';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n  title: 'Build/GalleryPage',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  bannerHeading: string;\n  bannerDescription: string;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n}\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  const GalleryPageDemo = ({\n    bannerHeading,\n    bannerDescription,\n    showEmptyState,\n    emptyStateHeading,\n    emptyStateDescription\n  }: GalleryPageArgs) => (\n    <GalleryPage\n      heading={bannerHeading}\n      description={bannerDescription}\n      image={{\n        src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n        alt: 'Image for the banner'\n      }}\n      items={showEmptyState ? [] : getOverviewCardData()}\n      emptyState={{\n        heading: emptyStateHeading,\n        description: emptyStateDescription\n      }}\n      action={{\n        text: 'New application',\n        onClick: action('Clicked New application button')\n      }}\n      onItemClick={action('Clicked interactive card')}\n    />\n  );\n\n  return (\n    <AppShellDemo\n      main={<GalleryPageDemo {...args} />}\n      hideNav\n      appName='Compass App'\n      text='Launchpad (Main)'\n      showAppNameAndVersion\n      showPreview\n      showBranch\n    />\n  );\n};\n\nAppShellWithGalleryPage.args = {\n  bannerHeading: 'Applications',\n  bannerDescription: 'Edit or create new applications',\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n  bannerHeading: { control: { type: 'text' } },\n  bannerDescription: { control: { type: 'text' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"GalleryPage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAmB,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAaV,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,aAAa,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EACH,IAAI,CAAC,SAAS;gBACZ,CAAC,CAAC;oBACE,GAAG,EAAE,kGAAkG;oBACvG,GAAG,EAAE,sBAAsB;iBAC5B;gBACH,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW;gBACd,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,iBAAiB;wBACxB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;qBAC1C;iBACF;gBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EACvE,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EACvD,UAAU,EAAE;gBACV,OAAO,EAAE,IAAI,CAAC,iBAAiB;gBAC/B,WAAW,EAAE,IAAI,CAAC,qBAAqB;aACxC,EACD,WAAW,EACT,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAE1F,EAEJ,OAAO,QACP,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,kBAAkB,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,iCAAiC;IAC9C,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { linkTo } from '@storybook/addon-links';\n\nimport { GalleryPage, PageBannerProps } from '@pega/cosmos-react-build';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n  title: 'Build/PageTemplates',\n  component: GalleryPage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GalleryPageArgs {\n  title: PageBannerProps['title'];\n  description: PageBannerProps['description'];\n  showImage?: boolean;\n  showActions?: boolean;\n  showEmptyState: boolean;\n  emptyStateHeading: string;\n  emptyStateDescription: string;\n  disableCrossLinking?: boolean;\n}\n\nexport const GalleryPageDemo: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n  return (\n    <AppShellDemo\n      main={\n        <GalleryPage\n          title={args.title || 'Application'}\n          description={args.description}\n          image={\n            args.showImage\n              ? {\n                  src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n                  alt: 'Image for the banner'\n                }\n              : undefined\n          }\n          actions={\n            args.showActions\n              ? [\n                  {\n                    label: 'New application',\n                    onClick: action('Banner action clicked!')\n                  }\n                ]\n              : undefined\n          }\n          link={args.showActions ? { label: 'Learn more', href: '#' } : undefined}\n          items={args.showEmptyState ? [] : getOverviewCardData()}\n          emptyState={{\n            heading: args.emptyStateHeading,\n            description: args.emptyStateDescription\n          }}\n          onItemClick={\n            args.disableCrossLinking ? action('Clicked interactive card') : linkTo('Build/AppShell')\n          }\n        />\n      }\n      hideNav\n      appName='Compass App'\n      text='Launchpad (Main)'\n    />\n  );\n};\n\nGalleryPageDemo.args = {\n  title: 'Applications',\n  description: 'Edit or create new applications',\n  showImage: true,\n  showActions: true,\n  showEmptyState: false,\n  emptyStateHeading: 'Create your first application',\n  emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nGalleryPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  showImage: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } },\n  showEmptyState: { control: { type: 'boolean' } },\n  emptyStateHeading: { control: { type: 'text' } },\n  emptyStateDescription: { control: { type: 'text' } }\n};\n"]}

package/lib/build/PageTemplates/ShowcasePage.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/react';
+import { PageBannerProps } from '@pega/cosmos-react-build';
+import { ImageProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface ShowcasePageArgs {
+    title: PageBannerProps['title'];
+    description: PageBannerProps['description'];
+    actionLabel?: string;
+    imageSrc?: ImageProps['src'];
+    imageAlt?: ImageProps['alt'];
+    showImage?: boolean;
+    showActions?: boolean;
+    showBanners?: boolean;
+}
+export declare const ShowcasePageDemo: Story<ShowcasePageArgs>;
+//# sourceMappingURL=ShowcasePage.stories.d.ts.map

package/lib/build/PageTemplates/ShowcasePage.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowcasePage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/ShowcasePage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAMrD,wBAMU;AAEV,UAAU,gBAAgB;IACxB,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,CAwCpD,CAAC"}

package/lib/build/PageTemplates/ShowcasePage.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { ShowcasePage } from '@pega/cosmos-react-build';
+import { BannerDemo } from '../../core/Banner/Banner.stories';
+import { TableDemo } from '../../core/Table/Table.stories';
+import { AppShellDemo } from '../AppShell/AppShell.stories';
+export default {
+    title: 'Build/PageTemplates',
+    component: ShowcasePage,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ShowcasePageDemo = (args) => {
+    return (_jsx(AppShellDemo, { main: _jsx(ShowcasePage, { title: args.title || 'Live Data', description: args.description, image: args.showImage
+                ? {
+                    src: args.imageSrc || './build-live-data.svg',
+                    alt: args.imageAlt || 'Image for the banner'
+                }
+                : undefined, actions: args.showActions
+                ? [
+                    {
+                        label: args.actionLabel || 'Add Data Type',
+                        onClick: action('Banner action clicked!')
+                    }
+                ]
+                : undefined, link: args.showActions ? { label: 'Learn more', href: '#' } : undefined, content: _jsx(TableDemo, { title: args.title || 'Live Data' }), banners: args.showBanners ? _jsx(BannerDemo, { variant: 'urgent', disableFocusControl: true }) : undefined }), appName: 'Compass App', text: 'Launchpad (Main)', showAppNameAndVersion: true, showPreview: true, showBranch: true, currentItemId: 'liveData' }));
+};
+ShowcasePageDemo.args = {
+    title: 'Live Data',
+    description: 'Live Data allows users to quickly and easily define the data required to build the apps they need, and then access that data in their running application - all without having to worry about how and where the data is actually stored and accessed.',
+    showImage: true,
+    showActions: true,
+    showBanners: false
+};
+ShowcasePageDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    showImage: { control: { type: 'boolean' } },
+    showActions: { control: { type: 'boolean' } },
+    showBanners: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=ShowcasePage.stories.js.map

package/lib/build/PageTemplates/ShowcasePage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowcasePage.stories.js","sourceRoot":"","sources":["../../../src/build/PageTemplates/ShowcasePage.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,YAAY,EAAmB,MAAM,0BAA0B,CAAC;AAGzE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAaV,MAAM,CAAC,MAAM,gBAAgB,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,EAChC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EACH,IAAI,CAAC,SAAS;gBACZ,CAAC,CAAC;oBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,uBAAuB;oBAC7C,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,sBAAsB;iBAC7C;gBACH,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW;gBACd,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,eAAe;wBAC1C,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;qBAC1C;iBACF;gBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,EACvE,OAAO,EAAE,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,GAAI,EACxD,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,EAAC,mBAAmB,SAAG,CAAC,CAAC,CAAC,SAAS,GAEpF,EAEJ,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,kBAAkB,EACvB,qBAAqB,QACrB,WAAW,QACX,UAAU,QACV,aAAa,EAAC,UAAU,GACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,WAAW;IAClB,WAAW,EACT,uPAAuP;IACzP,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ShowcasePage, PageBannerProps } from '@pega/cosmos-react-build';\nimport { ImageProps } from '@pega/cosmos-react-core';\n\nimport { BannerDemo } from '../../core/Banner/Banner.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nexport default {\n  title: 'Build/PageTemplates',\n  component: ShowcasePage,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface ShowcasePageArgs {\n  title: PageBannerProps['title'];\n  description: PageBannerProps['description'];\n  actionLabel?: string;\n  imageSrc?: ImageProps['src'];\n  imageAlt?: ImageProps['alt'];\n  showImage?: boolean;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const ShowcasePageDemo: Story<ShowcasePageArgs> = (args: ShowcasePageArgs) => {\n  return (\n    <AppShellDemo\n      main={\n        <ShowcasePage\n          title={args.title || 'Live Data'}\n          description={args.description}\n          image={\n            args.showImage\n              ? {\n                  src: args.imageSrc || './build-live-data.svg',\n                  alt: args.imageAlt || 'Image for the banner'\n                }\n              : undefined\n          }\n          actions={\n            args.showActions\n              ? [\n                  {\n                    label: args.actionLabel || 'Add Data Type',\n                    onClick: action('Banner action clicked!')\n                  }\n                ]\n              : undefined\n          }\n          link={args.showActions ? { label: 'Learn more', href: '#' } : undefined}\n          content={<TableDemo title={args.title || 'Live Data'} />}\n          banners={\n            args.showBanners ? <BannerDemo variant='urgent' disableFocusControl /> : undefined\n          }\n        />\n      }\n      appName='Compass App'\n      text='Launchpad (Main)'\n      showAppNameAndVersion\n      showPreview\n      showBranch\n      currentItemId='liveData'\n    />\n  );\n};\n\nShowcasePageDemo.args = {\n  title: 'Live Data',\n  description:\n    'Live Data allows users to quickly and easily define the data required to build the apps they need, and then access that data in their running application - all without having to worry about how and where the data is actually stored and accessed.',\n  showImage: true,\n  showActions: true,\n  showBanners: false\n};\n\nShowcasePageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  showImage: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -207,14 +207,14 @@ export const demoDateFunctions = {
         'QUARTERS',
         'MONTHS',
         'WEEKS',
-        'MINUTES',
-        'SECONDS',
         'DAYS',
         'HOURS',
-        'HOURS_OF_DAY',
+        'MINUTES',
+        'SECONDS',
         'MONTHS_OF_YEAR',
         'DAYS_OF_MONTH',
-        'DAYS_OF_WEEK'
+        'DAYS_OF_WEEK',
+        'HOURS_OF_DAY'
     ],
     DATE_ONLY: [
         'YEARS',

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

@@ -1 +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  {\n    id: 'employeeId',\n    primary: 'Employee ID',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      ' Sales '\n    ]\n  },\n  {\n    id: 'details',\n    primary: 'Details',\n    items: [\n      {\n        id: 'details.firstName',\n        primary: 'First Name',\n        type: 'TEXT'\n      },\n      {\n        id: 'details.lastName',\n        primary: 'Last Name',\n        type: 'TEXT',\n        possibleValues: () => {\n          return new Promise(resolve => {\n            setTimeout(() => {\n              resolve([\n                'Value 1',\n                'Value 2',\n                'Value 3',\n                'Value 4',\n                'Value 5',\n                'Value 6',\n                'Value 7'\n              ]);\n            }, 5000);\n          });\n        }\n      },\n      { id: 'details.gender', primary: 'Gender', type: 'TEXT' },\n      {\n        id: 'details.age',\n        primary: 'Age',\n        type: 'NUMBER'\n      },\n      {\n        id: 'details.profileDetails',\n        primary: 'Profile Details',\n        items: [\n          {\n            id: 'details.profileDetails.experience',\n            primary: 'Experience (yrs)',\n            type: 'NUMBER'\n          },\n          {\n            id: 'details.profileDetails.department',\n            primary: 'Department',\n            type: 'TEXT',\n            possibleValues: [\n              'Customer Service',\n              'Engineering',\n              'Facilities',\n              'Finance',\n              'HR',\n              'IT',\n              'Sales'\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: 'salary',\n    primary: 'Salary',\n    type: 'NUMBER'\n  },\n  { id: 'hireDate', primary: 'Hire Date', type: 'DATE_ONLY' },\n  { id: 'dateOfBirth', primary: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    id: 'technicalDetails',\n    primary: 'Technical details',\n    items: [\n      {\n        id: 'technicalDetails.shiftStartTime',\n        primary: 'Shift start time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.shiftEndTime',\n        primary: 'Shift end time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.lastActivityAt',\n        primary: 'Last activity at',\n        type: 'DATE_TIME'\n      },\n      {\n        id: 'technicalDetails.nextPasswordReset',\n        primary: 'Next password reset',\n        type: 'DATE_TIME'\n      }\n    ]\n  },\n  { id: 'isSeniorCitizen', primary: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { id: 'isRemoteEmployee', primary: 'Is Remote Employee', type: 'BOOLEAN' },\n  {\n    id: 'createOperator',\n    primary: 'Create operator',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOperator',\n        primary: 'Current operator'\n      },\n      {\n        id: 'manager',\n        primary: 'Manager'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'organization',\n    primary: 'Organization',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOrganization',\n        primary: 'Current organization'\n      }\n    ]\n  },\n  {\n    id: 'workgroup',\n    primary: 'Workgroup',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentWorkgroup',\n        primary: 'Current workgroup'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'invalidField',\n    primary: 'Invalid Field',\n    type: 'TEXT',\n    possibleValues: () => {\n      return new Promise((_, reject) => {\n        setTimeout(() => {\n          reject(new Error());\n        }, 5000);\n      });\n    }\n  }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'technicalDetails.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: 'details.profileDetails.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    'MINUTES',\n    'SECONDS',\n    'DAYS',\n    'HOURS',\n    'HOURS_OF_DAY',\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"]}
+{"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  {\n    id: 'employeeId',\n    primary: 'Employee ID',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      ' Sales '\n    ]\n  },\n  {\n    id: 'details',\n    primary: 'Details',\n    items: [\n      {\n        id: 'details.firstName',\n        primary: 'First Name',\n        type: 'TEXT'\n      },\n      {\n        id: 'details.lastName',\n        primary: 'Last Name',\n        type: 'TEXT',\n        possibleValues: () => {\n          return new Promise(resolve => {\n            setTimeout(() => {\n              resolve([\n                'Value 1',\n                'Value 2',\n                'Value 3',\n                'Value 4',\n                'Value 5',\n                'Value 6',\n                'Value 7'\n              ]);\n            }, 5000);\n          });\n        }\n      },\n      { id: 'details.gender', primary: 'Gender', type: 'TEXT' },\n      {\n        id: 'details.age',\n        primary: 'Age',\n        type: 'NUMBER'\n      },\n      {\n        id: 'details.profileDetails',\n        primary: 'Profile Details',\n        items: [\n          {\n            id: 'details.profileDetails.experience',\n            primary: 'Experience (yrs)',\n            type: 'NUMBER'\n          },\n          {\n            id: 'details.profileDetails.department',\n            primary: 'Department',\n            type: 'TEXT',\n            possibleValues: [\n              'Customer Service',\n              'Engineering',\n              'Facilities',\n              'Finance',\n              'HR',\n              'IT',\n              'Sales'\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: 'salary',\n    primary: 'Salary',\n    type: 'NUMBER'\n  },\n  { id: 'hireDate', primary: 'Hire Date', type: 'DATE_ONLY' },\n  { id: 'dateOfBirth', primary: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    id: 'technicalDetails',\n    primary: 'Technical details',\n    items: [\n      {\n        id: 'technicalDetails.shiftStartTime',\n        primary: 'Shift start time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.shiftEndTime',\n        primary: 'Shift end time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.lastActivityAt',\n        primary: 'Last activity at',\n        type: 'DATE_TIME'\n      },\n      {\n        id: 'technicalDetails.nextPasswordReset',\n        primary: 'Next password reset',\n        type: 'DATE_TIME'\n      }\n    ]\n  },\n  { id: 'isSeniorCitizen', primary: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { id: 'isRemoteEmployee', primary: 'Is Remote Employee', type: 'BOOLEAN' },\n  {\n    id: 'createOperator',\n    primary: 'Create operator',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOperator',\n        primary: 'Current operator'\n      },\n      {\n        id: 'manager',\n        primary: 'Manager'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'organization',\n    primary: 'Organization',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOrganization',\n        primary: 'Current organization'\n      }\n    ]\n  },\n  {\n    id: 'workgroup',\n    primary: 'Workgroup',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentWorkgroup',\n        primary: 'Current workgroup'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'invalidField',\n    primary: 'Invalid Field',\n    type: 'TEXT',\n    possibleValues: () => {\n      return new Promise((_, reject) => {\n        setTimeout(() => {\n          reject(new Error());\n        }, 5000);\n      });\n    }\n  }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'technicalDetails.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: 'details.profileDetails.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    'MINUTES',\n    'SECONDS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK',\n    'HOURS_OF_DAY'\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/lib/core/AppShell/AppShell.mocks.js

@@ -127,7 +127,7 @@ export const defaultRecents = [
         secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
     }
 ];
-export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }) }) }) }));
+export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h1', children: "This is the main content" }) }) }) }));
 export const operatorData = {
     avatar: _jsx(Avatar, { name: 'Cindy Turner' }),
     actions: [

package/lib/core/AppShell/AppShell.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { primary: 'Profile', id: 'profile' },\n    { primary: 'Settings', id: 'settings' },\n    { primary: 'My applications', id: 'apps' },\n    { primary: 'Help center', id: 'help' },\n    { primary: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}
+{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h1'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { primary: 'Profile', id: 'profile' },\n    { primary: 'Settings', id: 'settings' },\n    { primary: 'My applications', id: 'apps' },\n    { primary: 'Help center', id: 'help' },\n    { primary: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}

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

@@ -24,6 +24,7 @@ interface AppShellStoryProps {
     fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];
     withSearch?: boolean;
     appHeader?: AppShellProps['appHeader'];
+    progress?: AppShellProps['progress'];
     environmentName?: string;
     environmentColor?: string;
     notificationsEmpty?: boolean;

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

@@ -1 +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,EAqBd,MAAM,yBAAyB,CAAC;;AAgBjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,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;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,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,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,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,CA0RlD,CAAC;AAwCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}
+{"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,EAsBd,MAAM,yBAAyB,CAAC;;AAgBjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,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;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,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,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,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,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,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,CA2SlD,CAAC;AA0CF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}

package/lib/core/AppShell/AppShell.stories.js

@@ -35,22 +35,35 @@ export const AppShellDemo = (args) => {
     const [searchLoading, setSearchLoading] = useState(false);
     const [results, setResults] = useState([]);
     const [searchTimeout, setSearchTimeout] = useState();
+    const [progress, setProgress] = useState('');
     useAfterInitialEffect(() => {
         setLinks(caseLinks);
     }, [caseLinks]);
-    const linksWithHandlers = useMemo(() => {
-        return (links || []).map(link => ({
+    const addHandlersToLinks = (appShellLinks) => {
+        return (appShellLinks || []).map(link => ({
             ...link,
             onClick(e) {
                 e.preventDefault();
                 setLinks((prevLinks = []) => {
                     return prevLinks.map(prevLink => {
-                        return { ...prevLink, active: prevLink.name === link.name };
+                        return {
+                            ...prevLink,
+                            active: prevLink.name === link.name ||
+                                !!prevLink.links?.filter(l => l.name === link.name).length
+                        };
                     });
                 });
-                args.onLinkClick?.(link.name);
-            }
+                setProgress(`${link.name} loading...`);
+                setTimeout(() => {
+                    args.onLinkClick?.(link.name);
+                    setProgress('');
+                }, 1000);
+            },
+            links: link.links ? addHandlersToLinks(link.links) : undefined
         }));
+    };
+    const linksWithHandlers = useMemo(() => {
+        return addHandlersToLinks(links);
     }, [links]);
     const defaultCreateLinks = [
         'Vehicle Purchase',
@@ -184,7 +197,7 @@ export const AppShellDemo = (args) => {
                 filters: ['Story', 'Bug'],
                 advancedSearchLink: { href: '/' }
             }
-            : undefined, appHeader: args.appHeader, searchPage: args.searchPage, caseTypes: args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
+            : undefined, appHeader: args.appHeader, searchPage: args.searchPage, caseTypes: args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, progress: args.progress || progress, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
             ? {
                 name: args.environmentName,
                 color: args.environmentColor
@@ -200,6 +213,7 @@ AppShellDemo.args = {
     fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
     withSearch: true,
     appHeader: true,
+    progress: false,
     environmentName: 'dev',
     environmentColor: '#FFDBDE',
     notificationsEmpty: false,
@@ -218,6 +232,7 @@ AppShellDemo.argTypes = {
     fullImageSrc: { control: { type: 'text' } },
     withSearch: { control: { type: 'boolean' } },
     appHeader: { control: { type: 'boolean' } },
+    progress: { control: { type: 'boolean' } },
     environmentName: { control: { type: 'text' } },
     environmentColor: { control: { type: 'color' } },
     notificationsEmpty: { control: { type: 'boolean' } },

package/lib/core/AppShell/AppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  TextArea,\n  useModalManager,\n  useToaster,\n  ForwardProps,\n  useAfterInitialEffect,\n  useModalContext,\n  windowIsAvailable,\n  Configuration,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  excludeStories: ['ConfigurableAppShell'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  searchPage?: AppShellProps['searchPage'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n  collapsedHoverMenus?: boolean;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { dismiss } = useModalContext();\n    const { push: pushToaster } = useToaster();\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useModalManager();\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n  const [searchLoading, setSearchLoading] = useState(false);\n  const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n  const [searchTimeout, setSearchTimeout] = useState<number | null>();\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...prevLink, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = [\n    'Vehicle Purchase',\n    'Vehicle Sale',\n    'Loan Refinance',\n    'Service Request',\n    'Trade In',\n    'Auction Invoice',\n    'Lender Approval',\n    'Inventory Audit',\n    'Sales Performance'\n  ].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const onSearch = (val: string) => {\n    setSearchVal(val);\n    if (searchTimeout) {\n      clearTimeout(searchTimeout);\n      setSearchTimeout(null);\n    }\n    setResults([]);\n    if (val) {\n      setSearchLoading(true);\n      const timeout = setTimeout(() => {\n        setSearchLoading(false);\n        setResults(searchResults.filter(res => res.primary.includes(val)));\n      }, 1000);\n      setSearchTimeout(timeout as unknown as number);\n    }\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo',\n          appNameHidden: args.appNameHidden\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                onSearch(value);\n              },\n              value: searchVal,\n              searchResults: results,\n              recentSearches,\n              loading: searchLoading,\n              filters: ['Story', 'Bug'],\n              advancedSearchLink: { href: '/' }\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      searchPage={args.searchPage}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n      collapsedHoverMenus={args.collapsedHoverMenus}\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  appNameHidden: false,\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  appNameHidden: { control: { type: 'boolean' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  TextArea,\n  useModalManager,\n  useToaster,\n  ForwardProps,\n  useAfterInitialEffect,\n  useModalContext,\n  windowIsAvailable,\n  Configuration,\n  SearchInputProps,\n  ProgressProps\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  excludeStories: ['ConfigurableAppShell'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  searchPage?: AppShellProps['searchPage'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n  collapsedHoverMenus?: boolean;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  progress?: AppShellProps['progress'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { dismiss } = useModalContext();\n    const { push: pushToaster } = useToaster();\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useModalManager();\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n  const [searchLoading, setSearchLoading] = useState(false);\n  const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n  const [searchTimeout, setSearchTimeout] = useState<number | null>();\n  const [progress, setProgress] = useState<ProgressProps['message']>('');\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const addHandlersToLinks = (appShellLinks: AppShellProps['links']): AppShellProps['links'] => {\n    return (appShellLinks || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return {\n              ...prevLink,\n              active:\n                prevLink.name === link.name ||\n                !!prevLink.links?.filter(l => l.name === link.name).length\n            };\n          });\n        });\n\n        setProgress(`${link.name} loading...`);\n        setTimeout(() => {\n          args.onLinkClick?.(link.name);\n          setProgress('');\n        }, 1000);\n      },\n      links: link.links ? addHandlersToLinks(link.links) : undefined\n    }));\n  };\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return addHandlersToLinks(links);\n  }, [links]);\n\n  const defaultCreateLinks = [\n    'Vehicle Purchase',\n    'Vehicle Sale',\n    'Loan Refinance',\n    'Service Request',\n    'Trade In',\n    'Auction Invoice',\n    'Lender Approval',\n    'Inventory Audit',\n    'Sales Performance'\n  ].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const onSearch = (val: string) => {\n    setSearchVal(val);\n    if (searchTimeout) {\n      clearTimeout(searchTimeout);\n      setSearchTimeout(null);\n    }\n    setResults([]);\n    if (val) {\n      setSearchLoading(true);\n      const timeout = setTimeout(() => {\n        setSearchLoading(false);\n        setResults(searchResults.filter(res => res.primary.includes(val)));\n      }, 1000);\n      setSearchTimeout(timeout as unknown as number);\n    }\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo',\n          appNameHidden: args.appNameHidden\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                onSearch(value);\n              },\n              value: searchVal,\n              searchResults: results,\n              recentSearches,\n              loading: searchLoading,\n              filters: ['Story', 'Bug'],\n              advancedSearchLink: { href: '/' }\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      searchPage={args.searchPage}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      progress={args.progress || progress}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n      collapsedHoverMenus={args.collapsedHoverMenus}\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  appNameHidden: false,\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  progress: false,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  appNameHidden: { control: { type: 'boolean' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  progress: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Banner/Banner.stories.d.ts

@@ -5,6 +5,7 @@ export default _default;
 interface BannerDemoProps extends Pick<BannerProps, 'variant'> {
     count?: number;
     noActions?: boolean;
+    disableFocusControl?: boolean;
 }
 export declare const BannerDemo: Story<BannerDemoProps>;
 interface ConfigurableErrorBannerProps {

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,WAAW,EAQZ,MAAM,yBAAyB,CAAC;;AAMjC,wBAIU;AAEV,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CA2F7C,CAAC;AAcF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAqBvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KAsDzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC"}
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,WAAW,EAQZ,MAAM,yBAAyB,CAAC;;AAMjC,wBAIU;AAEV,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAgG7C,CAAC;AAcF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAqBvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KAsDzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC"}

package/lib/core/Banner/Banner.stories.js

@@ -69,7 +69,7 @@ export const BannerDemo = (args) => {
             ]
         }
     ], args.count ?? Infinity);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [show ? (_jsx(Banner, { variant: args.variant, messages: messagesToRender, onDismiss: () => setShow(false), handle: bannerHandleRef })) : (_jsx(Button, { onClick: () => setShow(true), children: "Open banner" })), _jsx(Button, { onClick: () => bannerHandleRef.current?.focus(), style: { maxWidth: 'fit-content' }, children: "Focus" })] }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [show ? (_jsx(Banner, { variant: args.variant, messages: messagesToRender, onDismiss: () => setShow(false), handle: bannerHandleRef })) : (_jsx(Button, { onClick: () => setShow(true), children: "Open banner" })), !args.disableFocusControl && (_jsx(Button, { onClick: () => bannerHandleRef.current?.focus(), style: { maxWidth: 'fit-content' }, children: "Focus" }))] }));
 };
 BannerDemo.args = {
     variant: 'info',

package/lib/core/Banner/Banner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAa,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,EACL,MAAM,EAIN,MAAM,EACN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,KAAK,EACN,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAiB,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,CAAC,yBAAyB,CAAC;CACpC,CAAC;AAOV,MAAM,CAAC,MAAM,UAAU,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,MAAM,GAA4B,IAAI,CAAC,SAAS;QACpD,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,IAAI,EAAE,cAAc,IAAI,CAAC,OAAO,UAAU;YAC1C,OAAO,EAAE,CAAC,CAAC,EAAE;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;YACD,IAAI,EAAE,kBAAkB;SACzB,CAAC;IAEN,MAAM,aAAa,GAAG,CACpB,QAAiC,EACjC,KAAa,EACuC,EAAE;QACtD,MAAM,eAAe,GAA4B,EAAE,CAAC;QACpD,IAAI,YAAY,GAAG,CAAC,CAAC;QAErB,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACrB,IAAI,YAAY,GAAG,KAAK,EAAE;gBACxB,YAAY,IAAI,CAAC,CAAC;gBAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;oBAC3B,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;iBAC3B;qBAAM,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE;oBACrB,eAAe,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;iBAC1C;qBAAM;oBACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,CAAC,CAAC;oBACzE,YAAY,IAAI,QAAQ,CAAC;oBACzB,eAAe,CAAC,IAAI,CAAC;wBACnB,GAAG,GAAG;wBACN,MAAM;wBACN,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;qBAC5C,CAAC,CAAC;iBACJ;aACF;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,GAAG,aAAa,CACtC;QACE;YACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,SAAS;YAC1C,WAAW,EACT,+bAA+b;SAClc;QACD;YACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,SAAS;YAC1C,WAAW,EAAE,cAAc,IAAI,CAAC,OAAO,eAAe;SACvD;QACD,cAAc,IAAI,CAAC,OAAO,SAAS;QACnC;YACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,SAAS;YAC1C,WAAW,EACT,+bAA+b;SAClc;QACD;YACE,KAAK,EAAE,eAAe,IAAI,CAAC,OAAO,SAAS;YAC3C,KAAK,EAAE;gBACL;oBACE,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,SAAS;oBACtC,KAAK,EAAE,CAAC,SAAS,IAAI,CAAC,OAAO,SAAS,CAAC;iBACxC;aACF;SACF;KACF,EACD,IAAI,CAAC,KAAK,IAAI,QAAQ,CACvB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,MAAM,IACL,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,eAAe,GACvB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,CAC3D,EACD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,sBAElF,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;IACrD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,MAAM,EAAE;wBACN,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B;iBACF;aACF;SACF,YAED,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,CAAC,8BAA8B,EAAE,0CAA0C,CAAC,GACtF,GACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC3C,CAAC;AAEF,gFAAgF;AAChF,aAAa;AACb,gFAAgF;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO,CAAC;IAC5C,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAY,EAAE,EAAE;QAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1E,IAAI,OAAO,GAAyB,SAAS,CAAC;QAC9C,IAAI,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,sBAAsB,CAAC,CAAC;QAEhE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,OAAO,GAAG,QAAQ,CAAC;YACnB,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,0BAA0B,CAAC,CAAC;SACtE;QAED,SAAS,CACP,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE;gBACd,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC,EACD,MAAM,EAAE,eAAe,GACvB,CACH,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,eAAe,CAAC,OAAO;YAC1F,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,YAEhE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAoB,EAAE,EAAE;YACnC,OAAO,CACL,KAAC,KAAK,IAEJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAa,CAAC,IALjD,KAAK,CAAC,IAAI,CAMf,CACH,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,iBAAiB;AACjB,gFAAgF;AAChF,MAAM,CAAC,MAAM,eAAe,GAAU,GAAG,EAAE;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,OAAO,CACL,KAAC,YAAY,IACX,OAAO,EACL,SAAS,IAAI,CACX,KAAC,MAAM,IACL,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EACpC,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE;gBACR,sCAAsC;gBACtC,8CAA8C;aAC/C,GACD,CACH,GAEH,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,UAAU,GAAG;IAC3B,MAAM,EAAE,YAAY;CACrB,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useCallback, FormEvent, useReducer, useRef } from 'react';\n\nimport {\n  Banner,\n  BannerProps,\n  BannerMessage,\n  BannerHandleValue,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\ninterface BannerDemoProps extends Pick<BannerProps, 'variant'> {\n  count?: number;\n  noActions?: boolean;\n}\n\nexport const BannerDemo: Story<BannerDemoProps> = (args: BannerDemoProps) => {\n  const [show, setShow] = useState(true);\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const action: BannerMessage['action'] = args.noActions\n    ? undefined\n    : {\n        text: `Individual ${args.variant} action.`,\n        onClick: e => {\n          e.preventDefault();\n        },\n        href: 'https://pega.com'\n      };\n\n  const sliceMessages = (\n    messages: BannerProps['messages'],\n    count: number\n  ): [messages: BannerProps['messages'], count: number] => {\n    const currentMessages: BannerProps['messages'] = [];\n    let currentCount = 0;\n\n    messages.forEach(msg => {\n      if (currentCount < count) {\n        currentCount += 1;\n\n        if (typeof msg === 'string') {\n          currentMessages.push(msg);\n        } else if (!msg.items) {\n          currentMessages.push({ ...msg, action });\n        } else {\n          const [items, subCount] = sliceMessages(msg.items, count - currentCount);\n          currentCount += subCount;\n          currentMessages.push({\n            ...msg,\n            action,\n            items: items.length > 0 ? items : undefined\n          });\n        }\n      }\n    });\n\n    return [currentMessages, currentCount];\n  };\n\n  const [messagesToRender] = sliceMessages(\n    [\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Individual ${args.variant} label.`,\n        description: `Individual ${args.variant} description.`\n      },\n      `Individual ${args.variant} label.`,\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Grandparent ${args.variant} label.`,\n        items: [\n          {\n            label: `Parent ${args.variant} label.`,\n            items: [`Child ${args.variant} label.`]\n          }\n        ]\n      }\n    ],\n    args.count ?? Infinity\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {show ? (\n        <Banner\n          variant={args.variant}\n          messages={messagesToRender}\n          onDismiss={() => setShow(false)}\n          handle={bannerHandleRef}\n        />\n      ) : (\n        <Button onClick={() => setShow(true)}>Open banner</Button>\n      )}\n      <Button onClick={() => bannerHandleRef.current?.focus()} style={{ maxWidth: 'fit-content' }}>\n        Focus\n      </Button>\n    </Flex>\n  );\n};\n\nBannerDemo.args = {\n  variant: 'info',\n  count: 7,\n  noActions: false\n};\n\nBannerDemo.argTypes = {\n  variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },\n  count: { control: { type: 'range', min: 1, max: 7 } },\n  noActions: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        variant='urgent'\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n\n    if (errorFields.length > 0) {\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n    }\n\n    setBanner(\n      <Banner\n        variant={variant}\n        messages={messages}\n        onDismiss={() => {\n          setBanner(false);\n        }}\n        handle={bannerHandleRef}\n      />\n    );\n  }, []);\n\n  useEffect(() => {\n    if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)\n      bannerHandleRef.current.focus();\n  }, [banner]);\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            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// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={[\n              'Uploaded pega_data.json successfully',\n              'Uploaded business-earnings.xlsx successfully'\n            ]}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}
+{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useCallback, FormEvent, useReducer, useRef } from 'react';\n\nimport {\n  Banner,\n  BannerProps,\n  BannerMessage,\n  BannerHandleValue,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\ninterface BannerDemoProps extends Pick<BannerProps, 'variant'> {\n  count?: number;\n  noActions?: boolean;\n  disableFocusControl?: boolean;\n}\n\nexport const BannerDemo: Story<BannerDemoProps> = (args: BannerDemoProps) => {\n  const [show, setShow] = useState(true);\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const action: BannerMessage['action'] = args.noActions\n    ? undefined\n    : {\n        text: `Individual ${args.variant} action.`,\n        onClick: e => {\n          e.preventDefault();\n        },\n        href: 'https://pega.com'\n      };\n\n  const sliceMessages = (\n    messages: BannerProps['messages'],\n    count: number\n  ): [messages: BannerProps['messages'], count: number] => {\n    const currentMessages: BannerProps['messages'] = [];\n    let currentCount = 0;\n\n    messages.forEach(msg => {\n      if (currentCount < count) {\n        currentCount += 1;\n\n        if (typeof msg === 'string') {\n          currentMessages.push(msg);\n        } else if (!msg.items) {\n          currentMessages.push({ ...msg, action });\n        } else {\n          const [items, subCount] = sliceMessages(msg.items, count - currentCount);\n          currentCount += subCount;\n          currentMessages.push({\n            ...msg,\n            action,\n            items: items.length > 0 ? items : undefined\n          });\n        }\n      }\n    });\n\n    return [currentMessages, currentCount];\n  };\n\n  const [messagesToRender] = sliceMessages(\n    [\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Individual ${args.variant} label.`,\n        description: `Individual ${args.variant} description.`\n      },\n      `Individual ${args.variant} label.`,\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Grandparent ${args.variant} label.`,\n        items: [\n          {\n            label: `Parent ${args.variant} label.`,\n            items: [`Child ${args.variant} label.`]\n          }\n        ]\n      }\n    ],\n    args.count ?? Infinity\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {show ? (\n        <Banner\n          variant={args.variant}\n          messages={messagesToRender}\n          onDismiss={() => setShow(false)}\n          handle={bannerHandleRef}\n        />\n      ) : (\n        <Button onClick={() => setShow(true)}>Open banner</Button>\n      )}\n      {!args.disableFocusControl && (\n        <Button\n          onClick={() => bannerHandleRef.current?.focus()}\n          style={{ maxWidth: 'fit-content' }}\n        >\n          Focus\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nBannerDemo.args = {\n  variant: 'info',\n  count: 7,\n  noActions: false\n};\n\nBannerDemo.argTypes = {\n  variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },\n  count: { control: { type: 'range', min: 1, max: 7 } },\n  noActions: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        variant='urgent'\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n\n    if (errorFields.length > 0) {\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n    }\n\n    setBanner(\n      <Banner\n        variant={variant}\n        messages={messages}\n        onDismiss={() => {\n          setBanner(false);\n        }}\n        handle={bannerHandleRef}\n      />\n    );\n  }, []);\n\n  useEffect(() => {\n    if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)\n      bannerHandleRef.current.focus();\n  }, [banner]);\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            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// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={[\n              'Uploaded pega_data.json successfully',\n              'Uploaded business-earnings.xlsx successfully'\n            ]}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/cs/CSAppShell/CSAppShell.mocks.d.ts

@@ -86,4 +86,5 @@ export declare const statuses: ({
     selected?: undefined;
 })[];
 export declare const ChatSettingsPanelMock: FunctionComponent;
+export declare const EmailNotificationPanelMock: FunctionComponent;
 //# sourceMappingURL=CSAppShell.mocks.d.ts.map

package/lib/cs/CSAppShell/CSAppShell.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AA4Bf,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;IAYpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBA2HnC,CAAC"}
+{"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AA+Bf,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;IAYpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBA2HnC,CAAC;AAsDF,eAAO,MAAM,0BAA0B,EAAE,iBAkBxC,CAAC"}