@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/build/AppShell/AppShell.stories.jsx

@@ -1,194 +0,0 @@
-import { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { Text, treeHelpers, TabbedPage as TabbedPageComp } from '@pega/cosmos-react-core';
-import { AppShell } from '@pega/cosmos-react-build';
-import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList } from './AppShell.mocks';
-export default {
-    title: 'Build/AppShell',
-    component: AppShell,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-const getPath = (args) => {
-    const { showBreadcrumbs, pageContent: { data: { pageTitle, breadcrumbsPath } } } = args;
-    if (showBreadcrumbs) {
-        const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;
-        return path
-            ? path.split(',').map((crumb, i) => {
-                return {
-                    id: crumb,
-                    primary: crumb,
-                    href: i < 3 ? `#${crumb.replace(/\s/g, '-')}` : undefined
-                };
-            })
-            : [];
-    }
-};
-const TabbedPage = (args) => {
-    const [currentTabId, setCurrentTabId] = useState('1');
-    const [content, setContent] = useState('Tab 1 content');
-    const { pageContent, showBreadcrumbs } = args;
-    return (<TabbedPageComp a={<Text variant='h1' as='div'>
-          {content}
-        </Text>} path={getPath({ showBreadcrumbs, pageContent })} title={pageContent.data.pageTitle} tabs={{
-            tabs: pageContent.data.tabs.map((name, i) => {
-                const id = `${i + 1}`;
-                return { id, name };
-            }),
-            type: 'horizontal',
-            currentTabId,
-            onTabClick: id => {
-                setCurrentTabId(id);
-                setContent(`Tab ${id} content`);
-            }
-        }}/>);
-};
-export const AppShellDemo = (args) => {
-    const [currentNodeId, setCurrentNodeId] = useState('1');
-    const [allNodes, setAllNodes] = useState(treeList);
-    const [currentDrawer, setCurrentDrawer] = useState('');
-    const [currentUtil, setCurrentUtil] = useState('');
-    const [pageContent, setPageContent] = useState(contents[0]);
-    const onNodeClick = (nodeId, activeDrawerId) => {
-        const clickedNode = treeHelpers.getNode(allNodes, nodeId);
-        if (!clickedNode?.nodes) {
-            setCurrentUtil(activeDrawerId);
-            setCurrentNodeId(nodeId);
-            setPageContent(contents.find(content => content.id === clickedNode?.id));
-            return;
-        }
-        setAllNodes(tree => treeHelpers.mapNode(tree, nodeId, node => {
-            return {
-                ...node,
-                expanded: !node.expanded
-            };
-        }));
-    };
-    const appHeader = {
-        brand: {
-            name: 'AppStudioX'
-        },
-        utils: {
-            avatar: { name: 'Alan' },
-            search: {
-                placeholder: 'Search anything, anywhere…'
-            },
-            branchName: 'test',
-            actions: [
-                {
-                    primary: 'Switch branch',
-                    id: 'switchbranch',
-                    onClick: () => action('Clicked switchbranch')()
-                },
-                {
-                    primary: 'Create branch',
-                    id: 'createbranch',
-                    onClick: () => action('Clicked createbranch')()
-                }
-            ],
-            onPreviewClick: args.showPreview ? args.onPreviewClick : undefined
-        },
-        links: [
-            {
-                id: '1',
-                name: 'Applications',
-                onClick: () => action('Clicked Applications')()
-            },
-            {
-                id: '2',
-                name: 'Shared resources',
-                onClick: () => action('Clicked Shared resources')()
-            },
-            {
-                id: '3',
-                name: 'Teams',
-                onClick: () => action('Clicked Teams')()
-            },
-            {
-                id: '4',
-                name: 'AI & Analytics',
-                onClick: () => action('Clicked AI & Analytics')()
-            },
-            {
-                id: '5',
-                name: 'Deploy',
-                onClick: () => action('Clicked Deploy')()
-            }
-        ]
-    };
-    return (<>
-      <AppShell main={<TabbedPage {...{ ...args, pageContent }}/>} appHeader={appHeader} hideNav={args.hideNavigation} appInfo={{
-            text: 'U+ Desk',
-            visual: {
-                icon: {
-                    name: 'phone-in-solid',
-                    bgColor: '#0ac7c8'
-                }
-            }
-        }} navigation={{
-            nodes: allNodes,
-            currentNodeId,
-            onNodeClick: id => {
-                onNodeClick(id, currentDrawer);
-            }
-        }} utils={{
-            onItemClick: id => {
-                setCurrentDrawer(id);
-                if (id === 'explorer') {
-                    const appExploreTree = currentNodeId
-                        ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)
-                        : appExplorerMenuList;
-                    setAllNodes(appExploreTree);
-                }
-                if (id === 'branches') {
-                    const branchTree = currentNodeId
-                        ? treeHelpers.expandTo(branchesMenuList, currentNodeId)
-                        : branchesMenuList;
-                    setAllNodes(branchTree);
-                }
-                if (id === 'records') {
-                    const recordTree = currentNodeId
-                        ? treeHelpers.expandTo(recordMenuList, currentNodeId)
-                        : recordMenuList;
-                    setAllNodes(recordTree);
-                }
-            },
-            currentItemId: currentUtil,
-            items: [
-                {
-                    label: 'App Explorer',
-                    id: 'explorer'
-                },
-                {
-                    label: 'Branches',
-                    id: 'branches'
-                },
-                {
-                    label: 'Records',
-                    id: 'records'
-                }
-            ],
-            drawer: {
-                onBeforeClose: () => {
-                    setCurrentDrawer('');
-                    setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);
-                }
-            },
-            devMode: true
-        }}/>
-    </>);
-};
-AppShellDemo.args = {
-    hideNavigation: false,
-    showBreadcrumbs: true,
-    showPreview: true,
-    onPreviewClick: action('Clicked preview button')
-};
-AppShellDemo.argTypes = {
-    hideNavigation: { control: { type: 'boolean' } },
-    showBreadcrumbs: { control: { type: 'boolean' } },
-    showPreview: { control: { type: 'boolean' } },
-    onPreviewClick: { table: { disable: true } }
-};
-//# sourceMappingURL=AppShell.stories.jsx.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>('1');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n  const [currentDrawer, setCurrentDrawer] = useState('');\n  const [currentUtil, setCurrentUtil] = useState('');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

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

