@pega/cosmos-react-demos 2.1.5 → 2.1.6

package/lib/cs/ArticleList/ArticleList.mocks.js

@@ -1,102 +0,0 @@
-export const ArticleListMockData = {
-    articleList: [
-        {
-            articleId: '1',
-            header: 'Bear claw jujubes pastry jujubes chocolate bar chupa ',
-            abstract: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.',
-            meta: {
-                category: 'Banking and Retail',
-                publishedDate: '12/12/2019',
-                likes: 3500,
-                disLikes: 85
-            }
-        },
-        {
-            articleId: '2',
-            header: 'Oat cake jujubes pudding macaroon apple pie biscuit liquorice',
-            abstract: 'Candy cotton candy tiramisu danish halvah pie. Macaroon chupa chups chupa chups tiramisu bear claw liquorice croissant. Powder tart chupa chups.',
-            meta: {
-                category: 'Retail',
-                publishedDate: '12/12/2019',
-                likes: 47,
-                disLikes: 15
-            }
-        },
-        {
-            articleId: '3',
-            header: 'Cookie jelly-o lemon drops gingerbread chocolate marzipan sweet',
-            abstract: 'Ice cream dragée ice cream bear claw. Bonbon icing marshmallow fruitcake. Carrot cake chocolate cake pie dessert ',
-            meta: {
-                category: 'Finance',
-                publishedDate: '12/12/2019',
-                likes: 89,
-                disLikes: 33
-            }
-        },
-        {
-            articleId: '4',
-            header: 'Tootsie roll tiramisu jujubes gingerbread macaroon',
-            abstract: 'Pudding bear claw sweet sugar plum jelly wafer. Jelly beans chocolate bar jelly-o jelly dessert. Danish toffee lollipop t',
-            meta: {
-                category: 'Insurance',
-                publishedDate: '12/12/2019',
-                likes: 950,
-                disLikes: 2
-            }
-        },
-        {
-            articleId: '5',
-            header: 'Bear claw jujubes pastry jujubes chocolate bar chupa ',
-            abstract: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.',
-            meta: {
-                category: 'Banking and Retail',
-                publishedDate: '12/12/2019',
-                likes: 3500,
-                disLikes: 85
-            }
-        },
-        {
-            articleId: '6',
-            header: 'Oat cake jujubes pudding macaroon apple pie biscuit liquorice',
-            abstract: 'Candy cotton candy tiramisu danish halvah pie. Macaroon chupa chups chupa chups tiramisu bear claw liquorice croissant. Powder tart chupa chups.',
-            meta: {
-                category: 'Retail',
-                publishedDate: '12/12/2019',
-                likes: 47,
-                disLikes: 15
-            }
-        },
-        {
-            articleId: '7',
-            header: 'Cookie jelly-o lemon drops gingerbread chocolate marzipan sweet',
-            abstract: 'Ice cream dragée ice cream bear claw. Bonbon icing marshmallow fruitcake. Carrot cake chocolate cake pie dessert ',
-            meta: {
-                category: 'Finance',
-                publishedDate: '12/12/2019',
-                likes: 89,
-                disLikes: 33
-            }
-        },
-        {
-            articleId: '8',
-            header: 'Tootsie roll tiramisu jujubes gingerbread macaroon',
-            abstract: 'Pudding bear claw sweet sugar plum jelly wafer. Jelly beans chocolate bar jelly-o jelly dessert. Danish toffee lollipop t',
-            meta: {
-                category: 'Insurance',
-                publishedDate: '12/12/2019',
-                likes: 950,
-                disLikes: 2
-            }
-        }
-    ],
-    categoriesList: [
-        { id: '1', name: 'Education', level: 'Experts', category: 'Loans' },
-        { id: '2', name: 'Auto loan', level: 'Experts', category: 'Loans' },
-        { id: '3', name: 'Credit card', level: 'Intermediate', category: 'Banking' },
-        { id: '4', name: 'General Q & A', level: 'Intermediate', category: 'Others' },
-        { id: '5', name: 'Debit card', level: 'Intermediate', category: 'Banking' },
-        { id: '6', name: 'Retail banking', level: 'Intermediate', category: 'Banking' }
-    ],
-    sortByOptions: ['Top rated', 'Recently published', 'Suggested']
-};
-//# sourceMappingURL=ArticleList.mocks.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleList.mocks.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["export const ArticleListMockData = {\n  articleList: [\n    {\n      articleId: '1',\n      header: 'Bear claw jujubes pastry jujubes chocolate bar chupa ',\n      abstract:\n        'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.',\n      meta: {\n        category: 'Banking and Retail',\n        publishedDate: '12/12/2019',\n        likes: 3500,\n        disLikes: 85\n      }\n    },\n    {\n      articleId: '2',\n      header: 'Oat cake jujubes pudding macaroon apple pie biscuit liquorice',\n      abstract:\n        'Candy cotton candy tiramisu danish halvah pie. Macaroon chupa chups chupa chups tiramisu bear claw liquorice croissant. Powder tart chupa chups.',\n      meta: {\n        category: 'Retail',\n        publishedDate: '12/12/2019',\n        likes: 47,\n        disLikes: 15\n      }\n    },\n    {\n      articleId: '3',\n      header: 'Cookie jelly-o lemon drops gingerbread chocolate marzipan sweet',\n      abstract:\n        'Ice cream dragée ice cream bear claw. Bonbon icing marshmallow fruitcake. Carrot cake chocolate cake pie dessert ',\n      meta: {\n        category: 'Finance',\n        publishedDate: '12/12/2019',\n        likes: 89,\n        disLikes: 33\n      }\n    },\n    {\n      articleId: '4',\n      header: 'Tootsie roll tiramisu jujubes gingerbread macaroon',\n      abstract:\n        'Pudding bear claw sweet sugar plum jelly wafer. Jelly beans chocolate bar jelly-o jelly dessert. Danish toffee lollipop t',\n      meta: {\n        category: 'Insurance',\n        publishedDate: '12/12/2019',\n        likes: 950,\n        disLikes: 2\n      }\n    },\n    {\n      articleId: '5',\n      header: 'Bear claw jujubes pastry jujubes chocolate bar chupa ',\n      abstract:\n        'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.',\n      meta: {\n        category: 'Banking and Retail',\n        publishedDate: '12/12/2019',\n        likes: 3500,\n        disLikes: 85\n      }\n    },\n    {\n      articleId: '6',\n      header: 'Oat cake jujubes pudding macaroon apple pie biscuit liquorice',\n      abstract:\n        'Candy cotton candy tiramisu danish halvah pie. Macaroon chupa chups chupa chups tiramisu bear claw liquorice croissant. Powder tart chupa chups.',\n      meta: {\n        category: 'Retail',\n        publishedDate: '12/12/2019',\n        likes: 47,\n        disLikes: 15\n      }\n    },\n    {\n      articleId: '7',\n      header: 'Cookie jelly-o lemon drops gingerbread chocolate marzipan sweet',\n      abstract:\n        'Ice cream dragée ice cream bear claw. Bonbon icing marshmallow fruitcake. Carrot cake chocolate cake pie dessert ',\n      meta: {\n        category: 'Finance',\n        publishedDate: '12/12/2019',\n        likes: 89,\n        disLikes: 33\n      }\n    },\n    {\n      articleId: '8',\n      header: 'Tootsie roll tiramisu jujubes gingerbread macaroon',\n      abstract:\n        'Pudding bear claw sweet sugar plum jelly wafer. Jelly beans chocolate bar jelly-o jelly dessert. Danish toffee lollipop t',\n      meta: {\n        category: 'Insurance',\n        publishedDate: '12/12/2019',\n        likes: 950,\n        disLikes: 2\n      }\n    }\n  ],\n  categoriesList: [\n    { id: '1', name: 'Education', level: 'Experts', category: 'Loans' },\n    { id: '2', name: 'Auto loan', level: 'Experts', category: 'Loans' },\n    { id: '3', name: 'Credit card', level: 'Intermediate', category: 'Banking' },\n    { id: '4', name: 'General Q & A', level: 'Intermediate', category: 'Others' },\n    { id: '5', name: 'Debit card', level: 'Intermediate', category: 'Banking' },\n    { id: '6', name: 'Retail banking', level: 'Intermediate', category: 'Banking' }\n  ],\n  sortByOptions: ['Top rated', 'Recently published', 'Suggested']\n};\n"]}

