Fixed the issues identified during adoption testing (#209)

* Fixed the issues identified during adoption testing * updated * updated --------- Co-authored-by: mashm <manasa.mashetty@in.pega.com>
pegasystems · Oct 3, 2024 · 8787595 · 8787595
1 parent 600e8d4
commit 8787595
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 77 deletions.
diff --git a/src/components/MultiStep/index.ts b/src/components/MultiStep/index.ts
@@ -147,37 +147,33 @@ class MultiStep extends BridgeBase {
     return sStyle;
   }
 
-  getStepHorizontallMarkerStyle(step: any, bSubStep: boolean = false): string {
+  getStepHorizontallMarkerStyle(step: any, type): string {
     let sStyle = '';
-    switch (step.visited_status) {
-      case 'success':
-        if (bSubStep) {
-          sStyle = 'psdk-horizontal-marker h-success h-sub';
-        } else {
-          sStyle = 'psdk-horizontal-marker h-success';
-        }
-        break;
-      case 'current':
-        if (bSubStep) {
-          sStyle = 'psdk-horizontal-marker h-current h-sub';
+    switch (type) {
+      case 'label':
+        if (step.visited_status === 'current') {
+          sStyle = 'psdk-horizontal-step-label-selected';
         } else {
-          sStyle = 'psdk-horizontal-marker h-current';
+          sStyle = 'psdk-horizontal-step-label';
         }
         break;
-      case 'future':
-        if (bSubStep) {
-          sStyle = 'psdk-horizontal-marker h-future h-sub';
+      case 'icon':
+        if (step.visited_status === 'current') {
+          sStyle = 'psdk-horizontal-step-icon-selected';
         } else {
-          sStyle = 'psdk-horizontal-marker h-future';
+          sStyle = 'psdk-horizontal-step-icon';
         }
         break;
       default:
         break;
     }
-
     return sStyle;
   }
 
+  _showHLine(index: number): boolean {
+    return index < this.arNavigationSteps.length - 1;
+  }
+
   getStepMarkerStyle(step: any, bSubStep: boolean = false): string {
     if (this.bIsVertical) {
       return this.getStepVerticalMarkerStyle(step, bSubStep);
@@ -228,29 +224,35 @@ class MultiStep extends BridgeBase {
 
     let count = 0;
     for (const step of this.arNavigationSteps) {
-      let stepStyle = 'psdk-horizontal-header-step';
-      if (count == 0) {
-        stepStyle = 'psdk-horizontal-header-step-first';
-      } else if (count + 1 == this.arNavigationSteps.length) {
-        stepStyle = 'psdk-horizontal-header-step-last';
-      }
       if (step.steps) {
         for (const sStep of step.steps) {
-          const stepMarkerStyle = this.getStepMarkerStyle(sStep, true);
           arHorizontalSteps.push(html`
-            <div class="psdk-horizontal-header-step">
-              <div class="psdk-horizontal-step-name">${sStep.name}</div>
-              <div class="${stepMarkerStyle}"></div>
+            <div class="psdk-horizontal-step-header">
+              <div class="${this.getStepHorizontallMarkerStyle(sStep, 'icon')}">
+                <div class="psdk-horizontal-step-icon-content">
+                  <span>${count + 1}</span>
+                </div>
+              </div>
+              <div class="${this.getStepHorizontallMarkerStyle(sStep, 'label')}">
+                <div class="psdk-horizontal-step-text-label" id="selected-label">${sStep.name}</div>
+              </div>
             </div>
+            ${this._showHLine(count) ? html`<div class="psdk-horizontal-step-line" /> ` : html``}
           `);
         }
       } else {
-        const stepMarkerStyle = this.getStepMarkerStyle(step, false);
         arHorizontalSteps.push(html`
-          <div class="${stepStyle}">
-            <div class="psdk-horizontal-step-name">${step.name}</div>
-            <div class="${stepMarkerStyle}"></div>
+          <div class="psdk-horizontal-step-header">
+            <div class="${this.getStepHorizontallMarkerStyle(step, 'icon')}">
+              <div class="psdk-horizontal-step-icon-content">
+                <span>${count + 1}</span>
+              </div>
+            </div>
+            <div class="${this.getStepHorizontallMarkerStyle(step, 'label')}">
+              <div class="psdk-horizontal-step-text-label" id="selected-label">${step.name}</div>
+            </div>
           </div>
+          ${this._showHLine(count) ? html`<div class="psdk-horizontal-step-line" /> ` : html``}
         `);
       }
       count++;
@@ -259,7 +261,6 @@ class MultiStep extends BridgeBase {
     return html`
       <div class="psdk-horizontal-progress">
         <div class="psdk-horizontal-steps">${arHorizontalSteps}</div>
-        <div class="psdk-horizontal-bar"></div>
       </div>
       <div>${this.assignmentCardHtml()}</div>
     `;

diff --git a/src/components/MultiStep/multi-step-styles.ts b/src/components/MultiStep/multi-step-styles.ts
@@ -83,52 +83,16 @@ export const multiStepStyles = html`
     }
 
     .psdk-horizontal-steps {
+      white-space: nowrap;
       display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: 100%;
+      align-items: center;
+      text-align: left;
     }
 
     .psdk-horizontal-assignment {
       padding-left: 2rem;
     }
 
-    .psdk-horizontal-header-step {
-      padding: 0.5rem;
-      height: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-basis: 0;
-      max-width: 100%;
-      min-width: 0;
-    }
-
-    .psdk-horizontal-header-step-first {
-      padding: 0.5rem;
-      height: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      flex-basis: 0;
-      max-width: 100%;
-      min-width: 0;
-    }
-
-    .psdk-horizontal-header-step-last {
-      padding: 0.5rem;
-      height: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-end;
-      flex-basis: 0;
-      max-width: 100%;
-      min-width: 0;
-    }
-
     .psdk-horizontal-step-name {
       margin-bottom: 0.5rem;
       font-size: 0.875rem;
@@ -160,6 +124,95 @@ export const multiStepStyles = html`
       right: calc(2% + 0.8rem);
     }
 
+    .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, 0.54);
+      display: inline-block;
+      min-width: 50px;
+      vertical-align: middle;
+      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;
+    }
+
+    .psdk-horizontal-step-line {
+      border-top-color: rgba(0, 0, 0, 0.12);
+      border-top-width: 1px;
+      border-top-style: solid;
+      flex: auto;
+      height: 0;
+      margin: 0 -16px;
+      min-width: 32px;
+    }
+
     .h-success {
       border: 0.15rem solid var(--app-primary-color);
     }

diff --git a/src/components/NavBar/navbar-styles.ts b/src/components/NavBar/navbar-styles.ts
@@ -56,7 +56,6 @@ export const navbarStyles = html`
       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;

diff --git a/src/components/Stages/stages-styles.ts b/src/components/Stages/stages-styles.ts
@@ -22,6 +22,7 @@ export const stagesStyles = html`
       border: 0.0625rem solid var(--app-neutral-light-color);
       overflow: hidden;
       display: flex;
+      flex-wrap: wrap;
     }
 
     .psdk-stages-chevron {

diff --git a/src/components/View/view-styles.ts b/src/components/View/view-styles.ts
@@ -9,6 +9,7 @@ export const viewStyles = html`
 
     .psdk-view-top {
       padding: 0;
+      overflow-x: hidden;
     }
 
     .template-title-container {

diff --git a/src/components/designSystemExtension/LionInputDateOnly/index.ts b/src/components/designSystemExtension/LionInputDateOnly/index.ts
@@ -15,6 +15,10 @@ class LionInputDateOnly extends LionInputDate {
     this.parser = viewValue => new Date(viewValue);
     this.serializer = toIsoDate;
     this.formatter = toIsoDate;
+
+    if (this.modelValue) {
+      this.value = this.serializer(this.modelValue);
+    }
   }
 }
 export default LionInputDateOnly;
diff --git a/src/components/designSystemExtension/LionInputDateTime/index.ts b/src/components/designSystemExtension/LionInputDateTime/index.ts
@@ -15,6 +15,10 @@ class LionInputDatetime extends LionInputDate {
     this.parser = viewValue => new Date(viewValue);
     this.serializer = toIsoDatetime;
     this.formatter = toIsoDatetime;
+
+    if (this.modelValue) {
+      this.value = this.serializer(this.modelValue);
+    }
   }
 }
 export default LionInputDatetime;
diff --git a/src/components/templates/AppShell/appshell-styles.ts b/src/components/templates/AppShell/appshell-styles.ts
@@ -7,11 +7,15 @@ export const appShellStyles = html`
       background-color: var(--app-background-color);
     }
 
+    .nav-bar {
+      width: 10%;
+    }
+
     .appshell-main {
       position: relative;
       min-height: 100vh;
       display: block;
-      width: 100%;
+      width: 90%;
     }
 
     .psdk-icon {

diff --git a/src/components/templates/AppShell/index.ts b/src/components/templates/AppShell/index.ts
@@ -165,7 +165,7 @@ class AppShell extends BridgeBase {
     const theTemplate = this.bShowAppShell
       ? html`
           <div class="appshell-top">
-            <nav-bar .pConn=${this.thePConn} appName=${this.appName} .pages=${this.pages} .caseTypes=${this.caseTypes}></nav-bar>
+            <nav-bar class="nav-bar" .pConn=${this.thePConn} appName=${this.appName} .pages=${this.pages} .caseTypes=${this.caseTypes}></nav-bar>
             <div class="appshell-main">${this.thePConn.getChildren().map(child => html`<view-container .pConn=${child}></view-container>`)}</div>
           </div>
         `

diff --git a/src/components/templates/CaseView/case-view-styles.ts b/src/components/templates/CaseView/case-view-styles.ts
@@ -66,18 +66,19 @@ export const caseViewStyles = html`
 
     .psdk-case-view-info {
       flex: 0 0 auto;
-      width: 25rem;
       float: left;
       padding: 0rem 0.3125rem 0rem 0rem;
       height: 100%; /* Should be removed. Only for demonstration */
       background-color: var (--app-form-color);
+      width: 25%;
     }
 
     .psdk-case-view-main {
       flex-grow: 2;
       float: left;
       padding: 0rem 0.3125rem;
       height: 100%; /* Should be removed. Only for demonstration */
+      width: 50%;
     }
 
     .psdk-case-view-buttons {
@@ -88,10 +89,10 @@ export const caseViewStyles = html`
 
     .psdk-case-view-utilities {
       margin: 0.625rem 0rem;
-      width: 21.875rem;
       float: left;
       padding: 0rem 0.3125rem;
       height: 100%; /* Should be removed. Only for demonstration */
+      width: 25%;
     }
 
     .psdk-case-view-divider {