Merge pull request #70 from sparkgeo/slider-updates

Simple Slider Update

dist/index.d.ts

@@ -30,6 +30,13 @@ declare interface BaseDatePickerProps extends Omit<DatePickerProps_2<DateValue>,
     minValue?: Date;
 }
 
+declare interface BaseSimpleSliderProps extends AriaSliderProps {
+    onChange: (value: number | number[]) => void;
+    label: ReactNode | string;
+    showLabel?: boolean;
+    value?: number;
+}
+
 /**
  * A composite component that renders a slider control with optional label and custom thumb icon.
  *
@@ -222,35 +229,7 @@ export declare namespace SidebarContainer {
     }
 }
 
-export declare function SimpleSlider({ units, label, onChange, min, max, step, value, }: {
-    units: any;
-    label: any;
-    onChange: any;
-    min: any;
-    max: any;
-    step: any;
-    value: any;
-}): JSX_2.Element;
-
-export declare namespace SimpleSlider {
-    export namespace propTypes {
-        let onChange: default_2.Validator<(...args: any[]) => any>;
-        let min: default_2.Validator<number>;
-        let max: default_2.Validator<number>;
-        let step: default_2.Validator<number>;
-        let value: default_2.Requireable<number>;
-        let label: default_2.Requireable<string>;
-        let units: default_2.Requireable<string>;
-    }
-    export namespace defaultProps {
-        let value_1: number;
-            { value_1 as value };
-        let units_1: string;
-            { units_1 as units };
-        let label_1: string;
-            { label_1 as label };
-    }
-}
+export declare const SimpleSlider: ({ label, onChange, minValue, maxValue, step, value, showLabel, ...props }: BaseSimpleSliderProps) => JSX_2.Element;
 
 export declare function SliderControl({ title, units, sliderConfig }: {
     title: any;

src/components/core/SimpleSlider.module.css

@@ -1,14 +1,64 @@
-.simpleSlider {
-    grid-column-start: 2;
-    padding: 4px;
-    align-items: center;
+.slider {
+    display: grid;
+    grid-template-areas: "label output"
+                         "track track";
+    grid-template-columns: 1fr auto;
+    max-width: 100%;
+    color: var(--text-color);
+
+    &[data-orientation=horizontal] {
+        justify-self: center;
+        box-sizing: border-box;
+        width: 90%;
+    }
 }
 
-.simpleSliderInput {
-    width: 100%;
+.sliderLabel {
+    grid-area: label;
 }
 
-.simpleSliderMinMaxContainer {
+.sliderThumb {    
     display: flex;
-    justify-content: space-between;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--secondary-color);
+    border: 2px solid var(--background-color);
+    forced-color-adjust: none;
+    top: 50%;
+    justify-content: center;
+    align-items: center;
+
+    &[data-dragging] {
+      background: var(--tertiary-color);
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--focus-ring-color);
+    }
+}
+
+.sliderTrack {
+    grid-area: track;
+    position: relative;
+
+    /* track line */
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      background: var(--border-color);
+    }
+
+    &[data-orientation=horizontal] {
+        height: 30px;
+        width: 100%;
+
+        &:before {
+          height: 3px;
+          width: 100%;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+    }
 }

src/components/core/SimpleSlider.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SimpleSlider } from "./SimpleSlider";
+
+describe("SimpleSlider", () => {
+    it("renders with label when showLabel prop is passed", () => {
+        const stubOnChange = vi.fn();
+
+        render(<SimpleSlider label="Some Fake Label" showLabel onChange={stubOnChange} />);
+        expect(screen.getByText("Some Fake Label")).toBeInTheDocument();
+    });
+
+    it("renders with correct aria-label when showLabel flag is not provided", () => {
+        const stubOnChange = vi.fn();
+
+        render(<SimpleSlider label="Some Aria Label" onChange={stubOnChange}/>);
+
+        const sliderElement = screen.getByLabelText('Some Aria Label');
+
+        expect(sliderElement).toHaveAttribute('aria-label')
+    });
+
+    it("fires callback function on user interaction", async () => {
+        const stubOnChange = vi.fn();
+
+        render(<SimpleSlider label="Some Aria Label" onChange={stubOnChange}/>);
+
+        const inputElement = screen.getByRole('slider');
+
+        await userEvent.click(inputElement)
+
+        expect(stubOnChange).toHaveBeenCalled();
+    });
+});

src/components/core/SimpleSlider.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { AriaSliderProps } from 'react-aria';
+import {Label, Slider, SliderThumb, SliderTrack} from 'react-aria-components';
+import styles from "./SimpleSlider.module.css";
+
+export interface BaseSimpleSliderProps
+    extends AriaSliderProps {
+    className: string;
+    onChange: (value: number | number[]) => void;
+    label: ReactNode | string;
+    showLabel?: boolean;
+    value?: number;
+}
+
+export const SimpleSlider = ({
+    className,
+    label = "",
+    onChange,
+    minValue,
+    maxValue,
+    step,
+    value = 0,
+    showLabel,
+    ...props
+}: BaseSimpleSliderProps) => (
+    <Slider maxValue={maxValue} minValue={minValue} step={step} className={`${styles.slider} ${className || ""}`.trim()} aria-label={!showLabel && typeof label === "string" ? label : undefined} onChange={onChange} value={value} {...props}>
+        {showLabel && <Label className={styles.sliderLabel}>{label}</Label>}
+        <SliderTrack className={styles.sliderTrack}>
+            <SliderThumb className={styles.sliderThumb}/>
+        </SliderTrack>
+    </Slider>
+);

src/stories/SimpleSlider.stories.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { SimpleSlider } from "../components/core/SimpleSlider";
+
+export default {
+    title: "Core/SimpleSlider",
+    component: SimpleSlider,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: "fullscreen"
+    },
+    args: {
+        label: "A Simple Slider",
+        minValue: 0,
+        maxValue: 100,
+        step: 1,
+        showLabel: true,
+    }
+};
+
+export const Default = {
+    render: (args) => {
+        const [value, setValue] = useState(50);
+
+        const handleChange = (newValue) => setValue(newValue);
+
+        return <SimpleSlider onChange={handleChange} value={value} {...args} />
+    }
+}