@@ -1,50 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/Banner/Banner.stories.jsx

@@ -1,125 +0,0 @@
-import { useState, useCallback, useReducer } from 'react';
-import { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';
-import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
-import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
-export default {
-    title: 'Core/Banner',
-    component: Banner
-};
-export const SuccessBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (<>
-      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}
-      {showBanner && (<Banner id='success' variant='success' onDismiss={() => setShowBanner(false)} heading='2 items uploaded successfully' messages={['pega_data.json', 'business-earnings.xlsx']}/>)}
-    </>);
-};
-export const ErrorBanner = () => {
-    return (<Banner id='error' variant='urgent' heading='Error' action={<div>
-          <Button variant='link'>Try again</Button>
-        </div>} messages={['Your request failed to send!', 'Please review your request and try again']}/>);
-};
-export const WarningBanner = () => {
-    return (<Banner id='warning' variant='warning' action={<div>
-          <Button variant='link'>Why this matters</Button>
-        </div>} messages={['Your submission is missing some important documents.']}/>);
-};
-export const InfoBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (<>
-      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}
-      {showBanner && (<Banner id='info' variant='info' onDismiss={() => setShowBanner(false)} messages={[
-                'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'
-            ]}/>)}
-    </>);
-};
-const demoFields = [
-    {
-        name: 'field-1',
-        label: 'Field 1',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 1'
-    },
-    {
-        name: 'field-2',
-        label: 'Field 2',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 2'
-    },
-    {
-        name: 'field-3',
-        label: 'Field 3',
-        info: 'Hint: type exact label text above',
-        value: '',
-        validator: (value) => value === 'Field 3'
-    }
-];
-const formActions = (<>
-    <Button name='Cancel' variant='secondary'>
-      Cancel
-    </Button>
-    <Button name='Submit' type='submit' variant='primary'>
-      Submit
-    </Button>
-  </>);
-const fieldReducer = (fields, inputEl) => {
-    return fields.map(field => {
-        if (inputEl.name === field.name) {
-            field.value = inputEl.value;
-        }
-        return field;
-    });
-};
-export const ShownInForm = () => {
-    const [fields, setField] = useReducer(fieldReducer, demoFields);
-    const [banner, setBanner] = useState();
-    const onSubmit = useCallback((e) => {
-        e.preventDefault();
-        const errorFields = fields.filter(field => !field.validator(field.value));
-        let heading = 'Wow, great job!';
-        let variant = 'success';
-        let messages = fields.map(f => `${f.name} was typed perfectly`);
-        let bannerAction;
-        if (errorFields.length > 0) {
-            heading = "I'm sorry you're having trouble";
-            variant = 'urgent';
-            messages = errorFields.map(f => `${f.name} was not typed correctly`);
-            bannerAction = (<Link href='https://community.pega.com/support' target='_blank'>
-          Visit Pega support for assistance
-        </Link>);
-        }
-        setBanner(<Banner {...{
-            heading,
-            variant,
-            messages,
-            id: 'formBanner',
-            action: bannerAction,
-            onDismiss() {
-                setBanner(false);
-            }
-        }}/>);
-    }, []);
-    return (<Form banners={banner} actions={formActions} onSubmit={onSubmit} style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}>
-      {fields.map((field) => {
-            return (<Input key={field.name} autoComplete='off' name={field.name} label={field.label} info={field.info} value={field.value} onChange={(e) => setField(e.target)}/>);
-        })}
-    </Form>);
-};
-export const ShownInCaseView = () => {
-    const [hasBanner, setHasBanner] = useState(true);
-    return (<CaseViewDemo banners={hasBanner && (<Banner id='case-view-error' heading='Waring' onDismiss={() => setHasBanner(false)} variant='warning' messages={['Your submission is missing some important documents.']}/>)}/>);
-};
-ShownInCaseView.parameters = {
-    layout: 'fullscreen'
-};
-export const ShownInAppShell = () => {
-    const [hasBanner, setHasBanner] = useState([]);
-    return (<AppShellDemo banners={hasBanner && (<Banner id='app-shell-banner-success' heading='2 items uploaded successfully' onDismiss={() => setHasBanner([])} variant='success' messages={['pega_data.json', 'business-earnings.xlsx']} action={<Link target='_blank' href='https://www.pega.com'>
-                Link Here!
-              </Link>}/>)}/>);
-};
-ShownInAppShell.parameters = {
-    layout: 'fullscreen'
-};
-//# sourceMappingURL=Banner.stories.jsx.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.stories.jsx","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Form, Input, Link } from '@pega/cosmos-react-core';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner\n} as Meta;\n\nexport const SuccessBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='success'\n          variant='success'\n          onDismiss={() => setShowBanner(false)}\n          heading='2 items uploaded successfully'\n          messages={['pega_data.json', 'business-earnings.xlsx']}\n        />\n      )}\n    </>\n  );\n};\n\nexport const ErrorBanner = () => {\n  return (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      action={\n        <div>\n          <Button variant='link'>Try again</Button>\n        </div>\n      }\n      messages={['Your request failed to send!', 'Please review your request and try again']}\n    />\n  );\n};\n\nexport const WarningBanner = () => {\n  return (\n    <Banner\n      id='warning'\n      variant='warning'\n      action={\n        <div>\n          <Button variant='link'>Why this matters</Button>\n        </div>\n      }\n      messages={['Your submission is missing some important documents.']}\n    />\n  );\n};\n\nexport const InfoBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='info'\n          variant='info'\n          onDismiss={() => setShowBanner(false)}\n          messages={[\n            'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\ninterface DemoFormField {\n  name: string;\n  label: string;\n  info: string;\n  value: string;\n  validator: (value: string) => boolean;\n}\n\nconst demoFields = [\n  {\n    name: 'field-1',\n    label: 'Field 1',\n    info: 'Hint: type exact label text above',\n    value: '',\n    validator: (value: string) => value === 'Field 1'\n  },\n  {\n    name: 'field-2',\n    label: 'Field 2',\n    info: 'Hint: type exact label text above',\n    value: '',\n    validator: (value: string) => value === 'Field 2'\n  },\n  {\n    name: 'field-3',\n    label: 'Field 3',\n    info: 'Hint: type exact label text above',\n    value: '',\n    validator: (value: string) => value === 'Field 3'\n  }\n];\n\nconst formActions = (\n  <>\n    <Button name='Cancel' variant='secondary'>\n      Cancel\n    </Button>\n    <Button name='Submit' type='submit' variant='primary'>\n      Submit\n    </Button>\n  </>\n);\n\n// Handles setting of state for all fields\nconst fieldReducer = (fields: DemoFormField[], inputEl: any) => {\n  return fields.map(field => {\n    if (inputEl.name === field.name) {\n      field.value = inputEl.value;\n    }\n    return field;\n  });\n};\n\nexport const ShownInForm = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let heading = 'Wow, great job!';\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n    let bannerAction;\n\n    if (errorFields.length > 0) {\n      heading = \"I'm sorry you're having trouble\";\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      bannerAction = (\n        <Link href='https://community.pega.com/support' target='_blank'>\n          Visit Pega support for assistance\n        </Link>\n      );\n    }\n\n    setBanner(\n      <Banner\n        {...{\n          heading,\n          variant,\n          messages,\n          id: 'formBanner',\n          action: bannerAction,\n          onDismiss() {\n            setBanner(false);\n          }\n        }}\n      />\n    );\n  }, []);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            autoComplete='off'\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <CaseViewDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='case-view-error'\n            heading='Waring'\n            onDismiss={() => setHasBanner(false)}\n            variant='warning'\n            messages={['Your submission is missing some important documents.']}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInCaseView.parameters = {\n  layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell = () => {\n  const [hasBanner, setHasBanner] = useState([]);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner([])}\n            variant='success'\n            messages={['pega_data.json', 'business-earnings.xlsx']}\n            action={\n              <Link target='_blank' href='https://www.pega.com'>\n                Link Here!\n              </Link>\n            }\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/core/Button/Button.stories.jsx