package/lib/cs/ArticleList/ArticleList.stories.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleListProps & import("@pega/cosmos-react-core").ForwardProps>;
-    subcomponents: {
-        ArticleSummary: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleSummaryProps & import("@pega/cosmos-react-core").ForwardProps>;
-        ArticleListHeader: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleListHeaderProps>;
-    };
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const FirstArticleList: () => JSX.Element;
-export declare const ArticleListWithSkeleton: () => JSX.Element;
-//# sourceMappingURL=ArticleList.stories.d.ts.map

package/lib/cs/ArticleList/ArticleList.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,mBAyJ5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}

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

@@ -1,83 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 * 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';
-export default {
-    title: 'Customer Service/ArticleList',
-    component: ArticleList,
-    subcomponents: { ArticleSummary, ArticleListHeader },
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);
-export const FirstArticleList = () => {
-    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();
-    };
-    const ALHeader = {
-        icon: _jsx(Icon, { name: 'help' }, void 0),
-        headerText: 'Knowledge articles',
-        primary: {
-            search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' }, void 0)),
-            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 }, void 0) }, void 0))
-        },
-        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 });
-                            }
-                        } }, void 0) }, void 0), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) }, void 0)] }, void 0))
-    };
-    return (_jsx("div", { style: {
-            width: '31.25rem',
-            maxHeight: '100vh'
-        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
-                        setCurrentPage(pageNumber);
-                    } }, void 0) }, void 0), 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 }, void 0), content: _jsx(Text, { children: dataItem.abstract }, void 0), articleID: `article-${id}`, meta: [
-                        _jsx(Text, { children: dataItem.meta.category }, void 0),
-                        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' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.likes, ")"] }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.disLikes, ")"] }, void 0)] }, void 0)] }, void 0)
-                    ] }, id.toString()));
-            }) }, void 0) }, void 0));
-};
-export const ArticleListWithSkeleton = () => (_jsx("div", { style: {
-        maxWidth: '31.25rem',
-        maxHeight: '100vh'
-    }, children: _jsx(ArticleList, { skeletonize: true }, void 0) }, void 0));
-//# sourceMappingURL=ArticleList.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\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};\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList = () => {\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    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onChange={(event: { target: { value: SetStateAction<string> } }) =>\n            setQuery(event.target.value)\n          }\n          onSearchChange={action('Search query')}\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            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 = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts

