@pega/cosmos-react-work 4.0.0-dev.2.0 → 4.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts +7 -21
  2. package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
  3. package/lib/components/AppAnnouncement/AppAnnouncement.js +2 -1
  4. package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
  5. package/lib/components/Assignments/Assignments.d.ts +21 -0
  6. package/lib/components/Assignments/Assignments.d.ts.map +1 -0
  7. package/lib/components/Assignments/Assignments.js +20 -0
  8. package/lib/components/Assignments/Assignments.js.map +1 -0
  9. package/lib/components/Assignments/Assignments.styles.d.ts +8 -0
  10. package/lib/components/Assignments/Assignments.styles.d.ts.map +1 -0
  11. package/lib/components/Assignments/Assignments.styles.js +41 -0
  12. package/lib/components/Assignments/Assignments.styles.js.map +1 -0
  13. package/lib/components/Assignments/index.d.ts +2 -0
  14. package/lib/components/Assignments/index.d.ts.map +1 -0
  15. package/lib/components/Assignments/index.js +2 -0
  16. package/lib/components/Assignments/index.js.map +1 -0
  17. package/lib/components/CasePreview/CasePreview.d.ts +9 -4
  18. package/lib/components/CasePreview/CasePreview.d.ts.map +1 -1
  19. package/lib/components/CasePreview/CasePreview.js +6 -9
  20. package/lib/components/CasePreview/CasePreview.js.map +1 -1
  21. package/lib/components/CasePreview/CasePreview.test-ids.d.ts +2 -0
  22. package/lib/components/CasePreview/CasePreview.test-ids.d.ts.map +1 -0
  23. package/lib/components/CasePreview/CasePreview.test-ids.js +3 -0
  24. package/lib/components/CasePreview/CasePreview.test-ids.js.map +1 -0
  25. package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +1 -0
  26. package/lib/components/CaseView/CaseHeader/CaseHeader.js +119 -0
  27. package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -0
  28. package/lib/components/CaseView/CaseHeader/Summary.d.ts +6 -0
  29. package/lib/components/CaseView/CaseHeader/Summary.d.ts.map +1 -0
  30. package/lib/components/CaseView/CaseHeader/Summary.js +182 -0
  31. package/lib/components/CaseView/CaseHeader/Summary.js.map +1 -0
  32. package/lib/components/CaseView/CaseSummary.d.ts.map +1 -1
  33. package/lib/components/CaseView/CaseSummary.js +9 -4
  34. package/lib/components/CaseView/CaseSummary.js.map +1 -1
  35. package/lib/components/CaseView/CaseSummaryFields.d.ts.map +1 -1
  36. package/lib/components/CaseView/CaseSummaryFields.js +14 -4
  37. package/lib/components/CaseView/CaseSummaryFields.js.map +1 -1
  38. package/lib/components/CaseView/CaseView.d.ts +4 -2
  39. package/lib/components/CaseView/CaseView.d.ts.map +1 -1
  40. package/lib/components/CaseView/CaseView.js +183 -68
  41. package/lib/components/CaseView/CaseView.js.map +1 -1
  42. package/lib/components/CaseView/CaseView.styles.d.ts +45 -19
  43. package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
  44. package/lib/components/CaseView/CaseView.styles.js +324 -66
  45. package/lib/components/CaseView/CaseView.styles.js.map +1 -1
  46. package/lib/components/CaseView/CaseView.test-ids.d.ts +2 -0
  47. package/lib/components/CaseView/CaseView.test-ids.d.ts.map +1 -0
  48. package/lib/components/CaseView/CaseView.test-ids.js +17 -0
  49. package/lib/components/CaseView/CaseView.test-ids.js.map +1 -0
  50. package/lib/components/CaseView/CaseView.types.d.ts +27 -34
  51. package/lib/components/CaseView/CaseView.types.d.ts.map +1 -1
  52. package/lib/components/CaseView/CaseView.types.js.map +1 -1
  53. package/lib/components/CaseView/UtilitiesSummary.d.ts +0 -1
  54. package/lib/components/CaseView/UtilitiesSummary.d.ts.map +1 -1
  55. package/lib/components/CaseView/UtilitiesSummary.js +4 -8
  56. package/lib/components/CaseView/UtilitiesSummary.js.map +1 -1
  57. package/lib/components/CaseView/index.d.ts +0 -5
  58. package/lib/components/CaseView/index.d.ts.map +1 -1
  59. package/lib/components/CaseView/index.js +0 -4
  60. package/lib/components/CaseView/index.js.map +1 -1
  61. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts +1 -3
  62. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts.map +1 -1
  63. package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js.map +1 -1
  64. package/lib/components/Confirmation/Confirmation.d.ts +1 -1
  65. package/lib/components/Confirmation/Confirmation.d.ts.map +1 -1
  66. package/lib/components/Confirmation/Confirmation.js +2 -2
  67. package/lib/components/Confirmation/Confirmation.js.map +1 -1
  68. package/lib/components/Details/Details.d.ts.map +1 -1
  69. package/lib/components/Details/Details.js +25 -16
  70. package/lib/components/Details/Details.js.map +1 -1
  71. package/lib/components/Details/Details.styles.d.ts +6 -4
  72. package/lib/components/Details/Details.styles.d.ts.map +1 -1
  73. package/lib/components/Details/Details.styles.js +38 -101
  74. package/lib/components/Details/Details.styles.js.map +1 -1
  75. package/lib/components/Glimpse/Glimpse.d.ts +10 -10
  76. package/lib/components/Glimpse/Glimpse.d.ts.map +1 -1
  77. package/lib/components/Glimpse/Glimpse.js +7 -17
  78. package/lib/components/Glimpse/Glimpse.js.map +1 -1
  79. package/lib/components/Glimpse/index.d.ts +1 -1
  80. package/lib/components/Glimpse/index.d.ts.map +1 -1
  81. package/lib/components/Glimpse/index.js +0 -1
  82. package/lib/components/Glimpse/index.js.map +1 -1
  83. package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map +1 -1
  84. package/lib/components/IntelligentGuidance/IntelligentGuidance.js +39 -43
  85. package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map +1 -1
  86. package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts +3 -2
  87. package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map +1 -1
  88. package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js +137 -81
  89. package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js.map +1 -1
  90. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts +13 -9
  91. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.d.ts.map +1 -1
  92. package/lib/components/IntelligentGuidance/IntelligentGuidance.types.js.map +1 -1
  93. package/lib/components/Predictions/Predictions.d.ts +6 -0
  94. package/lib/components/Predictions/Predictions.d.ts.map +1 -0
  95. package/lib/components/Predictions/Predictions.js +60 -0
  96. package/lib/components/Predictions/Predictions.js.map +1 -0
  97. package/lib/components/Predictions/Predictions.types.d.ts +23 -0
  98. package/lib/components/Predictions/Predictions.types.d.ts.map +1 -0
  99. package/lib/components/Predictions/Predictions.types.js +2 -0
  100. package/lib/components/Predictions/Predictions.types.js.map +1 -0
  101. package/lib/components/Predictions/index.d.ts +3 -0
  102. package/lib/components/Predictions/index.d.ts.map +1 -0
  103. package/lib/components/Predictions/index.js +2 -0
  104. package/lib/components/Predictions/index.js.map +1 -0
  105. package/lib/components/SearchResults/SearchResults.types.d.ts +5 -5
  106. package/lib/components/SearchResults/SearchResults.types.d.ts.map +1 -1
  107. package/lib/components/SearchResults/SearchResults.types.js.map +1 -1
  108. package/lib/components/Stages/StageGlimpse.d.ts +0 -2
  109. package/lib/components/Stages/StageGlimpse.d.ts.map +1 -1
  110. package/lib/components/Stages/StageGlimpse.js +4 -4
  111. package/lib/components/Stages/StageGlimpse.js.map +1 -1
  112. package/lib/components/Stages/Stages.d.ts.map +1 -1
  113. package/lib/components/Stages/Stages.js +39 -58
  114. package/lib/components/Stages/Stages.js.map +1 -1
  115. package/lib/components/Stages/Stages.styles.d.ts +0 -2
  116. package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
  117. package/lib/components/Stages/Stages.styles.js +10 -18
  118. package/lib/components/Stages/Stages.styles.js.map +1 -1
  119. package/lib/components/Stakeholders/Stakeholders.d.ts.map +1 -1
  120. package/lib/components/Stakeholders/Stakeholders.js +2 -2
  121. package/lib/components/Stakeholders/Stakeholders.js.map +1 -1
  122. package/lib/components/Stakeholders/Stakeholders.types.d.ts +5 -13
  123. package/lib/components/Stakeholders/Stakeholders.types.d.ts.map +1 -1
  124. package/lib/components/Stakeholders/Stakeholders.types.js.map +1 -1
  125. package/lib/components/Tags/Tags.d.ts +1 -1
  126. package/lib/components/Tags/Tags.d.ts.map +1 -1
  127. package/lib/components/Tags/Tags.js +5 -20
  128. package/lib/components/Tags/Tags.js.map +1 -1
  129. package/lib/components/Tasks/TaskList.d.ts +18 -7
  130. package/lib/components/Tasks/TaskList.d.ts.map +1 -1
  131. package/lib/components/Tasks/TaskList.js +48 -10
  132. package/lib/components/Tasks/TaskList.js.map +1 -1
  133. package/lib/components/Tasks/Tasks.d.ts +21 -15
  134. package/lib/components/Tasks/Tasks.d.ts.map +1 -1
  135. package/lib/components/Tasks/Tasks.js +9 -9
  136. package/lib/components/Tasks/Tasks.js.map +1 -1
  137. package/lib/components/Tasks/Tasks.test-ids.d.ts +4 -0
  138. package/lib/components/Tasks/Tasks.test-ids.d.ts.map +1 -0
  139. package/lib/components/Tasks/Tasks.test-ids.js +5 -0
  140. package/lib/components/Tasks/Tasks.test-ids.js.map +1 -0
  141. package/lib/components/Tasks/index.d.ts +3 -5
  142. package/lib/components/Tasks/index.d.ts.map +1 -1
  143. package/lib/components/Tasks/index.js +1 -0
  144. package/lib/components/Tasks/index.js.map +1 -1
  145. package/lib/components/Timeline/Timeline.d.ts.map +1 -1
  146. package/lib/components/Timeline/Timeline.js +14 -12
  147. package/lib/components/Timeline/Timeline.js.map +1 -1
  148. package/lib/components/Timeline/Timeline.styles.d.ts +4 -5
  149. package/lib/components/Timeline/Timeline.styles.d.ts.map +1 -1
  150. package/lib/components/Timeline/Timeline.styles.js +34 -55
  151. package/lib/components/Timeline/Timeline.styles.js.map +1 -1
  152. package/lib/components/Timeline/Timeline.types.d.ts +8 -8
  153. package/lib/components/Timeline/Timeline.types.d.ts.map +1 -1
  154. package/lib/components/Timeline/Timeline.types.js.map +1 -1
  155. package/lib/components/Timeline/TimelineItem.d.ts.map +1 -1
  156. package/lib/components/Timeline/TimelineItem.js +19 -7
  157. package/lib/components/Timeline/TimelineItem.js.map +1 -1
  158. package/lib/components/Timeline/utils.d.ts +1 -0
  159. package/lib/components/Timeline/utils.d.ts.map +1 -1
  160. package/lib/components/Timeline/utils.js +12 -0
  161. package/lib/components/Timeline/utils.js.map +1 -1
  162. package/lib/index.d.ts +4 -0
  163. package/lib/index.d.ts.map +1 -1
  164. package/lib/index.js +4 -0
  165. package/lib/index.js.map +1 -1
  166. package/package.json +8 -6
  167. package/lib/components/CaseView/CaseHeader.d.ts.map +0 -1
  168. package/lib/components/CaseView/CaseHeader.js +0 -49
  169. package/lib/components/CaseView/CaseHeader.js.map +0 -1
  170. package/lib/components/CaseView/MobileCaseView.d.ts +0 -13
  171. package/lib/components/CaseView/MobileCaseView.d.ts.map +0 -1
  172. package/lib/components/CaseView/MobileCaseView.js +0 -25
  173. package/lib/components/CaseView/MobileCaseView.js.map +0 -1
  174. /package/lib/components/CaseView/{CaseHeader.d.ts → CaseHeader/CaseHeader.d.ts} +0 -0
