From db1f4d107fa688e9d85f8253591146f6a75eae9c Mon Sep 17 00:00:00 2001 From: Chris Svenningsen Date: Fri, 21 Aug 2020 10:27:37 -0700 Subject: [PATCH] Migrate Emojify to Storybook --- ts/components/conversation/Emojify.md | 60 ------------ .../conversation/Emojify.stories.tsx | 95 +++++++++++++++++++ ts/components/conversation/Emojify.tsx | 2 +- 3 files changed, 96 insertions(+), 61 deletions(-) delete mode 100644 ts/components/conversation/Emojify.md create mode 100644 ts/components/conversation/Emojify.stories.tsx diff --git a/ts/components/conversation/Emojify.md b/ts/components/conversation/Emojify.md deleted file mode 100644 index 17e2c9e1a..000000000 --- a/ts/components/conversation/Emojify.md +++ /dev/null @@ -1,60 +0,0 @@ -### All emoji - -```jsx - -``` - -### With skin color modifier - -```jsx - -``` - -### With `sizeClass` provided - -```jsx - -``` - -```jsx - -``` - -```jsx - -``` - -```jsx - -``` - -```jsx - -``` - -### Starting and ending with emoji - -```jsx - -``` - -### With emoji in the middle - -```jsx - -``` - -### No emoji - -```jsx - -``` - -### Providing custom non-link render function - -```jsx -const renderNonEmoji = ({ text, key }) => ( - This is my custom content -); -; -``` diff --git a/ts/components/conversation/Emojify.stories.tsx b/ts/components/conversation/Emojify.stories.tsx new file mode 100644 index 000000000..93bc84124 --- /dev/null +++ b/ts/components/conversation/Emojify.stories.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; + +import { text } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; + +import { Emojify, Props } from './Emojify'; + +const story = storiesOf('Components/Conversation/Emojify', module); + +const createProps = (overrideProps: Partial = {}): Props => ({ + renderNonEmoji: overrideProps.renderNonEmoji, + sizeClass: overrideProps.sizeClass, + text: text('text', overrideProps.text || ''), +}); + +story.add('Emoji Only', () => { + const props = createProps({ + text: '😹😹😹', + }); + + return ; +}); + +story.add('Skin Color Modifier', () => { + const props = createProps({ + text: 'πŸ‘πŸΎ', + }); + + return ; +}); + +story.add('Jumbo', () => { + const props = createProps({ + text: '😹😹😹', + sizeClass: 'jumbo', + }); + + return ; +}); + +story.add('Large', () => { + const props = createProps({ + text: '😹😹😹', + sizeClass: 'large', + }); + + return ; +}); + +story.add('Medium', () => { + const props = createProps({ + text: '😹😹😹', + sizeClass: 'medium', + }); + + return ; +}); + +story.add('Small', () => { + const props = createProps({ + text: '😹😹😹', + sizeClass: 'small', + }); + + return ; +}); + +story.add('Plus Text', () => { + const props = createProps({ + text: 'this 😹 cat 😹 is 😹 so 😹 joyful', + }); + + return ; +}); + +story.add('All Text, No Emoji', () => { + const props = createProps({ + text: 'this cat is so joyful', + }); + + return ; +}); + +story.add('Custom Text Render', () => { + const props = createProps({ + text: 'this 😹 cat 😹 is 😹 so 😹 joyful', + renderNonEmoji: ({ text: theText, key }) => ( +
+ {theText} +
+ ), + }); + + return ; +}); diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx index 39021608a..b7ff86df3 100644 --- a/ts/components/conversation/Emojify.tsx +++ b/ts/components/conversation/Emojify.tsx @@ -35,7 +35,7 @@ function getImageTag({ ); } -interface Props { +export interface Props { text: string; /** A class name to be added to the generated emoji images */ sizeClass?: SizeClassType;