Merge 4be5c52 into d9a372d

packages/semantic-ui/src/components/FileInputButton.js

@@ -3,11 +3,20 @@
 import React, { useRef } from 'react';
 import { Button } from 'semantic-ui-react';
 
+/**
+ * multiple?: boolean,
+ * onSelection: (files: Array<File>) => void
+ */
 type Props = {
   multiple?: boolean,
   onSelection: (files: Array<File>) => void
 };
 
+/**
+ * This component is used to allow a user to upload one or more files
+ * from their file system. This component also accepts
+ * all of the props of the Semantic UI <code>Button</code> component.
+ */
 const FileInputButton = ({ onSelection, multiple, ...buttonProps }: Props) => {
   const fileInputRef = useRef();
 

packages/storybook/src/semantic-ui/FileInputButton.stories.js

@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { Button } from 'semantic-ui-react';
+import FileInputButton from '../../../semantic-ui/src/components/FileInputButton';
+
+export default {
+  title: 'Components/Semantic UI/FileInputButton',
+  component: FileInputButton,
+  decorators: [withKnobs]
+};
+export const Default = () => {
+  /**
+   *
+   * @type {}
+   */
+  const onSelection = useCallback((item) => {
+    // Question: how does one get the file name from the item?
+    // Question: once the file is selected, how to we start the upload?
+  });
+
+  return (
+    <FileInputButton
+      content='Select a file to upload'
+      icon='times'
+      multiple={false}
+      onSelection={onSelection}
+    />
+  );
+};