@@ -1,32 +1,70 @@
1
1
  import styled, { css } from 'styled-components';
2
- import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
3
- import { Button, calculateFontSize, defaultThemeProp, StyledBreadcrumbs, StyledButton, StyledFieldValue, StyledFieldValueList, StyledIcon, StyledPopover, StyledText, StyledTooltip, tryCatch } from '@pega/cosmos-react-core';
2
+ import { getContrast, hideVisually, meetsContrastGuidelines, parseToHsl, readableColor, rgba, transparentize } from 'polished';
3
+ import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, useDirection } from '@pega/cosmos-react-core';
4
4
  import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
5
+ import { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
6
+ import { StyledStage, StyledStages } from '../Stages/Stages.styles';
7
+ import { StyledAssignments } from '../Assignments/Assignments.styles';
5
8
  import { useCaseViewContext } from './CaseView.context';
6
- export const StyledCaseSummaryFields = styled.div(({ theme }) => {
9
+ const labelChWidth = 16;
10
+ const inlineEndButtonOffset = '0.375rem';
11
+ export const StyledCaseSummaryFields = styled.div ``;
12
+ StyledCaseSummaryFields.defaultProps = defaultThemeProp;
13
+ export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme, wrapped }) => {
7
14
  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
8
15
  return css `
9
- padding: calc(2 * ${theme.base.spacing});
10
-
11
- > ${StyledFieldValueList}:first-child {
12
- grid-template-columns: 16ch auto;
16
+ ${wrapped
17
+ ? css `
18
+ grid-template-columns: minmax(0, 1fr);
19
+ `
20
+ : css `
21
+ grid-template-columns: ${labelChWidth}ch auto;
22
+ `}
13
23
 
14
24
  ${StyledFieldValue} {
15
25
  font-size: ${fontSizes[theme.components.text.h1['font-size']]};
16
26
  font-weight: ${theme.components.text.h1['font-weight']};
17
27
  }
28
+ `;
29
+ });
30
+ StyledSummaryPrimaryList.defaultProps = defaultThemeProp;
31
+ export const StyledSummarySecondaryList = styled(FieldValueList)(() => {
32
+ return css `
33
+ ${StyledStackedFieldValue} {
34
+ grid-column: 1 / -1;
35
+ }
36
+ `;
37
+ });
38
+ export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
39
+ const { base: { spacing } } = theme;
40
+ const containerWidthCh = colCountChWidth[1].containerWidth;
41
+ const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;
42
+ return css `
43
+ ${StyledSummarySecondaryList} {
44
+ > ${StyledStackedFieldValue} {
45
+ max-width: ${containerWidthCh}ch;
46
+ }
47
+
48
+ > ${StyledFieldValue} {
49
+ max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});
50
+ }
18
51
  }
19
52
  `;
