actually render the label if passed and update stories with knobs

hashicorp · Oct 11, 2019 · e9c1ed8 · e9c1ed8
1 parent b6e2187
commit e9c1ed8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/ui/app/components/file-to-array-buffer.js b/ui/app/components/file-to-array-buffer.js
@@ -12,8 +12,8 @@ import filesize from 'filesize';
  * ```
  * @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
+ * @param [label=null {String}] - Text to use as the label for the file input
+ * @param [fileHelpText=null {String} - Text to use as help under the file input
  *
  */
 export default Component.extend({

diff --git a/ui/app/templates/components/file-to-array-buffer.hbs b/ui/app/templates/components/file-to-array-buffer.hbs
@@ -1,5 +1,10 @@
 <div class="field">
   <div class="control is-expanded">
+    <label class="is-label">
+      {{#if label}}
+        {{label}}
+      {{/if}}
+    </label>
     <div class="file has-name is-fullwidth">
       <label class="file-label">
         <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input>

diff --git a/ui/stories/file-to-array-buffer.md b/ui/stories/file-to-array-buffer.md
@@ -9,8 +9,8 @@ loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` c
 | 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 |
+| [label] | <code>String</code> | <code></code> | Text to use as the label for the file input |
+| fileHelpText | <code>String</code> | <code></code> | Text to use as help under the file input |
 
 **Example**
 

diff --git a/ui/stories/file-to-array-buffer.stories.js b/ui/stories/file-to-array-buffer.stories.js
@@ -1,15 +1,20 @@
 
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
-import notes from './file-to-array-buffer.md';
+import { withKnobs, text } from '@storybook/addon-knobs';
 
+import notes from './file-to-array-buffer.md';
 
 storiesOf('FileToArrayBuffer/', module)
   .addParameters({ options: { showPanel: true } })
+  .addDecorator(
+    withKnobs()
+  )
   .add(`FileToArrayBuffer`, () => ({
     template: hbs`
       <h5 class="title is-5">File To Array Buffer</h5>
-      <FileToArrayBuffer @onChange={{this.onChange}} />
+      <FileToArrayBuffer @onChange={{this.onChange}} @label={{this.label}}
+      @fileHelpText={{this.fileHelpText}} />
       {{#if this.fileName}}
         {{this.fileName}} as bytes: {{this.fileBytes}}
       {{/if}}
@@ -18,6 +23,8 @@ storiesOf('FileToArrayBuffer/', module)
       onChange(file, name) {
         console.log(`${name} contents as an ArrayBuffer:`, file);
       },
+      label: text('Label'),
+      fileHelpText: text('Help text'),
     },
   }),
   {notes}