@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/jsx/work/Timeline/Timeline.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAiE,CACxF,IAA2D,EAC3D,EAAE;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAC;IAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,QAAQ,CACP,QAAQ,CAAC,CAAC,KAAK,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACzC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  OmitStrict,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps, TimelineToolbar } from '@pega/cosmos-react-work';\nimport {\n  TimelineGroupBy,\n  TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n\nexport const TimelineToolbarDemo: Story = () => {\n  const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n  const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n  const [items, setItems] = useState<TimelineProps['activity']>(activity);\n  const [searchValue, onSearchChange] = useState<SearchInputProps['value']>('');\n\n  const onSearchSubmit = useCallback((value: string) => {\n    setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <TimelineToolbar\n          heading='Timeline Demo'\n          search={{ onSearchSubmit, onSearchChange, value: searchValue }}\n          count={{ total: items.length }}\n          sort={{\n            selected: sortOrder,\n            onItemClick: (id: TimelineProps['sortOrder']) => {\n              setSortOrder(id);\n            }\n          }}\n          group={{\n            selected: groupBy,\n            onItemClick: (id: TimelineProps['groupBy']) => {\n              setGroupBy(id);\n            }\n          }}\n        />\n      </CardHeader>\n      <CardContent>\n        <Timeline\n          activity={items}\n          currentTime={new Date()}\n          sortOrder={sortOrder}\n          groupBy={groupBy}\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"]}

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare const DefaultMainContent: ({ content }: {
+    content: string;
+}) => JSX.Element;
+export declare const notificationItems: ({
+    id: string;
+    primary: string;
+    secondary: string[];
+    visual: JSX.Element;
+    unread: boolean;
+} | {
+    id: string;
+    primary: string;
+    visual: JSX.Element;
+    unread: boolean;
+    secondary?: undefined;
+} | {
+    id: string;
+    primary: string;
+    secondary: string[];
+    unread: boolean;
+    visual?: undefined;
+})[];
+export declare const defaultAppDemoProps: {
+    readonly imageSrc: "https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg";
+    readonly appName: "Service Desk";
+    readonly numberOfNavLinks: 3;
+    readonly navAlignment: "end";
+    readonly navPosition: "inline";
+    readonly operatorName: "Cindy Turner";
+    readonly operatorTitle: "Account";
+    readonly notificationsEmpty: false;
+    readonly notificationsLoading: false;
+};
+//# sourceMappingURL=AppShell.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,kBAAkB;aAA4B,MAAM;iBAQhE,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;IAyD7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;CAUtB,CAAC"}

package/jsx/wss/AppShell/AppShell.mocks.jsx

@@ -0,0 +1,75 @@
+import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledMainContent } from './AppShell.styles';
+export const DefaultMainContent = ({ content }) => (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>
+    <Card>
+      <CardContent>
+        <Text variant='h2'>{content} content</Text>
+      </CardContent>
+    </Card>
+  </Flex>);
+export const notificationItems = [
+    {
+        id: '123',
+        primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
+        visual: <Avatar name='Dean Thomas'/>,
+        unread: true
+    },
+    {
+        id: '456',
+        primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
+        visual: <Avatar name='Seth DeAngelo'/>,
+        unread: true
+    },
+    {
+        id: '789',
+        primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
+        visual: <Avatar name='Janet Moore'/>,
+        unread: true
+    },
+    {
+        id: '000',
+        primary: 'You have been awarded Employee of the Month! Congratulations!',
+        secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],
+        unread: true
+    },
+    {
+        id: '111',
+        primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
+        visual: <Avatar name='Dean Thomas'/>,
+        unread: true
+    },
+    {
+        id: '222',
+        primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
+        visual: <Avatar name='Seth DeAngelo'/>,
+        unread: true
+    },
+    {
+        id: '333',
+        primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
+        visual: <Avatar name='Janet Moore'/>,
+        unread: true
+    },
+    {
+        id: '444',
+        primary: 'You have been awarded Employee of the Month! Congratulations!',
+        secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],
+        unread: true
+    }
+];
+export const defaultAppDemoProps = {
+    imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
+    appName: 'Service Desk',
+    numberOfNavLinks: 3,
+    navAlignment: 'end',
+    navPosition: 'inline',
+    operatorName: 'Cindy Turner',
+    operatorTitle: 'Account',
+    notificationsEmpty: false,
+    notificationsLoading: false
+};
+//# sourceMappingURL=AppShell.mocks.jsx.map

package/jsx/wss/AppShell/AppShell.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.jsx","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const DefaultMainContent = ({ content }: { content: string }) => (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>{content} content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const notificationItems = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  },\n  {\n    id: '111',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '222',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '333',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '444',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultAppDemoProps = {\n  imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  appName: 'Service Desk',\n  numberOfNavLinks: 3,\n  navAlignment: 'end',\n  navPosition: 'inline',\n  operatorName: 'Cindy Turner',\n  operatorTitle: 'Account',\n  notificationsEmpty: false,\n  notificationsLoading: false\n} as const;\n"]}

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

@@ -0,0 +1,19 @@
+import { Meta, Story } from '@storybook/react';
+import { ReactNode } from 'react';
+import { AppShellProps } from '@pega/cosmos-react-wss';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface AppShellDemoProps {
+    appName?: AppShellProps['appInfo']['appName'];
+    imageSrc?: AppShellProps['appInfo']['imageSrc'];
+    numberOfNavLinks?: number;
+    navAlignment?: AppShellProps['navAlignment'];
+    navPosition?: AppShellProps['navPosition'];
+    operatorName?: AppShellProps['operator']['avatar']['name'];
+    operatorTitle?: AppShellProps['operator']['title'];
+    notificationsEmpty?: boolean;
+    notificationsLoading?: boolean;
+    mainContent?: ReactNode;
+}
+export declare const AppShellDemo: Story<AppShellDemoProps>;
+//# sourceMappingURL=AppShell.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAY,aAAa,EAAoB,MAAM,wBAAwB,CAAC;;AAInF,wBAMU;AAEV,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA6DjD,CAAC"}

package/jsx/wss/AppShell/AppShell.stories.jsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { AppShell } from '@pega/cosmos-react-wss';
+import { DefaultMainContent, notificationItems, defaultAppDemoProps } from './AppShell.mocks';
+export default {
+    title: 'Web Self Service/AppShell',
+    component: AppShell,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const AppShellDemo = (args) => {
+    const [mainContent, setMainContent] = useState('Home');
+    const [notifications, setNotifications] = useState(notificationItems);
+    const [numNewNotifications, setNumNewNotifications] = useState(notifications.filter(x => x.unread).length);
+    const handleNotificationClick = (passedId) => {
+        setNotifications(cur => cur.map(({ id, unread, ...item }) => ({
+            id,
+            unread: passedId === id ? false : unread,
+            ...item
+        })));
+    };
+    return (<AppShell main={args.mainContent ?? <DefaultMainContent content={mainContent}/>} appInfo={{
+            appName: args.appName ?? defaultAppDemoProps.appName,
+            imageSrc: args.imageSrc ?? defaultAppDemoProps.imageSrc,
+            onClick: () => setMainContent('Home')
+        }} navLinks={Array.from({
+            length: args.numberOfNavLinks ?? defaultAppDemoProps.numberOfNavLinks
+        }).map((_, index) => {
+            const navName = `Navigation ${index + 1}`;
+            return {
+                id: `nav-${index + 1}`,
+                text: navName,
+                href: '#',
+                onClick: () => setMainContent(navName),
+                current: navName === mainContent
+            };
+        })} operator={{
+            avatar: { name: args.operatorName ?? defaultAppDemoProps.operatorName },
+            title: args.operatorTitle ?? defaultAppDemoProps.operatorTitle,
+            actions: [
+                { id: 'profile', primary: 'My profile', href: '#' },
+                { id: 'settings', primary: 'Settings', href: '#' },
+                { id: 'logOut', primary: 'Log out', href: '#' }
+            ]
+        }} notifications={{
+            title: 'Notifications',
+            count: numNewNotifications,
+            items: args.notificationsEmpty ? [] : notifications,
+            onItemClick: handleNotificationClick,
+            loading: args.notificationsLoading ?? defaultAppDemoProps.notificationsLoading,
+            onNotificationsOpen: () => {
+                setNumNewNotifications(0);
+            }
+        }} navAlignment={args.navAlignment} navPosition={args.navPosition}/>);
+};
+AppShellDemo.args = defaultAppDemoProps;
+AppShellDemo.argTypes = {
+    imageSrc: { control: { type: 'text' } },
+    appName: { control: { type: 'text' } },
+    numberOfNavLinks: { control: { type: 'number' } },
+    navAlignment: { options: ['start', 'center', 'end'], control: { type: 'select' } },
+    navPosition: { options: ['inline', 'below'], control: { type: 'select' } },
+    operatorName: { control: { type: 'text' } },
+    operatorTitle: { control: { type: 'text' } },
+    notificationsEmpty: { control: { type: 'boolean' } },
+    notificationsLoading: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=AppShell.stories.jsx.map

package/jsx/wss/AppShell/AppShell.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { AppShell, AppShellProps, NotificationItem } from '@pega/cosmos-react-wss';\n\nimport { DefaultMainContent, notificationItems, defaultAppDemoProps } from './AppShell.mocks';\n\nexport default {\n  title: 'Web Self Service/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellDemoProps {\n  appName?: AppShellProps['appInfo']['appName'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  numberOfNavLinks?: number;\n  navAlignment?: AppShellProps['navAlignment'];\n  navPosition?: AppShellProps['navPosition'];\n  operatorName?: AppShellProps['operator']['avatar']['name'];\n  operatorTitle?: AppShellProps['operator']['title'];\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  mainContent?: ReactNode;\n}\n\nexport const AppShellDemo: Story<AppShellDemoProps> = (args: AppShellDemoProps) => {\n  const [mainContent, setMainContent] = useState('Home');\n  const [notifications, setNotifications] = useState<NotificationItem[]>(notificationItems);\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\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  return (\n    <AppShell\n      main={args.mainContent ?? <DefaultMainContent content={mainContent} />}\n      appInfo={{\n        appName: args.appName ?? defaultAppDemoProps.appName,\n        imageSrc: args.imageSrc ?? defaultAppDemoProps.imageSrc,\n        onClick: () => setMainContent('Home')\n      }}\n      navLinks={Array.from({\n        length: args.numberOfNavLinks ?? defaultAppDemoProps.numberOfNavLinks\n      }).map((_, index) => {\n        const navName = `Navigation ${index + 1}`;\n\n        return {\n          id: `nav-${index + 1}`,\n          text: navName,\n          href: '#',\n          onClick: () => setMainContent(navName),\n          current: navName === mainContent\n        };\n      })}\n      operator={{\n        avatar: { name: args.operatorName ?? defaultAppDemoProps.operatorName },\n        title: args.operatorTitle ?? defaultAppDemoProps.operatorTitle,\n        actions: [\n          { id: 'profile', primary: 'My profile', href: '#' },\n          { id: 'settings', primary: 'Settings', href: '#' },\n          { id: 'logOut', primary: 'Log out', href: '#' }\n        ]\n      }}\n      notifications={{\n        title: 'Notifications',\n        count: numNewNotifications,\n        items: args.notificationsEmpty ? [] : notifications,\n        onItemClick: handleNotificationClick,\n        loading: args.notificationsLoading ?? defaultAppDemoProps.notificationsLoading,\n        onNotificationsOpen: () => {\n          setNumNewNotifications(0);\n        }\n      }}\n      navAlignment={args.navAlignment}\n      navPosition={args.navPosition}\n    />\n  );\n};\n\nAppShellDemo.args = defaultAppDemoProps;\n\n// eslint-disable-next-line demo-patterns/args-match-types\nAppShellDemo.argTypes = {\n  imageSrc: { control: { type: 'text' } },\n  appName: { control: { type: 'text' } },\n  numberOfNavLinks: { control: { type: 'number' } },\n  navAlignment: { options: ['start', 'center', 'end'], control: { type: 'select' } },\n  navPosition: { options: ['inline', 'below'], control: { type: 'select' } },\n  operatorName: { control: { type: 'text' } },\n  operatorTitle: { control: { type: 'text' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } }\n};\n"]}

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

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

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

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

package/jsx/wss/AppShell/AppShell.styles.js

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

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

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

package/jsx/wss/CaseView/CaseView.mocks.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const casePreviewPrimaryFields: {
+    name: string;
+    value: string;
+}[];
+export declare const casePreviewSecondaryFields: ({
+    name: string;
+    value: JSX.Element;
+} | {
+    name: string;
+    value: string;
+})[];
+//# sourceMappingURL=CaseView.mocks.d.ts.map

package/jsx/wss/CaseView/CaseView.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.mocks.d.ts","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":";AAyBA,eAAO,MAAM,wBAAwB;;;GASpC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;IAAsB,CAAC"}

package/jsx/wss/CaseView/CaseView.mocks.jsx

@@ -0,0 +1,34 @@
+import { Status } from '@pega/cosmos-react-core';
+const createDate = new Date(2016, 1, 8);
+const msInYear = 1000 * 60 * 60 * 24 * 365;
+const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
+const baseSecondaryFields = [
+    {
+        name: 'Status',
+        value: <Status variant='info'>New</Status>
+    },
+    {
+        name: 'Assigned to',
+        value: 'Dean Thomas'
+    },
+    {
+        name: 'Create date',
+        value: createDate.toDateString()
+    },
+    {
+        name: 'Update date',
+        value: `${diffInYears} years ago`
+    }
+];
+export const casePreviewPrimaryFields = [
+    {
+        name: 'Member ID',
+        value: 'M204859F438G'
+    },
+    {
+        name: 'Priority',
+        value: '95'
+    }
+];
+export const casePreviewSecondaryFields = baseSecondaryFields;
+//# sourceMappingURL=CaseView.mocks.jsx.map

package/jsx/wss/CaseView/CaseView.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.mocks.jsx","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC;AAE/E,MAAM,mBAAmB,GAAG;IAC1B;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC;KAC3C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,aAAa;KACrB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE;KACjC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG,WAAW,YAAY;KAClC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,cAAc;KACtB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,IAAI;KACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAAC","sourcesContent":["import { Status } from '@pega/cosmos-react-core';\n\nconst createDate = new Date(2016, 1, 8);\nconst msInYear = 1000 * 60 * 60 * 24 * 365;\nconst diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\nconst baseSecondaryFields = [\n  {\n    name: 'Status',\n    value: <Status variant='info'>New</Status>\n  },\n  {\n    name: 'Assigned to',\n    value: 'Dean Thomas'\n  },\n  {\n    name: 'Create date',\n    value: createDate.toDateString()\n  },\n  {\n    name: 'Update date',\n    value: `${diffInYears} years ago`\n  }\n];\n\nexport const casePreviewPrimaryFields = [\n  {\n    name: 'Member ID',\n    value: 'M204859F438G'\n  },\n  {\n    name: 'Priority',\n    value: '95'\n  }\n];\n\nexport const casePreviewSecondaryFields = baseSecondaryFields;\n"]}

package/jsx/wss/CaseView/CaseView.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface CaseViewDemoProps {
+    showStagesRegion?: boolean;
+    showUtilitiesRegion?: boolean;
+    showSummaryRegion?: boolean;
+    showTasksRegion?: boolean;
+    showPulseRegion?: boolean;
+}
+export declare const CaseViewDemo: Story<CaseViewDemoProps>;
+//# sourceMappingURL=CaseView.stories.d.ts.map

package/jsx/wss/CaseView/CaseView.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAMU;AAEV,UAAU,iBAAiB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA4EjD,CAAC"}

package/jsx/wss/CaseView/CaseView.stories.jsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { AppShell, CaseView } from '@pega/cosmos-react-wss';
+import { CaseSummaryFields, Stages } from '@pega/cosmos-react-work';
+import { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';
+import { FeedPostDemo } from '../../social/Feed/FeedPost.stories';
+import { casePreviewPrimaryFields, casePreviewSecondaryFields } from '../../work/CaseView/CaseView.mocks';
+import { TasksDemo } from '../../work/Tasks/Tasks.stories';
+import { defaultAppDemoProps } from '../AppShell/AppShell.mocks';
+export default {
+    title: 'Web Self Service/CaseView',
+    component: CaseView,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const CaseViewDemo = (args) => {
+    const [, setMainContent] = useState('Home');
+    return (<AppShell caseId='1234' main={<CaseView heading='I have an issue that is impacting my work and I need help' actions={[{ id: '1', text: 'Some text' }]} tasks={{ label: 'Tasks', content: <TasksDemo /> }} stages={args.showStagesRegion
+                ? {
+                    label: 'Stages',
+                    content: (<Stages stages={[
+                            { name: 'Create', id: '1', completed: true },
+                            { name: 'Troubleshoot', id: '2', completed: false },
+                            { name: 'Resolve', id: '3', completed: false }
+                        ]} current=''/>)
+                }
+                : undefined} summary={args.showSummaryRegion
+                ? {
+                    label: 'Summary',
+                    content: (<CaseSummaryFields primaryFields={casePreviewPrimaryFields} secondaryFields={casePreviewSecondaryFields}/>)
+                }
+                : undefined} feed={args.showPulseRegion ? { label: 'Feed', content: <FeedPostDemo /> } : undefined} utility={args.showUtilitiesRegion
+                ? { label: 'Utility', content: <AttachmentsMock /> }
+                : undefined}/>} appInfo={{
+            appName: 'App name',
+            imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'
+        }} navLinks={Array.from({
+            length: defaultAppDemoProps.numberOfNavLinks
+        }).map((_, index) => {
+            const navName = `Navigation ${index + 1}`;
+            return {
+                id: `nav-${index + 1}`,
+                text: navName,
+                href: '#',
+                onClick: () => setMainContent(navName)
+            };
+        })} operator={{
+            avatar: { name: 'hello' },
+            title: 'title',
+            actions: [
+                { id: 'profile', primary: 'My profile', href: '#' },
+                { id: 'settings', primary: 'Settings', href: '#' },
+                { id: 'logOut', primary: 'Log out', href: '#' }
+            ]
+        }}/>);
+};
+CaseViewDemo.args = {
+    showStagesRegion: true,
+    showUtilitiesRegion: true,
+    showSummaryRegion: true,
+    showPulseRegion: true
+};
+CaseViewDemo.argTypes = {
+    showStagesRegion: { control: { type: 'boolean' } },
+    showUtilitiesRegion: { control: { type: 'boolean' } },
+    showSummaryRegion: { control: { type: 'boolean' } },
+    showPulseRegion: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CaseView.stories.jsx.map

package/jsx/wss/CaseView/CaseView.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { AppShell, CaseView } from '@pega/cosmos-react-wss';\nimport { CaseSummaryFields, Stages } from '@pega/cosmos-react-work';\n\nimport { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';\nimport { FeedPostDemo } from '../../social/Feed/FeedPost.stories';\nimport {\n  casePreviewPrimaryFields,\n  casePreviewSecondaryFields\n} from '../../work/CaseView/CaseView.mocks';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { defaultAppDemoProps } from '../AppShell/AppShell.mocks';\n\nexport default {\n  title: 'Web Self Service/CaseView',\n  component: CaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface CaseViewDemoProps {\n  showStagesRegion?: boolean;\n  showUtilitiesRegion?: boolean;\n  showSummaryRegion?: boolean;\n  showTasksRegion?: boolean;\n  showPulseRegion?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewDemoProps> = (args: CaseViewDemoProps) => {\n  const [, setMainContent] = useState('Home');\n\n  return (\n    <AppShell\n      caseId='1234'\n      main={\n        <CaseView\n          heading='I have an issue that is impacting my work and I need help'\n          actions={[{ id: '1', text: 'Some text' }]}\n          tasks={{ label: 'Tasks', content: <TasksDemo /> }}\n          stages={\n            args.showStagesRegion\n              ? {\n                  label: 'Stages',\n                  content: (\n                    <Stages\n                      stages={[\n                        { name: 'Create', id: '1', completed: true },\n                        { name: 'Troubleshoot', id: '2', completed: false },\n                        { name: 'Resolve', id: '3', completed: false }\n                      ]}\n                      current=''\n                    />\n                  )\n                }\n              : undefined\n          }\n          summary={\n            args.showSummaryRegion\n              ? {\n                  label: 'Summary',\n                  content: (\n                    <CaseSummaryFields\n                      primaryFields={casePreviewPrimaryFields}\n                      secondaryFields={casePreviewSecondaryFields}\n                    />\n                  )\n                }\n              : undefined\n          }\n          feed={args.showPulseRegion ? { label: 'Feed', content: <FeedPostDemo /> } : undefined}\n          utility={\n            args.showUtilitiesRegion\n              ? { label: 'Utility', content: <AttachmentsMock /> }\n              : undefined\n          }\n        />\n      }\n      appInfo={{\n        appName: 'App name',\n        imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'\n      }}\n      navLinks={Array.from({\n        length: defaultAppDemoProps.numberOfNavLinks\n      }).map((_, index) => {\n        const navName = `Navigation ${index + 1}`;\n\n        return {\n          id: `nav-${index + 1}`,\n          text: navName,\n          href: '#',\n          onClick: () => setMainContent(navName)\n        };\n      })}\n      operator={{\n        avatar: { name: 'hello' },\n        title: 'title',\n        actions: [\n          { id: 'profile', primary: 'My profile', href: '#' },\n          { id: 'settings', primary: 'Settings', href: '#' },\n          { id: 'logOut', primary: 'Log out', href: '#' }\n        ]\n      }}\n    />\n  );\n};\n\nCaseViewDemo.args = {\n  showStagesRegion: true,\n  showUtilitiesRegion: true,\n  showSummaryRegion: true,\n  showPulseRegion: true\n};\n\nCaseViewDemo.argTypes = {\n  showStagesRegion: { control: { type: 'boolean' } },\n  showUtilitiesRegion: { control: { type: 'boolean' } },\n  showSummaryRegion: { control: { type: 'boolean' } },\n  showPulseRegion: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/wss/PageTemplates/PageTemplates.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface BannerPageStoryProps {
+    title: string;
+    message: string;
+    bannerVariant: 'light' | 'dark';
+    backgroundColor?: string;
+    backgroundImage?: string;
+    tintImage?: boolean;
+    oneColumn?: boolean;
+    variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';
+}
+export declare const BannerPageDemo: Story<BannerPageStoryProps>;
+//# sourceMappingURL=PageTemplates.stories.d.ts.map

package/jsx/wss/PageTemplates/PageTemplates.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAO/C,wBAKU;AAEV,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;CACxD;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAkCtD,CAAC"}

package/jsx/wss/PageTemplates/PageTemplates.stories.jsx

@@ -0,0 +1,48 @@
+import { BannerPage } from '@pega/cosmos-react-wss';
+import { Text } from '@pega/cosmos-react-core';
+import { AppShellDemo } from '../AppShell/AppShell.stories';
+export default {
+    title: 'Web Self Service/Page Templates',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const BannerPageDemo = (args) => {
+    return (<AppShellDemo mainContent={<BannerPage variant={args.variant ? args.variant : undefined} a={<div>
+              <Text variant='h2' as='h2'>
+                Section A
+              </Text>
+            </div>} b={!args.oneColumn ? (<div>
+                <Text variant='h2' as='h2'>
+                  Section B
+                </Text>
+              </div>) : undefined} banner={{
+                variant: args.bannerVariant,
+                backgroundColor: args.backgroundColor,
+                title: args.title,
+                message: args.message,
+                backgroundImage: args.backgroundImage,
+                tintImage: args.tintImage
+            }}/>}/>);
+};
+BannerPageDemo.args = {
+    title: 'Banner page demo',
+    message: 'Welcome to the banner page demo, nice to see you. Did you get your haircut?',
+    bannerVariant: 'light',
+    backgroundColor: '#3eb489',
+    backgroundImage: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/moraine-lake-and-the-valley-of-the-ten-peaks-in-the-royalty-free-image-1571062944.jpg',
+    tintImage: true,
+    oneColumn: false,
+    variant: undefined
+};
+BannerPageDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    message: { control: { type: 'text' } },
+    bannerVariant: { options: ['light', 'dark'], control: { type: 'select' } },
+    backgroundColor: { control: { type: 'color' } },
+    backgroundImage: { control: { type: 'text' } },
+    tintImage: { control: { type: 'boolean', defaultValue: true } },
+    oneColumn: { control: { type: 'boolean', defaultValue: false } },
+    variant: { options: ['two-column', 'narrow-wide', 'wide-narrow'], control: { type: 'select' } }
+};
+//# sourceMappingURL=PageTemplates.stories.jsx.map

package/jsx/wss/PageTemplates/PageTemplates.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.stories.jsx","sourceRoot":"","sources":["../../../src/wss/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAaV,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,CAAC,YAAY,CACX,WAAW,CAAC,CACV,CAAC,UAAU,CACT,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,CAAC,CAAC,CACA,CAAC,GAAG,CACF;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CACxB;;cACF,EAAE,IAAI,CACR;YAAA,EAAE,GAAG,CAAC,CACP,CACD,CAAC,CAAC,CACA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,CAAC,GAAG,CACF;gBAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CACxB;;gBACF,EAAE,IAAI,CACR;cAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,SAAS,CACd,CACD,MAAM,CAAC,CAAC;gBACN,OAAO,EAAE,IAAI,CAAC,aAAa;gBAC3B,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B,CAAC,EACF,CACH,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,kBAAkB;IACzB,OAAO,EAAE,6EAA6E;IACtF,aAAa,EAAE,OAAO;IACtB,eAAe,EAAE,SAAS;IAC1B,eAAe,EACb,oJAAoJ;IACtJ,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE;IAC/D,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE;IAChE,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAChG,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { BannerPage } from '@pega/cosmos-react-wss';\nimport { Text } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nexport default {\n  title: 'Web Self Service/Page Templates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface BannerPageStoryProps {\n  title: string;\n  message: string;\n  bannerVariant: 'light' | 'dark';\n  backgroundColor?: string;\n  backgroundImage?: string;\n  tintImage?: boolean;\n  oneColumn?: boolean;\n  variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';\n}\n\nexport const BannerPageDemo: Story<BannerPageStoryProps> = (args: BannerPageStoryProps) => {\n  return (\n    <AppShellDemo\n      mainContent={\n        <BannerPage\n          variant={args.variant ? args.variant : undefined}\n          a={\n            <div>\n              <Text variant='h2' as='h2'>\n                Section A\n              </Text>\n            </div>\n          }\n          b={\n            !args.oneColumn ? (\n              <div>\n                <Text variant='h2' as='h2'>\n                  Section B\n                </Text>\n              </div>\n            ) : undefined\n          }\n          banner={{\n            variant: args.bannerVariant,\n            backgroundColor: args.backgroundColor,\n            title: args.title,\n            message: args.message,\n            backgroundImage: args.backgroundImage,\n            tintImage: args.tintImage\n          }}\n        />\n      }\n    />\n  );\n};\n\nBannerPageDemo.args = {\n  title: 'Banner page demo',\n  message: 'Welcome to the banner page demo, nice to see you. Did you get your haircut?',\n  bannerVariant: 'light',\n  backgroundColor: '#3eb489',\n  backgroundImage:\n    'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/moraine-lake-and-the-valley-of-the-ten-peaks-in-the-royalty-free-image-1571062944.jpg',\n  tintImage: true,\n  oneColumn: false,\n  variant: undefined\n};\n\nBannerPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  message: { control: { type: 'text' } },\n  bannerVariant: { options: ['light', 'dark'], control: { type: 'select' } },\n  backgroundColor: { control: { type: 'color' } },\n  backgroundImage: { control: { type: 'text' } },\n  tintImage: { control: { type: 'boolean', defaultValue: true } },\n  oneColumn: { control: { type: 'boolean', defaultValue: false } },\n  variant: { options: ['two-column', 'narrow-wide', 'wide-narrow'], control: { type: 'select' } }\n};\n"]}

package/jsx/wss/QuickCreate/QuickCreate.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface QuickCreateDemoArgs {
+    borderRadius: number;
+    color: string;
+    count: number;
+}
+export declare const QuickCreateDemo: Story<QuickCreateDemoArgs>;
+//# sourceMappingURL=QuickCreate.stories.d.ts.map

package/jsx/wss/QuickCreate/QuickCreate.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/QuickCreate/QuickCreate.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,UAAU,mBAAmB;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAyBtD,CAAC"}

package/jsx/wss/QuickCreate/QuickCreate.stories.jsx

@@ -0,0 +1,37 @@
+import { QuickCreate } from '@pega/cosmos-react-wss';
+import { Configuration } from '@pega/cosmos-react-core';
+export default {
+    title: 'Web Self Service/QuickCreate',
+    component: QuickCreate
+};
+export const QuickCreateDemo = (args) => {
+    const lorem = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt excepturi sit alias, mollitia voluptate nobis, aliquam corrupti delectus ea molestiae, illum provident necessitatibus? Atque temporibus officiis voluptas nam nihil!';
+    const actions = Array.from({ length: args.count }, (_, i) => {
+        return {
+            label: i === args.count - 1 ? `${lorem}` : `Case type ${i + 1}`,
+            onClick: () => { },
+            icon: 'plus'
+        };
+    });
+    return (<Configuration theme={{
+            components: {
+                button: {
+                    'border-radius': args.borderRadius,
+                    color: args.color
+                }
+            }
+        }}>
+      <QuickCreate heading='How can we help you?' actions={actions}/>
+    </Configuration>);
+};
+QuickCreateDemo.args = {
+    borderRadius: 1,
+    color: '#076bc9',
+    count: 4
+};
+QuickCreateDemo.argTypes = {
+    borderRadius: { control: { type: 'number' } },
+    color: { control: { type: 'color' } },
+    count: { control: { type: 'number' } }
+};
+//# sourceMappingURL=QuickCreate.stories.jsx.map

package/jsx/wss/QuickCreate/QuickCreate.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.stories.jsx","sourceRoot":"","sources":["../../../src/wss/QuickCreate/QuickCreate.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,WAAW;CACf,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACvF,MAAM,KAAK,GACT,2OAA2O,CAAC;IAE9O,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC1D,OAAO;YACL,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;YAC/D,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;YACjB,IAAI,EAAE,MAAM;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,CAAC,CAEF;MAAA,CAAC,WAAW,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,EAC/D;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,YAAY,EAAE,CAAC;IACf,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACrC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { QuickCreate } from '@pega/cosmos-react-wss';\nimport { Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Web Self Service/QuickCreate',\n  component: QuickCreate\n} as Meta;\n\ninterface QuickCreateDemoArgs {\n  borderRadius: number;\n  color: string;\n  count: number;\n}\n\nexport const QuickCreateDemo: Story<QuickCreateDemoArgs> = (args: QuickCreateDemoArgs) => {\n  const lorem =\n    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt excepturi sit alias, mollitia voluptate nobis, aliquam corrupti delectus ea molestiae, illum provident necessitatibus? Atque temporibus officiis voluptas nam nihil!';\n\n  const actions = Array.from({ length: args.count }, (_, i) => {\n    return {\n      label: i === args.count - 1 ? `${lorem}` : `Case type ${i + 1}`,\n      onClick: () => {},\n      icon: 'plus'\n    };\n  });\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-radius': args.borderRadius,\n            color: args.color\n          }\n        }\n      }}\n    >\n      <QuickCreate heading='How can we help you?' actions={actions} />\n    </Configuration>\n  );\n};\n\nQuickCreateDemo.args = {\n  borderRadius: 1,\n  color: '#076bc9',\n  count: 4\n};\n\nQuickCreateDemo.argTypes = {\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  count: { control: { type: 'number' } }\n};\n"]}

package/lib/build/AppHeader/AppHeader.stories.d.ts

@@ -5,5 +5,5 @@ export default _default;
 interface AppHeaderStoryProps extends BranchButtonProps {
     showPreview: boolean;
 }
-export declare const appHeader: Story<AppHeaderStoryProps>;
+export declare const AppHeaderDemo: Story<AppHeaderStoryProps>;
 //# sourceMappingURL=AppHeader.stories.d.ts.map

package/lib/build/AppHeader/AppHeader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAExE,wBAMU;AAEV,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,mBAAmB,CA+EhD,CAAC"}
+{"version":3,"file":"AppHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAGxE,wBAMU;AAEV,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CA0GpD,CAAC"}