Merge pull request #3266 from dusk-network/feature-3265

web-wallet: Fix labels in Stepper not displaying properly
dusk-network · Dec 21, 2024 · d573a0e · d573a0e
2 parents 894f3bc + a1148d4
commit d573a0e
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 14 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix wallet not waiting for the Wasm to load at startup [#3238]
 - Fix Public address icon in Receive flow [#3259]
 - Fix Public account icon hover text (Balance component) [#3259]
+- Fix labels in Stepper not displaying properly [#3265]
 
 ## [0.10.1] - 2024-12-18
 
@@ -478,6 +479,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3238]: https://github.com/dusk-network/rusk/issues/3238
 [#3245]: https://github.com/dusk-network/rusk/issues/3245
 [#3259]: https://github.com/dusk-network/rusk/issues/3259
+[#3265]: https://github.com/dusk-network/rusk/issues/3265
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -158,7 +158,7 @@
 <div class="operation">
   <Wizard steps={steps.length} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
     <!-- Address Step -->
     <WizardStep

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -158,7 +158,7 @@
 <div class="operation">
   <Wizard steps={hideStakingNotice ? 3 : 4} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
 
     {#if !hideStakingNotice}

diff --git a/web-wallet/src/lib/components/Stake/Unstake.svelte b/web-wallet/src/lib/components/Stake/Unstake.svelte
@@ -81,7 +81,7 @@
 <div class="operation">
   <Wizard steps={2} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
 
     <!-- OPERATION OVERVIEW STEP  -->

diff --git a/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte b/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte
@@ -26,7 +26,7 @@
    * Whether to show the step label when the step is inactive.
    * @type {boolean}
    */
-  export let showStepLabelWhenInactive = true;
+  export let showStepLabelWhenInactive = false;
 
   /**
    * The number of steps, greater or equal to two,
@@ -91,7 +91,7 @@
 
         <span
           class="dusk-stepper__step-label"
-          class:dusk-stepper__step-label--invisible={showStepLabelWhenInactive ||
+          class:dusk-stepper__step-label--invisible={!showStepLabelWhenInactive &&
             idx !== activeStep}
           {id}
         >
@@ -104,8 +104,9 @@
           class="dusk-stepper__step"
           class:dusk-stepper__step--processed={idx <= activeStep}
           aria-current={idx === activeStep ? "step" : undefined}
-          >{showStepNumbers ? idx + 1 : ""}</span
         >
+          {showStepNumbers ? idx + 1 : ""}
+        </span>
       {/each}
     {/if}
   </div>

diff --git a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
@@ -57,6 +57,13 @@ describe("Stepper", () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it("should render the `Stepper` with all step labels being displayed, if the right flag is provided ", async () => {
+    const props = { ...baseProps, showStepLabelWhenInactive: true, steps: 5 };
+    const { container } = render(Stepper, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it("should pass additional class names and attributes to the rendered element", () => {
     const props = {
       ...baseProps,

diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
@@ -42,7 +42,7 @@ exports[`Stepper > should add the proper class name for the desired variant 1`]
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -131,7 +131,7 @@ exports[`Stepper > should allow to hide the step numbers 1`] = `
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -221,7 +221,7 @@ exports[`Stepper > should pass additional class names and attributes to the rend
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -277,27 +277,32 @@ exports[`Stepper > should render the \`Stepper\` component accepting a number as
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     1
+     
   </span>
   <span
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     2
+     
   </span>
   <span
     aria-current="step"
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     3
+     
   </span>
   <span
     class="dusk-stepper__step"
   >
     4
+     
   </span>
   <span
     class="dusk-stepper__step"
   >
     5
+     
   </span>
   
 </div>
@@ -359,7 +364,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting a number as
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     qux
@@ -434,7 +439,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -537,7 +542,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     qux
@@ -569,3 +574,43 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   
 </div>
 `;
+
+exports[`Stepper > should render the \`Stepper\` with all step labels being displayed, if the right flag is provided  1`] = `
+<div
+  class="dusk-stepper dusk-stepper--variant--primary"
+  style="--columns: 5; --progress-width: 40%;"
+>
+  <span
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    1
+     
+  </span>
+  <span
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    2
+     
+  </span>
+  <span
+    aria-current="step"
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    3
+     
+  </span>
+  <span
+    class="dusk-stepper__step"
+  >
+    4
+     
+  </span>
+  <span
+    class="dusk-stepper__step"
+  >
+    5
+     
+  </span>
+  
+</div>
+`;