npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.1.2 → 4.0.0-dev.10.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.1.2 → 4.0.0-dev.10.0

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

Files changed (487) hide show

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

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

	@@ -1 +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"}
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,EAwBd,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,CAoUlD,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useRef } from 'react';
-import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, TextArea, useModalManager, useToaster, useAfterInitialEffect, useModalContext, windowIsAvailable, Configuration } from '@pega/cosmos-react-core';
+import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, TextArea, useModalManager, useToaster, useAfterInitialEffect, useModalContext, windowIsAvailable, Configuration, menuHelpers } from '@pega/cosmos-react-core';
 import * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';
 import * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';
 import { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';
@@ -24,6 +24,7 @@ export const AppShellDemo = (args) => {
                             pushToaster({ content: `${caseType} requested` });
                         }, children: "Request" })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }), _jsx(Option, { value: 'Fire', children: "Fire" }), _jsx(Option, { value: 'Facilities', children: "Facilities" }), _jsx(Option, { value: 'Parks', children: "Parks" }), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }), _jsx(Option, { value: 'Police', children: "Police" }), _jsx(Option, { value: 'Courts', children: "Courts" }), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }), _jsx(Option, { value: 'Energy', children: "Energy" }), _jsx(Option, { value: 'Justice department', children: "Justice department" }), _jsx(Option, { value: 'Environmental', children: "Environmental" })] }), _jsx(TextArea, { label: 'Purpose of Purchase' }), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }), _jsx(Option, { value: 'Ford', children: "Ford" }), _jsx(Option, { value: 'Dodge', children: "Dodge" }), _jsx(Option, { value: 'Toyota', children: "Toyota" }), _jsx(Option, { value: 'Tesla', children: "Tesla" })] }), _jsx(Input, { label: 'Desired Make' }), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' })] }) }));
     };
+    const [activeAppName, setActiveAppName] = useState(args.appName || 'UI Audit');
     const caseLinks = args.caseLinks || defaultLinks;
     const showSearch = args.withSearch !== undefined ? args.withSearch : true;
     const { create: createModal } = useModalManager();
@@ -35,22 +36,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',
@@ -136,6 +150,20 @@ export const AppShellDemo = (args) => {
             emptyText: 'No recents'
         }
     ];
