@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/lib/cs/ArticleList/ArticleList.stories.js

@@ -1,84 +1,261 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { ComboBox, Flex, FormField, Icon, Link, MenuButton, Pagination, SearchInput, Select, Option, Text, menuHelpers, registerIcon } from '@pega/cosmos-react-core';
+import { menuHelpers, registerIcon } from '@pega/cosmos-react-core';
 import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
 import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
-import * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';
-import { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';
-import { ArticleListMockData } from './ArticleList.mocks';
+import * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';
+import { ArticleList, ArticleSummary, ArticleListFilter } from '@pega/cosmos-react-cs';
+import { suggestedMock, followedMock, searchMock } from './ArticleList.mocks';
 export default {
     title: 'Customer Service/ArticleList',
     component: ArticleList,
-    subcomponents: { ArticleSummary, ArticleListHeader },
+    subcomponents: { ArticleSummary, ArticleListFilter },
     parameters: {
         layout: 'fullscreen'
     }
 };
-registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);
-export const ArticleListDemo = () => {
-    const [query, setQuery] = useState('');
-    const [currentPage, setCurrentPage] = useState(1);
-    const [categoryFilter, setCategoryFilter] = useState(undefined);
-    const [categoriesList, setCategoriesList] = useState(ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {
-        return {
-            id,
-            primary: name,
-            secondary: [level, category],
-            selected: false
-        };
-    }));
-    const handleArticleLinkClick = (event) => {
-        event.preventDefault();
+registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);
+export const ArticleListDemo = (args) => {
+    const [searchVal, setSearchVal] = useState('');
+    const [activeTab, setActiveTab] = useState('Suggested');
+    const [loading, setLoading] = useState(false);
+    const [categoryList, setCategoryList] = useState([]);
+    const [sortBy, setSortBy] = useState([]);
+    const [articles, setArticles] = useState([]);
+    const [quickFilters, setQuickFilters] = useState([]);
+    const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);
+    const selectSortByOption = useCallback((id) => {
+        setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const selectedCategory = useMemo(() => {
+        return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));
+    }, [categoryList]);
+    const categoryListToRender = useMemo(() => {
+        return menuHelpers.mapTree(categoryList, item => ({
+            ...item,
+            selected: !!item.selected
+        }));
+    }, [categoryList]);
+    const toggleItem = (id) => {
+        setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
     };
