npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.2.1 → 3.0.0-dev.20.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

Files changed (1304) hide show

package/lib/cs/Article/Article.stories.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const ArticleStory = () => {
     return (_jsx("div", { style: {
             maxWidth: '31.25rem',
             maxHeight: '100vh'
-        }, children: _jsx(Article, { navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }, void 0), _jsx(Text, { children: "Back to all articles" }, void 0)] }, void 0) }, void 0), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": 'star', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }, void 0) }, void 0), _jsx(Button, { "aria-label": 'open', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }, void 0) }, void 0)] }, void 0), secondaryActions: [
+        }, children: _jsx(Article, { navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }), _jsx(Text, { children: "Back to all articles" })] }) }), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": 'star', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }) }), _jsx(Button, { "aria-label": 'open', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }) })] }), secondaryActions: [
                 {
                     text: 'Filter 1',
                     id: 'f1a'
@@ -36,11 +36,11 @@ export const ArticleStory = () => {
             ], content:
             // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack
             // eslint-disable-next-line react/no-danger
-            _jsx("div", { dangerouslySetInnerHTML: { __html: ArticleMockData.fullArticleContent.content } }, void 0), skeletonize: false, title: ArticleMockData.fullArticleContent.header, meta: [
-                _jsx(Text, { variant: 'secondary', "aria-label": 'category', children: ArticleMockData.fullArticleContent.meta.category }, void 0),
-                _jsx(Text, { variant: 'secondary', "aria-label": 'published date', children: ArticleMockData.fullArticleContent.meta.publishedDate }, void 0),
-                _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, { "aria-label": 'likes', children: ["(", ArticleMockData.fullArticleContent.meta.likes, ")"] }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }, void 0), _jsxs(Text, { "aria-label": 'dislikes', children: ["(", ArticleMockData.fullArticleContent.meta.disLikes, ")"] }, void 0)] }, void 0)] }, void 0)
-            ], footer: _jsx(ArticleFooter, { content: _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { children: "Was this helpful ?" }, void 0), " ", _jsx(Button, { children: "Yes" }, void 0), " ", _jsx(Button, { children: "No" }, void 0)] }, void 0), tags: [
+            _jsx("div", { dangerouslySetInnerHTML: { __html: ArticleMockData.fullArticleContent.content } }), skeletonize: false, title: ArticleMockData.fullArticleContent.header, meta: [
+                _jsx(Text, { variant: 'secondary', "aria-label": 'category', children: ArticleMockData.fullArticleContent.meta.category }),
+                _jsx(Text, { variant: 'secondary', "aria-label": 'published date', children: ArticleMockData.fullArticleContent.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, { "aria-label": 'likes', children: ["(", ArticleMockData.fullArticleContent.meta.likes, ")"] })] }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }), _jsxs(Text, { "aria-label": 'dislikes', children: ["(", ArticleMockData.fullArticleContent.meta.disLikes, ")"] })] })] })
+            ], footer: _jsx(ArticleFooter, { content: _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { children: "Was this helpful ?" }), " ", _jsx(Button, { children: "Yes" }), " ", _jsx(Button, { children: "No" })] }), tags: [
                     {
                         id: 'Retail banking',
                         tagName: '#Retail_banking'
@@ -65,13 +65,13 @@ export const ArticleStory = () => {
                         id: '223448',
                         tagName: '#Finance_Customers'
                     }
-                ], onTagClick: action('Tag clicked') }, void 0) }, void 0) }, void 0));
+                ], onTagClick: action('Tag clicked') }) }) }));
 };
 export const ArticleStorySkeletonize = () => {
     const onBackToArticlesClick = (event) => {
         event.preventDefault();
     };
-    return (_jsx("div", { style: { maxWidth: '31.25rem', maxHeight: '100vh' }, children: _jsx(Article, { skeletonize: true, navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }, void 0), _jsx(Text, { children: "Back to articles" }, void 0)] }, void 0) }, void 0), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }, void 0) }, void 0)] }, void 0), secondaryActions: [
+    return (_jsx("div", { style: { maxWidth: '31.25rem', maxHeight: '100vh' }, children: _jsx(Article, { skeletonize: true, navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }), _jsx(Text, { children: "Back to articles" })] }) }), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }) }), _jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }) })] }), secondaryActions: [
                 {
                     text: 'Filter 1',
                     id: 'f1a'
@@ -80,6 +80,6 @@ export const ArticleStorySkeletonize = () => {
                     text: 'Filter 2',
                     id: 'f2a'
                 }
-            ] }, void 0) }, void 0));
+            ] }) }));
 };
 //# sourceMappingURL=Article.stories.js.map