20
53
  });
21
- StyledCaseSummaryFields.defaultProps = defaultThemeProp;
54
+ StyledSummaryTabContent.defaultProps = defaultThemeProp;
22
55
  export const StyledCaseHeader = styled.header(({ theme }) => {
23
56
  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
24
57
  return css `
25
58
  background-color: ${theme.base.palette['brand-primary']};
26
59
  color: ${color};
27
- padding: calc(2 * ${theme.base.spacing});
60
+ padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
28
61
  position: relative;
29
62
 
63
+ h1:focus-visible {
64
+ outline: transparent;
65
+ box-shadow: ${theme.base.shadow.focus};
66
+ }
67
+
30
68
  ${StyledMenu} {
31
69
  color: ${theme.base.palette['foreground-color']};
32
70
  z-index: ${theme.base['z-index'].popover + 1};
@@ -43,11 +81,13 @@ export const StyledCaseIconWrap = styled.div(({ theme }) => {
43
81
  });
44
82
  return css `
45
83
  background: ${backgroundColor};
84
+ width: calc(4 * ${spacing});
85
+ height: calc(4 * ${spacing});
46
86
  border-radius: calc(${borderRadius} / 2);
47
- width: calc(5 * ${spacing});
48
- height: calc(5 * ${spacing});
87
+ margin-block-start: ${spacing};
88
+
49
89
  ${StyledIcon} {
50
- font-size: calc(3 * ${spacing});
90
+ font-size: calc(2 * ${spacing});
51
91
  margin: auto;
52
92
  }
53
93
  `;
@@ -66,6 +106,19 @@ export const StyledFollowIconWrap = styled.label `
66
106
  StyledFollowIconWrap.defaultProps = defaultThemeProp;
67
107
  export const StyledSubheading = styled.p ``;
68
108
  StyledSubheading.defaultProps = defaultThemeProp;
109
+ export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
110
+ return css `
111
+ margin-inline-start: auto;
112
+ padding-block: ${theme.base.spacing};
113
+ padding-inline-start: calc(2 * ${theme.base.spacing});
114
+
115
+ ${offsetEnd &&
116
+ css `
117
+ padding-inline-end: ${inlineEndButtonOffset};
118
+ `};
119
+ `;
120
+ });
121
+ StyledHeaderActions.defaultProps = defaultThemeProp;
69
122
  export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
