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 b0fb6ac
Show file tree
Hide file tree
Showing 8 changed files with 359 additions and 397 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
@@ -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,41 @@ type StudioSliderProps = {
*/
export const StudioSlider = ({
disabled = false,

Check failure on line 16 in frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.tsx

View workflow job for this annotation

GitHub Actions / Testing

EditGrid › should show grid value 4 on slider for mobile tab when xs: "4" is set on grid on component

Expected test not to call console.error(). If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs. Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead. at input at div at disabled (libs/studio-components/src/components/StudioSlider/StudioSlider.tsx:16:3) at handleUpdateGrid (packages/ux-editor/src/components/config/editModal/EditGridForGivenViewSize.tsx:27:3) at div at ../node_modules/@digdir/design-system-react/dist/cjs/index.js:7476:40 at div at ../node_modules/@digdir/design-system-react/dist/cjs/index.js:7295:36 at handleComponentChange (packages/ux-editor/src/components/config/editModal/EditGrid.tsx:41:28) at basenameProp (../node_modules/react-router/lib/components.tsx:383:13) at basename (../node_modules/react-router-dom/index.tsx:718:3) at Provider (../node_modules/react-redux/lib/components/Provider.js:19:3) at children (packages/shared/src/providers/PreviewConnectionContext.tsx:11:52) at QueryClientProvider (../node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:30:3) at ErrorBoundary (../node_modules/react-error-boundary/dist/react-error-boundary.cjs.js:16:5) at children (packages/shared/src/contexts/ServicesContext.tsx:85:3) at console.captureMessage [as error] (../node_modules/jest-fail-on-console/index.js:58:25) at printWarning (../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (../node_modules/react-dom/cjs/react-dom.development.js:60:7) at validateProperty$1 (../node_modules/react-dom/cjs/react-dom.development.js:3767:9) at warnUnknownProperties (../node_modules/react-dom/cjs/react-dom.development.js:3803:21) at validateProperties$2 (../node_modules/react-dom/cjs/react-dom.development.js:3827:3) at validatePropertiesInDevelopment (../node_modules/react-dom/cjs/react-dom.development.js:9541:5) at setInitialProperties (../node_modules/react-dom/cjs/react-dom.development.js:9830:5) at finalizeInitialChildren (../node_modules/react-dom/cjs/react-dom.development.js:10950:3) at completeWork (../node_modules/react-dom/cjs/react-dom.development.js:22193:17) at completeUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26593:16) at performUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26568:5) at workLoopSync (../node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (../node_modules/react-dom/cjs/react-dom.development.js:26434:7) at performConcurrentWorkOnRoot (../node_modules/react-dom/cjs/react-dom.development.js:25738:74) at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24) at act (../node_modules/react/cjs/react.development.js:2582:11) at ../node_modules/@testing-library/react/dist/act-compat.js:46:25 at renderRoot (../node_modules/@testing-library/react/dist/pure.js:161:26) at render (../node_modules/@testing-library/react/dist/pure.js:247:10) at packages/ux-editor/src/testing/mocks.tsx:122:32 at render (packages/ux-editor/src/components/config/editModal/EditGrid.test.tsx:19:29) at Object.<anonymous> (packages/ux-editor/src/components/config/editModal/EditGrid.test.tsx:29:5) at flushUnexpectedConsoleCalls (../node_modules/jest-fail-on-console/index.js:40:13) at Object.<anonymous> (../node_modules/jest-fail-on-console/index.js:113:7)

Check failure on line 16 in frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.tsx

View workflow job for this annotation

GitHub Actions / Testing

FormComponentConfig › should render expected components

Expected test not to call console.error(). If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs. Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead. at option at datalist at div at disabled (libs/studio-components/src/components/StudioSlider/StudioSlider.tsx:16:3) at handleUpdateGrid (packages/ux-editor/src/components/config/editModal/EditGridForGivenViewSize.tsx:27:3) at div at ../node_modules/@digdir/design-system-react/dist/cjs/index.js:7476:40 at div at ../node_modules/@digdir/design-system-react/dist/cjs/index.js:7295:36 at handleComponentChange (packages/ux-editor/src/components/config/editModal/EditGrid.tsx:41:28) at schema (packages/ux-editor/src/components/config/FormComponentConfig.tsx:29:3) at basenameProp (../node_modules/react-router/lib/components.tsx:383:13) at basename (../node_modules/react-router-dom/index.tsx:718:3) at Provider (../node_modules/react-redux/lib/components/Provider.js:19:3) at children (packages/shared/src/providers/PreviewConnectionContext.tsx:11:52) at QueryClientProvider (../node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:30:3) at ErrorBoundary (../node_modules/react-error-boundary/dist/react-error-boundary.cjs.js:16:5) at children (packages/shared/src/contexts/ServicesContext.tsx:85:3) at console.captureMessage [as error] (../node_modules/jest-fail-on-console/index.js:58:25) at printWarning (../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (../node_modules/react-dom/cjs/react-dom.development.js:60:7) at validateProperty$1 (../node_modules/react-dom/cjs/react-dom.development.js:3767:9) at warnUnknownProperties (../node_modules/react-dom/cjs/react-dom.development.js:3803:21) at validateProperties$2 (../node_modules/react-dom/cjs/react-dom.development.js:3827:3) at validatePropertiesInDevelopment (../node_modules/react-dom/cjs/react-dom.development.js:9541:5) at setInitialProperties (../node_modules/react-dom/cjs/react-dom.development.js:9830:5) at finalizeInitialChildren (../node_modules/react-dom/cjs/react-dom.development.js:10950:3) at completeWork (../node_modules/react-dom/cjs/react-dom.development.js:22193:17) at completeUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26593:16) at performUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26568:5) at workLoopSync (../node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (../node_modules/react-dom/cjs/react-dom.development.js:26434:7) at performConcurrentWorkOnRoot (../node_modules/react-dom/cjs/react-dom.development.js:25738:74) at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24) at act (../node_modules/react/cjs/react.development.js:2582:11) at ../node_modules/@testing-library/react/dist/act-compat.js:46:25 at renderRoot (../node_modules/@testing-library/react/dist/pure.js:161:26) at render (../node_modules/@testing-library/react/dist/pure.js:247:10) at packages/ux-editor/src/testing/mocks.tsx:122:32 at queries (packages/ux-editor/src/components/config/FormComponentConfig.test.tsx:148:36) at Object.render (packages/ux-editor/src/components/config/FormComponentConfig.test.tsx:12:5) at flushUnexpectedConsoleCalls (../node_modules/jest-fail-on-console/index.js:40:13) at Object.<anonymous> (../node_modules/jest-fail-on-console/index.js:113:7)

Check failure on line 16 in frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.tsx

View workflow job for this annotation

GitHub Actions / Testing

EditGridForGivenViewSize › should show that default value

Expected test not to call console.error(). If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs. Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead. at option at datalist at div at disabled (libs/studio-components/src/components/StudioSlider/StudioSlider.tsx:16:3) at handleUpdateGrid (packages/ux-editor/src/components/config/editModal/EditGridForGivenViewSize.tsx:27:3) at basenameProp (../node_modules/react-router/lib/components.tsx:383:13) at basename (../node_modules/react-router-dom/index.tsx:718:3) at Provider (../node_modules/react-redux/lib/components/Provider.js:19:3) at children (packages/shared/src/providers/PreviewConnectionContext.tsx:11:52) at QueryClientProvider (../node_modules/@tanstack/react-query/src/QueryClientProvider.tsx:30:3) at ErrorBoundary (../node_modules/react-error-boundary/dist/react-error-boundary.cjs.js:16:5) at children (packages/shared/src/contexts/ServicesContext.tsx:85:3) at console.captureMessage [as error] (../node_modules/jest-fail-on-console/index.js:58:25) at printWarning (../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (../node_modules/react-dom/cjs/react-dom.development.js:60:7) at validateProperty$1 (../node_modules/react-dom/cjs/react-dom.development.js:3767:9) at warnUnknownProperties (../node_modules/react-dom/cjs/react-dom.development.js:3803:21) at validateProperties$2 (../node_modules/react-dom/cjs/react-dom.development.js:3827:3) at validatePropertiesInDevelopment (../node_modules/react-dom/cjs/react-dom.development.js:9541:5) at setInitialProperties (../node_modules/react-dom/cjs/react-dom.development.js:9830:5) at finalizeInitialChildren (../node_modules/react-dom/cjs/react-dom.development.js:10950:3) at completeWork (../node_modules/react-dom/cjs/react-dom.development.js:22193:17) at completeUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26593:16) at performUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26568:5) at workLoopSync (../node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (../node_modules/react-dom/cjs/react-dom.development.js:26434:7) at performConcurrentWorkOnRoot (../node_modules/react-dom/cjs/react-dom.development.js:25738:74) at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24) at act (../node_modules/react/cjs/react.development.js:2582:11) at ../node_modules/@testing-library/react/dist/act-compat.js:46:25 at renderRoot (../node_modules/@testing-library/react/dist/pure.js:161:26) at render (../node_modules/@testing-library/react/dist/pure.js:247:10) at packages/ux-editor/src/testing/mocks.tsx:122:32 at render (packages/ux-editor/src/components/config/editModal/EditGridForGivenViewSize.test.tsx:23:29) at Object.<anonymous> (packages/ux-editor/src/components/config/editModal/EditGridForGivenViewSize.test.tsx:34:5) at flushUnexpectedConsoleCalls (../node_modules/jest-fail-on-console/index.js:40:13) at Object.<anonymous> (../node_modules/jest-fail-on-console/index.js:113:7)