package/lib/cs/Article/Article.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Article.stories.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;~~AAElD~~,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,mBAAmB,CAAC,CAAC;AAExF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,OAAO;IAClB,aAAa,EAAE,EAAE,aAAa,EAAE;IAChC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;~~CACF~~,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,YAAY,~~GAAG~~,GAAG,EAAE;~~IAC/B~~,MAAM,qBAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,OAAO;SACnB,YAED,KAAC,OAAO,IACN,UAAU,EACR,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,qBAAqB,YAC3C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,~~WAAG~~,EAC1B,KAAC,IAAI~~,+CAA4B~~,~~YAC5B~~,~~WACF~~,EAET,cAAc,EACZ,8BACE,KAAC,MAAM,kBAAY,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,kBAC7C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACb~~,EACT,KAAC,MAAM,kBAAY,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,kBAC7C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACb~~,~~YACR~~,EAEL,gBAAgB,EAAE;gBAChB;oBACE,IAAI,EAAE,UAAU;oBAChB,EAAE,EAAE,KAAK;iBACV;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,EAAE,EAAE,KAAK;iBACV;aACF,EACD,OAAO;YACL,uHAAuH;YACvH,2CAA2C;YAC3C,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,kBAAkB,CAAC,OAAO,EAAE,~~WAAI~~,EAE1F,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,eAAe,CAAC,kBAAkB,CAAC,MAAM,EAChD,IAAI,EAAE;gBACJ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,gBAAY,UAAU,YAC5C,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,~~WAC5C~~;gBACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,gBAAY,gBAAgB,YAClD,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,~~WACjD~~;gBACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,~~WAAG~~,EAC/B,MAAC,IAAI,kBAAY,OAAO,kBAAG,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,~~iBAAS~~,~~YAC5E~~,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,~~WAAG~~,EACjC,MAAC,IAAI,kBAAY,UAAU,kBACvB,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,~~iBAC7C~~,~~YACF~~,~~YACF~~;aACR,EACD,MAAM,EACJ,KAAC,aAAa,IACZ,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,~~6CAA0B~~,OAAC,KAAC,MAAM,~~8BAAa~~,OAAC,KAAC,MAAM,~~6BAAY~~,~~YACnE~~,EAET,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,gBAAgB;wBACpB,OAAO,EAAE,iBAAiB;qBAC3B;oBACD;wBACE,EAAE,EAAE,qBAAqB;wBACzB,OAAO,EAAE,sBAAsB;qBAChC;oBACD;wBACE,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,aAAa;qBACvB;oBACD;wBACE,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,oBAAoB;qBAC9B;oBACD;wBACE,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,iBAAiB;qBAC3B;oBACD;wBACE,EAAE,EAAE,QAAQ;wBACZ,OAAO,EAAE,oBAAoB;qBAC9B;iBACF,EACD,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC,~~WACjC~~,~~WAEJ~~,~~WACE~~,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,~~GAAG~~,GAAG,EAAE;~~IAC1C~~,MAAM,qBAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,YACtD,KAAC,OAAO,IACN,WAAW,QACX,UAAU,EACR,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,qBAAqB,YAC3C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,~~WAAG~~,EAC1B,KAAC,IAAI,~~2CAAwB~~,~~YACxB~~,~~WACF~~,EAET,cAAc,EACZ,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,kBAC3B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACb~~,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,kBAC3B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACb~~,~~YACR~~,EAEL,gBAAgB,EAAE;gBAChB;oBACE,IAAI,EAAE,UAAU;oBAChB,EAAE,EAAE,KAAK;iBACV;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,EAAE,EAAE,KAAK;iBACV;aACF,~~WACD~~,~~WACE~~,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\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 { Article, ArticleFooter } from '@pega/cosmos-react-cs';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);\n\nexport default {\n title: 'Customer Service/Article',\n component: Article,\n subcomponents: { ArticleFooter },\n parameters: {\n layout: 'fullscreen'\n }\n};\n\nexport const ArticleStory = () => {\n const onBackToArticlesClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n return (\n <div\n style={{\n maxWidth: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <Article\n navigation={\n <Link href='/' onClick={onBackToArticlesClick}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='caret-left' />\n <Text>Back to all articles</Text>\n </Flex>\n </Link>\n }\n primaryActions={\n <>\n <Button aria-label='star' variant='simple' icon>\n <Icon name='star' />\n </Button>\n <Button aria-label='open' variant='simple' icon>\n <Icon name='open' />\n </Button>\n </>\n }\n secondaryActions={[\n {\n text: 'Filter 1',\n id: 'f1a'\n },\n {\n text: 'Filter 2',\n id: 'f2a'\n }\n ]}\n content={\n // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack\n // eslint-disable-next-line react/no-danger\n <div dangerouslySetInnerHTML={{ __html: ArticleMockData.fullArticleContent.content }} />\n }\n skeletonize={false}\n title={ArticleMockData.fullArticleContent.header}\n meta={[\n <Text variant='secondary' aria-label='category'>\n {ArticleMockData.fullArticleContent.meta.category}\n </Text>,\n <Text variant='secondary' aria-label='published date'>\n {ArticleMockData.fullArticleContent.meta.publishedDate}\n </Text>,\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-up-solid' />\n <Text aria-label='likes'>({ArticleMockData.fullArticleContent.meta.likes})</Text>\n </Flex>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-down-solid' />\n <Text aria-label='dislikes'>\n ({ArticleMockData.fullArticleContent.meta.disLikes})\n </Text>\n </Flex>\n </Flex>\n ]}\n footer={\n <ArticleFooter\n content={\n <Flex container={{ gap: 1 }}>\n <Text>Was this helpful ?</Text> <Button>Yes</Button> <Button>No</Button>\n </Flex>\n }\n tags={[\n {\n id: 'Retail banking',\n tagName: '#Retail_banking'\n },\n {\n id: 'difficult_customers',\n tagName: '#Difficult_customers'\n },\n {\n id: '223444',\n tagName: '#CSR_Skills'\n },\n {\n id: '223446',\n tagName: '#Premium_Customers'\n },\n {\n id: '223447',\n tagName: '#Rare_Customers'\n },\n {\n id: '223448',\n tagName: '#Finance_Customers'\n }\n ]}\n onTagClick={action('Tag clicked')}\n />\n }\n />\n </div>\n );\n};\n\nexport const ArticleStorySkeletonize = () => {\n const onBackToArticlesClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n return (\n <div style={{ maxWidth: '31.25rem', maxHeight: '100vh' }}>\n <Article\n skeletonize\n navigation={\n <Link href='/' onClick={onBackToArticlesClick}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='caret-left' />\n <Text>Back to articles</Text>\n </Flex>\n </Link>\n }\n primaryActions={\n <>\n <Button variant='simple' icon>\n <Icon name='star' />\n </Button>\n <Button variant='simple' icon>\n <Icon name='open' />\n </Button>\n </>\n }\n secondaryActions={[\n {\n text: 'Filter 1',\n id: 'f1a'\n },\n {\n text: 'Filter 2',\n id: 'f2a'\n }\n ]}\n />\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"Article.stories.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\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 { Article, ArticleFooter } from '@pega/cosmos-react-cs';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);\n\nexport default {\n title: 'Customer Service/Article',\n component: Article,\n subcomponents: { ArticleFooter },\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport const ArticleStory: Story = () => {\n const onBackToArticlesClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n return (\n <div\n style={{\n maxWidth: '31.25rem',\n maxHeight: '100vh'\n }}\n >\n <Article\n navigation={\n <Link href='/' onClick={onBackToArticlesClick}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='caret-left' />\n <Text>Back to all articles</Text>\n </Flex>\n </Link>\n }\n primaryActions={\n <>\n <Button aria-label='star' variant='simple' icon>\n <Icon name='star' />\n </Button>\n <Button aria-label='open' variant='simple' icon>\n <Icon name='open' />\n </Button>\n </>\n }\n secondaryActions={[\n {\n text: 'Filter 1',\n id: 'f1a'\n },\n {\n text: 'Filter 2',\n id: 'f2a'\n }\n ]}\n content={\n // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack\n // eslint-disable-next-line react/no-danger\n <div dangerouslySetInnerHTML={{ __html: ArticleMockData.fullArticleContent.content }} />\n }\n skeletonize={false}\n title={ArticleMockData.fullArticleContent.header}\n meta={[\n <Text variant='secondary' aria-label='category'>\n {ArticleMockData.fullArticleContent.meta.category}\n </Text>,\n <Text variant='secondary' aria-label='published date'>\n {ArticleMockData.fullArticleContent.meta.publishedDate}\n </Text>,\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-up-solid' />\n <Text aria-label='likes'>({ArticleMockData.fullArticleContent.meta.likes})</Text>\n </Flex>\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Icon name='thumbs-down-solid' />\n <Text aria-label='dislikes'>\n ({ArticleMockData.fullArticleContent.meta.disLikes})\n </Text>\n </Flex>\n </Flex>\n ]}\n footer={\n <ArticleFooter\n content={\n <Flex container={{ gap: 1 }}>\n <Text>Was this helpful ?</Text> <Button>Yes</Button> <Button>No</Button>\n </Flex>\n }\n tags={[\n {\n id: 'Retail banking',\n tagName: '#Retail_banking'\n },\n {\n id: 'difficult_customers',\n tagName: '#Difficult_customers'\n },\n {\n id: '223444',\n tagName: '#CSR_Skills'\n },\n {\n id: '223446',\n tagName: '#Premium_Customers'\n },\n {\n id: '223447',\n tagName: '#Rare_Customers'\n },\n {\n id: '223448',\n tagName: '#Finance_Customers'\n }\n ]}\n onTagClick={action('Tag clicked')}\n />\n }\n />\n </div>\n );\n};\n\nexport const ArticleStorySkeletonize: Story = () => {\n const onBackToArticlesClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n return (\n <div style={{ maxWidth: '31.25rem', maxHeight: '100vh' }}>\n <Article\n skeletonize\n navigation={\n <Link href='/' onClick={onBackToArticlesClick}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='caret-left' />\n <Text>Back to articles</Text>\n </Flex>\n </Link>\n }\n primaryActions={\n <>\n <Button variant='simple' icon>\n <Icon name='star' />\n </Button>\n <Button variant='simple' icon>\n <Icon name='open' />\n </Button>\n </>\n }\n secondaryActions={[\n {\n text: 'Filter 1',\n id: 'f1a'\n },\n {\n text: 'Filter 2',\n id: 'f2a'\n }\n ]}\n />\n </div>\n );\n};\n"]}

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

@@ -1,16 +1,6 @@
-/// <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;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FirstArticleList: () => JSX.Element;
-export declare const ArticleListWithSkeleton: () => JSX.Element;
+export declare const FirstArticleList: Story;
+export declare const ArticleListWithSkeleton: Story;
 //# sourceMappingURL=ArticleList.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAyB/C,wBAOU;AAIV,eAAO,MAAM,gBAAgB,EAAE,KAwJ9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC"}

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

@@ -32,10 +32,11 @@ export const FirstArticleList = () => {
         event.preventDefault();
     };
     const ALHeader = {
-        icon: _jsx(Icon, { name: 'help' }, void 0),
+        icon: _jsx(Icon, { name: 'help' }),
         headerText: 'Knowledge articles',
+        count: 5,
         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)),
+            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' }
@@ -51,7 +52,7 @@ export const FirstArticleList = () => {
                                 id: 'f2a'
                             }
                         ]
-                    }, icon: 'filter', text: 'filter', iconOnly: true }, void 0) }, void 0))
+                    }, icon: 'filter', text: 'filter', iconOnly: true }) }))
         },
         secondary: (_jsxs(_Fragment, { children: [_jsx(FormField, { label: 'Category', children: _jsx(ComboBox, { selected: { items: categoryFilter }, placeholder: 'Filter by category', menu: {
                             items: categoriesList,
@@ -61,23 +62,23 @@ export const FirstArticleList = () => {
                                 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))
+                        } }) }), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) })] }))
     };
     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 => {
+        }, 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);
-                    } }, 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),
+                    } }) }), 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' }, 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)
+                        _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()));
-            }) }, void 0) }, void 0));
+            }) }) }));
 };
 export const ArticleListWithSkeleton = () => (_jsx("div", { style: {
         maxWidth: '31.25rem',
         maxHeight: '100vh'
-    }, children: _jsx(ArticleList, { skeletonize: true }, void 0) }, void 0));
+    }, children: _jsx(ArticleList, { skeletonize: true }) }));
 //# sourceMappingURL=ArticleList.stories.js.map

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

	@@ -1 +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, 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"]}
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 FirstArticleList: 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"]}

