@pega/cosmos-react-demos 5.0.0-dev.4.5 → 5.0.0-dev.4.7

package/lib/core/ListToolbar/ListToolbar.stories.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { ListToolbar, MenuButton, listToolbarHelpers as helpers } from '@pega/cosmos-react-core';
+import { Flex, Link, ListToolbar, MenuButton, listToolbarHelpers as helpers } from '@pega/cosmos-react-core';
 import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
 export default {
     title: 'Core/ListToolbar',
@@ -81,15 +81,22 @@ export const ListToolbarDemo = (args) => {
             }, count: {
                 total: 1146,
                 selected: 4
-            }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), formControlProps: { required: args.required } }) }));
+            }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), formControlProps: { required: args.required }, additionalInfo: args.showAdditionalInfo
+                ? {
+                    heading: 'Additional Info',
+                    content: (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida." }), _jsx("p", { children: "Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus." }), _jsx(Link, { href: '/', target: '_blank', children: "Neque vitae" })] }))
+                }
+                : undefined }) }));
 };
 ListToolbarDemo.args = {
     createNewLabel: undefined,
-    required: false
+    required: false,
+    showAdditionalInfo: false
 };
 ListToolbarDemo.argTypes = {
     createNewLabel: { control: { type: 'text' } },
-    required: { control: { type: 'boolean' } }
+    required: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const SimpleToolbarDemo = () => {
     return (_jsx(ListToolbar, { name: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions, formControlProps: { required: true } }));

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

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ListToolbar, MenuButton, listToolbarHelpers as helpers } from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\ninterface ListToolbarStoryProps {\n  createNewLabel: string;\n  required: FormControlProps['required'];\n}\n\nexport const ListToolbarDemo: StoryFn<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n  const [searchValue, setSearchValue] = useState('');\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n      <ListToolbar\n        name='Contacts'\n        viewSelector={{\n          views,\n          onViewSelect: id => {\n            setViews(cur => {\n              return helpers.selectView(cur, id);\n            });\n          },\n          defaultId: '1',\n          appDefaultId: '2'\n        }}\n        createNew={{\n          onClick: action('Clicked Create New'),\n          label: args.createNewLabel\n        }}\n        search={{\n          onSearchSubmit: action('Search submit'),\n          value: searchValue,\n          onSearchChange: setSearchValue\n        }}\n        count={{\n          total: 1146,\n          selected: 4\n        }}\n        filter={filterProp}\n        sort={sortProp}\n        group={groupProp}\n        actions={actions}\n        additionalActions={<MenuButton text='Edit' />}\n        formControlProps={{ required: args.required }}\n      />\n    </StagedStateDispatchContext.Provider>\n  );\n};\n\nListToolbarDemo.args = {\n  createNewLabel: undefined,\n  required: false\n};\n\nListToolbarDemo.argTypes = {\n  createNewLabel: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: StoryFn = () => {\n  return (\n    <ListToolbar\n      name='Top accounts in California'\n      search={{ onSearchSubmit: action('Search submit') }}\n      count={{ total: 212, totalHasMore: true }}\n      actions={actions}\n      formControlProps={{ required: true }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Flex,\n  Link,\n  ListToolbar,\n  MenuButton,\n  listToolbarHelpers as helpers\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\ninterface ListToolbarStoryProps {\n  createNewLabel: string;\n  required: FormControlProps['required'];\n  showAdditionalInfo?: boolean;\n}\n\nexport const ListToolbarDemo: StoryFn<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n  const [searchValue, setSearchValue] = useState('');\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n      <ListToolbar\n        name='Contacts'\n        viewSelector={{\n          views,\n          onViewSelect: id => {\n            setViews(cur => {\n              return helpers.selectView(cur, id);\n            });\n          },\n          defaultId: '1',\n          appDefaultId: '2'\n        }}\n        createNew={{\n          onClick: action('Clicked Create New'),\n          label: args.createNewLabel\n        }}\n        search={{\n          onSearchSubmit: action('Search submit'),\n          value: searchValue,\n          onSearchChange: setSearchValue\n        }}\n        count={{\n          total: 1146,\n          selected: 4\n        }}\n        filter={filterProp}\n        sort={sortProp}\n        group={groupProp}\n        actions={actions}\n        additionalActions={<MenuButton text='Edit' />}\n        formControlProps={{ required: args.required }}\n        additionalInfo={\n          args.showAdditionalInfo\n            ? {\n                heading: 'Additional Info',\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\n        }\n      />\n    </StagedStateDispatchContext.Provider>\n  );\n};\n\nListToolbarDemo.args = {\n  createNewLabel: undefined,\n  required: false,\n  showAdditionalInfo: false\n};\n\nListToolbarDemo.argTypes = {\n  createNewLabel: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: StoryFn = () => {\n  return (\n    <ListToolbar\n      name='Top accounts in California'\n      search={{ onSearchSubmit: action('Search submit') }}\n      count={{ total: 212, totalHasMore: true }}\n      actions={actions}\n      formControlProps={{ required: true }}\n    />\n  );\n};\n"]}

package/lib/social/Email/Email.stories.d.ts

@@ -58,6 +58,7 @@ interface EmailSummaryListStoryProps {
     onLoadMore?: EmailSummaryListProps['onLoadMore'];
     loading?: EmailSummaryListProps['loading'];
     currentItemId?: EmailSummaryListProps['currentItemId'];
+    searchQuery?: EmailSummaryListProps['searchQuery'];
 }
 export declare const EmailSummaryListDemo: StoryFn<EmailSummaryListStoryProps>;
 interface EmailCaseViewStoryProps extends EmailCaseViewProps {
@@ -74,6 +75,7 @@ interface EmailManagerAppShellProps {
     showCaseViewBanners?: boolean;
     noItemViewInEmailCaseView?: boolean;
     showUtilities: boolean;
+    searchQuery?: string;
 }
 export declare const EmailManagerAppShell: StoryFn<EmailManagerAppShellProps>;
 //# sourceMappingURL=Email.stories.d.ts.map

package/lib/social/Email/Email.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"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"}

package/lib/social/Email/Email.stories.js

@@ -1047,7 +1047,13 @@ export const EmailSummaryListDemo = (args) => {
             }, 1500);
         }
     }, [loading]);
