docs: simplify docs structure - add demo for onlyHandleDraggable

.storybook/main.ts

@@ -23,15 +23,17 @@ module.exports = {
     '@storybook/addon-controls',
     '@storybook/addon-actions/register',
   ],
+  babel: (config) => ({
+    ...config,
+    presets: [
+      ...config.presets,
+      require.resolve('@emotion/babel-preset-css-prop'),
+    ],
+  }),
   /** Files to load as stories */
   stories: ['../docs/**/*.story.@(mdx|tsx)'],
   /** Customise webpack config */
   webpackFinal: async (config) => {
-    // Enable `css` prop
-    config.module.rules[0].use[0].options.presets.push(
-      '@emotion/babel-preset-css-prop'
-    );
-
     // @HACK Horrific hack to shoehorn `remark-codesandbox` plugin into presets
     //       by checking if they have a `remarkPlugins` option.
     config.module.rules = config.module.rules.map((rule) => {

.storybook/preview.ts

@@ -5,6 +5,9 @@ import { themes } from '@storybook/theming';
 import '@storybook/addon-console';
 
 addParameters({
+  controls: {
+    hideNoControlsWarning: true,
+  },
   docs: {
     container: DocsContainer,
     page: DocsPage,

docs/01-Api.story.mdx → docs/01-api.story.mdx

@@ -1,4 +1,4 @@
-import { Description, Meta, Props } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Meta } from '@storybook/addon-docs/blocks';
 
 import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer } from 'react-compare-slider';
 
@@ -21,29 +21,29 @@ import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage,
 
 ### Props
 
-<Props of={ReactCompareSlider} />
+<ArgsTable of={ReactCompareSlider} />
 
 
-## `ReactCompareSliderHandle` 
+## `ReactCompareSliderHandle`
 
 <Description of={ReactCompareSliderHandle} />
 
 [🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/master/src/react-compare-slider.tsx#L62)
 
 ### Props
 
-<Props of={ReactCompareSliderHandle} />
+<ArgsTable of={ReactCompareSliderHandle} />
 
 
-## `ReactCompareSliderImage` 
+## `ReactCompareSliderImage`
 
 <Description of={ReactCompareSliderImage} />
 
 [🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/master/src/react-compare-slider-image.tsx)
 
 ### Props
 
-<Props of={ReactCompareSliderImage} />
+<ArgsTable of={ReactCompareSliderImage} />
 
 
 ## `styleFitContainer`
@@ -53,9 +53,9 @@ import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage,
 [🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/master/src/utils.ts#L37)
 
 The `styleFitContainer` utility makes any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)
-fill its parent while maintaining the correct aspect ratio. 
+fill its parent while maintaining the correct aspect ratio.
 
-It returns a React `style` object and accepts a CSS object as an argument and 
+It returns a React `style` object and accepts a CSS object as an argument and
 defaults to `object-fit` to `cover`.
 
 ### Example
@@ -66,13 +66,13 @@ Fill a full width/height container:
 import { styleFitContainer } from 'react-compare-slider';
 
 <div style={{ width: '100vw', height: '100vh' }}>
-    <video 
-        style={{ 
+    <video
+        style={{
             ...styleFitContainer({
-                objectFit: 'contain', 
+                objectFit: 'contain',
                 objectPosition: 'center',
-            }) 
-        }} 
+            })
+        }}
     />
 </div>
 ```

docs/02-Images.story.mdx → docs/02-images.story.mdx

@@ -1,33 +1,33 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
-import { Default } from './demos/01-Images.story';
+import { Images } from './demos/00-props.story';
 
-<Meta title="Docs/Images" component={ReactCompareSlider} argTypes={Default.args} />
+<Meta title="Docs/Images" component={ReactCompareSlider} argTypes={Images.args} />
 
 # Using Images
 
 - [ReactCompareSliderImage](<#reactcomparesliderimage>)
 - [Live Examples](<#live-examples>)
 
-<Preview>
-    <Story id="demos-images--default" />
-</Preview>
+<Canvas>
+    <Story id="demos--images" />
+</Canvas>
 
-<Props of={ReactCompareSlider} />
+<ArgsTable of={ReactCompareSlider} />
 
-Images can be rendered using the `ReactCompareSliderImage` component and/or 
+Images can be rendered using the `ReactCompareSliderImage` component and/or
 by using a custom image component, e.g. `picture` or `img`.
 
 <br />
 
 ## `ReactCompareSliderImage`
 
-`ReactCompareSliderImage` is a standalone image component that detects whether 
-the browser supports the `object-fit` CSS property, if not it will apply a 
-background image to achieve the same effect. It will set `background-size`, 
-`background-position` and `background-image` if they have not already been 
+`ReactCompareSliderImage` is a standalone image component that detects whether
+the browser supports the `object-fit` CSS property, if not it will apply a
+background image to achieve the same effect. It will set `background-size`,
+`background-position` and `background-image` if they have not already been
 defined in a passed `style` prop.
 
 `ReactCompareSliderImage` uses the `styleFitContainer` utility to size and fit media.
@@ -36,7 +36,7 @@ defined in a passed `style` prop.
 
 ### `ReactCompareSliderImage` Props
 
-<Props of={ReactCompareSliderImage} />
+<ArgsTable of={ReactCompareSliderImage} />
 
 ### Usage
 
@@ -58,4 +58,4 @@ import { ReactCompareSliderImage } from 'react-compare-slider';
 
 ## Live Examples
 
-Checkout the [Images demos](?path=/story/demos-images--default) to experiment with images.
+Checkout the [Images demos](?path=/story/demos--images) to experiment with images.

docs/05-only-handle-draggable.story.mdx

@@ -0,0 +1,33 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+import { Images } from './demos/00-props.story';
+import { BlurredArrows } from './demos/02-handles.story';
+
+<Meta title="Docs/Only Handle Draggable" component={ReactCompareSlider} argTypes={Images.args} />
+
+# Using `onlyHandleDraggable`
+
+- [Live Examples](<#live-examples>)
+
+The `onlyHandleDraggable` prop moves click, touch and drag from the main slider
+container to the handle.
+
+`onlyHandleDraggable` is useful for full width/height sliders on touch devices
+where the user needs to touch the slider container to scroll past it
+without the slider container capturing the event, changing its position.
+`onlyHandleDraggable` is also useful when comparing interactive components which
+have their own pointer events, such as embedded maps.
+
+<Canvas>
+    <Story id="demos--bounds-padding" />
+</Canvas>
+
+<ArgsTable of={ReactCompareSlider} />
+
+<br />
+
+## Live Examples
+
+Checkout the [Bounds padding demos](?path=/story/demos-images--bounds-padding) to experiment with images.

docs/05-bounds-padding.story.mdx → docs/06-bounds-padding.story.mdx

@@ -1,17 +1,17 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
-import { Default } from './demos/01-Images.story';
+import { Images } from './demos/00-props.story';
 
-<Meta title="Docs/Bounds Padding" component={ReactCompareSlider} argTypes={Default.args} />
+<Meta title="Docs/Bounds Padding" component={ReactCompareSlider} argTypes={Images.args} />
 
 # Using `BoundsPadding`
 
 - [Live Examples](<#live-examples>)
 
 The `boundsPadding` prop allows you to limit the slideable area on the Y-axis
-in `portrait` mode or on the X-axis in the default landscape mode. The default 
+in `portrait` mode or on the X-axis in the default landscape mode. The default
 `boundsPadding` value is `0`, negative values are treated the same as `0` and
 the value **MUST** be supplied as a number in pixels.
 
@@ -24,14 +24,14 @@ within range of pixels of the left or right of the slider specified by the `boun
 applied to the top/bottom or right/left depending on the orientation of the slider.
 
 ```JSX
-boundsPadding={100}
+boundsPadding={80}
 ```
 
-<Preview>
-    <Story id="demos-images--bounds-padding" />
-</Preview>
+<Canvas>
+    <Story id="demos--bounds-padding" />
+</Canvas>
 
-<Props of={ReactCompareSlider} />
+<ArgsTable of={ReactCompareSlider} />
 
 <br />
 

docs/demos/01-Images.story.tsx → docs/demos/00-props.story.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-compare-slider';
 
 export default {
-  title: 'Demos/Images',
+  title: 'Demos',
   component: ReactCompareSlider,
   argTypes: {
     handle: { control: { type: 'function' } },
@@ -17,7 +17,7 @@ export default {
   },
 };
 
-export const Default = (args) => (
+export const Images = (args) => (
   <ReactCompareSlider
     {...args}
     itemOne={