From f1d04f47514bef655ee5035f30b770fbacafd3cc Mon Sep 17 00:00:00 2001
From: Chris Svenningsen <chris@carbonfive.com>
Date: Thu, 20 Aug 2020 15:09:46 -0700
Subject: [PATCH] Migrate Intl to Storybook

---
 ts/components/Intl.md          | 68 ---------------------------
 ts/components/Intl.stories.tsx | 84 ++++++++++++++++++++++++++++++++++
 ts/components/Intl.tsx         |  2 +-
 3 files changed, 85 insertions(+), 69 deletions(-)
 delete mode 100644 ts/components/Intl.md
 create mode 100644 ts/components/Intl.stories.tsx

diff --git a/ts/components/Intl.md b/ts/components/Intl.md
deleted file mode 100644
index 90b852d061e..00000000000
--- a/ts/components/Intl.md
+++ /dev/null
@@ -1,68 +0,0 @@
-#### No replacements
-
-```jsx
-<Intl id="deleteAndRestart" i18n={util.i18n} />
-```
-
-#### Single string replacement
-
-```jsx
-<Intl id="leftTheGroup" i18n={util.i18n} components={['Alice']} />
-```
-
-#### Single tag replacement
-
-```jsx
-<Intl
-  id="leftTheGroup"
-  i18n={util.i18n}
-  components={[
-    <button
-      key="external-2"
-      style={{ backgroundColor: 'blue', color: 'white' }}
-    >
-      Alice
-    </button>,
-  ]}
-/>
-```
-
-#### Multiple string replacement
-
-```jsx
-<Intl
-  id="changedSinceVerified"
-  i18n={util.i18n}
-  components={{
-    name1: 'Alice',
-    name2: 'Bob',
-  }}
-/>
-```
-
-#### Multiple tag replacement
-
-```jsx
-<Intl
-  id="changedSinceVerified"
-  i18n={util.i18n}
-  components={{
-    name1: (
-      <button
-        key="external-1"
-        style={{ backgroundColor: 'blue', color: 'white' }}
-      >
-        Alice
-      </button>
-    ),
-    name2: (
-      <button
-        key="external-2"
-        style={{ backgroundColor: 'black', color: 'white' }}
-      >
-        Bob
-      </button>
-    ),
-  }}
-/>
-```
diff --git a/ts/components/Intl.stories.tsx b/ts/components/Intl.stories.tsx
new file mode 100644
index 00000000000..f3482dbbc9e
--- /dev/null
+++ b/ts/components/Intl.stories.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import { text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { Intl, Props } from './Intl';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../js/modules/i18n';
+// @ts-ignore
+import enMessages from '../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+const story = storiesOf('Components/Intl', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  id: text('id', overrideProps.id || 'deleteAndRestart'),
+  components: overrideProps.components,
+  renderText: overrideProps.renderText,
+});
+
+story.add('No Replacements', () => {
+  const props = createProps({
+    id: 'deleteAndRestart',
+  });
+
+  return <Intl {...props} />;
+});
+
+story.add('Single String Replacement', () => {
+  const props = createProps({
+    id: 'leftTheGroup',
+    components: ['Theodora'],
+  });
+
+  return <Intl {...props} />;
+});
+
+story.add('Single Tag Replacement', () => {
+  const props = createProps({
+    id: 'leftTheGroup',
+    components: [<button key="a-button">Theodora</button>],
+  });
+
+  return <Intl {...props} />;
+});
+
+story.add('Multiple String Replacement', () => {
+  const props = createProps({
+    id: 'changedRightAfterVerify',
+    components: {
+      name1: 'Fred',
+      name2: 'The Fredster',
+    },
+  });
+
+  return <Intl {...props} />;
+});
+
+story.add('Multiple Tag Replacement', () => {
+  const props = createProps({
+    id: 'changedRightAfterVerify',
+    components: {
+      name1: <b>Fred</b>,
+      name2: <b>The Fredster</b>,
+    },
+  });
+
+  return <Intl {...props} />;
+});
+
+story.add('Custom Render', () => {
+  const props = createProps({
+    id: 'deleteAndRestart',
+    renderText: ({ text: theText, key }) => (
+      <div style={{ backgroundColor: 'purple', color: 'orange' }} key={key}>
+        {theText}
+      </div>
+    ),
+  });
+
+  return <Intl {...props} />;
+});
diff --git a/ts/components/Intl.tsx b/ts/components/Intl.tsx
index 737b67b64e9..f01b5ab0f46 100644
--- a/ts/components/Intl.tsx
+++ b/ts/components/Intl.tsx
@@ -5,7 +5,7 @@ import { ReplacementValuesType } from '../types/I18N';
 
 export type FullJSXType = Array<JSX.Element | string> | JSX.Element | string;
 
-interface Props {
+export interface Props {
   /** The translation string id */
   id: string;
   i18n: LocalizerType;