+    const [contexts, setContexts] = useState([
+        {
+            id: '1',
+            primary: activeAppName,
+            selected: true,
+            visual: _jsx(Icon, { name: 'app' })
+        },
+        {
+            id: '2',
+            primary: 'BI Warehouse',
+            selected: false,
+            visual: _jsx(Icon, { name: 'cloud' })
+        }
+    ]);
     const newNotificationCountTimerRef = useRef(NaN);
     const defaultUtils = [
         {
@@ -163,14 +191,21 @@ export const AppShellDemo = (args) => {
             drawerView: _jsx(AppShellList, { listView: recentViewItems })
         }
     ];
-    return (_jsx(AppShell, { appInfo: args.appInfo || {
+    return (_jsx(AppShell, { contextSwitcher: {
+            contexts,
+            onContextClick: (id) => {
+                setActiveAppName(menuHelpers.getItem(contexts, id).primary);
+                setContexts(cur => cur.map(ctx => {
+                    return { ...ctx, selected: id === ctx.id };
+                }));
+            }
+        }, appInfo: args.appInfo || {
             href: args.href || 'https://www.pega.com/',
-            imageSrc: args.imageSrc ||
-                'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',
+            imageSrc: args.imageSrc || './pega_logo_vertical_white.svg',
             fullImageSrc: args.fullImageSrc ||
                 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
-            appName: args.appName || 'Cosmos AppShell',
-            portalName: args.portalName || 'Demo',
+            appName: activeAppName,
+            portalName: args.portalName || 'Scrum',
             appNameHidden: args.appNameHidden
         }, searchInput: showSearch
             ? {
@@ -184,7 +219,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
@@ -192,14 +227,15 @@ export const AppShellDemo = (args) => {
             : undefined, collapsedHoverMenus: args.collapsedHoverMenus }));
 };
 AppShellDemo.args = {
-    appName: 'Cosmos AppShell',
+    appName: 'UI Audit',
     appNameHidden: false,
-    portalName: 'Demo',
+    portalName: 'Scrum',
     href: 'https://www.pega.com/',
-    imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',
+    imageSrc: './pega_logo_vertical_white.svg',
     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 +254,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 CHANGED Viewed

	@@ -1 +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 & Traffic'>Parking & 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"]}
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 ContextSwitcherProps,\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 menuHelpers\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 & Traffic'>Parking & 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 [activeAppName, setActiveAppName] = useState(args.appName \|\| 'UI Audit');\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 [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n {\n id: '1',\n primary: activeAppName,\n selected: true,\n visual: <Icon name='app' />\n },\n {\n id: '2',\n primary: 'BI Warehouse',\n selected: false,\n visual: <Icon name='cloud' />\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 contextSwitcher={{\n contexts,\n onContextClick: (id: string) => {\n setActiveAppName(menuHelpers.getItem(contexts, id)!.primary);\n setContexts(cur =>\n cur!.map(ctx => {\n return { ...ctx, selected: id === ctx.id };\n })\n );\n }\n }}\n appInfo={\n args.appInfo \|\| {\n href: args.href \|\| 'https://www.pega.com/',\n imageSrc: args.imageSrc \|\| './pega_logo_vertical_white.svg',\n fullImageSrc:\n args.fullImageSrc \|\|\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: activeAppName,\n portalName: args.portalName \|\| 'Scrum',\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: 'UI Audit',\n appNameHidden: false,\n portalName: 'Scrum',\n href: 'https://www.pega.com/',\n imageSrc: './pega_logo_vertical_white.svg',\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/Backdrop/Backdrop.stories.d.ts.map CHANGED Viewed

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

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

@@ -17,10 +17,10 @@ export default {
 };
 export const BackdropDemo = (args) => {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), open && (_jsx(Backdrop, { open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Button, { variant: 'primary', onClick: () => setOpen(false), children: "Close Backdrop" }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), _jsx(Backdrop, { open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Button, { variant: 'primary', onClick: () => setOpen(false), children: "Close Backdrop" }) })] }));
 };
 export const DismissibleBackdropDemo = (args) => {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), open && (_jsx(Backdrop, { onClick: () => setOpen(false), open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Backdrop can be dismissed by clicking anywhere in the viewport." }) }) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), _jsx(Backdrop, { onClick: () => setOpen(false), open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Backdrop can be dismissed by clicking anywhere in the viewport." }) }) }) })] }));
 };
 //# sourceMappingURL=Backdrop.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.stories.js","sourceRoot":"","sources":["../../../src/core/Backdrop/Backdrop.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,QAAQ;KAC1B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACpE,eAAe,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC9F;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,~~EAE3D~~,~~IAAI,IAAI,CACP,~~KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,+BAE9C,GACA,~~CACZ~~,~~IACA,~~CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,~~EAE3D~~,~~IAAI,IAAI,CACP,~~KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,uFAA4E,GACrE,GACT,GACE,~~CACZ~~,~~IACA,~~CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Backdrop, BackdropProps, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Backdrop',\n component: Backdrop,\n args: {\n alpha: 0.4,\n variant: 'dark',\n transitionSpeed: 'medium'\n },\n argTypes: {\n alpha: { control: { type: 'number' } },\n variant: { options: ['dark', 'light'], control: { type: 'select' } },\n transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }\n }\n} as Meta;\n\nexport const BackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n ~~{open && (\n~~ <Backdrop\n open={open}\n alpha={args.alpha}\n variant={args.variant}\n transitionSpeed={args.transitionSpeed}\n >\n <Button variant='primary' onClick={() => setOpen(false)}>\n Close Backdrop\n </Button>\n </Backdrop>\n ~~)}\n~~ </>\n );\n};\n\nexport const DismissibleBackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n ~~{open && (\n~~ <Backdrop\n onClick={() => setOpen(false)}\n open={open}\n alpha={args.alpha}\n variant={args.variant}\n transitionSpeed={args.transitionSpeed}\n >\n <Card>\n <CardContent>\n <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>\n </CardContent>\n </Card>\n </Backdrop>\n ~~)}\n~~ </>\n );\n};\n"]}
