@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/infra/MultiStep/MultiStep.css

@@ -16,16 +16,15 @@
 }
 
 .psdk-current-svg-icon {
-  width: 1.0rem;
+  width: 1rem;
   filter: var(--app-primary-color-filter);
 }
 
 .psdk-not-current-svg-icon {
-  width: 1.0rem;
+  width: 1rem;
   filter: var(--app-neutral-color-filter);
 }
 
-
 mat-vertical-stepper {
   background-color: transparent;
 }
@@ -36,17 +35,16 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: rgba(0,0,0,.87);
+  color: rgba(0, 0, 0, 0.87);
 }
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0,0,0,.54);
+  color: rgba(0, 0, 0, 0.54);
 }
 
 .psdk-flow-container-top {
   border-radius: 0.3125rem;
-
 }
 .psdk-flow-container {
   padding-left: 2.1875rem;
@@ -57,8 +55,6 @@ mat-horizontal-stepper {
   padding-bottom: 0.625rem;
 }
 
-
-
 .psdk-vertical-stepper {
   background-color: transparent;
   display: block;
@@ -112,7 +108,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0,0,0,.54);
+  color: rgba(0, 0, 0, 0.54);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -124,7 +120,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: rgba(0,0,0,.87);
+  color: rgba(0, 0, 0, 0.87);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -147,14 +143,14 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-line::before {
-  content: "";
+  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);
+  border-left-color: rgba(0, 0, 0, 0.12);
 }
 
 .psdk-horizontal-stepper {
@@ -217,7 +213,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: rgba(0,0,0,.54);
+  color: rgba(0, 0, 0, 0.54);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -227,7 +223,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: rgba(0,0,0,.87);
+  color: rgba(0, 0, 0, 0.87);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -237,7 +233,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: rgba(0,0,0,.12);
+  border-top-color: rgba(0, 0, 0, 0.12);
   border-top-width: 1px;
   border-top-style: solid;
   flex: auto;

package/lib/infra/MultiStep/MultiStep.tsx

@@ -1,225 +1,189 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { PropsWithChildren } from 'react';
+
+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';
 
-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>
+interface MultiStepProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  itemKey: string;
+  actionButtons: any[];
+  onButtonPress: any;
+  bIsVertical: boolean;
+  arNavigationSteps: any[];
+}
 
-              :
-                <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>
-              }
+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');
 
-          </div>
+  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';
+    }
 
-      </React.Fragment>
+    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);
   }
 
-  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
-  };
+  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';