package/lib/cs/CSCaseView/{CSCaseView.mocks.d.ts → CSAppShell.mocks.d.ts} RENAMED Viewed

@@ -1,3 +1,19 @@
+import { FunctionComponent } from 'react';
+export declare type LoginError = string;
+export interface LoginFormProps {
+    ctiLinkOptions: {
+        [key: string]: string;
+    };
+    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
+    onCancel: () => void;
+}
+export declare const CallLoginForm: FunctionComponent<LoginFormProps>;
+export declare const CTIControlPanelContext: import("react").Context<{
+    type: 'internal' | 'external';
+    draggable?: boolean | undefined;
+    applyAppStyling: boolean;
+}>;
+export declare const CTIControlPanel: FunctionComponent;
 export declare const AppShellMockData: {
     notifications: {
         id: string;
@@ -54,4 +70,4 @@ export declare const AppShellMockData: {
         }[];
     };
 };
-//# sourceMappingURL=CSCaseView.mocks.d.ts.map
+//# sourceMappingURL=CSAppShell.mocks.d.ts.map

package/lib/cs/CSCaseView/CSAppShell.mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CSAppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/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,iBAiE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}

package/lib/cs/CSCaseView/{CSCaseView.mocks.js → CSAppShell.mocks.js} RENAMED Viewed

