@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/infra/MultiStep/MultiStep.tsx

@@ -1,225 +1,189 @@
-import React from "react";
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import './MultiStep.css';
-
-// import { useConstellationContext } from "../../bridge/Context/StoreContext";
+import React, { PropsWithChildren } from 'react';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import './MultiStep.css';
 
 interface MultiStepProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  itemKey: string,
-  actionButtons: Array<any>,
-  onButtonPress: any,
-  bIsVertical: boolean,
-  arNavigationSteps: Array<any>,
-  // eslint-disable-next-line react/no-unused-prop-types
-  arCurrentStepIndicies?: Array<any>
+  itemKey: string;
+  actionButtons: any[];
+  onButtonPress: any;
+  bIsVertical: boolean;
+  arNavigationSteps: any[];
 }
 
+export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
 
-export default function MultiStep(props: MultiStepProps) {
-    // Get emitted components from map (so we can get any override that may exist)
-    const AssignmentCard = getComponentFromMap("AssignmentCard");
-
-    const { getPConnect, children, itemKey = '', actionButtons, onButtonPress} = props;
-    const { bIsVertical, arNavigationSteps } = props;
-
-    // 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";
-        }
-
-        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>
+  const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
+  const { bIsVertical, arNavigationSteps } = props;
 
-              :
-                <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>
-              }
+  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
+  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
 
-          </div>
+  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;
+    }
 
-      </React.Fragment>
+    return false;
+  }
 
-    )
+  function buttonPress(sAction: string, sButtonType: string) {
+    onButtonPress(sAction, sButtonType);
   }
+
+  return (
+    <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 && (
+                      <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>
+                    )}
+                    {!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' />}
+                </React.Fragment>
+              );
+            })}
+          </div>
+          {arNavigationSteps.map(mainStep => {
+            return (
+              <React.Fragment key={mainStep.actionID}>
+                {mainStep.steps && (
+                  <ul style={{ paddingInlineStart: '0rem', marginLeft: '35px' }}>
+                    {mainStep.steps.map(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' && (
+                          <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                            {children}
+                          </AssignmentCard>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                  <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                    {children}
+                  </AssignmentCard>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/infra/MultiStep/index.tsx

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

package/lib/infra/NavBar/NavBar.css

@@ -1,170 +1,168 @@
 .psdk-nav-divider {
-    border-bottom: 0.0625rem solid var(--app-nav-color);
-    width: 100%;
+  border-bottom: 0.0625rem solid var(--app-nav-color);
+  width: 100%;
 }
 
 .psdk-nav-header {
-    display: flex;
-    padding-top: 0.625rem;
+  display: flex;
+  padding-top: 0.625rem;
 }
 
 .psdk-nav-logo {
-    /* override vertical-align coming in from Bootstrap "reboot" */
-    vertical-align: baseline;
+  /* 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;
+  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;
+  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);
+  width: 2.6rem;
+  /* padding-right: 0.625rem; */
+  -webkit-filter: invert(0.75); /* safari 6.0 - 9.0 */
+  filter: invert(0.75);
 }
 
 .psdk-nav-portal-info {
-    margin-top: 0.15rem;
-    margin-bottom: 0.25rem;
-    padding-left: 0.15rem;
-    padding-right: 0.5rem;
-
+  margin-top: 0.15rem;
+  margin-bottom: 0.25rem;
+  padding-left: 0.15rem;
+  padding-right: 0.5rem;
 }
 
 .psdk-nav-portal-name {
-    font-size: 1rem;
+  font-size: 1rem;
 }
 
 .psdk-nav-portal-app {
-    font-size: 1.0rem;
+  font-size: 1rem;
 }
 
 .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;
-
+  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);
+  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;
+  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;
+  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);
+  /* 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;
+  /* 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;
+  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;
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
 }
 
 .psdk-nav-li-middle {
-    box-sizing: border-box;
-    text-align: left;
+  box-sizing: border-box;
+  text-align: left;
 }
 
 .psdk-icon {
-    padding: 0rem 0.125rem;
-    min-width: unset;
+  padding: 0rem 0.125rem;
+  min-width: unset;
 }
 
 .psdk-nav-button-span {
-    padding: 1rem;
+  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;
+  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;
+  margin-top: auto !important;
 }
 
 .scrollable {
-    overflow-y: scroll !important;
+  overflow-y: scroll !important;
 }