From b3a54870b8d4d2765baffd710eaf420868dde32e Mon Sep 17 00:00:00 2001
From: Sidney Keese <me@sidke.com>
Date: Wed, 26 Aug 2020 14:09:30 -0700
Subject: [PATCH] Migrate ScrollDownButton to Storybook

Co-authored-by: Chris Svenningsen <chris@carbonfive.com>
---
 .../conversation/ScrollDownButton.md          | 25 ------------
 .../conversation/ScrollDownButton.stories.tsx | 38 +++++++++++++++++++
 .../conversation/ScrollDownButton.tsx         |  2 +-
 3 files changed, 39 insertions(+), 26 deletions(-)
 delete mode 100644 ts/components/conversation/ScrollDownButton.md
 create mode 100644 ts/components/conversation/ScrollDownButton.stories.tsx

diff --git a/ts/components/conversation/ScrollDownButton.md b/ts/components/conversation/ScrollDownButton.md
deleted file mode 100644
index 2b0b66ba72..0000000000
--- a/ts/components/conversation/ScrollDownButton.md
+++ /dev/null
@@ -1,25 +0,0 @@
-### No new messages
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <ScrollDownButton
-    withNewMessages={false}
-    conversationId="id-1"
-    scrollDown={id => console.log('scrollDown', id)}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>
-```
-
-### With new messages
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <ScrollDownButton
-    withNewMessages={true}
-    conversationId="id-2"
-    scrollDown={id => console.log('scrollDown', id)}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>
-```
diff --git a/ts/components/conversation/ScrollDownButton.stories.tsx b/ts/components/conversation/ScrollDownButton.stories.tsx
new file mode 100644
index 0000000000..44e79440bf
--- /dev/null
+++ b/ts/components/conversation/ScrollDownButton.stories.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { Props, ScrollDownButton } from './ScrollDownButton';
+
+const i18n = setupI18n('en', enMessages);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  withNewMessages: boolean(
+    'withNewMessages',
+    overrideProps.withNewMessages || false
+  ),
+  scrollDown: action('scrollDown'),
+  conversationId: 'fake-conversation-id',
+});
+
+const stories = storiesOf('Components/Conversation/ScrollDownButton', module);
+
+stories.add('No New Messages', () => {
+  const props = createProps();
+
+  return <ScrollDownButton {...props} />;
+});
+
+stories.add('New Messages', () => {
+  const props = createProps({ withNewMessages: true });
+
+  return <ScrollDownButton {...props} />;
+});
diff --git a/ts/components/conversation/ScrollDownButton.tsx b/ts/components/conversation/ScrollDownButton.tsx
index 09a6fdeef9..7c4753cec6 100644
--- a/ts/components/conversation/ScrollDownButton.tsx
+++ b/ts/components/conversation/ScrollDownButton.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { LocalizerType } from '../../types/Util';
 
-type Props = {
+export type Props = {
   withNewMessages: boolean;
   conversationId: string;