@pega/cosmos-react-demos 2.0.0

package/lib/core/Tree/Tree.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,eAAO,MAAM,cAAc,EAAE,OAAO,IAMnC,CAAC"}

package/lib/core/Tree/Tree.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Tree } from '@pega/cosmos-react-core';
+export const StyledBaseTree = styled(Tree) `
+  &,
+  & ul {
+    padding: revert;
+    list-style: revert;
+  }
+`;
+//# sourceMappingURL=Tree.styles.js.map

package/lib/core/Tree/Tree.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.styles.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMtD,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Tree } from '@pega/cosmos-react-core';\n\nexport const StyledBaseTree: typeof Tree = styled(Tree)`\n  &,\n  & ul {\n    padding: revert;\n    list-style: revert;\n  }\n`;\n"]}

package/lib/core/URL/URL.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { URLDisplayProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const URLDisplayDemo: Story<URLDisplayProps>;
+//# sourceMappingURL=URL.stories.d.ts.map

package/lib/core/URL/URL.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"URL.stories.d.ts","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEtE,wBAGU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAEjD,CAAC"}

package/lib/core/URL/URL.stories.jsx

@@ -0,0 +1,17 @@
+import { URLDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/URL',
+    component: URLDisplay
+};
+export const URLDisplayDemo = (args) => (<URLDisplay value={args.value} displayText={args.displayText} variant={args.variant}/>);
+URLDisplayDemo.args = {
+    value: 'https://www.google.com/',
+    displayText: 'Example URL',
+    variant: 'link'
+};
+URLDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    displayText: { control: { type: 'text' } },
+    variant: { options: ['link', 'text'], control: { type: 'select' } }
+};
+//# sourceMappingURL=URL.stories.jsx.map

package/lib/core/URL/URL.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"URL.stories.jsx","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAC/E,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,CACxF,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { URLDisplay, URLDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/URL',\n  component: URLDisplay\n} as Meta;\n\nexport const URLDisplayDemo: Story<URLDisplayProps> = (args: URLDisplayProps) => (\n  <URLDisplay value={args.value} displayText={args.displayText} variant={args.variant} />\n);\n\nURLDisplayDemo.args = {\n  value: 'https://www.google.com/',\n  displayText: 'Example URL',\n  variant: 'link'\n};\n\nURLDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  displayText: { control: { type: 'text' } },\n  variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}

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

@@ -0,0 +1,14 @@
+export declare const ArticleMockData: {
+    fullArticleContent: {
+        header: string;
+        abstract: string;
+        content: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            likes: number;
+            disLikes: number;
+        };
+    };
+};
+//# sourceMappingURL=Article.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;CAc3B,CAAC"}

package/lib/cs/Article/Article.mocks.js