70
123
  const color = readableColor(theme.base.palette['brand-primary']);
71
124
  const transparentColor = tryCatch(() => transparentize(0.1, color));
@@ -83,6 +136,8 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
83
136
  }
84
137
 
85
138
  ${StyledBreadcrumbs} {
139
+ max-width: 100%;
140
+
86
141
  > a,
87
142
  > span,
88
143
  > button,
@@ -102,18 +157,144 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
102
157
  }
103
158
  }
104
159
 
105
- > ${StyledText} > ${StyledButton} {
160
+ > ${StyledText} > ${StyledLink} {
106
161
  color: ${color};
107
162
  }
163
+
164
+ + ${StyledHeaderActions} {
165
+ padding-inline-start: 0;
166
+ }
108
167
  `;
109
168
  });
110
169
  StyledCaseHeaderText.defaultProps = defaultThemeProp;
111
- export const StyledPromotedActions = styled.div(({ theme }) => {
170
+ export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
171
+ const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
172
+ const interactiveUsable = getContrast(primary, interactive) >= 4.5;
173
+ const color = interactiveUsable ? interactive : readableColor(primary);
174
+ let hoverBackground = rgba(color, 0.15);
175
+ if (interactiveUsable) {
176
+ hoverBackground = readableHue(hoverBackground, color);
177
+ }
178
+ return css `
179
+ --button-background-color: ${primary};
180
+ color: ${color};
181
+ background-color: ${primary};
182
+ border-color: ${color};
183
+
184
+ @media (hover: hover) {
185
+ &:hover {
186
+ --button-background-color: ${hoverBackground};
187
+ color: ${color};
188
+ background-color: ${hoverBackground};
189
+ border-color: ${color};
190
+ }
191
+ }
192
+ `;
193
+ });
194
+ StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
195
+ export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
196
+ const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
197
+ const color = readableColor(primary);
198
+ const transparentColor = tryCatch(() => transparentize(0.5, color));
199
+ return css `
200
+ ${hasItems &&
201
+ css `
202
+ border-inline-start: 0.0625rem solid ${transparentColor};
203
+ `}
204
+
205
+ ${StyledStackedFieldValue}:first-child {
206
+ margin-inline-start: calc(2 * ${spacing});
207
+ }
208
+ `;
209
+ });
210
+ StyledHeaderSummaryBlock.defaultProps = defaultThemeProp;
211
+ const popoverColorReset = (theme) => {
212
+ const { base: { palette: { interactive, light, 'foreground-color': baseForeground } } } = theme;
112
213
  return css `
113
- border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
214
+ ${StyledPopover}:not(${StyledTooltip}) {
215
+ color: ${baseForeground};
216
+
217
+ ${StyledButtonLink},
218
+ ${StyledLink} {
219
+ color: ${interactive};
220
+ text-decoration: none;
221
+
222
+ &:hover,
223
+ &:active {
224
+ text-decoration: underline;
225
+ }
226
+
227
+ &:focus {
228
+ box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};
229
+ }
230
+ }
231
+ }
114
232
  `;
233
+ };
234
+ export const StyledHeaderSummary = styled.dl(({ theme }) => {
235
+ const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
236
+ const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
237
+ const color = readableColor(primary);
238
+ const transparentColor = tryCatch(() => transparentize(0.1, color));
239
+ return css `
240
+ max-width: 100%;
241
+ min-width: 0;
242
+
243
+ > ${StyledStackedFieldValue} {
244
+ > ${StyledLabel} {
245
+ color: ${transparentColor};
246
+ white-space: nowrap;
247
+ }
248
+
249
+ > ${StyledFieldValue} {
250
+ color: ${color};
251
+ white-space: nowrap;
252
+ }
253
+
254
+ ${StyledButtonLink},
255
+ ${StyledLink} {
256
+ &:focus-visible {
257
+ box-shadow: inset 0 0 0 0.0625rem ${color};
258
+ }
259
+
260
+ ${!interactiveUsable &&
261
+ css `
262
+ color: ${color};
263
+ text-decoration: underline;
264
+ `}
265
+ }
266
+
267
+ ${popoverColorReset(theme)}
268
+ }
269
+ `;
270
+ });
271
+ StyledHeaderSummary.defaultProps = defaultThemeProp;
272
+ export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, truncate, theme }) => {
273
+ const { base: { 'content-width': { xs } }, components: { text: { h1: { 'font-weight': h1Weight } } } } = theme;
274
+ return css `
275
+ overflow: hidden;
276
+ text-overflow: ellipsis;
277
+
278
+ ${truncate &&
279
+ css `
280
+ max-width: ${xs};
281
+ `}
282
+
283
+ ${bold &&
284
+ css `
285
+ font-weight: ${h1Weight};
286
+ `}
287
+
288
+ /*
289
+ * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
290
+ * factoring into scrollWidth of element when determining truncation.
291
+ */
292
+ > :not([hidden]) {
293
+ display: inline;
294
+ }
295
+ `;
115
296
  });
116
- StyledPromotedActions.defaultProps = defaultThemeProp;
297
+ StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
117
298
  export const StyledCaseSummaryInfo = styled.div(() => {
118
299
  const { intelligentGuidance } = useCaseViewContext();
119
300
  return css `
