add file-to-array-buffer to storybook

ui/app/components/file-to-array-buffer.js

@@ -1,30 +1,32 @@
 import Component from '@ember/component';
 import filesize from 'filesize';
 
+/**
+ * @module FileToArrayBuffer
+ * `FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once
+ * loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback.
+ *
+ * @example
+ * ```js
+ *   <FileToArrayBuffer @onChange={{action (mut file)}} />
+ * ```
+ * @param onChange=null {Function} - The function to call when the file read is complete. This function
+ * recieves the file as a JS ArrayBuffer
+ * @param [label=null {String}] - Text to use as the label for the file input If null, a default will be rendered
+ * @param [type=null {String} - Text to use as help under the file input
+ *
+ */
 export default Component.extend({
   classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
   onChange: () => {},
+  label: null,
+  fileHelpText: null,
+
   file: null,
   fileName: null,
   fileSize: null,
   fileLastModified: null,
 
-  /*
-   * @public
-   * @param String
-   * Text to use as the label for the file input
-   * If null, a default will be rendered
-   */
-  label: null,
-
-  /*
-   * @public
-   * @param String
-   * Text to use as help under the file input
-   * If null, a default will be rendered
-   */
-  fileHelpText: null,
-
   readFile(file) {
     const reader = new FileReader();
     reader.onload = () => this.send('onChange', reader.result, file);

ui/stories/file-to-array-buffer.md

@@ -0,0 +1,26 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/file-to-array-buffer.js. To make changes, first edit that file and run "yarn gen-story-md file-to-array-buffer" to re-generate the content.-->
+
+## FileToArrayBuffer
+`FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once
+loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback.
+
+**Params**
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| onChange | <code>function</code> | <code></code> | The function to call when the file read is complete. This function recieves the file as a JS ArrayBuffer |
+| [label] | <code>String</code> | <code></code> | Text to use as the label for the file input If null, a default will be rendered |
+| type | <code>String</code> | <code></code> | Text to use as help under the file input |
+
+**Example**
+
+```js
+  <FileToArrayBuffer @onChange={{action (mut file)}} />
+```
+
+**See**
+
+- [Uses of FileToArrayBuffer](https://github.com/hashicorp/vault/search?l=Handlebars&q=FileToArrayBuffer+OR+file-to-array-buffer)
+- [FileToArrayBuffer Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/file-to-array-buffer.js)
+
+---

ui/stories/file-to-array-buffer.stories.js

@@ -0,0 +1,24 @@
+
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import notes from './file-to-array-buffer.md';
+
+
+storiesOf('FileToArrayBuffer/', module)
+  .addParameters({ options: { showPanel: true } })
+  .add(`FileToArrayBuffer`, () => ({
+    template: hbs`
+      <h5 class="title is-5">File To Array Buffer</h5>
+      <FileToArrayBuffer @onChange={{this.onChange}} />
+      {{#if this.fileName}}
+        {{this.fileName}} as bytes: {{this.fileBytes}}
+      {{/if}}
+    `,
+    context: {
+      onChange(file, name) {
+        console.log(`${name} contents as an ArrayBuffer:`, file);
+      },
+    },
+  }),
+  {notes}
+);