@pega/cosmos-react-demos 4.0.0-dev.17.1 → 4.0.0-dev.18.0

package/jsx/cs/Article/Article.mocks.js

@@ -1,11 +1,11 @@
 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>",
+        header: 'How to change monthly billing cycle',
+        abstract: 'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',
+        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><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><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><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',
+            publishedDate: '2023-04-06',
             likes: 124,
             disLikes: 47
         }

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

@@ -1 +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"]}
+{"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,qCAAqC;QAC7C,QAAQ,EACN,kGAAkG;QACpG,OAAO,EACL,k9EAAk9E;QACp9E,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: 'How to change monthly billing cycle',\n    abstract:\n      'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',\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><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><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><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: '2023-04-06',\n      likes: 124,\n      disLikes: 47\n    }\n  }\n};\n"]}

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

@@ -1,6 +1,17 @@
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
-export declare const ArticleStory: Story;
-export declare const ArticleStorySkeletonize: Story;
+export interface ArticleDemoProps {
+    showHeader: boolean;
+    backButtonText: string;
+    showPrimaryActions: boolean;
+    showSecondaryActions: boolean;
+    showFooter: boolean;
+    enableFeedback: boolean;
+    showTags: boolean;
+    showRelatedLinks: boolean;
+    showMoreLikeThis: boolean;
+    showAttachments: boolean;
+}
+export declare const ArticleStory: Story<ArticleDemoProps>;
 //# sourceMappingURL=Article.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAOU;AAEV,eAAO,MAAM,YAAY,EAAE,KA2G1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAwCrC,CAAC"}
+{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAOU;AAEV,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAgMhD,CAAC"}

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

@@ -1,5 +1,6 @@
+import { useEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';
+import { registerIcon, createUID, HTML } 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';
@@ -16,111 +17,185 @@ export default {
         layout: 'fullscreen'
     }
 };
-export const ArticleStory = () => {
+export const ArticleStory = (args) => {
+    const [feedbackStatus, setFeedbackStatus] = useState();
+    const [showFeedbackThanks, setShowFeedbackThanks] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const { showHeader, backButtonText, showPrimaryActions, showSecondaryActions, showFooter, enableFeedback, showTags, showRelatedLinks, showMoreLikeThis, showAttachments } = args;
     const onBackToArticlesClick = (event) => {
         event.preventDefault();
     };
+    const onFeedbackClick = button => {
+        if (button === 'like') {
+            if (feedbackStatus === 'liked') {
+                setFeedbackStatus(undefined);
+            }
+            else {
+                setFeedbackStatus('liked');
+                setShowFeedbackThanks(true);
+            }
+        }
+        else if (feedbackStatus === 'disliked') {
+            setFeedbackStatus(undefined);
+        }
+        else {
+            setFeedbackStatus('disliked');
+            setShowFeedbackThanks(true);
+        }
+    };
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
     return (<div style={{
-            maxWidth: '31.25rem',
-            maxHeight: '100vh'
+            maxWidth: '25rem'
         }}>
-      <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'
+      <Article header={showHeader
+            ? {
+                title: 'Knowledge articles',
+                icon: 'book-open'
             }
-        ]} 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'
-                },
+            : undefined} backNavigation={{
+            title: backButtonText,
+            onClick: onBackToArticlesClick
+        }} primaryActions={showPrimaryActions
+            ? [
                 {
-                    id: 'difficult_customers',
-                    tagName: '#Difficult_customers'
+                    icon: 'star',
+                    label: 'Follow',
+                    id: createUID(),
+                    onClick: id => {
+                        action('Follow')(id);
+                    }
                 },
                 {
-                    id: '223444',
-                    tagName: '#CSR_Skills'
-                },
-                {
-                    id: '223446',
-                    tagName: '#Premium_Customers'
-                },
+                    icon: 'open',
+                    label: 'Open',
+                    id: createUID(),
+                    onClick: id => {
+                        action('Open')(id);
+                    }
+                }
+            ]
+            : undefined} secondaryActions={showSecondaryActions
+            ? [
                 {
-                    id: '223447',
-                    tagName: '#Rare_Customers'
+                    text: 'Send in email',
+                    id: 'action1',
+                    onClick: action('Action')
                 },
                 {
-                    id: '223448',
-                    tagName: '#Finance_Customers'
+                    text: 'Send in chat',
+                    id: 'action2',
+                    onClick: action('Action')
                 }
-            ]} 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'
+            ]
+            : undefined} content={<HTML content={ArticleMockData.fullArticleContent.content}/>} title={ArticleMockData.fullArticleContent.header} meta={{
+            category: ArticleMockData.fullArticleContent.meta.category,
+            publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate,
+            feedback: {
+                likes: ArticleMockData.fullArticleContent.meta.likes,
+                dislikes: ArticleMockData.fullArticleContent.meta.disLikes
+            }
+        }} footer={showFooter
+            ? {
+                feedback: enableFeedback
+                    ? {
+                        showThanksMessage: showFeedbackThanks,
+                        status: feedbackStatus,
+                        onFeedbackClick
+                    }
+                    : undefined,
+                tags: showTags
+                    ? {
+                        list: [
+                            {
+                                id: 'Retail banking',
+                                tagName: '#Retail_banking'
+                            },
+                            {
+                                id: 'Billing',
+                                tagName: '#Billing'
+                            },
+                            {
+                                id: '223444',
+                                tagName: '#CSR_Skills'
+                            },
+                            {
+                                id: '223446',
+                                tagName: '#Premium_Customers'
+                            },
+                            {
+                                id: '223447',
+                                tagName: '#Rare_Customers'
+                            },
+                            {
+                                id: '223448',
+                                tagName: '#Finance_Customers'
+                            }
+                        ],
+                        onTagClick: action('Tag clicked')
+                    }
+                    : undefined,
+                relatedLinks: showRelatedLinks
+                    ? [
+                        { title: 'Retail banking for beginners', href: 'https://pega.com' },
+                        { title: 'How to handle premium customers', href: 'https://pega.com' }
+                    ]
+                    : undefined,
+                relatedArticles: showMoreLikeThis
+                    ? [
+                        {
+                            title: 'What are the implications of change in billing cycle',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        },
+                        {
+                            title: 'What is the best billing cycle for premium customers',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        },
+                        {
+                            title: 'How to enable automatic bill payment',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        }
+                    ]
+                    : undefined,
+                attachments: showAttachments
+                    ? [
+                        { name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },
+                        { name: 'Training video.mp4', onDownload: action('On Download') },
+                        { name: 'Terms and conditions.pdf', onDownload: action('On Download') }
+                    ]
+                    : undefined
             }
-        ]}/>
+            : undefined} loading={loading}/>
     </div>);
 };
