feat(Slider): add new slider component (#893)

* feat(slider): add new slider component * fix: undo changing alias-tokens * fix: update tokens * fix: comments * fix: comments * fix: extract code * fix: aria-label * fix: lock and snapshot
kronostechnologies · Oct 29, 2024 · 4d8cdab · 4d8cdab
1 parent 14322de
commit 4d8cdab
Show file tree

Hide file tree

Showing 15 changed files with 1,428 additions and 8 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -29,6 +29,7 @@
     "url": "https://github.com/kronostechnologies/design-elements/issues"
   },
   "dependencies": {
+    "@mui/base": "5.0.0-beta.60",
     "@tanstack/react-table": "^8.10.7",
     "date-fns": "^4.0.0",
     "feather-icons": "^4.29.0",

diff --git a/packages/react/src/components/slider/slider.test.tsx b/packages/react/src/components/slider/slider.test.tsx
@@ -0,0 +1,22 @@
+import { renderWithProviders } from '../../test-utils/renderer';
+import { Slider } from './slider';
+
+describe('Slider', () => {
+    test('matches snapshot (single value)', () => {
+        const wrapper = renderWithProviders(<Slider label="Label" max={100} min={0} value={20} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('matches snapshot (range values)', () => {
+        const wrapper = renderWithProviders(<Slider label="Label" max={100} min={0} value={[10, 30]} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('matches snapshot (with step)', () => {
+        const wrapper = renderWithProviders(<Slider label="Label" max={100} min={0} value={30} step={10} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});