From 973aefe6eb0fc7c2506814c8986c5e098365e3a6 Mon Sep 17 00:00:00 2001
From: Leandro Souza <leandro.souza@homeday.de>
Date: Wed, 30 Aug 2023 13:43:54 +0200
Subject: [PATCH 1/5] :bug: Fix custom hd range bullets precision

---
 src/components/form/HdRange.vue            | 32 ++++++++++++++++------
 src/stories/HdRange.stories.js             | 23 ++++++++++++++++
 tests/unit/components/form/HdRange.spec.js | 16 ++++++++++-
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue
index a74263b1..8a1b597c 100644
--- a/src/components/form/HdRange.vue
+++ b/src/components/form/HdRange.vue
@@ -28,20 +28,34 @@
         class="range__progress"
       />
     </div>
-    <div v-if="displayStepBullets || stepBullets.length" class="range__steps">
-      <template v-for="(stepValue, stepIndex) in stepsAmount">
+    <template v-if="displayStepBullets">
+      <div class="range__steps">
         <button
-          v-if="displayStepBullets || isStepBulletVisible(stepValue)"
+          v-for="(_, stepIndex) in stepsAmount"
           :key="stepIndex"
           type="button"
           class="range__step"
           @click="onStepClick(stepIndex)"
+        >
+          <p v-if="labels[stepIndex]" class="range__step-label" v-html="labels[stepIndex]" />
+        </button>
+      </div>
+    </template>
+    <template v-else-if="stepBullets.length">
+      <div class="range__steps">
+        <button
+          v-for="(stepValue, stepIndex) in stepBullets"
+          :key="stepValue"
+          type="button"
+          class="range__step"
+          @click="onStepClick(stepIndex)"
           :style="customStepBulletOffset(stepValue)"
+          :data-value="stepIndex"
         >
           <p v-if="labels[stepIndex]" class="range__step-label" v-html="labels[stepIndex]" />
         </button>
-      </template>
-    </div>
+      </div>
+    </template>
     <div class="range__thumb" ref="thumb">
       <div v-if="displayTooltip" class="range__tooltip">
         <img :src="tooltipBackground" class="range__tooltip__background" />
@@ -209,20 +223,22 @@ export default {
     blurHandler() {
       this.isActive = false;
     },
-    isStepBulletVisible(value) {
-      return this.stepBullets.includes(value);
-    },
     customStepBulletOffset(value) {
+      console.log('--------------');
       if (!this.stepBullets.length) return {}; // Early return standard bullets
       const stepPosition = this.stepBullets.indexOf(value);
       const valuePercentage = (value - this.min) / (this.max - this.min);
       let valuePercentageInputWidthPixels = this.trackWidth * valuePercentage;
 
+      console.log('----------------', value);
+      console.log('%', valuePercentage);
+
       if (stepPosition > 0) {
         const previousValue = this.stepBullets[stepPosition - 1];
         const previousValuePercentage = (previousValue - this.min) / (this.max - this.min);
         const previousPercentageInputWidthPixels = this.trackWidth * previousValuePercentage;
         valuePercentageInputWidthPixels -= previousPercentageInputWidthPixels;
+        console.log('-', previousValuePercentage);
       }
 
       return {
diff --git a/src/stories/HdRange.stories.js b/src/stories/HdRange.stories.js
index 1d091ad1..06527158 100644
--- a/src/stories/HdRange.stories.js
+++ b/src/stories/HdRange.stories.js
@@ -141,3 +141,26 @@ export const WithCustomStepBullets = (_, { argTypes }) => ({
     };
   },
 });
+
+export const WithCustomStepBullets2 = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { HdRange },
+  template: `
+    <div style="margin: 64px auto; max-width: 360px;">
+      <HdRange 
+        v-bind="$props"
+        :min="8"
+        :max="12"
+        :step="0.5"
+        :step-bullets="[8, 9, 9.5, 10, 11, 12]"
+        v-model="currentValue"
+      />
+      <p style="margin-top: 50px;">Value: {{ currentValue }}</p>
+    </div>
+  `,
+  data() {
+    return {
+      currentValue: 9.5,
+    };
+  },
+});
diff --git a/tests/unit/components/form/HdRange.spec.js b/tests/unit/components/form/HdRange.spec.js
index 75d5ee78..6ebf7f51 100644
--- a/tests/unit/components/form/HdRange.spec.js
+++ b/tests/unit/components/form/HdRange.spec.js
@@ -260,8 +260,22 @@ describe('HdRange', () => {
     });
 
     it('renders custom step bullets', () => {
-      const wrapper = stepBulletsWrapperBuilder();
+      let wrapper = stepBulletsWrapperBuilder();
       expect(wrapper.findAll(VISIBLE_STEP_BULLETS_SELECTOR).length).toBe(5);
+
+      wrapper = stepBulletsWrapperBuilder({
+        props: {
+          name: 'storybook',
+          min: 8,
+          max: 12,
+          step: 0.5,
+          value: 9.5,
+          labels: [],
+          displayStepBullets: false,
+          stepBullets: [8, 9, 9.5, 10, 11, 12],
+        },
+      });
+      expect(wrapper.findAll(VISIBLE_STEP_BULLETS_SELECTOR).length).toBe(6);
     });
     it('updates value to closest step bullet', async () => {
       const wrapper = stepBulletsWrapperBuilder();

From 9aeeb8059ba9a53ae8461ce9220c6d4035bd20f8 Mon Sep 17 00:00:00 2001
From: Leandro Souza <leandro.souza@homeday.de>
Date: Wed, 30 Aug 2023 13:45:15 +0200
Subject: [PATCH 2/5] :fire: Remove unecessary story

---
 src/stories/HdRange.stories.js | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/src/stories/HdRange.stories.js b/src/stories/HdRange.stories.js
index 06527158..1d091ad1 100644
--- a/src/stories/HdRange.stories.js
+++ b/src/stories/HdRange.stories.js
@@ -141,26 +141,3 @@ export const WithCustomStepBullets = (_, { argTypes }) => ({
     };
   },
 });
