@pega/react-sdk-overrides 0.25.4 → 0.25.5

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -38,10 +38,13 @@ export default function Banner(props: BannerProps) {
         </div>
       </div>
       <Grid2 container size={12} className='banner-layout' spacing={1}>
-        <Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
         </Grid2>
-        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
         </Grid2>
       </Grid2>

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
 const useStyles = makeStyles(theme => ({
@@ -88,7 +87,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
         initialValue={defaultValue}
         disabled={disabled}
         init={{
-          skin: 'oxide-dark', // or 'oxide' for light theme
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
           // ...other TinyMCE config...
           content_style: `
             body {
@@ -110,6 +109,10 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
               font-size: 1em;
               font-family: inherit;
             }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
             /* Add more styles as needed */
           `,
           placeholder,

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,36 +1,29 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
 
-.quick-link-list {
-  background-color: var(--link-button-color);
-  color: var(--app-text-color);
-  border-radius: 8px;
-}
-
 .quick-link-button {
   text-transform: capitalize !important;
   font-size: 16px !important;
   color: var(--app-text-color) !important;
-  padding: calc(0.5rem * 2) !important;
-  height: 6rem;
+  height: 10rem;
   width: 100%;
-  justify-content: start !important;
 }
 
 .quick-link-icon {
-  width: 1em;
-  height: 1em;
   flex-shrink: 0;
-  filter: var(--svg-color);
+  object-fit: contain;
+  width: 3rem;
+  height: 3rem;
 }
 
 .quick-link-button-span {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.
@@ -9,8 +10,18 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
+  const classes = useStyles();
 
   return (
     <div>
@@ -21,7 +32,7 @@ export default function WssQuickCreate(props: WssQuickCreateProps) {
         {actions &&
           actions.map(element => {
             return (
-              <li className='quick-link-list' key={element.label}>
+              <li className={classes.quickLinkList} key={element.label}>
                 <Button className='quick-link-button' onClick={element.onClick}>
                   <span className='quick-link-button-span'>
                     {element.icon && <img className='quick-link-icon' src={element.icon} />}

package/lib/field/Group/Group.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useMemo } from 'react';
 import Grid2 from '@mui/material/Grid2';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
@@ -13,6 +13,8 @@ interface GroupProps extends PConnFieldProps {
 }
 
 export default function Group(props: GroupProps) {
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
   const isReadOnly = displayMode === 'DISPLAY_ONLY';

package/lib/field/Location/Location.css

@@ -0,0 +1,4 @@
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
+}

package/lib/field/Location/Location.tsx

@@ -8,6 +8,8 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
+import './Location.css';
+
 interface LocationProps extends PConnFieldProps {
   coordinates?: string;
   onlyCoordinates?: boolean;

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

package/lib/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

package/lib/field/RichText/RichText.tsx

@@ -4,6 +4,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import './RichText.css';
+
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
   additionalProps?: object;

package/lib/field/SelectableCard/SelectableCard.tsx

@@ -74,7 +74,7 @@ export default function SelectableCard(props) {
         }
 
         const component = (
-          <div style={{ paddingTop: '15px' }}>
+          <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
             <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
               <CardContent
                 style={{
@@ -93,7 +93,7 @@ export default function SelectableCard(props) {
                       alt={image.alt}
                       style={{
                         width: '100%',
-                        backgroundColor: 'rgb(233, 238, 243)',
+                        backgroundColor: 'transparent',
                         aspectRatio: '16 / 9',
                         maxHeight: '100%',
                         height: '100%',
@@ -152,7 +152,7 @@ export default function SelectableCard(props) {
                         margin: '5px'
                       }}
                     >
-                      <div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>
+                      {field.name && <div>{field.name}</div>}
                       <div>{field?.value?.props.value}</div>
                     </div>
                   ))}

package/lib/field/UserReference/UserReference.tsx

@@ -4,7 +4,6 @@ import { Typography } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -34,6 +33,7 @@ const UserReference = (props: UserReferenceProps) => {
   // Get emitted components from map (so we can get any override that may exist)
   const AutoComplete = getComponentFromMap('AutoComplete');
   const Dropdown = getComponentFromMap('Dropdown');
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     label = '',

package/lib/infra/Assignment/Assignment.tsx

@@ -97,37 +97,44 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+      const caseInfo = oData?.caseInfo;
+      if (!oWorkData?.caseInfo || oWorkData.caseInfo.assignments === null || !caseInfo) {
+        return;
+      }
 
-      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData?.caseInfo;
+      // Set action buttons
+      if (caseInfo.actionButtons) {
+        setActionButtons(caseInfo.actionButtons);
+      }
 
-        if (oCaseInfo && oCaseInfo.actionButtons) {
-          setActionButtons(oCaseInfo.actionButtons);
-        }
+      // Handle navigation setup
+      const navigation = caseInfo.navigation;
+      if (!navigation) {
+        setHasNavigation(false);
+        return;
+      }
 
-        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
-          setHasNavigation(true);
+      const isStandardTemplate = navigation.template?.toLowerCase() === 'standard';
+      const hasSingleStep = navigation.steps?.length === 1;
+      const shouldHideNavigation = isStandardTemplate || hasSingleStep;
 
-          if (
-            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
-            oCaseInfo?.navigation?.steps?.length === 1
-          ) {
-            setHasNavigation(false);
-          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
-            setIsVertical(true);
-          } else {
-            setIsVertical(false);
-          }
+      setHasNavigation(!shouldHideNavigation);
 
-          if (oCaseInfo?.navigation?.steps) {
-            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-            const formedSteps = getStepsInfo(steps);
-            setArNavigationSteps(formedSteps);
-          }
+      if (shouldHideNavigation) {
+        return;
+      }
 
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-        }
+      // set vertical navigation
+      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
+      setIsVertical(isVerticalTemplate);
+
+      if (navigation.steps) {
+        const steps = JSON.parse(JSON.stringify(navigation.steps));
+        const formedSteps = getStepsInfo(steps);
+        setArNavigationSteps(formedSteps);
       }
+
+      setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
     }
   }, [children]);
 

package/lib/infra/MultiStep/MultiStep.css

@@ -79,32 +79,33 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
-.psdk-vertical-step-icon-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
   color: var(--app-text-color);
 }
 
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
   background-color: var(--app-primary-color);
   color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
   flex-shrink: 0;
-  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .psdk-vertical-step-label {
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,7 +155,6 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
@@ -175,20 +167,29 @@ mat-horizontal-stepper {
   height: 72px;
   overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +200,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }

package/lib/infra/MultiStep/MultiStep.tsx

@@ -27,51 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
-
-    return 'psdk-horizontal-step-icon';
-  }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    return index < arNavigationSteps.length - 1;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -86,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -122,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -138,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}