@@ -1,3 +1,59 @@
+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 { CTIPanel } from '@pega/cosmos-react-cs';
+import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
+import { CallControlPanelDemo, ExternalCTIDemo } from '../CallControlPanel/CallControlPanel.stories';
+export const CallLoginForm = ({ ctiLinkOptions, onLogin, onCancel }) => {
+    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', onClick: onCancel, children: "Cancel" }, 'cancel'), _jsx(Button, { name: 'submit', type: 'submit', variant: 'primary', disabled: !canSubmit, onClick: (e) => {
+                    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) })] }));
+};
+export const CTIControlPanelContext = createContext({
+    type: 'internal',
+    draggable: true,
+    applyAppStyling: false
+});
+export const CTIControlPanel = () => {
+    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
+    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: {
+                valid: 'It will be accepted',
+                invalid: 'This will raise an error'
+            }, onLogin: ctiLink => {
+                if (ctiLink === 'invalid')
+                    return Promise.resolve('Login incorrect');
+                setAgentStatus(userStatusOptions[0]);
+                setCallPanelVisible(true);
+                closeDrawer();
+                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, visible: callPanelVisible })) : (_jsx(ExternalCTIDemo, { heading: 'External CTI', isDraggable: draggable, visible: callPanelVisible, applyAppStyling: applyAppStyling })) }) }));
+};
 export const AppShellMockData = {
     notifications: [
         {
@@ -221,4 +277,4 @@ export const AppShellMockData = {
         ]
     }
 };
-//# sourceMappingURL=CSCaseView.mocks.js.map
+//# sourceMappingURL=CSAppShell.mocks.js.map

package/lib/cs/CSCaseView/CSAppShell.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CSAppShell.mocks.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, FunctionComponent, useContext, useState } from 'react';\n\nimport {\n AppShellDrawerContext,\n Banner,\n Button,\n Flex,\n Form,\n Input,\n Option,\n Select\n} from '@pega/cosmos-react-core';\nimport { type UserAvailabilityStatusOption, CTIPanel } from '@pega/cosmos-react-cs';\n\nimport { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';\nimport {\n CallControlPanelDemo,\n ExternalCTIDemo\n} from '../CallControlPanel/CallControlPanel.stories';\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 onCancel: () => void;\n}\n\nexport const CallLoginForm: FunctionComponent<LoginFormProps> = ({\n ctiLinkOptions,\n onLogin,\n onCancel\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 key='cancel' name='cancel' variant='secondary' onClick={onCancel}>\n Cancel\n </Button>\n <Button\n key='submit'\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};\n\nexport const CTIControlPanelContext = createContext<{\n type: 'internal' | 'external';\n draggable?: boolean;\n applyAppStyling: boolean;\n}>({\n type: 'internal',\n draggable: true,\n applyAppStyling: false\n});\n\nexport const CTIControlPanel: FunctionComponent = () => {\n const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n userStatusOptions[0] as UserAvailabilityStatusOption\n );\n const [callPanelVisible, setCallPanelVisible] = useState(false);\n const { type, draggable, applyAppStyling } = useContext(CTIControlPanelContext);\n const { openDrawer, closeDrawer } = useContext(AppShellDrawerContext);\n\n const 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[0]);\n setCallPanelVisible(true);\n closeDrawer();\n return Promise.resolve(undefined);\n }}\n onCancel={closeDrawer}\n />\n </Flex>\n );\n const drawerHeader = 'Pega Call Log In';\n\n return (\n <>\n <CTIPanel\n visible={callPanelVisible}\n status={agentStatus}\n onClick={() => {\n if (agentStatus.status === 'logout')\n openDrawer({\n drawerHeader,\n drawerView,\n name: drawerHeader\n });\n else setCallPanelVisible(prev => !prev);\n }}\n >\n {type === 'internal' ? (\n <CallControlPanelDemo\n heading='Agent'\n status={agentStatus.id}\n onStatusChange={status => {\n setAgentStatus(status);\n if (status.status === 'logout') setCallPanelVisible(false);\n }}\n isDraggable={draggable}\n visible={callPanelVisible}\n />\n ) : (\n <ExternalCTIDemo\n heading='External CTI'\n isDraggable={draggable}\n visible={callPanelVisible}\n applyAppStyling={applyAppStyling}\n />\n )}\n </CTIPanel>\n </>\n );\n};\n\nexport const AppShellMockData = {\n notifications: [\n {\n id: '123',\n primary:\n \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n secondary: 'BUG-12345',\n visual: 'Dean Thomas',\n unread: true\n },\n {\n id: '456',\n primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n visual: 'Seth DeAngelo',\n secondary: 'BUG-12345',\n unread: true\n },\n {\n id: '789',\n primary:\n \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: 'BUG-12345',\n visual: 'Janet Moore',\n unread: true\n },\n {\n id: '000',\n primary: 'You have been awarded Employee of the Month! Congratulations!',\n secondary: '',\n visual: 'Cindy Turner',\n unread: true\n }\n ],\n recents: [\n {\n id: '123',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: 'BUG-12345'\n },\n {\n id: '456',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n secondary: 'BUG-00000'\n },\n {\n id: '789',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: 'BUG-00000'\n },\n {\n id: '111',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: 'BUG-12345'\n },\n {\n id: '222',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n secondary: 'BUG-00000'\n },\n {\n id: '333',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: 'BUG-00000'\n },\n {\n id: '444',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: 'BUG-12345'\n },\n {\n id: '555',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n secondary: 'BUG-00000'\n },\n {\n id: '666',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: 'BUG-00000'\n }\n ],\n 'Phone Interaction': {\n caseId: 'Customer',\n heading: 'Ginger Ventura',\n primaryFields: [\n {\n id: '0',\n name: 'Lifetime value',\n value: 'Gold'\n },\n {\n id: '1',\n name: 'Interaction type',\n value: 'Phone'\n },\n {\n id: '2',\n name: 'Churn risk',\n value: 'Low'\n },\n {\n id: '3',\n name: 'Status',\n value: 'Open'\n }\n ],\n secondaryFields: [\n {\n id: '0',\n name: 'Status',\n value: 'Verified'\n },\n {\n id: '1',\n name: 'Web login',\n value: 'Today'\n },\n {\n id: '2',\n name: 'Customer since',\n value: 'July 2018'\n },\n {\n id: '3',\n name: 'Address',\n value: '2213b Gormand street'\n }\n ]\n },\n 'Chat Interaction': {\n caseId: 'Customer',\n heading: 'Sara Davis',\n primaryFields: [\n {\n id: '0',\n name: 'Lifetime value',\n value: 'Silver'\n },\n {\n id: '1',\n name: 'Interaction type',\n value: 'Chat'\n },\n {\n id: '2',\n name: 'Churn risk',\n value: 'High'\n },\n {\n id: '3',\n name: 'Status',\n value: 'Open'\n }\n ],\n secondaryFields: [\n {\n id: '0',\n name: 'Status',\n value: 'Verified'\n },\n {\n id: '1',\n name: 'Web login',\n value: 'Today'\n },\n {\n id: '2',\n name: 'Customer since',\n value: 'March 2005'\n },\n {\n id: '3',\n name: 'Address',\n value: '340 River'\n }\n ]\n },\n 'Mail Interaction': {\n caseId: 'Customer',\n heading: 'John Brown',\n primaryFields: [\n {\n id: '0',\n name: 'Lifetime value',\n value: 'Bronze'\n },\n {\n id: '1',\n name: 'Interaction type',\n value: 'Mail'\n },\n {\n id: '2',\n name: 'Churn risk',\n value: 'Medium'\n },\n {\n id: '3',\n name: 'Status',\n value: 'Open'\n }\n ],\n secondaryFields: [\n {\n id: '0',\n name: 'Status',\n value: 'Verified'\n },\n {\n id: '1',\n name: 'Web login',\n value: 'Today'\n },\n {\n id: '2',\n name: 'Customer since',\n value: 'March 1995'\n },\n {\n id: '3',\n name: 'Address',\n value: '340 River'\n }\n ]\n }\n};\n"]}

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

@@ -1,45 +1,13 @@
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { InteractionTimerStoryProps } from '../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;
-            };
-        };
-    };
-};
+declare const _default: Meta<import("@storybook/react").Args>;
 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'];
+    ctiPanel: 'internal' | 'external';
+    applyThemeToExternalCTI: boolean;
 }
 export declare const CSAppShell: Story<CSAppShellProps>;
 //# sourceMappingURL=CSAppShell.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"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;~~AA2BzC~~,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQtD~~,~~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"}
1	+ {"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAyB/C,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;AAMtD,wBAmBU;AAEV,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;IACpD,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAmQ7C,CAAC"}