From 57f418d71961b565c73aba7a9a9c65b5c87b2383 Mon Sep 17 00:00:00 2001
From: Dhenain Ambroise <ambroise.dhenain@gmail.com>
Date: Thu, 14 Jan 2021 12:31:00 +0100
Subject: [PATCH] Improve animations controls

---
 src/stories/nrn/animation/Animated3Dots.stories.tsx   | 11 +++++++++--
 .../nrn/animation/AnimatedTextBubble.stories.tsx      | 11 +++++++++--
 src/stories/nrn/animation/BubbleTimer.stories.tsx     | 11 +++++++----
 src/stories/nrn/animation/Loader.stories.tsx          |  6 +++++-
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/stories/nrn/animation/Animated3Dots.stories.tsx b/src/stories/nrn/animation/Animated3Dots.stories.tsx
index 8276d5ead..f9256819f 100644
--- 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
index 0c8871b9d..1d314243a 100644
--- 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
index ee07fe4ea..4a3bf1168 100644
--- 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
index 106ef4690..ede3981d7 100644
--- 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 />;