add doc-link, empty-state, info-table-row, loading-layout, message-er…

…ror, popup-menu, ttl-picker, and vault-logo-spinner to storybook

ui/lib/core/addon/components/doc-link.js

@@ -2,6 +2,19 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 import hbs from 'htmlbars-inline-precompile';
 
+/**
+ * @module DocLink
+ * `DocLink` components are used to render anchor links to relevant Vault documentation.
+ *
+ * @example
+ * ```js
+ <DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
+ * ```
+ *
+ * @param path="/"{String} - The path to documentation on vaultproject.io that the component should link to.
+ *
+ */
+
 export default Component.extend({
  tagName: 'a',
  classNames: ['doc-link'],

ui/lib/core/addon/components/empty-state.js

@@ -1,6 +1,21 @@
 import Component from '@ember/component';
 import layout from '../templates/components/empty-state';
 
+/**
+ * @module EmptyState
+ * `EmptyState` components are used to render a helpful message and any necessary content when a user
+ * encounters a state that would usually be blank.
+ *
+ * @example
+ * ```js
+ * <EmptyState @title="You don't have an secrets yet" @message="An explanation of why you don't have any secrets but also you maybe want to create one." />
+ * ```
+ *
+ * @param title=null{String} - A short label for the empty state
+ * @param message=null{String} - A description of why a user might be seeing the empty state and possibly instructions for actions they may take.
+ *
+ */
+
 export default Component.extend({
  layout,
  tagName: '',

ui/lib/core/addon/components/info-table-row.js

@@ -4,30 +4,29 @@ import { or } from '@ember/object/computed';
 import Component from '@ember/component';
 import layout from '../templates/components/info-table-row';
 
+/**
+ * @module InfoTableRow
+ * `InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
+ * that the value breaks under the label on smaller viewports.
+ *
+ * @example
+ * ```js
+ * <InfoTableRow @value={{5}} @label="TTL" />
+ * ```
+ *
+ * @param value=null {any} - The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false.
+ * @param label=null {string} - The display name for the value.
+ * @param alwaysRender=false {Boolean} - Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render.
+ *
+ */
 export default Component.extend({
  layout,
  'data-test-component': 'info-table-row',
  classNames: ['info-table-row'],
  isVisible: or('alwaysRender', 'value'),
 
- /*
- * @param boolean
- * indicates if the component content should be always be rendered.
- * when false, the value of `value` will be used to determine if the component should render
- */
  alwaysRender: false,
-
- /*
- * @param string
- * the display name for the value
- *
- */
  label: null,
-
- /*
- *
- * the value of the data passed in - by default the content of the component will only show if there is a value
- */
  value: null,
 
  valueIsBoolean: computed('value', function() {

ui/lib/core/addon/components/layout-loading.js

@@ -1,6 +1,16 @@
 import Component from '@ember/component';
 import layout from '../templates/components/layout-loading';
 
+/**
+ * @module LayoutLoading
+ * `LayoutLoading` displays the `VaultLogoSpinner` component in a centered full-page layout.
+ *
+ * @example
+ * ```js
+ * <LayoutLoading />
+ * ```
+ */
+
 export default Component.extend({
  layout,
  tagName: '',

ui/lib/core/addon/components/message-error.js

@@ -2,12 +2,24 @@ import { computed } from '@ember/object';
 import Component from '@ember/component';
 import layout from '../templates/components/message-error';
 
+/**
+ * @module MessageError
+ * `MessageError` extracts an error from a model or a passed error and displays it using the `AlertBanner` component.
+ *
+ * @example
+ * ```js
+ * <MessageError @model={{model}} />
+ * ```
+ *
+ * @param model=null{DS.Model} - An Ember data model that will be used to bind error statest to the internal
+ * `errors` property.
+ * @param errors=null{Array} - An array of error strings to show.
+ * @param errorMessage=null{String} - An Error string to display.
+ */
 export default Component.extend({
  layout,
  model: null,
- errors: computed(function() {
- return [];
- }),
+ errors: null,
  errorMessage: null,
 
  displayErrors: computed(

ui/lib/core/addon/components/popup-menu.js

@@ -1,7 +1,21 @@
 import Component from '@ember/component';
 import layout from '../templates/components/popup-menu';
 
+/**
+ * @module PopupMenu
+ * `PopupMenu` displays a button that when pressed will toggle open a menu that is yielded in the content
+ * block.
+ *
+ * @example
+ * ```js
+ * <PopupMenu><nav class="menu"> <ul class="menu-list"> <li class="action"> <button type="button">A menu!</button> </li> </ul> </nav></PopupMenu>
+ * ```
+ *
+ * @param contentClass=''{String} A class that will be applied to the yielded content of the popup.
+ */
+
 export default Component.extend({
  layout,
+ contentClass: '',
  tagName: 'span',
 });

ui/lib/core/addon/components/ttl-picker.js

@@ -7,14 +7,35 @@ import layout from '../templates/components/ttl-picker';
 
 const ERROR_MESSAGE = 'TTLs must be specified in whole number increments, please enter a whole number.';
 
+/**
+ * @module TtlPicker
+ * `TtlPicker` components are used to expand and collapse content with a toggle.
+ *
+ * @example
+ * ```js
+ <TtlPicker @labelText="Lease" @initialValue={{lease}} @onChange={{action (mut lease)}} />
+ * ```
+ *
+ * @param labelClass="" {String} - A CSS class to add to the label.
+ * @param labelText="TTL" {String} - The text content of the label associated with the widget.
+ * @param initialValue=null {Number} - The starting value of the TTL;
+ * @param setDefaultValue=true {Boolean} - If true, the component will trigger onChange on the initial
+ * render, causing a value to be set.
+ * @param onChange=Function.prototype{Function} - The function to call when the value of the ttl changes.
+ * @param outputSeconds=false{Boolean} - If true, the component will trigger onChange with a value
+ * converted to seconds instead of a Golang duration string.
+ */
 export default Component.extend({
  layout,
  'data-test-component': 'ttl-picker',
  classNames: 'field',
- setDefaultValue: true,
+
  onChange: () => {},
+ setDefaultValue: true,
  labelText: 'TTL',
  labelClass: '',
+ ouputSeconds: false,
+
  time: 30,
  unit: 'm',
  initialValue: null,
@@ -28,8 +49,6 @@ export default Component.extend({
  ];
  }),
 
- ouputSeconds: false,
-
  convertToSeconds(time, unit) {
  const toSeconds = {
  s: 1,

ui/lib/core/addon/components/vault-logo-spinner.js

@@ -1,6 +1,16 @@
 import Component from '@ember/component';
 import layout from '../templates/components/vault-logo-spinner';
 
+/**
+ * @module VaultLogoSpinner
+ * `VaultLogoSpinner` displays an animated Vault logo to use for loading screens.
+ *
+ * @example
+ * ```js
+ * <VaultLogoSpinner />
+ * ```
+ */
+
 export default Component.extend({
  layout,
  tagName: '',

ui/lib/core/app/helpers/message-types.js

@@ -1 +1 @@
-export { default, messageTypes } from 'core/helpers/message-types';
+export { default, messageTypes, MESSAGE_TYPES } from 'core/helpers/message-types';

ui/stories/alert-banner.stories.js

@@ -2,7 +2,8 @@
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
 import notes from './alert-banner.md';
-import { MESSAGE_TYPES } from '../app/helpers/message-types.js';
+import { MESSAGE_TYPES } from '../lib/core/addon/helpers/message-types.js';
+
 
 storiesOf('Alerts/AlertBanner/', module)
  .addParameters({ options: { showPanel: false } })

ui/stories/alert-inline.stories.js

@@ -2,7 +2,7 @@
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
 import notes from './alert-inline.md';
-import { MESSAGE_TYPES } from '../app/helpers/message-types.js';
+import { MESSAGE_TYPES } from '../lib/core/addon/helpers/message-types.js';
 
 storiesOf('Alerts/AlertInline/', module)
  .addParameters({ options: { showPanel: false } })

ui/stories/alert-popup.stories.js

@@ -2,7 +2,7 @@
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
 import notes from './alert-popup.md';
-import { MESSAGE_TYPES } from '../app/helpers/message-types.js';
+import { MESSAGE_TYPES } from '../lib/core/addon/helpers/message-types.js';
 
 storiesOf('Alerts/AlertPopup/', module)
  .addParameters({ options: { showPanel: false } })

ui/stories/doc-link.md

@@ -0,0 +1,22 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/doc-link.js. To make changes, first edit that file and run "yarn gen-story-md doc-link" to re-generate the content.-->
+
+## DocLink
+`DocLink` components are used to render anchor links to relevant Vault documentation.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| path | <code>String</code> | <code>&quot;/&quot;</code> | The path to documentation on vaultproject.io that the component should link to. |
+
+**Example**
+
+```js
+ <DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
+```
+
+**See**
+
+- [Uses of DocLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=DocLink)
+- [DocLink Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/doc-link.js)
+
+---

ui/stories/doc-link.stories.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import notes from './doc-link.md';
+
+
+storiesOf('DocLink/', module)
+ .addParameters({ options: { showPanel: true } })
+ .add(`DocLink`, () => ({
+ template: hbs`
+ <h5 class="title is-5">Doc Link</h5>
+ <DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
+ `
+ }),
+ {notes}
+);

ui/stories/empty-state.md

@@ -0,0 +1,24 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/empty-state.js. To make changes, first edit that file and run "yarn gen-story-md empty-state" to re-generate the content.-->
+
+## EmptyState
+`EmptyState` components are used to render a helpful message and any necessary content when a user
+encounters a state that would usually be blank.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | <code>String</code> | <code></code> | A short label for the empty state |
+| message | <code>String</code> | <code></code> | A description of why a user might be seeing the empty state and possibly instructions for actions they may take. |
+
+**Example**
+
+```js
+<EmptyState @title="You don't have an secrets yet" @message="An explanation of why you don't have any secrets but also you maybe want to create one." />
+```
+
+**See**
+
+- [Uses of EmptyState](https://github.com/hashicorp/vault/search?l=Handlebars&q=EmptyState)
+- [EmptyState Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/empty-state.js)
+
+---

ui/stories/empty-state.stories.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import notes from './empty-state.md';
+
+storiesOf('EmptyState/', module)
+ .addParameters({ options: { showPanel: true } })
+ .addDecorator(withKnobs({escapeHTML: false}))
+ .add(`EmptyState`, () => ({
+ template: hbs`
+ <h5 class="title is-5">Empty State</h5>
+ <EmptyState @title={{title}} @message={{message}} />
+ `,
+ context: {
+ title: text('Title', 'You don\'t have an secrets yet'),
+ message: text('Message', 'An explanation of why you don\'t have any secrets but also you maybe want to create one.')
+ },
+ }),
+ {notes}
+ )
+ .add(`EmptyState with content block`, () => ({
+ template: hbs`
+ <h5 class="title is-5">Empty State</h5>
+ <EmptyState @title={{title}} @message={{message}}>
+ <DocLink @path="/docs/secrets/kv/kv-v2.html">Learn about KV v2</DocLink>
+ </EmptyState>
+ `,
+ context: {
+ title: text('Title', 'You don\'t have an secrets yet'),
+ message: text('Message', 'An explanation of why you don\'t have any secrets but also you maybe want to create one.')
+ },
+ }),
+ {notes}
+ );

ui/stories/info-table-row.md

@@ -0,0 +1,25 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/info-table-row.js. To make changes, first edit that file and run "yarn gen-story-md info-table-row" to re-generate the content.-->
+
+## InfoTableRow
+`InfoTableRow` displays a label and a value in a table-row style manner. The component is responsive so
+that the value breaks under the label on smaller viewports.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | <code>any</code> | <code></code> | The the data to be displayed - by default the content of the component will only show if there is a value. Also note that special handling is given to boolean values - they will render `Yes` for true and `No` for false. |
+| label | <code>string</code> | <code>null</code> | The display name for the value. |
+| alwaysRender | <code>Boolean</code> | <code>[false</code> | Indicates if the component content should be always be rendered. When false, the value of `value` will be used to determine if the component should render. |
+
+**Example**
+
+```js
+<InfoTableRow @value={{5}} @label="TTL" />
+```
+
+**See**
+
+- [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow)
+- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/info-table-row.js)
+
+---