@@ -1,45 +0,0 @@
-import { Story } from '@storybook/react';
-import { InteractionTimerStoryProps } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-    args: {
-        isDraggable: boolean;
-        hasInteractionNotifications: boolean;
-        enableSla: boolean;
-    };
-    argTypes: {
-        isDraggable: {
-            control: {
-                type: string;
-            };
-        };
-        hasInteractionNotifications: {
-            control: {
-                type: string;
-            };
-        };
-        enableSla: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare type LoginError = string;
-export interface LoginFormProps {
-    ctiLinkOptions: {
-        [key: string]: string;
-    };
-    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
-}
-interface CSAppShellProps {
-    isDraggable?: boolean;
-    hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];
-    enableSla?: InteractionTimerStoryProps['showTimer'];
-}
-export declare const CSAppShell: Story<CSAppShellProps>;
-//# sourceMappingURL=CSAppShell.stories.d.ts.map

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0BzC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2EAA2E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQnF,wBAeE;AAEF,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;CACtC;AAoED,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}

package/lib/cs/CSCaseView/CSAppShell.stories.js

@@ -1,240 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option, Banner } from '@pega/cosmos-react-core';
-import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
-import { CallControlPanelIcon } from '@pega/cosmos-react-cs';
-import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
-import { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';
-import { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';
-import { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';
-import { EmailDemo } from '@pega/cosmos-react-demos/lib/social/Email/Email.stories';
-import { StandardChat } from '@pega/cosmos-react-demos/lib/social/Chat/Chat.stories';
-import { TaskManagerDemo as TaskManagerStory } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.stories';
-import { InteractionTimerDemo as InteractionTimerStory } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
-import { CallControlPanelDemo } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.stories';
-import { userStatusOptions } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.mocks';
-import { AppShellMockData } from './CSCaseView.mocks';
-registerIcon(chatSolidIcon);
-export default {
-    title: 'Customer Service/CS App Shell',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    args: {
-        isDraggable: true,
-        hasInteractionNotifications: true,
-        enableSla: true
-    },
-    argTypes: {
-        isDraggable: { control: { type: 'boolean' } },
-        hasInteractionNotifications: { control: { type: 'boolean' } },
-        enableSla: { control: { type: 'boolean' } }
-    }
-};
-const CallLoginForm = ({ ctiLinkOptions, onLogin }) => {
-    const [agentId, setAgentId] = useState('');
-    const [password, setPassword] = useState('');
-    const [extension, setExtension] = useState('');
-    const [ctiLinkId, setCTILinkId] = useState(Object.keys(ctiLinkOptions)[0]);
-    const [errorMessage, setErrorMessage] = useState();
-    const canSubmit = agentId && password && ctiLinkId && extension;
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'cancel', variant: 'secondary', children: "Cancel" }, void 0), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
-                    e.preventDefault();
-                    onLogin(ctiLinkId, agentId, password).then(setErrorMessage);
-                }, children: "Login" }, void 0)] }, void 0));
-    return (_jsxs(Form, { actions: actions, banners: errorMessage ? _jsx(Banner, { id: 'error', variant: 'urgent', messages: [errorMessage] }, void 0) : 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 }, void 0))) }, void 0), _jsx(Input, { required: true, label: 'Agent ID', value: agentId, onChange: (e) => setAgentId(e.target.value) }, void 0), _jsx(Input, { type: 'password', required: true, label: 'Password', value: password, onChange: (e) => setPassword(e.target.value) }, void 0), _jsx(Input, { required: true, label: 'Extension', value: extension, onChange: (e) => setExtension(e.target.value) }, void 0)] }, void 0));
-};
-export const CSAppShell = (args) => {
-    const CaseData = AppShellMockData;
-    const home = _jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}, void 0), b: _jsx(TasksDemo, {}, void 0), title: 'Welcome, Sara Davis' }, void 0);
-    const [mainContent, setMainContent] = useState(home);
-    const [caseID, setCaseID] = useState(1001);
-    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
-    const [callPanelVisible, setCallPanelVisible] = useState(false);
-    const [cases, setCases] = useState([]);
-    const [links, setLinks] = useState([
-        {
-            id: '01',
-            name: 'Home',
-            href: '#home',
-            icon: 'home-solid'
-        }
-    ]);
-    const tabs = [
-        { name: 'Customer  notes', id: 'Pulse' },
-        { name: 'Accounts', id: 'Accounts' }
-    ];
-    const demoActions = [
-        {
-            text: 'Change stage',
-            id: createUID(),
-            onClick: action('Clicked on change stage')
-        },
-        {
-            text: 'Wrap up',
-            id: createUID(),
-            onClick: action('Clicked on Wrap up')
-        },
-        {
-            text: 'Exit interaction',
-            id: createUID(),
-            onClick: action('Clicked on exit interaction')
-        }
-    ];
-    const RenderCaseView = (name) => {
-        if (name) {
-            const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];
-            const secondaryFields = secondaryField.map((field) => {
-                if (field.name === 'Status') {
-                    return { ...field, value: _jsx(Status, { variant: 'success', children: field.value }, void 0) };
-                }
-                return field;
-            });
-            let persistentUtility;
-            if (name === 'Mail Interaction') {
-                persistentUtility = {
-                    content: _jsx(EmailDemo, { hideSuggestions: true }, void 0),
-                    title: 'Email'
-                };
-            }
-            else if (name === 'Chat Interaction') {
-                persistentUtility = {
-                    content: _jsx(StandardChat, { chatWidth: '100%' }, void 0),
-                    title: 'Chat'
-                };
-            }
-            setMainContent(_jsx(CaseViewDemo, { caseId: caseId, heading: heading, parentCases: [], actions: demoActions, primaryFields: primaryFields, secondaryFields: secondaryFields, tabs: tabs, stages: false, tasksWidget: _jsx(TaskManagerStory, {}, void 0), persistentUtility: persistentUtility, showUtilities: false, showFollowedIcon: false, defaultCollapsedUtilities: true }, void 0));
-        }
-    };
-    const setActiveItem = (key) => {
-        setCases((prevCases = []) => {
-            return prevCases.map(caseItem => {
-                return { ...caseItem, active: caseItem.id === key };
-            });
-        });
-        setLinks((prevLinks = []) => {
-            return prevLinks.map(link => {
-                return {
-                    ...link,
-                    active: link.name === key
-                };
-            });
-        });
-    };
-    const createInteraction = (createLink) => {
-        const { primary, secondary, icon, customerName } = createLink;
-        const key = createUID();
-        const createdAt = new Date().getTime();
-        const newCase = {
-            visual: (_jsx(InteractionTimerStory, { createdAt: createdAt, icon: icon, showTimer: args.enableSla, hasNotifications: args.hasInteractionNotifications, meta: args.enableSla ? '0:00' : createLink.meta }, void 0)),
-            primary: customerName || 'Unknown customer',
-            secondary,
-            createdAt,
-            id: key,
-            active: true,
-            onClick: () => {
-                setActiveItem(key);
-                RenderCaseView(primary);
-            },
-            onDismiss: (e) => {
-                setActiveItem('Home');
-                e.stopPropagation();
-                setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));
-                setMainContent(home);
-            }
-        };
-        setCases((prevCases = []) => [...prevCases, newCase]);
-        setActiveItem(key);
-        setCaseID(caseID + 1);
-        RenderCaseView(primary);
-    };
-    const createLinks = [
-        {
-            primary: 'Phone Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'FH',
-            customerName: 'Ginger Ventura'
-        },
-        {
-            primary: 'Chat Interaction',
-            secondary: 'Sent 2h ago',
-            icon: 'chat-solid',
-            meta: 'SC',
-            customerName: 'Sara Davis'
-        },
-        {
-            primary: 'Mail Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'mail-solid',
-            meta: 'JB',
-            customerName: 'John Brown'
-        }
-    ].map(item => {
-        const { primary, icon } = item;
-        return {
-            name: primary,
-            icon,
-            href: '',
-            onClick: () => {
-                createInteraction(item);
-            }
-        };
-    });
-    useEffect(() => {
-        createInteraction({
-            primary: 'Phone Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'GV',
-            customerName: 'Ginger Ventura'
-        });
-    }, []);
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
-                    action('Click')(`${e.currentTarget.name}:${e.type}`);
-                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Log in" }, void 0)] }, void 0));
-    const chatSettings = (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsxs(Form, { actions: actions, children: [_jsx(Input, { name: 'agentId', label: 'Agent Id', autoComplete: 'off' }, void 0), _jsx(Input, { name: 'password', type: 'password', label: 'Password', autoComplete: 'off' }, void 0), _jsxs(Select, { label: 'Make me', children: [_jsx(Option, { children: "Available" }, void 0), _jsx(Option, { children: "Unavailable" }, void 0)] }, void 0)] }, void 0) }, void 0));
-    const utils = [
-        {
-            name: 'Chat settings',
-            visual: _jsx(Icon, { name: 'chat-solid' }, void 0),
-            drawerView: chatSettings,
-            drawerHeader: 'Pega Chat Log In'
-        },
-        {
-            name: 'Call panel',
-            visual: (_jsx(CallControlPanelIcon, { status: agentStatus.status, label: agentStatus.label, variant: 'icon', panelVisible: callPanelVisible }, void 0)),
-            ...(agentStatus.status === 'offline'
-                ? {
-                    drawerView: (_jsx(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, item: { grow: 1 }, children: _jsx(CallLoginForm, { ctiLinkOptions: {
-                                valid: 'It will be accepted',
-                                invalid: 'This will raise an error'
-                            }, onLogin: ctiLink => {
-                                if (ctiLink === 'invalid')
-                                    return Promise.resolve('Login incorrect');
-                                setAgentStatus(userStatusOptions[1]);
-                                setCallPanelVisible(true);
-                                return Promise.resolve(undefined);
-                            } }, void 0) }, void 0)),
-                    drawerHeader: 'Pega Call Log In'
-                }
-                : {
-                    onClick: () => setCallPanelVisible(isVisible => !isVisible)
-                })
-        }
-    ];
-    const appInfo = {
-        href: 'https://www.pega.com/',
-        imageSrc: 'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',
-        fullImageSrc: 'Full Image Source',
-        appName: 'CS AppShell'
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(AppShellDemo, { main: mainContent, appInfo: appInfo, cases: cases, createLinks: createLinks, caseLinks: links, utils: utils, onLinkClick: (name) => {
-                    if (name === 'Home') {
-                        setMainContent(home);
-                    }
-                    setActiveItem(name);
-                } }, void 0), callPanelVisible && (_jsx(CallControlPanelDemo, { status: agentStatus.id, onStatusChange: setAgentStatus, isDraggable: args.isDraggable }, void 0))] }, void 0));
-};
-//# sourceMappingURL=CSAppShell.stories.js.map

