@pega/cosmos-react-cs 4.0.0-dev.9.1 → 4.0.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/AttachInteractionDialog.d.ts.map +1 -1
- package/lib/components/CallControlPanel/AttachInteractionDialog.js +2 -6
- package/lib/components/CallControlPanel/AttachInteractionDialog.js.map +1 -1
- package/lib/components/CallControlPanel/Call.d.ts.map +1 -1
- package/lib/components/CallControlPanel/Call.js +16 -14
- package/lib/components/CallControlPanel/Call.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.js +25 -22
- package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.styles.js +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.styles.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts +10 -16
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts +3 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js +8 -7
- package/lib/components/CallControlPanel/CallHandover/CallHandoverDialog.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts +5 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js +8 -6
- 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/ContactList/ContactList.types.d.ts +1 -1
- package/lib/components/CallControlPanel/ContactList/ContactList.types.d.ts.map +1 -1
- package/lib/components/CallControlPanel/ContactList/ContactList.types.js.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.d.ts +1 -3
- package/lib/components/CallControlPanel/ExternalCTI.d.ts.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.d.ts.map +1 -1
- package/lib/components/CallControlPanel/FloatingPanel.js +2 -2
- package/lib/components/CallControlPanel/FloatingPanel.js.map +1 -1
- package/lib/components/CallControlPanel/StopWatch.d.ts +3 -1
- package/lib/components/CallControlPanel/StopWatch.d.ts.map +1 -1
- package/lib/components/CallControlPanel/StopWatch.js.map +1 -1
- package/lib/components/CallControlPanel/index.d.ts +1 -1
- package/lib/components/CallControlPanel/index.d.ts.map +1 -1
- package/lib/components/CallControlPanel/index.js.map +1 -1
- package/lib/components/CallControlPanel/utils.d.ts.map +1 -1
- package/lib/components/CallControlPanel/utils.js +0 -1
- package/lib/components/CallControlPanel/utils.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/DialPad.types.d.ts +3 -3
- package/lib/components/DialPad/DialPad.types.d.ts.map +1 -1
- package/lib/components/DialPad/DialPadDialog.d.ts.map +1 -1
- package/lib/components/DialPad/DialPadDialog.js +1 -0
- package/lib/components/DialPad/DialPadDialog.js.map +1 -1
- package/lib/components/DialPad/DialPadKeyboard.d.ts +1 -1
- package/lib/components/DialPad/DialPadKeyboard.d.ts.map +1 -1
- package/lib/components/DialPad/DialPadKeyboard.js +1 -1
- package/lib/components/DialPad/DialPadKeyboard.js.map +1 -1
- package/lib/components/DialPad/KeyboardNavigation.js.map +1 -1
- package/lib/components/DialPad/index.d.ts +1 -1
- package/lib/components/DialPad/index.d.ts.map +1 -1
- package/lib/components/DialPad/index.js.map +1 -1
- package/lib/components/InteractionNotification/CountdownButton.d.ts +15 -0
- package/lib/components/InteractionNotification/CountdownButton.d.ts.map +1 -0
- package/lib/components/InteractionNotification/{AcceptButton.js → CountdownButton.js} +8 -10
- package/lib/components/InteractionNotification/CountdownButton.js.map +1 -0
- package/lib/components/InteractionNotification/InteractionNotification.d.ts +4 -4
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +52 -20
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.d.ts +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.d.ts.map +1 -1
- package/lib/components/InteractionTimer/InteractionTimer.js +23 -5
- package/lib/components/InteractionTimer/InteractionTimer.js.map +1 -1
- package/lib/components/InteractionTimer/index.d.ts +2 -1
- package/lib/components/InteractionTimer/index.d.ts.map +1 -1
- package/lib/components/InteractionTimer/index.js.map +1 -1
- package/lib/components/Picker/Picker.d.ts +6 -0
- package/lib/components/Picker/Picker.d.ts.map +1 -0
- package/lib/components/Picker/Picker.js +109 -0
- package/lib/components/Picker/Picker.js.map +1 -0
- package/lib/components/Picker/Picker.styles.d.ts +10 -0
- package/lib/components/Picker/Picker.styles.d.ts.map +1 -0
- package/lib/components/Picker/Picker.styles.js +59 -0
- package/lib/components/Picker/Picker.styles.js.map +1 -0
- package/lib/components/Picker/Picker.types.d.ts +35 -0
- package/lib/components/Picker/Picker.types.d.ts.map +1 -0
- package/lib/components/Picker/Picker.types.js.map +1 -0
- package/lib/components/Picker/index.d.ts +2 -0
- package/lib/components/Picker/index.d.ts.map +1 -0
- package/lib/components/Picker/index.js +2 -0
- package/lib/components/Picker/index.js.map +1 -0
- 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.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.js +42 -33
- package/lib/components/TaskManager/TaskManager.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.styles.d.ts +6 -2
- package/lib/components/TaskManager/TaskManager.styles.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.styles.js +17 -3
- package/lib/components/TaskManager/TaskManager.styles.js.map +1 -1
- package/lib/components/TaskManager/TaskManager.types.d.ts +6 -4
- package/lib/components/TaskManager/TaskManager.types.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManager.types.js.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.d.ts.map +1 -1
- package/lib/components/TaskManager/TaskManagerTabs.js +8 -9
- package/lib/components/TaskManager/TaskManagerTabs.js.map +1 -1
- package/lib/components/TaskManager/TaskPicker.d.ts +19 -0
- package/lib/components/TaskManager/TaskPicker.d.ts.map +1 -0
- package/lib/components/TaskManager/TaskPicker.js +89 -0
- package/lib/components/TaskManager/TaskPicker.js.map +1 -0
- 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/components/TaskManager/index.d.ts +2 -2
- package/lib/components/TaskManager/index.d.ts.map +1 -1
- package/lib/components/TaskManager/index.js +1 -1
- package/lib/components/TaskManager/index.js.map +1 -1
- package/lib/index.d.ts +1 -4
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -4
- package/lib/index.js.map +1 -1
- package/package.json +13 -15
- package/lib/components/Article/Article.d.ts +0 -32
- package/lib/components/Article/Article.d.ts.map +0 -1
- package/lib/components/Article/Article.js +0 -54
- package/lib/components/Article/Article.js.map +0 -1
- package/lib/components/Article/ArticleFooter.d.ts +0 -19
- package/lib/components/Article/ArticleFooter.d.ts.map +0 -1
- package/lib/components/Article/ArticleFooter.js +0 -40
- package/lib/components/Article/ArticleFooter.js.map +0 -1
- package/lib/components/Article/ArticleSkeleton.d.ts +0 -8
- package/lib/components/Article/ArticleSkeleton.d.ts.map +0 -1
- package/lib/components/Article/ArticleSkeleton.js +0 -15
- package/lib/components/Article/ArticleSkeleton.js.map +0 -1
- package/lib/components/Article/index.d.ts +0 -6
- 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 -17
- package/lib/components/ArticleList/ArticleList.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleList.js +0 -65
- package/lib/components/ArticleList/ArticleList.js.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.d.ts +0 -21
- package/lib/components/ArticleList/ArticleListHeader.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleListHeader.js +0 -68
- package/lib/components/ArticleList/ArticleListHeader.js.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.d.ts +0 -14
- package/lib/components/ArticleList/ArticleSummary.d.ts.map +0 -1
- package/lib/components/ArticleList/ArticleSummary.js +0 -30
- package/lib/components/ArticleList/ArticleSummary.js.map +0 -1
- package/lib/components/ArticleList/SummarySkeleton.d.ts +0 -7
- package/lib/components/ArticleList/SummarySkeleton.d.ts.map +0 -1
- package/lib/components/ArticleList/SummarySkeleton.js +0 -9
- package/lib/components/ArticleList/SummarySkeleton.js.map +0 -1
- package/lib/components/ArticleList/index.d.ts +0 -7
- 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
- package/lib/components/InteractionNotification/AcceptButton.d.ts +0 -15
- package/lib/components/InteractionNotification/AcceptButton.d.ts.map +0 -1
- package/lib/components/InteractionNotification/AcceptButton.js.map +0 -1
- package/lib/components/TaskManager/Picker/Picker.d.ts +0 -14
- package/lib/components/TaskManager/Picker/Picker.d.ts.map +0 -1
- package/lib/components/TaskManager/Picker/Picker.js +0 -260
- package/lib/components/TaskManager/Picker/Picker.js.map +0 -1
- package/lib/components/TaskManager/Picker/Picker.types.d.ts +0 -28
- package/lib/components/TaskManager/Picker/Picker.types.d.ts.map +0 -1
- package/lib/components/TaskManager/Picker/Picker.types.js.map +0 -1
- /package/lib/components/{TaskManager/Picker → Picker}/Picker.types.js +0 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
+
import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
|
|
6
|
+
import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
|
|
7
|
+
import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
|
|
8
|
+
import Picker from '../Picker';
|
|
9
|
+
export const StyledSingleTaskDialog = styled(Dialog)(() => {
|
|
10
|
+
return css `
|
|
11
|
+
${StyledMenu} {
|
|
12
|
+
overflow: auto;
|
|
13
|
+
}
|
|
14
|
+
`;
|
|
15
|
+
});
|
|
16
|
+
export const StyledMultiTaskDialog = styled(FormDialog)(({ theme: { base: { spacing } } }) => {
|
|
17
|
+
return css `
|
|
18
|
+
${StyledDialogContent},
|
|
19
|
+
${StyledChildrenWrap} {
|
|
20
|
+
display: flex;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
${StyledDialogHeader} {
|
|
24
|
+
padding-inline: ${spacing};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
${StyledDialogContent} {
|
|
28
|
+
padding-inline: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
${StyledMenu} {
|
|
32
|
+
overflow: auto;
|
|
33
|
+
}
|
|
34
|
+
`;
|
|
35
|
+
});
|
|
36
|
+
StyledMultiTaskDialog.defaultProps = defaultThemeProp;
|
|
37
|
+
const TaskPicker = forwardRef(function TaskPicker({ items, onAdd, onCancel, target, ...restProps }, ref) {
|
|
38
|
+
const t = useI18n();
|
|
39
|
+
const headingId = useUID();
|
|
40
|
+
const [selections, setSelections] = useState([]);
|
|
41
|
+
const [enableMultiSelect, setEnableMultiSelect] = useState(false);
|
|
42
|
+
const [pickerEl, setPickerEl] = useElement();
|
|
43
|
+
const pickerRef = useConsolidatedRef(ref, setPickerEl);
|
|
44
|
+
const initialRender = useRef(true);
|
|
45
|
+
const toggleHandleRef = useRef(null);
|
|
46
|
+
const onSelectionChange = (selectedItems) => {
|
|
47
|
+
setSelections(selectedItems);
|
|
48
|
+
};
|
|
49
|
+
useOuterEvent('mousedown', [target, pickerRef], () => {
|
|
50
|
+
onCancel?.();
|
|
51
|
+
});
|
|
52
|
+
const onModeToggle = () => {
|
|
53
|
+
setSelections([]);
|
|
54
|
+
setEnableMultiSelect(curr => !curr);
|
|
55
|
+
};
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (!enableMultiSelect && selections?.length) {
|
|
58
|
+
onAdd(selections);
|
|
59
|
+
}
|
|
60
|
+
}, [selections, enableMultiSelect]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (initialRender.current) {
|
|
63
|
+
initialRender.current = false;
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
toggleHandleRef.current?.focusToggleSwitch();
|
|
67
|
+
}
|
|
68
|
+
}, [enableMultiSelect]);
|
|
69
|
+
const onKeydown = useCallback((e) => {
|
|
70
|
+
const { key } = e;
|
|
71
|
+
if (key === 'Escape') {
|
|
72
|
+
onCancel?.();
|
|
73
|
+
}
|
|
74
|
+
}, [onCancel]);
|
|
75
|
+
useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);
|
|
76
|
+
useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });
|
|
77
|
+
const pickerContent = (_jsx(Picker, { ...restProps, contextualLabel: t('task_manager_cases').toLowerCase(), items: items, multiSelect: enableMultiSelect, onModeToggle: onModeToggle, reorderSelections: true, selections: selections, onSelectionChange: onSelectionChange, handle: toggleHandleRef }));
|
|
78
|
+
return enableMultiSelect ? (_jsx(StyledMultiTaskDialog, { ...restProps, target: target, heading: t('add_cases'), ref: pickerRef, onCancel: () => {
|
|
79
|
+
onCancel();
|
|
80
|
+
}, onSubmit: {
|
|
81
|
+
text: t('add'),
|
|
82
|
+
disabled: !selections.length,
|
|
83
|
+
handler: () => {
|
|
84
|
+
onAdd(selections);
|
|
85
|
+
}
|
|
86
|
+
}, children: pickerContent })) : (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledSingleTaskDialog, target: target, labelledbyId: headingId, ref: pickerRef, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('task_manager_add_case') }), _jsx(Button, { icon: true, variant: 'simple', onClick: onCancel, label: t('close'), "aria-label": t('close_noun', [t('task_manager_add_case')]), children: _jsx(Icon, { name: 'times' }) })] }), pickerContent] }));
|
|
87
|
+
});
|
|
88
|
+
export default TaskPicker;
|
|
89
|
+
//# sourceMappingURL=TaskPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n useI18n,\n useConsolidatedRef,\n useElement,\n useUID,\n useOuterEvent,\n Flex,\n Button,\n Icon,\n Text,\n useFocusTrap,\n useEvent,\n MenuItemProps,\n FormDialog,\n defaultThemeProp,\n BaseProps,\n FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n /** Callback when add button is clicked */\n onAdd: (selections: MenuItemProps[]) => void;\n /** Callback when cancel button is clicked */\n onCancel: () => void;\n /** Target for the modal */\n target: FormDialogProps['target'];\n /** Picker reference . */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n return css`\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n ${StyledDialogContent},\n ${StyledChildrenWrap} {\n display: flex;\n }\n\n ${StyledDialogHeader} {\n padding-inline: ${spacing};\n }\n\n ${StyledDialogContent} {\n padding-inline: 0;\n }\n\n ${StyledMenu} {\n overflow: auto;\n }\n `;\n }\n);\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps> = forwardRef(\n function TaskPicker(\n { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n ref: TaskPickerProps['ref']\n ) {\n const t = useI18n();\n const headingId = useUID();\n const [selections, setSelections] = useState<MenuItemProps[]>([]);\n const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n const pickerRef = useConsolidatedRef(ref, setPickerEl);\n const initialRender = useRef(true);\n const toggleHandleRef = useRef<SwitchHandleValue>(null);\n\n const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n setSelections(selectedItems);\n };\n\n useOuterEvent('mousedown', [target, pickerRef], () => {\n onCancel?.();\n });\n\n const onModeToggle = () => {\n setSelections([]);\n setEnableMultiSelect(curr => !curr);\n };\n\n useEffect(() => {\n if (!enableMultiSelect && selections?.length) {\n onAdd(selections);\n }\n }, [selections, enableMultiSelect]);\n\n useEffect(() => {\n if (initialRender.current) {\n initialRender.current = false;\n } else {\n toggleHandleRef.current?.focusToggleSwitch();\n }\n }, [enableMultiSelect]);\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n onCancel?.();\n }\n },\n [onCancel]\n );\n\n useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n const pickerContent = (\n <Picker\n {...restProps}\n contextualLabel={t('task_manager_cases').toLowerCase()}\n items={items}\n multiSelect={enableMultiSelect}\n onModeToggle={onModeToggle}\n reorderSelections\n selections={selections}\n onSelectionChange={onSelectionChange}\n handle={toggleHandleRef}\n />\n );\n\n return enableMultiSelect ? (\n <StyledMultiTaskDialog\n {...restProps}\n target={target}\n heading={t('add_cases')}\n ref={pickerRef}\n onCancel={() => {\n onCancel();\n }}\n onSubmit={{\n text: t('add'),\n disabled: !selections.length,\n handler: () => {\n onAdd(selections);\n }\n }}\n >\n {pickerContent}\n </StyledMultiTaskDialog>\n ) : (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledSingleTaskDialog}\n target={target}\n labelledbyId={headingId}\n ref={pickerRef}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n <Text id={headingId} variant='h2'>\n {t('task_manager_add_case')}\n </Text>\n <Button\n icon\n variant='simple'\n onClick={onCancel}\n label={t('close')}\n aria-label={t('close_noun', [t('task_manager_add_case')])}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n {pickerContent}\n </Flex>\n );\n }\n);\n\nexport default TaskPicker;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAc5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledStickyCardHeader } from './TaskManager.styles';
|
|
5
|
-
const TaskView = forwardRef((props, ref)
|
|
5
|
+
const TaskView = forwardRef(function TaskView(props, ref) {
|
|
6
6
|
const { header, actions, children, ...restProps } = props;
|
|
7
7
|
return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }), _jsx(CardContent, { children: children })] }));
|
|
8
8
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,
|
|
1
|
+
{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,MAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB,aACnC,MAAM,EACN,OAAO,IACG,EACb,KAAC,WAAW,cAAE,QAAQ,GAAe,IAChC,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(function TaskView(\n props: PropsWithoutRef<TaskViewProps>,\n ref: TaskViewProps['ref']\n) {\n const { header, actions, children, ...restProps } = props;\n return (\n <Card {...restProps} ref={ref}>\n <CardHeader as={StyledStickyCardHeader}>\n {header}\n {actions}\n </CardHeader>\n <CardContent>{children}</CardContent>\n </Card>\n );\n});\n\nexport default TaskView;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from './TaskManager';
|
|
2
2
|
export { default as TaskView } from './TaskView';
|
|
3
|
-
export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
|
|
4
|
-
export { default as
|
|
3
|
+
export type { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
|
|
4
|
+
export { default as TaskPicker } from './TaskPicker';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport type {\n TaskManagerProps,\n TaskProps,\n TaskManagerTabsProps,\n TaskViewProps,\n DialogueProps\n} from './TaskManager.types';\nexport { default as TaskPicker } from './TaskPicker';\n"]}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
export { default as Article } from './components/Article';
|
|
2
|
-
export * from './components/Article';
|
|
3
|
-
export { default as ArticleList } from './components/ArticleList';
|
|
4
|
-
export * from './components/ArticleList';
|
|
5
1
|
export { default as CallControlPanel } from './components/CallControlPanel';
|
|
6
2
|
export * from './components/CallControlPanel';
|
|
7
3
|
export { default as CTIPanel } from './components/CTIPanel';
|
|
@@ -11,6 +7,7 @@ export * from './components/DialPad';
|
|
|
11
7
|
export { default as InteractionNotification } from './components/InteractionNotification';
|
|
12
8
|
export { default as InteractionTimer } from './components/InteractionTimer';
|
|
13
9
|
export * from './components/InteractionTimer';
|
|
10
|
+
export { default as Picker } from './components/Picker';
|
|
14
11
|
export { default as TaskManager } from './components/TaskManager';
|
|
15
12
|
export * from './components/TaskManager';
|
|
16
13
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
// This file is autogenerated. Any changes will be overwritten.
|
|
2
|
-
export { default as Article } from './components/Article';
|
|
3
|
-
export * from './components/Article';
|
|
4
|
-
export { default as ArticleList } from './components/ArticleList';
|
|
5
|
-
export * from './components/ArticleList';
|
|
6
2
|
export { default as CallControlPanel } from './components/CallControlPanel';
|
|
7
3
|
export * from './components/CallControlPanel';
|
|
8
4
|
export { default as CTIPanel } from './components/CTIPanel';
|
|
@@ -12,6 +8,7 @@ export * from './components/DialPad';
|
|
|
12
8
|
export { default as InteractionNotification } from './components/InteractionNotification';
|
|
13
9
|
export { default as InteractionTimer } from './components/InteractionTimer';
|
|
14
10
|
export * from './components/InteractionTimer';
|
|
11
|
+
export { default as Picker } from './components/Picker';
|
|
15
12
|
export { default as TaskManager } from './components/TaskManager';
|
|
16
13
|
export * from './components/TaskManager';
|
|
17
14
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as Picker } from './components/Picker';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "4.0.0
|
|
4
|
-
"author": "Pegasystems",
|
|
5
|
-
"license": "SEE LICENSE IN LICENSE",
|
|
3
|
+
"version": "4.0.0",
|
|
6
4
|
"repository": {
|
|
7
5
|
"type": "git",
|
|
8
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
9
7
|
"directory": "packages/cosmos-cs"
|
|
10
8
|
},
|
|
9
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
10
|
+
"author": "Pegasystems",
|
|
11
|
+
"sideEffects": false,
|
|
11
12
|
"main": "lib/index.js",
|
|
12
13
|
"types": "lib/index.d.ts",
|
|
13
14
|
"files": [
|
|
@@ -15,13 +16,12 @@
|
|
|
15
16
|
"README.md",
|
|
16
17
|
"lib"
|
|
17
18
|
],
|
|
18
|
-
"sideEffects": false,
|
|
19
19
|
"scripts": {
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
27
|
"@types/styled-components": "^5.1.26",
|
|
@@ -31,16 +31,14 @@
|
|
|
31
31
|
"styled-components": "^5.2.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@storybook/addon-a11y": "^
|
|
35
|
-
"@storybook/addon-actions": "^
|
|
36
|
-
"@storybook/addon-storysource": "^
|
|
37
|
-
"@storybook/addon-toolbars": "^
|
|
38
|
-
"@storybook/
|
|
39
|
-
"@storybook/
|
|
40
|
-
"@storybook/testing-react": "^1.2.4",
|
|
41
|
-
"@storybook/theming": "^6.4.19",
|
|
34
|
+
"@storybook/addon-a11y": "^7.0.24",
|
|
35
|
+
"@storybook/addon-actions": "^7.0.24",
|
|
36
|
+
"@storybook/addon-storysource": "^7.0.24",
|
|
37
|
+
"@storybook/addon-toolbars": "^7.0.24",
|
|
38
|
+
"@storybook/react": "^7.0.24",
|
|
39
|
+
"@storybook/theming": "^7.0.24",
|
|
42
40
|
"@testing-library/react": "^12.1.3",
|
|
43
41
|
"@testing-library/user-event": "^13.5.0",
|
|
44
|
-
"typescript": "~
|
|
42
|
+
"typescript": "~5.0.2"
|
|
45
43
|
}
|
|
46
44
|
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { ReactElement, ReactNode, FunctionComponent } from 'react';
|
|
2
|
-
import { MenuItemProps, BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
import ArticleFooter from './ArticleFooter';
|
|
4
|
-
export interface BaseArticleProps extends BaseProps, NoChildrenProp {
|
|
5
|
-
/** Navigation elements */
|
|
6
|
-
navigation?: ReactNode;
|
|
7
|
-
/** Primary actions which needs to be displayed with an icon */
|
|
8
|
-
primaryActions?: ReactNode;
|
|
9
|
-
/** Secondary actions that needs to be pushed under more icon */
|
|
10
|
-
secondaryActions?: {
|
|
11
|
-
id: MenuItemProps['id'];
|
|
12
|
-
text: MenuItemProps['primary'];
|
|
13
|
-
}[];
|
|
14
|
-
/** Article title */
|
|
15
|
-
title: string;
|
|
16
|
-
/** Array of meta data rendered through MetaList component */
|
|
17
|
-
meta?: (ReactElement | string)[];
|
|
18
|
-
/** Article content */
|
|
19
|
-
content: ReactNode;
|
|
20
|
-
/** Footer */
|
|
21
|
-
footer?: ReactElement<typeof ArticleFooter>;
|
|
22
|
-
/** Prop to check visibility of skeleton */
|
|
23
|
-
skeletonize: boolean;
|
|
24
|
-
}
|
|
25
|
-
export declare type ArticleProps = (BaseArticleProps & {
|
|
26
|
-
skeletonize?: false;
|
|
27
|
-
}) | (Partial<BaseArticleProps> & {
|
|
28
|
-
skeletonize: true;
|
|
29
|
-
});
|
|
30
|
-
declare const Article: FunctionComponent<ArticleProps & ForwardProps>;
|
|
31
|
-
export default Article;
|
|
32
|
-
//# 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,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,aAAa,EAOb,SAAS,EACT,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KAChC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAC5C,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AAoDxD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAkE3D,CAAC;AAMF,eAAe,OAAO,CAAC"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
3
|
-
import { Flex, LineSkeleton, MenuButton, MetaList, Text, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
4
|
-
import ArticleSkeleton from './ArticleSkeleton';
|
|
5
|
-
const StyledArticleWrapper = styled.div(props => {
|
|
6
|
-
const { theme } = props;
|
|
7
|
-
return css `
|
|
8
|
-
background: ${theme.base.palette['primary-background']};
|
|
9
|
-
padding: calc(1.5 * ${theme.base.spacing});
|
|
10
|
-
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
11
|
-
max-height: inherit;
|
|
12
|
-
`;
|
|
13
|
-
});
|
|
14
|
-
const StyledArticleHeader = styled.header `
|
|
15
|
-
flex-shrink: 0;
|
|
16
|
-
`;
|
|
17
|
-
const StyledArticleContent = styled.div(props => {
|
|
18
|
-
const { theme, theme: { base: { spacing } } } = props;
|
|
19
|
-
return css `
|
|
20
|
-
flex-grow: 1;
|
|
21
|
-
overflow-y: auto;
|
|
22
|
-
padding: 0 calc(1.5 * ${spacing});
|
|
23
|
-
margin: 0 calc(-1.5 * ${spacing});
|
|
24
|
-
|
|
25
|
-
/* TODO - We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */
|
|
26
|
-
ul,
|
|
27
|
-
ol {
|
|
28
|
-
padding-left: calc(3 * ${spacing});
|
|
29
|
-
}
|
|
30
|
-
a {
|
|
31
|
-
color: ${theme.components.link.color};
|
|
32
|
-
}
|
|
33
|
-
* {
|
|
34
|
-
margin: unset;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
});
|
|
38
|
-
StyledArticleContent.defaultProps = defaultThemeProp;
|
|
39
|
-
StyledArticleWrapper.defaultProps = defaultThemeProp;
|
|
40
|
-
const Locale = {
|
|
41
|
-
// FIXME: TR
|
|
42
|
-
moreActions: 'More actions'
|
|
43
|
-
};
|
|
44
|
-
const Article = (props) => {
|
|
45
|
-
const { meta, title, navigation, content, primaryActions, secondaryActions, footer, skeletonize, ...restProps } = props;
|
|
46
|
-
return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper, ...restProps, children: [(navigation || primaryActions || secondaryActions) && (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Flex, { container: true, item: { grow: 1 }, children: navigation }), _jsxs(Flex, { container: { alignItems: 'center' }, children: [primaryActions, secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
|
|
47
|
-
items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
|
|
48
|
-
} }))] })] })), title ? (_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) })) : (skeletonize && _jsx(LineSkeleton, { width: 'l' })), meta && meta.length > 0 ? (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(MetaList, { items: meta }) })) : (skeletonize && (_jsxs(Flex, { container: true, children: [_jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' })] }))), skeletonize ? (_jsx(StyledArticleContent, { children: _jsx(ArticleSkeleton, {}) })) : (_jsx(StyledArticleContent, { children: content })), footer] }));
|
|
49
|
-
};
|
|
50
|
-
Article.defaultProps = {
|
|
51
|
-
skeletonize: false
|
|
52
|
-
};
|
|
53
|
-
export default Article;
|
|
54
|
-
//# 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 { ReactElement, ReactNode, FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n MenuItemProps,\n Flex,\n LineSkeleton,\n MenuButton,\n MetaList,\n Text,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport ArticleFooter from './ArticleFooter';\nimport ArticleSkeleton from './ArticleSkeleton';\n\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n /** Navigation elements */\n navigation?: ReactNode;\n /** Primary actions which needs to be displayed with an icon */\n primaryActions?: ReactNode;\n /** Secondary actions that needs to be pushed under more icon */\n secondaryActions?: {\n id: MenuItemProps['id'];\n text: MenuItemProps['primary'];\n }[];\n /** Article title */\n title: string;\n /** Array of meta data rendered through MetaList component */\n meta?: (ReactElement | string)[];\n /** Article content */\n content: ReactNode;\n /** Footer */\n footer?: ReactElement<typeof ArticleFooter>;\n /** Prop to check visibility of skeleton */\n skeletonize: boolean;\n}\n\nexport type ArticleProps =\n | (BaseArticleProps & { skeletonize?: false })\n | (Partial<BaseArticleProps> & { skeletonize: 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\n /* TODO - We need to think of handling this such way RTE content is not impacted with the styles inside styles/GlobalStyle.tsx */\n ul,\n ol {\n padding-left: calc(3 * ${spacing});\n }\n a {\n color: ${theme.components.link.color};\n }\n * {\n margin: unset;\n }\n `;\n});\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\n\nconst Locale = {\n // FIXME: TR\n moreActions: 'More actions'\n};\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n const {\n meta,\n title,\n navigation,\n content,\n primaryActions,\n secondaryActions,\n footer,\n skeletonize,\n ...restProps\n } = props;\n\n return (\n <Flex container={{ direction: 'column', gap: 1 }} as={StyledArticleWrapper} {...restProps}>\n {(navigation || primaryActions || secondaryActions) && (\n <Flex container={{ gap: 1, alignItems: 'center' }}>\n <Flex container item={{ grow: 1 }}>\n {navigation}\n </Flex>\n <Flex container={{ alignItems: 'center' }}>\n {primaryActions}\n {secondaryActions && (\n <MenuButton\n variant='simple'\n text={Locale.moreActions}\n icon='more'\n iconOnly\n menu={{\n items: secondaryActions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n }}\n />\n )}\n </Flex>\n </Flex>\n )}\n {title ? (\n <Flex container as={StyledArticleHeader}>\n <Text variant='h2'>{title}</Text>\n </Flex>\n ) : (\n skeletonize && <LineSkeleton width='l' />\n )}\n {meta && meta.length > 0 ? (\n <Flex container item={{ shrink: 0 }}>\n <MetaList items={meta} />\n </Flex>\n ) : (\n skeletonize && (\n <Flex container>\n <LineSkeleton width='s' />\n <LineSkeleton width='s' />\n <LineSkeleton width='s' />\n </Flex>\n )\n )}\n {skeletonize ? (\n <StyledArticleContent>\n <ArticleSkeleton />\n </StyledArticleContent>\n ) : (\n <StyledArticleContent>{content}</StyledArticleContent>\n )}\n {footer}\n </Flex>\n );\n};\n\nArticle.defaultProps = {\n skeletonize: false\n};\n\nexport default Article;\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { ReactNode, FunctionComponent } from 'react';
|
|
2
|
-
import { BaseProps, ForwardProps } 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
|
-
/** Article tags */
|
|
11
|
-
tags?: ArticleTag[];
|
|
12
|
-
/** Callback that triggers on click of tag */
|
|
13
|
-
onTagClick?: (id: ArticleTag['id']) => void;
|
|
14
|
-
/** Footer content */
|
|
15
|
-
content?: ReactNode;
|
|
16
|
-
}
|
|
17
|
-
declare const ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps>;
|
|
18
|
-
export default ArticleFooter;
|
|
19
|
-
//# 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,SAAS,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAG9E,OAAO,EAA+B,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG/F,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,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6BD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAyCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Flex, Tag, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
-
import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
|
|
6
|
-
const StyledArticleFooter = styled.div(({ theme }) => {
|
|
7
|
-
return css `
|
|
8
|
-
flex-shrink: 0;
|
|
9
|
-
&::before {
|
|
10
|
-
content: '';
|
|
11
|
-
display: block;
|
|
12
|
-
background: ${theme.base.palette['border-line']};
|
|
13
|
-
height: 0.0625rem;
|
|
14
|
-
margin-bottom: calc(2 * ${theme.base.spacing});
|
|
15
|
-
}
|
|
16
|
-
`;
|
|
17
|
-
});
|
|
18
|
-
StyledArticleFooter.defaultProps = defaultThemeProp;
|
|
19
|
-
const StyledTags = styled.div(({ theme }) => {
|
|
20
|
-
return css `
|
|
21
|
-
padding: calc(0.25 * ${theme.base.spacing});
|
|
22
|
-
margin: 0 calc(-0.5 * ${theme.base.spacing});
|
|
23
|
-
& > ${StyledTag} {
|
|
24
|
-
margin: calc(0.25 * ${theme.base.spacing});
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
});
|
|
28
|
-
StyledTags.defaultProps = defaultThemeProp;
|
|
29
|
-
const ArticleFooter = (props) => {
|
|
30
|
-
const { content, tags, onTagClick, ...restProps } = props;
|
|
31
|
-
const onTagClickHandler = useCallback((event) => {
|
|
32
|
-
onTagClick?.(event.currentTarget.dataset.tagId);
|
|
33
|
-
}, [onTagClick]);
|
|
34
|
-
return (_jsxs(Flex, { as: StyledArticleFooter, container: {
|
|
35
|
-
direction: 'column',
|
|
36
|
-
gap: 2
|
|
37
|
-
}, ...restProps, children: [content, tags && (_jsx(Flex, { container: { wrap: 'wrap' }, as: StyledTags, children: tags.map(tag => (_jsx(Tag, { tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, onClick: onTagClickHandler, rel: 'tag', children: tag.tagName }, tag.id))) }))] }));
|
|
38
|
-
};
|
|
39
|
-
export default ArticleFooter;
|
|
40
|
-
//# sourceMappingURL=ArticleFooter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAkB9E,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;gCAErB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,SAAS;4BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAA8B,EAAE,EAAE;QACjC,UAAU,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,KACG,SAAS,aAEZ,OAAO,EACP,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,YAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,IACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,YAER,GAAG,CAAC,OAAO,IALP,GAAG,CAAC,EAAE,CAMP,CACP,CAAC,GACG,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Tag, defaultThemeProp, BaseProps, ForwardProps } 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 /** Article tags */\n tags?: ArticleTag[];\n /** Callback that triggers on click of tag */\n onTagClick?: (id: ArticleTag['id']) => void;\n /** Footer content */\n content?: ReactNode;\n}\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});\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 { content, tags, onTagClick, ...restProps } = props;\n\n const onTagClickHandler = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n onTagClick?.(event.currentTarget.dataset.tagId!);\n },\n [onTagClick]\n );\n\n return (\n <Flex\n as={StyledArticleFooter}\n container={{\n direction: 'column',\n gap: 2\n }}\n {...restProps}\n >\n {content}\n {tags && (\n <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n {tags.map(tag => (\n <Tag\n tabIndex={0}\n type='pill'\n variant='light'\n key={tag.id}\n data-tag-id={tag.id}\n onClick={onTagClickHandler}\n rel='tag'\n >\n {tag.tagName}\n </Tag>\n ))}\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default ArticleFooter;\n"]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
export interface ArticleSkeletonProps extends BaseProps {
|
|
4
|
-
}
|
|
5
|
-
export declare const StyledArticleSkeleton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
declare const ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps>;
|
|
7
|
-
export default ArticleSkeleton;
|
|
8
|
-
//# sourceMappingURL=ArticleSkeleton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAKL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
|
|
4
|
-
export const StyledArticleSkeleton = styled.div ``;
|
|
5
|
-
const ArticleSkeleton = (props) => {
|
|
6
|
-
const numberOfLines = 18;
|
|
7
|
-
return (_jsx(StyledArticleSkeleton, { ...props, "aria-disabled": 'true', children: _jsx(ParagraphSkeleton, { children: Array.from({ length: numberOfLines }, (_, i) => {
|
|
8
|
-
const lines = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];
|
|
9
|
-
return (_jsx(Flex, { container: { alignItems: 'center' }, children: lines.map((size, j) => (
|
|
10
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
11
|
-
_jsx(LineSkeleton, { width: size }, j))) }, i));
|
|
12
|
-
}) }) }));
|
|
13
|
-
};
|
|
14
|
-
export default ArticleSkeleton;
|
|
15
|
-
//# sourceMappingURL=ArticleSkeleton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ArticleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,YAAY,EAEZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,mBAAgB,MAAM,YACpD,KAAC,iBAAiB,cACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC9C,MAAM,KAAK,GAAiC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBACvF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtB,oDAAoD;oBACpD,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,IAAO,CAAC,CAAI,CACtC,CAAC,IAJ4C,CAAC,CAK1C,CACR,CAAC;YACJ,CAAC,CAAC,GACgB,GACE,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n LineSkeleton,\n LineSkeletonProps,\n ParagraphSkeleton,\n BaseProps,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleSkeletonProps extends BaseProps {}\n\nexport const StyledArticleSkeleton = styled.div``;\n\nconst ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps> = (\n props: ArticleSkeletonProps\n) => {\n const numberOfLines = 18;\n return (\n <StyledArticleSkeleton {...props} aria-disabled='true'>\n <ParagraphSkeleton>\n {Array.from({ length: numberOfLines }, (_, i) => {\n const lines: LineSkeletonProps['width'][] = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];\n return (\n <Flex container={{ alignItems: 'center' }} key={i}>\n {lines.map((size, j) => (\n // eslint-disable-next-line react/no-array-index-key\n <LineSkeleton width={size} key={j} />\n ))}\n </Flex>\n );\n })}\n </ParagraphSkeleton>\n </StyledArticleSkeleton>\n );\n};\n\nexport default ArticleSkeleton;\n"]}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { default } from './Article';
|
|
2
|
-
export { default as ArticleFooter } from './ArticleFooter';
|
|
3
|
-
export { ArticleTag } from './ArticleFooter';
|
|
4
|
-
export { ArticleProps } from './Article';
|
|
5
|
-
export { ArticleFooterProps } from './ArticleFooter';
|
|
6
|
-
//# 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,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,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 { ArticleTag } from './ArticleFooter';\nexport { ArticleProps } from './Article';\nexport { ArticleFooterProps } from './ArticleFooter';\n"]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, ReactNode, ReactElement, Ref } from 'react';
|
|
2
|
-
import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
import ArticleListHeader from './ArticleListHeader';
|
|
4
|
-
export interface ArticleListProps extends BaseProps {
|
|
5
|
-
/** Search/filtering criteria for article list */
|
|
6
|
-
header?: ReactElement<typeof ArticleListHeader>;
|
|
7
|
-
/** Content for article list */
|
|
8
|
-
children?: ReactNode;
|
|
9
|
-
/** Prop to check visibility of skeleton */
|
|
10
|
-
skeletonize: boolean;
|
|
11
|
-
/** Footer for article list */
|
|
12
|
-
footer?: ReactNode;
|
|
13
|
-
ref?: Ref<HTMLDivElement>;
|
|
14
|
-
}
|
|
15
|
-
declare const ArticleList: FunctionComponent<ArticleListProps & ForwardProps>;
|
|
16
|
-
export default ArticleList;
|
|
17
|
-
//# 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,EACjB,SAAS,EACT,YAAY,EAEZ,GAAG,EAEJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmC,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGnG,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAGpD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,iDAAiD;IACjD,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA2DD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAIF,eAAe,WAAW,CAAC"}
|