@pega/cosmos-react-demos 2.0.0

package/lib/core/AppShell/AppShell.mocks.jsx

@@ -0,0 +1,147 @@
+import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledMainContent } from './AppShell.styles';
+export const defaultLinks = [
+    {
+        id: '01',
+        name: 'Home',
+        href: '#home',
+        icon: 'home-solid',
+        active: true
+    },
+    {
+        id: '02',
+        name: 'My Dashboard',
+        href: '#dashboard',
+        icon: 'gauge-solid'
+    },
+    {
+        id: '03',
+        name: 'Collaboration',
+        href: '#collaboration',
+        icon: 'social-solid',
+        links: [
+            { id: '3-01', name: 'Spaces', href: '#spaces' },
+            { id: '3-02', name: 'Documents', href: '#documents' }
+        ]
+    },
+    {
+        id: '04',
+        name: 'Bugs',
+        href: '#bugs',
+        icon: 'users-solid'
+    },
+    {
+        id: '05',
+        name: 'Epics',
+        href: '#epics',
+        icon: 'book-solid'
+    },
+    {
+        id: '06',
+        name: 'Goals',
+        href: '#goals',
+        icon: 'analytics-good'
+    },
+    {
+        id: '07',
+        name: 'More',
+        href: '#more',
+        icon: 'more-alt',
+        active: false,
+        links: [
+            { id: '7-01', name: 'Item A', href: '#itemA' },
+            { id: '7-02', name: 'Option 1', href: '#option1' }
+        ]
+    }
+];
+export const defaultNotifications = [
+    {
+        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
+    }
+];
+export const defaultRecents = [
+    {
+        id: '123',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '456',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '789',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    },
+    {
+        id: '111',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '222',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '333',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    },
+    {
+        id: '444',
+        primary: "BUG-12345: 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]
+    },
+    {
+        id: '555',
+        primary: "BUG-54321: 'Text variant h1 renders as h3 in DOM'."
+    },
+    {
+        id: '666',
+        primary: "BUG-00000: 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
+    }
+];
+export const defaultMainContent = (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>
+    <Card>
+      <CardContent>
+        <Text variant='h2'>This is the main content</Text>
+      </CardContent>
+    </Card>
+  </Flex>);
+export const operatorData = {
+    avatar: <Avatar name='Cindy Turner'/>,
+    actions: [
+        { text: 'Profile', id: 'profile' },
+        { text: 'Settings', id: 'settings' },
+        { text: 'My applications', id: 'apps' },
+        { text: 'Help center', id: 'help' },
+        { text: 'Log out', id: 'logout' }
+    ],
+    name: 'Cindy Turner'
+};
+//# sourceMappingURL=AppShell.mocks.jsx.map

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

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

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

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

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

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

package/lib/core/AppShell/AppShell.stories.jsx

@@ -0,0 +1,222 @@
+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 (<Modal as='form' heading={`New ${caseType}`} actions={<>
+            <Button onClick={dismiss}>Cancel</Button>
+            <Button variant='primary' type='submit' onClick={(e) => {
+                    e.preventDefault();
+                    dismiss();
+                    pushToaster({ content: `${caseType} requested` });
+                }}>
+              Request
+            </Button>
+          </>}>
+        <Grid container={{ rowGap: 2 }}>
+          <DateInput label='Date Requested' info={null}/>
+          <Select label='Department'>
+            <Option value=''>Select…</Option>
+            <Option value='Fire'>Fire</Option>
+            <Option value='Facilities'>Facilities</Option>
+            <Option value='Parks'>Parks</Option>
+            <Option value='Sanitation'>Sanitation</Option>
+            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>
+            <Option value='Police'>Police</Option>
+            <Option value='Courts'>Courts</Option>
+            <Option value='Healthcare'>Healthcare</Option>
+            <Option value='Energy'>Energy</Option>
+            <Option value='Justice department'>Justice department</Option>
+            <Option value='Environmental'>Environmental</Option>
+          </Select>
+          <TextArea label='Purpose of Purchase'/>
+          <Select label='Desired Make'>
+            <Option value=''>Select...</Option>
+            <Option value='Ford'>Ford</Option>
+            <Option value='Dodge'>Dodge</Option>
+            <Option value='Toyota'>Toyota</Option>
+            <Option value='Tesla'>Tesla</Option>
+          </Select>
+          <Input label='Desired Make'/>
+          <Input type='number' min='2016' max='2021' label='Year' info='Must be within last 5 years'/>
+          <Input type='number' min='0.01' step='0.01' max='50000' label='Estimated Cost' info='May not exceed $50,000.00'/>
+        </Grid>
+      </Modal>);
+    };
+    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: <Icon name='bell-solid'/>,
+            count: args.notificationsEmpty ? 0 : numNewNotifications,
+            drawerView: <AppShellList listView={notificationViewItems}/>,
+            onDrawerOpen: () => {
+                clearInterval(newNotificationCountTimerRef.current);
+                setNumNewNotifications(0);
+            },
+            onDrawerClose: () => {
+                if (windowIsAvailable) {
+                    newNotificationCountTimerRef.current = window.setInterval(() => {
+                        setNumNewNotifications(cur => cur + 2);
+                    }, 60000);
+                }
+            }
+        },
+        {
+            name: 'Recents',
+            visual: <Icon name='clock-solid'/>,
+            drawerView: <AppShellList listView={recentViewItems}/>
+        }
+    ];
+    return (<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}/>);
+};
+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.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.stories.jsx","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/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/lib/core/AppShell/AppShell.styles.d.ts.map

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

package/lib/core/AppShell/AppShell.styles.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,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"}

package/lib/core/Avatar/Avatar.stories.jsx

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.jsx","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps } 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: { control: { type: 'text' } }\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.d.ts

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

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

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

package/lib/core/Backdrop/Backdrop.stories.jsx

@@ -0,0 +1,43 @@
+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 (<>
+      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>
+
+      {open && (<Backdrop open={open} alpha={args.alpha} variant={args.variant} transitionSpeed={args.transitionSpeed}>
+          <Button variant='primary' onClick={() => setOpen(false)}>
+            Close Backdrop
+          </Button>
+        </Backdrop>)}
+    </>);
+};
+export const DismissibleBackdropDemo = (args) => {
+    const [open, setOpen] = useState(false);
+    return (<>
+      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>
+
+      {open && (<Backdrop onClick={() => setOpen(false)} open={open} alpha={args.alpha} variant={args.variant} transitionSpeed={args.transitionSpeed}>
+          <Card>
+            <CardContent>
+              <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>
+            </CardContent>
+          </Card>
+        </Backdrop>)}
+    </>);
+};
+//# sourceMappingURL=Backdrop.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.stories.jsx","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,EACE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAE3D;;MAAA,CAAC,IAAI,IAAI,CACP,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAEtC;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CACtD;;UACF,EAAE,MAAM,CACV;QAAA,EAAE,QAAQ,CAAC,CACZ,CACH;IAAA,GAAG,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,EACE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAE3D;;MAAA,CAAC,IAAI,IAAI,CACP,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,eAAe,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAEtC;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,IAAI,CAAC,oEAAoE,EAAE,IAAI,CAClF;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,QAAQ,CAAC,CACZ,CACH;IAAA,GAAG,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"]}