package/lib/cs/CSCaseView/CSAppShell.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, MouseEvent, ChangeEvent, FunctionComponent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Story } from '@storybook/react';\n\nimport {\n  AppShellProps,\n  createUID,\n  Status,\n  TwoColumnPage,\n  Icon,\n  registerIcon,\n  Button,\n  Form,\n  Flex,\n  Input,\n  Select,\n  Option,\n  Banner\n} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\nimport { CallControlPanelIcon, UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.stories';\nimport { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\nimport { EmailDemo } from '@pega/cosmos-react-demos/lib/social/Email/Email.stories';\nimport { StandardChat } from '@pega/cosmos-react-demos/lib/social/Chat/Chat.stories';\nimport { TaskManagerDemo as TaskManagerStory } from '@pega/cosmos-react-demos/lib/cs/TaskManager/TaskManager.stories';\nimport {\n  InteractionTimerDemo as InteractionTimerStory,\n  InteractionTimerStoryProps\n} from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';\nimport { CallControlPanelDemo } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.stories';\nimport { userStatusOptions } from '@pega/cosmos-react-demos/lib/cs/CallControlPanel/CallControlPanel.mocks';\n\nimport { AppShellMockData } from './CSCaseView.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } }\n  }\n};\n\nexport type LoginError = string;\n\nexport interface LoginFormProps {\n  ctiLinkOptions: { [key: string]: string };\n  onLogin: (\n    ctiLinkId: keyof LoginFormProps['ctiLinkOptions'],\n    agentId: string,\n    password: string\n  ) => Promise<LoginError | undefined>;\n}\n\nconst CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin\n}: LoginFormProps) => {\n  const [agentId, setAgentId] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [extension, setExtension] = useState<string>('');\n  const [ctiLinkId, setCTILinkId] = useState<string>(Object.keys(ctiLinkOptions)[0]);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  const canSubmit = agentId && password && ctiLinkId && extension;\n\n  const actions = (\n    <>\n      <Button name='cancel' variant='secondary'>\n        Cancel\n      </Button>\n      <Button\n        name='submit'\n        type='submit'\n        variant='primary'\n        disabled={!canSubmit}\n        onClick={(e: MouseEvent) => {\n          e.preventDefault();\n          onLogin(ctiLinkId!, agentId, password).then(setErrorMessage);\n        }}\n      >\n        Login\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={actions}\n      banners={\n        errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]} /> : undefined\n      }\n    >\n      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>\n        {Object.entries(ctiLinkOptions).map(([id, label]) => (\n          <Option value={id}>{label}</Option>\n        ))}\n      </Select>\n      <Input\n        required\n        label='Agent ID'\n        value={agentId}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setAgentId(e.target.value)}\n      />\n      <Input\n        type='password'\n        required\n        label='Password'\n        value={password}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}\n      />\n      <Input\n        required\n        label='Extension'\n        value={extension}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setExtension(e.target.value)}\n      />\n    </Form>\n  );\n};\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n}\n\nexport const CSAppShell: Story<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const tabs = [\n    { name: 'Customer  notes', id: 'Pulse' },\n    { name: 'Accounts', id: 'Accounts' }\n  ];\n\n  const demoActions = [\n    {\n      text: 'Change stage',\n      id: createUID(),\n      onClick: action('Clicked on change stage')\n    },\n    {\n      text: 'Wrap up',\n      id: createUID(),\n      onClick: action('Clicked on Wrap up')\n    },\n    {\n      text: 'Exit interaction',\n      id: createUID(),\n      onClick: action('Clicked on exit interaction')\n    }\n  ];\n\n  const RenderCaseView = (name: string) => {\n    if (name) {\n      const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];\n      const secondaryFields = secondaryField.map((field: any) => {\n        if (field.name === 'Status') {\n          return { ...field, value: <Status variant='success'>{field.value}</Status> };\n        }\n        return field;\n      });\n      let persistentUtility;\n      if (name === 'Mail Interaction') {\n        persistentUtility = {\n          content: <EmailDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat Interaction') {\n        persistentUtility = {\n          content: <StandardChat chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewDemo\n          caseId={caseId}\n          heading={heading}\n          parentCases={[]}\n          actions={demoActions}\n          primaryFields={primaryFields}\n          secondaryFields={secondaryFields}\n          tabs={tabs}\n          stages={false}\n          tasksWidget={<TaskManagerStory />}\n          persistentUtility={persistentUtility}\n          showUtilities={false}\n          showFollowedIcon={false}\n          defaultCollapsedUtilities\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          createdAt={createdAt}\n          icon={icon as string}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        RenderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      }\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    RenderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat Interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          action('Click')(`${e.currentTarget.name}:${e.type}`);\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Log in\n      </Button>\n    </>\n  );\n  const chatSettings = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <Form actions={actions}>\n        <Input name='agentId' label='Agent Id' autoComplete='off' />\n\n        <Input name='password' type='password' label='Password' autoComplete='off' />\n        <Select label='Make me'>\n          <Option>Available</Option>\n          <Option>Unavailable</Option>\n        </Select>\n      </Form>\n    </Flex>\n  );\n\n  const utils = [\n    {\n      name: 'Chat settings',\n      visual: <Icon name='chat-solid' />,\n      drawerView: chatSettings,\n      drawerHeader: 'Pega Chat Log In'\n    },\n    {\n      name: 'Call panel',\n      visual: (\n        <CallControlPanelIcon\n          status={agentStatus.status}\n          label={agentStatus.label}\n          variant='icon'\n          panelVisible={callPanelVisible}\n        />\n      ),\n      ...(agentStatus.status === 'offline'\n        ? {\n            drawerView: (\n              <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n                <CallLoginForm\n                  ctiLinkOptions={{\n                    valid: 'It will be accepted',\n                    invalid: 'This will raise an error'\n                  }}\n                  onLogin={ctiLink => {\n                    if (ctiLink === 'invalid') return Promise.resolve('Login incorrect');\n                    setAgentStatus(userStatusOptions[1] as UserAvailabilityStatusOption);\n                    setCallPanelVisible(true);\n                    return Promise.resolve(undefined);\n                  }}\n                />\n              </Flex>\n            ),\n            drawerHeader: 'Pega Call Log In'\n          }\n        : {\n            onClick: () => setCallPanelVisible(isVisible => !isVisible)\n          })\n    }\n  ];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <>\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n      />\n      {callPanelVisible && (\n        <CallControlPanelDemo\n          status={agentStatus.id}\n          onStatusChange={setAgentStatus}\n          isDraggable={args.isDraggable}\n        />\n      )}\n    </>\n  );\n};\n"]}