Migrate Caption Editor to Storybook

This commit is contained in:
Chris Svenningsen 2020-08-17 11:55:07 -07:00 committed by Josh Perez
parent 24dfaa4da4
commit c8e8291da4
3 changed files with 92 additions and 77 deletions

View file

@ -0,0 +1,91 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { CaptionEditor, Props } from './CaptionEditor';
import { AUDIO_MP3, IMAGE_JPEG, VIDEO_MP4 } from '../types/MIME';
// @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 stories = storiesOf('Components/Caption Editor', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachment: {
contentType: IMAGE_JPEG,
fileName: '',
url: '',
...overrideProps.attachment,
},
caption: text('caption', overrideProps.caption || ''),
close: action('close'),
i18n,
onSave: action('onSave'),
url: text('url', overrideProps.url || ''),
});
stories.add('Image', () => {
const props = createProps({
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
});
return <CaptionEditor {...props} />;
});
stories.add('Image with Caption', () => {
const props = createProps({
caption:
'This is the user-provided caption. We show it overlaid on the image. If it is really long, then it wraps, but it does not get too close to the edges of the image.',
url: '/fixtures/tina-rolf-269345-unsplash.jpg',
});
return <CaptionEditor {...props} />;
});
stories.add('Video', () => {
const props = createProps({
attachment: {
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
},
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
});
return <CaptionEditor {...props} />;
});
stories.add('Video with Caption', () => {
const props = createProps({
attachment: {
contentType: VIDEO_MP4,
fileName: 'pixabay-Soap-Bubble-7141.mp4',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
},
caption:
'This is the user-provided caption. We show it overlaid on the image. If it is really long, then it wraps, but it does not get too close to the edges of the image.',
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
});
return <CaptionEditor {...props} />;
});
stories.add('Unsupported Attachment Type', () => {
const props = createProps({
attachment: {
contentType: AUDIO_MP3,
fileName: 'incompetech-com-Agnus-Dei-X.mp3',
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
},
url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
});
return <CaptionEditor {...props} />;
});