1	+ {"version":3,"file":"Backdrop.stories.js","sourceRoot":"","sources":["../../../src/core/Backdrop/Backdrop.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,QAAQ;KAC1B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACpE,eAAe,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC9F;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,EAE5D,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,+BAE9C,GACA,IACV,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,EAE5D,KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,uFAA4E,GACrE,GACT,GACE,IACV,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Backdrop, BackdropProps, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Backdrop',\n component: Backdrop,\n args: {\n alpha: 0.4,\n variant: 'dark',\n transitionSpeed: 'medium'\n },\n argTypes: {\n alpha: { control: { type: 'number' } },\n variant: { options: ['dark', 'light'], control: { type: 'select' } },\n transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }\n }\n} as Meta;\n\nexport const BackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n <Backdrop\n open={open}\n alpha={args.alpha}\n variant={args.variant}\n transitionSpeed={args.transitionSpeed}\n >\n <Button variant='primary' onClick={() => setOpen(false)}>\n Close Backdrop\n </Button>\n </Backdrop>\n </>\n );\n};\n\nexport const DismissibleBackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n <Backdrop\n onClick={() => setOpen(false)}\n open={open}\n alpha={args.alpha}\n variant={args.variant}\n transitionSpeed={args.transitionSpeed}\n >\n <Card>\n <CardContent>\n <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>\n </CardContent>\n </Card>\n </Backdrop>\n </>\n );\n};\n"]}

package/lib/core/Badges/Count.stories.js CHANGED Viewed

