@pega/cosmos-react-work 4.0.0-dev.12.0 → 4.0.0-dev.13.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/CasePreview/CasePreview.d.ts +7 -2
- package/lib/components/CasePreview/CasePreview.d.ts.map +1 -1
- package/lib/components/CasePreview/CasePreview.js +5 -3
- package/lib/components/CasePreview/CasePreview.js.map +1 -1
- package/lib/components/CasePreview/CasePreview.test-ids.d.ts +2 -0
- package/lib/components/CasePreview/CasePreview.test-ids.d.ts.map +1 -0
- package/lib/components/CasePreview/CasePreview.test-ids.js +3 -0
- package/lib/components/CasePreview/CasePreview.test-ids.js.map +1 -0
- package/lib/components/CaseView/CaseHeader.d.ts.map +1 -1
- package/lib/components/CaseView/CaseHeader.js +4 -4
- package/lib/components/CaseView/CaseHeader.js.map +1 -1
- package/lib/components/CaseView/CaseSummary.d.ts.map +1 -1
- package/lib/components/CaseView/CaseSummary.js +2 -2
- package/lib/components/CaseView/CaseSummary.js.map +1 -1
- package/lib/components/CaseView/CaseSummaryFields.d.ts.map +1 -1
- package/lib/components/CaseView/CaseSummaryFields.js +3 -1
- package/lib/components/CaseView/CaseSummaryFields.js.map +1 -1
- package/lib/components/CaseView/CaseView.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.js +7 -4
- package/lib/components/CaseView/CaseView.js.map +1 -1
- package/lib/components/CaseView/CaseView.test-ids.d.ts +2 -0
- package/lib/components/CaseView/CaseView.test-ids.d.ts.map +1 -0
- package/lib/components/CaseView/CaseView.test-ids.js +16 -0
- package/lib/components/CaseView/CaseView.test-ids.js.map +1 -0
- package/lib/components/CaseView/CaseView.types.d.ts +8 -7
- package/lib/components/CaseView/CaseView.types.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.types.js.map +1 -1
- package/lib/components/Details/Details.d.ts.map +1 -1
- package/lib/components/Details/Details.js +28 -8
- package/lib/components/Details/Details.js.map +1 -1
- package/lib/components/Details/Details.styles.d.ts +5 -3
- package/lib/components/Details/Details.styles.d.ts.map +1 -1
- package/lib/components/Details/Details.styles.js +20 -95
- package/lib/components/Details/Details.styles.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js +7 -10
- package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts +2 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js +42 -40
- package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts +4 -0
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map +1 -1
- package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map +1 -1
- package/lib/components/Predictions/Predictions.d.ts.map +1 -1
- package/lib/components/Predictions/Predictions.js +7 -8
- package/lib/components/Predictions/Predictions.js.map +1 -1
- package/lib/components/Tasks/TaskList.d.ts +4 -4
- package/lib/components/Tasks/TaskList.d.ts.map +1 -1
- package/lib/components/Tasks/TaskList.js +9 -6
- package/lib/components/Tasks/TaskList.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +2 -2
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js +5 -3
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/lib/components/Tasks/Tasks.test-ids.d.ts +4 -0
- package/lib/components/Tasks/Tasks.test-ids.d.ts.map +1 -0
- package/lib/components/Tasks/Tasks.test-ids.js +9 -0
- package/lib/components/Tasks/Tasks.test-ids.js.map +1 -0
- package/package.json +2 -2
- package/lib/components/Predictions/Predictions.styles.d.ts +0 -3
- package/lib/components/Predictions/Predictions.styles.d.ts.map +0 -1
- package/lib/components/Predictions/Predictions.styles.js +0 -24
- package/lib/components/Predictions/Predictions.styles.js.map +0 -1
|
@@ -1,17 +1,48 @@
|
|
|
1
|
-
import styled, { css
|
|
2
|
-
import { lighten } from 'polished';
|
|
3
|
-
import {
|
|
4
|
-
import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { lighten, readableColor, rgba } from 'polished';
|
|
3
|
+
import { defaultThemeProp, StyledButton, StyledCard, StyledFlex, StyledIcon, StyledEmptyState, SummaryList, StyledText, tryCatch, StyledSummaryItem, StyledVisual, readableHue, Text, calculateFontSize, StyledSecondary } from '@pega/cosmos-react-core';
|
|
5
4
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
6
5
|
import { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
|
|
7
6
|
const itemIconSize = '2rem';
|
|
7
|
+
export const StyledNew = styled(Text)(({ theme }) => {
|
|
8
|
+
const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
|
|
9
|
+
const readableTextColor = readableColor(readableBackground);
|
|
10
|
+
const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
|
|
11
|
+
return css `
|
|
12
|
+
position: absolute;
|
|
13
|
+
inset-block-start: 0;
|
|
14
|
+
inset-inline-start: 0;
|
|
15
|
+
text-transform: uppercase;
|
|
16
|
+
background-color: ${readableBackground};
|
|
17
|
+
color: ${readableTextColor};
|
|
18
|
+
padding-inline: calc(0.75 * ${theme.base.spacing});
|
|
19
|
+
font-size: ${fontSize.xxs};
|
|
20
|
+
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
21
|
+
`;
|
|
22
|
+
});
|
|
23
|
+
StyledNew.defaultProps = defaultThemeProp;
|
|
24
|
+
export const StyledBorderLine = styled.span(({ theme }) => {
|
|
25
|
+
const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
|
|
26
|
+
return css `
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset-block-start: 0;
|
|
29
|
+
inset-inline-start: 0;
|
|
30
|
+
content: '';
|
|
31
|
+
background-color: ${readableBackground};
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 0.125rem;
|
|
34
|
+
`;
|
|
35
|
+
});
|
|
36
|
+
StyledBorderLine.defaultProps = defaultThemeProp;
|
|
8
37
|
export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {
|
|
38
|
+
const color = theme.base.palette.light;
|
|
9
39
|
const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
10
40
|
const hoverColor = tryCatch(() => lighten(0.05, theme.components['app-shell'].nav['background-color']));
|
|
41
|
+
const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));
|
|
11
42
|
return css `
|
|
12
43
|
min-width: 20rem;
|
|
13
44
|
max-width: 20rem;
|
|
14
|
-
color: ${
|
|
45
|
+
color: ${color};
|
|
15
46
|
overflow: hidden;
|
|
16
47
|
box-shadow: ${theme.base.shadow.low};
|
|
17
48
|
@media (min-width: ${theme.base.breakpoints.lg}) {
|
|
@@ -42,6 +73,7 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
42
73
|
box-shadow: ${theme.base.shadow.focus};
|
|
43
74
|
}
|
|
44
75
|
${StyledSummaryItem} {
|
|
76
|
+
position: relative;
|
|
45
77
|
padding: ${theme.base.spacing};
|
|
46
78
|
border-top: ${theme.components.button['border-width']} solid ${borderColor};
|
|
47
79
|
outline: none;
|
|
@@ -53,6 +85,9 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
53
85
|
${StyledButton} {
|
|
54
86
|
visibility: hidden;
|
|
55
87
|
}
|
|
88
|
+
${StyledSecondary} ${StyledText} {
|
|
89
|
+
color: ${secondaryColor};
|
|
90
|
+
}
|
|
56
91
|
&:not(:last-child) {
|
|
57
92
|
border-bottom: none;
|
|
58
93
|
}
|
|
@@ -75,49 +110,19 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
|
|
|
75
110
|
${StyledEmptyState} {
|
|
76
111
|
padding-bottom: ${theme.base.spacing};
|
|
77
112
|
${StyledIcon}, ${StyledText} {
|
|
78
|
-
color: ${
|
|
113
|
+
color: ${color};
|
|
79
114
|
}
|
|
80
115
|
}
|
|
81
116
|
`;
|
|
82
117
|
});
|
|
83
118
|
StyledIntelligentGuidanceList.defaultProps = defaultThemeProp;
|
|
84
|
-
export const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {
|
|
85
|
-
return css `
|
|
86
|
-
box-shadow: ${theme.base.shadow.low};
|
|
87
|
-
color: ${theme.base.palette.light};
|
|
88
|
-
background-color: ${theme.base.palette.success};
|
|
89
|
-
width: 4rem;
|
|
90
|
-
height: 4rem;
|
|
91
|
-
svg {
|
|
92
|
-
width: 2.25rem;
|
|
93
|
-
height: 2.25rem;
|
|
94
|
-
}
|
|
95
|
-
${StyledCount} {
|
|
96
|
-
position: absolute;
|
|
97
|
-
right: 0;
|
|
98
|
-
top: 0;
|
|
99
|
-
}
|
|
100
|
-
`;
|
|
101
|
-
});
|
|
102
|
-
StyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;
|
|
103
|
-
const slideIn = keyframes `
|
|
104
|
-
0% {
|
|
105
|
-
transform: translateY(100%);
|
|
106
|
-
}
|
|
107
|
-
100% {
|
|
108
|
-
transform: translateY(0);
|
|
109
|
-
}
|
|
110
|
-
`;
|
|
111
119
|
export const StyledIntelligentGuidance = styled.div(({ theme, isCollapsed }) => {
|
|
112
120
|
return css `
|
|
113
121
|
position: fixed;
|
|
114
122
|
inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));
|
|
115
123
|
transition: inset-inline-start ${theme.base.animation.speed}
|
|
116
124
|
${theme.base.animation.timing.ease};
|
|
117
|
-
bottom:
|
|
118
|
-
@media (min-width: ${theme.base.breakpoints.md}) {
|
|
119
|
-
bottom: 0;
|
|
120
|
-
}
|
|
125
|
+
bottom: 0;
|
|
121
126
|
z-index: ${theme.base['z-index'].popover};
|
|
122
127
|
${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {
|
|
123
128
|
border-bottom-left-radius: 0;
|
|
@@ -134,9 +139,6 @@ export const StyledIntelligentGuidance = styled.div(({ theme, isCollapsed }) =>
|
|
|
134
139
|
transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
|
|
135
140
|
}
|
|
136
141
|
}
|
|
137
|
-
${StyledIntelligentGuidanceButton} {
|
|
138
|
-
animation: ${slideIn} calc(4 * ${theme.base.animation.speed});
|
|
139
|
-
}
|
|
140
142
|
`;
|
|
141
143
|
});
|
|
142
144
|
StyledIntelligentGuidance.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, readableColor, rgba } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledCard,\n StyledFlex,\n StyledIcon,\n StyledEmptyState,\n SummaryList,\n StyledText,\n tryCatch,\n StyledSummaryItem,\n StyledVisual,\n readableHue,\n Text,\n calculateFontSize,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n text-transform: uppercase;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding-inline: calc(0.75 * ${theme.base.spacing});\n font-size: ${fontSize.xxs};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n content: '';\n background-color: ${readableBackground};\n height: 100%;\n width: 0.125rem;\n `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n const color = theme.base.palette.light;\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n const hoverColor = tryCatch(() =>\n lighten(0.05, theme.components['app-shell'].nav['background-color'])\n );\n const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));\n\n return css`\n min-width: 20rem;\n max-width: 20rem;\n color: ${color};\n overflow: hidden;\n box-shadow: ${theme.base.shadow.low};\n @media (min-width: ${theme.base.breakpoints.lg}) {\n min-width: 23rem;\n max-width: 23rem;\n }\n &:not(& &) {\n background-color: ${theme.components['app-shell'].nav['background-color']};\n }\n ${StyledCardHeader} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing};\n }\n ${StyledFlex} > ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n border-radius: calc(3 * ${theme.base['border-radius']});\n background-color: ${theme.base.palette.success};\n }\n }\n ${StyledSummaryListContent} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: 0;\n }\n }\n ${StyledButton}:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n ${StyledSummaryItem} {\n position: relative;\n padding: ${theme.base.spacing};\n border-top: ${theme.components.button['border-width']} solid ${borderColor};\n outline: none;\n ${StyledVisual} ${StyledIcon} {\n width: ${itemIconSize};\n height: ${itemIconSize};\n padding: calc(0.75 * ${theme.base.spacing});\n }\n ${StyledButton} {\n visibility: hidden;\n }\n ${StyledSecondary} ${StyledText} {\n color: ${secondaryColor};\n }\n &:not(:last-child) {\n border-bottom: none;\n }\n &:hover {\n background-color: ${hoverColor};\n cursor: pointer;\n }\n &:hover,\n &:focus,\n &:focus-within {\n ${StyledButton} {\n visibility: visible;\n }\n }\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n }\n ${StyledEmptyState} {\n padding-bottom: ${theme.base.spacing};\n ${StyledIcon}, ${StyledText} {\n color: ${color};\n }\n }\n `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n isCollapsed: boolean;\n hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n ({ theme, isCollapsed }) => {\n return css`\n position: fixed;\n inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n transition: inset-inline-start ${theme.base.animation.speed}\n ${theme.base.animation.timing.ease};\n bottom: 0;\n z-index: ${theme.base['z-index'].popover};\n ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n transition: transform calc(4 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n ${isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight)));\n `}\n ${StyledCardHeader} ${StyledButton} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n }\n `;\n }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -19,6 +19,10 @@ export interface IntelligentGuidanceItemProps {
|
|
|
19
19
|
* Dismiss handler for the action button.
|
|
20
20
|
*/
|
|
21
21
|
onDismiss?: (id: IntelligentGuidanceItemProps['id'], e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
|
|
22
|
+
/** Flag that indicates if item is new
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
new?: boolean;
|
|
22
26
|
}
|
|
23
27
|
export default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {
|
|
24
28
|
/** List of guidance items. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD;;OAEG;IACH,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD;;OAEG;IACH,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n /** Unique id for item */\n id: string;\n /** The label text of the item. */\n label: string;\n /**\n * Name of the icon (to be selected from default Pega icon set)\n */\n icon: IconProps['name'];\n /** Represents the type of task */\n type: string;\n /**\n * Click handler for the action button.\n */\n onClick: (e: MouseEvent | KeyboardEvent) => void;\n /**\n * Dismiss handler for the action button.\n */\n onDismiss?: (\n id: IntelligentGuidanceItemProps['id'],\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n /** List of guidance items. */\n items: IntelligentGuidanceItemProps[];\n /** Header text. */\n heading: string;\n /** Flag that indicates if intelligent guidance is collapsed */\n isCollapsed: boolean;\n /** Callback when expand/collapse button is clicked */\n onExpandCollapse: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n /** Unique id for item */\n id: string;\n /** The label text of the item. */\n label: string;\n /**\n * Name of the icon (to be selected from default Pega icon set)\n */\n icon: IconProps['name'];\n /** Represents the type of task */\n type: string;\n /**\n * Click handler for the action button.\n */\n onClick: (e: MouseEvent | KeyboardEvent) => void;\n /**\n * Dismiss handler for the action button.\n */\n onDismiss?: (\n id: IntelligentGuidanceItemProps['id'],\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n /** Flag that indicates if item is new\n * @default false\n */\n new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n /** List of guidance items. */\n items: IntelligentGuidanceItemProps[];\n /** Header text. */\n heading: string;\n /** Flag that indicates if intelligent guidance is collapsed */\n isCollapsed: boolean;\n /** Callback when expand/collapse button is clicked */\n onExpandCollapse: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,
|
|
1
|
+
{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AAsFvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { registerIcon, useI18n, Modal, useModalManager, InfoDialog } from '@pega/cosmos-react-core';
|
|
4
|
-
import * as
|
|
3
|
+
import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList } from '@pega/cosmos-react-core';
|
|
4
|
+
import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
|
|
5
5
|
import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
|
|
6
|
-
|
|
7
|
-
registerIcon(polarisSolidIcon, informationIcon);
|
|
6
|
+
registerIcon(polarisIcon, informationIcon);
|
|
8
7
|
const PredictionsList = forwardRef(({ items: itemsProp, progress, ...restProps }, ref) => {
|
|
9
8
|
const t = useI18n();
|
|
10
9
|
const [currentItemIdTarget, setCurrentItemIdTarget] = useState();
|
|
11
10
|
const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);
|
|
12
11
|
const items = useMemo(() => (itemsProp ?? []).map(item => ({
|
|
13
12
|
id: item.id,
|
|
14
|
-
primary: item.label,
|
|
15
|
-
secondary: item.value,
|
|
13
|
+
primary: _jsx(StyledLabel, { forwardedAs: 'span', children: item.label }),
|
|
14
|
+
secondary: (_jsx(Text, { variant: 'h1', as: 'span', children: item.value })),
|
|
16
15
|
overflowStrategy: 'ellipsis',
|
|
17
16
|
actions: item.additionalInfo
|
|
18
17
|
? [
|
|
@@ -30,7 +29,7 @@ const PredictionsList = forwardRef(({ items: itemsProp, progress, ...restProps }
|
|
|
30
29
|
]
|
|
31
30
|
: undefined
|
|
32
31
|
})), [itemsProp]);
|
|
33
|
-
return (_jsxs(_Fragment, { children: [_jsx(
|
|
32
|
+
return (_jsxs(_Fragment, { children: [_jsx(SummaryList, { ...restProps, loading: progress, ref: ref, items: items }), currentItemIdTarget && currentItem?.additionalInfo && (_jsx(InfoDialog, { heading: currentItem.label, target: currentItemIdTarget.target, onDismiss: () => {
|
|
34
33
|
setCurrentItemIdTarget(undefined);
|
|
35
34
|
}, children: currentItem.additionalInfo }))] }));
|
|
36
35
|
});
|
|
@@ -49,7 +48,7 @@ const Predictions = forwardRef(({ count, items, progress, ...restProps }, ref) =
|
|
|
49
48
|
count
|
|
50
49
|
});
|
|
51
50
|
}, [items, progress, count]);
|
|
52
|
-
return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), icon: 'polaris
|
|
51
|
+
return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
|
|
53
52
|
viewAllModalRef.current = create(PredictionsViewAllModal, {
|
|
54
53
|
items,
|
|
55
54
|
progress,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,KAAK,EAEL,eAAe,EAEf,UAAU,
|
|
1
|
+
{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n registerIcon,\n useI18n,\n Modal,\n SummaryListProps,\n useModalManager,\n SummaryListItem,\n InfoDialog,\n ModalMethods,\n StyledLabel,\n Text,\n SummaryList\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\nconst PredictionsList: FC<\n PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(\n (\n {\n items: itemsProp,\n progress,\n ...restProps\n }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n ref: PredictionsProps['ref']\n ) => {\n const t = useI18n();\n const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n | {\n id: PredictionItem['id'];\n target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n }\n | undefined\n >();\n const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n const items: SummaryListItem[] = useMemo(\n () =>\n (itemsProp ?? []).map(item => ({\n id: item.id,\n primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n secondary: (\n <Text variant='h1' as='span'>\n {item.value}\n </Text>\n ),\n overflowStrategy: 'ellipsis',\n actions: item.additionalInfo\n ? [\n {\n id: item.id,\n text: t('learn_more'),\n icon: 'information',\n onClick: (\n id: string,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => {\n setCurrentItemIdTarget({\n id: item.id,\n target: e.currentTarget\n });\n }\n }\n ]\n : undefined\n })),\n [itemsProp]\n );\n\n return (\n <>\n <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n {currentItemIdTarget && currentItem?.additionalInfo && (\n <InfoDialog\n heading={currentItem.label}\n target={currentItemIdTarget.target}\n onDismiss={() => {\n setCurrentItemIdTarget(undefined);\n }}\n >\n {currentItem.additionalInfo}\n </InfoDialog>\n )}\n </>\n );\n }\n);\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n const t = useI18n();\n return (\n <Modal heading={t('all_predictions')} count={count} progress={progress}>\n <PredictionsList {...restProps} />\n </Modal>\n );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n (\n { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n ref: PredictionsProps['ref']\n ) => {\n const t = useI18n();\n const { create } = useModalManager();\n const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n useEffect(() => {\n viewAllModalRef.current?.update({\n items,\n progress,\n count\n });\n }, [items, progress, count]);\n\n return (\n <PredictionsList\n {...restProps}\n ref={ref}\n name={t('predictions')}\n icon='polaris'\n count={count}\n items={items?.slice(0, 3)}\n progress={progress}\n onViewAll={() => {\n viewAllModalRef.current = create(PredictionsViewAllModal, {\n items,\n progress,\n count\n });\n }}\n />\n );\n }\n);\n\nexport default Predictions;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
export interface TaskItemProps {
|
|
2
|
+
import { ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
|
|
3
|
+
export interface TaskItemProps extends TestIdProp {
|
|
4
4
|
id: string;
|
|
5
5
|
/** Name of the task displayed in the list. */
|
|
6
6
|
name: string;
|
|
@@ -16,13 +16,13 @@ export interface TaskItemProps {
|
|
|
16
16
|
content?: ReactNode;
|
|
17
17
|
[key: string]: unknown;
|
|
18
18
|
}
|
|
19
|
-
export interface TaskListProps {
|
|
19
|
+
export interface TaskListProps extends TestIdProp {
|
|
20
20
|
items: TaskItemProps[];
|
|
21
21
|
hasFooter?: boolean;
|
|
22
22
|
/** Ref for the wrapping element. */
|
|
23
23
|
ref?: Ref<HTMLElement>;
|
|
24
24
|
}
|
|
25
|
-
export declare const TaskItem: ({ id, name, avatar, meta, processName, onOpen, content, ...restProps }: TaskItemProps) => JSX.Element;
|
|
25
|
+
export declare const TaskItem: ({ testId, id, name, avatar, meta, processName, onOpen, content, ...restProps }: TaskItemProps) => JSX.Element;
|
|
26
26
|
declare const TaskList: FunctionComponent<TaskListProps & ForwardProps>;
|
|
27
27
|
export default TaskList;
|
|
28
28
|
//# sourceMappingURL=TaskList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,
|
|
1
|
+
{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnG,OAAO,EACL,YAAY,EAYZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAmBD,eAAO,MAAM,QAAQ,mFAUlB,aAAa,gBAsDf,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkB7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -2,7 +2,8 @@ import { createElement as _createElement } from "react";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
|
-
import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, useI18n, VisuallyHiddenText, Breadcrumbs, StyledBreadcrumbs, StyledText } from '@pega/cosmos-react-core';
|
|
5
|
+
import { SummaryItem, StyledSummaryListItem, Flex, defaultThemeProp, Button, useI18n, VisuallyHiddenText, Breadcrumbs, StyledBreadcrumbs, StyledText, useTestIds } from '@pega/cosmos-react-core';
|
|
6
|
+
import { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';
|
|
6
7
|
const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
|
|
7
8
|
return css `
|
|
8
9
|
${hasFooter &&
|
|
@@ -18,16 +19,18 @@ const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
|
|
|
18
19
|
`;
|
|
19
20
|
});
|
|
20
21
|
StyledTaskList.defaultProps = defaultThemeProp;
|
|
21
|
-
export const TaskItem = ({ id, name, avatar, meta, processName, onOpen, content, ...restProps }) => {
|
|
22
|
+
export const TaskItem = ({ testId, id, name, avatar, meta, processName, onOpen, content, ...restProps }) => {
|
|
23
|
+
const testIds = useTestIds(testId, getTaskItemTestIds);
|
|
22
24
|
const t = useI18n();
|
|
23
25
|
const summary = (_jsx(SummaryItem, { visual: avatar, primary: processName ? (_jsx(Breadcrumbs, { path: [
|
|
24
26
|
{ id: 'processName', primary: processName },
|
|
25
27
|
{ id: 'name', primary: name }
|
|
26
|
-
] })) : (name), secondary: meta, actions: onOpen && !content ? (_jsxs(Button, { variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) : null }));
|
|
27
|
-
return (_jsx(Flex, { container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li', ...restProps, children: content ? (_jsxs(_Fragment, { children: [summary, content] })) : (summary) }));
|
|
28
|
+
] })) : (name), secondary: meta, actions: onOpen && !content ? (_jsxs(Button, { "data-testid": testIds.openTask, variant: 'primary', onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: `-${processName ?? ''} ${name}` })] })) : null }));
|
|
29
|
+
return (_jsx(Flex, { "data-testid": testIds.root, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: StyledSummaryListItem, forwardedAs: 'li', ...restProps, children: content ? (_jsxs(_Fragment, { children: [summary, content] })) : (summary) }));
|
|
28
30
|
};
|
|
29
|
-
const TaskList = forwardRef(({ items, hasFooter = false }, ref) => {
|
|
30
|
-
|
|
31
|
+
const TaskList = forwardRef(({ testId, items, hasFooter = false }, ref) => {
|
|
32
|
+
const testIds = useTestIds(testId, getTaskListTestIds);
|
|
33
|
+
return (_jsx(Flex, { "data-testid": testIds.root, container: { direction: 'column' }, as: StyledTaskList, hasFooter: hasFooter, ref: ref, children: items.map((item, i) => (_createElement(TaskItem, { ...item, key: `${i + 1}` }))) }));
|
|
31
34
|
});
|
|
32
35
|
export default TaskList;
|
|
33
36
|
//# sourceMappingURL=TaskList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkE,MAAM,OAAO,CAAC;AACnG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,WAAW,EACX,iBAAiB,EACjB,UAAU,
|
|
1
|
+
{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n useI18n,\n VisuallyHiddenText,\n Breadcrumbs,\n StyledBreadcrumbs,\n StyledText,\n useTestIds,\n TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. */\n name: string;\n /** Name of the process for the task. */\n processName?: string;\n /** Avatar element to represent the task's assignee. */\n avatar?: ReactNode;\n /** MetaList element with info related to the task. */\n meta?: ReactNode;\n /** Provide a callback to render a button for a task. */\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /** Content for the task when open. */\n content?: ReactNode;\n [key: string]: unknown;\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n return css`\n ${hasFooter &&\n css`\n > li:last-child {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `}\n\n ${StyledBreadcrumbs} > ${StyledText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const TaskItem = ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n content,\n ...restProps\n}: TaskItemProps) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n\n const summary = (\n <SummaryItem\n visual={avatar}\n primary={\n processName ? (\n <Breadcrumbs\n path={[\n { id: 'processName', primary: processName },\n { id: 'name', primary: name }\n ]}\n />\n ) : (\n name\n )\n }\n secondary={meta}\n actions={\n onOpen && !content ? (\n <Button\n data-testid={testIds.openTask}\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{`-${processName ?? ''} ${name}`}</VisuallyHiddenText>\n </Button>\n ) : null\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={StyledSummaryListItem}\n forwardedAs='li'\n {...restProps}\n >\n {content ? (\n <>\n {summary}\n {content}\n </>\n ) : (\n summary\n )}\n </Flex>\n );\n};\n\nconst TaskList: FunctionComponent<TaskListProps & ForwardProps> = forwardRef(\n ({ testId, items, hasFooter = false }: PropsWithoutRef<TaskListProps>, ref) => {\n const testIds = useTestIds(testId, getTaskListTestIds);\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map((item, i) => (\n <TaskItem {...item} key={`${i + 1}`} />\n ))}\n </Flex>\n );\n }\n);\n\nexport default TaskList;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode, FC, ReactElement } from 'react';
|
|
2
|
-
import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import { ForwardProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
|
|
3
3
|
import { TaskItemProps } from './TaskList';
|
|
4
|
-
export interface TasksProps extends NoChildrenProp {
|
|
4
|
+
export interface TasksProps extends NoChildrenProp, TestIdProp {
|
|
5
5
|
/** An array of TaskItemProps to generate the list. */
|
|
6
6
|
items: TaskItemProps[];
|
|
7
7
|
/** Content to render when the list is empty. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,
|
|
1
|
+
{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAGzE,OAAO,EAWL,YAAY,EACZ,cAAc,EACd,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/D,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,UAAU;IAC5D,uDAAuD;IACvD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4DAA4D;IAC5D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,2IAA2I;IAC3I,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAYD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,UAAU,CAkExC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Card, CardHeader, CardContent, CardFooter, Flex, Text, SummaryItem, Count, Button, useI18n, defaultThemeProp, useTestIds } from '@pega/cosmos-react-core';
|
|
5
5
|
import TaskList, { TaskItem } from './TaskList';
|
|
6
|
+
import { getTaskTestIds } from './Tasks.test-ids';
|
|
6
7
|
const StyledTasks = styled(Card)(({ theme, openItem }) => {
|
|
7
8
|
return openItem
|
|
8
9
|
? css `
|
|
@@ -12,7 +13,8 @@ const StyledTasks = styled(Card)(({ theme, openItem }) => {
|
|
|
12
13
|
});
|
|
13
14
|
StyledTasks.defaultProps = defaultThemeProp;
|
|
14
15
|
const Tasks = (props) => {
|
|
15
|
-
const { items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
|
|
16
|
+
const { testId, items = [], headerText, headerVisual, headerSecondary, count, onExpandToggle, emptyPlaceholder, ...restProps } = props;
|
|
17
|
+
const testIds = useTestIds(testId, getTaskTestIds);
|
|
16
18
|
const openItem = items.find(item => item.content);
|
|
17
19
|
const t = useI18n();
|
|
18
20
|
const hasFooter = useMemo(() => {
|
|
@@ -21,7 +23,7 @@ const Tasks = (props) => {
|
|
|
21
23
|
const TaskItems = useMemo(() => {
|
|
22
24
|
return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items, hasFooter: hasFooter });
|
|
23
25
|
}, [items, openItem]);
|
|
24
|
-
return (_jsxs(StyledTasks, { ...restProps, openItem: !!openItem, children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: headerText }), _jsx(Count, { children: count ?? null })] }), secondary: headerSecondary }) })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
26
|
+
return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, children: [!openItem && (_jsx(CardHeader, { children: _jsx(SummaryItem, { visual: headerVisual, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h2', children: headerText }), _jsx(Count, { "data-testid": testIds.count, children: count ?? null })] }), secondary: headerSecondary }) })), _jsx(CardContent, { children: items.length > 0 ? TaskItems : emptyPlaceholder }), hasFooter && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
|
|
25
27
|
onExpandToggle?.();
|
|
26
28
|
if (!!count && count <= items.length) {
|
|
27
29
|
const { currentTarget } = e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,OAAO,EAAc,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,
|
|
1
|
+
{"version":3,"file":"Tasks.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FC, ReactElement, useMemo, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Flex,\n Text,\n SummaryItem,\n Count,\n Button,\n useI18n,\n ForwardProps,\n NoChildrenProp,\n TestIdProp,\n defaultThemeProp,\n useTestIds\n} from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem, TaskItemProps } from './TaskList';\nimport { getTaskTestIds } from './Tasks.test-ids';\n\nexport interface TasksProps extends NoChildrenProp, TestIdProp {\n /** An array of TaskItemProps to generate the list. */\n items: TaskItemProps[];\n /** Content to render when the list is empty. */\n emptyPlaceholder: ReactNode;\n /** Heading text to render at the top of the list. */\n headerText: string;\n /** A visual element i.e. (Avatar | Icon) to accompany the header text. */\n headerVisual?: ReactElement;\n /** A region for supplemental task list info or controls. */\n headerSecondary?: ReactNode;\n /** Integer representing the total count of tasks. */\n count?: number | null;\n /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer. */\n onExpandToggle?: () => void;\n}\n\nconst StyledTasks = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n return openItem\n ? css`\n box-shadow: ${theme.base.shadow.low};\n `\n : null;\n});\n\nStyledTasks.defaultProps = defaultThemeProp;\n\nconst Tasks: FC<ForwardProps & TasksProps> = (props: TasksProps) => {\n const {\n testId,\n items = [],\n headerText,\n headerVisual,\n headerSecondary,\n count,\n onExpandToggle,\n emptyPlaceholder,\n ...restProps\n } = props;\n const testIds = useTestIds(testId, getTaskTestIds);\n const openItem = items.find(item => item.content);\n const t = useI18n();\n\n const hasFooter = useMemo(() => {\n return !openItem && typeof count === 'number' && count > 3;\n }, [openItem, count]);\n\n const TaskItems = useMemo(() => {\n return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} hasFooter={hasFooter} />;\n }, [items, openItem]);\n\n return (\n <StyledTasks data-testid={testIds.root} {...restProps} openItem={!!openItem}>\n {!openItem && (\n <CardHeader>\n <SummaryItem\n visual={headerVisual}\n primary={\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text data-testid={testIds.heading} variant='h2'>\n {headerText}\n </Text>\n <Count data-testid={testIds.count}>{count ?? null}</Count>\n </Flex>\n }\n secondary={headerSecondary}\n />\n </CardHeader>\n )}\n <CardContent>{items.length > 0 ? TaskItems : emptyPlaceholder}</CardContent>\n\n {hasFooter && (\n <CardFooter justify='center'>\n <Button\n data-testid={testIds.showMoreLess}\n variant='link'\n aria-label={t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks'])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onExpandToggle?.();\n if (!!count && count <= items.length) {\n const { currentTarget } = e;\n requestAnimationFrame(() => {\n if (currentTarget.getBoundingClientRect().top < 0) currentTarget.scrollIntoView();\n });\n }\n }}\n >\n {t(!!count && count > items.length ? 'show_more' : 'show_less')}\n </Button>\n </CardFooter>\n )}\n </StyledTasks>\n );\n};\n\nexport default Tasks;\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const getTaskTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "count", "show-more-less"]>;
|
|
2
|
+
export declare const getTaskListTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
|
|
3
|
+
export declare const getTaskItemTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
|
|
4
|
+
//# sourceMappingURL=Tasks.test-ids.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tasks.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,uIAIhB,CAAC;AAEZ,eAAO,MAAM,kBAAkB,mGAA0C,CAAC;AAE1E,eAAO,MAAM,kBAAkB,8GAAqD,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createTestIds } from '@pega/cosmos-react-core';
|
|
2
|
+
export const getTaskTestIds = createTestIds('tasks', [
|
|
3
|
+
'heading',
|
|
4
|
+
'count',
|
|
5
|
+
'show-more-less'
|
|
6
|
+
]);
|
|
7
|
+
export const getTaskListTestIds = createTestIds('task-list', []);
|
|
8
|
+
export const getTaskItemTestIds = createTestIds('task-item', ['open-task']);
|
|
9
|
+
//# sourceMappingURL=Tasks.test-ids.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tasks.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,EAAE;IACnD,SAAS;IACT,OAAO;IACP,gBAAgB;CACR,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,EAAW,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,WAAW,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getTaskTestIds = createTestIds('tasks', [\n 'heading',\n 'count',\n 'show-more-less'\n] as const);\n\nexport const getTaskListTestIds = createTestIds('task-list', [] as const);\n\nexport const getTaskItemTestIds = createTestIds('task-item', ['open-task'] as const);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.13.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.13.0",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
declare const StyledSummaryList: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").SummaryListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
-
export default StyledSummaryList;
|
|
3
|
-
//# sourceMappingURL=Predictions.styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.styles.ts"],"names":[],"mappings":"AAgBA,QAAA,MAAM,iBAAiB,2NAgBrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { readableColor } from 'polished';
|
|
3
|
-
import { defaultThemeProp, StyledButton, StyledPopover, tryCatch, SummaryList, StyledEmptyState, StyledText, StyledIcon } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
|
|
5
|
-
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
6
|
-
const StyledSummaryList = styled(SummaryList)(({ theme, onViewAll }) => {
|
|
7
|
-
const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
|
|
8
|
-
return css `
|
|
9
|
-
${onViewAll &&
|
|
10
|
-
css `
|
|
11
|
-
${StyledPopover} &, &:not(& &) {
|
|
12
|
-
background-color: ${theme.base.palette['brand-primary']};
|
|
13
|
-
color: ${color};
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
${StyledCardContent} ${StyledEmptyState} ${StyledText}, ${StyledCardContent} ${StyledEmptyState} ${StyledIcon}, ${StyledCardFooter} ${StyledButton} {
|
|
17
|
-
color: ${color};
|
|
18
|
-
}
|
|
19
|
-
`}
|
|
20
|
-
`;
|
|
21
|
-
});
|
|
22
|
-
StyledSummaryList.defaultProps = defaultThemeProp;
|
|
23
|
-
export default StyledSummaryList;
|
|
24
|
-
//# sourceMappingURL=Predictions.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Predictions.styles.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAEjF,OAAO,GAAG,CAAA;MACN,SAAS;QACX,GAAG,CAAA;QACC,aAAa;4BACO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;iBAC9C,KAAK;;;QAGd,iBAAiB,IAAI,gBAAgB,IAAI,UAAU,KAAK,iBAAiB,IAAI,gBAAgB,IAAI,UAAU,KAAK,gBAAgB,IAAI,YAAY;iBACvI,KAAK;;KAEjB;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n StyledButton,\n StyledPopover,\n tryCatch,\n SummaryList,\n StyledEmptyState,\n StyledText,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nconst StyledSummaryList = styled(SummaryList)(({ theme, onViewAll }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n ${onViewAll &&\n css`\n ${StyledPopover} &, &:not(& &) {\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n }\n\n ${StyledCardContent} ${StyledEmptyState} ${StyledText}, ${StyledCardContent} ${StyledEmptyState} ${StyledIcon}, ${StyledCardFooter} ${StyledButton} {\n color: ${color};\n }\n `}\n `;\n});\n\nStyledSummaryList.defaultProps = defaultThemeProp;\n\nexport default StyledSummaryList;\n"]}
|