diff --git a/ts/components/conversation/Image.md b/ts/components/conversation/Image.md deleted file mode 100644 index 3dfa7803266e..000000000000 --- a/ts/components/conversation/Image.md +++ /dev/null @@ -1,468 +0,0 @@ -### Various sizes - -```jsx - - - - - - -``` - -### Various curved corners - -```jsx - - - - - - - -``` - -### With bottom overlay - -```jsx - - - - - - -``` - -### With play icon - -```jsx - - - - - - -``` - -### With dark overlay and text - -```jsx - -
- - - - -
-
-
- - - - -
- -``` - -### With caption - -```jsx - -
- - - - -
-
-
- - - - -
- -``` - -### With top-right X and soft corners - -```jsx - -
- console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> -
-
-
- console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> - console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - softCorners={true} - url={util.gifObjectUrl} - i18n={util.i18n} - /> -
- -``` - -### No border, no background - -```jsx - -
-
- console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - url={util.squareStickerObjectUrl} - i18n={util.i18n} - /> -
-
- console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - url={util.squareStickerObjectUrl} - i18n={util.i18n} - /> -
-
- console.log('onClick')} - onClickClose={attachment => console.log('onClickClose', attachment)} - url={util.squareStickerObjectUrl} - i18n={util.i18n} - /> -
-
- -``` diff --git a/ts/components/conversation/Image.stories.tsx b/ts/components/conversation/Image.stories.tsx new file mode 100644 index 000000000000..b4821f463c3f --- /dev/null +++ b/ts/components/conversation/Image.stories.tsx @@ -0,0 +1,187 @@ +import * as React from 'react'; + +import { action } from '@storybook/addon-actions'; +import { boolean, number, text } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; + +import { pngUrl } from '../../storybook/Fixtures'; +import { Image, Props } from './Image'; +import { IMAGE_PNG } 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 story = storiesOf('Components/Conversation/Image', module); + +// tslint:disable-next-line:cyclomatic-complexity +const createProps = (overrideProps: Partial = {}): Props => ({ + alt: text('alt', overrideProps.alt || ''), + attachment: overrideProps.attachment || { + contentType: IMAGE_PNG, + fileName: 'sax.png', + url: pngUrl, + }, + blurHash: text('blurHash', overrideProps.blurHash || ''), + bottomOverlay: boolean('bottomOverlay', overrideProps.bottomOverlay || false), + closeButton: boolean('closeButton', overrideProps.closeButton || false), + curveBottomLeft: boolean( + 'curveBottomLeft', + overrideProps.curveBottomLeft || false + ), + curveBottomRight: boolean( + 'curveBottomRight', + overrideProps.curveBottomRight || false + ), + curveTopLeft: boolean('curveTopLeft', overrideProps.curveTopLeft || false), + curveTopRight: boolean('curveTopRight', overrideProps.curveTopRight || false), + darkOverlay: boolean('darkOverlay', overrideProps.darkOverlay || false), + height: number('height', overrideProps.height || 100), + i18n, + noBackground: boolean('noBackground', overrideProps.noBackground || false), + noBorder: boolean('noBorder', overrideProps.noBorder || false), + onClick: action('onClick'), + onClickClose: action('onClickClose'), + onError: action('onError'), + overlayText: text('overlayText', overrideProps.overlayText || ''), + playIconOverlay: boolean( + 'playIconOverlay', + overrideProps.playIconOverlay || false + ), + smallCurveTopLeft: boolean( + 'smallCurveTopLeft', + overrideProps.smallCurveTopLeft || false + ), + softCorners: boolean('softCorners', overrideProps.softCorners || false), + tabIndex: number('tabIndex', overrideProps.tabIndex || 0), + url: text('url', overrideProps.url || pngUrl), + width: number('width', overrideProps.width || 100), +}); + +story.add('URL with Height/Width', () => { + const props = createProps(); + + return ; +}); + +story.add('Caption', () => { + const defaultProps = createProps(); + const props = { + ...defaultProps, + attachment: { + ...defaultProps.attachment, + caption: '', + }, + }; + + return ; +}); + +story.add('Play Icon', () => { + const props = createProps({ + playIconOverlay: true, + }); + + return ; +}); + +story.add('Close Button', () => { + const props = createProps({ + closeButton: true, + }); + + return ; +}); + +story.add('No Border or Background', () => { + const props = createProps({ + attachment: { + contentType: IMAGE_PNG, + fileName: 'sax.png', + url: pngUrl, + }, + noBackground: true, + noBorder: true, + url: pngUrl, + }); + + return ( +
+ +
+ ); +}); + +story.add('Pending', () => { + const props = createProps(); + props.attachment.pending = true; + + return ; +}); + +story.add('Curved Corners', () => { + const props = createProps({ + curveBottomLeft: true, + curveBottomRight: true, + curveTopLeft: true, + curveTopRight: true, + }); + + return ; +}); + +story.add('Small Curve Top Left', () => { + const props = createProps({ + smallCurveTopLeft: true, + }); + + return ; +}); + +story.add('Soft Corners', () => { + const props = createProps({ + softCorners: true, + }); + + return ; +}); + +story.add('Bottom Overlay', () => { + const props = createProps({ + bottomOverlay: true, + }); + + return ; +}); + +story.add('Full Overlay with Text', () => { + const props = createProps({ + darkOverlay: true, + overlayText: 'Honk!', + }); + + return ; +}); + +story.add('Blurhash', () => { + const defaultProps = createProps(); + const props = { + ...defaultProps, + blurHash: 'thisisafakeblurhashthatwasmadeup', + url: undefined as any, + }; + + return ; +}); +story.add('Missing Image', () => { + const defaultProps = createProps(); + const props = { + ...defaultProps, + attachment: undefined as any, + url: undefined as any, + }; + + return ; +}); diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index 147e4f804e53..d13da67e4811 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -6,7 +6,7 @@ import { Spinner } from '../Spinner'; import { LocalizerType } from '../../types/Util'; import { AttachmentType } from '../../types/Attachment'; -interface Props { +export interface Props { alt: string; attachment: AttachmentType; url: string; diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts index a070e7d4d5c3..5b7420051f64 100644 --- a/ts/types/MIME.ts +++ b/ts/types/MIME.ts @@ -6,6 +6,7 @@ export const AUDIO_AAC = 'audio/aac' as MIMEType; export const AUDIO_MP3 = 'audio/mp3' as MIMEType; export const IMAGE_GIF = 'image/gif' as MIMEType; export const IMAGE_JPEG = 'image/jpeg' as MIMEType; +export const IMAGE_PNG = 'image/png' as MIMEType; export const IMAGE_WEBP = 'image/webp' as MIMEType; export const VIDEO_MP4 = 'video/mp4' as MIMEType; export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType;