@pega/cosmos-react-demos 2.0.0 → 2.1.3

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

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState, useMemo, useRef } from 'react';
+import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, ModalManagerContext, TextArea, ToasterContext, useAfterInitialEffect, windowIsAvailable } 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 { defaultLinks, defaultMainContent, defaultNotifications, defaultRecents, operatorData } from './AppShell.mocks';
+registerIcon(bellSolidIcon, clockSolidIcon);
+export default {
+    title: 'Core/App Shell',
+    component: AppShell,
+    id: 'App Shell',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const AppShellDemo = (args) => {
+    const CreateCaseModal = ({ caseType }) => {
+        const { ModalContext } = useContext(ModalManagerContext);
+        const { dismiss } = useContext(ModalContext);
+        const { push: pushToaster } = useContext(ToasterContext);
+        return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }, void 0), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
+                            e.preventDefault();
+                            dismiss();
+                            pushToaster({ content: `${caseType} requested` });
+                        }, children: "Request" }, void 0)] }, void 0), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }, void 0), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }, void 0), _jsx(Option, { value: 'Fire', children: "Fire" }, void 0), _jsx(Option, { value: 'Facilities', children: "Facilities" }, void 0), _jsx(Option, { value: 'Parks', children: "Parks" }, void 0), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }, void 0), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }, void 0), _jsx(Option, { value: 'Police', children: "Police" }, void 0), _jsx(Option, { value: 'Courts', children: "Courts" }, void 0), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }, void 0), _jsx(Option, { value: 'Energy', children: "Energy" }, void 0), _jsx(Option, { value: 'Justice department', children: "Justice department" }, void 0), _jsx(Option, { value: 'Environmental', children: "Environmental" }, void 0)] }, void 0), _jsx(TextArea, { label: 'Purpose of Purchase' }, void 0), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }, void 0), _jsx(Option, { value: 'Ford', children: "Ford" }, void 0), _jsx(Option, { value: 'Dodge', children: "Dodge" }, void 0), _jsx(Option, { value: 'Toyota', children: "Toyota" }, void 0), _jsx(Option, { value: 'Tesla', children: "Tesla" }, void 0)] }, void 0), _jsx(Input, { label: 'Desired Make' }, void 0), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }, void 0), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' }, void 0)] }, void 0) }, void 0));
+    };
+    const caseLinks = args.caseLinks || defaultLinks;
+    const showSearch = args.withSearch !== undefined ? args.withSearch : true;
+    const { create: createModal } = useContext(ModalManagerContext);
+    const [links, setLinks] = useState(caseLinks);
+    const [notifications, setNotifications] = useState(defaultNotifications);
+    const [recents, setRecents] = useState(args.recentItems || defaultRecents);
+    const [numNewNotifications, setNumNewNotifications] = useState(notifications.filter(x => x.unread).length);
+    const [searchVal, setSearchVal] = useState('');
+    useAfterInitialEffect(() => {
+        setLinks(caseLinks);
+    }, [caseLinks]);
+    const linksWithHandlers = useMemo(() => {
+        return (links || []).map(link => ({
+            ...link,
+            onClick(e) {
+                e.preventDefault();
+                setLinks((prevLinks = []) => {
+                    return prevLinks.map(prevLink => {
+                        return { ...link, active: prevLink.name === link.name };
+                    });
+                });
+                args.onLinkClick?.(link.name);
+            }
+        }));
+    }, [links]);
+    const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({
+        name,
+        onClick: () => {
+            createModal(CreateCaseModal, { caseType: name });
+        }
+    }));
+    const handleNotificationClick = (passedId) => {
+        setNotifications(cur => cur.map(({ id, unread, ...item }) => ({
+            id,
+            unread: passedId === id ? false : unread,
+            ...item
+        })));
+    };
+    const handlePinToggle = (passedId) => {
+        setRecents(cur => cur.map(({ id, pinned, ...item }) => ({
+            id,
+            pinned: passedId === id ? !pinned : pinned,
+            ...item
+        })));
+    };
+    const notificationViewItems = [
+        {
+            id: '234',
+            items: args.notificationsEmpty ? [] : notifications,
+            loading: args.notificationsLoading,
+            onItemClick: handleNotificationClick,
+            viewAll: {
+                href: '#'
+            },
+            emptyText: 'No notifications'
+        }
+    ];
+    const recentViewItems = [
+        {
+            id: '456',
+            items: recents.filter(x => x.pinned),
+            loading: args.pinsLoading,
+            onItemPinToggle: handlePinToggle,
+            viewAll: {
+                href: '#'
+            },
+            displayPins: true,
+            headingText: 'Pinned items',
+            emptyText: 'No pinned items'
+        },
+        {
+            id: '789',
+            items: args.recentsEmpty ? [] : recents,
+            loading: args.recentsLoading,
+            onItemPinToggle: handlePinToggle,
+            viewAll: {
+                href: '#'
+            },
+            displayPins: true,
+            headingText: 'Recently viewed',
+            emptyText: 'No recents'
+        }
+    ];
+    const newNotificationCountTimerRef = useRef(NaN);
+    const defaultUtils = [
+        {
+            name: 'Notifications',
+            visual: _jsx(Icon, { name: 'bell-solid' }, void 0),
+            count: args.notificationsEmpty ? 0 : numNewNotifications,
+            drawerView: _jsx(AppShellList, { listView: notificationViewItems }, void 0),
+            onDrawerOpen: () => {
+                clearInterval(newNotificationCountTimerRef.current);
+                setNumNewNotifications(0);
+            },
+            onDrawerClose: () => {
+                if (windowIsAvailable) {
+                    // Mock new notifications arriving on a minute interval after the drawer closes.
+                    // Let's face it, you're popular.
+                    newNotificationCountTimerRef.current = window.setInterval(() => {
+                        setNumNewNotifications(cur => cur + 2);
+                    }, 60000);
+                }
+            }
+        },
+        {
+            name: 'Recents',
+            visual: _jsx(Icon, { name: 'clock-solid' }, void 0),
+            drawerView: _jsx(AppShellList, { listView: recentViewItems }, void 0)
+        }
+    ];
+    return (_jsx(AppShell, { appInfo: args.appInfo || {
+            href: args.href || 'https://www.pega.com/',
+            imageSrc: args.imageSrc ||
+                'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',
+            fullImageSrc: args.fullImageSrc ||
+                'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
+            appName: args.appName || 'Cosmos AppShell',
+            portalName: args.portalName || 'Demo'
+        }, searchInput: showSearch
+            ? {
+                onSearchChange: (value) => {
+                    setSearchVal(value);
+                },
+                value: searchVal
+            }
+            : undefined, appHeader: args.appHeader, caseTypes: args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
+            ? {
+                name: args.environmentName,
+                color: args.environmentColor
+            }
+            : undefined }, void 0));
+};
+AppShellDemo.args = {
+    appName: 'Cosmos AppShell',
+    portalName: 'Demo',
+    href: 'https://www.pega.com/',
+    imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',
+    fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
+    withSearch: true,
+    appHeader: true,
+    environmentName: 'dev',
+    environmentColor: '#FFDBDE',
+    notificationsEmpty: false,
+    notificationsLoading: false,
+    recentsEmpty: false,
+    recentsLoading: false,
+    pinsLoading: false
+};
+AppShellDemo.argTypes = {
+    appName: { control: { type: 'text' } },
+    portalName: { control: { type: 'text' } },
+    href: { control: { type: 'text' } },
+    imageSrc: { control: { type: 'text' } },
+    fullImageSrc: { control: { type: 'text' } },
+    withSearch: { control: { type: 'boolean' } },
+    appHeader: { control: { type: 'boolean' } },
+    environmentName: { control: { type: 'text' } },
+    environmentColor: { control: { type: 'color' } },
+    notificationsEmpty: { control: { type: 'boolean' } },
+    notificationsLoading: { control: { type: 'boolean' } },
+    recentsEmpty: { control: { type: 'boolean' } },
+    recentsLoading: { control: { type: 'boolean' } },
+    pinsLoading: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=AppShell.stories.js.map

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

@@ -0,0 +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, useContext, 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  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable\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 {\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  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\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\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\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  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 { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\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 } = useContext(ModalManagerContext);\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\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 { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].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 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/1410341211978752004/pLYjGIa8_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        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                setSearchVal(value);\n              },\n              value: searchVal\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      caseTypes={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    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\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  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\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  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n"]}

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

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

package/lib/core/Avatar/Avatar.stories.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps, icons } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Avatar',\n  component: Avatar,\n  args: {\n    shape: 'circle',\n    size: 'm',\n    name: 'John Doe'\n  },\n  argTypes: {\n    shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n    size: { options: ['s', 'm', 'l'], control: { type: 'select' } },\n    name: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const DefaultAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n  name: 'Pegasystems',\n  imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n  imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return (\n    <Avatar\n      shape={args.shape}\n      size={args.size}\n      name={args.name}\n      imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n    />\n  );\n};\n\nexport const IconAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon} />;\n};\n\nIconAvatar.args = {\n  icon: 'headset'\n};\n\nIconAvatar.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } }\n};\n\nexport const StatusAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n  status: 'active'\n};\n\nStatusAvatar.argTypes = {\n  status: { options: ['active', undefined], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Backdrop, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Backdrop',
+    component: Backdrop,
+    args: {
+        alpha: 0.4,
+        variant: 'dark',
+        transitionSpeed: 'medium'
+    },
+    argTypes: {
+        alpha: { control: { type: 'number' } },
+        variant: { options: ['dark', 'light'], control: { type: 'select' } },
+        transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }
+    }
+};
+export const BackdropDemo = (args) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }, void 0), 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" }, void 0) }, void 0))] }, void 0));
+};
+export const DismissibleBackdropDemo = (args) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }, void 0), 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." }, void 0) }, void 0) }, void 0) }, void 0))] }, void 0));
+};
+//# sourceMappingURL=Backdrop.stories.js.map

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

