@pega/cosmos-react-cs 4.0.0-dev.23.0 → 4.0.0-dev.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/lib/components/CallControlPanel/CallControlPanel.js +1 -1
  2. package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
  3. package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js +1 -1
  4. package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map +1 -1
  5. package/lib/components/CallControlPanel/ContactList/CalleePicker.js +1 -1
  6. package/lib/components/CallControlPanel/ContactList/CalleePicker.js.map +1 -1
  7. package/lib/components/CallControlPanel/ContactList/ContactList.js +1 -1
  8. package/lib/components/CallControlPanel/ContactList/ContactList.js.map +1 -1
  9. package/lib/components/CallControlPanel/ExternalCTI.js +1 -1
  10. package/lib/components/CallControlPanel/ExternalCTI.js.map +1 -1
  11. package/lib/components/CallControlPanel/FloatingPanel.js +1 -1
  12. package/lib/components/CallControlPanel/FloatingPanel.js.map +1 -1
  13. package/lib/components/DialPad/DialPad.d.ts.map +1 -1
  14. package/lib/components/DialPad/DialPad.js +1 -1
  15. package/lib/components/DialPad/DialPad.js.map +1 -1
  16. package/lib/components/DialPad/DialPadKeyboard.js +1 -1
  17. package/lib/components/DialPad/DialPadKeyboard.js.map +1 -1
  18. package/lib/components/InteractionNotification/CountdownButton.js +1 -1
  19. package/lib/components/InteractionNotification/CountdownButton.js.map +1 -1
  20. package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
  21. package/lib/components/InteractionNotification/InteractionNotification.js +1 -1
  22. package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
  23. package/lib/components/InteractionTimer/InteractionTimer.js +1 -1
  24. package/lib/components/InteractionTimer/InteractionTimer.js.map +1 -1
  25. package/lib/components/Picker/Picker.d.ts.map +1 -1
  26. package/lib/components/Picker/Picker.js +1 -1
  27. package/lib/components/Picker/Picker.js.map +1 -1
  28. package/lib/components/TaskManager/ConversationAI.js +1 -1
  29. package/lib/components/TaskManager/ConversationAI.js.map +1 -1
  30. package/lib/components/TaskManager/Dialogue.d.ts.map +1 -1
  31. package/lib/components/TaskManager/Dialogue.js +1 -1
  32. package/lib/components/TaskManager/Dialogue.js.map +1 -1
  33. package/lib/components/TaskManager/TaskManager.js +1 -1
  34. package/lib/components/TaskManager/TaskManager.js.map +1 -1
  35. package/lib/components/TaskManager/TaskManagerTabs.js +1 -1
  36. package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
  37. package/lib/components/TaskManager/TaskPicker.js +1 -1
  38. package/lib/components/TaskManager/TaskPicker.js.map +1 -1
  39. package/lib/components/TaskManager/TaskView.d.ts.map +1 -1
  40. package/lib/components/TaskManager/TaskView.js +1 -1
  41. package/lib/components/TaskManager/TaskView.js.map +1 -1
  42. package/lib/index.d.ts +0 -4
  43. package/lib/index.d.ts.map +1 -1
  44. package/lib/index.js +0 -4
  45. package/lib/index.js.map +1 -1
  46. package/package.json +3 -3
  47. package/lib/components/Article/Article.d.ts +0 -49
  48. package/lib/components/Article/Article.d.ts.map +0 -1
  49. package/lib/components/Article/Article.js +0 -73
  50. package/lib/components/Article/Article.js.map +0 -1
  51. package/lib/components/Article/ArticleFooter.d.ts +0 -40
  52. package/lib/components/Article/ArticleFooter.d.ts.map +0 -1
  53. package/lib/components/Article/ArticleFooter.js +0 -54
  54. package/lib/components/Article/ArticleFooter.js.map +0 -1
  55. package/lib/components/Article/ArticleMeta.d.ts +0 -13
  56. package/lib/components/Article/ArticleMeta.d.ts.map +0 -1
  57. package/lib/components/Article/ArticleMeta.js +0 -24
  58. package/lib/components/Article/ArticleMeta.js.map +0 -1
  59. package/lib/components/Article/index.d.ts +0 -5
  60. package/lib/components/Article/index.d.ts.map +0 -1
  61. package/lib/components/Article/index.js +0 -3
  62. package/lib/components/Article/index.js.map +0 -1
  63. package/lib/components/ArticleList/ArticleList.d.ts +0 -6
  64. package/lib/components/ArticleList/ArticleList.d.ts.map +0 -1
  65. package/lib/components/ArticleList/ArticleList.js +0 -109
  66. package/lib/components/ArticleList/ArticleList.js.map +0 -1
  67. package/lib/components/ArticleList/ArticleList.types.d.ts +0 -79
  68. package/lib/components/ArticleList/ArticleList.types.d.ts.map +0 -1
  69. package/lib/components/ArticleList/ArticleList.types.js +0 -2
  70. package/lib/components/ArticleList/ArticleList.types.js.map +0 -1
  71. package/lib/components/ArticleList/ArticleListFilter.d.ts +0 -6
  72. package/lib/components/ArticleList/ArticleListFilter.d.ts.map +0 -1
  73. package/lib/components/ArticleList/ArticleListFilter.js +0 -60
  74. package/lib/components/ArticleList/ArticleListFilter.js.map +0 -1
  75. package/lib/components/ArticleList/ArticleListHeader.d.ts +0 -5
  76. package/lib/components/ArticleList/ArticleListHeader.d.ts.map +0 -1
  77. package/lib/components/ArticleList/ArticleListHeader.js +0 -20
  78. package/lib/components/ArticleList/ArticleListHeader.js.map +0 -1
  79. package/lib/components/ArticleList/ArticleSummary.d.ts +0 -7
  80. package/lib/components/ArticleList/ArticleSummary.d.ts.map +0 -1
  81. package/lib/components/ArticleList/ArticleSummary.js +0 -46
  82. package/lib/components/ArticleList/ArticleSummary.js.map +0 -1
  83. package/lib/components/ArticleList/index.d.ts +0 -6
  84. package/lib/components/ArticleList/index.d.ts.map +0 -1
  85. package/lib/components/ArticleList/index.js +0 -4
  86. package/lib/components/ArticleList/index.js.map +0 -1