-    const ALHeader = {
-        icon: _jsx(Icon, { name: 'help' }),
-        headerText: 'Knowledge articles',
-        count: 5,
-        primary: {
-            search: (_jsx(SearchInput, { value: query, onSearchChange: setQuery, onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' })),
-            actions: [
-                { text: 'Option Number 1', id: '1a' },
-                { text: 'Option Number 2', id: '2a' }
-            ],
-            followedFilter: (_jsx(Flex, { container: { gap: 1 }, children: _jsx(MenuButton, { variant: 'simple', menu: {
-                        items: [
-                            {
-                                primary: 'Filter 1',
-                                id: 'f1a'
-                            },
-                            {
-                                primary: 'Filter 2',
-                                id: 'f2a'
-                            }
-                        ]
-                    }, icon: 'filter', text: 'filter', iconOnly: true }) }))
+    const handleTabChange = (id) => {
+        setSearchVal('');
+        setActiveTab(id);
+        if (id !== 'Search') {
+            setQuickFilters([]);
+        }
+    };
+    const updateArticles = (mockArticles) => {
+        return mockArticles.map(({ isLiked = false, isFollowed = false, articleId = '', title, href = '/', abstract, meta, quickFilters: quickFilterTags }) => {
+            const actionObj = [{ id: '1', text: 'Edit' }];
+            if (isLiked) {
+                actionObj.push({ id: '3', text: 'Dislike' });
+            }
+            else {
+                actionObj.push({ id: '3', text: 'Like' });
+            }
+            if (isFollowed) {
+                actionObj.push({ id: '4', text: 'Unfollow' });
+            }
+            else {
+                actionObj.push({ id: '4', text: 'Follow' });
+            }
+            return {
+                articleId,
+                href,
+                title,
+                abstract,
+                onTitleClick: (id, e) => {
+                    e?.preventDefault();
+                },
+                primaryActions: actionObj,
+                meta,
+                quickFilters: args.showQuickFilters && quickFilterTags?.length
+                    ? quickFilterTags?.map(({ id, name }) => {
+                        return {
+                            id,
+                            name
+                        };
+                    })
+                    : []
+            };
+        });
+    };
+    const fetchArticleContent = () => {
+        return new Promise(resolve => {
+            let activeTabContent = null;
+            if (!activeTab || activeTab === 'Search')
+                activeTabContent = searchMock;
+            else if (activeTab === 'Suggested')
+                activeTabContent = suggestedMock;
+            else if (activeTab === 'Followed')
+                activeTabContent = followedMock;
+            setTimeout(() => {
+                if (activeTabContent) {
+                    resolve({
+                        articles: updateArticles(activeTabContent.articles),
+                        category: activeTabContent.category || [],
+                        sortBy: activeTabContent.sortBy || []
+                    });
+                }
+            }, 1000);
+        });
+    };
+    useEffect(() => {
+        setLoading(true);
+        fetchArticleContent().then(res => {
+            setArticles(res.articles);
+            setCategoryList(res.category);
+            setSortBy(res.sortBy);
+            setLoading(false);
+        });
+    }, [activeTab, quickFilters, args.showQuickFilters]);
+    const categoryProps = {
+        label: 'Category',
+        placeholder: 'Select category',
+        mode: 'multi-select',
+        selected: {
+            items: selectedCategory,
+            onRemove: toggleItem
         },
-        secondary: (_jsxs(_Fragment, { children: [_jsx(FormField, { label: 'Category', children: _jsx(ComboBox, { selected: { items: categoryFilter }, placeholder: 'Filter by category', menu: {
-                            items: categoriesList,
-                            onItemClick: id => {
-                                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');
-                                const { primary: itemText } = menuHelpers.getSelected(newList)[0];
-                                setCategoriesList(newList);
-                                setCategoryFilter({ text: itemText, id });
-                            }
-                        } }) }), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) })] }))
+        menu: {
+            items: categoryListToRender,
+            onItemClick: toggleItem
+        }
+    };
+    const sortByProps = {
+        label: 'Sort by',
+        placeholder: 'Select Options',
+        selected: selectedSortByOption
+            ? {
+                items: {
+                    id: selectedSortByOption.id,
+                    text: selectedSortByOption.primary
+                }
+            }
+            : undefined,
+        menu: {
+            items: sortBy,
+            onItemClick: selectSortByOption
+        }
+    };
+    const searchOptions = {
+        placeholder: 'Search article',
+        filters: ['Help site 1', 'Help site 2', 'Help site 3'],
+        value: searchVal,
+        onSearchChange: (val) => {
+            setSearchVal(val);
+        },
+        onFilterChange: (val) => {
+            return val;
+        }
+    };
+    const actionOptions = [
+        {
+            id: '1',
+            text: 'Action 1',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        },
+        {
+            id: '2',
+            text: 'Action 2',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        },
+        {
+            id: '3',
+            text: 'Action 3',
+            onClick: (id) => action('onClick')(`action ${id}`)
+        }
+    ];
+    const suggestNewArticleAction = {
+        id: 'Suggest action',
+        text: 'Suggest action',
+        onClick: (id) => action('onClick')(id),
+        icon: 'plus'
+    };
+    let actions;
+    if (args.showAction) {
+        if (args.isSuggestArticleAction) {
+            actions = [suggestNewArticleAction];
+        }
+        else {
+            actions = actionOptions;
+        }
+    }
+    const handleClearClick = () => {
+        setQuickFilters([]);
+        setSearchVal('');
+        setCategoryList(curr => {
+            return curr?.map(categoryListItem => {
+                return {
+                    ...categoryListItem,
+                    selected: false
+                };
+            });
+        });
+        setSortBy(curr => {
+            return curr?.map(sortByListItem => {
+                return {
+                    ...sortByListItem,
+                    selected: false
+                };
+            });
+        });
     };
     return (_jsx("div", { style: {
-            width: '31.25rem',
-            maxHeight: '100vh'
-        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, count: ALHeader.count, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
-                        setCurrentPage(pageNumber);
-                    } }) }), children: ArticleListMockData.articleList.map((dataItem, id) => {
-                return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }), content: _jsx(Text, { children: dataItem.abstract }), articleID: `article-${id}`, meta: [
-                        _jsx(Text, { children: dataItem.meta.category }),
-                        dataItem.meta.publishedDate,
-                        _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }), _jsxs(Text, { children: ["(", dataItem.meta.likes, ")"] })] }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }), _jsxs(Text, { children: ["(", dataItem.meta.disLikes, ")"] })] })] })
-                    ] }, id.toString()));
-            }) }) }));
+            width: '25rem'
+        }, children: _jsx(ArticleList, { header: args.showHeader
+                ? {
+                    title: 'Knowledge articles',
+                    icon: args.showHeaderIcon ? 'book-open' : '',
+                    actions
+                }
+                : undefined, activeTab: activeTab, onTabClick: handleTabChange, skeletonize: false, suggested: {
+                count: args.showCount ? suggestedMock.count : undefined,
+                articles
+            }, followed: {
+                count: args.showCount ? followedMock.count : undefined,
+                articles,
+                searchInput: searchOptions,
+                category: categoryProps,
+                sortBy: sortByProps,
+                onClearClick: handleClearClick,
+                showResults: args.showResults
+            }, search: {
+                count: args.showCount ? searchMock.count : undefined,
+                articles,
+                searchInput: searchOptions,
+                category: categoryProps,
+                sortBy: sortByProps,
+                onClearClick: handleClearClick,
+                quickFilters,
+                handleQuickFilterRemove: (id) => {
+                    setQuickFilters(quickFilters.filter(item => item.id !== id));
+                },
+                showResults: args.showResults
+            }, onQuickFilterClick: (quickFilterParam) => {
+                handleTabChange('Search');
+                setQuickFilters([...quickFilters, quickFilterParam]);
+            }, loading: loading }) }));
+};
+ArticleListDemo.args = {
+    isSuggestArticleAction: true,
+    showAction: true,
+    showHeader: true,
+    showHeaderIcon: true,
+    showQuickFilters: true,
+    showCount: true,
+    showResults: true
+};
+ArticleListDemo.argTypes = {
+    isSuggestArticleAction: { control: { type: 'boolean' } },
+    showAction: { control: { type: 'boolean' } },
+    showHeader: { control: { type: 'boolean' } },
+    showHeaderIcon: { control: { type: 'boolean' } },
+    showQuickFilters: { control: { type: 'boolean' } },
+    showCount: { control: { type: 'boolean' } },
+    showResults: { control: { type: 'boolean' } }
 };
