Migrate AddNewLines to Storybook
This commit is contained in:
parent
25ab4df9cc
commit
2cd187abaf
3 changed files with 58 additions and 36 deletions
|
@ -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}
|
||||
/>;
|
||||
```
|
57
ts/components/conversation/AddNewLines.stories.tsx
Normal file
57
ts/components/conversation/AddNewLines.stories.tsx
Normal 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} />;
|
||||
});
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue