docs: update doc links and label recipes

nerdyman · Oct 29, 2023 · 64d263b · 64d263b · vercel · Oct 29, 2023
1 parent ddbce01
commit 64d263b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/docs/storybook/content/01-api.stories.mdx b/docs/storybook/content/01-api.stories.mdx
@@ -18,7 +18,7 @@ import {
 
 <Description of={ReactCompareSlider} />
 
-[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/src/ReactCompareSlider.tsx)
+[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/lib/src/ReactCompareSlider.tsx)
 
 ### Props
 
@@ -29,7 +29,7 @@ import {
 
 <Description of={ReactCompareSliderHandle} />
 
-[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/src/ReactCompareSliderHandle.tsx)
+[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/lib/src/ReactCompareSliderHandle.tsx)
 
 ### Props
 
@@ -40,7 +40,7 @@ import {
 
 <Description of={ReactCompareSliderImage} />
 
-[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/src/ReactCompareSliderImage.tsx)
+[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/lib/src/ReactCompareSliderImage.tsx)
 
 ### Props
 
@@ -51,7 +51,7 @@ import {
 
 <Description of={styleFitContainer} />
 
-[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/src/utils.ts#L16)
+[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/lib/src/utils.ts#L16)
 
 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.
@@ -82,7 +82,7 @@ import { styleFitContainer } from 'react-compare-slider';
 
 <Description of={useReactCompareSliderRef} />
 
-[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/src/useReactCompareSliderRef.ts)
+[🔗 Source](https://github.com/nerdyman/react-compare-slider/blob/main/lib/src/useReactCompareSliderRef.ts)
 
 The `useReactCompareSliderRef` hook provides a ref to the root element of the slider and exposes the internal
 function used to control the position of the slider. It offers performant programmatic control of the slider.

diff --git a/docs/storybook/content/05-only-handle-draggable.stories.mdx b/docs/storybook/content/05-only-handle-draggable.stories.mdx
@@ -36,12 +36,12 @@ const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 </Canvas>
 
 <Canvas>
-  <Story id="recipes-googlemaps--google-maps" />
+  <Story id="recipes-google-maps--google-maps" />
 </Canvas>
 
 <ArgTypes of={ReactCompareSlider} />
 
 Also checkout the
-[Only Handle Draggable](/story/docs--only-handle-draggable) and
-[Detect Touch Devices](/story/recipes-detecttouchdevices--detect-touch-devices) and
-[Google Maps](/story/recipes-googlemaps--google-maps) demos.
+[Only Handle Draggable](/story/demos--only-handle-draggable) and
+[Detect Touch Devices](/story/recipes--detect-touch-devices) and
+[Google Maps](/story/recipes-google-maps--google-maps) demos.
diff --git a/docs/storybook/content/stories/01-recipes/00-index.stories.tsx b/docs/storybook/content/stories/01-recipes/00-index.stories.tsx
@@ -41,7 +41,13 @@ export const ItemLabels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
       onPointerUp={() => setLabelOpacity(1)}
       itemOne={
         <div
-          style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'start' }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            justifyContent: 'start',
+          }}
         >
           <div style={labelStyle}>Left</div>
           <ReactCompareSliderImage
@@ -52,7 +58,13 @@ export const ItemLabels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
       }
       itemTwo={
         <div
-          style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'end' }}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            justifyContent: 'end',
+          }}
         >
           <div style={labelStyle}>Right</div>
           <ReactCompareSliderImage
@@ -107,7 +119,7 @@ export const HandleLabels: StoryFn<ReactCompareSliderDetailedProps> = (props) =>
         />
       }
       handle={
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
           <ReactCompareSliderHandle />
           <div style={{ ...labelStyle, translate: '-100% 0', left: 0 }}>Label 1</div>
           <div style={{ ...labelStyle, translate: '100% 0', right: 0 }}>Label 2</div>