-    return (_jsx(EmailSummaryList, { unreadEmailCount: 99, categories: categories, items: args.items || allEmailItems, onItemClick: args.onItemClick || handleItemClick, onCategoryClick: onCategoryClick, onLoadMore: args.onLoadMore || (hasMore ? loadMore : undefined), loading: args.loading || loading, emptyMessage: 'No emails.', currentItemId: args.currentItemId || currentItemId }));
+    return (_jsx(EmailSummaryList, { unreadEmailCount: 99, categories: categories, searchQuery: args.searchQuery, items: args.items || allEmailItems, onItemClick: args.onItemClick || handleItemClick, onCategoryClick: onCategoryClick, onLoadMore: args.onLoadMore || (hasMore ? loadMore : undefined), loading: args.loading || loading, emptyMessage: 'No emails.', currentItemId: args.currentItemId || currentItemId }));
+};
+EmailSummaryListDemo.args = {
+    searchQuery: ''
+};
+EmailSummaryListDemo.argTypes = {
+    searchQuery: { control: { type: 'text' } }
 };
 export const EmailCaseViewDemo = (args) => {
     const content = _jsx(EmailShellDemo, {});
@@ -1129,7 +1135,7 @@ export const EmailManagerAppShell = (args) => {
                     icon: 'mail',
                     title: 'Inbox'
                 }
-                : undefined, list: _jsx(EmailSummaryListDemo, { onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading, currentItemId: currentItemId }), emailCaseDetails: !args.showEmptyView && (_jsx(EmailCaseView, { banners: args.showCaseViewBanners && (_jsx(Banner, { variant: 'urgent', messages: [
+                : undefined, list: _jsx(EmailSummaryListDemo, { onItemClick: handleEmailItemClick, items: emailList, onLoadMore: hasMore ? onLoadMore : undefined, loading: loading, currentItemId: currentItemId, searchQuery: args.searchQuery }), emailCaseDetails: !args.showEmptyView && (_jsx(EmailCaseView, { banners: args.showCaseViewBanners && (_jsx(Banner, { variant: 'urgent', messages: [
                         'Your email could not be delivered due to poor network connection.'
                     ] })), content: content, utilities: args.showUtilities && utilities, utilitiesSummaryItems: args.showUtilities
                     ? [
@@ -1144,14 +1150,16 @@ EmailManagerAppShell.args = {
     showEmptyView: false,
     showHeader: true,
     showCaseViewBanners: false,
-    showUtilities: true
+    showUtilities: true,
+    searchQuery: ''
 };
 EmailManagerAppShell.argTypes = {
     enableContextMenu: { control: { type: 'boolean' } },
     showEmptyView: { control: { type: 'boolean' } },
     showHeader: { control: { type: 'boolean' } },
     showCaseViewBanners: { control: { type: 'boolean' } },
-    showUtilities: { control: { type: 'boolean' } }
+    showUtilities: { control: { type: 'boolean' } },
+    searchQuery: { control: { type: 'text' } }
 };
 EmailManagerAppShell.parameters = {
     layout: 'fullscreen'