+ArticleStory.args = {
+    showHeader: true,
+    backButtonText: 'Back to all articles',
+    showPrimaryActions: true,
+    showSecondaryActions: true,
+    showFooter: true,
+    enableFeedback: true,
+    showTags: true,
+    showRelatedLinks: true,
+    showMoreLikeThis: true,
+    showAttachments: true
+};
+ArticleStory.argTypes = {
+    showHeader: { control: { type: 'boolean' } },
+    backButtonText: { control: { type: 'text' } },
+    showPrimaryActions: { control: { type: 'boolean' } },
+    showSecondaryActions: { control: { type: 'boolean' } },
+    showFooter: { control: { type: 'boolean' } },
+    enableFeedback: { control: { type: 'boolean' } },
+    showTags: { control: { type: 'boolean' } },
+    showRelatedLinks: { control: { type: 'boolean' } },
+    showMoreLikeThis: { control: { type: 'boolean' } },
+    showAttachments: { control: { type: 'boolean' } }
+};
 //# sourceMappingURL=Article.stories.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,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;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,MAAM,qBAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,OAAO;SACnB,CAAC,CAEF;MAAA,CAAC,OAAO,CACN,UAAU,CAAC,CACT,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAC5C;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAChD;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EACvB;cAAA,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAClC;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD,cAAc,CAAC,CACb,EACE;YAAA,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC7C;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;YAAA,EAAE,MAAM,CACR;YAAA,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC7C;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;YAAA,EAAE,MAAM,CACV;UAAA,GAAG,CACJ,CACD,gBAAgB,CAAC,CAAC;YAChB;gBACE,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,KAAK;aACV;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,KAAK;aACV;SACF,CAAC,CACF,OAAO,CAAC,CAGN,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAG,CACzF,CACD,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,KAAK,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,MAAM,CAAC,CACjD,IAAI,CAAC,CAAC;YACJ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,UAAU,CAC7C;YAAA,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CACnD;UAAA,EAAE,IAAI,CAAC;YACP,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CACnD;YAAA,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CACxD;UAAA,EAAE,IAAI,CAAC;YACP,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAChD;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAChD;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAC5B;cAAA,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAClF;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAChD;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAC9B;cAAA,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CACzB;iBAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;cACrD,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC;SACR,CAAC,CACF,MAAM,CAAC,CACL,CAAC,aAAa,CACZ,OAAO,CAAC,CACN,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;gBAAA,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAE,CAAA,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAE,CAAA,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CACzE;cAAA,EAAE,IAAI,CAAC,CACR,CACD,IAAI,CAAC,CAAC;gBACJ;oBACE,EAAE,EAAE,gBAAgB;oBACpB,OAAO,EAAE,iBAAiB;iBAC3B;gBACD;oBACE,EAAE,EAAE,qBAAqB;oBACzB,OAAO,EAAE,sBAAsB;iBAChC;gBACD;oBACE,EAAE,EAAE,QAAQ;oBACZ,OAAO,EAAE,aAAa;iBACvB;gBACD;oBACE,EAAE,EAAE,QAAQ;oBACZ,OAAO,EAAE,oBAAoB;iBAC9B;gBACD;oBACE,EAAE,EAAE,QAAQ;oBACZ,OAAO,EAAE,iBAAiB;iBAC3B;gBACD;oBACE,EAAE,EAAE,QAAQ;oBACZ,OAAO,EAAE,oBAAoB;iBAC9B;aACF,CAAC,CACF,UAAU,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAClC,CACH,EAEL;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,qBAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CACvD;MAAA,CAAC,OAAO,CACN,WAAW,CACX,UAAU,CAAC,CACT,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAC5C;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAChD;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EACvB;cAAA,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAC9B;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD,cAAc,CAAC,CACb,EACE;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC3B;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;YAAA,EAAE,MAAM,CACR;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAC3B;cAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;YAAA,EAAE,MAAM,CACV;UAAA,GAAG,CACJ,CACD,gBAAgB,CAAC,CAAC;YAChB;gBACE,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,KAAK;aACV;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,EAAE,EAAE,KAAK;aACV;SACF,CAAC,EAEN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","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"]}
