feat(FilePlaceholder): added file placeholder component

src/components/FilePlaceholder/FilePlaceholder.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FilePlaceholder } from '../FilePlaceholder';
+import readme from './README.md';
+import { text } from '@storybook/addon-knobs';
+
+export default { title: 'Components/FilePlaceholder', component: FilePlaceholder, parameters: { readme } };
+
+export const Basic = () => <FilePlaceholder extension={text('extension', 'pdf')} />;

src/components/FilePlaceholder/FilePlaceholder.test.tsx

@@ -0,0 +1,29 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { spy } from 'sinon';
+import { FilePlaceholder } from '../FilePlaceholder';
+
+describe('FilePlaceholder component', () => {
+  it('renders its contents', () => {
+    const filePlaceholder = shallow(<FilePlaceholder />);
+    expect(filePlaceholder.find('.ui__filePlaceholder')).toHaveLength(1);
+  });
+
+  it('snapshot renders default filePlaceholder', () => {
+    const filePlaceholder = shallow(<FilePlaceholder />);
+    expect(filePlaceholder).toMatchSnapshot();
+  });
+
+  it('clicking filePlaceholder triggers onClick prop', () => {
+    const onClick = spy();
+    shallow(<FilePlaceholder onClick={onClick} />).simulate('click');
+    expect(onClick.callCount).toBe(1);
+  });
+
+  it('clicking disabled filePlaceholder does not trigger onClick prop', () => {
+    const onClick = spy();
+    // full DOM mount so `filePlaceholder` element will use disabled prop
+    mount(<FilePlaceholder onClick={onClick} disabled />).simulate('click');
+    expect(onClick.callCount).toBe(0);
+  });
+});

src/components/FilePlaceholder/FilePlaceholder.tsx

@@ -0,0 +1,33 @@
+import classnames from 'classnames';
+import React, { FC } from 'react';
+
+export interface FilePlaceholderProps {
+  /**
+   * Classname of the placeholder wrapper.
+   */
+  className?: string;
+  /**
+   * The file extension to display on the placeholder.
+   */
+  extension?: string;
+}
+
+export const FilePlaceholder: FC<FilePlaceholderProps> = ({ className, extension }) => {
+  const filePlaceholderClass = classnames('ui__base ui__filePlaceholder', className);
+
+  const formattedExtension = extension && `.${extension.replace(/^\./, '')}`;
+
+  return (
+    <div className={filePlaceholderClass}>
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--thumbnail" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-sm" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-xs" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-df" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-lgx" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-lg" />
+      <div className="ui__filePlaceholder__block ui__filePlaceholder__block--line-df" />
+
+      {formattedExtension ? <div className="ui__filePlaceholder__extension">{formattedExtension}</div> : undefined}
+    </div>
+  );
+};

src/components/FilePlaceholder/README.md

@@ -0,0 +1,3 @@
+Placeholder for files. You can include an extension to add it to the bottom of
+the placeholder. These should be used when you are unable to generate thumbnails
+for a given file, for example an unsupported file type.

src/components/FilePlaceholder/_FilePlaceholder.scss

@@ -0,0 +1,57 @@
+.ui__filePlaceholder {
+  background-color: white;
+  padding: 10px;
+  height: 164px;
+  width: 128px;
+  position: relative;
+
+  &__block {
+    background-color: #ccc;
+
+    &--thumbnail {
+      width: 40px;
+      height: 40px;
+      float: left;
+    }
+
+    &--line-sm {
+      margin-left: 50px;
+      margin-top: 10px;
+      height: 6px;
+    }
+
+    &--line-xs {
+      margin-left: 50px;
+      margin-top: 10px;
+      width: 40px;
+      height: 6px;
+    }
+
+    &--line-df {
+      margin-top: 20px;
+      width: 90px;
+      height: 6px;
+    }
+
+    &--line-lg {
+      margin-top: 10px;
+      width: 90px;
+      height: 6px;
+    }
+
+    &--line-lgx {
+      margin-top: 10px;
+      height: 6px;
+    }
+  }
+
+  &__extension {
+    position: absolute;
+    color: #ccc;
+    text-align: center;
+    font-size: $font-size-large;
+    right: 10px;
+    left: 10px;
+    bottom: 10px;
+  }
+}

src/components/FilePlaceholder/index.ts

@@ -0,0 +1 @@
+export * from './FilePlaceholder';

src/components/FileSkeleton/FileSkeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 export interface FileSkeletonProps {
   /**
-   * Classname of the skeleton wrapper
+   * Classname of the skeleton wrapper.
    */
   className?: string;
 }

src/components/index.ts

@@ -13,6 +13,7 @@ export * from './Draggable';
 export * from './EditableText';
 export * from './FileOrganizer';
 export * from './FilePicker';
+export * from './FilePlaceholder';
 export * from './FileSkeleton';
 export * from './FocusTrap';
 export * from './Icon';

src/index.scss

@@ -30,6 +30,7 @@
 @import './components/EditableText/EditableText';
 @import './components/FileOrganizer/FileOrganizer';
 @import './components/FilePicker/FilePicker';
+@import './components/FilePlaceholder/FilePlaceholder';
 @import './components/FileSkeleton/FileSkeleton';
 @import './components/FocusTrap/FocusTrap';
 @import './components/Icon/Icon';