Check failure on line 16 in frontend/libs/studio-components/src/components/StudioSlider/StudioSlider.tsx

View workflow job for this annotation

GitHub Actions / Testing

StudioSlider › should render slider with value 12 and not disabled by default

Expected test not to call console.error(). If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs. Warning: Received `false` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead. at input at div at disabled (libs/studio-components/src/components/StudioSlider/StudioSlider.tsx:16:3) at console.captureMessage [as error] (../node_modules/jest-fail-on-console/index.js:58:25) at printWarning (../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (../node_modules/react-dom/cjs/react-dom.development.js:60:7) at validateProperty$1 (../node_modules/react-dom/cjs/react-dom.development.js:3767:9) at warnUnknownProperties (../node_modules/react-dom/cjs/react-dom.development.js:3803:21) at validateProperties$2 (../node_modules/react-dom/cjs/react-dom.development.js:3827:3) at validatePropertiesInDevelopment (../node_modules/react-dom/cjs/react-dom.development.js:9541:5) at setInitialProperties (../node_modules/react-dom/cjs/react-dom.development.js:9830:5) at finalizeInitialChildren (../node_modules/react-dom/cjs/react-dom.development.js:10950:3) at completeWork (../node_modules/react-dom/cjs/react-dom.development.js:22193:17) at completeUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26593:16) at performUnitOfWork (../node_modules/react-dom/cjs/react-dom.development.js:26568:5) at workLoopSync (../node_modules/react-dom/cjs/react-dom.development.js:26466:5) at renderRootSync (../node_modules/react-dom/cjs/react-dom.development.js:26434:7) at performConcurrentWorkOnRoot (../node_modules/react-dom/cjs/react-dom.development.js:25738:74) at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24) at act (../node_modules/react/cjs/react.development.js:2582:11) at ../node_modules/@testing-library/react/dist/act-compat.js:46:25 at renderRoot (../node_modules/@testing-library/react/dist/pure.js:161:26) at render (../node_modules/@testing-library/react/dist/pure.js:247:10) at Object.<anonymous> (libs/studio-components/src/components/StudioSlider/StudioSlider.test.tsx:7:11) at flushUnexpectedConsoleCalls (../node_modules/jest-fail-on-console/index.js:40:13) at Object.<anonymous> (../node_modules/jest-fail-on-console/index.js:113:7)
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={cn(classes.sliderContainer, disabled && classes.disabled)}>
<input
className={disabled && classes.disabled}
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}
></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 b0fb6ac

Please sign in to comment.