From e7aaa14dc2f3628caab9ea142258c4af7d45b19a Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Thu, 25 Aug 2022 11:49:09 +0200
Subject: [PATCH] feat(Slider): add tooltip on active thumb button

---
 .../docs/uilib/components/slider/Examples.tsx |   9 +-
 .../src/components/slider/SliderHelpers.tsx   |  11 +-
 .../src/components/slider/SliderInstance.tsx  |  16 +-
 .../src/components/slider/SliderThumb.tsx     | 140 +++++++++++-------
 .../__tests__/Slider.screenshot.test.js       |   6 +-
 .../__snapshots__/Slider.test.tsx.snap        |   9 +-
 ...to-match-the-active-state-1-f1077.snap.png | Bin 2358 -> 5303 bytes
 ...-to-match-the-focus-state-1-1e3c0.snap.png | Bin 2974 -> 5718 bytes
 ...-to-match-the-hover-state-1-40b49.snap.png | Bin 2974 -> 5718 bytes
 .../slider/stories/Slider.stories.tsx         |   4 +-
 .../src/components/slider/style/_slider.scss  |  13 +-
 11 files changed, 133 insertions(+), 75 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
index 29b2861a203..e5f8fb4040f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
@@ -15,6 +15,7 @@ export const SliderExampleDefault = () => (
   max={100}
   value={70}
   label="Default Slider:"
+  numberFormat={{ currency: 'EUR' }}
   onChange={({ value }) => console.log('onChange:', value)}
 />
   `
@@ -33,6 +34,7 @@ export const SliderExampleMultiButtons = () => (
     value={[30, 70]}
     step={5}
     label="Range with steps:"
+    numberFormat={{ currency: 'EUR' }}
     onChange={({ value }) => console.log('onChange:', value)}
     bottom
   />
@@ -41,7 +43,7 @@ export const SliderExampleMultiButtons = () => (
     max={100}
     value={[10, 30, 50, 70]}
     label="Multi thumbs:"
-    numberFormat={{ decimals: 2, currency: true }}
+    numberFormat={{ currency: true }}
     onChange={({ value, number }) => console.log('onChange:', value, number)}
   />
 </FormRow>
@@ -59,6 +61,7 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
     multiThumbBehavior="omit"
     value={[30, 70]}
     label="Omit behavior:"
+    numberFormat={{ currency: 'EUR' }}
     onChange={({ value }) => console.log('onChange:', value)}
     bottom
     />
@@ -67,7 +70,7 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
     value={[10,  50, 70]}
     step={1}
     label="Push behavior:"
-    numberFormat={{ decimals: 2, currency: true }}
+    numberFormat={{ currency: true }}
     onChange={({ value, number }) => console.log('onChange:', value, number)}
   />
 </FormRow>
@@ -88,6 +91,7 @@ const Component = () => {
       step={10}
       hideButtons
       label="Slider A:"
+      numberFormat={{ currency: 'EUR' }}
       onChange={({ value }) => setValue(value)}
     />
     <VerticalWrapper>
@@ -98,6 +102,7 @@ const Component = () => {
         step={1}
         label="Slider B:"
         labelDirection="vertical"
+        numberFormat={{ currency: 'NOK' }}
         onChange={({ value }) => setValue(value)}
       />
       <Input
diff --git a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
index dd5f8d341ba..3f106fc62cb 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
@@ -134,19 +134,16 @@ export const formatNumber = (
   return value
 }
 
-export const getHumanNumber = (
+export const getFormattedNumber = (
   value: number,
   numberFormat: formatOptionParams
 ) => {
-  const num = value as number
-  const { aria: humanNumber } = (
+  return (
     numberFormat
-      ? formatNumber(num, {
+      ? formatNumber(value as number, {
           ...(numberFormat || {}),
           returnAria: true,
         })
-      : { aria: null }
+      : { aria: null, number: null }
   ) as formatReturnValue
-
-  return String(humanNumber || value)
 }
diff --git a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
index 004ff781f38..0642665b89b 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
@@ -26,7 +26,7 @@ import {
 } from './SliderTrack'
 import { SliderThumb } from './SliderThumb'
 import { useSliderProps } from './hooks/useSliderProps'
-import { clamp, getHumanNumber } from './SliderHelpers'
+import { clamp, getFormattedNumber } from './SliderHelpers'
 
 export function SliderInstance() {
   const context = React.useContext(Context)
@@ -164,7 +164,7 @@ function SubtractButton() {
     subtractParams['aria-hidden'] = attributes['aria-hidden']
   }
 
-  const humanNumber = getHumanNumber(value as number, numberFormat)
+  const humanNumber = getFormattedNumber(value as number, numberFormat)
 
   return (
     <Button
@@ -172,7 +172,10 @@ function SubtractButton() {
       variant="secondary"
       icon="subtract"
       size="small"
-      aria-label={subtractTitle?.replace('%s', humanNumber)}
+      aria-label={subtractTitle?.replace(
+        '%s',
+        humanNumber.aria || String(value)
+      )}
       on_click={onSubtractClickHandler}
       disabled={disabled}
       skeleton={skeleton}
@@ -196,7 +199,7 @@ function AddButton() {
     addParams['aria-hidden'] = attributes['aria-hidden']
   }
 
-  const humanNumber = getHumanNumber(value as number, numberFormat)
+  const humanNumber = getFormattedNumber(value as number, numberFormat)
 
   return (
     <Button
@@ -204,7 +207,10 @@ function AddButton() {
       variant="secondary"
       icon="add"
       size="small"
-      aria-label={addTitle?.replace('%s', humanNumber)}
+      aria-label={addTitle?.replace(
+        '%s',
+        humanNumber.aria || String(value)
+      )}
       on_click={onAddClickHandler}
       disabled={disabled}
       skeleton={skeleton}
diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
index 004bbe34e84..39b2e7850a3 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
@@ -5,13 +5,30 @@ import {
   validateDOMAttributes,
 } from '../../shared/component-helper'
 import Button from '../button/Button'
+import Tooltip from '../tooltip/Tooltip'
 import { useSliderEvents } from './hooks/useSliderEvents'
 import { useSliderProps } from './hooks/useSliderProps'
-import { clamp, getHumanNumber } from './SliderHelpers'
+import { clamp, getFormattedNumber } from './SliderHelpers'
 
 export function SliderThumb() {
+  const { values } = useSliderProps()
+
+  return (
+    <>
+      {values.map((value, i) => {
+        return <Thumb key={i} value={value} currentIndex={i} />
+      })}
+    </>
+  )
+}
+
+type ThumbProps = {
+  value: number
+  currentIndex: number
+}
+
+function Thumb({ value, currentIndex }: ThumbProps) {
   const {
-    values,
     thumbIndex,
     isVertical,
     isReverse,
@@ -32,6 +49,28 @@ export function SliderThumb() {
     numberFormat,
   } = allProps
 
+  const index = thumbIndex.current
+  let percent = clamp(((value - min) * 100) / (max - min))
+
+  if (isReverse) {
+    percent = 100 - percent
+  }
+
+  const style = {
+    zIndex: index === currentIndex ? 4 : 3,
+    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
+  } as React.CSSProperties
+
+  const { number, aria } = getFormattedNumber(value, numberFormat)
+
+  const [hover, setHover] = React.useState(false)
+  const onMouseEnterHandler = () => {
+    setHover(true)
+  }
+  const onMouseLeaveHandler = () => {
+    setHover(false)
+  }
+
   const {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
@@ -68,58 +107,51 @@ export function SliderThumb() {
 
   return (
     <>
-      {values.map((value, i) => {
-        const index = thumbIndex.current
-        let percent = clamp(((value - min) * 100) / (max - min))
-
-        if (isReverse) {
-          percent = 100 - percent
-        }
-
-        const style: React.CSSProperties = {
-          zIndex: index === i ? 4 : 3,
-          [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
-        }
-
-        const humanNumber = getHumanNumber(value, numberFormat)
-
-        return (
-          <React.Fragment key={i}>
-            <span className="dnb-slider__thumb" style={style}>
-              <input
-                type="range"
-                className="dnb-slider__button-helper"
-                min={min}
-                max={max}
-                step={step}
-                value={value}
-                disabled={disabled}
-                onChange={onHelperChangeHandler}
-                onFocus={onHelperFocusHandler}
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-valuenow={value}
-                aria-valuetext={humanNumber ? humanNumber : undefined}
-                aria-orientation={isVertical ? 'vertical' : 'horizontal'}
-                data-index={i}
-                {...helperParams}
-              />
-
-              <Button
-                element="span"
-                type=""
-                variant="secondary"
-                disabled={disabled}
-                skeleton={skeleton}
-                data-index={i}
-                onMouseDown={onThumbMouseDownHandler}
-                onMouseUp={onThumbMouseUpHandler}
-                {...thumbParams}
-              />
-            </span>
-          </React.Fragment>
-        )
-      })}
+      <span
+        className="dnb-slider__thumb"
+        style={style}
+        onMouseEnter={onMouseEnterHandler}
+        onTouchStart={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
+        onTouchEnd={onMouseLeaveHandler}
+      >
+        <input
+          type="range"
+          className="dnb-slider__button-helper"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          onChange={onHelperChangeHandler}
+          onFocus={onHelperFocusHandler}
+          onFocusCapture={onMouseEnterHandler}
+          onBlurCapture={onMouseLeaveHandler}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          aria-valuetext={aria ? aria : undefined}
+          aria-orientation={isVertical ? 'vertical' : 'horizontal'}
+          data-index={currentIndex}
+          {...helperParams}
+        />
+
+        <Button
+          element="span"
+          type=""
+          variant="secondary"
+          disabled={disabled}
+          skeleton={skeleton}
+          data-index={currentIndex}
+          onMouseDown={onThumbMouseDownHandler}
+          onMouseUp={onThumbMouseUpHandler}
+          {...thumbParams}
+        />
+
+        <Tooltip active={hover} skip_portal>
+          {number || value}
+        </Tooltip>
+      </span>
     </>
   )
 }
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
index ba7e8edb5a3..41a735203ab 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
@@ -21,7 +21,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the focus state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
@@ -32,7 +32,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the hover state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
@@ -43,7 +43,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the active state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
index 1f01173ccb6..73e5d10b5d4 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -809,7 +809,8 @@ legend.dnb-form-label {
     left: 0;
     top: 0;
     z-index: 3;
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
     border-radius: 50%; }
     .dnb-slider__button-helper,
@@ -869,6 +870,12 @@ legend.dnb-form-label {
     margin-top: 0.5rem; }
   .dnb-slider--vertical .dnb-form-status {
     margin-top: 1rem; }
+  .dnb-slider .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease; }
+    .dnb-slider .dnb-tooltip__content {
+      min-width: 0;
+      white-space: nowrap; }
   @media screen and (max-width: 40em) {
     .dnb-responsive-component .dnb-slider {
       display: flex;
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-active-state-1-f1077.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-active-state-1-f1077.snap.png
index 8e6eca49332c2a4ee31e4dfe1ce181fadddf9359..d2d49c2f792092d1997c2fadf799f69bedcc1acf 100644
GIT binary patch
literal 5303
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

literal 2358
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

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-focus-state-1-1e3c0.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-focus-state-1-1e3c0.snap.png
index 92b5979ba6e740b37c8f999f11f11a50d9e2751e..a7a88dff319886b9fa3ba158b7ea42b011450111 100644
GIT binary patch
literal 5718
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

literal 2974
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

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-hover-state-1-40b49.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-hover-state-1-40b49.snap.png
index 92b5979ba6e740b37c8f999f11f11a50d9e2751e..a7a88dff319886b9fa3ba158b7ea42b011450111 100644
GIT binary patch
literal 5718
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

literal 2974
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

diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
index a3646c3c449..0c0ecaea3ce 100644
--- a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
+++ b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
@@ -74,8 +74,8 @@ export function MultiButtons() {
           max={1000}
           step={10}
           stretch
-          // vertical
-          reverse
+          vertical
+          // reverse
           numberFormat={{
             decimals: 2,
             currency: 'EUR',
diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
index f8aaebf3695..8438106a11b 100644
--- a/packages/dnb-eufemia/src/components/slider/style/_slider.scss
+++ b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
@@ -152,7 +152,8 @@
     top: 0;
     z-index: 3;
 
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
 
     // Because of the DropShadow
@@ -236,6 +237,16 @@
     margin-top: 1rem;
   }
 
+  .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease;
+
+    &__content {
+      min-width: 0;
+      white-space: nowrap;
+    }
+  }
+
   .dnb-responsive-component & {
     @media screen and (max-width: 40em) {
       display: flex;