Migrate AddNewLines to Storybook

This commit is contained in:
Chris Svenningsen 2020-08-20 11:23:09 -07:00 committed by Josh Perez
parent 25ab4df9cc
commit 2cd187abaf
3 changed files with 58 additions and 36 deletions

View file

@ -1,35 +0,0 @@
### All newlines
```jsx
<AddNewLines text="\n\n\n" />
```
### Starting and ending with newlines
```jsx
<AddNewLines text="\nin between\n" />
```
### With newlines in the middle
```jsx
<AddNewLines text="Before \n\n after" />
```
### No newlines
```jsx
<AddNewLines text="This is the text" />
```
### Providing custom non-newline render function
```jsx
const renderNonNewLine = ({ text, key }) => (
<span key={key}>This is my custom content!</span>
);
<AddNewLines
text="\n first \n second \n"
renderNonNewLine={renderNonNewLine}
/>;
```

View file

@ -0,0 +1,57 @@
import * as React from 'react';
import { text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { AddNewLines, Props } from './AddNewLines';
const story = storiesOf('Components/Conversation/AddNewLines', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
renderNonNewLine: overrideProps.renderNonNewLine,
text: text('text', overrideProps.text || ''),
});
story.add('All newlines', () => {
const props = createProps({
text: '\n\n\n',
});
return <AddNewLines {...props} />;
});
story.add('Starting/Ending with Newlines', () => {
const props = createProps({
text: '\nSome text\n',
});
return <AddNewLines {...props} />;
});
story.add('Newlines in the Middle', () => {
const props = createProps({
text: 'Some\ntext',
});
return <AddNewLines {...props} />;
});
story.add('No Newlines', () => {
const props = createProps({
text: 'Some text',
});
return <AddNewLines {...props} />;
});
story.add('Custom Render Function', () => {
const props = createProps({
text: 'Some text',
renderNonNewLine: ({ text: theText, key }) => (
<div key={key} style={{ color: 'aquamarine' }}>
{theText}
</div>
),
});
return <AddNewLines {...props} />;
});

View file

@ -2,7 +2,7 @@ import React from 'react';
import { RenderTextCallbackType } from '../../types/Util';
interface Props {
export interface Props {
text: string;
/** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
renderNonNewLine?: RenderTextCallbackType;