@@ -0,0 +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,sCAAwB,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,uCAE9C,WACA,CACZ,YACA,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,sCAAwB,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,+FAA4E,WACrE,WACT,WACE,CACZ,YACA,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"]}

package/lib/core/Badges/Alert.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Badges/Alert',
+    component: Alert
+};
+export const AlertBadge = (args) => {
+    return _jsx(Alert, { variant: args.variant }, void 0);
+};
+AlertBadge.args = {
+    variant: 'success'
+};
+AlertBadge.argTypes = {
+    variant: { options: ['success', 'urgent'], control: { type: 'select' } }
+};
+//# sourceMappingURL=Alert.stories.js.map

package/lib/core/Badges/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Alert.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,WAAI,CAAC;AAC1C,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Alert, AlertProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Alert',\n  component: Alert\n} as Meta;\n\nexport const AlertBadge: Story<AlertProps> = (args: AlertProps) => {\n  return <Alert variant={args.variant} />;\n};\n\nAlertBadge.args = {\n  variant: 'success'\n};\n\nAlertBadge.argTypes = {\n  variant: { options: ['success', 'urgent'], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Count } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Badges/Count',
+    component: Count
+};
+export const CountBadge = (args) => {
+    return _jsx(Count, { variant: args.variant, children: args.children }, void 0);
+};
+CountBadge.args = {
+    children: 3,
+    variant: 'default'
+};
+CountBadge.argTypes = {
+    children: { control: { type: 'number' } },
+    variant: {
+        options: ['default', 'interactive', 'inverted', 'urgent'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=Count.stories.js.map

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

@@ -0,0 +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,WAAS,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"]}

package/lib/core/Badges/Selection.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Selectable } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Badges/Selectable',
+    component: Selectable
+};
+export const SelectableBadge = () => {
+    return _jsx(Selectable, { id: 'selectable', children: "Selectable" }, void 0);
+};
+//# sourceMappingURL=Selection.stories.js.map

package/lib/core/Badges/Selection.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selection.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Selection.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,YAAY,mCAAwB,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Selectable } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Selectable',\n  component: Selectable\n} as Meta;\n\nexport const SelectableBadge = () => {\n  return <Selectable id='selectable'>Selectable</Selectable>;\n};\n"]}

