Skip to content

Commit

Permalink
Set all gridsizes in state
Browse files Browse the repository at this point in the history
  • Loading branch information
standeren committed Dec 19, 2023
1 parent d6e4eeb commit 7da5bb5
Show file tree
Hide file tree
Showing 9 changed files with 371 additions and 407 deletions.
Original file line number Diff line number Diff line change
@@ -1,66 +1,90 @@
.sliderContainer {
width: 100%;
display: flex;
gap: 1rem;
position: relative;
--height: 3rem;
--outline: 0.1rem solid var(--primary-color-700);
--outline-offset: 0.2rem;
--background: lightgrey;
--border-radius: 0.2rem;
--thumb-width: calc(100% / 12);
--thumb-background-colour: var(--primary-color-700);
--thumb-box-shadow: -100vw 0 0 100vw var(--thumb-background-colour);
}

.range {
display: flex;
.disabled {
--thumb-background-colour: var(--fds-semantic-border-neutral-default);
}

input[type='range'] {
-webkit-appearance: none;
appearance: none;
width: 100%;
flex-direction: column;
align-items: center;
cursor: pointer;
}

.disabledSliderValue,
.currentSliderValue {
display: flex;
flex-direction: row;
justify-content: flex-end;
font-size: 2rem;
min-width: 3rem;
input[type='range'].disabled {
cursor: not-allowed;
}

.disabledSliderValue {
color: var(--fds-semantic-text-neutral-subtle);
input[type='range']::-webkit-slider-runnable-track {
height: var(--height);
background: var(--background);
border-radius: var(--border-radius);
overflow: hidden;
outline: var(--outline);
outline-offset: var(--outline-offset);
}

.currentSliderValue {
color: var(--fds-semantic-text-action-default);
input[type='range']::-moz-range-track {
height: var(--height);
background: var(--background);
border-radius: var(--border-radius);
}

datalist {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 0.5rem;
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: var(--height);
width: var(--thumb-width);
box-shadow: var(--thumb-box-shadow);
background-color: var(--thumb-background-colour);
border-radius: var(--border-radius);
}

datalist option {
min-width: 1rem;
input[type='range']::-moz-range-thumb {
height: var(--height);
width: var(--thumb-width);
box-shadow: var(--thumb-box-shadow);
background-color: var(--thumb-background-colour);
border-radius: var(--border-radius);
}

datalist {
position: absolute;
top: 0;
display: flex;
justify-content: center;
width: calc(100% + var(--outline-offset));
justify-content: space-around;
--datalist-height: calc(var(--height) + var(--outline-offset));
height: var(--datalist-height);
align-items: center;
text-align: center;
color: white;
pointer-events: none;
}

input[type='range'] {
/* ... */
/* slider progress trick */
overflow: hidden;
border-radius: 3rem;
option {
display: flex;
width: 100%;
text-align: center;
justify-content: center;
height: var(--datalist-height);
align-items: center;
border-left: 1px solid white;
}

input[type='range']::-webkit-slider-runnable-track {
cursor: pointer;
border-radius: 1rem;
border: 0.1rem solid var(--primary-color-700);
background-color: white;
option:first-child {
border-left: 1px solid transparent;
}

/* Thumb: webkit */
input[type='range']::-webkit-slider-thumb {
border-radius: 50%;
border: 0.8rem solid;
box-shadow: -25.6rem 0 0 25rem var(--primary-color-700);
.outsideGrid {
color: var(--primary-color-700);
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@ describe('StudioSlider', () => {
});

it('should render slider with correct value', () => {
const sliderValue = '4';
const sliderValue = 4;
render(<StudioSlider sliderValue={sliderValue} handleSliderChange={() => jest.fn()} />);

const slider = screen.getByRole('slider');
expect(slider).toHaveValue(sliderValue);
expect(slider).toHaveValue(sliderValue.toString());
});

it('should render slider with lowest possible value when sliderValue is negative', () => {
const sliderValue = '-4';
const lowestPossibleValue = '1';
const sliderValue = -4;
const lowestPossibleValue = 1;
render(<StudioSlider sliderValue={sliderValue} handleSliderChange={() => jest.fn()} />);

const slider = screen.getByRole('slider');
expect(slider).toHaveValue(lowestPossibleValue);
expect(slider).toHaveValue(lowestPossibleValue.toString());
});

it('should render slider with highest possible value when sliderValue is too high', () => {
const sliderValue = '14';
const lowestPossibleValue = '12';
const sliderValue = 14;
const lowestPossibleValue = 12;
render(<StudioSlider sliderValue={sliderValue} handleSliderChange={() => jest.fn()} />);

const slider = screen.getByRole('slider');
expect(slider).toHaveValue(lowestPossibleValue);
expect(slider).toHaveValue(lowestPossibleValue.toString());
});

it('should call onSliderChange when new value is clicked on slider', () => {
const sliderValue = '4';
const newSliderValue = '6';
const sliderValue = 4;
const newSliderValue = 6;
const onSliderChange = jest.fn();
render(<StudioSlider sliderValue={sliderValue} handleSliderChange={onSliderChange} />);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { ChangeEvent } from 'react';
import React, { ChangeEvent, useEffect, useState } from 'react';
import classes from './StudioSlider.module.css';
import cn from 'classnames';

type StudioSliderProps = {
disabled?: boolean;
sliderValue?: string;
handleSliderChange: (newValue: string) => void;
sliderValue?: number;
handleSliderChange: (newValue: number) => void;
};

/**
Expand All @@ -13,34 +14,43 @@ type StudioSliderProps = {
*/
export const StudioSlider = ({
disabled = false,
sliderValue = '12',
sliderValue = 12,
handleSliderChange,
}: StudioSliderProps) => {
const gridValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
const [value, setValue] = useState<number>(sliderValue);
const gridValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
useEffect(() => {
setValue(sliderValue ?? 12);
}, [sliderValue]);

return (
<div className={classes.sliderContainer}>
<div className={classes.range}>
<input
type='range'
min='1'
max='12'
id='range'
value={sliderValue}
list='gridValues'
onChange={(event: ChangeEvent<HTMLInputElement>) =>
handleSliderChange(event.target.value)
}
disabled={disabled}
/>
<datalist id='gridValues'>
{gridValues.map((gridValue) => (
<option key={gridValue} value={gridValue} label={gridValue}></option>
))}
</datalist>
</div>
<div className={disabled ? classes.disabledSliderValue : classes.currentSliderValue}>
{sliderValue}
</div>
<div
className={disabled ? cn(classes.sliderContainer, classes.disabled) : classes.sliderContainer}
>
<input
className={disabled ? classes.disabled : undefined}
type='range'
min='1'
max='12'
id='range'
value={sliderValue}
list='gridValues'
onChange={(event: ChangeEvent<HTMLInputElement>) =>
handleSliderChange(parseInt(event.target.value))
}
onInput={(event: ChangeEvent<HTMLInputElement>) => setValue(parseInt(event.target.value))}
disabled={disabled}
/>
<datalist id='gridValues'>
{gridValues.map((gridValue) => (
<option
key={gridValue}
value={gridValue}
label={gridValue.toString()}
className={gridValue > value ? classes.outsideGrid : undefined}
></option>
))}
</datalist>
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
background-color: white;
border-radius: 0.5rem;
padding-right: 0.5rem;
gap: 0 !important;
}

.viewSizesTabs {
margin-left: 1rem;
margin-top: 0.5rem;
margin-left: 0.5rem;
}
Loading

0 comments on commit 7da5bb5

Please sign in to comment.