-export const ArticleListWithSkeleton = () => (_jsx("div", { style: {
-        maxWidth: '31.25rem',
-        maxHeight: '100vh'
-    }, children: _jsx(ArticleList, { skeletonize: true }) }));
 //# sourceMappingURL=ArticleList.stories.js.map

package/lib/cs/ArticleList/ArticleList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const ArticleListDemo: Story = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    count: 5,\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onSearchChange={setQuery}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            count={ALHeader.count}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton: Story = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}
+{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAc,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAEL,WAAW,EAGX,YAAY,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,QAAQ,MAAM,kEAAkE,CAAC;AAC7F,OAAO,EACL,WAAW,EACX,cAAc,EACd,iBAAiB,EAIlB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE;IACpD,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,YAAY,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAC;AAiB/D,MAAM,CAAC,MAAM,eAAe,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACzF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAwB,EAAE,CAAC,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,EAAE,CAAC,CAAC;IAEpE,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEzF,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,EAAuB,EAAE,EAAE;QACjE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAClG,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,WAAW,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAChD,GAAG,IAAI;YACP,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;QAC7C,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,IAAI,EAAE,KAAK,QAAQ,EAAE;YACnB,eAAe,CAAC,EAAE,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,YAA4B,EAAE,EAAE;QACtD,OAAO,YAAY,CAAC,GAAG,CACrB,CAAC,EACC,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,EAAE,EACd,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,IAAI,EACJ,YAAY,EAAE,eAAe,EAC9B,EAAE,EAAE;YACH,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YAC9C,IAAI,OAAO,EAAE;gBACX,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;aAC9C;iBAAM;gBACL,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;aAC3C;YACD,IAAI,UAAU,EAAE;gBACd,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;aAC/C;iBAAM;gBACL,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;aAC7C;YACD,OAAO;gBACL,SAAS;gBACT,IAAI;gBACJ,KAAK;gBACL,QAAQ;gBACR,YAAY,EAAE,CAAC,EAAW,EAAE,CAAqD,EAAE,EAAE;oBACnF,CAAC,EAAE,cAAc,EAAE,CAAC;gBACtB,CAAC;gBACD,cAAc,EAAE,SAAS;gBACzB,IAAI;gBACJ,YAAY,EACV,IAAI,CAAC,gBAAgB,IAAI,eAAe,EAAE,MAAM;oBAC9C,CAAC,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;wBACpC,OAAO;4BACL,EAAE;4BACF,IAAI;yBACL,CAAC;oBACJ,CAAC,CAAC;oBACJ,CAAC,CAAC,EAAE;aACT,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAIpB,GAAG,EAAE;QACR,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,IAAI,gBAAgB,GAIT,IAAI,CAAC;YAChB,IAAI,CAAC,SAAS,IAAI,SAAS,KAAK,QAAQ;gBAAE,gBAAgB,GAAG,UAAU,CAAC;iBACnE,IAAI,SAAS,KAAK,WAAW;gBAAE,gBAAgB,GAAG,aAAa,CAAC;iBAChE,IAAI,SAAS,KAAK,UAAU;gBAAE,gBAAgB,GAAG,YAAY,CAAC;YAEnE,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,gBAAgB,EAAE;oBACpB,OAAO,CAAC;wBACN,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,QAAQ,CAAC;wBACnD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,IAAI,EAAE;wBACzC,MAAM,EAAE,gBAAgB,CAAC,MAAM,IAAI,EAAE;qBACtC,CAAC,CAAC;iBACJ;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,mBAAmB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAC/B,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC1B,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9B,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACtB,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAErD,MAAM,aAAa,GAAyB;QAC1C,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,iBAAiB;QAC9B,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE;YACR,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,UAAU;SACrB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,oBAAoB;YAC3B,WAAW,EAAE,UAAU;SACxB;KACF,CAAC;IAEF,MAAM,WAAW,GAAuB;QACtC,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,gBAAgB;QAC7B,QAAQ,EAAE,oBAAoB;YAC5B,CAAC,CAAC;gBACE,KAAK,EAAE;oBACL,EAAE,EAAE,oBAAoB,CAAC,EAAE;oBAC3B,IAAI,EAAE,oBAAoB,CAAC,OAAO;iBACnC;aACF;YACH,CAAC,CAAC,SAAS;QACb,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,kBAAkB;SAChC;KACF,CAAC;IAEF,MAAM,aAAa,GAAqB;QACtC,WAAW,EAAE,gBAAgB;QAC7B,OAAO,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC;QACtD,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,CAAC,GAAW,EAAE,EAAE;YAC9B,YAAY,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;QACD,cAAc,EAAE,CAAC,GAAW,EAAE,EAAE;YAC9B,OAAO,GAAG,CAAC;QACb,CAAC;KACF,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC;SAC3D;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC;SAC3D;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC;SAC3D;KACF,CAAC;IAEF,MAAM,uBAAuB,GAAW;QACtC,EAAE,EAAE,gBAAgB;QACpB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;QAC9C,IAAI,EAAE,MAAM;KACb,CAAC;IAEF,IAAI,OAAO,CAAC;IACZ,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,GAAG,CAAC,uBAAuB,CAAC,CAAC;SACrC;aAAM;YACL,OAAO,GAAG,aAAa,CAAC;SACzB;KACF;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,eAAe,CAAC,IAAI,CAAC,EAAE;YACrB,OAAO,IAAI,EAAE,GAAG,CAAC,gBAAgB,CAAC,EAAE;gBAClC,OAAO;oBACL,GAAG,gBAAgB;oBACnB,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,IAAI,CAAC,EAAE;YACf,OAAO,IAAI,EAAE,GAAG,CAAC,cAAc,CAAC,EAAE;gBAChC,OAAO;oBACL,GAAG,cAAc;oBACjB,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,cACE,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;SACf,YAED,KAAC,WAAW,IACV,MAAM,EACJ,IAAI,CAAC,UAAU;gBACb,CAAC,CAAC;oBACE,KAAK,EAAE,oBAAoB;oBAC3B,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;oBAC5C,OAAO;iBACR;gBACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE;gBACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBACvD,QAAQ;aACT,EACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBACtD,QAAQ;gBACR,WAAW,EAAE,aAAa;gBAC1B,QAAQ,EAAE,aAAa;gBACvB,MAAM,EAAE,WAAW;gBACnB,YAAY,EAAE,gBAAgB;gBAC9B,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,EACD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;gBACpD,QAAQ;gBACR,WAAW,EAAE,aAAa;gBAC1B,QAAQ,EAAE,aAAa;gBACvB,MAAM,EAAE,WAAW;gBACnB,YAAY,EAAE,gBAAgB;gBAC9B,YAAY;gBACZ,uBAAuB,EAAE,CAAC,EAAU,EAAE,EAAE;oBACtC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC/D,CAAC;gBACD,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,EACD,kBAAkB,EAAE,CAAC,gBAA6B,EAAE,EAAE;gBACpD,eAAe,CAAC,QAAQ,CAAC,CAAC;gBAC1B,eAAe,CAAC,CAAC,GAAG,YAAY,EAAE,gBAAgB,CAAC,CAAC,CAAC;YACvD,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,sBAAsB,EAAE,IAAI;IAC5B,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxD,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { useCallback, useEffect, useMemo, useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Action,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  registerIcon,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';\nimport {\n  ArticleList,\n  ArticleSummary,\n  ArticleListFilter,\n  ArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from '@pega/cosmos-react-cs';\n\nimport { suggestedMock, followedMock, searchMock } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListFilter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);\n\ninterface ArticleListDemoProps {\n  isSuggestArticleAction: boolean;\n  showAction: boolean;\n  showHeader: boolean;\n  showHeaderIcon: boolean;\n  showQuickFilters: boolean;\n  showCount: boolean;\n  showResults: boolean;\n}\n\ntype MockArticles = ArticleSummaryProps & {\n  isLiked: boolean;\n  isFollowed: boolean;\n};\n\nexport const ArticleListDemo: Story<ArticleListDemoProps> = (args: ArticleListDemoProps) => {\n  const [searchVal, setSearchVal] = useState('');\n  const [activeTab, setActiveTab] = useState('Suggested');\n  const [loading, setLoading] = useState(false);\n  const [categoryList, setCategoryList] = useState<MenuProps['items']>([]);\n  const [sortBy, setSortBy] = useState<MenuProps['items']>([]);\n  const [articles, setArticles] = useState<ArticleSummaryProps[]>([]);\n  const [quickFilters, setQuickFilters] = useState<QuickFilter[]>([]);\n\n  const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);\n\n  const selectSortByOption = useCallback((id: MenuItemProps['id']) => {\n    setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n  }, []);\n\n  const selectedCategory = useMemo(() => {\n    return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));\n  }, [categoryList]);\n\n  const categoryListToRender = useMemo(() => {\n    return menuHelpers.mapTree(categoryList, item => ({\n      ...item,\n      selected: !!item.selected\n    }));\n  }, [categoryList]);\n\n  const toggleItem = (id: MenuItemProps['id']) => {\n    setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const handleTabChange = (id: string) => {\n    setSearchVal('');\n    setActiveTab(id);\n    if (id !== 'Search') {\n      setQuickFilters([]);\n    }\n  };\n\n  const updateArticles = (mockArticles: MockArticles[]) => {\n    return mockArticles.map(\n      ({\n        isLiked = false,\n        isFollowed = false,\n        articleId = '',\n        title,\n        href = '/',\n        abstract,\n        meta,\n        quickFilters: quickFilterTags\n      }) => {\n        const actionObj = [{ id: '1', text: 'Edit' }];\n        if (isLiked) {\n          actionObj.push({ id: '3', text: 'Dislike' });\n        } else {\n          actionObj.push({ id: '3', text: 'Like' });\n        }\n        if (isFollowed) {\n          actionObj.push({ id: '4', text: 'Unfollow' });\n        } else {\n          actionObj.push({ id: '4', text: 'Follow' });\n        }\n        return {\n          articleId,\n          href,\n          title,\n          abstract,\n          onTitleClick: (id?: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n            e?.preventDefault();\n          },\n          primaryActions: actionObj,\n          meta,\n          quickFilters:\n            args.showQuickFilters && quickFilterTags?.length\n              ? quickFilterTags?.map(({ id, name }) => {\n                  return {\n                    id,\n                    name\n                  };\n                })\n              : []\n        };\n      }\n    );\n  };\n\n  const fetchArticleContent: () => Promise<{\n    articles: ArticleSummaryProps[];\n    category: MenuProps['items'];\n    sortBy: MenuProps['items'];\n  }> = () => {\n    return new Promise(resolve => {\n      let activeTabContent: {\n        articles: MockArticles[];\n        category?: MenuProps['items'];\n        sortBy?: MenuProps['items'];\n      } | null = null;\n      if (!activeTab || activeTab === 'Search') activeTabContent = searchMock;\n      else if (activeTab === 'Suggested') activeTabContent = suggestedMock;\n      else if (activeTab === 'Followed') activeTabContent = followedMock;\n\n      setTimeout(() => {\n        if (activeTabContent) {\n          resolve({\n            articles: updateArticles(activeTabContent.articles),\n            category: activeTabContent.category || [],\n            sortBy: activeTabContent.sortBy || []\n          });\n        }\n      }, 1000);\n    });\n  };\n\n  useEffect(() => {\n    setLoading(true);\n    fetchArticleContent().then(res => {\n      setArticles(res.articles);\n      setCategoryList(res.category);\n      setSortBy(res.sortBy);\n      setLoading(false);\n    });\n  }, [activeTab, quickFilters, args.showQuickFilters]);\n\n  const categoryProps: Articles['category'] = {\n    label: 'Category',\n    placeholder: 'Select category',\n    mode: 'multi-select',\n    selected: {\n      items: selectedCategory,\n      onRemove: toggleItem\n    },\n    menu: {\n      items: categoryListToRender,\n      onItemClick: toggleItem\n    }\n  };\n\n  const sortByProps: Articles['sortBy'] = {\n    label: 'Sort by',\n    placeholder: 'Select Options',\n    selected: selectedSortByOption\n      ? {\n          items: {\n            id: selectedSortByOption.id,\n            text: selectedSortByOption.primary\n          }\n        }\n      : undefined,\n    menu: {\n      items: sortBy,\n      onItemClick: selectSortByOption\n    }\n  };\n\n  const searchOptions: SearchInputProps = {\n    placeholder: 'Search article',\n    filters: ['Help site 1', 'Help site 2', 'Help site 3'],\n    value: searchVal,\n    onSearchChange: (val: string) => {\n      setSearchVal(val);\n    },\n    onFilterChange: (val: string) => {\n      return val;\n    }\n  };\n\n  const actionOptions = [\n    {\n      id: '1',\n      text: 'Action 1',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '2',\n      text: 'Action 2',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    },\n    {\n      id: '3',\n      text: 'Action 3',\n      onClick: (id: string) => action('onClick')(`action ${id}`)\n    }\n  ];\n\n  const suggestNewArticleAction: Action = {\n    id: 'Suggest action',\n    text: 'Suggest action',\n    onClick: (id: string) => action('onClick')(id),\n    icon: 'plus'\n  };\n\n  let actions;\n  if (args.showAction) {\n    if (args.isSuggestArticleAction) {\n      actions = [suggestNewArticleAction];\n    } else {\n      actions = actionOptions;\n    }\n  }\n\n  const handleClearClick = () => {\n    setQuickFilters([]);\n    setSearchVal('');\n    setCategoryList(curr => {\n      return curr?.map(categoryListItem => {\n        return {\n          ...categoryListItem,\n          selected: false\n        };\n      });\n    });\n    setSortBy(curr => {\n      return curr?.map(sortByListItem => {\n        return {\n          ...sortByListItem,\n          selected: false\n        };\n      });\n    });\n  };\n\n  return (\n    <div\n      style={{\n        width: '25rem'\n      }}\n    >\n      <ArticleList\n        header={\n          args.showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: args.showHeaderIcon ? 'book-open' : '',\n                actions\n              }\n            : undefined\n        }\n        activeTab={activeTab}\n        onTabClick={handleTabChange}\n        skeletonize={false}\n        suggested={{\n          count: args.showCount ? suggestedMock.count : undefined,\n          articles\n        }}\n        followed={{\n          count: args.showCount ? followedMock.count : undefined,\n          articles,\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          showResults: args.showResults\n        }}\n        search={{\n          count: args.showCount ? searchMock.count : undefined,\n          articles,\n          searchInput: searchOptions,\n          category: categoryProps,\n          sortBy: sortByProps,\n          onClearClick: handleClearClick,\n          quickFilters,\n          handleQuickFilterRemove: (id: string) => {\n            setQuickFilters(quickFilters.filter(item => item.id !== id));\n          },\n          showResults: args.showResults\n        }}\n        onQuickFilterClick={(quickFilterParam: QuickFilter) => {\n          handleTabChange('Search');\n          setQuickFilters([...quickFilters, quickFilterParam]);\n        }}\n        loading={loading}\n      />\n    </div>\n  );\n};\n\nArticleListDemo.args = {\n  isSuggestArticleAction: true,\n  showAction: true,\n  showHeader: true,\n  showHeaderIcon: true,\n  showQuickFilters: true,\n  showCount: true,\n  showResults: true\n};\n\nArticleListDemo.argTypes = {\n  isSuggestArticleAction: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  showHeader: { control: { type: 'boolean' } },\n  showHeaderIcon: { control: { type: 'boolean' } },\n  showQuickFilters: { control: { type: 'boolean' } },\n  showCount: { control: { type: 'boolean' } },\n  showResults: { control: { type: 'boolean' } }\n};\n"]}

package/lib/cs/CSAppShell/CSAppShell.mocks.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-export declare type LoginError = string;
+export type LoginError = string;
 export interface LoginFormProps {
     ctiLinkOptions: {
         [key: string]: string;
@@ -70,4 +70,21 @@ export declare const AppShellMockData: {
         }[];
     };
 };
+export declare const statuses: ({
+    id: string;
+    primary: string;
+    selected: boolean;
+    items?: undefined;
+} | {
+    id: string;
+    primary: string;
+    items: {
+        id: string;
+        primary: string;
+        selected: boolean;
+    }[];
+    selected?: undefined;
+})[];
+export declare const ChatSettingsPanelMock: FunctionComponent;
+export declare const EmailNotificationPanelMock: FunctionComponent;
 //# sourceMappingURL=CSAppShell.mocks.d.ts.map

package/lib/cs/CSAppShell/CSAppShell.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAoB5F,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAmE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}
+{"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AA+Bf,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,sBAAsB;UAC3B,UAAU,GAAG,UAAU;;qBAEZ,OAAO;EAKxB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,iBAiE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;IAYpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBA2HnC,CAAC;AAsDF,eAAO,MAAM,0BAA0B,EAAE,iBAkBxC,CAAC"}

package/lib/cs/CSAppShell/CSAppShell.mocks.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select } from '@pega/cosmos-react-core';
+import { createContext, useCallback, useContext, useState, useEffect, useMemo } from 'react';
+import { AppShellDrawerContext, Banner, Button, Flex, Form, Input, Option, Select, menuHelpers, CheckboxGroup, Checkbox, ComboBox } from '@pega/cosmos-react-core';
 import { CTIPanel } from '@pega/cosmos-react-cs';
