feat(RangeSlider): Colour code ticks with thresholds

Royal-Navy · Sep 15, 2020 · 650eac1 · 650eac1
1 parent d40addc
commit 650eac1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/packages/css-framework/src/components/_range-slider.scss b/packages/css-framework/src/components/_range-slider.scss
@@ -122,14 +122,17 @@ $range-slider-above-thresholds: f.color("action", "500");
   cursor: pointer;
 }
 
+.rn-rangeslider__tick--below-first-threshold,
 .rn-rangeslider__track--below-first-threshold {
   background-color: $range-slider-track-below-first-threshold;
 }
 
+.rn-rangeslider__tick--between-thresholds,
 .rn-rangeslider__track--between-thresholds {
   background-color: $range-slider-track-between-thresholds;
 }
 
+.rn-rangeslider__tick--above-thresholds,
 .rn-rangeslider__track--above-thresholds {
   background-color: $range-slider-above-thresholds;
 }
@@ -148,10 +151,9 @@ $range-slider-above-thresholds: f.color("action", "500");
   width: 2px;
   height: 12px;
   transform: translateY(-50%);
-  background-color: $range-slider-bg-colour;
 
-  &.is-active {
-    background-color: $range-slider-track-colour;
+  &:not(.is-active) {
+    background-color: $range-slider-bg-colour;
   }
 }
 

diff --git a/packages/react-component-library/src/components/RangeSlider/Slider.tsx b/packages/react-component-library/src/components/RangeSlider/Slider.tsx
@@ -141,6 +141,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
                     values={sliderValues}
                     domain={domain}
                     isReversed={isReversed}
+                    thresholds={thresholds}
                   />
                 ))}
               </div>

diff --git a/packages/react-component-library/src/components/RangeSlider/Tick.tsx b/packages/react-component-library/src/components/RangeSlider/Tick.tsx
@@ -9,30 +9,49 @@ interface TickProps {
   values: ReadonlyArray<number>
   domain: ReadonlyArray<number>
   isReversed?: boolean
+  thresholds?: number[]
 }
 
 function isActive(values: ReadonlyArray<number>, tickValue: number): boolean {
-  const valuesBelow = values.some(item => item <= tickValue)
-  const valuesAbove = values.some(item => item >= tickValue)
+  const valuesBelow = values.some((item) => item <= tickValue)
+  const valuesAbove = values.some((item) => item >= tickValue)
 
   const belowSingleHandle = values.length === 1 && values[0] >= tickValue
   const betweenMultipleHandles = valuesBelow && valuesAbove
 
   return belowSingleHandle || betweenMultipleHandles
 }
 
+function getThresholdClasses(percent: number, thresholds: number[]) {
+  const singleThreshold = thresholds?.length === 1
+  const doubleThreshold = thresholds?.length === 2
+
+  return {
+    'rn-rangeslider__tick--below-first-threshold':
+      (singleThreshold || doubleThreshold) && percent <= thresholds[0],
+    'rn-rangeslider__tick--between-thresholds':
+      doubleThreshold && percent < thresholds[1] && percent >= thresholds[0],
+    'rn-rangeslider__tick--above-thresholds':
+      (singleThreshold || doubleThreshold) &&
+      percent >= thresholds[thresholds.length - 1],
+  }
+}
+
 export const Tick: React.FC<TickProps> = ({
   tick,
   count,
   hasLabels,
   values,
   domain,
   isReversed,
+  thresholds,
 }) => {
   const percent: number = isReversed ? 100 - tick.percent : tick.percent // invert if reversed
   const tickValue: number = (domain[1] / 100) * percent
+
   const tickClasses = classNames('rn-rangeslider__tick', {
     'is-active': isActive(values, tickValue),
+    ...getThresholdClasses(percent, thresholds),
   })
 
   return (