Feat: mdx thumbs (#10)

* File Thumb mdx file

* tests pass

* Image Thumb MDX

* attachment required + test patch

src/ChatFeed/FileThumb/.test.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Default as Thing } from './stories';
+
+import { FileThumb as Thing } from '.';
+
+import { fileAttachment } from '../../util/mocks';
 
 describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
+    ReactDOM.render(<Thing attachment={fileAttachment} />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 });

src/ChatFeed/FileThumb/index.tsx

@@ -7,8 +7,8 @@ import { styles } from './styles';
 
 export const FileThumb: React.FC<Props> = ({
   attachment,
+  children,
   isLoading = false,
-  children = 'Loading...',
   style = {},
   loadingStyle = {},
 }) => {
@@ -25,7 +25,7 @@ export const FileThumb: React.FC<Props> = ({
   if (isLoading || !attachment) {
     return (
       <div style={{ ...styles.loadingContainer, ...loadingStyle }}>
-        {children}
+        {children ? children : 'Loading...'}
       </div>
     );
   }
@@ -40,7 +40,7 @@ export const FileThumb: React.FC<Props> = ({
       onMouseLeave={() => setHovered(false)}
       onClick={() => window.open(attachment.file)}
     >
-      {getFileName(attachment.file)}
+      {children ? children : getFileName(attachment.file)}
     </div>
   );
 };

src/ChatFeed/FileThumb/props.tsx

@@ -5,7 +5,7 @@ import { Properties } from 'csstype';
 import { AttachmentProps } from '../../util/interfaces';
 
 export interface Props {
-  attachment?: AttachmentProps;
+  attachment: AttachmentProps;
   isLoading?: boolean;
   children?: ReactNode;
   style?: Properties;

src/ChatFeed/FileThumb/stories.mdx

@@ -0,0 +1,105 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
+
+import { FileOutlined } from '@ant-design/icons';
+
+import { FileThumb } from '.';
+import { Props } from './props';
+
+import { fileAttachment } from '../../util/mocks';
+
+<Meta title="ChatFeed/FileThumb" component={FileThumb} />
+
+export const Template = ({
+  children,
+  isLoading,
+  attachment,
+  style,
+  loadingStyle,
+}) => (
+  <FileThumb
+    attachment={attachment}
+    isLoading={isLoading}
+    style={style}
+    loadingStyle={loadingStyle}
+  >
+    {children}
+  </FileThumb>
+);
+
+# File Thumb
+
+File Thumbs are used to display a file, which isn't an image, and was sent by a user.
+
+A File Thumb will display the file's name, and will open the file in another tab once clicked.
+
+The component requires an `attachment` prop to display the correct file info.
+
+The component takes optional `isLoading`, `children`, `style`, and `loadingStyle` props.
+
+## Default
+
+<Story name="Default" args={{ attachment: fileAttachment }}>
+  {Template.bind({})}
+</Story>
+
+<ArgsTable story="Default" />
+
+## Is Loading
+
+You can set the `isLoading` prop to `true` and the message will appear to be loading/processing the file.
+
+This is used when a message is sending and has not delivered yet.
+
+<Canvas>
+  <Story
+    name="Is Loading"
+    args={{ attachment: fileAttachment, isLoading: true }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Children
+
+You can put child props within the `<FileThumb>` component. This lets you customize what is in a file thumb's body.
+
+<Canvas>
+  <Story
+    name="Children"
+    args={{
+      attachment: fileAttachment,
+      children: (
+        <div>
+          <FileOutlined /> Custom Text and Icon
+        </div>
+      ),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Custom Style
+
+You can customize the CSS style of a file component too.
+
+<Canvas>
+  <Story
+    name="Custom Style"
+    args={{
+      attachment: fileAttachment,
+      style: {
+        backgroundColor: 'rgb(74, 81, 98)',
+        border: 'none',
+        color: 'white',
+      },
+      loadingStyle: {
+        backgroundColor: 'rgb(74, 81, 98)',
+        border: 'none',
+        color: 'white',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/ChatFeed/FileThumb/styles.tsx

@@ -16,7 +16,7 @@ export const styles = {
   loadingContainer: {
     fontFamily: 'Avenir',
     color: 'white',
-    padding: '14px',
+    padding: '13px',
     display: 'inline-block',
     borderRadius: '14px',
     marginRight: '2px',

src/ChatFeed/ImageThumb/.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Default as Thing } from './stories';
+import { ImageThumb as Thing } from '.';
+import { imageAttachment } from '../../util/mocks';
 
 describe('Thing', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
+    ReactDOM.render(<Thing attachment={imageAttachment} />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 });

src/ChatFeed/ImageThumb/index.tsx

@@ -5,8 +5,8 @@ import { styles } from './styles';
 
 export const ImageThumb: React.FC<Props> = ({
   attachment,
+  children,
   isLoading = false,
-  children = 'Loading...',
   style = {},
   loadingStyle = {},
 }) => {
@@ -20,7 +20,7 @@ export const ImageThumb: React.FC<Props> = ({
   if (isLoading || !attachment) {
     return (
       <div style={{ ...styles.loadingContainer, ...loadingStyle }}>
-        {children}
+        {children ? children : 'Loading...'}
       </div>
     );
   }

src/ChatFeed/ImageThumb/props.tsx

@@ -5,7 +5,7 @@ import { Properties } from 'csstype';
 import { AttachmentProps } from '../../util/interfaces';
 
 export interface Props {
-  attachment?: AttachmentProps;
+  attachment: AttachmentProps;
   isLoading?: boolean;
   children?: ReactNode;
   style?: Properties;

src/ChatFeed/ImageThumb/stories.mdx

@@ -0,0 +1,105 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
+
+import { FileOutlined } from '@ant-design/icons';
+
+import { ImageThumb } from '.';
+import { Props } from './props';
+
+import { imageAttachment } from '../../util/mocks';
+
+<Meta title="ChatFeed/ImageThumb" component={ImageThumb} />
+
+export const Template = ({
+  children,
+  isLoading,
+  attachment,
+  style,
+  loadingStyle,
+}) => (
+  <ImageThumb
+    attachment={attachment}
+    isLoading={isLoading}
+    style={style}
+    loadingStyle={loadingStyle}
+  >
+    {children}
+  </ImageThumb>
+);
+
+# File Thumb
+
+Image Thumbs are used to display an Image, and was sent by a user.
+
+An Image Thumb will display a cropped version of the image, and will expand in another tab once clicked.
+
+The component requires an `attachment` prop to display the correct image / info.
+
+The component takes optional `isLoading`, `children`, `style`, and `loadingStyle` props.
+
+## Default
+
+<Story name="Default" args={{ attachment: imageAttachment }}>
+  {Template.bind({})}
+</Story>
+
+<ArgsTable story="Default" />
+
+## Is Loading
+
+You can set the `isLoading` prop to `true` and the message will appear to be loading/processing the file.
+
+This is used when a message is sending and has not delivered yet.
+
+<Canvas>
+  <Story
+    name="Is Loading"
+    args={{ attachment: imageAttachment, isLoading: true }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Children
+
+You can put child props within the `<ImageThumb>` component. This lets you customize what is in an image thumb's body.
+
+<Canvas>
+  <Story
+    name="Children"
+    args={{
+      attachment: imageAttachment,
+      isLoading: true,
+      children: (
+        <div style={{ color: 'black', padding: '12px' }}>
+          <FileOutlined /> Custom Text
+        </div>
+      ),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Custom Style
+
+You can customize the CSS style of an image thumb component too.
+
+<Canvas>
+  <Story
+    name="Custom Style"
+    args={{
+      attachment: imageAttachment,
+      style: {
+        backgroundColor: 'rgb(74, 81, 98)',
+        border: 'none',
+      },
+      loadingStyle: {
+        backgroundColor: 'rgb(74, 81, 98)',
+        border: 'none',
+        color: 'white',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>