@pega/cosmos-react-demos 6.0.4 → 6.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jsx/core/Avatar/Avatar.stories.jsx +1 -3
- package/jsx/core/Avatar/Avatar.stories.jsx.map +1 -1
- package/jsx/core/CompositeInput/CompositeInput.stories.d.ts.map +1 -1
- package/jsx/core/CompositeInput/CompositeInput.stories.jsx +1 -1
- package/jsx/core/CompositeInput/CompositeInput.stories.jsx.map +1 -1
- package/jsx/core/CreditCard/CreditCard.stories.d.ts.map +1 -1
- package/jsx/core/CreditCard/CreditCard.stories.jsx +1 -1
- package/jsx/core/CreditCard/CreditCard.stories.jsx.map +1 -1
- package/jsx/core/DangerButton/DangerButton.stories.jsx +1 -1
- package/jsx/core/DangerButton/DangerButton.stories.jsx.map +1 -1
- package/jsx/core/Popover/Popover.stories.d.ts.map +1 -1
- package/jsx/core/Popover/Popover.stories.jsx +1 -1
- package/jsx/core/Popover/Popover.stories.jsx.map +1 -1
- package/jsx/social/Chat/Chat.stories.d.ts.map +1 -1
- package/jsx/social/Chat/Chat.stories.jsx +2 -3
- package/jsx/social/Chat/Chat.stories.jsx.map +1 -1
- package/jsx/social/Email/Email.stories.d.ts.map +1 -1
- package/jsx/social/Email/Email.stories.jsx +2 -1
- package/jsx/social/Email/Email.stories.jsx.map +1 -1
- package/jsx/work/Article/Article.stories.d.ts.map +1 -1
- package/jsx/work/Article/Article.stories.jsx +10 -11
- package/jsx/work/Article/Article.stories.jsx.map +1 -1
- package/jsx/work/CaseView/CaseView.stories.d.ts.map +1 -1
- package/jsx/work/CaseView/CaseView.stories.jsx +1 -1
- package/jsx/work/CaseView/CaseView.stories.jsx.map +1 -1
- package/lib/core/Avatar/Avatar.stories.js +1 -3
- package/lib/core/Avatar/Avatar.stories.js.map +1 -1
- package/lib/core/CompositeInput/CompositeInput.stories.d.ts.map +1 -1
- package/lib/core/CompositeInput/CompositeInput.stories.js +1 -1
- package/lib/core/CompositeInput/CompositeInput.stories.js.map +1 -1
- package/lib/core/CreditCard/CreditCard.stories.d.ts.map +1 -1
- package/lib/core/CreditCard/CreditCard.stories.js +1 -1
- package/lib/core/CreditCard/CreditCard.stories.js.map +1 -1
- package/lib/core/DangerButton/DangerButton.stories.js +1 -1
- package/lib/core/DangerButton/DangerButton.stories.js.map +1 -1
- package/lib/core/Popover/Popover.stories.d.ts.map +1 -1
- package/lib/core/Popover/Popover.stories.js +1 -1
- package/lib/core/Popover/Popover.stories.js.map +1 -1
- package/lib/social/Chat/Chat.stories.d.ts.map +1 -1
- package/lib/social/Chat/Chat.stories.js +2 -3
- package/lib/social/Chat/Chat.stories.js.map +1 -1
- package/lib/social/Email/Email.stories.d.ts.map +1 -1
- package/lib/social/Email/Email.stories.js +2 -1
- package/lib/social/Email/Email.stories.js.map +1 -1
- package/lib/work/Article/Article.stories.d.ts.map +1 -1
- package/lib/work/Article/Article.stories.js +10 -11
- package/lib/work/Article/Article.stories.js.map +1 -1
- package/lib/work/CaseView/CaseView.stories.d.ts.map +1 -1
- package/lib/work/CaseView/CaseView.stories.js +1 -1
- package/lib/work/CaseView/CaseView.stories.js.map +1 -1
- package/package.json +7 -7
|
@@ -20,7 +20,6 @@ export const ArticleStory = (args) => {
|
|
|
20
20
|
const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);
|
|
21
21
|
const [dislikeCount, setDislikeCount] = useState(ArticleMockData.fullArticleContent.feedback.disLikes);
|
|
22
22
|
const [reaction, setReaction] = useState(ArticleMockData.fullArticleContent.feedback.reaction);
|
|
23
|
-
const { showHeader, backButtonText, showPrimaryActions, showSecondaryActions, showFooter, enableFeedback, showTags, showRelatedLinks, showMoreLikeThis, showAttachments } = args;
|
|
24
23
|
const onBackToArticlesClick = (event) => {
|
|
25
24
|
event.preventDefault();
|
|
26
25
|
};
|
|
@@ -59,15 +58,15 @@ export const ArticleStory = (args) => {
|
|
|
59
58
|
return (<div style={{
|
|
60
59
|
maxWidth: '25rem'
|
|
61
60
|
}}>
|
|
62
|
-
<Article articleId={ArticleMockData.fullArticleContent.articleId} header={showHeader
|
|
61
|
+
<Article articleId={ArticleMockData.fullArticleContent.articleId} header={args.showHeader
|
|
63
62
|
? {
|
|
64
63
|
title: 'Knowledge articles',
|
|
65
64
|
icon: 'book-open'
|
|
66
65
|
}
|
|
67
66
|
: undefined} backNavigation={{
|
|
68
|
-
title: backButtonText,
|
|
67
|
+
title: args.backButtonText,
|
|
69
68
|
onClick: onBackToArticlesClick
|
|
70
|
-
}} primaryActions={showPrimaryActions
|
|
69
|
+
}} primaryActions={args.showPrimaryActions
|
|
71
70
|
? [
|
|
72
71
|
{
|
|
73
72
|
icon: 'star',
|
|
@@ -86,7 +85,7 @@ export const ArticleStory = (args) => {
|
|
|
86
85
|
}
|
|
87
86
|
}
|
|
88
87
|
]
|
|
89
|
-
: undefined} secondaryActions={showSecondaryActions
|
|
88
|
+
: undefined} secondaryActions={args.showSecondaryActions
|
|
90
89
|
? [
|
|
91
90
|
{
|
|
92
91
|
text: 'Send in email',
|
|
@@ -107,16 +106,16 @@ export const ArticleStory = (args) => {
|
|
|
107
106
|
dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),
|
|
108
107
|
reaction,
|
|
109
108
|
onReaction
|
|
110
|
-
}} footer={showFooter
|
|
109
|
+
}} footer={args.showFooter
|
|
111
110
|
? {
|
|
112
|
-
feedback: enableFeedback
|
|
111
|
+
feedback: args.enableFeedback
|
|
113
112
|
? {
|
|
114
113
|
onReaction,
|
|
115
114
|
showThanksMessage: !!reaction,
|
|
116
115
|
reaction
|
|
117
116
|
}
|
|
118
117
|
: undefined,
|
|
119
|
-
tags: showTags
|
|
118
|
+
tags: args.showTags
|
|
120
119
|
? {
|
|
121
120
|
list: [
|
|
122
121
|
{
|
|
@@ -147,13 +146,13 @@ export const ArticleStory = (args) => {
|
|
|
147
146
|
onTagClick: action('Tag clicked')
|
|
148
147
|
}
|
|
149
148
|
: undefined,
|
|
150
|
-
relatedLinks: showRelatedLinks
|
|
149
|
+
relatedLinks: args.showRelatedLinks
|
|
151
150
|
? [
|
|
152
151
|
{ title: 'Retail banking for beginners', href: 'https://pega.com' },
|
|
153
152
|
{ title: 'How to handle premium customers', href: 'https://pega.com' }
|
|
154
153
|
]
|
|
155
154
|
: undefined,
|
|
156
|
-
relatedArticles: showMoreLikeThis
|
|
155
|
+
relatedArticles: args.showMoreLikeThis
|
|
157
156
|
? [
|
|
158
157
|
{
|
|
159
158
|
title: 'What are the implications of change in billing cycle',
|
|
@@ -172,7 +171,7 @@ export const ArticleStory = (args) => {
|
|
|
172
171
|
}
|
|
173
172
|
]
|
|
174
173
|
: undefined,
|
|
175
|
-
attachments: showAttachments
|
|
174
|
+
attachments: args.showAttachments
|
|
176
175
|
? [
|
|
177
176
|
{ name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },
|
|
178
177
|
{ name: 'Training video.mp4', onDownload: action('On Download') },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon, createUID, HTML, Flex } 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 { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';\nimport type { ArticleProps, ArticleRatingProps } from '@pega/cosmos-react-work';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon);\n\nexport default {\n title: 'Work/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: StoryFn<ArticleDemoProps> = (args: ArticleDemoProps) => {\n const [loading, setLoading] = useState<boolean>(true);\n\n const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);\n const [dislikeCount, setDislikeCount] = useState(\n ArticleMockData.fullArticleContent.feedback.disLikes\n );\n const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>(\n ArticleMockData.fullArticleContent.feedback.reaction\n );\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 useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n }, []);\n\n const onReaction: Required<ArticleProps>['feedback']['onReaction'] = (id, reactionParam) => {\n action('onReaction')(id);\n if (reactionParam === 'liked') {\n setReaction('liked');\n setLikeCount(prev => prev + 1);\n\n if (reaction === 'disliked') {\n setDislikeCount(prev => prev - 1);\n }\n return;\n }\n\n if (reactionParam === 'disliked') {\n setReaction('disliked');\n setDislikeCount(prev => prev + 1);\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n }\n }\n\n if (reactionParam === undefined) {\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n } else {\n setDislikeCount(prev => prev - 1);\n }\n setReaction(undefined);\n }\n };\n\n return (\n <div\n style={{\n maxWidth: '25rem'\n }}\n >\n <Article\n articleId={ArticleMockData.fullArticleContent.articleId}\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 }}\n feedback={{\n likes: (likeCount * 100) / (likeCount + dislikeCount),\n dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),\n reaction,\n onReaction\n }}\n footer={\n showFooter\n ? {\n feedback: enableFeedback\n ? {\n onReaction,\n showThanksMessage: !!reaction,\n reaction\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\nexport const ArticleRatingDemo: StoryFn = () => {\n const [likeCount, setLikeCount] = useState(5);\n const [dislikeCount, setDislikeCount] = useState(2);\n const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>();\n\n const onReaction: ArticleRatingProps['onReaction'] = reactionParam => {\n if (reactionParam === 'liked') {\n // no reaction\n // already disliked and liking now\n setReaction('liked');\n setLikeCount(prev => prev + 1);\n if (reaction === 'disliked') {\n setDislikeCount(prev => prev - 1);\n }\n return;\n }\n\n if (reactionParam === 'disliked') {\n // Dislike clicked\n setReaction('disliked');\n setDislikeCount(prev => prev + 1);\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n }\n }\n\n if (reactionParam === undefined) {\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n } else {\n setDislikeCount(prev => prev - 1);\n }\n setReaction(undefined);\n }\n };\n\n return (\n <Flex container={{ pad: [1, 1] }}>\n <ArticleRating\n likes={(likeCount * 100) / (likeCount + dislikeCount)}\n dislikes={(dislikeCount * 100) / (likeCount + dislikeCount)}\n onReaction={onReaction}\n reaction={reaction}\n />\n </Flex>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon, createUID, HTML, Flex } 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 { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';\nimport type { ArticleProps, ArticleRatingProps } from '@pega/cosmos-react-work';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon);\n\nexport default {\n title: 'Work/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: StoryFn<ArticleDemoProps> = (args: ArticleDemoProps) => {\n const [loading, setLoading] = useState<boolean>(true);\n\n const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);\n const [dislikeCount, setDislikeCount] = useState(\n ArticleMockData.fullArticleContent.feedback.disLikes\n );\n const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>(\n ArticleMockData.fullArticleContent.feedback.reaction\n );\n\n const onBackToArticlesClick = (event: MouseEvent) => {\n event.preventDefault();\n };\n\n useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n }, []);\n\n const onReaction: Required<ArticleProps>['feedback']['onReaction'] = (id, reactionParam) => {\n action('onReaction')(id);\n if (reactionParam === 'liked') {\n setReaction('liked');\n setLikeCount(prev => prev + 1);\n\n if (reaction === 'disliked') {\n setDislikeCount(prev => prev - 1);\n }\n return;\n }\n\n if (reactionParam === 'disliked') {\n setReaction('disliked');\n setDislikeCount(prev => prev + 1);\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n }\n }\n\n if (reactionParam === undefined) {\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n } else {\n setDislikeCount(prev => prev - 1);\n }\n setReaction(undefined);\n }\n };\n\n return (\n <div\n style={{\n maxWidth: '25rem'\n }}\n >\n <Article\n articleId={ArticleMockData.fullArticleContent.articleId}\n header={\n args.showHeader\n ? {\n title: 'Knowledge articles',\n icon: 'book-open'\n }\n : undefined\n }\n backNavigation={{\n title: args.backButtonText,\n onClick: onBackToArticlesClick\n }}\n primaryActions={\n args.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 args.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 }}\n feedback={{\n likes: (likeCount * 100) / (likeCount + dislikeCount),\n dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),\n reaction,\n onReaction\n }}\n footer={\n args.showFooter\n ? {\n feedback: args.enableFeedback\n ? {\n onReaction,\n showThanksMessage: !!reaction,\n reaction\n }\n : undefined,\n tags: args.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: args.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: args.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: args.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\nexport const ArticleRatingDemo: StoryFn = () => {\n const [likeCount, setLikeCount] = useState(5);\n const [dislikeCount, setDislikeCount] = useState(2);\n const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>();\n\n const onReaction: ArticleRatingProps['onReaction'] = reactionParam => {\n if (reactionParam === 'liked') {\n // no reaction\n // already disliked and liking now\n setReaction('liked');\n setLikeCount(prev => prev + 1);\n if (reaction === 'disliked') {\n setDislikeCount(prev => prev - 1);\n }\n return;\n }\n\n if (reactionParam === 'disliked') {\n // Dislike clicked\n setReaction('disliked');\n setDislikeCount(prev => prev + 1);\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n }\n }\n\n if (reactionParam === undefined) {\n if (reaction === 'liked') {\n setLikeCount(prev => prev - 1);\n } else {\n setDislikeCount(prev => prev - 1);\n }\n setReaction(undefined);\n }\n };\n\n return (\n <Flex container={{ pad: [1, 1] }}>\n <ArticleRating\n likes={(likeCount * 100) / (likeCount + dislikeCount)}\n dislikes={(dislikeCount * 100) / (likeCount + dislikeCount)}\n onReaction={onReaction}\n reaction={reaction}\n />\n </Flex>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAE1D,wBAMU;AAEV,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAE1D,wBAMU;AAEV,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CA6BnD,CAAC"}
|
|
@@ -9,7 +9,7 @@ export default {
|
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
11
|
export const CaseViewDemo = (args) => {
|
|
12
|
-
return (<AppShellDemo appHeader main={<CaseViewMock {...args} defaultExpanded={!!args.defaultExpanded}/>}/>);
|
|
12
|
+
return (<AppShellDemo appHeader main={<CaseViewMock {...args} caseId={args.caseId} heading={args.heading} subheading={args.subheading} summaryFields={args.summaryFields} stages={args.stages} tasks={args.tasks} taskCount={args.taskCount} parentCases={args.parentCases} predictions={args.predictions} attachments={args.attachments} stakeholders={args.stakeholders} followers={args.followers} tags={args.tags} persistentUtility={args.persistentUtility} banner={args.banner} promotedActions={args.promotedActions} headingLength={args.headingLength} defaultExpanded={!!args.defaultExpanded}/>}/>);
|
|
13
13
|
};
|
|
14
14
|
CaseViewDemo.args = {
|
|
15
15
|
caseId: 'C-123456',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAA+B,CAAC,IAAuB,EAAE,EAAE;IAClF,OAAO,CACL,CAAC,YAAY,CACX,SAAS,CACT,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { CaseView } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { CaseViewMock } from './CaseView.mocks';\nimport type { CaseViewMockProps } from './CaseView.mocks';\n\nexport default {\n title: 'Work/CaseView',\n component: CaseView,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\nexport const CaseViewDemo: StoryFn<CaseViewMockProps> = (args: CaseViewMockProps) => {\n return (\n <AppShellDemo\n appHeader\n main={\n <CaseViewMock\n {...args}\n caseId={args.caseId}\n heading={args.heading}\n subheading={args.subheading}\n summaryFields={args.summaryFields}\n stages={args.stages}\n tasks={args.tasks}\n taskCount={args.taskCount}\n parentCases={args.parentCases}\n predictions={args.predictions}\n attachments={args.attachments}\n stakeholders={args.stakeholders}\n followers={args.followers}\n tags={args.tags}\n persistentUtility={args.persistentUtility}\n banner={args.banner}\n promotedActions={args.promotedActions}\n headingLength={args.headingLength}\n defaultExpanded={!!args.defaultExpanded}\n />\n }\n />\n );\n};\n\nCaseViewDemo.args = {\n caseId: 'C-123456',\n heading: 'Constellation',\n subheading: 'C-123456',\n parentCases: false,\n promotedActions: 1,\n summaryFields: 'All',\n stages: true,\n tasks: true,\n taskCount: 4,\n predictions: true,\n attachments: true,\n stakeholders: true,\n followers: true,\n tags: true,\n persistentUtility: false,\n banner: false,\n headingLength: 'short',\n defaultExpanded: true\n};\n\nCaseViewDemo.argTypes = {\n caseId: { control: { type: 'text' } },\n heading: { control: { type: 'text' } },\n subheading: { control: { type: 'text' } },\n summaryFields: {\n control: 'radio',\n options: ['All', 'Primary only', 'Secondary only']\n },\n stages: { control: { type: 'boolean' } },\n tasks: { control: { type: 'boolean' } },\n taskCount: { control: { type: 'number' } },\n parentCases: { control: { type: 'boolean' } },\n predictions: { control: { type: 'boolean' } },\n attachments: { control: { type: 'boolean' } },\n stakeholders: { control: { type: 'boolean' } },\n followers: { control: { type: 'boolean' } },\n tags: { control: { type: 'boolean' } },\n persistentUtility: { control: { type: 'boolean' } },\n banner: { control: { type: 'boolean' } },\n promotedActions: { control: { type: 'select' }, options: [0, 1, 2, 3, 4, 5] },\n headingLength: { control: { type: 'select' }, options: ['short', 'medium', 'long'] },\n defaultExpanded: { control: { type: 'boolean' } }\n};\n"]}
|
|
@@ -63,12 +63,10 @@ export const ConfigurableAvatar = (args) => {
|
|
|
63
63
|
}, children: _jsx(Avatar, { shape: 'squircle', name: 'John Doe' }) }));
|
|
64
64
|
};
|
|
65
65
|
ConfigurableAvatar.args = {
|
|
66
|
-
backgroundColor: '#4c5a67'
|
|
67
|
-
borderRadius: '0.5rem'
|
|
66
|
+
backgroundColor: '#4c5a67'
|
|
68
67
|
};
|
|
69
68
|
ConfigurableAvatar.argTypes = {
|
|
70
69
|
backgroundColor: { control: { type: 'color' } },
|
|
71
|
-
borderRadius: { control: { type: 'text' } },
|
|
72
70
|
shape: { table: { disable: true } },
|
|
73
71
|
size: { table: { disable: true } },
|
|
74
72
|
name: { table: { disable: true } }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGvE,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,CAAC,oBAAoB,CAAC;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,UAAU;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACvE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACrE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACpC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAyB,CAAC,IAAiB,EAAE,EAAE;IACvE,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAC;AAClG,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,+EAA+E;CAC1F,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,IAAiB,EAAE,EAAE;IACxE,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,IAAiB,EAAE,EAAE;IAC3E,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAC,iFAAiF,GAC1F,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAyB,CAAC,IAAiB,EAAE,EAAE;IACpE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,eAAe,EAAE,IAAI,CAAC,eAAe,GACrC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACrC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,KAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CAAC;AAC9F,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxE,CAAC;AAOF,MAAM,CAAC,MAAM,kBAAkB,GAAqC,CAClE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,YAED,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAG,GAC7B,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAClC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Avatar, Configuration, icons } from '@pega/cosmos-react-core';\nimport type { AvatarProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Avatar',\n component: Avatar,\n excludeStories: ['ConfigurableAvatar'],\n args: {\n shape: 'circle',\n size: 'm',\n name: 'John Doe'\n },\n argTypes: {\n shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n size: { options: ['s', 'm', 'l', 'xl'], control: { type: 'select' } },\n name: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const DefaultAvatar: StoryFn<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n name: 'Pegasystems',\n imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: StoryFn<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: StoryFn<AvatarProps> = (args: AvatarProps) => {\n return (\n <Avatar\n shape={args.shape}\n size={args.size}\n name={args.name}\n imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n />\n );\n};\n\nexport const IconAvatar: StoryFn<AvatarProps> = (args: AvatarProps) => {\n return (\n <Avatar\n shape={args.shape}\n size={args.size}\n name={args.name}\n icon={args.icon}\n color={args.color}\n backgroundColor={args.backgroundColor}\n />\n );\n};\n\nIconAvatar.args = {\n icon: 'headset',\n color: '#ffffff',\n backgroundColor: '#4c5a67'\n};\n\nIconAvatar.argTypes = {\n icon: { options: icons, control: { type: 'select', icons: true } },\n color: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } }\n};\n\nexport const StatusAvatar: StoryFn<AvatarProps> = (args: AvatarProps) => {\n return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n status: 'active'\n};\n\nStatusAvatar.argTypes = {\n status: { options: ['active', undefined], control: { type: 'select' } }\n};\n\ninterface ConfigurableAvatarProps extends AvatarProps {\n backgroundColor?: string;\n borderRadius?: string;\n}\n\nexport const ConfigurableAvatar: StoryFn<ConfigurableAvatarProps> = (\n args: ConfigurableAvatarProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n avatar: {\n 'background-color': args.backgroundColor\n }\n }\n }}\n >\n <Avatar shape='squircle' name='John Doe' />\n </Configuration>\n );\n};\n\nConfigurableAvatar.args = {\n backgroundColor: '#4c5a67'\n};\n\nConfigurableAvatar.argTypes = {\n backgroundColor: { control: { type: 'color' } },\n shape: { table: { disable: true } },\n size: { table: { disable: true } },\n name: { table: { disable: true } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompositeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"CompositeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,mBAAmB,CAyC3D,CAAC"}
|
|
@@ -10,7 +10,7 @@ export const CompositeInputDemo = (args) => {
|
|
|
10
10
|
const [firstName, setFirstName] = useState('');
|
|
11
11
|
const [lastName, setLastName] = useState('');
|
|
12
12
|
const [value, setValue] = useState('');
|
|
13
|
-
return (_jsx(CompositeInput, { ...args, value: value, additionalInfo: args.showAdditionalInfo ? { content: 'Please enter your full name.' } : undefined, dialog: {
|
|
13
|
+
return (_jsx(CompositeInput, { ...args, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, placeholder: args.placeholder, value: value, additionalInfo: args.showAdditionalInfo ? { content: 'Please enter your full name.' } : undefined, dialog: {
|
|
14
14
|
renderer: FormRenderer,
|
|
15
15
|
rendererProps: {
|
|
16
16
|
firstName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompositeInput.stories.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAMV,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,IAAyB,EAAE,EAAE;IAC5F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,cAAc,OACT,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,cAAc,EACZ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,8BAA8B,EAAE,CAAC,CAAC,CAAC,SAAS,EAEnF,MAAM,EAAE;YACN,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE;gBACb,SAAS;gBACT,iBAAiB,EAAE,YAAY;gBAC/B,QAAQ;gBACR,gBAAgB,EAAE,WAAW;aAC9B;YACD,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACrB,QAAQ,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC1C,KAAK,EAAE,CAAC;YACV,CAAC;YACD,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBACtB,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACvC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACpB,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,KAAK,EAAE,CAAC;YACV,CAAC;SACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,EAAE;IACf,kBAAkB,EAAE,KAAK;CAC1B,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { CompositeInput } from '@pega/cosmos-react-core';\nimport type { CompositeInputProps } from '@pega/cosmos-react-core';\n\nimport { FormRenderer } from './CompositeInput.mocks';\n\nexport default {\n title: 'Core/CompositeInput',\n component: CompositeInput\n} as Meta;\n\ninterface CompositeStoryProps extends CompositeInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CompositeInputDemo: StoryFn<CompositeStoryProps> = (args: CompositeStoryProps) => {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [value, setValue] = useState('');\n\n return (\n <CompositeInput\n {...args}\n value={value}\n additionalInfo={\n args.showAdditionalInfo ? { content: 'Please enter your full name.' } : undefined\n }\n dialog={{\n renderer: FormRenderer,\n rendererProps: {\n firstName,\n onFirstNameChange: setFirstName,\n lastName,\n onLastNameChange: setLastName\n },\n onApply: ({ close }) => {\n setValue([firstName, lastName].join(' '));\n close();\n },\n onCancel: ({ close }) => {\n const [first, last] = value.split(' ');\n setFirstName(first);\n setLastName(last);\n close();\n }\n }}\n onClear={() => setValue('')}\n />\n );\n};\n\nCompositeInputDemo.args = {\n label: 'Full name',\n labelHidden: false,\n info: 'Put your full name',\n status: undefined,\n required: false,\n disabled: false,\n placeholder: '',\n showAdditionalInfo: false\n};\n\nCompositeInputDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n placeholder: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"CompositeInput.stories.js","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { CompositeInput } from '@pega/cosmos-react-core';\nimport type { CompositeInputProps } from '@pega/cosmos-react-core';\n\nimport { FormRenderer } from './CompositeInput.mocks';\n\nexport default {\n title: 'Core/CompositeInput',\n component: CompositeInput\n} as Meta;\n\ninterface CompositeStoryProps extends CompositeInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CompositeInputDemo: StoryFn<CompositeStoryProps> = (args: CompositeStoryProps) => {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [value, setValue] = useState('');\n\n return (\n <CompositeInput\n {...args}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n placeholder={args.placeholder}\n value={value}\n additionalInfo={\n args.showAdditionalInfo ? { content: 'Please enter your full name.' } : undefined\n }\n dialog={{\n renderer: FormRenderer,\n rendererProps: {\n firstName,\n onFirstNameChange: setFirstName,\n lastName,\n onLastNameChange: setLastName\n },\n onApply: ({ close }) => {\n setValue([firstName, lastName].join(' '));\n close();\n },\n onCancel: ({ close }) => {\n const [first, last] = value.split(' ');\n setFirstName(first);\n setLastName(last);\n close();\n }\n }}\n onClear={() => setValue('')}\n />\n );\n};\n\nCompositeInputDemo.args = {\n label: 'Full name',\n labelHidden: false,\n info: 'Put your full name',\n status: undefined,\n required: false,\n disabled: false,\n placeholder: '',\n showAdditionalInfo: false\n};\n\nCompositeInputDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n placeholder: { control: { type: 'text' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAEjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,mBAAmB,CAE9D,CAAC;AAYF,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAEjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,mBAAmB,CAE9D,CAAC;AAYF,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,oBAAoB,CA6B7D,CAAC"}
|
|
@@ -20,7 +20,7 @@ export const CreditCardInputDemo = (args) => {
|
|
|
20
20
|
if (prev !== args.value)
|
|
21
21
|
setValue(args.value);
|
|
22
22
|
}, [prev, args.value]);
|
|
23
|
-
return (_jsx(CreditCardInput, { ...args, value: value, onChange: setValue, additionalInfo: args.showAdditionalInfo
|
|
23
|
+
return (_jsx(CreditCardInput, { ...args, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: setValue, additionalInfo: args.showAdditionalInfo
|
|
24
24
|
? {
|
|
25
25
|
content: 'Input your 15-16 digit credit card number'
|
|
26
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO1F,eAAe;IACb,KAAK,EAAE,iBAAiB;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,qBAAqB,GAAiC,CAAC,IAAyB,EAAE,EAAE,CAAC,CAChG,KAAC,iBAAiB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,GAAI,CAC/F,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE;CACzF,CAAC;AAMF,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC/F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,eAAe,OACV,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,2CAA2C;aACrD;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,KAAK;CAC1B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput, usePrevious } from '@pega/cosmos-react-core';\nimport type {\n ObfuscationMode,\n CreditCardDisplayProps,\n CreditCardInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n value?: CreditCardDisplayProps['value'];\n obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: StoryFn<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n value: undefined,\n obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\ninterface CreditCardStoryProps extends CreditCardInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CreditCardInputDemo: StoryFn<CreditCardStoryProps> = (args: CreditCardStoryProps) => {\n const [value, setValue] = useState<string | undefined>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <CreditCardInput\n {...args}\n value={value}\n onChange={setValue}\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Input your 15-16 digit credit card number'\n }\n : undefined\n }\n />\n );\n};\n\nCreditCardInputDemo.args = {\n value: undefined,\n label: 'Credit card number',\n labelHidden: false,\n info: 'Enter your credit card number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nCreditCardInputDemo.argTypes = {\n value: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"CreditCard.stories.js","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput, usePrevious } from '@pega/cosmos-react-core';\nimport type {\n ObfuscationMode,\n CreditCardDisplayProps,\n CreditCardInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n value?: CreditCardDisplayProps['value'];\n obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: StoryFn<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n value: undefined,\n obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\ninterface CreditCardStoryProps extends CreditCardInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CreditCardInputDemo: StoryFn<CreditCardStoryProps> = (args: CreditCardStoryProps) => {\n const [value, setValue] = useState<string | undefined>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <CreditCardInput\n {...args}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={setValue}\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Input your 15-16 digit credit card number'\n }\n : undefined\n }\n />\n );\n};\n\nCreditCardInputDemo.args = {\n value: undefined,\n label: 'Credit card number',\n labelHidden: false,\n info: 'Enter your credit card number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false\n};\n\nCreditCardInputDemo.argTypes = {\n value: { control: { type: 'text' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
|
|
@@ -4,7 +4,7 @@ export default {
|
|
|
4
4
|
title: 'Core/DangerButton',
|
|
5
5
|
component: DangerButton
|
|
6
6
|
};
|
|
7
|
-
export const DangerButtonDemo = (args) => (_jsx(DangerButton, {
|
|
7
|
+
export const DangerButtonDemo = (args) => (_jsx(DangerButton, { label: args.label, primary: args.primary, disabled: args.disabled }));
|
|
8
8
|
DangerButtonDemo.args = {
|
|
9
9
|
label: 'Proceed with caution',
|
|
10
10
|
primary: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DangerButton.stories.js","sourceRoot":"","sources":["../../../src/core/DangerButton/DangerButton.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,IAAuB,EAAE,EAAE,CAAC,CACvF,KAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"DangerButton.stories.js","sourceRoot":"","sources":["../../../src/core/DangerButton/DangerButton.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,IAAuB,EAAE,EAAE,CAAC,CACvF,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACpF,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { DangerButton } from '@pega/cosmos-react-core';\nimport type { DangerButtonProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DangerButton',\n component: DangerButton\n} as Meta;\n\nexport const DangerButtonDemo: StoryFn<DangerButtonProps> = (args: DangerButtonProps) => (\n <DangerButton label={args.label} primary={args.primary} disabled={args.disabled} />\n);\n\nDangerButtonDemo.args = {\n label: 'Proceed with caution',\n primary: true,\n disabled: false\n};\n\nDangerButtonDemo.argTypes = {\n label: { control: { type: 'text' } },\n primary: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;;AAEhE,wBAkCU;AAEV,eAAO,MAAM,WAAW,EAAE,OAAO,CAC/B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAqFtE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAmF3B,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,OAAO,CACnC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;;AAEhE,wBAkCU;AAEV,eAAO,MAAM,WAAW,EAAE,OAAO,CAC/B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAqFtE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAmF3B,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,OAAO,CACnC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CAWvF,CAAC"}
|
|
@@ -94,7 +94,7 @@ PopoverGroups.argTypes = {
|
|
|
94
94
|
placement: { table: { disable: true } }
|
|
95
95
|
};
|
|
96
96
|
export const PlaceAndContain = (args) => {
|
|
97
|
-
return _jsx(PlaceAndContainMock, { ...args });
|
|
97
|
+
return (_jsx(PlaceAndContainMock, { ...args, arrow: args.arrow, primaryPlacement: args.primaryPlacement, secondaryPlacement: args.secondaryPlacement, contentSize: args.contentSize }));
|
|
98
98
|
};
|
|
99
99
|
PlaceAndContain.args = {
|
|
100
100
|
arrow: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n Flex,\n Link,\n Popover,\n Text,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport { PlaceAndContainMock } from './Popover.mocks';\nimport type { PlaceAndContainMockProps } from './Popover.mocks';\n\nexport default {\n title: 'Core/Popover',\n component: Popover,\n args: {\n arrow: false,\n showDelay: 'none',\n hideDelay: 'none',\n placement: 'bottom'\n },\n argTypes: {\n arrow: { control: { type: 'boolean' } },\n showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n placement: {\n options: [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end'\n ],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const PopoverDemo: StoryFn<\n Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>\n> = (args: Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>) => {\n const [mountHoverPopover, setMountHoverPopover] = useState(false);\n const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n const [mountClickPopover, setMountClickPopover] = useState(false);\n const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountHoverPopover(false);\n return;\n }\n setMountHoverPopover(type === 'mouseover' || type === 'focus');\n };\n\n const hoverMountingHandlers = {\n onMouseOver: toggleHoverPopover,\n onMouseOut: toggleHoverPopover,\n onKeyDown: toggleHoverPopover,\n onFocus: toggleHoverPopover,\n onBlur: toggleHoverPopover\n };\n\n const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountClickPopover(false);\n return;\n }\n setMountClickPopover(type === 'click' || type === 'focus');\n };\n\n const clickMountingHandlers = {\n onClick: toggleClickPopover,\n onKeyDown: toggleClickPopover,\n onFocus: toggleClickPopover,\n onBlur: toggleClickPopover\n };\n\n return (\n <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n Hover Over Me\n </Text>\n <Popover\n ref={setHoverPopoverEl}\n show={mountHoverPopover}\n target={textEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...hoverMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on hover!</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setButtonEl} {...clickMountingHandlers}>\n Click Me\n </Button>\n <Popover\n ref={setClickPopoverEl}\n show={mountClickPopover}\n target={buttonEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...clickMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on click!</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n );\n};\n\nexport const PopoverGroups: StoryFn = () => {\n const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n const [showFirstPopover, setShowFirstPopover] = useState(false);\n const [showSecondPopover, setShowSecondPopover] = useState(false);\n const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <Text variant='h2'>groupId: link_preview</Text>\n <div>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n </div>\n <Text variant='h2'>groupId: tooltip</Text>\n <div>\n <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n Hover me\n </Button>\n <Tooltip target={firstTooltipButton} id='first-tooltip'>\n This is a tooltip for the first button.\n </Tooltip>\n <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n Hover me\n </Button>\n <Tooltip target={secondTooltipButton} id='second-tooltip'>\n This is a tooltip for the second button.\n </Tooltip>\n <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n Hover me\n </Button>\n <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n This is a tooltip for the third button.\n </Tooltip>\n </div>\n <Text variant='h2'>No groupId</Text>\n <div>\n <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showFirstPopover} target={firstPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #1</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showSecondPopover} target={secondPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #2</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showThirdPopover} target={thirdPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #3</Text>\n </CardContent>\n </Card>\n </Popover>\n </div>\n </Flex>\n );\n};\n\nPopoverGroups.argTypes = {\n arrow: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } },\n placement: { table: { disable: true } }\n};\n\nexport const PlaceAndContain: StoryFn<\n PlaceAndContainMockProps & { placement?: never; showDelay?: never; hideDelay?: never }\n> = (args: PlaceAndContainMockProps) => {\n return <PlaceAndContainMock {...args} />;\n};\n\nPlaceAndContain.args = {\n arrow: false,\n primaryPlacement: 'bottom',\n secondaryPlacement: 'none',\n contentSize: 15\n};\n\nPlaceAndContain.argTypes = {\n arrow: { control: { type: 'boolean' } },\n primaryPlacement: {\n control: { type: 'select' },\n options: ['bottom', 'top', 'left', 'right', 'none']\n },\n secondaryPlacement: {\n control: { type: 'select' },\n options: ['none', 'start', 'end']\n },\n contentSize: {\n control: { type: 'range', min: 1, max: 30, step: 1 }\n },\n placement: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n Flex,\n Link,\n Popover,\n Text,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport { PlaceAndContainMock } from './Popover.mocks';\nimport type { PlaceAndContainMockProps } from './Popover.mocks';\n\nexport default {\n title: 'Core/Popover',\n component: Popover,\n args: {\n arrow: false,\n showDelay: 'none',\n hideDelay: 'none',\n placement: 'bottom'\n },\n argTypes: {\n arrow: { control: { type: 'boolean' } },\n showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n placement: {\n options: [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end'\n ],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const PopoverDemo: StoryFn<\n Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>\n> = (args: Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>) => {\n const [mountHoverPopover, setMountHoverPopover] = useState(false);\n const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n const [mountClickPopover, setMountClickPopover] = useState(false);\n const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountHoverPopover(false);\n return;\n }\n setMountHoverPopover(type === 'mouseover' || type === 'focus');\n };\n\n const hoverMountingHandlers = {\n onMouseOver: toggleHoverPopover,\n onMouseOut: toggleHoverPopover,\n onKeyDown: toggleHoverPopover,\n onFocus: toggleHoverPopover,\n onBlur: toggleHoverPopover\n };\n\n const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountClickPopover(false);\n return;\n }\n setMountClickPopover(type === 'click' || type === 'focus');\n };\n\n const clickMountingHandlers = {\n onClick: toggleClickPopover,\n onKeyDown: toggleClickPopover,\n onFocus: toggleClickPopover,\n onBlur: toggleClickPopover\n };\n\n return (\n <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n Hover Over Me\n </Text>\n <Popover\n ref={setHoverPopoverEl}\n show={mountHoverPopover}\n target={textEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...hoverMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on hover!</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setButtonEl} {...clickMountingHandlers}>\n Click Me\n </Button>\n <Popover\n ref={setClickPopoverEl}\n show={mountClickPopover}\n target={buttonEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...clickMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on click!</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n );\n};\n\nexport const PopoverGroups: StoryFn = () => {\n const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n const [showFirstPopover, setShowFirstPopover] = useState(false);\n const [showSecondPopover, setShowSecondPopover] = useState(false);\n const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <Text variant='h2'>groupId: link_preview</Text>\n <div>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n </div>\n <Text variant='h2'>groupId: tooltip</Text>\n <div>\n <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n Hover me\n </Button>\n <Tooltip target={firstTooltipButton} id='first-tooltip'>\n This is a tooltip for the first button.\n </Tooltip>\n <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n Hover me\n </Button>\n <Tooltip target={secondTooltipButton} id='second-tooltip'>\n This is a tooltip for the second button.\n </Tooltip>\n <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n Hover me\n </Button>\n <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n This is a tooltip for the third button.\n </Tooltip>\n </div>\n <Text variant='h2'>No groupId</Text>\n <div>\n <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showFirstPopover} target={firstPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #1</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showSecondPopover} target={secondPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #2</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showThirdPopover} target={thirdPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #3</Text>\n </CardContent>\n </Card>\n </Popover>\n </div>\n </Flex>\n );\n};\n\nPopoverGroups.argTypes = {\n arrow: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } },\n placement: { table: { disable: true } }\n};\n\nexport const PlaceAndContain: StoryFn<\n PlaceAndContainMockProps & { placement?: never; showDelay?: never; hideDelay?: never }\n> = (args: PlaceAndContainMockProps) => {\n return (\n <PlaceAndContainMock\n {...args}\n arrow={args.arrow}\n primaryPlacement={args.primaryPlacement}\n secondaryPlacement={args.secondaryPlacement}\n contentSize={args.contentSize}\n />\n );\n};\n\nPlaceAndContain.args = {\n arrow: false,\n primaryPlacement: 'bottom',\n secondaryPlacement: 'none',\n contentSize: 15\n};\n\nPlaceAndContain.argTypes = {\n arrow: { control: { type: 'boolean' } },\n primaryPlacement: {\n control: { type: 'select' },\n options: ['bottom', 'top', 'left', 'right', 'none']\n },\n secondaryPlacement: {\n control: { type: 'select' },\n options: ['none', 'start', 'end']\n },\n contentSize: {\n control: { type: 'range', min: 1, max: 30, step: 1 }\n },\n placement: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,OAAO,KAAK,EAIV,UAAU,EACX,MAAM,yBAAyB,CAAC;AAiBjC,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EAIZ,kBAAkB,EAKlB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;;AAcnC,wBAGU;AAEV,mFAAmF;AACnF,UAAU,mBACR,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAAG;AAE7E,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,OAAO,KAAK,EAIV,UAAU,EACX,MAAM,yBAAyB,CAAC;AAiBjC,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EAIZ,kBAAkB,EAKlB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;;AAcnC,wBAGU;AAEV,mFAAmF;AACnF,UAAU,mBACR,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAAG;AAE7E,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,CA+BvD,CAAC;AAeF,mFAAmF;AAEnF,qFAAqF;AAErF,UAAU,gBAAiB,SAAQ,UAAU,CAAC,YAAY,EAAE,UAAU,GAAG,eAAe,CAAC;IACvF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAqEjD,CAAC;AAsCF,oFAAoF;AAEpF,qFAAqF;AACrF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,CAEzD,CAAC;AAaF,uFAAuF;AAEvF,uFAAuF;AACvF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAW7D,CAAC;AASF,wFAAwF;AAExF,4FAA4F;AAC5F,UAAU,6BAA6B;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,6BAA6B,CA4B3E,CAAC;AAeF,0FAA0F;AAE1F,8FAA8F;AAC9F,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAY3D,CAAC;AAWF,8FAA8F;AAE9F,+FAA+F;AAC/F,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAmkBnD,CAAC;AA0CF,yFAAyF"}
|
|
@@ -14,16 +14,15 @@ export default {
|
|
|
14
14
|
component: Chat
|
|
15
15
|
};
|
|
16
16
|
export const ChatHeaderDemo = (args) => {
|
|
17
|
-
const { title, icon, customer, authenticated } = args;
|
|
18
17
|
const [contextItems, setContextItems] = useState([]);
|
|
19
18
|
const [loading, setLoading] = useState(false);
|
|
20
|
-
return (_jsx(ChatHeader, { title: title, icon: icon || 'chat', actions: [
|
|
19
|
+
return (_jsx(ChatHeader, { title: args.title, icon: args.icon || 'chat', actions: [
|
|
21
20
|
{ id: 'action-1', primary: 'Transfer' },
|
|
22
21
|
{ id: 'action-2', primary: 'End chat' }
|
|
23
22
|
], sentiment: {
|
|
24
23
|
variant: 'positive',
|
|
25
24
|
'aria-label': 'Sentiment is positive'
|
|
26
|
-
}, customer: customer, authenticated: authenticated, context: {
|
|
25
|
+
}, customer: args.customer, authenticated: args.authenticated, context: {
|
|
27
26
|
items: contextItems,
|
|
28
27
|
onClick: () => {
|
|
29
28
|
setLoading(true);
|