@@ -0,0 +1,14 @@
+export const ArticleMockData = {
+    fullArticleContent: {
+        header: '5 Tips for handling a Difficult customer',
+        abstract: '5 Tips for handling a Difficult customer. This will give you clear guidelines to deal with a customer',
+        content: "<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><br/><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><br/><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><br/><div><b>Before you change your billing cycle, be aware that:</b> </div><br/><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><br/><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>",
+        meta: {
+            category: 'Banking and Retail',
+            publishedDate: '12/12/2019',
+            likes: 124,
+            disLikes: 47
+        }
+    }
+};
+//# sourceMappingURL=Article.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.mocks.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,kBAAkB,EAAE;QAClB,MAAM,EAAE,0CAA0C;QAClD,QAAQ,EACN,uGAAuG;QACzG,OAAO,EACL,2+EAA2+E;QAC7+E,IAAI,EAAE;YACJ,QAAQ,EAAE,oBAAoB;YAC9B,aAAa,EAAE,YAAY;YAC3B,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,EAAE;SACb;KACF;CACF,CAAC","sourcesContent":["export const ArticleMockData = {\n  fullArticleContent: {\n    header: '5 Tips for handling a Difficult customer',\n    abstract:\n      '5 Tips for handling a Difficult customer. This will give you clear guidelines to deal with a customer',\n    content:\n      \"<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><br/><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><br/><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><br/><div><b>Before you change your billing cycle, be aware that:</b> </div><br/><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><br/><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>\",\n    meta: {\n      category: 'Banking and Retail',\n      publishedDate: '12/12/2019',\n      likes: 124,\n      disLikes: 47\n    }\n  }\n};\n"]}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleProps & import("@pega/cosmos-react-core").ForwardProps>;
+    subcomponents: {
+        ArticleFooter: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleFooterProps & import("@pega/cosmos-react-core").ForwardProps>;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const ArticleStory: () => JSX.Element;
+export declare const ArticleStorySkeletonize: () => JSX.Element;
+//# sourceMappingURL=Article.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAeA,wBAOE;AAEF,eAAO,MAAM,YAAY,mBA2GxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAwCnC,CAAC"}

package/lib/cs/Article/Article.stories.jsx

@@ -0,0 +1,126 @@
+import { action } from '@storybook/addon-actions';
+import { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';
+import * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
+import * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';
+import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
+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 { Article, ArticleFooter } from '@pega/cosmos-react-cs';
+import { ArticleMockData } from './Article.mocks';
+registerIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);
+export default {
+    title: 'Customer Service/Article',
+    component: Article,
+    subcomponents: { ArticleFooter },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ArticleStory = () => {
+    const onBackToArticlesClick = (event) => {
+        event.preventDefault();
+    };
+    return (<div style={{
+            maxWidth: '31.25rem',
+            maxHeight: '100vh'
+        }}>
+      <Article navigation={<Link href='/' onClick={onBackToArticlesClick}>
+            <Flex container={{ alignItems: 'center', gap: 1 }}>
+              <Icon name='caret-left'/>
+              <Text>Back to all articles</Text>
+            </Flex>
+          </Link>} primaryActions={<>
+            <Button aria-label='star' variant='simple' icon>
+              <Icon name='star'/>
+            </Button>
+            <Button aria-label='open' variant='simple' icon>
+              <Icon name='open'/>
+            </Button>
+          </>} secondaryActions={[
+            {
+                text: 'Filter 1',
+                id: 'f1a'
+            },
+            {
+                text: 'Filter 2',
+                id: 'f2a'
+            }
+        ]} content={<div dangerouslySetInnerHTML={{ __html: ArticleMockData.fullArticleContent.content }}/>} skeletonize={false} title={ArticleMockData.fullArticleContent.header} meta={[
+            <Text variant='secondary' aria-label='category'>
+            {ArticleMockData.fullArticleContent.meta.category}
+          </Text>,
+            <Text variant='secondary' aria-label='published date'>
+            {ArticleMockData.fullArticleContent.meta.publishedDate}
+          </Text>,
+            <Flex container={{ gap: 2, alignItems: 'center' }}>
+            <Flex container={{ gap: 1, alignItems: 'center' }}>
+              <Icon name='thumbs-up-solid'/>
+              <Text aria-label='likes'>({ArticleMockData.fullArticleContent.meta.likes})</Text>
+            </Flex>
+            <Flex container={{ gap: 1, alignItems: 'center' }}>
+              <Icon name='thumbs-down-solid'/>
+              <Text aria-label='dislikes'>
+                ({ArticleMockData.fullArticleContent.meta.disLikes})
+              </Text>
+            </Flex>
+          </Flex>
+        ]} footer={<ArticleFooter content={<Flex container={{ gap: 1 }}>
+                <Text>Was this helpful ?</Text> <Button>Yes</Button> <Button>No</Button>
+              </Flex>} tags={[
+                {
+                    id: 'Retail banking',
+                    tagName: '#Retail_banking'
+                },
+                {
+                    id: 'difficult_customers',
+                    tagName: '#Difficult_customers'
+                },
+                {
+                    id: '223444',
+                    tagName: '#CSR_Skills'
+                },
+                {
+                    id: '223446',
+                    tagName: '#Premium_Customers'
+                },
+                {
+                    id: '223447',
+                    tagName: '#Rare_Customers'
+                },
+                {
+                    id: '223448',
+                    tagName: '#Finance_Customers'
+                }
+            ]} onTagClick={action('Tag clicked')}/>}/>
+    </div>);
+};
+export const ArticleStorySkeletonize = () => {
+    const onBackToArticlesClick = (event) => {
+        event.preventDefault();
+    };
+    return (<div style={{ maxWidth: '31.25rem', maxHeight: '100vh' }}>
+      <Article skeletonize navigation={<Link href='/' onClick={onBackToArticlesClick}>
+            <Flex container={{ alignItems: 'center', gap: 1 }}>
+              <Icon name='caret-left'/>
+              <Text>Back to articles</Text>
+            </Flex>
+          </Link>} primaryActions={<>
+            <Button variant='simple' icon>
+              <Icon name='star'/>
+            </Button>
+            <Button variant='simple' icon>
+              <Icon name='open'/>
+            </Button>
+          </>} secondaryActions={[
+            {
+                text: 'Filter 1',
+                id: 'f1a'
+            },
+            {
+                text: 'Filter 2',
+                id: 'f2a'
+            }
+        ]}/>
+    </div>);
+};
+//# sourceMappingURL=Article.stories.jsx.map

package/lib/cs/Article/Article.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article.stories.jsx","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';\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"]}

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

@@ -0,0 +1,21 @@
+export declare const ArticleListMockData: {
+    articleList: {
+        articleId: string;
+        header: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            likes: number;
+            disLikes: number;
+        };
+    }[];
+    categoriesList: {
+        id: string;
+        name: string;
+        level: string;
+        category: string;
+    }[];
+    sortByOptions: string[];
+};
+//# sourceMappingURL=ArticleList.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;CA4G/B,CAAC"}

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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+/// <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

@@ -0,0 +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"}

package/lib/cs/ArticleList/ArticleList.stories.jsx

@@ -0,0 +1,110 @@
+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: <Icon name='help'/>,
+        headerText: 'Knowledge articles',
+        primary: {
+            search: (<SearchInput value={query} onChange={(event) => setQuery(event.target.value)} onSearchChange={action('Search query')} onSearchSubmit={action('Search submit')} placeholder='Search…'/>),
+            actions: [
+                { text: 'Option Number 1', id: '1a' },
+                { text: 'Option Number 2', id: '2a' }
+            ],
+            followedFilter: (<Flex container={{ gap: 1 }}>
+          <MenuButton variant='simple' menu={{
+                    items: [
+                        {
+                            primary: 'Filter 1',
+                            id: 'f1a'
+                        },
+                        {
+                            primary: 'Filter 2',
+                            id: 'f2a'
+                        }
+                    ]
+                }} icon='filter' text='filter' iconOnly/>
+        </Flex>)
+        },
+        secondary: (<>
+        <FormField label='Category'>
+          <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 });
+                }
+            }}/>
+        </FormField>
+        <Select label='Sort by'>
+          {ArticleListMockData.sortByOptions.map(opt => (<Option key={opt}>{opt}</Option>))}
+        </Select>
+      </>)
+    };
+    return (<div style={{
+            width: '31.25rem',
+            maxHeight: '100vh'
+        }}>
+      <ArticleList skeletonize={false} header={<ArticleListHeader icon={ALHeader.icon} headerText={ALHeader.headerText} primary={ALHeader.primary} secondary={ALHeader.secondary} onSubmit={action('Filter details submitted')}/>} footer={<Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>
+            <Pagination total={70} pageNumber={currentPage} onPageChange={pageNumber => {
+                setCurrentPage(pageNumber);
+            }}/>
+          </Flex>}>
+        {ArticleListMockData.articleList.map((dataItem, id) => {
+            return (<ArticleSummary key={id.toString()} header={<Link href='design.pega.com' data-article-id={dataItem.articleId} onClick={handleArticleLinkClick}>
+                  {dataItem.header}
+                </Link>} content={<Text>{dataItem.abstract}</Text>} articleID={`article-${id}`} meta={[
+                    <Text>{dataItem.meta.category}</Text>,
+                    dataItem.meta.publishedDate,
+                    <Flex container={{ gap: 2, alignItems: 'center' }}>
+                  <Flex container={{ gap: 1, alignItems: 'center' }}>
+                    <Icon name='thumbs-up-solid'/>
+                    <Text>({dataItem.meta.likes})</Text>
+                  </Flex>
+                  <Flex container={{ gap: 1, alignItems: 'center' }}>
+                    <Icon name='thumbs-down-solid'/>
+                    <Text>({dataItem.meta.disLikes})</Text>
+                  </Flex>
+                </Flex>
+                ]}/>);
+        })}
+      </ArticleList>
+    </div>);
+};
+export const ArticleListWithSkeleton = () => (<div style={{
+        maxWidth: '31.25rem',
+        maxHeight: '100vh'
+    }}>
+    <ArticleList skeletonize/>
+  </div>);
+//# sourceMappingURL=ArticleList.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.stories.jsx","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

@@ -0,0 +1,45 @@
+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