fix: stepper hideLabels in runtime (#398)

* fix(stepper): make hideLabels be able to update in runtime There was a mismatch in naming between the prop of tds-stepper and tds-step.
scania-digital-design-system · Oct 27, 2023 · 6f91df7 · 6f91df7
1 parent 9829030
commit 6f91df7
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/packages/core/src/components/stepper/step/step.tsx b/packages/core/src/components/stepper/step/step.tsx
@@ -1,6 +1,13 @@
 import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';
 import { InternalTdsStepperPropChange } from '../stepper';
 
+const propToStateMap = {
+  orientation: 'orientation',
+  labelPosition: 'labelPosition',
+  size: 'size',
+  hideLabels: 'hideLabels',
+};
+
 /**
  * @slot label - Slot for the label text.
  */
@@ -16,7 +23,7 @@ export class TdsStep {
   /** State of the Step */
   @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';
 
-  @State() hideLabel: boolean;
+  @State() hideLabels: boolean;
 
   @State() size: 'sm' | 'lg';
 
@@ -36,7 +43,7 @@ export class TdsStep {
     this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
-    this.hideLabel = this.stepperEl.hideLabels;
+    this.hideLabels = this.stepperEl.hideLabels;
     this.stepperId = this.stepperEl.stepperId;
   }
 
@@ -45,12 +52,10 @@ export class TdsStep {
     if (this.stepperId === event.detail.stepperId) {
       event.detail.changed.forEach((changedProp) => {
         if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
-          this.labelPosition = 'aside';
+          throw new Error(`Stepper prop is not supported: ${changedProp}`);
+        } else if (changedProp in propToStateMap) {
+          this[propToStateMap[changedProp]] = event.detail[changedProp];
         }
-        this[changedProp] = event.detail[changedProp];
       });
     }
   }
@@ -61,7 +66,7 @@ export class TdsStep {
         <div
           role="listitem"
           class={`${this.size} ${this.orientation} text-${this.labelPosition} ${
-            this.hideLabel ? 'hide-labels' : ''
+            this.hideLabels ? 'hide-labels' : ''
           }`}
         >
           <div class={`${this.state} content-container`}>
@@ -74,7 +79,7 @@ export class TdsStep {
               this.index
             )}
           </div>
-          {!this.hideLabel && (
+          {!this.hideLabels && (
             <div class={`label ${this.size} ${this.state}`}>
               <slot name="label"></slot>
             </div>