@yoursurprise/slider 2.2.0-beta.2 → 2.2.0-beta.4

package/README.md

@@ -1,11 +1,11 @@
 # React slider
 
 This package contains a basic modern slider. The purpose of this slider is to provide a simple React component
-which can be controlled in a userfriendly way on mobile, tablet and desktop. 
+which can be controlled in a userfriendly way on mobile, tablet and desktop.
 
 Demo page: https://yoursurprisecom.github.io/slider/
 
-This slider has the following features: 
+This slider has the following features:
 
 - Free scroll on mobile with native CSS scroll snapping
 - Drag to scroll on devices with a mouse
@@ -13,6 +13,7 @@ This slider has the following features:
 - Support for multiple variable width slides
 
 Todos (help appreciated):
+
 - ~~Add a demo page~~
 - Add more configuration
 - Add end-to-end tests
@@ -22,11 +23,12 @@ Todos (help appreciated):
 - Improve accessibility
 - Reduce amount of required tooling
 
-All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) will be supported, as of right now, only the latest versions of browsers are supported.
+All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+will be supported, as of right now, only the latest versions of browsers are supported.
 
 ## Installation
 
-### npm 
+### npm
 
 `npm install @yoursurprise/slider --save`
 
@@ -43,7 +45,7 @@ import "@yoursurprise/slider/dist/index.css";
 ### Implement the Slider
 
 ```javascript
-import { Slider } from '@yoursurprise/slider';
+import {Slider} from '@yoursurprise/slider';
 import '@yoursurprise/slider/dist/index.css';
 
 export default function YourComponent() {
@@ -60,7 +62,39 @@ export default function YourComponent() {
 
 ### Configuration
 
-| Option                | Type      | Required | Default | Description                         |   
-|-----------------------|-----------|----------|---------|-------------------------------------|
-| hideNavigationButtons | `boolean` | `false`  | `false` | Always hides the navigation buttons |
-| initialSlideIndex     | `number`  | `false`  | `0`     | Open the Slider at a specific index |
+| Option                | Type       | Required | Default     | Description                                             |   
+|-----------------------|------------|----------|-------------|---------------------------------------------------------|
+| hideNavigationButtons | `boolean`  | `false`  | `false`     | Always hides the navigation buttons                     |
+| initialSlideIndex     | `number`   | `false`  | `0`         | Open the Slider at a specific index                     |
+| onSlide               | `function` | `false`  | `undefined` | A callback function that is called when the user slides |
+
+### API
+
+| API method                     | Type       | Returns  | Description                                  |   
+|--------------------------------|------------|----------|----------------------------------------------|
+| getFirstFullyVisibleSlideIndex | `function` | `number` | Retrieve the first fully visible slide index |
+| getLastFullyVisibleSlideIndex  | `function` | `number` | Retrieve the last fully visible slide index  |
+| scrollToSlide                  | `function` | `void`   | Scroll the slider to a specific slide        |
+
+#### Example on how to access the slider API:
+
+```javascript
+export default function YourComponent() {
+    const sliderApi = useRef();
+
+    useEffect(() => {
+        if (sliderApi.current) {
+            sliderApi.current.getFirstFullyVisibleSlideIndex();
+        }
+    }, [sliderApi.current]);
+
+    return (
+        <Slider ref={sliderApi}>
+            <div>1</div>
+            <div>2</div>
+            <div>3</div>
+            <div>4</div>
+        </Slider>
+    );
+}
+```

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-import { Slider, SliderTypes } from './Slider';
-export { Slider, SliderTypes };
+import { Slider } from './Slider';
+import type { SliderTypes } from './Slider';
+export { Slider };
+export type { SliderTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoursurprise/slider",
-  "version": "2.2.0-beta.2",
+  "version": "2.2.0-beta.4",
   "description": "Basic React slider using modern Javascript and CSS",
   "module": "dist/module.js",
   "main": "dist/index.js",

package/src/Slider.test.tsx

@@ -157,7 +157,7 @@ describe('UpsellSlider', () => {
             await userEvent.click(screen.getByTestId('1'));
 
             await waitFor(() => {
-                expect(clickSpy).toHaveBeenCalled();
+                expect(clickSpy).toHaveBeenCalledTimes(1);
             });
         });
     });
@@ -367,4 +367,52 @@ describe('UpsellSlider', () => {
             expect(ref.current!.getLastFullyVisibleSlideIndex()).toBe(2);
         });
     });
+
+    describe('scrollToSlide', () => {
+        it('scrolls to the next slide', async () => {
+            const ref = React.createRef<API>();
+            render(<Slider ref={ref}>
+                <span key={1}/>
+                <span key={2}/>
+                <span key={3}/>
+                <span key={4}/>
+            </Slider>);
+
+            const slides = screen.getAllByRole('listitem');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientWidth', { configurable: true, value: 500 });
+                Object.defineProperty(child, 'offsetLeft', { value: 500 * (i + 1) });
+            });
+
+            act(() => {
+                if (ref.current !== null) {
+                    ref.current.scrollToSlide(2, 'smooth');
+                }
+            });
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledWith({
+                    behavior: 'smooth',
+                    left: 1500,
+                    top: 0,
+                });
+            });
+        });
+    });
+
+    describe('initialSlideIndex', () => {
+        it('Opens the slider with the initialSlide', async () => {
+            render(<Slider initialSlideIndex={2}>
+                <span key={ 1 } data-testid="child-1"/>
+                <span key={ 2 } data-testid="child-2"/>
+                <span key={ 3 } data-testid="child-3"/>
+                <span key={ 4 } data-testid="child-4"/>
+            </Slider>);
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
 });

package/src/index.ts

@@ -1,3 +1,5 @@
-import { Slider, SliderTypes } from './Slider';
+import { Slider } from './Slider';
+import type { SliderTypes } from './Slider';
 
-export { Slider, SliderTypes };
+export { Slider };
+export type { SliderTypes };

package/dist/Examples/OnSlideExample.d.ts

@@ -1,4 +0,0 @@
-import type { FC, PropsWithChildren, ComponentType } from 'react';
-import { Slider } from '../Slider';
-declare const OnSlideExample: FC<typeof Slider extends ComponentType<infer T> ? PropsWithChildren<T> : never>;
-export default OnSlideExample;

package/src/Examples/OnSlideExample.tsx

@@ -1,40 +0,0 @@
-import type { FC, PropsWithChildren, ComponentType } from 'react';
-import { useRef, useState } from 'react';
-import { Slider, SliderTypes } from '../Slider';
-
-const OnSlideExample: FC<typeof Slider extends ComponentType<infer T> ? PropsWithChildren<T> : never> = (sliderProps) => {
-    const sliderApi = useRef<SliderTypes.API>(null);
-    const [firstVisibleSlideIndex, setFirstVisibleSlideIndex] = useState<number>(0);
-    const [lastVisibleSlideIndex, setLastVisibleSlideIndex] = useState<number>(0);
-
-    const slides: JSX.Element[] = [
-        <div key="slide 1" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(50, 50, 50)' }}>Slide 1</div>,
-        <div key="slide 2" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(75, 75, 75)' }}>Slide 2</div>,
-        <div key="slide 3" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(100, 100, 100)' }}>Slide 3</div>,
-        <div key="slide 4" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(125, 125, 125)' }}>Slide 4</div>,
-        <div key="slide 5" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(150, 150, 150)' }}>Slide 5</div>,
-        <div key="slide 6" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(175, 175, 175)' }}>Slide 6</div>,
-        <div key="slide 7" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(200, 200, 200)' }}>Slide 7</div>,
-        <div key="slide 8" className="demo-slide demo-slide--fixed" style={{ backgroundColor: 'rgb(225, 225, 225)' }}>Slide 8</div>,
-    ];
-
-    const onSlide = () => {
-        if (sliderApi.current) {
-            setFirstVisibleSlideIndex(sliderApi.current.getFirstFullyVisibleSlideIndex());
-            setLastVisibleSlideIndex(sliderApi.current.getLastFullyVisibleSlideIndex());
-        }
-    };
-
-    return (
-        <>
-            <h1>Slides visibility</h1>
-            <div>First fully visible slide: {firstVisibleSlideIndex + 1}</div>
-            <div>Last fully visible slide: {lastVisibleSlideIndex + 1}</div>
-            <Slider {...sliderProps} onSlide={onSlide} ref={sliderApi}>
-                {slides}
-            </Slider>
-        </>
-    );
-};
-
-export default OnSlideExample;