@@ -14,7 +14,7 @@ CountBadge.args = {
 CountBadge.argTypes = {
     children: { control: { type: 'number' } },
     variant: {
-        options: ['default', 'interactive', 'inverted', 'urgent'],
+        options: ['default', 'urgent'],
         control: { type: 'select' }
     }
 };

package/lib/core/Badges/Count.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Count.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Count.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,QAAQ,GAAS,CAAC;AAC/D,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACzC,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,~~aAAa,EAAE,UAAU,EAAE,~~QAAQ,CAAC;~~QACzD~~,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Count, CountProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Badges/Count',\n component: Count\n} as Meta;\n\nexport const CountBadge: Story<CountProps> = (args: CountProps) => {\n return <Count variant={args.variant}>{args.children}</Count>;\n};\n\nCountBadge.args = {\n children: 3,\n variant: 'default'\n};\n\nCountBadge.argTypes = {\n children: { control: { type: 'number' } },\n variant: {\n options: ['default', '~~interactive', 'inverted', '~~urgent'],\n control: { type: 'select' }\n }\n};\n"]}
1	+ {"version":3,"file":"Count.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Count.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,QAAQ,GAAS,CAAC;AAC/D,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACzC,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;QAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Count, CountProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Badges/Count',\n component: Count\n} as Meta;\n\nexport const CountBadge: Story<CountProps> = (args: CountProps) => {\n return <Count variant={args.variant}>{args.children}</Count>;\n};\n\nCountBadge.args = {\n children: 3,\n variant: 'default'\n};\n\nCountBadge.argTypes = {\n children: { control: { type: 'number' } },\n variant: {\n options: ['default', 'urgent'],\n control: { type: 'select' }\n }\n};\n"]}

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

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/react';
+import { BannerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const SuccessBanner: Story;
-export declare const ErrorBanner: Story;
-export declare const WarningBanner: Story;
-export declare const InfoBanner: Story;
+interface BannerDemoProps extends Pick<BannerProps, 'variant'> {
+    count?: number;
+    descriptions?: boolean;
+    actions?: boolean;
+    disableFocusControl?: boolean;
+}
+export declare const BannerDemo: Story<BannerDemoProps>;
 interface ConfigurableErrorBannerProps {
     background?: string;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC~~;;AAS~~/C,wBAIU;AAEV,~~eAAO~~,~~MAAM~~,~~aAAa~~,EAAE,~~KAiB3B~~,CAAC;~~AAEF~~,~~eAAO~~,MAAM,~~WAAW~~,EAAE,~~KAczB~~,CAAC;~~AAEF~~,~~eAAO~~,~~MAAM~~,~~aAAa~~,EAAE,~~KAa3B~~,CAAC;~~AAEF~~,eAAO,MAAM,UAAU,EAAE,~~KAkBxB~~,CAAC;~~AAEF~~,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,~~CA4BvE~~,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,~~KA4DzB~~,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,~~KAsB7B~~,CAAC"}
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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAkG7C,CAAC;AAgBF,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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useReducer } from 'react';
-import { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useReducer, useRef } from 'react';
+import { Banner, Button, Configuration, Flex, Form, Input } from '@pega/cosmos-react-core';
 import { AppShellDemo } from '../AppShell/AppShell.stories';
 import { demoFields, fieldReducer, formActions } from './Banner.mocks';
 export default {
@@ -8,21 +8,84 @@ export default {
     component: Banner,
     excludeStories: ['ConfigurableErrorBanner']
 };
-export const SuccessBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }), showBanner && (_jsx(Banner, { id: 'success', variant: 'success', onDismiss: () => setShowBanner(false), heading: '2 items uploaded successfully', messages: ['pega_data.json', 'business-earnings.xlsx'] }))] }));
-};
-export const ErrorBanner = () => {
-    return (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Try again" }) }), messages: ['Your request failed to send!', 'Please review your request and try again'] }));
+export const BannerDemo = (args) => {
+    const [show, setShow] = useState(true);
+    const bannerHandleRef = useRef(null);
+    const action = args.actions
+        ? {
+            text: `Individual ${args.variant} action.`,
+            onClick: e => {
+                e.preventDefault();
+            },
+            href: 'https://pega.com'
+        }
+        : undefined;
+    const sliceMessages = (messages, count) => {
+        const currentMessages = [];
+        let currentCount = 0;
+        messages.forEach(msg => {
+            if (currentCount < count) {
+                currentCount += 1;
+                if (typeof msg === 'string') {
+                    currentMessages.push(msg);
+                }
+                else if (!msg.items) {
+                    currentMessages.push({ ...msg, action });
+                }
+                else {
+                    const [items, subCount] = sliceMessages(msg.items, count - currentCount);
+                    currentCount += subCount;
+                    currentMessages.push({
+                        ...msg,
+                        action,
+                        items: items.length > 0 ? items : undefined
+                    });
+                }
+            }
+        });
+        return [currentMessages, currentCount];
+    };
+    const [messagesToRender] = sliceMessages([
+        {
+            label: `Individual ${args.variant} label.`,
+            description: args.descriptions
+                ? '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.'
+                : undefined
+        },
+        {
+            label: `Individual ${args.variant} label.`,
+            description: args.descriptions ? `Individual ${args.variant} description.` : undefined
+        },
+        `Individual ${args.variant} label.`,
+        {
+            label: `Individual ${args.variant} label.`,
+            description: args.descriptions
+                ? '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.'
+                : undefined
+        },
+        {
+            label: `Grandparent ${args.variant} label.`,
+            items: [
+                {
+                    label: `Parent ${args.variant} label.`,
+                    items: [`Child ${args.variant} label.`]
+                }
+            ]
+        }
+    ], 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" })), !args.disableFocusControl && (_jsx(Button, { onClick: () => bannerHandleRef.current?.focus(), style: { maxWidth: 'fit-content' }, children: "Focus" }))] }));
 };
-export const WarningBanner = () => {
-    return (_jsx(Banner, { id: 'warning', variant: 'warning', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Why this matters" }) }), messages: ['Your submission is missing some important documents.'] }));
+BannerDemo.args = {
+    variant: 'info',
+    count: 7,
+    descriptions: true,
+    actions: true
 };
-export const InfoBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }), showBanner && (_jsx(Banner, { id: 'info', variant: 'info', onDismiss: () => setShowBanner(false), messages: [
-                    'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'
-                ] }))] }));
+BannerDemo.argTypes = {
+    variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },
+    count: { control: { type: 'range', min: 1, max: 7 } },
+    descriptions: { control: { type: 'boolean' } },
+    actions: { control: { type: 'boolean' } }
 };
 export const ConfigurableErrorBanner = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -33,7 +96,7 @@ export const ConfigurableErrorBanner = (args) => {
                     }
                 }
             }
