storybook updates

Author: jscottsmith

stories/Parallax/0_ParallaxRotation.stories.tsx

@@ -6,7 +6,6 @@ import styles from './Parallax.module.scss';
 
 const Template = (args) => {
   const props = Object.entries(args).reduce((acc: any, entry: any) => {
-    console.log(entry);
     acc[entry[0]] = entry[1].split(',');
     return acc;
   }, {} as any);
@@ -66,11 +65,11 @@ WithRotationXYZ.args = {
 
 export const WithTranslateYAndRotation = Template.bind({});
 WithTranslateYAndRotation.args = {
-  y: '-100,100',
+  translateY: '-100,100',
   rotate: '0deg,360deg',
 };
 
 export default {
-  title: '<Parallax> Rotation',
+  title: 'Components / <Parallax> / Rotate Props',
   component: WithRotation,
 };

stories/Parallax/1_ParallaxVertical.stories.tsx

@@ -5,26 +5,6 @@ import { Container } from '../Container';
 import { ScrollContainer } from '../ScrollContainer';
 import styles from './Parallax.module.scss';
 
-export const WithRotation = (args) => {
-  const a = args.rotate1.split(',');
-  const b = args.rotate2.split(',');
-  return (
-    <Container scrollAxis="vertical" className={styles.elements}>
-      <Parallax rotate={a} className={styles.parallax}>
-        <Element name="1" />
-      </Parallax>
-      <Parallax rotate={b} className={styles.parallax}>
-        <Element name="2" />
-      </Parallax>
-    </Container>
-  );
-};
-
-WithRotation.args = {
-  rotate1: '0deg,360deg',
-  rotate2: '0deg,-360deg',
-};
-
 export const WithYOffsets = (args) => {
   const a = args.y1.split(',');
   const b = args.y2.split(',');
@@ -218,6 +198,6 @@ export const InsideADiv = () => {
 };
 
 export default {
-  title: '<Parallax> Vertical Scroll',
+  title: 'Components / <Parallax> / Vertical Scroll',
   component: WithYOffsets,
 };

stories/Parallax/2_ParallaxHorizontal.stories.tsx

@@ -172,6 +172,6 @@ export const InsideADiv = () => {
 };
 
 export default {
-  title: '<Parallax> Horizontal Scroll',
+  title: 'Components / <Parallax> / Horizontal Scrolling',
   component: WithYOffsets,
 };

stories/Parallax/3_ParallaxImages.stories.tsx

@@ -40,6 +40,6 @@ export const WithVaryingYOffsets = () => {
 };
 
 export default {
-  title: '<Parallax> Images',
+  title: 'Components / <Parallax> / Images',
   component: WithVaryingYOffsets,
 };

stories/Parallax/4_ParallaxScale.stories.tsx

@@ -40,6 +40,6 @@ WithScaleZ.args = {
 };
 
 export default {
-  title: '<Parallax> Scale',
+  title: 'Components / <Parallax> / Scale Props',
   component: WithScale,
 };

stories/Parallax/5_ParallaxOpacity.stories.tsx

@@ -22,6 +22,6 @@ WithOpacity.args = {
 };
 
 export default {
-  title: '<Parallax> Opacity',
+  title: 'Components / <Parallax> / Opacity Prop',
   component: WithOpacity,
 };

stories/Parallax/6_ParallaxSpeed.stories.tsx

@@ -21,12 +21,17 @@ const Template = (args) => {
   );
 };
 
-export const WithSpeed = Template.bind({});
-WithSpeed.args = {
-  speed: -1,
+export const WithSlowerSpeed = Template.bind({});
+WithSlowerSpeed.args = {
+  speed: -10,
+};
+
+export const WithFasterSpeed = Template.bind({});
+WithFasterSpeed.args = {
+  speed: 10,
 };
 
 export default {
-  title: '<Parallax> Speed',
-  component: WithSpeed,
+  title: 'Components / <Parallax> / Speed Prop',
+  component: WithSlowerSpeed,
 };

stories/Parallax/7_ParallaxEasing.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { ValidEasingPresets } from 'parallax-controller';
 import { Parallax, ParallaxProvider } from '../../src';
 import { Element } from '../Element/Element';
 import styles from './Parallax.module.scss';
 
-const options = [
+const options: ValidEasingPresets[] = [
+  // @ts-expect-error
   '',
   'ease',
   'easeIn',
@@ -150,6 +152,6 @@ const Template2 = () => {
 export const WithAllEasing = Template2.bind({});
 
 export default {
-  title: '<Parallax> Easing',
+  title: 'Components / <Parallax> / Easing Prop',
   component: WithEasing,
 };

stories/ParallaxBanner/4_ParallaxBanner.stories.tsx

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { ParallaxBanner, ParallaxProvider } from '../../src';
 import styles from './ParallaxBanner.module.scss';
 
-storiesOf('<ParallaxBanner>', module)
+storiesOf('Components / <ParallaxBanner>', module)
   .add('with a single background', () => (
     <ParallaxProvider>
       <div className="vertical">