@pega/react-sdk-overrides 0.23.6

package/lib/infra/MultiStep/MultiStep.css

@@ -0,0 +1,261 @@
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-icon-current {
+  color: var(--app-primary-color);
+}
+
+.psdk-icon-not-current {
+  color: var(--app-neutral-color);
+}
+
+.psdk-current-svg-icon {
+  width: 1.0rem;
+  filter: var(--app-primary-color-filter);
+}
+
+.psdk-not-current-svg-icon {
+  width: 1.0rem;
+  filter: var(--app-neutral-color-filter);
+}
+
+
+mat-vertical-stepper {
+  background-color: transparent;
+}
+mat-horizontal-stepper {
+  background-color: transparent;
+}
+
+.psdk-sub-step-current {
+  padding-left: 0.625rem; 
+  font-weight: bold;
+  color: rgba(0,0,0,.87);
+}
+
+.psdk-sub-step-not-current {
+  padding-left: 0.625rem;
+  color: rgba(0,0,0,.54);
+}
+
+.psdk-flow-container-top {
+  border-radius: 0.3125rem;
+
+}
+.psdk-flow-container {
+  padding-left: 2.1875rem;
+}
+
+.psdk-sub-step-list {
+  list-style: none; 
+  padding-bottom: 0.625rem;
+}
+
+
+
+.psdk-vertical-stepper {
+  background-color: transparent;
+  display: block;
+  text-align: left;
+}
+
+.psdk-vertical-step {
+  display: block;
+}
+
+.psdk-vertical-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 24px 24px;
+}
+
+.psdk-vertical-step-icon {
+  margin-right: 12px;
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  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%);
+  color: #fff;
+}
+
+.psdk-vertical-step-icon-selected {
+  margin-right: 12px;
+  background-color: var(--app-primary-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-label {
+  color: rgba(0,0,0,.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-label-selected {
+  color: rgba(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;
+}
+
+.psdk-vertical-step-body {
+  margin-left: 36px;
+  border: 0;
+  position: relative;
+  display: block;
+  text-align: left;
+}
+.psdk-vertical-step-line {
+  display: block;
+}
+
+.psdk-vertical-step-line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+  top: -16px;
+  bottom: -16px;
+  border-left-color: rgba(0,0,0,.12);
+}
+
+.psdk-horizontal-stepper {
+  background-color: transparent;
+  display: block;
+}
+
+.psdk-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.psdk-horizontal-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  height: 72px;
+  overflow: hidden;
+  align-items: center;
+  padding: 0 24px;
+}
+
+.psdk-horizontal-step-icon {
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-icon-content {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.psdk-horizontal-step-icon-selected {
+  background-color: var(--app-primary-color);
+  color: #fff;
+  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,.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.psdk-horizontal-step-label-selected {
+  color: rgba(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;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.psdk-horizontal-step-text-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.psdk-horizontal-step-line {
+  border-top-color: rgba(0,0,0,.12);
+  border-top-width: 1px;
+  border-top-style: solid;
+  flex: auto;
+  height: 0;
+  margin: 0 -16px;
+  min-width: 32px;
+}

package/lib/infra/MultiStep/MultiStep.tsx

@@ -0,0 +1,225 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import './MultiStep.css';
+
+import AssignmentCard from '@pega/react-sdk-components/lib/components/infra/AssignmentCard';
+
+// import { useConstellationContext } from "../../bridge/Context/StoreContext";
+
+export default function MultiStep(props) {
+    const { getPConnect, children, itemKey, actionButtons, onButtonPress} = props;
+    const { bIsVertical, arNavigationSteps } = props;
+
+    // const svgCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
+    // const svgNotCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
+
+    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";
+        }
+
+        return "psdk-vertical-step-body";
+      }
+
+      function _getHIconClass(status): string {
+        if (status === "current") {
+          return "psdk-horizontal-step-icon-selected";
+        }
+
+        return "psdk-horizontal-step-icon";
+      }
+
+      function _getHLabelClass(status): string {
+        if (status === "current") {
+          return "psdk-horizontal-step-label-selected";
+        }
+
+        return "psdk-horizontal-step-label";
+      }
+
+      function _showHLine(index: number): boolean {
+        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
+        if (index < arNavigationSteps.length - 1) {
+          return true;
+        }
+
+        return false;
+      }
+
+      function buttonPress(sAction: string, sButtonType: string) {
+        onButtonPress(sAction, sButtonType);
+      }
+
+    return (
+      <React.Fragment>
+          <div>
+              {bIsVertical ?
+                <div className="psdk-vertical-stepper">
+                    {arNavigationSteps.map((mainStep, index) =>   {
+                      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-icon-content">
+                                        <span>{index + 1}</span>
+                                    </div>
+                                </div>
+                                <div className={ _getVLabelClass(mainStep.visited_status)}>
+                                    {mainStep.name}
+                                </div>
+                            </div>
+                            <div className={ _getVBodyClass(index)}>
+                                {mainStep?.steps &&
+                                <React.Fragment>
+                                <ul style={{paddingInlineStart: "0rem", marginLeft: "-7px"}}>
+                                    {mainStep.steps.forEach((subStep) => {
+                                        <li className="psdk-sub-step-list">
+                                        <div style={{display: "inline-flex"}}>
+                                            {subStep.visited_status === 'current' &&
+                                            <img className="psdk-current-svg-icon" src="{svgCurrent}" />
+                                            }
+                                            {subStep.visited_status !== 'current' &&
+                                            <img className="psdk-not-current-svg-icon" src="{svgNotCurrent}" />
+                                            }
+                                            {subStep.visited_status === 'current' &&
+                                            <label className="psdk-sub-step-current">{subStep.name}</label>
+                                            }
+                                            {subStep.visited_status !== 'current' &&
+                                            <label className="psdk-sub-step-not-current">{subStep.name}</label>
+                                            }
+                                        </div>
+                                        {subStep.visited_status === 'current' &&
+                                            <div>
+                                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >
+                                                    {children}
+                                                </AssignmentCard>
+                                            </div>
+                                        }
+
+
+                                        </li>
+                                    })}
+
+                                </ul>
+                                </React.Fragment>
+                                }
+                                {!mainStep?.steps && mainStep.visited_status === 'current' &&
+                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >
+                                        {children}
+                                 </AssignmentCard>
+                                }
+                            </div>
+                        </div>
+                        </React.Fragment>
+                    )})}
+                </div>
+
+              :
+                <div className="psdk-horizontal-stepper">
+                     <div className="psdk-horizontal-stepper-header-container">
+                     {arNavigationSteps.map((mainStep, index) => {
+                        return (
+                        <React.Fragment key={mainStep.actionID}>
+                        <div className="psdk-horizontal-step-header">
+                            <div className={ _getHIconClass(mainStep.visited_status)}>
+                                <div className="psdk-horizontal-step-icon-content">
+                                <span>{index + 1}</span>
+                                </div>
+                            </div>
+                            <div className={ _getHLabelClass(mainStep.visited_status)}>
+                                <div className="psdk-horizontal-step-text-label">
+                                {mainStep.name}
+                                </div>
+                            </div>
+                        </div>
+                        { _showHLine(index) &&
+                            <div className="psdk-horizontal-step-line"></div>
+                        }
+                        </React.Fragment>
+                     )})}
+                     </div>
+                     {arNavigationSteps.map((mainStep) => {
+                        return (
+                         <React.Fragment key={mainStep.actionID}>
+                         {mainStep.steps &&
+                            <React.Fragment>
+                            <ul style={{paddingInlineStart: "0rem", marginLeft: "35px"}}>
+                            {mainStep.steps.map((subStep) => (
+                                <React.Fragment>
+                                <li className="psdk-sub-step-list">
+                                <div style={{display: "inline-flex"}}>
+                                    {subStep.visited_status === 'current' &&
+                                    <img className="psdk-current-svg-icon" src="{svgCurrent}" />
+                                    }
+                                    {subStep.visited_status !== 'current' &&
+                                    <img className="psdk-not-current-svg-icon" src="{svgNotCurrent}" />
+                                    }
+                                    {subStep.visited_status === 'current' &&
+                                    <label className="psdk-sub-step-current">{subStep.name}</label>
+                                    }
+                                    {subStep.visited_status !== 'current' &&
+                                    <label className="psdk-sub-step-not-current">{subStep.name}</label>
+                                    }
+                                </div>
+                                {subStep.visited_status === 'current' &&
+                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >
+                                        {children}
+                                 </AssignmentCard>
+                                }
+                              </li>
+                              </React.Fragment>
+                            ))}
+
+                          </ul>
+                          </React.Fragment>
+                        }
+                        { !mainStep?.steps && mainStep.visited_status === 'current' &&
+                            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >
+                                {children}
+                            </AssignmentCard>
+                        }
+                        </React.Fragment>
+                     )})}
+                </div>
+              }
+
+          </div>
+
+      </React.Fragment>
+
+    )
+  }
+
+  MultiStep.propTypes = {
+    children: PropTypes.node.isRequired,
+    getPConnect: PropTypes.func.isRequired,
+    itemKey: PropTypes.string,
+    actionButtons: PropTypes.object,
+    onButtonPress: PropTypes.func,
+    bIsVertical: PropTypes.bool,
+    // eslint-disable-next-line react/no-unused-prop-types
+    arCurrentStepIndicies: PropTypes.array,
+    arNavigationSteps: PropTypes.array
+  };
+
+  MultiStep.defaultProps = {
+    itemKey: null
+  };

package/lib/infra/MultiStep/index.tsx

@@ -0,0 +1 @@
+export { default } from './MultiStep';

package/lib/infra/NavBar/NavBar.css

@@ -0,0 +1,170 @@
+.psdk-nav-divider {
+    border-bottom: 0.0625rem solid var(--app-nav-color);
+    width: 100%;
+}
+
+.psdk-nav-header {
+    display: flex;
+    padding-top: 0.625rem;
+}
+
+.psdk-nav-logo {
+    /* override vertical-align coming in from Bootstrap "reboot" */
+    vertical-align: baseline;
+
+    width: 3.5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+/* background color white */
+/* filter: var(--app-white-color-filter); */
+.psdk-nav-svg-icon {
+    width: 2.6rem;
+    /* padding-right: 0.625rem; */
+    -webkit-filter: invert(.75); /* safari 6.0 - 9.0 */
+    filter: invert(.75);
+}
+
+.psdk-nav-portal-info {
+    margin-top: 0.15rem;
+    margin-bottom: 0.25rem;
+    padding-left: 0.15rem;
+    padding-right: 0.5rem;
+
+}
+
+.psdk-nav-portal-name {
+    font-size: 1rem;
+}
+
+.psdk-nav-portal-app {
+    font-size: 1.0rem;
+}
+
+.psdk-appshell-nav {
+    top: 0px;   /* JEA */
+    position: relative;    /* JEA was fixed */
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: var(--app-nav-bg);
+    width: var(--app-nav-width);
+    height: 100%;
+    color: var(--app-nav-color);
+    /* overflow: hidden; */
+    white-space: nowrap;
+    transition: width var(--transition-medium) var(--natural-ease);
+    will-change: width;
+
+}
+
+.psdk-appshell-nav:hover {
+    width: var(--app-nav-width-expanded);
+}
+
+.psdk-appshell-topnav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: var(--app-nav-bg);
+    width: var(--app-nav-width);
+    height: 15%;
+    color: var(--app-nav-color);
+    /* overflow: hidden; */
+    white-space: nowrap;
+    transition: width var(--transition-medium) var(--natural-ease);
+    will-change: width;
+}
+
+.psdk-appshell-middlenav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: var(--app-nav-bg);
+    width: var(--app-nav-width);
+    height: 50%;
+    color: var(--app-nav-color);
+    /* overflow: hidden; */
+    white-space: nowrap;
+    transition: width var(--transition-medium) var(--natural-ease);
+    will-change: width;
+}
+
+.psdk-appshell-bottom {
+    /* to make NavBar logout button stay fixed to bottom of window */
+    /* position: fixed; */
+    bottom: 0px;
+    background: var(--app-nav-bg);
+    width: var(--app-nav-width);    /* inherit; */
+    border-top: 0.0625rem solid var(--app-nav-color);
+}
+
+/* Added for nav bar buttons to be like middlenav but with no additional flex direction and left justify */
+.psdk-appshell-buttonnav {
+    /* display: flex;
+    flex-direction: row; */
+    border: none;
+    justify-content: left;
+    background: var(--app-nav-bg);
+    width: var(--app-nav-width);
+    height: 50%;
+    color: var(--app-nav-color);
+    /* overflow: hidden; */
+    white-space: nowrap;
+    transition: width var(--transition-medium) var(--natural-ease);
+    will-change: width;
+}
+
+.psdk-nav-ul-middle {
+    display: block;
+    list-style-type: none;
+    margin: 0rem;
+    padding-inline-start: 30px;
+}
+
+.psdk-nav-li-middle {
+    box-sizing: border-box;
+    text-align: left;
+}
+
+.psdk-icon {
+    padding: 0rem 0.125rem;
+    min-width: unset;
+}
+
+.psdk-nav-button-span {
+    padding: 1rem;
+}
+
+.psdk-nav-oper-avatar {
+    margin: 0rem;
+    padding: 0rem;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    max-width: 2.5rem;
+    max-height: 2.5rem;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    display: inline-flex;
+    background: var(--app-neutral-color);
+    color: white;
+    font-weight: normal;
+    font-size: 1rem;
+}
+
+.marginTopAuto {
+    margin-top: auto !important;
+}
+
+.scrollable {
+    overflow-y: scroll !important;
+}