-
-export const WithCustomStepBullets2 = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { HdRange },
-  template: `
-    <div style="margin: 64px auto; max-width: 360px;">
-      <HdRange 
-        v-bind="$props"
-        :min="8"
-        :max="12"
-        :step="0.5"
-        :step-bullets="[8, 9, 9.5, 10, 11, 12]"
-        v-model="currentValue"
-      />
-      <p style="margin-top: 50px;">Value: {{ currentValue }}</p>
-    </div>
-  `,
-  data() {
-    return {
-      currentValue: 9.5,
-    };
-  },
-});

From 31f12c1f140e4a2fec8d5d01fe8790840c60a3da Mon Sep 17 00:00:00 2001
From: Leandro Souza <leandro.souza@homeday.de>
Date: Wed, 30 Aug 2023 13:48:01 +0200
Subject: [PATCH 3/5] :fire: Remove console.logs

---
 src/components/form/HdRange.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue
index 8a1b597c..92ca4d96 100644
--- a/src/components/form/HdRange.vue
+++ b/src/components/form/HdRange.vue
@@ -224,21 +224,16 @@ export default {
       this.isActive = false;
     },
     customStepBulletOffset(value) {
-      console.log('--------------');
       if (!this.stepBullets.length) return {}; // Early return standard bullets
       const stepPosition = this.stepBullets.indexOf(value);
       const valuePercentage = (value - this.min) / (this.max - this.min);
       let valuePercentageInputWidthPixels = this.trackWidth * valuePercentage;
 
-      console.log('----------------', value);
-      console.log('%', valuePercentage);
-
       if (stepPosition > 0) {
         const previousValue = this.stepBullets[stepPosition - 1];
         const previousValuePercentage = (previousValue - this.min) / (this.max - this.min);
         const previousPercentageInputWidthPixels = this.trackWidth * previousValuePercentage;
         valuePercentageInputWidthPixels -= previousPercentageInputWidthPixels;
-        console.log('-', previousValuePercentage);
       }
 
       return {

From 0fb56a92c90328b863f77f6448c9305cfe0faf00 Mon Sep 17 00:00:00 2001
From: Leandro Souza <leandro.souza@homeday.de>
Date: Thu, 31 Aug 2023 09:15:35 +0200
Subject: [PATCH 4/5] :fire: Remove data-value attribute

---
 src/components/form/HdRange.vue |  1 -
 src/stories/HdRange.stories.js  | 23 +++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue
index 92ca4d96..32b8b5ba 100644
--- a/src/components/form/HdRange.vue
+++ b/src/components/form/HdRange.vue
@@ -50,7 +50,6 @@
           class="range__step"
           @click="onStepClick(stepIndex)"
           :style="customStepBulletOffset(stepValue)"
-          :data-value="stepIndex"
         >
           <p v-if="labels[stepIndex]" class="range__step-label" v-html="labels[stepIndex]" />
         </button>
diff --git a/src/stories/HdRange.stories.js b/src/stories/HdRange.stories.js
index 1d091ad1..06527158 100644
--- a/src/stories/HdRange.stories.js
+++ b/src/stories/HdRange.stories.js
@@ -141,3 +141,26 @@ export const WithCustomStepBullets = (_, { argTypes }) => ({
     };
   },
 });
+
+export const WithCustomStepBullets2 = (_, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { HdRange },
+  template: `
+    <div style="margin: 64px auto; max-width: 360px;">
+      <HdRange 
+        v-bind="$props"
+        :min="8"
+        :max="12"
+        :step="0.5"
+        :step-bullets="[8, 9, 9.5, 10, 11, 12]"
+        v-model="currentValue"
+      />
+      <p style="margin-top: 50px;">Value: {{ currentValue }}</p>
+    </div>
+  `,
+  data() {
+    return {
+      currentValue: 9.5,
+    };
+  },
+});

From b35d06572b410a90ade4a7bf2dc683242c8be0ea Mon Sep 17 00:00:00 2001
From: Leandro Souza <leandro.souza@homeday.de>
Date: Thu, 31 Aug 2023 09:17:48 +0200
Subject: [PATCH 5/5] :fire: Remove story

---
 src/stories/HdRange.stories.js | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/src/stories/HdRange.stories.js b/src/stories/HdRange.stories.js
index 06527158..1d091ad1 100644
--- a/src/stories/HdRange.stories.js
+++ b/src/stories/HdRange.stories.js
@@ -141,26 +141,3 @@ export const WithCustomStepBullets = (_, { argTypes }) => ({
     };
   },
 });
-
-export const WithCustomStepBullets2 = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { HdRange },
-  template: `
-    <div style="margin: 64px auto; max-width: 360px;">
-      <HdRange 
-        v-bind="$props"
-        :min="8"
-        :max="12"
-        :step="0.5"
-        :step-bullets="[8, 9, 9.5, 10, 11, 12]"
-        v-model="currentValue"
-      />
-      <p style="margin-top: 50px;">Value: {{ currentValue }}</p>
-    </div>
-  `,
-  data() {
-    return {
-      currentValue: 9.5,
-    };
-  },
-});