@pega/cosmos-react-cs 4.0.0-dev.23.1 → 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.
- package/lib/components/CallControlPanel/CallControlPanel.js +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map +1 -1
- package/lib/components/CallControlPanel/ContactList/CalleePicker.js +1 -1
- package/lib/components/CallControlPanel/ContactList/CalleePicker.js.map +1 -1
- package/lib/components/CallControlPanel/ContactList/ContactList.js +1 -1
- package/lib/components/CallControlPanel/ContactList/ContactList.js.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.js +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.js.map +1 -1
- package/lib/components/CallControlPanel/FloatingPanel.js +1 -1
- package/lib/components/CallControlPanel/FloatingPanel.js.map +1 -1
- package/lib/components/DialPad/DialPad.d.ts.map +1 -1
- package/lib/components/DialPad/DialPad.js +1 -1
- package/lib/components/DialPad/DialPad.js.map +1 -1
- package/lib/components/DialPad/DialPadKeyboard.js +1 -1
- package/lib/components/DialPad/DialPadKeyboard.js.map +1 -1
- package/lib/components/InteractionNotification/CountdownButton.js +1 -1
- package/lib/components/InteractionNotification/CountdownButton.js.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.js +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.js.map +1 -1
- package/lib/components/Picker/Picker.d.ts.map +1 -1
- package/lib/components/Picker/Picker.js +1 -1
- package/lib/components/Picker/Picker.js.map +1 -1
- package/lib/components/TaskManager/ConversationAI.js +1 -1
- package/lib/components/TaskManager/ConversationAI.js.map +1 -1
- package/lib/components/TaskManager/Dialogue.d.ts.map +1 -1
- package/lib/components/TaskManager/Dialogue.js +1 -1
- package/lib/components/TaskManager/Dialogue.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.js +1 -1
- package/lib/components/TaskManager/TaskManager.js.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.js +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
- package/lib/components/TaskManager/TaskPicker.js +1 -1
- package/lib/components/TaskManager/TaskPicker.js.map +1 -1
- package/lib/components/TaskManager/TaskView.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskView.js +1 -1
- package/lib/components/TaskManager/TaskView.js.map +1 -1
- package/lib/index.d.ts +0 -4
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +0 -4
- package/lib/index.js.map +1 -1
- package/package.json +3 -3
- package/lib/components/Article/Article.d.ts +0 -49
- package/lib/components/Article/Article.d.ts.map +0 -1
- package/lib/components/Article/Article.js +0 -73
- package/lib/components/Article/Article.js.map +0 -1
- package/lib/components/Article/ArticleFooter.d.ts +0 -40
- package/lib/components/Article/ArticleFooter.d.ts.map +0 -1
- package/lib/components/Article/ArticleFooter.js +0 -54
- package/lib/components/Article/ArticleFooter.js.map +0 -1
- package/lib/components/Article/ArticleMeta.d.ts +0 -13
- package/lib/components/Article/ArticleMeta.d.ts.map +0 -1
- package/lib/components/Article/ArticleMeta.js +0 -24
- package/lib/components/Article/ArticleMeta.js.map +0 -1
- package/lib/components/Article/index.d.ts +0 -5
- package/lib/components/Article/index.d.ts.map +0 -1
- package/lib/components/Article/index.js +0 -3
- package/lib/components/Article/index.js.map +0 -1
- package/lib/components/ArticleList/ArticleList.d.ts +0 -6
- package/lib/components/ArticleList/ArticleList.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleList.js +0 -112
- package/lib/components/ArticleList/ArticleList.js.map +0 -1
- package/lib/components/ArticleList/ArticleList.types.d.ts +0 -79
- package/lib/components/ArticleList/ArticleList.types.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleList.types.js +0 -2
- package/lib/components/ArticleList/ArticleList.types.js.map +0 -1
- package/lib/components/ArticleList/ArticleListFilter.d.ts +0 -6
- package/lib/components/ArticleList/ArticleListFilter.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleListFilter.js +0 -60
- package/lib/components/ArticleList/ArticleListFilter.js.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.d.ts +0 -5
- package/lib/components/ArticleList/ArticleListHeader.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.js +0 -20
- package/lib/components/ArticleList/ArticleListHeader.js.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.d.ts +0 -7
- package/lib/components/ArticleList/ArticleSummary.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.js +0 -46
- package/lib/components/ArticleList/ArticleSummary.js.map +0 -1
- package/lib/components/ArticleList/index.d.ts +0 -6
- package/lib/components/ArticleList/index.d.ts.map +0 -1
- package/lib/components/ArticleList/index.js +0 -4
- 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,CA0G3D,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, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: title ?? t('article_label_a11y') } })] }));
|
|
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\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: title ?? t('article_label_a11y') }}\n />\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 +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 +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,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAA0B,gBAAgB,EAAuB,MAAM,qBAAqB,CAAC;AAgCpG,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAyLnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo, useEffect, useRef } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables, useLiveLog } 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 { announcePolite } = useLiveLog();
|
|
39
|
-
const articleContentRefs = useRef([]);
|
|
40
|
-
const activeTabContentRef = useRef(null);
|
|
41
|
-
const tabsRef = useRef(null);
|
|
42
|
-
const activeElementRef = useRef(null);
|
|
43
|
-
const tabs = useMemo(() => {
|
|
44
|
-
const tabsArr = [];
|
|
45
|
-
if (suggested)
|
|
46
|
-
tabsArr.push({
|
|
47
|
-
id: t('suggested'),
|
|
48
|
-
name: t('suggested'),
|
|
49
|
-
count: suggested?.count,
|
|
50
|
-
content: suggested.articles ?? []
|
|
51
|
-
});
|
|
52
|
-
if (search)
|
|
53
|
-
tabsArr.push({
|
|
54
|
-
id: t('search'),
|
|
55
|
-
name: t('search'),
|
|
56
|
-
count: search?.count,
|
|
57
|
-
content: search?.articles ?? []
|
|
58
|
-
});
|
|
59
|
-
if (followed)
|
|
60
|
-
tabsArr.push({
|
|
61
|
-
id: t('followed'),
|
|
62
|
-
name: t('followed'),
|
|
63
|
-
count: followed?.count,
|
|
64
|
-
content: followed?.articles ?? []
|
|
65
|
-
});
|
|
66
|
-
return tabsArr;
|
|
67
|
-
}, [suggested, followed, search]);
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
if (tabsRef.current && getFocusables(tabsRef)?.length > 0)
|
|
70
|
-
activeElementRef.current = getFocusables(tabsRef)[0];
|
|
71
|
-
else {
|
|
72
|
-
activeTabContentRef.current =
|
|
73
|
-
articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];
|
|
74
|
-
if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {
|
|
75
|
-
activeElementRef.current = getFocusables(activeTabContentRef)[0];
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}, []);
|
|
79
|
-
useEffect(() => {
|
|
80
|
-
if (!loading) {
|
|
81
|
-
const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;
|
|
82
|
-
announcePolite({
|
|
83
|
-
type: 'status',
|
|
84
|
-
message: currentTabContent && currentTabContent?.length > 0
|
|
85
|
-
? `${header?.title || t('article_list_label_a11y')} ${t('loaded')}`
|
|
86
|
-
: t('no_items')
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
}, [loading]);
|
|
90
|
-
const articleContent = ({ index, content, headerTitle }) => {
|
|
91
|
-
return (_jsxs("div", { ref: el => {
|
|
92
|
-
if (el)
|
|
93
|
-
articleContentRefs.current[index] = el;
|
|
94
|
-
}, children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading ? (_jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: headerTitle ?? t('article_list_label_a11y') } })) : (_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, {})) }))] }));
|
|
95
|
-
};
|
|
96
|
-
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) => {
|
|
97
|
-
if (document.activeElement instanceof HTMLElement) {
|
|
98
|
-
activeElementRef.current = document.activeElement;
|
|
99
|
-
onTabClick?.(name, e);
|
|
100
|
-
}
|
|
101
|
-
}, currentTabId: activeTab })), tabs.map(({ id, content }, index) => {
|
|
102
|
-
if (tabs.length > 1) {
|
|
103
|
-
return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, children: id === activeTab && articleContent({ content, index, headerTitle: header?.title }) }, id));
|
|
104
|
-
}
|
|
105
|
-
if (tabs.length === 1) {
|
|
106
|
-
return articleContent({ content, index, headerTitle: header?.title });
|
|
107
|
-
}
|
|
108
|
-
return _jsx(EmptyState, {});
|
|
109
|
-
})] }));
|
|
110
|
-
});
|
|
111
|
-
export default ArticleList;
|
|
112
|
-
//# 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} 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 useLiveLog\n} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport { ArticleListHeaderProps, 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 const { announcePolite } = useLiveLog();\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 useEffect(() => {\n if (!loading) {\n const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n announcePolite({\n type: 'status',\n message:\n currentTabContent && currentTabContent?.length > 0\n ? `${header?.title || t('article_list_label_a11y')} ${t('loaded')}`\n : t('no_items')\n });\n }\n }, [loading]);\n\n const articleContent = ({\n index,\n content,\n headerTitle\n }: {\n index: number;\n count?: Tab['count'];\n content: ArticleSummaryProps[];\n headerTitle?: ArticleListHeaderProps['title'];\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\n visible={!!loading}\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: headerTitle ?? t('article_list_label_a11y') }}\n />\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 {id === activeTab && articleContent({ content, index, headerTitle: header?.title })}\n </TabPanel>\n );\n }\n\n if (tabs.length === 1) {\n return articleContent({ content, index, headerTitle: header?.title });\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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"}
|