Improve animations controls

UnlyEd · Jan 14, 2021 · 57f418d · 57f418d · github-actions · Jan 14, 2021
1 parent f216066
commit 57f418d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/src/stories/nrn/animation/Animated3Dots.stories.tsx b/src/stories/nrn/animation/Animated3Dots.stories.tsx
@@ -8,7 +8,14 @@ import Animated3Dots, { Props } from '../../../components/svg/Animated3Dots';
 export default {
   title: 'Next Right Now/Animation/Animated3Dots',
   component: Animated3Dots,
-  argTypes: {},
+  argTypes: {
+    fill: {
+      control: 'color',
+    },
+  },
 } as Meta;
 
-export const DefaultExample: Story<Props> = () => <Animated3Dots fill={'blue'} />;
+export const DefaultExample: Story<Props> = (props) => <Animated3Dots {...props} />;
+DefaultExample.args = {
+  fill: 'blue',
+};
diff --git a/src/stories/nrn/animation/AnimatedTextBubble.stories.tsx b/src/stories/nrn/animation/AnimatedTextBubble.stories.tsx
@@ -8,7 +8,14 @@ import AnimatedTextBubble, { Props } from '../../../components/svg/AnimatedTextB
 export default {
   title: 'Next Right Now/Animation/AnimatedTextBubble',
   component: AnimatedTextBubble,
-  argTypes: {},
+  argTypes: {
+    fill: {
+      control: 'color',
+    },
+  },
 } as Meta;
 
-export const DefaultExample: Story<Props> = () => <AnimatedTextBubble fill={'blue'} />;
+export const DefaultExample: Story<Props> = (props) => <AnimatedTextBubble {...props} />;
+DefaultExample.args = {
+  fill: 'blue',
+};
diff --git a/src/stories/nrn/animation/BubbleTimer.stories.tsx b/src/stories/nrn/animation/BubbleTimer.stories.tsx
@@ -11,15 +11,18 @@ export default {
   argTypes: {},
 } as Meta;
 
-export const DefaultExample: Story<Props> = () => {
-  const duration = 2000;
+export const DefaultExample: Story<Props> = (props) => {
+  const { duration } = props;
 
   return (
     <BubbleTimer
-      fill={'blue'}
-      duration={duration}
+      {...props}
     >
       <p>Content displayed after {duration}ms has passed.</p>
     </BubbleTimer>
   );
 };
+DefaultExample.args = {
+  fill: 'blue',
+  duration: 2000,
+};
diff --git a/src/stories/nrn/animation/Loader.stories.tsx b/src/stories/nrn/animation/Loader.stories.tsx
@@ -8,7 +8,11 @@ import Loader, { Props } from '../../../components/animations/Loader';
 export default {
   title: 'Next Right Now/Animation/Loader',
   component: Loader,
-  argTypes: {},
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+    },
+  },
 } as Meta;
 
 export const DefaultExample: Story<Props> = () => <Loader />;