+{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useEffect, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { registerIcon, createUID, HTML } 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, ArticleFooterProps } 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 interface ArticleDemoProps {\n  showHeader: boolean;\n  backButtonText: string;\n  showPrimaryActions: boolean;\n  showSecondaryActions: boolean;\n  showFooter: boolean;\n  enableFeedback: boolean;\n  showTags: boolean;\n  showRelatedLinks: boolean;\n  showMoreLikeThis: boolean;\n  showAttachments: boolean;\n}\n\nexport const ArticleStory: Story<ArticleDemoProps> = (args: ArticleDemoProps) => {\n  const [feedbackStatus, setFeedbackStatus] =\n    useState<Required<ArticleFooterProps>['feedback']['status']>();\n  const [showFeedbackThanks, setShowFeedbackThanks] = useState<boolean>(false);\n  const [loading, setLoading] = useState<boolean>(true);\n\n  const {\n    showHeader,\n    backButtonText,\n    showPrimaryActions,\n    showSecondaryActions,\n    showFooter,\n    enableFeedback,\n    showTags,\n    showRelatedLinks,\n    showMoreLikeThis,\n    showAttachments\n  } = args;\n\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const onFeedbackClick: Required<ArticleFooterProps>['feedback']['onFeedbackClick'] = button => {\n    if (button === 'like') {\n      if (feedbackStatus === 'liked') {\n        setFeedbackStatus(undefined);\n      } else {\n        setFeedbackStatus('liked');\n        setShowFeedbackThanks(true);\n      }\n    } else if (feedbackStatus === 'disliked') {\n      setFeedbackStatus(undefined);\n    } else {\n      setFeedbackStatus('disliked');\n      setShowFeedbackThanks(true);\n    }\n  };\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  }, []);\n\n  return (\n    <div\n      style={{\n        maxWidth: '25rem'\n      }}\n    >\n      <Article\n        header={\n          showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: 'book-open'\n              }\n            : undefined\n        }\n        backNavigation={{\n          title: backButtonText,\n          onClick: onBackToArticlesClick\n        }}\n        primaryActions={\n          showPrimaryActions\n            ? [\n                {\n                  icon: 'star',\n                  label: 'Follow',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Follow')(id);\n                  }\n                },\n                {\n                  icon: 'open',\n                  label: 'Open',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Open')(id);\n                  }\n                }\n              ]\n            : undefined\n        }\n        secondaryActions={\n          showSecondaryActions\n            ? [\n                {\n                  text: 'Send in email',\n                  id: 'action1',\n                  onClick: action('Action')\n                },\n                {\n                  text: 'Send in chat',\n                  id: 'action2',\n                  onClick: action('Action')\n                }\n              ]\n            : undefined\n        }\n        content={<HTML content={ArticleMockData.fullArticleContent.content} />}\n        title={ArticleMockData.fullArticleContent.header}\n        meta={{\n          category: ArticleMockData.fullArticleContent.meta.category,\n          publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate,\n          feedback: {\n            likes: ArticleMockData.fullArticleContent.meta.likes,\n            dislikes: ArticleMockData.fullArticleContent.meta.disLikes\n          }\n        }}\n        footer={\n          showFooter\n            ? {\n                feedback: enableFeedback\n                  ? {\n                      showThanksMessage: showFeedbackThanks,\n                      status: feedbackStatus,\n                      onFeedbackClick\n                    }\n                  : undefined,\n                tags: showTags\n                  ? {\n                      list: [\n                        {\n                          id: 'Retail banking',\n                          tagName: '#Retail_banking'\n                        },\n                        {\n                          id: 'Billing',\n                          tagName: '#Billing'\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                  : undefined,\n                relatedLinks: showRelatedLinks\n                  ? [\n                      { title: 'Retail banking for beginners', href: 'https://pega.com' },\n                      { title: 'How to handle premium customers', href: 'https://pega.com' }\n                    ]\n                  : undefined,\n                relatedArticles: showMoreLikeThis\n                  ? [\n                      {\n                        title: 'What are the implications of change in billing cycle',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'What is the best billing cycle for premium customers',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'How to enable automatic bill payment',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      }\n                    ]\n                  : undefined,\n                attachments: showAttachments\n                  ? [\n                      { name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },\n                      { name: 'Training video.mp4', onDownload: action('On Download') },\n                      { name: 'Terms and conditions.pdf', onDownload: action('On Download') }\n                    ]\n                  : undefined\n              }\n            : undefined\n        }\n        loading={loading}\n      />\n    </div>\n  );\n};\n\nArticleStory.args = {\n  showHeader: true,\n  backButtonText: 'Back to all articles',\n  showPrimaryActions: true,\n  showSecondaryActions: true,\n  showFooter: true,\n  enableFeedback: true,\n  showTags: true,\n  showRelatedLinks: true,\n  showMoreLikeThis: true,\n  showAttachments: true\n};\n\nArticleStory.argTypes = {\n  showHeader: { control: { type: 'boolean' } },\n  backButtonText: { control: { type: 'text' } },\n  showPrimaryActions: { control: { type: 'boolean' } },\n  showSecondaryActions: { control: { type: 'boolean' } },\n  showFooter: { control: { type: 'boolean' } },\n  enableFeedback: { control: { type: 'boolean' } },\n  showTags: { control: { type: 'boolean' } },\n  showRelatedLinks: { control: { type: 'boolean' } },\n  showMoreLikeThis: { control: { type: 'boolean' } },\n  showAttachments: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1,21 +1,140 @@
-export declare const ArticleListMockData: {
-    articleList: {
+export declare const suggestedMock: {
+    count: number;
+    articles: ({
         articleId: string;
-        header: string;
+        title: string;
+        href: string;
         abstract: string;
         meta: {
             category: string;
             publishedDate: string;
-            likes: number;
-            disLikes: number;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
         };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters?: undefined;
+    } | {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
+    })[];
+};
+export declare const followedMock: {
+    count: number;
+    articles: ({
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
+    } | {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters?: undefined;
+    })[];
+    category: ({
+        id: string;
+        primary: string;
+        secondary: string[];
+        items: {
+            id: string;
+            primary: string;
+            secondary: string[];
+        }[];
+    } | {
+        id: string;
+        primary: string;
+        secondary: string[];
+        items?: undefined;
+    })[];
+    sortBy: {
+        id: string;
+        primary: string;
+    }[];
+};
+export declare const searchMock: {
+    count: number;
+    articles: {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
     }[];
-    categoriesList: {
+    category: ({
+        id: string;
+        primary: string;
+        secondary: string[];
+        items: {
+            id: string;
+            primary: string;
+            secondary: string[];
+        }[];
+    } | {
+        id: string;
+        primary: string;
+        secondary: string[];
+        items?: undefined;
+    })[];
+    sortBy: {
         id: string;
-        name: string;
-        level: string;
-        category: string;
+        primary: string;
     }[];
-    sortByOptions: string[];
 };
 //# sourceMappingURL=ArticleList.mocks.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ArticleList.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJzB,CAAC;AACF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKxB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHtB,CAAC"}