npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.3.1 → 4.0.0-dev.4.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.3.1 → 4.0.0-dev.4.0

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

Files changed (53) hide show

package/jsx/build/AppShell/AppShell.stories.d.ts CHANGED Viewed

@@ -1,17 +1,18 @@
 import { Meta, Story } from '@storybook/react';
-import { Action } from '@pega/cosmos-react-core';
-import { BranchButtonProps } from '@pega/cosmos-react-build';
+import { OmitStrict, Action } from '@pega/cosmos-react-core';
+import { AppShellProps, BranchButtonProps } from '@pega/cosmos-react-build';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export interface AppShellStoryProps extends BranchButtonProps {
-    hideNavigation: boolean;
-    showBreadcrumbs: boolean;
-    showPreview: boolean;
-    onPreviewClick: Action['onClick'];
-    showLinks: boolean;
-    showBranch: boolean;
-    showAppNameAndVersion: boolean;
+export interface AppShellStoryProps extends OmitStrict<BranchButtonProps, 'items'> {
     appName: string;
+    showPreview?: boolean;
+    showLinks?: boolean;
+    showBranch?: boolean;
+    showAppNameAndVersion?: boolean;
+    onPreviewClick?: Action['onClick'];
+    hideNavigation?: boolean;
+    showBreadcrumbs?: boolean;
+    main?: AppShellProps['main'];
 }
 export declare const AppShellDemo: Story<AppShellStoryProps>;
 //# sourceMappingURL=AppShell.stories.d.ts.map

package/jsx/build/AppShell/AppShell.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAAE~~,MAAM,~~EAAwC~~,MAAM,yBAAyB,CAAC;~~AACvF~~,OAAO,~~EAA4B~~,iBAAiB,~~EAAE~~,MAAM,0BAA0B,CAAC;;~~AAYvF~~,wBAMU;AAEV,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;~~IAC3D~~,~~cAAc~~,EAAE,OAAO,CAAC;~~IACxB~~,~~eAAe~~,EAAE,OAAO,CAAC;~~IACzB~~,~~WAAW~~,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;~~IAClC~~,~~SAAS~~,EAAE,OAAO,CAAC;~~IACnB~~,~~UAAU~~,EAAE,OAAO,CAAC;~~IACpB~~,~~qBAAqB~~,EAAE,~~OAAO~~,CAAC~~;IAC/B~~,~~OAAO,EAAE,~~MAAM,CAAC;~~CACjB~~;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,~~CAgNlD~~,CAAC"}
1	+ {"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAIL,UAAU,EACV,MAAM,EAKP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,aAAa,EACb,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;;AAYlC,wBAMU;AAEV,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAChF,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAyOlD,CAAC"}

package/jsx/build/AppShell/AppShell.stories.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { treeHelpers, Icon } from '@pega/cosmos-react-core';
+import { treeHelpers, Icon, useModalManager, Input, Button, Modal } from '@pega/cosmos-react-core';
 import { AppShell } from '@pega/cosmos-react-build';
 import { appExplorerMenuList, branchesMenuList, contents, recordMenuList, treeList, TabbedPageComp } from './AppShell.mocks';
 export default {
@@ -16,6 +16,22 @@ export const AppShellDemo = (args) => {
     const [currentDrawer, setCurrentDrawer] = useState('explorer');
     const [currentUtil, setCurrentUtil] = useState('explorer');
     const [pageContent, setPageContent] = useState(contents[19]);
+    const [searchText, setSearchText] = useState('');
+    const { create } = useModalManager();
+    const openAddBranchModal = () => {
+        const { dismiss, update } = create(Modal, {
+            children: <Input label='Branch'/>,
+            heading: 'Add branch'
+        });
+        update({
+            actions: [
+                <Button onClick={dismiss}>Cancel</Button>,
+                <Button onClick={dismiss} variant='primary'>
+          Finish
+        </Button>
+            ]
+        });
+    };
     const onNodeClick = (nodeId, activeDrawerId) => {
         const clickedNode = treeHelpers.getNode(allNodes, nodeId);
         if (!clickedNode?.nodes) {
@@ -47,7 +63,7 @@ export const AppShellDemo = (args) => {
             href: 'www.pega.com'
         }
     ]);
-    const appHeader = {
+    const appHeaderProps = {
         brand: {
             label: 'Launchpad',
             logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
@@ -58,12 +74,12 @@ export const AppShellDemo = (args) => {
             }
         },
         contexts,
-        onContextClick: id => {
-            setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));
-        },
+        onContextClick: (id) => setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id }))),
         utils: {
             search: {
-                placeholder: 'Search'
+                value: searchText,
+                placeholder: 'Search',
+                onSearchChange: setSearchText
             },
             appInfo: args.showAppNameAndVersion
                 ? {
@@ -102,7 +118,10 @@ export const AppShellDemo = (args) => {
                         {
                             primary: 'Add branch',
                             id: 'addBranch',
-                            onClick: action('Clicked addBranch')
+                            onClick: () => {
+                                action('Clicked addBranch')();
+                                openAddBranchModal();
+                            }
                         },
                         {
                             primary: 'View all branches',
@@ -126,18 +145,18 @@ export const AppShellDemo = (args) => {
                 {
                     id: '1',
                     name: 'Applications',
-                    onClick: () => action('Clicked Applications')()
+                    onClick: action('Clicked Applications')
                 },
                 {
                     id: '2',
                     name: 'Shared resources',
-                    onClick: () => action('Clicked Shared resources')()
+                    onClick: action('Clicked Shared resources')
                 }
             ]
             : []
     };
     return (<>
-      <AppShell main={<TabbedPageComp {...{ ...args, pageContent }}/>} appHeader={appHeader} hideNav={args.hideNavigation} appInfo={{
+      <AppShell main={args.main || (<TabbedPageComp pageContent={pageContent} showBreadcrumbs={!!args.showBreadcrumbs}/>)} appHeader={appHeaderProps} hideNav={args.hideNavigation} appInfo={{
             text: 'U+ Desk',
             visual: {
                 icon: 'phone-in-solid',
@@ -202,7 +221,7 @@ AppShellDemo.args = {
     hideNavigation: false,
     showBreadcrumbs: true,
     variant: undefined,
-    text: 'Alpha branch',
+    text: 'Launchpad (Main)',
     count: null,
     compact: false,
     showPreview: true,

package/jsx/build/AppShell/AppShell.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Action, StandardTreeProps, treeHelpers, Icon } from '@pega/cosmos-react-core';\nimport { AppShell, AppHeaderProps, BranchButtonProps } from '@pega/cosmos-react-build';\n\nimport {\n appExplorerMenuList,\n branchesMenuList,\n contents,\n PageContentProps,\n recordMenuList,\n treeList,\n TabbedPageComp\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 extends BranchButtonProps {\n hideNavigation: boolean;\n showBreadcrumbs: boolean;\n showPreview: boolean;\n onPreviewClick: Action['onClick'];\n showLinks: boolean;\n showBranch: boolean;\n showAppNameAndVersion: boolean;\n appName: string;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n );\n const [currentDrawer, setCurrentDrawer] = useState('explorer');\n const [currentUtil, setCurrentUtil] = useState('explorer');\n const [pageContent, setPageContent] = useState<PageContentProps>(contents[19]);\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 [contexts, setContexts] = useState<AppHeaderProps['contexts']>([\n {\n id: '1',\n primary: 'Studio',\n selected: true,\n visual: <Icon name='app' />,\n href: 'www.pega.com'\n },\n {\n id: '2',\n primary: 'Administration',\n selected: false,\n visual: <Icon name='cloud' />,\n href: 'www.pega.com'\n }\n ]);\n\n const appHeader: AppHeaderProps = {\n brand: {\n label: 'Launchpad',\n logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n href: '/',\n onClick: e => {\n e.preventDefault();\n action('Navigated to root');\n }\n },\n contexts,\n onContextClick: id => {\n setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })));\n },\n utils: {\n search: {\n placeholder: 'Search'\n },\n appInfo: args.showAppNameAndVersion\n ? {\n name: args.appName,\n version: '1.0.0'\n }\n : undefined,\n avatar: { name: 'Alan' },\n branch: args.showBranch\n ? {\n text: args.text,\n variant: args.variant,\n count: args.count,\n compact: args.compact,\n items: [\n {\n primary: 'Commit to branch',\n id: 'commitToBranch',\n onClick: action('Clicked commitToBranch')\n },\n {\n primary: 'Merge branch',\n id: 'mergeBranch',\n onClick: action('Clicked mergeBranch')\n },\n {\n primary: 'View branch',\n id: 'viewBranch',\n onClick: action('Clicked viewBranch')\n },\n {\n primary: 'Switch branch',\n id: 'switchBranch',\n onClick: action('Clicked switchBranch')\n },\n {\n primary: 'Add branch',\n id: 'addBranch',\n onClick: action('Clicked addBranch')\n },\n {\n primary: 'View all branches',\n id: 'viewAllBranches',\n onClick: action('Clicked viewAllBranches')\n }\n ]\n }\n : undefined,\n action: args.showPreview\n ? {\n id: 'preview',\n text: 'Preview',\n onClick: args.onPreviewClick,\n icon: 'play-solid'\n }\n : undefined\n },\n links: args.showLinks\n ? [\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 : []\n };\n\n return (\n <>\n <AppShell\n main={<TabbedPageComp {...{ ...args, pageContent }} />}\n appHeader={appHeader}\n hideNav={args.hideNavigation}\n appInfo={{\n text: 'U+ Desk',\n visual: {\n icon: 'phone-in-solid',\n backgroundColor: '#0ac7c8',\n color: '#fff'\n },\n meta: ['1.0.0']\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 variant: undefined,\n text: 'Alpha branch',\n count: null,\n compact: false,\n showPreview: true,\n // eslint-disable-next-line demo-patterns/literal-args\n onPreviewClick: action('Clicked preview button'),\n showLinks: false,\n showAppNameAndVersion: true,\n showBranch: true,\n appName: 'Compass App'\n};\n\nAppShellDemo.argTypes = {\n hideNavigation: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n text: { control: { type: 'text' } },\n count: { control: { type: 'number' } },\n compact: { control: { type: 'boolean' } },\n onPreviewClick: { table: { disable: true } },\n showLinks: { control: { type: 'boolean' } },\n showAppNameAndVersion: { control: { type: 'boolean' } },\n showBranch: { control: { type: 'boolean' } },\n showPreview: { control: { type: 'boolean' } },\n appName: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n StandardTreeProps,\n treeHelpers,\n Icon,\n OmitStrict,\n Action,\n useModalManager,\n Input,\n Button,\n Modal\n} from '@pega/cosmos-react-core';\nimport {\n AppShell,\n AppHeaderProps,\n AppShellProps,\n BranchButtonProps\n} from '@pega/cosmos-react-build';\n\nimport {\n appExplorerMenuList,\n branchesMenuList,\n contents,\n PageContentProps,\n recordMenuList,\n treeList,\n TabbedPageComp\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 extends OmitStrict<BranchButtonProps, 'items'> {\n appName: string;\n showPreview?: boolean;\n showLinks?: boolean;\n showBranch?: boolean;\n showAppNameAndVersion?: boolean;\n onPreviewClick?: Action['onClick'];\n hideNavigation?: boolean;\n showBreadcrumbs?: boolean;\n main?: AppShellProps['main'];\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n );\n const [currentDrawer, setCurrentDrawer] = useState('explorer');\n const [currentUtil, setCurrentUtil] = useState('explorer');\n const [pageContent, setPageContent] = useState<PageContentProps>(contents[19]);\n const [searchText, setSearchText] = useState('');\n const { create } = useModalManager();\n\n const openAddBranchModal = () => {\n const { dismiss, update } = create(Modal, {\n children: <Input label='Branch' />,\n heading: 'Add branch'\n });\n update({\n actions: [\n <Button onClick={dismiss}>Cancel</Button>,\n <Button onClick={dismiss} variant='primary'>\n Finish\n </Button>\n ]\n });\n };\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 [contexts, setContexts] = useState<AppHeaderProps['contexts']>([\n {\n id: '1',\n primary: 'Studio',\n selected: true,\n visual: <Icon name='app' />,\n href: 'www.pega.com'\n },\n {\n id: '2',\n primary: 'Administration',\n selected: false,\n visual: <Icon name='cloud' />,\n href: 'www.pega.com'\n }\n ]);\n\n const appHeaderProps: AppHeaderProps = {\n brand: {\n label: 'Launchpad',\n logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n href: '/',\n onClick: e => {\n e.preventDefault();\n action('Navigated to root');\n }\n },\n contexts,\n onContextClick: (id: string) =>\n setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id }))),\n utils: {\n search: {\n value: searchText,\n placeholder: 'Search',\n onSearchChange: setSearchText\n },\n appInfo: args.showAppNameAndVersion\n ? {\n name: args.appName,\n version: '1.0.0'\n }\n : undefined,\n avatar: { name: 'Alan' },\n branch: args.showBranch\n ? {\n text: args.text,\n variant: args.variant,\n count: args.count,\n compact: args.compact,\n items: [\n {\n primary: 'Commit to branch',\n id: 'commitToBranch',\n onClick: action('Clicked commitToBranch')\n },\n {\n primary: 'Merge branch',\n id: 'mergeBranch',\n onClick: action('Clicked mergeBranch')\n },\n {\n primary: 'View branch',\n id: 'viewBranch',\n onClick: action('Clicked viewBranch')\n },\n {\n primary: 'Switch branch',\n id: 'switchBranch',\n onClick: action('Clicked switchBranch')\n },\n {\n primary: 'Add branch',\n id: 'addBranch',\n onClick: () => {\n action('Clicked addBranch')();\n openAddBranchModal();\n }\n },\n {\n primary: 'View all branches',\n id: 'viewAllBranches',\n onClick: action('Clicked viewAllBranches')\n }\n ]\n }\n : undefined,\n action: args.showPreview\n ? {\n id: 'preview',\n text: 'Preview',\n onClick: args.onPreviewClick,\n icon: 'play-solid'\n }\n : undefined\n },\n links: args.showLinks\n ? [\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 : []\n };\n\n return (\n <>\n <AppShell\n main={\n args.main \|\| (\n <TabbedPageComp pageContent={pageContent} showBreadcrumbs={!!args.showBreadcrumbs} />\n )\n }\n appHeader={appHeaderProps}\n hideNav={args.hideNavigation}\n appInfo={{\n text: 'U+ Desk',\n visual: {\n icon: 'phone-in-solid',\n backgroundColor: '#0ac7c8',\n color: '#fff'\n },\n meta: ['1.0.0']\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 variant: undefined,\n text: 'Launchpad (Main)',\n count: null,\n compact: false,\n showPreview: true,\n // eslint-disable-next-line demo-patterns/literal-args\n onPreviewClick: action('Clicked preview button'),\n showLinks: false,\n showAppNameAndVersion: true,\n showBranch: true,\n appName: 'Compass App'\n};\n\nAppShellDemo.argTypes = {\n hideNavigation: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n variant: { options: ['success', 'urgent'], control: { type: 'radio' } },\n text: { control: { type: 'text' } },\n count: { control: { type: 'number' } },\n compact: { control: { type: 'boolean' } },\n onPreviewClick: { table: { disable: true } },\n showLinks: { control: { type: 'boolean' } },\n showAppNameAndVersion: { control: { type: 'boolean' } },\n showBranch: { control: { type: 'boolean' } },\n showPreview: { control: { type: 'boolean' } },\n appName: { control: { type: 'text' } }\n};\n"]}

package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import { AppHeaderProps } from '@pega/cosmos-react-build';
-export declare const appHeader: AppHeaderProps;
 export declare const getOverviewCardData: () => {
     id: string;
     title: string;

package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryPage.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":";~~AAAA~~,~~OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,~~eAAO,MAAM,~~SAAS,EAAE,cAgDvB,CAAC;AAEF,eAAO,MAAM,~~mBAAmB;;;;;;;;;;;;;;;;;;GAyB/B,CAAC"}
1	+ {"version":3,"file":"GalleryPage.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;GAyB/B,CAAC"}

package/jsx/build/PageTemplates/GalleryPage.mocks.jsx CHANGED Viewed

@@ -1,53 +1,4 @@
-import { createUID, range, Status, Icon } from '@pega/cosmos-react-core';
-export const appHeader = {
-    brand: {
-        label: 'Launchpad',
-        logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
-        href: '/',
-        onClick: e => {
-            e.preventDefault();
-        }
-    },
-    contexts: [
-        {
-            id: '1',
-            primary: 'Studio',
-            selected: true,
-            visual: <Icon name='app'/>,
-            href: 'www.pega.com'
-        }
-    ],
-    utils: {
-        avatar: { name: 'Alan' }
-    },
-    links: [
-        {
-            id: '1',
-            name: 'Applications',
-            onClick: () => { }
-        },
-        {
-            id: '2',
-            name: 'Shared resources',
-            onClick: () => { }
-        },
-        {
-            id: '3',
-            name: 'Teams',
-            onClick: () => { }
-        },
-        {
-            id: '4',
-            name: 'AI & Analytics',
-            onClick: () => { }
-        },
-        {
-            id: '5',
-            name: 'Deploy',
-            onClick: () => { }
-        }
-    ]
-};
+import { createUID, range, Status } from '@pega/cosmos-react-core';
 export const getOverviewCardData = () => {
     return range(1, 14).map(num => ({
         id: createUID(),

package/jsx/build/PageTemplates/GalleryPage.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryPage.mocks.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,~~IAAI,EAAE,~~MAAM,yBAAyB,CAAC;~~AAEzE~~,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC,KAAK,EAAE;QACL,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,uEAAuE;QAC7E,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,CAAC,CAAC,EAAE;YACX,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;KACF;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,QAAQ;YACjB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAG;YAC3B,IAAI,EAAE,cAAc;SACrB;KACF;IACD,KAAK,EAAE;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACzB;IACD,KAAK,EAAE;QACL;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,EAAE,SAAS,EAAE;QACf,KAAK,EACH,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,eAAe,GAAG,EAAE;YACtB,CAAC,CAAC,eAAe,GAAG,sCAAsC;QAC9D,WAAW,EACT,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,uCAAuC,GAAG,EAAE;YAC9C,CAAC,CAAC,4CAA4C,GAAG,iEAAiE;QACtH,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjE,MAAM,EACJ,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC;gBACE,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,SAAS;aAC3B;YACH,CAAC,CAAC;gBACE,QAAQ,EACN,+EAA+E;gBACjF,IAAI,EAAE,4BAA4B;aACnC;KACR,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ~~AppHeaderProps } from '@pega/cosmos-react-build';\nimport {~~ createUID, range, Status, ~~Icon~~ } from '@pega/cosmos-react-core';\n\nexport const appHeader: AppHeaderProps = {\n brand: {\n label: 'Launchpad',\n logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n href: '/',\n onClick: e => {\n e.preventDefault();\n }\n },\n contexts: [\n {\n id: '1',\n primary: 'Studio',\n selected: true,\n visual: <Icon name='app' />,\n href: 'www.pega.com'\n }\n ],\n utils: {\n avatar: { name: 'Alan' }\n },\n links: [\n {\n id: '1',\n name: 'Applications',\n onClick: () => {}\n },\n {\n id: '2',\n name: 'Shared resources',\n onClick: () => {}\n },\n {\n id: '3',\n name: 'Teams',\n onClick: () => {}\n },\n {\n id: '4',\n name: 'AI & Analytics',\n onClick: () => {}\n },\n {\n id: '5',\n name: 'Deploy',\n onClick: () => {}\n }\n ]\n};\n\nexport const getOverviewCardData = () => {\n return range(1, 14).map(num => ({\n id: createUID(),\n title:\n num % 2 !== 0\n ? `Application ${num}`\n : `Application ${num} with long name to simulate ellipsis`,\n description:\n num % 2 !== 0\n ? `Description for application with id ${num}`\n : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,\n meta: [<Status variant='success'>in production</Status>, '1.0.0'],\n visual:\n num % 2 !== 0\n ? {\n icon: 'phone-in-solid',\n color: '#ffffff',\n backgroundColor: '#0ac7c8'\n }\n : {\n imageSrc:\n 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png',\n name: 'Image for the card summary'\n }\n }));\n};\n"]}
1	+ {"version":3,"file":"GalleryPage.mocks.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,EAAE,SAAS,EAAE;QACf,KAAK,EACH,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,eAAe,GAAG,EAAE;YACtB,CAAC,CAAC,eAAe,GAAG,sCAAsC;QAC9D,WAAW,EACT,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC,uCAAuC,GAAG,EAAE;YAC9C,CAAC,CAAC,4CAA4C,GAAG,iEAAiE;QACtH,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QACjE,MAAM,EACJ,GAAG,GAAG,CAAC,KAAK,CAAC;YACX,CAAC,CAAC;gBACE,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,SAAS;aAC3B;YACH,CAAC,CAAC;gBACE,QAAQ,EACN,+EAA+E;gBACjF,IAAI,EAAE,4BAA4B;aACnC;KACR,CAAC,CAAC,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { createUID, range, Status } from '@pega/cosmos-react-core';\n\nexport const getOverviewCardData = () => {\n return range(1, 14).map(num => ({\n id: createUID(),\n title:\n num % 2 !== 0\n ? `Application ${num}`\n : `Application ${num} with long name to simulate ellipsis`,\n description:\n num % 2 !== 0\n ? `Description for application with id ${num}`\n : `Long Description for application with id ${num} to simulate ellipsis in the application description in stories`,\n meta: [<Status variant='success'>in production</Status>, '1.0.0'],\n visual:\n num % 2 !== 0\n ? {\n icon: 'phone-in-solid',\n color: '#ffffff',\n backgroundColor: '#0ac7c8'\n }\n : {\n imageSrc:\n 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png',\n name: 'Image for the card summary'\n }\n }));\n};\n"]}

package/jsx/build/PageTemplates/GalleryPage.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryPage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;~~AAO~~/C,wBAMU;AAEV,UAAU,eAAe;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,~~CA+C1D~~,CAAC"}
1	+ {"version":3,"file":"GalleryPage.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAS/C,wBAMU;AAEV,UAAU,eAAe;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAuC1D,CAAC"}

package/jsx/build/PageTemplates/GalleryPage.stories.jsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
-import { AppShell, GalleryPage } from '@pega/cosmos-react-build';
-import { appHeader, getOverviewCardData } from './GalleryPage.mocks';
+import { GalleryPage } from '@pega/cosmos-react-build';
+import { AppShellDemo } from '../AppShell/AppShell.stories';
+import { getOverviewCardData } from './GalleryPage.mocks';
 export default {
     title: 'Build/GalleryPage',
     component: GalleryPage,
@@ -19,17 +20,7 @@ export const AppShellWithGalleryPage = (args) => {
             text: 'New application',
             onClick: action('Clicked New application button')
         }} onItemClick={action('Clicked interactive card')}/>);
-    return (<AppShell navigation={{
-            nodes: [],
-            currentNodeId: '1',
-            onNodeClick: () => { }
-        }} appInfo={{
-            text: 'U+ Desk',
-            visual: {
-                icon: 'phone-in-solid',
-                backgroundColor: '#0ac7c8'
-            }
-        }} appHeader={appHeader} main={<GalleryPageDemo {...args}/>} hideNav/>);
+    return (<AppShellDemo main={<GalleryPageDemo {...args}/>} hideNavigation appName='Compass App' text='Launchpad (Main)' showAppNameAndVersion showPreview showBranch/>);
 };
 AppShellWithGalleryPage.args = {
     bannerHeading: 'Applications',

package/jsx/build/PageTemplates/GalleryPage.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GalleryPage.stories.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,~~QAAQ,EAAE,~~WAAW,EAAE,MAAM,0BAA0B,CAAC;~~AAEjE~~,OAAO,EAAE,~~SAAS~~,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;~~AAErE~~,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACvF,MAAM,eAAe,GAAG,CAAC,EACvB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACL,EAAE,EAAE,CAAC,CACrB,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,aAAa,CAAC,CACvB,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAC/B,KAAK,CAAC,CAAC;YACL,GAAG,EAAE,kGAAkG;YACvG,GAAG,EAAE,sBAAsB;SAC5B,CAAC,CACF,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC,CACnD,UAAU,CAAC,CAAC;YACV,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,qBAAqB;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;YACN,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;SAClD,CAAC,CACF,WAAW,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAChD,CACH,CAAC;IAEF,OAAO,CACL,CAAC,~~QAAQ~~,~~CACP~~,~~UAAU~~,CAAC,CAAC~~;YACV~~,~~KAAK,EAAE,EAAE;YACT,aAAa,EAAE,GAAG;YAClB,WAAW,EAAE,GAAG,EAAE,GAAE,~~CAAC~~;SACtB~~,~~CAAC~~,~~CACF,OAAO,~~CAAC,~~CAAC;YACP,~~IAAI,~~EAAE,SAAS;YACf,MAAM,EAAE;gBACN,~~IAAI,~~EAAE~~,~~gBAAgB;gBACtB~~,~~eAAe~~,~~EAAE~~,~~SAAS;aAC3B;SACF~~,~~CAAC~~,~~CACF~~,~~SAAS,~~CAAC,~~CAAC~~,~~SAAS,CAAC,~~CACrB,IAAI,CAAC,~~CAAC~~,~~CAAC~~,~~eAAe~~,~~CAAC~~,~~IAAI~~,~~IAAI~~,~~CAAC~~,~~EAAG~~,~~CAAC,CACpC,OAAO,EACP,~~CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,aAAa,EAAE,cAAc;IAC7B,iBAAiB,EAAE,iCAAiC;IACpD,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ~~AppShell,~~ GalleryPage } from '@pega/cosmos-react-build';\n\nimport { ~~appHeader,~~ getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n title: 'Build/GalleryPage',\n component: GalleryPage,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GalleryPageArgs {\n bannerHeading: string;\n bannerDescription: string;\n showEmptyState: boolean;\n emptyStateHeading: string;\n emptyStateDescription: string;\n}\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n const GalleryPageDemo = ({\n bannerHeading,\n bannerDescription,\n showEmptyState,\n emptyStateHeading,\n emptyStateDescription\n }: GalleryPageArgs) => (\n <GalleryPage\n heading={bannerHeading}\n description={bannerDescription}\n image={{\n src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n alt: 'Image for the banner'\n }}\n items={showEmptyState ? [] : getOverviewCardData()}\n emptyState={{\n heading: emptyStateHeading,\n description: emptyStateDescription\n }}\n action={{\n text: 'New application',\n onClick: action('Clicked New application button')\n }}\n onItemClick={action('Clicked interactive card')}\n />\n );\n\n return (\n <~~AppShell~~\n ~~navigation~~={~~{\n nodes:~~ ~~[],\n currentNodeId: '1',\n onNodeClick: () =>~~ {}\n }}\n ~~appInfo~~=~~{{\n text:~~ 'U+ ~~Desk~~'~~,\n visual: {~~\n ~~icon:~~ '~~phone-in-solid',\n backgroundColor:~~ '~~#0ac7c8'~~\n ~~}\n~~ }}\n ~~appHeader={appHeader}~~\n ~~main={<GalleryPageDemo {...args} />}~~\n ~~hideNav\n~~ />\n );\n};\n\nAppShellWithGalleryPage.args = {\n bannerHeading: 'Applications',\n bannerDescription: 'Edit or create new applications',\n showEmptyState: false,\n emptyStateHeading: 'Create your first application',\n emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n bannerHeading: { control: { type: 'text' } },\n bannerDescription: { control: { type: 'text' } },\n showEmptyState: { control: { type: 'boolean' } },\n emptyStateHeading: { control: { type: 'text' } },\n emptyStateDescription: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"GalleryPage.stories.jsx","sourceRoot":"","sources":["../../../src/build/PageTemplates/GalleryPage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAUV,MAAM,CAAC,MAAM,uBAAuB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACvF,MAAM,eAAe,GAAG,CAAC,EACvB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACL,EAAE,EAAE,CAAC,CACrB,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,aAAa,CAAC,CACvB,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAC/B,KAAK,CAAC,CAAC;YACL,GAAG,EAAE,kGAAkG;YACvG,GAAG,EAAE,sBAAsB;SAC5B,CAAC,CACF,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC,CACnD,UAAU,CAAC,CAAC;YACV,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,qBAAqB;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;YACN,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM,CAAC,gCAAgC,CAAC;SAClD,CAAC,CACF,WAAW,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAChD,CACH,CAAC;IAEF,OAAO,CACL,CAAC,YAAY,CACX,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,EAAG,CAAC,CACpC,cAAc,CACd,OAAO,CAAC,aAAa,CACrB,IAAI,CAAC,kBAAkB,CACvB,qBAAqB,CACrB,WAAW,CACX,UAAU,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,aAAa,EAAE,cAAc;IAC7B,iBAAiB,EAAE,iCAAiC;IACpD,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,+BAA+B;IAClD,qBAAqB,EAAE,qEAAqE;CAC7F,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAChD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { GalleryPage } from '@pega/cosmos-react-build';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { getOverviewCardData } from './GalleryPage.mocks';\n\nexport default {\n title: 'Build/GalleryPage',\n component: GalleryPage,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface GalleryPageArgs {\n bannerHeading: string;\n bannerDescription: string;\n showEmptyState: boolean;\n emptyStateHeading: string;\n emptyStateDescription: string;\n}\n\nexport const AppShellWithGalleryPage: Story<GalleryPageArgs> = (args: GalleryPageArgs) => {\n const GalleryPageDemo = ({\n bannerHeading,\n bannerDescription,\n showEmptyState,\n emptyStateHeading,\n emptyStateDescription\n }: GalleryPageArgs) => (\n <GalleryPage\n heading={bannerHeading}\n description={bannerDescription}\n image={{\n src: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png',\n alt: 'Image for the banner'\n }}\n items={showEmptyState ? [] : getOverviewCardData()}\n emptyState={{\n heading: emptyStateHeading,\n description: emptyStateDescription\n }}\n action={{\n text: 'New application',\n onClick: action('Clicked New application button')\n }}\n onItemClick={action('Clicked interactive card')}\n />\n );\n\n return (\n <AppShellDemo\n main={<GalleryPageDemo {...args} />}\n hideNavigation\n appName='Compass App'\n text='Launchpad (Main)'\n showAppNameAndVersion\n showPreview\n showBranch\n />\n );\n};\n\nAppShellWithGalleryPage.args = {\n bannerHeading: 'Applications',\n bannerDescription: 'Edit or create new applications',\n showEmptyState: false,\n emptyStateHeading: 'Create your first application',\n emptyStateDescription: \"You're on your way to creating your first professional application.\"\n};\n\nAppShellWithGalleryPage.argTypes = {\n bannerHeading: { control: { type: 'text' } },\n bannerDescription: { control: { type: 'text' } },\n showEmptyState: { control: { type: 'boolean' } },\n emptyStateHeading: { control: { type: 'text' } },\n emptyStateDescription: { control: { type: 'text' } }\n};\n"]}

package/jsx/build/PageTemplates/PageTemplates.mocks.d.ts CHANGED Viewed

@@ -13,6 +13,5 @@ export interface AppShellStory {
 export declare const initFields: () => Field[];
 export declare const OneColumnForm: (props: any) => JSX.Element | null;
 export declare const PreviewMainContent: () => JSX.Element;
-export declare const AppShellWithMenuNavigation: ({ main, hideNavigation }: AppShellStory) => JSX.Element;
 export {};
 //# sourceMappingURL=PageTemplates.mocks.d.ts.map

package/jsx/build/PageTemplates/PageTemplates.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAaL,gBAAgB,~~EASjB~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,~~EAA4B~~,aAAa,EAAE,MAAM,0BAA0B,CAAC;~~AAWnF~~,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,UAAW,GAAG,uBA0IvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAe9B,CAAC~~;AAEF,eAAO,MAAM,0BAA0B,6BAA8B,aAAa,gBAgLjF,CAAC~~"}
1	+ {"version":3,"file":"PageTemplates.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAaL,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzD,UAAU,KAAM,SAAQ,gBAAgB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,UAAU,QAAO,KAAK,EAmClC,CAAC;AA6BF,eAAO,MAAM,aAAa,UAAW,GAAG,uBA0IvC,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAe9B,CAAC"}

package/jsx/build/PageTemplates/PageTemplates.mocks.jsx CHANGED Viewed

@@ -1,11 +1,9 @@
-import { useReducer, useRef, useState } from 'react';
+import { useReducer, useRef } from 'react';
 import styled from 'styled-components';
-import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, Text, useTheme, useToaster, BuildTheme, Configuration, StandardTree, treeHelpers, Icon } from '@pega/cosmos-react-core';
+import { Button, Flex, Form, Input, CheckboxGroup, RadioButtonGroup, RadioButton, Checkbox, Select, Option, TextArea, Text, useTheme, useToaster } from '@pega/cosmos-react-core';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
-import { AppShell } from '@pega/cosmos-react-build';
 import { FileInputDemo } from '../../core/File/FileInput.stories';
 import { dataPages, ObjectSelectComp } from '../ObjectSelect/ObjectSelect.mocks';
-import { treeList, recordMenuList, appExplorerMenuList, branchesMenuList } from '../AppShell/AppShell.mocks';
 export const initFields = () => {
     const common = { value: undefined, status: undefined };
     return [
@@ -143,156 +141,4 @@ export const PreviewMainContent = () => {
       <Text>This is a react region</Text>
     </Flex>);
 };
-export const AppShellWithMenuNavigation = ({ main, hideNavigation }) => {
-    const [currentNodeId, setCurrentNodeId] = useState();
-    const [allNodes, setAllNodes] = useState(treeList);
-    const onNodeClick = (id) => {
-        const clickedNode = treeHelpers.getNode(allNodes, id);
-        if (!clickedNode?.nodes) {
-            setCurrentNodeId(id);
-            return;
-        }
-        setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
-            return {
-                ...node,
-                expanded: !node.expanded
-            };
-        }));
-        return (<StandardTree nodes={recordMenuList} onNodeClick={onNodeClick} currentNodeId={currentNodeId}/>);
-    };
-    const appHeader = {
-        brand: {
-            label: 'Launchpad',
-            logo: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
-            href: '/',
-            onClick: e => {
-                e.preventDefault();
-            }
-        },
-        contexts: [
-            {
-                id: '1',
-                primary: 'Studio',
-                selected: true,
-                visual: <Icon name='app'/>,
-                href: 'www.pega.com'
-            }
-        ],
-        utils: {
-            avatar: { name: 'Alan' },
-            search: {
-                placeholder: 'Search anything, anywhere'
-            },
-            branch: {
-                text: 'Alpha branch',
-                items: [
-                    {
-                        primary: 'Commit to branch',
-                        id: 'commitToBranch',
-                        onClick: () => { }
-                    },
-                    {
-                        primary: 'Merge branch',
-                        id: 'mergeBranch',
-                        onClick: () => { }
-                    },
-                    {
-                        primary: 'View branch',
-                        id: 'viewBranch',
-                        onClick: () => { }
-                    },
-                    {
-                        primary: 'Switch branch',
-                        id: 'switchBranch',
-                        onClick: () => { }
-                    },
-                    {
-                        primary: 'Add branch',
-                        id: 'addBranch',
-                        onClick: () => { }
-                    },
-                    {
-                        primary: 'View all branches',
-                        id: 'viewAllBranches',
-                        onClick: () => { }
-                    }
-                ]
-            },
-            action: {
-                id: 'preview',
-                text: 'Preview',
-                onClick: () => { }
-            }
-        },
-        links: [
-            {
-                id: '1',
-                name: 'Applications',
-                onClick: () => { }
-            },
-            {
-                id: '2',
-                name: 'Shared resources',
-                onClick: () => { }
-            },
-            {
-                id: '3',
-                name: 'Teams',
-                onClick: () => { }
-            },
-            {
-                id: '4',
-                name: 'AI & Analytics',
-                onClick: () => { }
-            },
-            {
-                id: '5',
-                name: 'Deploy',
-                onClick: () => { }
-            }
-        ]
-    };
-    return (<Configuration theme={BuildTheme}>
-      <AppShell main={main} appHeader={appHeader} hideNav={hideNavigation} appInfo={{
-            text: 'xCompass',
-            visual: {
-                icon: 'compass',
-                backgroundColor: '#20AA50'
-            }
-        }} navigation={{
-            nodes: allNodes,
-            currentNodeId,
-            onNodeClick
-        }} utils={{
-            onItemClick: id => {
-                if (id === 'explorer') {
-                    setAllNodes(appExplorerMenuList);
-                }
-                if (id === 'branches') {
-                    setAllNodes(branchesMenuList);
-                }
-                if (id === 'records') {
-                    setAllNodes(recordMenuList);
-                }
-            },
-            items: [
-                {
-                    label: 'App Explorer',
-                    id: 'explorer'
-                },
-                {
-                    label: 'Branches',
-                    id: 'branches'
-                },
-                {
-                    label: 'Records',
-                    id: 'records'
-                }
-            ],
-            drawer: {
-                onBeforeClose: () => setAllNodes(treeList)
-            }
-        }}/>
-    </Configuration>);
-};
 //# sourceMappingURL=PageTemplates.mocks.jsx.map