@@ -127,70 +308,81 @@ export const StyledCaseSummaryInfo = styled.div(() => {
127
308
  `;
128
309
  });
129
310
  StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
130
- export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
311
+ export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
312
+ return css `
313
+ padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
314
+ `;
315
+ });
316
+ StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
317
+ export const StyledExpandCollapseButton = styled(Button)(() => {
318
+ return css `
319
+ border: none;
320
+
321
+ ${StyledIcon} {
322
+ width: 1.5rem;
323
+ height: 1.5rem;
324
+ }
325
+ `;
326
+ });
327
+ StyledExpandCollapseButton.defaultProps = defaultThemeProp;
328
+ export const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {
131
329
  const { summaryExpanded } = useCaseViewContext();
330
+ const { rtl } = useDirection();
132
331
  return css `
332
+ --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);
333
+ --half-btn-compact-difference: calc(
334
+ (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2
335
+ );
336
+ --half-case-icon-compact-difference: calc(
337
+ ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2
338
+ );
339
+ @media (pointer: coarse) {
340
+ --half-btn-compact-difference: calc(
341
+ (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2
342
+ );
343
+ }
133
344
  position: absolute;
134
345
  z-index: 1;
135
- bottom: 0;
136
- inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};
137
- border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
138
346
  box-shadow: ${theme.base.shadow.low};
139
- border: none;
140
- opacity: 0;
141
347
 
142
- &:focus {
143
- opacity: 1;
144
- }
348
+ ${summaryExpanded
349
+ ? css `
350
+ inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));
351
+ inset-inline-start: calc(100% - var(--half-compact-btn-height));
352
+ `
353
+ : css `
354
+ inset-block-end: calc(var(--half-compact-btn-height) * -1);
355
+ inset-inline-start: calc(
356
+ 2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)
357
+ );
358
+ `}
145
359
 
146
360
  ${StyledIcon} {
147
- width: 1.5rem;
148
- height: 1.5rem;
149
- transform: rotate(${summaryExpanded ? 0 : css `180deg`});
361
+ ${summaryExpanded
362
+ ? css `
363
+ transform: rotate(${rtl ? '180deg' : '0'});
364
+ `
365
+ : css `
366
+ transform: rotate(-90deg);
367
+ `}
150
368
  }
151
369
  `;
152
370
  });
153
- StyledExpandCollapseButton.defaultProps = defaultThemeProp;
371
+ StyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;
154
372
  export const StyledCaseSummary = styled.div(() => {
155
- const { summaryExpanded, aboveMD, aboveLG } = useCaseViewContext();
373
+ const { summaryExpanded, aboveMD } = useCaseViewContext();
156
374
  return css `
157
375
  position: relative;
158
376
  height: 100%;
159
-
160
377
  ${aboveMD &&
378
+ summaryExpanded &&
161
379
  css `
162
- ${summaryExpanded
163
- ? css `
164
- width: ${aboveLG ? css `25rem` : css `22rem`};
165
-
166
- &:focus-within,
167
- &:hover {
168
- &::after {
169
- content: '';
170
- position: absolute;
171
- top: 0;
172
- bottom: 0;
173
- inset-inline-start: 100%;
174
- width: 0.75rem;
175
- }
176
-
177
- ${StyledExpandCollapseButton} {
178
- opacity: 1;
179
- }
180
- }
181
- `
182
- : css `
183
- width: 100%;
184
- ${StyledExpandCollapseButton} {
185
- opacity: 1;
186
- }
187
- `}
380
+ width: 25rem;
188
381
  `}
189
382
  `;
190
383
  });
191
- StyledCaseSummary.defaultProps = defaultThemeProp;
192
384
  export const StyledWorkArea = styled.div(({ theme }) => {
193
- const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();
385
+ const { summaryExpanded, aboveMD, intelligentGuidance, stages, tasks } = useCaseViewContext();
194
386
  let pbeRem = 0;
195
387
  if (intelligentGuidance) {
196
388
  pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
@@ -203,6 +395,9 @@ export const StyledWorkArea = styled.div(({ theme }) => {
203
395
  css `
204
396
  padding: calc(2 * ${theme.base.spacing}) 0;
205
397
 
398
+ /* This is required to make scrollStick work. */
399
+ height: max-content;
400
+
206
401
  ${!summaryExpanded &&
207
402
  css `
208
403
  margin-inline-start: calc(2 * ${theme.base.spacing});
@@ -215,27 +410,81 @@ export const StyledWorkArea = styled.div(({ theme }) => {
215
410
  /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
216
411
  padding-block-end: ${pbeRem}rem;
217
412
  `}
413
+
414
+ ${stages &&
415
+ tasks &&
416
+ css `
417
+ ${StyledStages} {
418
+ border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
419
+
420
+ &,
421
+ > ${StyledStage}:first-child {
422
+ border-end-start-radius: 0;
423
+ }
424
+
425
+ &,
426
+ > ${StyledStage}:last-child {
427
+ border-end-end-radius: 0;
428
+ }
429
+ }
430
+
431
+ ${StyledCard}${StyledAssignments} {
432
+ margin-block-start: calc(-2 * ${theme.base.spacing});
433
+ border-start-start-radius: 0;
434
+ border-start-end-radius: 0;
435
+ }
436
+ `}
218
437
  `;
219
438
  });
220
439
  StyledWorkArea.defaultProps = defaultThemeProp;
221
- export const StyledUtilToggle = styled.button(({ theme }) => {
440
+ export const StyledUtilitiesHeading = styled(Text) ``;
441
+ export const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {
442
+ const { utilitiesExpanded } = useCaseViewContext();
443
+ const { rtl } = useDirection();
222
444
  return css `
223
- align-self: flex-end;
224
- color: ${theme.base.palette['foreground-color']};
225
- margin-inline-end: 0.375rem;
445
+ /* Centers button over the utilities summary */
446
+ margin-inline-end: ${utilitiesExpanded && '0.625rem'};
447
+
448
+ ${StyledIcon} {
449
+ ${utilitiesExpanded !== rtl
450
+ ? css `
451
+ transform: rotate(180deg);
452
+ `
453
+ : css `
454
+ transform: rotate(0);
455
+ `}
456
+ }
226
457
  `;
227
458
  });
228
- StyledUtilToggle.defaultProps = defaultThemeProp;
229
- export const StyledUtilities = styled.div(() => {
230
- const { utilitiesExpanded, aboveLG } = useCaseViewContext();
459
+ StyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;
460
+ export const StyledUtilities = styled.div(({ theme }) => {
461
+ const { utilitiesExpanded, aboveLG, aboveMD } = useCaseViewContext();
231
462
  return css `
232
463
  height: max-content;
464
+ margin-block: calc(2 * ${theme.base.spacing});
465
+
466
+ /* If utilities are in an expanded drawer. */
467
+ ${utilitiesExpanded &&
468
+ aboveMD &&
469
+ !aboveLG &&
470
+ css `
471
+ /* Maintains the column width to avoid page content shift. */
472
+ visibility: hidden;
473
+ `}
233
474
 
234
475
  ${aboveLG &&
235
476
  utilitiesExpanded &&
236
477
  css `
237
478
  width: 25rem;
238
479
  `}
480
+
481
+
482
+ /* Selects the h2 in the utilities column, not the drawer. */
483
+ ${StyledUtilitiesHeading} {
484
+ /* Hide the utilities h2 under certain conditions.*/
485
+ ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&
486
+ hideVisually()}
487
+ }
239
488
  `;
240
489
  });
241
490
  StyledUtilities.defaultProps = defaultThemeProp;
@@ -295,6 +544,7 @@ export const StyledPersistentUtility = styled.div(({ theme }) => {
295
544
  z-index: 1;
296
545
  height: var(--case-view-height);
297
546
  top: var(--top-offset);
547
+ padding-block: calc(2 * ${theme.base.spacing});
298
548
  `;
299
549
  });