-import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
+import ChatSettingsPanel from '@pega/cosmos-react-social/lib/components/Chat/ChatSettingsPanel';
+import { AppshellEmailSummaryList, EmailSummaryList } from '@pega/cosmos-react-social';
+import EmailNotificationPanel from '@pega/cosmos-react-social/lib/components/Email/EmailNotificationPanel';
+import { emailSummaryItems } from '../../social/Email/Email.mocks';
 import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
+import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
 export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
     const [agentId, setAgentId] = useState('');
     const [password, setPassword] = useState('');
@@ -15,7 +19,7 @@ export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
                     e.preventDefault();
                     onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
                 }, children: "Login" }, 'submit')] }));
-    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { id: 'error', variant: 'urgent', messages: [errorMessage] }) : undefined, children: [_jsx(Select, { required: true, label: 'CTI link', onChange: e => setCTILinkId(e.target.value), children: Object.entries(ctiLinkOptions).map(([id, label]) => (_jsx(Option, { value: id, children: label }))) }), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) })] }));
+    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { variant: 'urgent', messages: [errorMessage] }) : undefined, children: [_jsx(Select, { required: true, label: 'CTI link', onChange: e => setCTILinkId(e.target.value), children: Object.entries(ctiLinkOptions).map(([id, label]) => (_jsx(Option, { value: id, children: label }))) }), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) })] }));
 };
 export const CTIControlPanelContext = createContext({
     type: 'internal',
@@ -27,7 +31,7 @@ export const CTIControlPanel = () => {
     const [callPanelVisible, setCallPanelVisible] = useState(false);
     const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);
     const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
-    const drawerView = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
+    const drawerView = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
                 valid: 'It will be accepted',
                 invalid: 'This will raise an error'
             }, onLogin: ctiLink => {
@@ -39,20 +43,20 @@ export const CTIControlPanel = () => {
                 return Promise.resolve(undefined);
             }, onCancel: closeDrawer }) }));
     const drawerHeader = 'Pega Call Log In';
