Skip to content

Commit 2f70816

Browse files
tumms2021389tumms2021389
authored
Merge branch 'master' into bugfix/BUG-959036
2 parents be5e812 + c4d60d8 commit 2f70816

File tree

8 files changed

+109
-130
lines changed

8 files changed

+109
-130
lines changed

‎packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css‎

Lines changed: 42 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -79,32 +79,33 @@ mat-horizontal-stepper {
7979

8080
.psdk-vertical-step-icon {
8181
margin-right: 12px;
82-
background-color: var(--app-neutral-color);
83-
color: var(--app-text-color);
8482
border-radius: 50%;
8583
height: 24px;
8684
width: 24px;
87-
flex-shrink: 0;
8885
position: relative;
8986
}
9087

91-
.psdk-vertical-step-icon-content {
92-
position: absolute;
93-
top: 50%;
94-
left: 50%;
95-
transform: translate(-50%, -50%);
88+
.success .psdk-vertical-step-icon {
89+
background-color: var(--stepper-completed-bg-color);
9690
color: var(--app-text-color);
9791
}
9892

99-
.psdk-vertical-step-icon-selected {
100-
margin-right: 12px;
93+
.future .psdk-vertical-step-icon {
94+
color: var(--app-neutral-color);
95+
border: 1px solid var(--app-neutral-color);
96+
}
97+
98+
.current .psdk-vertical-step-icon {
10199
background-color: var(--app-primary-color);
102100
color: var(--app-text-color);
103-
border-radius: 50%;
104-
height: 24px;
105-
width: 24px;
106101
flex-shrink: 0;
107-
position: relative;
102+
}
103+
104+
.psdk-vertical-step-icon-content {
105+
position: absolute;
106+
top: 50%;
107+
left: 50%;
108+
transform: translate(-50%, -50%);
108109
}
109110

110111
.psdk-vertical-step-label {
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
119120
font-weight: 500;
120121
}
121122

122-
.psdk-vertical-step-label-selected {
123-
color: rgba(0, 0, 0, 0.87);
124-
display: inline-block;
125-
white-space: nowrap;
126-
overflow: hidden;
127-
text-overflow: ellipsis;
128-
min-width: 50px;
129-
vertical-align: middle;
130-
font-size: 14px;
131-
font-weight: 500;
123+
.current .psdk-vertical-step-label {
124+
color: var(--text-primary-color);
132125
}
133126

134127
.psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
150143
border-left-style: solid;
151144
top: -16px;
152145
bottom: -16px;
153-
border-left-color: rgba(0, 0, 0, 0.12);
146+
border-left-color: var(--app-neutral-color);
154147
}
155148

156149
.psdk-horizontal-stepper {
@@ -162,7 +155,6 @@ mat-horizontal-stepper {
162155
white-space: nowrap;
163156
display: flex;
164157
align-items: center;
165-
text-align: left;
166158
}
167159

168160
.psdk-horizontal-step-header {
@@ -175,20 +167,29 @@ mat-horizontal-stepper {
175167
height: 72px;
176168
overflow: hidden;
177169
align-items: center;
178-
padding: 0 24px;
179170
}
180171

181172
.psdk-horizontal-step-icon {
182-
background-color: var(--app-neutral-color);
183-
color: var(--app-text-color);
173+
color: white;
184174
border-radius: 50%;
185175
height: 24px;
186176
width: 24px;
187-
flex-shrink: 0;
188177
position: relative;
189-
display: block;
190-
margin-right: 8px;
191-
flex: none;
178+
}
179+
180+
.future .psdk-horizontal-step-icon {
181+
color: var(--app-neutral-color);
182+
border: 1px solid var(--app-neutral-color);
183+
}
184+
185+
.current .psdk-horizontal-step-icon {
186+
color: var(--app-text-color);
187+
background-color: var(--app-primary-color);
188+
}
189+
190+
.success .psdk-horizontal-step-icon {
191+
color: var(--app-text-color);
192+
background-color: var(--stepper-completed-bg-color);
192193
}
193194

194195
.psdk-horizontal-step-icon-content {
@@ -199,45 +200,24 @@ mat-horizontal-stepper {
199200
transform: translate(-50%, -50%);
200201
}
201202

202-
.psdk-horizontal-step-icon-selected {
203-
background-color: var(--app-primary-color);
204-
color: var(--app-text-color);
205-
border-radius: 50%;
206-
height: 24px;
207-
width: 24px;
208-
flex-shrink: 0;
209-
position: relative;
210-
display: block;
211-
margin-right: 8px;
212-
flex: none;
213-
}
214-
215203
.psdk-horizontal-step-label {
216204
color: var(--text-secondary-color);
217-
display: inline-block;
218-
min-width: 50px;
219-
vertical-align: middle;
220205
font-size: 14px;
221206
font-weight: 500;
222207
white-space: initial;
223208
}
224209

225-
.psdk-horizontal-step-label-selected {
210+
.current .psdk-horizontal-step-label {
226211
color: var(--text-primary-color);
227-
display: inline-block;
228-
min-width: 50px;
229-
vertical-align: middle;
230-
font-size: 14px;
231-
font-weight: 500;
232-
white-space: initial;
212+
margin-left: 8px;
233213
}
234214

235-
.psdk-horizontal-step-line {
236-
border-top-color: rgba(0, 0, 0, 0.12);
237-
border-top-width: 1px;
238-
border-top-style: solid;
215+
.flex-auto {
239216
flex: auto;
240-
height: 0;
241-
margin: 0 -16px;
217+
}
218+
219+
.psdk-horizontal-step-line {
220+
border-top: 1px solid var(--app-neutral-color);
242221
min-width: 32px;
222+
margin: 0px 8px;
243223
}

‎packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx‎

Lines changed: 25 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -27,51 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
2727
currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
2828
}
2929

30-
// const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
31-
// const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
32-
33-
function _getVIconClass(status): string {
34-
if (status === 'current') {
35-
return 'psdk-vertical-step-icon-selected';
36-
}
37-
38-
return 'psdk-vertical-step-icon';
39-
}
40-
41-
function _getVLabelClass(status): string {
42-
if (status === 'current') {
43-
return 'psdk-vertical-step-label-selected';
44-
}
45-
46-
return 'psdk-vertical-step-label';
47-
}
48-
4930
function _getVBodyClass(index: number): string {
50-
if (index < arNavigationSteps.length - 1) {
51-
return 'psdk-vertical-step-body psdk-vertical-step-line';
52-
}
31+
const baseClass = 'psdk-vertical-step-body';
32+
const isNotLastStep = index < arNavigationSteps.length - 1;
5333

54-
return 'psdk-vertical-step-body';
34+
return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
5535
}
5636

57-
function _getHIconClass(step): string {
58-
if (step.ID === currentStep?.ID) {
59-
return 'psdk-horizontal-step-icon-selected';
60-
}
61-
62-
return 'psdk-horizontal-step-icon';
63-
}
37+
function _getAutoFlexClass(currentStep): string {
38+
const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
39+
const totalSteps = arNavigationSteps.length;
40+
const lastStep = arNavigationSteps[totalSteps - 1];
6441

65-
function _getHLabelClass(step): string {
66-
if (step.ID === currentStep?.ID) {
67-
return 'psdk-horizontal-step-label-selected';
68-
}
42+
// Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
43+
const isCurrentStepActive = currentStep.visited_status === 'current';
44+
const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
6945

70-
return 'psdk-horizontal-step-label';
46+
return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
7147
}
7248

73-
function _showHLine(index: number): boolean {
74-
return index < arNavigationSteps.length - 1;
49+
function isLastStep(index: number): boolean {
50+
return index === arNavigationSteps.length - 1;
7551
}
7652

7753
function buttonPress(sAction: string, sButtonType: string) {
@@ -86,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
8662
return (
8763
<React.Fragment key={mainStep.actionID}>
8864
<div className='psdk-vertical-step'>
89-
<div className='psdk-vertical-step-header'>
90-
<div className={_getVIconClass(mainStep.visited_status)}>
65+
<div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
66+
<div className={`psdk-vertical-step-icon`}>
9167
<div className='psdk-vertical-step-icon-content'>
9268
<span>{index + 1}</span>
9369
</div>
9470
</div>
95-
<div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
71+
<div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
9672
</div>
9773
<div className={_getVBodyClass(index)}>
9874
{mainStep?.steps && (
@@ -122,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
12298
</ul>
12399
)}
124100
{!mainStep?.steps && mainStep.visited_status === 'current' && (
125-
<AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
126-
{children}
127-
</AssignmentCard>
101+
<div style={{ paddingLeft: 20 }}>
102+
<AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
103+
{children}
104+
</AssignmentCard>
105+
</div>
128106
)}
129107
</div>
130108
</div>
@@ -138,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
138116
{arNavigationSteps.map((mainStep, index) => {
139117
return (
140118
<React.Fragment key={mainStep.actionID}>
141-
<div className='psdk-horizontal-step-header'>
142-
<div className={_getHIconClass(mainStep)}>
119+
<div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
120+
<div className='psdk-horizontal-step-icon'>
143121
<div className='psdk-horizontal-step-icon-content'>
144122
<span>{index + 1}</span>
145123
</div>
146124
</div>
147-
<div className={_getHLabelClass(mainStep)}>
148-
<div className='psdk-horizontal-step-text-label' id='selected-label'>
149-
{mainStep.name}
150-
</div>
151-
</div>
125+
<div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
152126
</div>
153-
{_showHLine(index) && <div className='psdk-horizontal-step-line' />}
127+
{!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
154128
</React.Fragment>
155129
);
156130
})}

‎packages/react-sdk-components/src/components/template/CaseView/CaseView.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,6 @@ const useStyles = makeStyles(theme => ({
4242
width: theme.spacing(8),
4343
height: theme.spacing(8),
4444
padding: theme.spacing(1)
45-
},
46-
caseViewIconImage: {
47-
filter: 'var(--svg-color)'
4845
}
4946
}));
5047

@@ -61,7 +58,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
6158
header,
6259
subheader,
6360
children = [],
64-
caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
61+
caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '', caseTypeIcon }
6562
} = props;
6663
const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
6764
const currentCaseID = props.caseInfo.ID;
@@ -104,7 +101,12 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
104101
const theUtilitiesRegion = getChildRegionByName('utilities');
105102
const theTabsRegion = getChildRegionByName('tabs');
106103

107-
const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
104+
let iconForCaseType = caseTypeIcon ? caseTypeIcon.replace('pi pi-', '') : icon;
105+
106+
if (!iconForCaseType || iconForCaseType.includes('.')) {
107+
iconForCaseType = 'polaris-solid';
108+
}
109+
const caseSvgIconUrl = Utils.getImageSrc(iconForCaseType, Utils.getSDKStaticConentUrl());
108110

109111
const [activeVertTab, setActiveVertTab] = useState(0);
110112

@@ -229,7 +231,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
229231
}
230232
avatar={
231233
<Avatar className={classes.caseViewIconBox} variant='square'>
232-
<img src={svgCase} className={classes.caseViewIconImage} />
234+
<img src={caseSvgIconUrl} />
233235
</Avatar>
234236
}
235237
/>

‎packages/react-sdk-components/src/samples/Embedded/Header/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { makeStyles } from '@mui/styles';
33

44
const useStyles = makeStyles(theme => ({
55
header: {
6-
backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-nav-bg)' : theme.palette.background.paper,
6+
backgroundColor: theme.headerNav.backgroundColor,
77
borderBottom: `1px solid ${theme.palette.divider}`,
88
padding: '1rem 0'
99
},
@@ -64,10 +64,10 @@ const useStyles = makeStyles(theme => ({
6464
margin: 0,
6565
'& a': {
6666
textDecoration: 'none',
67-
color: theme.palette.mode === 'dark' ? 'var(--app-nav-color)' : theme.palette.text.primary,
67+
color: theme.headerNav.navLinkColor,
6868
transition: 'color 0.3s ease',
6969
'&:hover': {
70-
color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.primary.main
70+
color: theme.headerNav.navLinkHoverColor
7171
}
7272
},
7373
'@media (max-width: 768px)': {
@@ -103,7 +103,7 @@ const useStyles = makeStyles(theme => ({
103103
cursor: 'pointer',
104104
zIndex: 1001,
105105
padding: 0,
106-
color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
106+
color: theme.headerNav.menuToggleColor,
107107
'@media (max-width: 768px)': {
108108
display: 'block'
109109
}

‎packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,7 @@ export default function MainScreen(props) {
164164
if (!mashupCaseType) {
165165
const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList;
166166
if (caseTypes && caseTypes.length > 0) {
167-
//mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
168-
mashupCaseType = 'DIXL-MediaCo-Work-PurchasePhone';
167+
mashupCaseType = mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
169168
}
170169
}
171170
let selectedPhoneGUID = '';

‎packages/react-sdk-components/src/samples/FullPortal/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,14 +152,18 @@ export default function FullPortal() {
152152
startPortal();
153153
};
154154

155-
return portalSelectionScreen ? (
155+
const content = portalSelectionScreen ? (
156156
<InvalidPortal defaultPortal={defaultPortalName} portals={availablePortals} onSelect={loadSelectedPortal} />
157157
) : (
158+
rootComponentProps && <RootComponent {...rootComponentProps} />
159+
);
160+
161+
return (
158162
<div id='pega-root'>
159163
<StyledEngineProvider injectFirst>
160164
<ThemeProvider theme={theme}>
161165
<CssBaseline />
162-
{rootComponentProps && <RootComponent {...rootComponentProps} />}
166+
{content}
163167
</ThemeProvider>
164168
</StyledEngineProvider>
165169
</div>

0 commit comments

Comments
 (0)