@@ -1,49 +0,0 @@
1
- import { ReactNode, FunctionComponent, MouseEvent } from 'react';
2
- import { MenuItemProps, BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
3
- import { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';
4
- import { ArticleFooterProps } from './ArticleFooter';
5
- import { ArticleMetaProps } from './ArticleMeta';
6
- export interface BaseArticleProps extends BaseProps, NoChildrenProp {
7
- /** Header to show icon , title and any actions on the container */
8
- header?: ArticleListHeaderProps;
9
- /** Control for navigating back */
10
- backNavigation?: {
11
- title: string;
12
- onClick: (e: MouseEvent<HTMLButtonElement>) => void;
13
- };
14
- /** Primary actions which needs to be displayed with an icon */
15
- primaryActions?: {
16
- /** Unique id for action, used in onClick callback */
17
- id: string;
18
- /** Label for this action, shown in tooltip and used for generating aria-label */
19
- label: string;
20
- /** Icon to be displayed in the button */
21
- icon: string;
22
- /** Callback triggered when a user clicks of presses enter on the action */
23
- onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;
24
- }[];
25
- /** Secondary actions that needs to be pushed under more icon */
26
- secondaryActions?: {
27
- id: MenuItemProps['id'];
28
- text: MenuItemProps['primary'];
29
- onClick: MenuItemProps['onClick'];
30
- }[];
31
- /** Article title */
32
- title: string;
33
- /** Array of meta data */
34
- meta?: ArticleMetaProps;
35
- /** Article content */
36
- content: ReactNode;
37
- /** Footer */
38
- footer?: ArticleFooterProps;
39
- /** Prop to check visibility of skeleton */
40
- loading: boolean;
41
- }
42
- export type ArticleProps = (BaseArticleProps & {
43
- loading?: false;
44
- }) | (Partial<BaseArticleProps> & {
45
- loading: true;
46
- });
47
- declare const Article: FunctionComponent<ArticleProps & ForwardProps>;
48
- export default Article;
49
- //# sourceMappingURL=Article.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAEL,aAAa,EAKb,SAAS,EACT,YAAY,EACZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAG1E,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mEAAmE;IACnE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,kCAAkC;IAClC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,+DAA+D;IAC/D,cAAc,CAAC,EAAE;QACf,qDAAqD;QACrD,EAAE,EAAE,MAAM,CAAC;QACX,iFAAiF;QACjF,KAAK,EAAE,MAAM,CAAC;QACd,yCAAyC;QACzC,IAAI,EAAE,MAAM,CAAC;QACb,2EAA2E;QAC3E,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACnC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACxC,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6DpD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAqG3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -1,73 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useEffect, useRef } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { registerIcon, Flex, MenuButton, Text, defaultThemeProp, Button, Icon, Progress, useI18n, useDirection } from '@pega/cosmos-react-core';
5
- import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
6
- import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
7
- import ArticleListHeader from '../ArticleList/ArticleListHeader';
8
- import ArticleFooter from './ArticleFooter';
9
- import ArticleMeta from './ArticleMeta';
10
- registerIcon(caretRightIcon, caretLeftIcon);
11
- const StyledArticleWrapper = styled.div(props => {
12
- const { theme } = props;
13
- return css `
14
- background: ${theme.base.palette['primary-background']};
15
- padding: calc(1.5 * ${theme.base.spacing});
16
- border-radius: calc(0.5 * ${theme.base['border-radius']});
17
- max-height: inherit;
18
- `;
19
- });
20
- const StyledArticleHeader = styled.header `
21
- flex-shrink: 0;
22
- `;
23
- const StyledArticleContent = styled.div(props => {
24
- const { theme, theme: { base: { spacing } } } = props;
25
- return css `
26
- flex-grow: 1;
27
- overflow-y: auto;
28
- padding: 0 calc(1.5 * ${spacing});
29
- margin: 0 calc(-1.5 * ${spacing});
30
- ul,
31
- ol {
32
- padding-left: calc(3 * ${spacing});
33
- }
34
- a {
35
- color: ${theme.components.link.color};
36
- }
37
- * {
38
- margin: revert;
39
- }
40
- `;
41
- });
42
- const StyledBackNavButton = styled(Button)(({ theme: { base: { spacing } } }) => {
43
- return css `
44
- display: flex;
45
- align-items: start;
46
- gap: calc(0.5 * ${spacing});
47
- margin-inline-end: calc(1.5 * ${spacing});
48
- `;
49
- });
50
- StyledArticleContent.defaultProps = defaultThemeProp;
51
- StyledArticleWrapper.defaultProps = defaultThemeProp;
52
- StyledBackNavButton.defaultProps = defaultThemeProp;
53
- const Article = (props) => {
54
- const { header, meta, title, backNavigation, content, primaryActions, secondaryActions, footer, loading, ...restProps } = props;
55
- const { rtl, ltr, end, start } = useDirection();
56
- const t = useI18n();
57
- const backButtonRef = useRef(null);
58
- useEffect(() => {
59
- if (!loading) {
60
- backButtonRef.current?.focus();
61
- }
62
- }, [loading]);
63
- return (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper, "aria-busy": loading ? true : undefined, children: [header && _jsx(ArticleListHeader, { ...header }), (backNavigation || primaryActions || secondaryActions) && (_jsxs(Flex, { container: { alignItems: 'start' }, item: { grow: 1 }, children: [_jsx(Flex, { container: { pad: [1, undefined, undefined] }, item: { grow: 1 }, children: _jsxs(Button, { as: StyledBackNavButton, onClick: backNavigation?.onClick, variant: 'link', ref: backButtonRef, children: [ltr && _jsx(Icon, { name: `caret-${start}` }), backNavigation?.title, rtl && _jsx(Icon, { name: `caret-${end}` })] }) }), !loading && (_jsxs(_Fragment, { children: [primaryActions?.map(({ id, label, onClick, icon }) => {
64
- return (_jsx(Button, { onClick: (e) => onClick(id, e), variant: 'simple', label: label, icon: true, children: _jsx(Icon, { name: icon }) }, id));
65
- }), secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, menu: {
66
- items: secondaryActions.map(({ text, ...rest }) => ({
67
- ...rest,
68
- primary: text
69
- }))
70
- } }))] }))] })), !loading && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) }), meta && (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(ArticleMeta, { ...meta }) })), _jsx(StyledArticleContent, { children: content }), footer && _jsx(ArticleFooter, { ...footer })] })), _jsx(Progress, { visible: !!loading, focusOnVisible: true, placement: 'block', message: t('loading') })] }));
71
- };
72
- export default Article;
73
- //# sourceMappingURL=Article.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n MenuItemProps,\n Flex,\n MenuButton,\n Text,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n Button,\n Icon,\n Progress,\n useI18n,\n useDirection\n} from '@pega/cosmos-react-core';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';\nimport ArticleListHeader from '../ArticleList/ArticleListHeader';\n\nimport ArticleFooter, { ArticleFooterProps } from './ArticleFooter';\nimport ArticleMeta, { ArticleMetaProps } from './ArticleMeta';\n\nregisterIcon(caretRightIcon, caretLeftIcon);\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n /** Header to show icon , title and any actions on the container */\n header?: ArticleListHeaderProps;\n /** Control for navigating back */\n backNavigation?: {\n title: string;\n onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n };\n /** Primary actions which needs to be displayed with an icon */\n primaryActions?: {\n /** Unique id for action, used in onClick callback */\n id: string;\n /** Label for this action, shown in tooltip and used for generating aria-label */\n label: string;\n /** Icon to be displayed in the button */\n icon: string;\n /** Callback triggered when a user clicks of presses enter on the action */\n onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n }[];\n /** Secondary actions that needs to be pushed under more icon */\n secondaryActions?: {\n id: MenuItemProps['id'];\n text: MenuItemProps['primary'];\n onClick: MenuItemProps['onClick'];\n }[];\n /** Article title */\n title: string;\n /** Array of meta data */\n meta?: ArticleMetaProps;\n /** Article content */\n content: ReactNode;\n /** Footer */\n footer?: ArticleFooterProps;\n /** Prop to check visibility of skeleton */\n loading: boolean;\n}\n\nexport type ArticleProps =\n | (BaseArticleProps & { loading?: false })\n | (Partial<BaseArticleProps> & { loading: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n const { theme } = props;\n return css`\n background: ${theme.base.palette['primary-background']};\n padding: calc(1.5 * ${theme.base.spacing});\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n max-height: inherit;\n `;\n});\n\nconst StyledArticleHeader = styled.header`\n flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n const {\n theme,\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n flex-grow: 1;\n overflow-y: auto;\n padding: 0 calc(1.5 * ${spacing});\n margin: 0 calc(-1.5 * ${spacing});\n ul,\n ol {\n padding-left: calc(3 * ${spacing});\n }\n a {\n color: ${theme.components.link.color};\n }\n * {\n margin: revert;\n }\n `;\n});\n\nconst StyledBackNavButton = styled(Button)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n display: flex;\n align-items: start;\n gap: calc(0.5 * ${spacing});\n margin-inline-end: calc(1.5 * ${spacing});\n `;\n }\n);\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\nStyledBackNavButton.defaultProps = defaultThemeProp;\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n const {\n header,\n meta,\n title,\n backNavigation,\n content,\n primaryActions,\n secondaryActions,\n footer,\n loading,\n ...restProps\n } = props;\n\n const { rtl, ltr, end, start } = useDirection();\n\n const t = useI18n();\n const backButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (!loading) {\n backButtonRef.current?.focus();\n }\n }, [loading]);\n\n return (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledArticleWrapper}\n aria-busy={loading ? true : undefined}\n >\n {header && <ArticleListHeader {...header} />}\n {(backNavigation || primaryActions || secondaryActions) && (\n <Flex container={{ alignItems: 'start' }} item={{ grow: 1 }}>\n <Flex container={{ pad: [1, undefined, undefined] }} item={{ grow: 1 }}>\n <Button\n as={StyledBackNavButton}\n onClick={backNavigation?.onClick}\n variant='link'\n ref={backButtonRef}\n >\n {ltr && <Icon name={`caret-${start}`} />}\n {backNavigation?.title}\n {rtl && <Icon name={`caret-${end}`} />}\n </Button>\n </Flex>\n\n {!loading && (\n <>\n {primaryActions?.map(({ id, label, onClick, icon }) => {\n return (\n <Button\n key={id}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n variant='simple'\n label={label}\n icon\n >\n <Icon name={icon} />\n </Button>\n );\n })}\n {secondaryActions && (\n <MenuButton\n variant='simple'\n text={t('actions')}\n icon='more'\n iconOnly\n menu={{\n items: secondaryActions.map(({ text, ...rest }) => ({\n ...rest,\n primary: text\n }))\n }}\n />\n )}\n </>\n )}\n </Flex>\n )}\n {!loading && (\n <>\n <Flex container as={StyledArticleHeader}>\n <Text variant='h2'>{title}</Text>\n </Flex>\n\n {meta && (\n <Flex container item={{ shrink: 0 }}>\n <ArticleMeta {...meta} />\n </Flex>\n )}\n\n <StyledArticleContent>{content}</StyledArticleContent>\n\n {footer && <ArticleFooter {...footer} />}\n </>\n )}\n <Progress visible={!!loading} focusOnVisible placement='block' message={t('loading')} />\n </Flex>\n );\n};\n\nexport default Article;\n"]}
@@ -1,40 +0,0 @@
1
- import { FunctionComponent, MouseEvent } from 'react';
2
- import { BaseProps, ForwardProps, FileUploadItemProps } from '@pega/cosmos-react-core';
3
- export interface ArticleTag {
4
- /** Tag name */
5
- tagName: string;
6
- /** Tag id. If not set tagName is treated as id */
7
- id: string;
8
- }
9
- export interface ArticleFooterProps extends BaseProps {
10
- /** Feedback for this article */
11
- feedback?: {
12
- showThanksMessage?: boolean;
13
- /** Weather the current article is liked or disliked. Used to determine */
14
- status?: 'liked' | 'disliked';
15
- /** Callback triggered on click of like or dislike */
16
- onFeedbackClick: (button: 'like' | 'dislike', e: MouseEvent<HTMLButtonElement>) => void;
17
- };
18
- tags?: {
19
- /** Article tags */
20
- list: ArticleTag[];
21
- /** Callback that triggers on click of tag */
22
- onTagClick?: (id: ArticleTag['id']) => void;
23
- };
24
- /** Links to external sites */
25
- relatedLinks?: {
26
- title: string;
27
- href: string;
28
- }[];
29
- /** Links to other articles */
30
- relatedArticles?: {
31
- id: string;
32
- title: string;
33
- onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;
34
- }[];
35
- /** Attachments */
36
- attachments?: FileUploadItemProps[];
37
- }
38
- declare const ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps>;
39
- export default ArticleFooter;
40
- //# sourceMappingURL=ArticleFooter.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAIL,SAAS,EACT,YAAY,EACZ,mBAAmB,EAOpB,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,gCAAgC;IAChC,QAAQ,CAAC,EAAE;QACT,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,2EAA2E;QAC3E,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;QAC9B,qDAAqD;QACrD,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACzF,CAAC;IACF,IAAI,CAAC,EAAE;QACL,mBAAmB;QACnB,IAAI,EAAE,UAAU,EAAE,CAAC;QACnB,6CAA6C;QAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;KAC7C,CAAC;IACF,8BAA8B;IAC9B,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,kBAAkB;IAClB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACrC;AAuCD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwHvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,54 +0,0 @@
1
- import { createElement as _createElement } from "react";
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import styled, { css } from 'styled-components';
4
- import { Flex, Tag, defaultThemeProp, Button, Text, Link, useI18n, FileUploadItem, Grid } from '@pega/cosmos-react-core';
5
- import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
6
- const StyledRelatedItemsContainer = styled.div ``;
7
- const StyledRelatedItemsList = styled.div ``;
8
- const StyledArticleFooter = styled.div(({ theme }) => {
9
- return css `
10
- flex-shrink: 0;
11
- &::before {
12
- content: '';
13
- display: block;
14
- background: ${theme.base.palette['border-line']};
15
- height: 0.0625rem;
16
- margin-bottom: calc(2 * ${theme.base.spacing});
17
- }
18
-
19
- ${StyledRelatedItemsContainer} {
20
- margin-block-start: ${theme.base.spacing};
21
- & > ${StyledRelatedItemsList} * {
22
- margin-inline-start: 0;
23
- }
24
- }
25
- `;
26
- });
27
- StyledArticleFooter.defaultProps = defaultThemeProp;
28
- const StyledTags = styled.div(({ theme }) => {
29
- return css `
30
- padding: calc(0.25 * ${theme.base.spacing});
31
- margin: 0 calc(-0.5 * ${theme.base.spacing});
32
- & > ${StyledTag} {
33
- margin: calc(0.25 * ${theme.base.spacing});
34
- }
35
- `;
36
- });
37
- StyledTags.defaultProps = defaultThemeProp;
38
- const ArticleFooter = (props) => {
39
- const { tags, relatedLinks, relatedArticles, feedback, attachments, ...restProps } = props;
40
- const t = useI18n();
41
- return (_jsxs(Flex, { as: StyledArticleFooter, container: {
42
- direction: 'column',
43
- gap: 2
44
- }, ...restProps, children: [feedback && (_jsx(Flex, { container: { gap: 2, alignItems: 'center' }, children: feedback.showThanksMessage ? (_jsx(Text, { children: t('article_thank_you_for_your_feedback') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('article_was_this_helpful') }), _jsxs(Flex, { container: true, children: [_jsx(Button, { variant: feedback.status === 'liked' ? 'primary' : 'secondary', onClick: (e) => feedback.onFeedbackClick('like', e), children: t('yes') }), _jsx(Button, { variant: feedback.status === 'disliked' ? 'primary' : 'secondary', onClick: (e) => feedback.onFeedbackClick('dislike', e), children: t('no') })] })] })) })), tags && (_jsx(Flex, { container: { wrap: 'wrap' }, as: StyledTags, children: tags.list.map(tag => (_jsx(Tag, { tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, ...(tags.onTagClick ? { onClick: () => tags.onTagClick?.(tag.id) } : undefined), rel: 'tag', children: tag.tagName }, tag.id))) })), relatedLinks && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_related_links') }), _jsx(Flex, { as: StyledRelatedItemsList, container: { direction: 'column', alignItems: 'start', gap: 0.5 }, children: relatedLinks?.map(({ title, href }) => {
45
- return (_jsx(Link, { href: href, target: '_blank', children: title }, title));
46
- }) })] })), relatedArticles && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_more_like_this') }), _jsx(Flex, { as: StyledRelatedItemsList, container: { direction: 'column', alignItems: 'start', gap: 0.5 }, children: relatedArticles?.map(({ id, title, onClick }) => {
47
- return (_jsx(Button, { variant: 'link', onClick: (e) => onClick(id, e), children: title }, id));
48
- }) })] })), attachments && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_attachments') }), _jsx(Grid, { container: {
49
- cols: 'repeat(auto-fill, minmax(10rem, 1fr))',
50
- gap: 1
51
- }, as: 'ul', children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name }))) })] }))] }));
52
- };
53
- export default ArticleFooter;
54
- //# sourceMappingURL=ArticleFooter.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Tag,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n FileUploadItemProps,\n Button,\n Text,\n Link,\n useI18n,\n FileUploadItem,\n Grid\n} from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nexport interface ArticleTag {\n /** Tag name */\n tagName: string;\n /** Tag id. If not set tagName is treated as id */\n id: string;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n /** Feedback for this article */\n feedback?: {\n showThanksMessage?: boolean;\n /** Weather the current article is liked or disliked. Used to determine */\n status?: 'liked' | 'disliked';\n /** Callback triggered on click of like or dislike */\n onFeedbackClick: (button: 'like' | 'dislike', e: MouseEvent<HTMLButtonElement>) => void;\n };\n tags?: {\n /** Article tags */\n list: ArticleTag[];\n /** Callback that triggers on click of tag */\n onTagClick?: (id: ArticleTag['id']) => void;\n };\n /** Links to external sites */\n relatedLinks?: { title: string; href: string }[];\n /** Links to other articles */\n relatedArticles?: {\n id: string;\n title: string;\n onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n }[];\n /** Attachments */\n attachments?: FileUploadItemProps[];\n}\n\nconst StyledRelatedItemsContainer = styled.div``;\nconst StyledRelatedItemsList = styled.div``;\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n return css`\n flex-shrink: 0;\n &::before {\n content: '';\n display: block;\n background: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin-bottom: calc(2 * ${theme.base.spacing});\n }\n\n ${StyledRelatedItemsContainer} {\n margin-block-start: ${theme.base.spacing};\n & > ${StyledRelatedItemsList} * {\n margin-inline-start: 0;\n }\n }\n `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n return css`\n padding: calc(0.25 * ${theme.base.spacing});\n margin: 0 calc(-0.5 * ${theme.base.spacing});\n & > ${StyledTag} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n props: ArticleFooterProps\n) => {\n const { tags, relatedLinks, relatedArticles, feedback, attachments, ...restProps } = props;\n const t = useI18n();\n\n return (\n <Flex\n as={StyledArticleFooter}\n container={{\n direction: 'column',\n gap: 2\n }}\n {...restProps}\n >\n {feedback && (\n <Flex container={{ gap: 2, alignItems: 'center' }}>\n {feedback.showThanksMessage ? (\n <Text>{t('article_thank_you_for_your_feedback')}</Text>\n ) : (\n <>\n <Text>{t('article_was_this_helpful')}</Text>\n <Flex container>\n <Button\n variant={feedback.status === 'liked' ? 'primary' : 'secondary'}\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n feedback.onFeedbackClick('like', e)\n }\n >\n {t('yes')}\n </Button>\n <Button\n variant={feedback.status === 'disliked' ? 'primary' : 'secondary'}\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n feedback.onFeedbackClick('dislike', e)\n }\n >\n {t('no')}\n </Button>\n </Flex>\n </>\n )}\n </Flex>\n )}\n {tags && (\n <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n {tags.list.map(tag => (\n <Tag\n tabIndex={0}\n type='pill'\n variant='light'\n key={tag.id}\n data-tag-id={tag.id}\n {...(tags.onTagClick ? { onClick: () => tags.onTagClick?.(tag.id) } : undefined)}\n rel='tag'\n >\n {tag.tagName}\n </Tag>\n ))}\n </Flex>\n )}\n\n {relatedLinks && (\n <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n <Text variant='h3'>{t('article_related_links')}</Text>\n <Flex\n as={StyledRelatedItemsList}\n container={{ direction: 'column', alignItems: 'start', gap: 0.5 }}\n >\n {relatedLinks?.map(({ title, href }) => {\n return (\n <Link href={href} target='_blank' key={title}>\n {title}\n </Link>\n );\n })}\n </Flex>\n </Flex>\n )}\n\n {relatedArticles && (\n <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n <Text variant='h3'>{t('article_more_like_this')}</Text>\n <Flex\n as={StyledRelatedItemsList}\n container={{ direction: 'column', alignItems: 'start', gap: 0.5 }}\n >\n {relatedArticles?.map(({ id, title, onClick }) => {\n return (\n <Button\n key={id}\n variant='link'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n >\n {title}\n </Button>\n );\n })}\n </Flex>\n </Flex>\n )}\n\n {attachments && (\n <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n <Text variant='h3'>{t('article_attachments')}</Text>\n <Grid\n container={{\n cols: 'repeat(auto-fill, minmax(10rem, 1fr))',\n gap: 1\n }}\n as='ul'\n >\n {attachments?.map(attachment => (\n <FileUploadItem {...attachment} key={attachment.name} />\n ))}\n </Grid>\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default ArticleFooter;\n"]}
@@ -1,13 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { DateTimeDisplayProps } from '@pega/cosmos-react-core';
3
- export interface ArticleMetaProps {
4
- category?: string;
5
- publishedDate?: DateTimeDisplayProps['value'];
6
- feedback?: {
7
- likes: number;
8
- dislikes: number;
9
- };
10
- }
11
- declare const ArticleMeta: FunctionComponent<ArticleMetaProps>;
12
- export default ArticleMeta;
13
- //# sourceMappingURL=ArticleMeta.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleMeta.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EAGL,oBAAoB,EAOrB,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA+CpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,24 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
3
- import { registerIcon, DateTimeDisplay, Flex, Icon, MetaList, Text, VisuallyHiddenText, useI18n } from '@pega/cosmos-react-core';
4
- import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
5
- registerIcon(thumbsUpSolidIcon);
6
- const ArticleMeta = ({ category, publishedDate, feedback }) => {
7
- const t = useI18n();
8
- const metaItems = useMemo(() => {
9
- const items = [];
10
- if (category) {
11
- items.push(category);
12
- }
13
- if (publishedDate) {
14
- items.push(_jsx(DateTimeDisplay, { value: publishedDate, variant: 'date', format: 'long' }));
15
- }
16
- if (feedback) {
17
- items.push(_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsxs(Flex, { "aria-label": `${feedback.likes} ${t('likes')}`, container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }), _jsxs(Text, { variant: 'secondary', children: [feedback.likes, _jsx(VisuallyHiddenText, { children: t('likes') })] })] }), _jsxs(Flex, { "aria-label": `${feedback.dislikes} ${t('dislikes')}`, container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }), _jsxs(Text, { variant: 'secondary', children: [feedback.dislikes, _jsx(VisuallyHiddenText, { children: t('dislikes') })] })] })] }, 'likes'));
18
- }
19
- return items;
20
- }, [category, publishedDate, feedback]);
21
- return _jsx(MetaList, { items: metaItems });
22
- };
23
- export default ArticleMeta;
24
- //# sourceMappingURL=ArticleMeta.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleMeta.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,YAAY,EACZ,eAAe,EAEf,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,kBAAkB,EAClB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAE5G,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAWhC,MAAM,WAAW,GAAwC,CAAC,EACxD,QAAQ,EACR,aAAa,EACb,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,QAAQ,EAAE;YACZ,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtB;QAED,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAAC,CAAC;SACpF;QAED,IAAI,QAAQ,EAAE;YACZ,KAAK,CAAC,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,MAAC,IAAI,kBACS,GAAG,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,EAC7C,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE7C,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,GAAG,EAC/B,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,aACtB,QAAQ,CAAC,KAAK,EACf,KAAC,kBAAkB,cAAE,CAAC,CAAC,OAAO,CAAC,GAAsB,IAChD,IACF,EACP,MAAC,IAAI,kBACS,GAAG,QAAQ,CAAC,QAAQ,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE,EACnD,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aAE7C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,GAAG,EACjC,MAAC,IAAI,IAAC,OAAO,EAAC,WAAW,aACtB,QAAQ,CAAC,QAAQ,EAClB,KAAC,kBAAkB,cAAE,CAAC,CAAC,UAAU,CAAC,GAAsB,IACnD,IACF,KApB8C,OAAO,CAqBvD,CACR,CAAC;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n registerIcon,\n DateTimeDisplay,\n DateTimeDisplayProps,\n Flex,\n Icon,\n MetaList,\n Text,\n VisuallyHiddenText,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\n\nregisterIcon(thumbsUpSolidIcon);\n\nexport interface ArticleMetaProps {\n category?: string;\n publishedDate?: DateTimeDisplayProps['value'];\n feedback?: {\n likes: number;\n dislikes: number;\n };\n}\n\nconst ArticleMeta: FunctionComponent<ArticleMetaProps> = ({\n category,\n publishedDate,\n feedback\n}) => {\n const t = useI18n();\n const metaItems = useMemo(() => {\n const items = [];\n if (category) {\n items.push(category);\n }\n\n if (publishedDate) {\n items.push(<DateTimeDisplay value={publishedDate} variant='date' format='long' />);\n }\n\n if (feedback) {\n items.push(\n <Flex container={{ gap: 1, alignItems: 'center' }} key='likes'>\n <Flex\n aria-label={`${feedback.likes} ${t('likes')}`}\n container={{ gap: 0.5, alignItems: 'center' }}\n >\n <Icon name='thumbs-up-solid' />\n <Text variant='secondary'>\n {feedback.likes}\n <VisuallyHiddenText>{t('likes')}</VisuallyHiddenText>\n </Text>\n </Flex>\n <Flex\n aria-label={`${feedback.dislikes} ${t('dislikes')}`}\n container={{ gap: 0.5, alignItems: 'center' }}\n >\n <Icon name='thumbs-down-solid' />\n <Text variant='secondary'>\n {feedback.dislikes}\n <VisuallyHiddenText>{t('dislikes')}</VisuallyHiddenText>\n </Text>\n </Flex>\n </Flex>\n );\n }\n\n return items;\n }, [category, publishedDate, feedback]);\n\n return <MetaList items={metaItems} />;\n};\n\nexport default ArticleMeta;\n"]}
@@ -1,5 +0,0 @@
1
- export { default } from './Article';
2
- export { default as ArticleFooter } from './ArticleFooter';
3
- export type { ArticleProps } from './Article';
4
- export type { ArticleTag, ArticleFooterProps } from './ArticleFooter';
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
@@ -1,3 +0,0 @@
1
- export { default } from './Article';
2
- export { default as ArticleFooter } from './ArticleFooter';
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './Article';\nexport { default as ArticleFooter } from './ArticleFooter';\nexport type { ArticleProps } from './Article';\nexport type { ArticleTag, ArticleFooterProps } from './ArticleFooter';\n"]}
@@ -1,6 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { ForwardProps } from '@pega/cosmos-react-core';
3
- import { ArticleListProps } from './ArticleList.types';
4
- declare const ArticleList: FunctionComponent<ArticleListProps & ForwardProps>;
5
- export default ArticleList;
6
- //# sourceMappingURL=ArticleList.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,qBAAqB,CAAC;AAgC5E,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA8KnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,109 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useMemo, useEffect, useRef, useLayoutEffect } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables } from '@pega/cosmos-react-core';
5
- import ArticleListFilter from './ArticleListFilter';
6
- import ArticleSummary from './ArticleSummary';
7
- import ArticleListHeader from './ArticleListHeader';
8
- const StyledSummaryList = styled.ul ``;
9
- const StyledArticleList = styled.div(props => {
10
- const { theme } = props;
11
- return css `
12
- max-height: inherit;
13
- overflow: auto;
14
- padding: 0 calc(2 * ${theme.base.spacing});
15
- background: ${theme.base.palette['primary-background']};
16
- border-radius: ${theme.components.card['border-radius']};
17
- > div {
18
- margin: ${theme.base.spacing} 0;
19
- }
20
-
21
- ${StyledSummaryList} {
22
- flex-grow: 1;
23
- margin: 0 0 ${theme.base.spacing} 0;
24
- list-style-type: none;
25
- > li:not(:last-child) {
26
- border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
27
- border-radius: 0;
28
- padding-bottom: ${theme.base.spacing};
29
- margin-bottom: ${theme.base.spacing};
30
- }
31
- }
32
- `;
33
- });
34
- StyledArticleList.defaultProps = defaultThemeProp;
35
- const ArticleList = forwardRef((props, ref) => {
36
- const { header, suggested, followed, search, onTabClick, activeTab, loading = false, onQuickFilterClick, ...restProps } = props;
37
- const t = useI18n();
38
- const articleContentRefs = useRef([]);
39
- const activeTabContentRef = useRef(null);
40
- const tabsRef = useRef(null);
41
- const activeElementRef = useRef(null);
42
- const tabs = useMemo(() => {
43
- const tabsArr = [];
44
- if (suggested)
45
- tabsArr.push({
46
- id: t('suggested'),
47
- name: t('suggested'),
48
- count: suggested?.count,
49
- content: suggested.articles ?? []
50
- });
51
- if (search)
52
- tabsArr.push({
53
- id: t('search'),
54
- name: t('search'),
55
- count: search?.count,
56
- content: search?.articles ?? []
57
- });
58
- if (followed)
59
- tabsArr.push({
60
- id: t('followed'),
61
- name: t('followed'),
62
- count: followed?.count,
63
- content: followed?.articles ?? []
64
- });
65
- return tabsArr;
66
- }, [suggested, followed, search]);
67
- useEffect(() => {
68
- if (tabsRef.current && getFocusables(tabsRef)?.length > 0)
69
- activeElementRef.current = getFocusables(tabsRef)[0];
70
- else {
71
- activeTabContentRef.current =
72
- articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];
73
- if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {
74
- activeElementRef.current = getFocusables(activeTabContentRef)[0];
75
- }
76
- }
77
- }, []);
78
- useLayoutEffect(() => {
79
- if (loading && document.activeElement instanceof HTMLElement) {
80
- activeElementRef.current = document.activeElement;
81
- }
82
- if (!loading && search?.quickFilters?.length === 0) {
83
- activeElementRef.current?.focus();
84
- activeElementRef.current = null;
85
- }
86
- }, [loading]);
87
- const articleContent = ({ index, content }) => {
88
- return (_jsxs("div", { ref: el => {
89
- if (el)
90
- articleContentRefs.current[index] = el;
91
- }, children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading ? (_jsx(Progress, { visible: !!loading, focusOnVisible: true, placement: 'block', message: t('loading') })) : (_jsx(Flex, { container: { direction: 'column' }, as: StyledSummaryList, role: 'feed', children: content.length > 0 ? (content.map(({ href, articleId, title: summaryHeader, abstract, meta, onTitleClick, quickFilters, primaryActions: summaryActions }) => (_jsx(ArticleSummary, { articleId: articleId, href: href, title: summaryHeader, abstract: abstract, onTitleClick: onTitleClick, primaryActions: summaryActions, meta: meta, quickFilters: quickFilters, onQuickFilterClick: onQuickFilterClick }, articleId.toString())))) : (_jsx(EmptyState, {})) }))] }));
92
- };
93
- return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledArticleList, "aria-label": t('article_list_label_a11y'), ref: ref, ...(loading ? { 'aria-busy': true } : undefined), ...restProps, children: [header && (_jsx(ArticleListHeader, { icon: header.icon, title: header.title, actions: header.actions })), tabs.length > 1 && (_jsx(Tabs, { ref: tabsRef, tabs: tabs, onTabClick: (name, e) => {
94
- if (document.activeElement instanceof HTMLElement) {
95
- activeElementRef.current = document.activeElement;
96
- onTabClick?.(name, e);
97
- }
98
- }, currentTabId: activeTab })), tabs.map(({ id, content }, index) => {
99
- if (tabs.length > 1) {
100
- return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, children: articleContent({ content, index }) }, id));
101
- }
102
- if (tabs.length === 1) {
103
- return articleContent({ content, index });
104
- }
105
- return _jsx(EmptyState, {});
106
- })] }));
107
- });
108
- export default ArticleList;
109
- //# sourceMappingURL=ArticleList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n Ref,\n PropsWithoutRef,\n useMemo,\n useEffect,\n useRef,\n useLayoutEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n TabPanel,\n Tabs,\n Tab,\n EmptyState,\n Progress,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport { ArticleListProps, ArticleSummaryProps } from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\n\nconst StyledSummaryList = styled.ul``;\n\nconst StyledArticleList = styled.div(props => {\n const { theme } = props;\n return css`\n max-height: inherit;\n overflow: auto;\n padding: 0 calc(2 * ${theme.base.spacing});\n background: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n > div {\n margin: ${theme.base.spacing} 0;\n }\n\n ${StyledSummaryList} {\n flex-grow: 1;\n margin: 0 0 ${theme.base.spacing} 0;\n list-style-type: none;\n > li:not(:last-child) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: 0;\n padding-bottom: ${theme.base.spacing};\n margin-bottom: ${theme.base.spacing};\n }\n }\n `;\n});\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n const {\n header,\n suggested,\n followed,\n search,\n onTabClick,\n activeTab,\n loading = false,\n onQuickFilterClick,\n ...restProps\n } = props;\n const t = useI18n();\n\n const articleContentRefs = useRef<HTMLDivElement[]>([]);\n const activeTabContentRef = useRef<HTMLDivElement | null>(null);\n const tabsRef = useRef<HTMLButtonElement>(null);\n const activeElementRef = useRef<HTMLElement | null>(null);\n\n const tabs = useMemo(() => {\n const tabsArr: (Tab & {\n content: ArticleSummaryProps[];\n })[] = [];\n\n if (suggested)\n tabsArr.push({\n id: t('suggested'),\n name: t('suggested'),\n count: suggested?.count,\n content: suggested.articles ?? []\n });\n\n if (search)\n tabsArr.push({\n id: t('search'),\n name: t('search'),\n count: search?.count,\n content: search?.articles ?? []\n });\n\n if (followed)\n tabsArr.push({\n id: t('followed'),\n name: t('followed'),\n count: followed?.count,\n content: followed?.articles ?? []\n });\n\n return tabsArr;\n }, [suggested, followed, search]);\n\n useEffect(() => {\n if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n activeElementRef.current = getFocusables(tabsRef)[0];\n else {\n activeTabContentRef.current =\n articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n activeElementRef.current = getFocusables(activeTabContentRef)[0];\n }\n }\n }, []);\n\n useLayoutEffect(() => {\n if (loading && document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n }\n if (!loading && search?.quickFilters?.length === 0) {\n activeElementRef.current?.focus();\n activeElementRef.current = null;\n }\n }, [loading]);\n\n const articleContent = ({\n index,\n content\n }: {\n index: number;\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n }) => {\n return (\n <div\n ref={el => {\n if (el) articleContentRefs.current[index] = el;\n }}\n >\n {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n {loading ? (\n <Progress visible={!!loading} focusOnVisible placement='block' message={t('loading')} />\n ) : (\n <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n {content.length > 0 ? (\n content.map(\n ({\n href,\n articleId,\n title: summaryHeader,\n abstract,\n meta,\n onTitleClick,\n quickFilters,\n primaryActions: summaryActions\n }) => (\n <ArticleSummary\n key={articleId.toString()}\n articleId={articleId}\n href={href}\n title={summaryHeader}\n abstract={abstract}\n onTitleClick={onTitleClick}\n primaryActions={summaryActions}\n meta={meta}\n quickFilters={quickFilters}\n onQuickFilterClick={onQuickFilterClick}\n />\n )\n )\n ) : (\n <EmptyState />\n )}\n </Flex>\n )}\n </div>\n );\n };\n\n return (\n <Flex\n container={{ direction: 'column' }}\n as={StyledArticleList}\n aria-label={t('article_list_label_a11y')}\n ref={ref}\n {...(loading ? { 'aria-busy': true } : undefined)}\n {...restProps}\n >\n {header && (\n <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n )}\n\n {tabs.length > 1 && (\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n onTabClick={(name, e) => {\n if (document.activeElement instanceof HTMLElement) {\n activeElementRef.current = document.activeElement;\n onTabClick?.(name, e);\n }\n }}\n currentTabId={activeTab}\n />\n )}\n\n {tabs.map(({ id, content }, index) => {\n if (tabs.length > 1) {\n return (\n <TabPanel key={id} tabId={id} currentTabId={activeTab}>\n {articleContent({ content, index })}\n </TabPanel>\n );\n }\n\n if (tabs.length === 1) {\n return articleContent({ content, index });\n }\n\n return <EmptyState />;\n })}\n </Flex>\n );\n }\n);\n\nexport default ArticleList;\n"]}
@@ -1,79 +0,0 @@
1
- import { MouseEvent, MouseEventHandler } from 'react';
2
- import { Action, BaseProps, ComboBoxProps, OmitStrict, RequireAtLeastOne, SearchInputProps } from '@pega/cosmos-react-core';
3
- import { ArticleMetaProps } from '../Article/ArticleMeta';
4
- export interface ArticleSummaryProps extends BaseProps {
5
- /** Unique id of article */
6
- articleId: string;
7
- /** URL or DOM id to navigate to. This will render the nav item as a link. */
8
- href?: string;
9
- /** Article title */
10
- title: string;
11
- /** Article content */
12
- abstract: string;
13
- /** Callback fired when article title is clicked */
14
- onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
15
- /** Primary actions which needs to be displayed with an icon */
16
- primaryActions?: Action[];
17
- /** A list of elements to be rendered within a MetaList. */
18
- meta?: ArticleMetaProps;
19
- /** Quick filters to filter articles */
20
- quickFilters?: QuickFilter[];
21
- /** callback fired when quick filter is clicked */
22
- onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];
23
- }
24
- export interface Articles {
25
- /** List of articles */
26
- articles: ArticleSummaryProps[];
27
- /** count of articles */
28
- count?: number;
29
- /** Props related to the Search Input. */
30
- searchInput: OmitStrict<SearchInputProps, 'placeholder' | 'onSearchSubmit' | 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'>;
31
- /** Props related to the Category Input. */
32
- category?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'actions' | 'additionalInfo'>;
33
- /** Props related to the SortBy Input. */
34
- sortBy?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'mode' | 'actions' | 'additionalInfo' | 'onChange' | 'value'>;
35
- /** Callback fired when clear button is clicked */
36
- onClearClick?: MouseEventHandler<HTMLButtonElement>;
37
- /** Quick filters to filter articles */
38
- quickFilters?: QuickFilter[];
39
- /** Callback fired when applied quick filter is removed */
40
- handleQuickFilterRemove?: (id: string) => void;
41
- /** Prop to enable show / hide results */
42
- showResults?: boolean;
43
- }
44
- export interface ArticleListHeaderProps {
45
- /** Title of article list */
46
- title: string;
47
- /** Article list header icon */
48
- icon?: string;
49
- /** Actions which needs to be displayed with an icon */
50
- actions?: Action[];
51
- }
52
- export type ArticleListProps = RequireAtLeastOne<{
53
- /** Props related to article list header */
54
- header?: ArticleListHeaderProps;
55
- /** Data of suggested articles */
56
- suggested?: Pick<Articles, 'articles' | 'count'>;
57
- /** Data of followed articles */
58
- followed?: Articles;
59
- /** Data of search articles */
60
- search?: Articles;
61
- /** current active tab whose list has to be rendered */
62
- activeTab: string;
63
- /** Callback fired when tab is clicked */
64
- onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
65
- /**
66
- * Optionally renders an indeterminate progress indicator while articles are being fetched.
67
- * @default false
68
- */
69
- loading?: boolean;
70
- /** callback fired when quick filter is clicked */
71
- onQuickFilterClick?: (quickFilterParam: QuickFilter, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
72
- }, 'suggested' | 'followed' | 'search'>;
73
- export interface QuickFilter {
74
- /** Unique id of quick Filter */
75
- id: string;
76
- /** Name of quick Filter */
77
- name: string;
78
- }
79
- //# sourceMappingURL=ArticleList.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleList.types.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=ArticleList.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ArticleList.types.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n Action,\n BaseProps,\n ComboBoxProps,\n OmitStrict,\n RequireAtLeastOne,\n SearchInputProps\n} from '@pega/cosmos-react-core';\n\nimport { ArticleMetaProps } from '../Article/ArticleMeta';\n\nexport interface ArticleSummaryProps extends BaseProps {\n /** Unique id of article */\n articleId: string;\n /** URL or DOM id to navigate to. This will render the nav item as a link. */\n href?: string;\n /** Article title */\n title: string;\n /** Article content */\n abstract: string;\n /** Callback fired when article title is clicked */\n onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /** Primary actions which needs to be displayed with an icon */\n primaryActions?: Action[];\n /** A list of elements to be rendered within a MetaList. */\n meta?: ArticleMetaProps;\n /** Quick filters to filter articles */\n quickFilters?: QuickFilter[];\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];\n}\n\nexport interface Articles {\n /** List of articles */\n articles: ArticleSummaryProps[];\n /** count of articles */\n count?: number;\n /** Props related to the Search Input. */\n searchInput: OmitStrict<\n SearchInputProps,\n | 'placeholder'\n | 'onSearchSubmit'\n | 'searchResults'\n | 'recentSearches'\n | 'advancedSearchLink'\n | 'resultsPopover'\n >;\n /** Props related to the Category Input. */\n category?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'actions'\n | 'additionalInfo'\n >;\n /** Props related to the SortBy Input. */\n sortBy?: OmitStrict<\n ComboBoxProps,\n | 'id'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'status'\n | 'info'\n | 'mode'\n | 'actions'\n | 'additionalInfo'\n | 'onChange'\n | 'value'\n >;\n /** Callback fired when clear button is clicked */\n onClearClick?: MouseEventHandler<HTMLButtonElement>;\n /** Quick filters to filter articles */\n quickFilters?: QuickFilter[];\n /** Callback fired when applied quick filter is removed */\n handleQuickFilterRemove?: (id: string) => void;\n /** Prop to enable show / hide results */\n showResults?: boolean;\n}\n\nexport interface ArticleListHeaderProps {\n /** Title of article list */\n title: string;\n /** Article list header icon */\n icon?: string;\n /** Actions which needs to be displayed with an icon */\n actions?: Action[];\n}\n\nexport type ArticleListProps = RequireAtLeastOne<\n {\n /** Props related to article list header */\n header?: ArticleListHeaderProps;\n /** Data of suggested articles */\n suggested?: Pick<Articles, 'articles' | 'count'>;\n /** Data of followed articles */\n followed?: Articles;\n /** Data of search articles */\n search?: Articles;\n /** current active tab whose list has to be rendered */\n activeTab: string;\n /** Callback fired when tab is clicked */\n onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n /**\n * Optionally renders an indeterminate progress indicator while articles are being fetched.\n * @default false\n */\n loading?: boolean;\n /** callback fired when quick filter is clicked */\n onQuickFilterClick?: (\n quickFilterParam: QuickFilter,\n event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void;\n },\n 'suggested' | 'followed' | 'search'\n>;\n\nexport interface QuickFilter {\n /** Unique id of quick Filter */\n id: string;\n /** Name of quick Filter */\n name: string;\n}\n"]}