-    return (_jsx(_Fragment, { children: _jsx(CTIPanel, { visible: callPanelVisible, status: agentStatus, onClick: () => {
-                if (agentStatus.status === 'logout')
-                    openDrawer({
-                        drawerHeader,
-                        drawerView,
-                        name: drawerHeader
-                    });
-                else
-                    setCallPanelVisible(prev => !prev);
-            }, children: type === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: status => {
-                    setAgentStatus(status);
-                    if (status.status === 'logout')
-                        setCallPanelVisible(false);
-                }, isDraggable: draggable, showStatus: true, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, showStatus: true, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }) }));
+    return (_jsx(CTIPanel, { visible: callPanelVisible, status: agentStatus, onClick: () => {
+            if (agentStatus.status === 'logout')
+                openDrawer({
+                    drawerHeader,
+                    drawerView,
+                    name: drawerHeader
+                });
+            else
+                setCallPanelVisible(prev => !prev);
+        }, children: type === 'internal' ? (_jsx(CallControlPanelDemo, { heading: 'Agent', status: agentStatus.id, onStatusChange: status => {
+                setAgentStatus(status);
+                if (status.status === 'logout')
+                    setCallPanelVisible(false);
+            }, isDraggable: draggable, showStatus: true, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, showStatus: true, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }));
 };
 export const AppShellMockData = {
     notifications: [
@@ -277,4 +281,105 @@ export const AppShellMockData = {
         ]
     }
 };
+export const statuses = [
+    { id: 'available', primary: 'Available', selected: false },
+    {
+        id: 'temporarilyUnavailable',
+        primary: 'Temporarily unavailable',
+        items: [
+            { id: 'quick_break', primary: 'Quick break', selected: false },
+            { id: 'personal_work', primary: 'Personal work', selected: false },
+            { id: 'in_a_meeting', primary: 'In a meeting', selected: false }
+        ]
+    },
+    { id: 'unavailable', primary: 'Unavailable', selected: false }
+];
+export const ChatSettingsPanelMock = () => {
+    const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);
+    const [chatAlias, setChatAlias] = useState('');
+    const [queues, setQueues] = useState([
+        { id: 'Billing', checked: false },
+        { id: 'General', checked: false },
+        { id: 'Technical', checked: false }
+    ]);
+    const [items, setItems] = useState(() => {
+        return menuHelpers.mapTree(statuses, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+    });
+    const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
+    const selectItem = useCallback((id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    }, []);
+    const formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: closeDrawer, children: "Cancel" }), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: closeDrawer, children: "Submit" })] }));
+    const chatSettings = useMemo(() => (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsxs(Form, { actions: formActions, children: [_jsx(Flex, { container: { direction: 'column', pad: 0.5 }, children: _jsx(Input, { label: 'Chat alias', value: chatAlias, onChange: (e) => {
+                            setChatAlias(e.target.value);
+                        } }) }), _jsx(Flex, { container: { direction: 'column', pad: 1 }, children: _jsx(CheckboxGroup, { label: 'Joined queues', name: 'queueslist', labelHidden: false, children: queues.map(({ id, checked }) => (_jsx(Checkbox, { label: id, id: id, name: id, checked: checked, onChange: e => setQueues(queues.map(queue => {
+                                if (queue.id === id) {
+                                    return {
+                                        ...queue,
+                                        checked: e.target.checked
+                                    };
+                                }
+                                return queue;
+                            })) }))) }) }), _jsx(Flex, { container: { direction: 'column', pad: 0.5 }, children: _jsx(ComboBox, { label: 'Status', mode: 'single-select', required: true, selected: selected
+                            ? {
+                                items: {
+                                    id: selected?.id,
+                                    text: selected?.primary
+                                }
+                            }
+                            : undefined, menu: {
+                            items,
+                            variant: 'drill-down',
+                            onItemClick: selectItem
+                        } }) })] }) })), [items]);
+    const drawerHeader = 'Chat settings';
+    const drawerContent = {
+        drawerHeader,
+        drawerView: chatSettings,
+        name: drawerHeader
+    };
+    useEffect(() => {
+        if (selected)
+            openDrawer(drawerContent);
+    }, [selected]);
+    return (_jsx(ChatSettingsPanel, { label: drawerHeader, status: menuHelpers.getParentItem(items, selected?.id)?.id === 'temporarilyUnavailable'
+            ? menuHelpers.getParentItem(items, selected?.id)?.id
+            : selected?.id, onClick: () => openDrawer(drawerContent) }));
+};
+const EmailNotifications = () => {
+    const { closeDrawer } = useContext(AppShellDrawerContext);
+    const [sortOptions, setSortOptions] = useState([
+        { id: 'Most recent', primary: 'Most recent', selected: true },
+        { id: 'Most urgent', primary: 'Most urgent', selected: false },
+        { id: 'All unread', primary: 'All unread', selected: false }
+    ]);
+    const selected = menuHelpers.getSelected(sortOptions)[0];
+    const selectItem = (id) => {
+        setSortOptions(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+    };
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, children: [_jsx(Flex, { container: { justify: 'center', pad: [1, 0, 0] }, children: _jsx(Button, { onClick: closeDrawer, children: "Get next email" }) }), _jsx(Flex, { container: { direction: 'column', pad: [0, 2] }, children: _jsx(ComboBox, { label: 'Sorted by', mode: 'single-select', selected: selected
+                        ? {
+                            items: {
+                                id: selected?.id,
+                                text: selected?.primary
+                            }
+                        }
+                        : undefined, menu: {
+                        items: sortOptions,
+                        onItemClick: selectItem
+                    } }) }), _jsx(EmailSummaryList, { items: emailSummaryItems, as: AppshellEmailSummaryList, onItemClick: closeDrawer, emptyMessage: 'No emails', selectable: false })] }));
+};
+export const EmailNotificationPanelMock = () => {
+    const { openDrawer } = useContext(AppShellDrawerContext);
+    const drawerHeader = 'My open emails';
+    const drawerContent = {
+        drawerHeader,
+        drawerView: _jsx(EmailNotifications, {}),
+        name: drawerHeader
+    };
+    return (_jsx(EmailNotificationPanel, { count: 15, label: drawerHeader, onClick: () => openDrawer(drawerContent) }));
+};
 //# sourceMappingURL=CSAppShell.mocks.js.map