300
550
  StyledPersistentUtility.defaultProps = defaultThemeProp;
@@ -320,4 +570,12 @@ export const StyledCaseView = styled.div(({ theme }) => {
320
570
  `;
321
571
  });
322
572
  StyledCaseView.defaultProps = defaultThemeProp;
573
+ export const StyledUtilitiesHeader = styled(Text) `
574
+ align-self: center;
575
+
576
+ &:not(:focus) {
577
+ ${hideVisually}
578
+ }
579
+ `;
580
+ StyledUtilitiesHeader.defaultProps = defaultThemeProp;
323
581
  //# sourceMappingURL=CaseView.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n defaultThemeProp,\n StyledBreadcrumbs,\n StyledButton,\n StyledFieldValue,\n StyledFieldValueList,\n StyledIcon,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FontSize\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding: calc(2 * ${theme.base.spacing});\n\n > ${StyledFieldValueList}:first-child {\n grid-template-columns: 16ch auto;\n\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n }\n `;\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n border-radius: calc(${borderRadius} / 2);\n width: calc(5 * ${spacing});\n height: calc(5 * ${spacing});\n ${StyledIcon} {\n font-size: calc(3 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n }\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledButton} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedActions = styled.div(({ theme }) => {\n return css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\n\nStyledPromotedActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n\n return css`\n position: absolute;\n z-index: 1;\n bottom: 0;\n inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};\n border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n box-shadow: ${theme.base.shadow.low};\n border: none;\n opacity: 0;\n\n &:focus {\n opacity: 1;\n }\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n transform: rotate(${summaryExpanded ? 0 : css`180deg`});\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(() => {\n const { summaryExpanded, aboveMD, aboveLG } = useCaseViewContext();\n\n return css`\n position: relative;\n height: 100%;\n\n ${aboveMD &&\n css`\n ${summaryExpanded\n ? css`\n width: ${aboveLG ? css`25rem` : css`22rem`};\n\n &:focus-within,\n &:hover {\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 100%;\n width: 0.75rem;\n }\n\n ${StyledExpandCollapseButton} {\n opacity: 1;\n }\n }\n `\n : css`\n width: 100%;\n ${StyledExpandCollapseButton} {\n opacity: 1;\n }\n `}\n `}\n `;\n});\n\nStyledCaseSummary.defaultProps = defaultThemeProp;\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${theme.base.spacing});\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n `}\n\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(() => {\n const { utilitiesExpanded, aboveLG } = useCaseViewContext();\n\n return css`\n height: max-content;\n\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${theme.base.breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-height);\n top: var(--top-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: ${theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n top: var(--top-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n const { aboveMD } = useCaseViewContext();\n\n return css`\n --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n --case-view-height: calc(100vh - var(--top-offset));\n position: relative;\n min-height: var(--case-view-height);\n background-color: ${theme.base.palette['app-background']};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n getContrast,\n hideVisually,\n meetsContrastGuidelines,\n parseToHsl,\n readableColor,\n rgba,\n transparentize\n} from 'polished';\n\nimport {\n Button,\n calculateFontSize,\n CardContent,\n defaultThemeProp,\n StyledBreadcrumbs,\n StyledButtonLink,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledIcon,\n StyledLabel,\n StyledPopover,\n StyledText,\n StyledTooltip,\n tryCatch,\n FontSize,\n FieldValueList,\n StyledLink,\n readableHue,\n StyledCard,\n Text,\n useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';\n\nimport { StyledStage, StyledStages } from '../Stages/Stages.styles';\nimport { StyledAssignments } from '../Assignments/Assignments.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelChWidth = 16;\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const StyledCaseSummaryFields = styled.div``;\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{ wrapped?: boolean }>(\n ({ theme, wrapped }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n ${wrapped\n ? css`\n grid-template-columns: minmax(0, 1fr);\n `\n : css`\n grid-template-columns: ${labelChWidth}ch auto;\n `}\n\n ${StyledFieldValue} {\n font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n `;\n }\n);\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n return css`\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n const containerWidthCh = colCountChWidth[1].containerWidth;\n const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;\n\n return css`\n ${StyledSummarySecondaryList} {\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});\n }\n }\n `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n position: relative;\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n width: calc(4 * ${spacing});\n height: calc(4 * ${spacing});\n border-radius: calc(${borderRadius} / 2);\n margin-block-start: ${spacing};\n\n ${StyledIcon} {\n font-size: calc(2 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow.focus};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n padding-inline-start: calc(2 * ${theme.base.spacing});\n\n ${offsetEnd &&\n css`\n padding-inline-end: ${inlineEndButtonOffset};\n `};\n `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const idStyle = css`\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n `;\n\n return css`\n word-break: break-word;\n\n ${StyledSubheading} {\n ${idStyle}\n }\n\n ${StyledBreadcrumbs} {\n max-width: 100%;\n\n > a,\n > span,\n > button,\n > svg {\n ${idStyle}\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledLink} {\n color: ${color};\n }\n\n + ${StyledHeaderActions} {\n padding-inline-start: 0;\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = getContrast(primary, interactive) >= 4.5;\n const color = interactiveUsable ? interactive : readableColor(primary);\n let hoverBackground = rgba(color, 0.15);\n\n if (interactiveUsable) {\n hoverBackground = readableHue(hoverBackground, color);\n }\n\n return css`\n --button-background-color: ${primary};\n color: ${color};\n background-color: ${primary};\n border-color: ${color};\n\n @media (hover: hover) {\n &:hover {\n --button-background-color: ${hoverBackground};\n color: ${color};\n background-color: ${hoverBackground};\n border-color: ${color};\n }\n }\n `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n const {\n base: {\n spacing,\n palette: { 'brand-primary': primary }\n }\n } = theme;\n\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n return css`\n ${hasItems &&\n css`\n border-inline-start: 0.0625rem solid ${transparentColor};\n `}\n\n ${StyledStackedFieldValue}:first-child {\n margin-inline-start: calc(2 * ${spacing});\n }\n `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n const {\n base: {\n palette: { interactive, light, 'foreground-color': baseForeground }\n }\n } = theme;\n\n return css`\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${baseForeground};\n\n ${StyledButtonLink},\n ${StyledLink} {\n color: ${interactive};\n text-decoration: none;\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};\n }\n }\n }\n `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': primary, interactive }\n }\n } = theme;\n\n const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;\n const color = readableColor(primary);\n const transparentColor = tryCatch(() => transparentize(0.1, color));\n\n return css`\n max-width: 100%;\n min-width: 0;\n\n > ${StyledStackedFieldValue} {\n > ${StyledLabel} {\n color: ${transparentColor};\n white-space: nowrap;\n }\n\n > ${StyledFieldValue} {\n color: ${color};\n white-space: nowrap;\n }\n\n ${StyledButtonLink},\n ${StyledLink} {\n &:focus-visible {\n box-shadow: inset 0 0 0 0.0625rem ${color};\n }\n\n ${!interactiveUsable &&\n css`\n color: ${color};\n text-decoration: underline;\n `}\n }\n\n ${popoverColorReset(theme)}\n }\n `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)(\n ({ bold, truncate, theme }: { bold?: boolean; truncate?: boolean; theme: DefaultTheme }) => {\n const {\n base: {\n 'content-width': { xs }\n },\n components: {\n text: {\n h1: { 'font-weight': h1Weight }\n }\n }\n } = theme;\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n ${truncate &&\n css`\n max-width: ${xs};\n `}\n\n ${bold &&\n css`\n font-weight: ${h1Weight};\n `}\n\n /*\n * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n * factoring into scrollWidth of element when determining truncation.\n */\n > :not([hidden]) {\n display: inline;\n }\n `;\n }\n);\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n const { intelligentGuidance } = useCaseViewContext();\n\n return css`\n overflow: auto;\n flex: 1;\n ${intelligentGuidance &&\n css`\n /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n padding-block-end: 4rem;\n `}\n `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(() => {\n return css`\n border: none;\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {\n const { summaryExpanded } = useCaseViewContext();\n const { rtl } = useDirection();\n\n return css`\n --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n );\n --half-case-icon-compact-difference: calc(\n ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2\n );\n @media (pointer: coarse) {\n --half-btn-compact-difference: calc(\n (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n );\n }\n position: absolute;\n z-index: 1;\n box-shadow: ${theme.base.shadow.low};\n\n ${summaryExpanded\n ? css`\n inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n inset-inline-start: calc(100% - var(--half-compact-btn-height));\n `\n : css`\n inset-block-end: calc(var(--half-compact-btn-height) * -1);\n inset-inline-start: calc(\n 2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)\n );\n `}\n\n ${StyledIcon} {\n ${summaryExpanded\n ? css`\n transform: rotate(${rtl ? '180deg' : '0'});\n `\n : css`\n transform: rotate(-90deg);\n `}\n }\n `;\n});\n\nStyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(() => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n position: relative;\n height: 100%;\n ${aboveMD &&\n summaryExpanded &&\n css`\n width: 25rem;\n `}\n `;\n});\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD, intelligentGuidance, stages, tasks } = useCaseViewContext();\n let pbeRem = 0;\n\n if (intelligentGuidance) {\n pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n }\n\n return css`\n grid-area: work-area;\n padding: calc(2 * ${theme.base.spacing});\n\n ${aboveMD &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n\n /* This is required to make scrollStick work. */\n height: max-content;\n\n ${!summaryExpanded &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n `}\n\n /* Order of style here is necessary for overriding styles above. */\n ${pbeRem > 0 &&\n css`\n /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n padding-block-end: ${pbeRem}rem;\n `}\n\n ${stages &&\n tasks &&\n css`\n ${StyledStages} {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n\n &,\n > ${StyledStage}:first-child {\n border-end-start-radius: 0;\n }\n\n &,\n > ${StyledStage}:last-child {\n border-end-end-radius: 0;\n }\n }\n\n ${StyledCard}${StyledAssignments} {\n margin-block-start: calc(-2 * ${theme.base.spacing});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n `}\n `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeading = styled(Text)``;\n\nexport const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {\n const { utilitiesExpanded } = useCaseViewContext();\n const { rtl } = useDirection();\n\n return css`\n /* Centers button over the utilities summary */\n margin-inline-end: ${utilitiesExpanded && '0.625rem'};\n\n ${StyledIcon} {\n ${utilitiesExpanded !== rtl\n ? css`\n transform: rotate(180deg);\n `\n : css`\n transform: rotate(0);\n `}\n }\n `;\n});\n\nStyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n const { utilitiesExpanded, aboveLG, aboveMD } = useCaseViewContext();\n\n return css`\n height: max-content;\n margin-block: calc(2 * ${theme.base.spacing});\n\n /* If utilities are in an expanded drawer. */\n ${utilitiesExpanded &&\n aboveMD &&\n !aboveLG &&\n css`\n /* Maintains the column width to avoid page content shift. */\n visibility: hidden;\n `}\n\n ${aboveLG &&\n utilitiesExpanded &&\n css`\n width: 25rem;\n `}\n\n\n /* Selects the h2 in the utilities column, not the drawer. */\n ${StyledUtilitiesHeading} {\n /* Hide the utilities h2 under certain conditions.*/\n ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&\n hideVisually()}\n }\n `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n return css`\n top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${aboveMD &&\n summaryExpanded &&\n css`\n height: var(--case-view-height);\n `}\n\n ${aboveMD\n ? css`\n position: sticky;\n `\n : css`\n @media (min-height: ${theme.base.breakpoints.sm}) {\n position: sticky;\n }\n `}\n `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-height);\n top: var(--top-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n return css`\n min-width: ${theme.base['content-width'].sm};\n max-width: ${theme.base['content-width'].md};\n overflow: auto;\n position: sticky;\n z-index: 1;\n height: var(--case-view-height);\n top: var(--top-offset);\n padding-block: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n const { aboveMD } = useCaseViewContext();\n\n return css`\n --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n --case-view-height: calc(100vh - var(--top-offset));\n position: relative;\n min-height: var(--case-view-height);\n background-color: ${theme.base.palette['app-background']};\n\n ${aboveMD &&\n css`\n ${StyledUtilities}:last-child {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n `}\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n align-self: center;\n\n &:not(:focus) {\n ${hideVisually}\n }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const getCaseViewTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "heading", "subheading", "edit", "actions", "promoted-actions", "summary-fields", "banners", "stages", "tasks", "tabs", "tab-content", "utilities"]>;
2
+ //# sourceMappingURL=CaseView.test-ids.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CaseView.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,+PAcpB,CAAC"}
@@ -0,0 +1,17 @@
1
+ import { createTestIds } from '@pega/cosmos-react-core';
2
+ export const getCaseViewTestIds = createTestIds('case-view', [
3
+ 'header',
4
+ 'heading',
5
+ 'subheading',
6
+ 'edit',
7
+ 'actions',
8
+ 'promoted-actions',
9
+ 'summary-fields',
10
+ 'banners',
11
+ 'stages',
12
+ 'tasks',
13
+ 'tabs',
14
+ 'tab-content',
15
+ 'utilities'
16
+ ]);
17
+ //# sourceMappingURL=CaseView.test-ids.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CaseView.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE;IAC3D,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,MAAM;IACN,SAAS;IACT,kBAAkB;IAClB,gBAAgB;IAChB,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,aAAa;IACb,WAAW;CACH,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseViewTestIds = createTestIds('case-view', [\n 'header',\n 'heading',\n 'subheading',\n 'edit',\n 'actions',\n 'promoted-actions',\n 'summary-fields',\n 'banners',\n 'stages',\n 'tasks',\n 'tabs',\n 'tab-content',\n 'utilities'\n] as const);\n"]}