@@ -1,103 +0,0 @@
-import { Button, Icon, registerIcon } from '@pega/cosmos-react-core';
-import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
-import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-registerIcon(plusIcon);
-export default {
-    title: 'Core/Button',
-    component: Button,
-    parameters: {
-        layout: 'centered'
-    }
-};
-export const ButtonVariants = (args) => {
-    return (<Button variant={args.variant} compact={args.compact}>
-      Click me
-    </Button>);
-};
-ButtonVariants.args = {
-    variant: 'primary',
-    compact: false
-};
-ButtonVariants.argTypes = {
-    variant: {
-        options: ['primary', 'secondary', 'simple', 'link', 'text'],
-        control: { type: 'select' }
-    },
-    compact: { control: { type: 'boolean' } }
-};
-export const DisabledButtons = () => {
-    return (<>
-      <Button variant='primary' disabled>
-        Primary disabled
-      </Button>
-      <Button variant='secondary' disabled>
-        Secondary disabled
-      </Button>
-      <Button variant='simple' disabled>
-        Simple disabled
-      </Button>
-      <Button variant='link' disabled>
-        Link disabled
-      </Button>
-      <Button variant='text' disabled>
-        Text disabled
-      </Button>
-    </>);
-};
-export const IconButtons = ({ compact }) => {
-    return (<>
-      <Button variant='primary' label='Icon button primary' icon compact={compact}>
-        <Icon name='plus'/>
-      </Button>
-      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>
-        <Icon name='plus'/>
-      </Button>
-      <Button variant='simple' label='Icon button simple' icon compact={compact}>
-        <Icon name='plus'/>
-      </Button>
-      <Button variant='link' label='Icon button link' icon compact={compact}>
-        <Icon name='plus'/>
-      </Button>
-      <Button variant='text' label='Icon button text' icon compact={compact}>
-        <Icon name='plus'/>
-      </Button>
-    </>);
-};
-IconButtons.args = {
-    compact: false
-};
-IconButtons.argTypes = {
-    compact: { control: { type: 'boolean' } }
-};
-export const LoadingButtons = (args) => {
-    return (<Button variant={args.variant} icon={args.icon} label='Loading' loading>
-      {args.icon ? <Icon name='plus'/> : 'Loading'}
-    </Button>);
-};
-LoadingButtons.args = {
-    variant: 'primary',
-    icon: false
-};
-LoadingButtons.argTypes = {
-    variant: { options: ['primary', 'secondary'], control: { type: 'select' } },
-    icon: { control: { type: 'boolean' } }
-};
-export const ButtonAsLink = () => {
-    return (<Button variant='primary' href='https://www.pega.com' target='_blank'>
-      Go to pega.com
-    </Button>);
-};
-export const BareButtonDemo = (args) => {
-    return (<BareButton disabled={args.disabled} href={args.href || undefined}>
-      Click me
-    </BareButton>);
-};
-BareButtonDemo.args = {
-    disabled: false,
-    href: ''
-};
-BareButtonDemo.argTypes = {
-    disabled: { control: { type: 'boolean' } },
-    href: { control: { type: 'text' } }
-};
-//# sourceMappingURL=Button.stories.jsx.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, ButtonProps, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n"]}