package/lib/core/Badges/Status.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from '@pega/cosmos-react-core';
+export default {
+    component: Status,
+    title: 'Core/Badges/Status'
+};
+export const StatusBadge = (args) => {
+    return _jsx(Status, { variant: args.variant, children: args.variant }, void 0);
+};
+StatusBadge.args = {
+    variant: 'success'
+};
+StatusBadge.argTypes = {
+    variant: {
+        options: ['success', 'urgent', 'warn', 'pending', 'info'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=Status.stories.js.map

package/lib/core/Badges/Status.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,eAAe;IACb,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,oBAAoB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACnE,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,OAAO,WAAU,CAAC;AAChE,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, StatusProps } from '@pega/cosmos-react-core';\n\nexport default {\n  component: Status,\n  title: 'Core/Badges/Status'\n} as Meta;\n\nexport const StatusBadge: Story<StatusProps> = (args: StatusProps) => {\n  return <Status variant={args.variant}>{args.variant}</Status>;\n};\n\nStatusBadge.args = {\n  variant: 'success'\n};\n\nStatusBadge.argTypes = {\n  variant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/core/Badges/Tag.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Badges/Tag',
+    component: Tag
+};
+export const TagBadge = () => {
+    return _jsx(Tag, { children: "#PegaCosmos" }, void 0);
+};
+//# sourceMappingURL=Tag.stories.js.map

package/lib/core/Badges/Tag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,GAAG;CACP,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,KAAC,GAAG,sCAAkB,CAAC;AAChC,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Tag } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Tag',\n  component: Tag\n} as Meta;\n\nexport const TagBadge = () => {\n  return <Tag>#PegaCosmos</Tag>;\n};\n"]}

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

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

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

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

package/lib/core/Banner/Banner.mocks.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@pega/cosmos-react-core';
+export const demoFields = [
+    {
+        name: 'field-1',
+        label: 'Field 1',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 1'
+    },
+    {
+        name: 'field-2',
+        label: 'Field 2',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 2'
+    },
+    {
+        name: 'field-3',
+        label: 'Field 3',
+        info: 'Hint: type exact label text above',
+        value: '',
+        validator: (value) => value === 'Field 3'
+    }
+];
+export const formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0));
+// Handles setting of state for all fields
+export const fieldReducer = (fields, inputEl) => {
+    return fields.map(field => {
+        if (inputEl.name === field.name) {
+            field.value = inputEl.value;
+        }
+        return field;
+    });
+};
+//# sourceMappingURL=Banner.mocks.js.map

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

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

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

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useReducer } from 'react';
+import { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';
+import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
+import { demoFields, fieldReducer, formActions } from './Banner.mocks';
+export default {
+    title: 'Core/Banner',
+    component: Banner
+};
+export const SuccessBanner = () => {
+    const [showBanner, setShowBanner] = useState(true);
+    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }, void 0), showBanner && (_jsx(Banner, { id: 'success', variant: 'success', onDismiss: () => setShowBanner(false), heading: '2 items uploaded successfully', messages: ['pega_data.json', 'business-earnings.xlsx'] }, void 0))] }, void 0));
+};
+export const ErrorBanner = () => {
+    return (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Try again" }, void 0) }, void 0), messages: ['Your request failed to send!', 'Please review your request and try again'] }, void 0));
+};
+export const WarningBanner = () => {
+    return (_jsx(Banner, { id: 'warning', variant: 'warning', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Why this matters" }, void 0) }, void 0), messages: ['Your submission is missing some important documents.'] }, void 0));
+};
+export const InfoBanner = () => {
+    const [showBanner, setShowBanner] = useState(true);
+    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }, void 0), 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.'
+                ] }, void 0))] }, void 0));
+};
+// -----------------------------------------------------------------------------
+// Form story
+// -----------------------------------------------------------------------------
+export const ShownInForm = () => {
+    const [fields, setField] = useReducer(fieldReducer, demoFields);
+    const [banner, setBanner] = useState();
+    const onSubmit = useCallback((e) => {
+        e.preventDefault();
+        const errorFields = fields.filter(field => !field.validator(field.value));
+        let heading = 'Wow, great job!';
+        let variant = 'success';
+        let messages = fields.map(f => `${f.name} was typed perfectly`);
+        let bannerAction;
+        if (errorFields.length > 0) {
+            heading = "I'm sorry you're having trouble";
+            variant = 'urgent';
+            messages = errorFields.map(f => `${f.name} was not typed correctly`);
+            bannerAction = (_jsx(Link, { href: 'https://community.pega.com/support', target: '_blank', children: "Visit Pega support for assistance" }, void 0));
+        }
+        setBanner(_jsx(Banner, { ...{
+                heading,
+                variant,
+                messages,
+                id: 'formBanner',
+                action: bannerAction,
+                onDismiss() {
+                    setBanner(false);
+                }
+            } }, void 0));
+    }, []);
+    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, { autoComplete: 'off', name: field.name, label: field.label, info: field.info, value: field.value, onChange: (e) => setField(e.target) }, field.name));
+        }) }, void 0));
+};
+// -----------------------------------------------------------------------------
+// CaseView story
+// -----------------------------------------------------------------------------
+export const ShownInCaseView = () => {
+    const [hasBanner, setHasBanner] = useState(true);
+    return (_jsx(CaseViewDemo, { banners: hasBanner && (_jsx(Banner, { id: 'case-view-error', heading: 'Waring', onDismiss: () => setHasBanner(false), variant: 'warning', messages: ['Your submission is missing some important documents.'] }, void 0)) }, void 0));
+};
+ShownInCaseView.parameters = {
+    layout: 'fullscreen'
+};
+// -----------------------------------------------------------------------------
+// AppShell story
+// -----------------------------------------------------------------------------
+export const ShownInAppShell = () => {
+    const [hasBanner, setHasBanner] = useState([]);
+    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { id: 'app-shell-banner-success', heading: '2 items uploaded successfully', onDismiss: () => setHasBanner([]), variant: 'success', messages: ['pega_data.json', 'business-earnings.xlsx'], action: _jsx(Link, { target: '_blank', href: 'https://www.pega.com', children: "Link Here!" }, void 0) }, void 0)) }, void 0));
+};
+ShownInAppShell.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Banner.stories.js.map