-        }, children: _jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Try again" }) }), messages: ['Your request failed to send!', 'Please review your request and try again'] }) }));
+        }, children: _jsx(Banner, { variant: 'urgent', messages: ['Your request failed to send!', 'Please review your request and try again'] }) }));
 };
 ConfigurableErrorBanner.args = {
     background: '#d91c29'
@@ -47,30 +110,24 @@ ConfigurableErrorBanner.argTypes = {
 export const ShownInForm = () => {
     const [fields, setField] = useReducer(fieldReducer, demoFields);
     const [banner, setBanner] = useState();
+    const bannerHandleRef = useRef(null);
     const onSubmit = useCallback((e) => {
         e.preventDefault();
         const errorFields = fields.filter(field => !field.validator(field.value));
-        let heading = 'Wow, great job!';
         let variant = 'success';
         let messages = fields.map(f => `${f.name} was typed perfectly`);
-        let bannerAction;
         if (errorFields.length > 0) {
-            heading = "I'm sorry you're having trouble";
             variant = 'urgent';
             messages = errorFields.map(f => `${f.name} was not typed correctly`);
-            bannerAction = (_jsx(Link, { href: 'https://community.pega.com/support', target: '_blank', children: "Visit Pega support for assistance" }));
         }
-        setBanner(_jsx(Banner, { ...{
-                heading,
-                variant,
-                messages,
-                id: 'formBanner',
-                action: bannerAction,
-                onDismiss() {
-                    setBanner(false);
-                }
-            } }));
+        setBanner(_jsx(Banner, { variant: variant, messages: messages, onDismiss: () => {
+                setBanner(false);
+            }, handle: bannerHandleRef }));
     }, []);
+    useEffect(() => {
+        if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)
+            bannerHandleRef.current.focus();
+    }, [banner]);
     return (_jsx(Form, { banners: banner, actions: formActions, onSubmit: onSubmit, style: { margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }, children: fields.map((field) => {
             return (_jsx(Input, { name: field.name, label: field.label, info: field.info, value: field.value, onChange: (e) => setField(e.target) }, field.name));
         }) }));
@@ -80,7 +137,10 @@ export const ShownInForm = () => {
 // -----------------------------------------------------------------------------
 export const ShownInAppShell = () => {
     const [hasBanner, setHasBanner] = useState(true);
-    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { id: 'app-shell-banner-success', heading: '2 items uploaded successfully', onDismiss: () => setHasBanner(false), variant: 'success', messages: ['pega_data.json', 'business-earnings.xlsx'], action: _jsx(Link, { target: '_blank', href: 'https://www.pega.com', children: "Link Here!" }) })) }));
+    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { onDismiss: () => setHasBanner(false), variant: 'success', messages: [
+                'Uploaded pega_data.json successfully',
+                'Uploaded business-earnings.xlsx successfully'
+            ] })) }));
 };
 ShownInAppShell.parameters = {
     layout: 'fullscreen'