diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a9a67a1c7..5878017eb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -119,14 +119,12 @@ is optional but encouraged. Bug fixes are welcome in PRs but existing tests must pass and updated logic should be handled in new tests. You needn't submit an issue first to fix bugs. -Keep in mind that the UI should be consistent with other areas of Vault. Our -[README](ui/README.md) [has instructions for launching Storybook](ui/README.md#vault-storybook), -which showcases how we use components. Beyond that, the UI should be user-centered, -informative, and include edge cases and errors— including accommodations for -users who may not have permissions to view or interact with your feature. -If you are not comfortable with UI design, a Vault designer can take a look at -your work— just be aware that this might mean it will add some time to the -PR process. +Keep in mind that the UI should be consistent with other areas of Vault. +The UI should be user-centered, informative, and include edge cases and errors— +including accommodations for users who may not have permissions to view or +interact with your feature. If you are not comfortable with UI design, a Vault +designer can take a look at your work— just be aware that this might mean +it will add some time to the PR process. Finally, in your code, try to avoid logic-heavy templates (when possible, calculate values in the .js file instead of .hbs) and Ember anti-patterns. diff --git a/changelog/15074.txt b/changelog/15074.txt new file mode 100644 index 000000000..fed33ead5 --- /dev/null +++ b/changelog/15074.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Remove storybook. +``` diff --git a/ui/.eslintignore b/ui/.eslintignore index b23faf836..5bd267e8e 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -9,10 +9,7 @@ # dependencies /bower_components/ /node_modules/ -/.storybook/ /.yarn/ -/stories/ -/storybook-static/ # misc /coverage/ diff --git a/ui/.gitignore b/ui/.gitignore index a0c8bd962..0474208ee 100644 --- a/ui/.gitignore +++ b/ui/.gitignore @@ -3,7 +3,6 @@ # compiled output /dist/ /tmp/ -/storybook-static/ # dependencies /bower_components/ @@ -18,7 +17,6 @@ /npm-debug.log* /testem.log /yarn-error.log -/.storybook/preview-head.html package-lock.json # ember-try diff --git a/ui/.storybook/addons.js b/ui/.storybook/addons.js deleted file mode 100644 index 48c127319..000000000 --- a/ui/.storybook/addons.js +++ /dev/null @@ -1,4 +0,0 @@ -import '@storybook/addon-links/register'; -import '@storybook/addon-knobs/register'; -import '@storybook/addon-notes/register'; -import '@storybook/addon-viewport/register'; diff --git a/ui/.storybook/babel.config.js b/ui/.storybook/babel.config.js deleted file mode 100644 index 5f303762a..000000000 --- a/ui/.storybook/babel.config.js +++ /dev/null @@ -1,28 +0,0 @@ -/* eslint-env node */ - -module.exports = { - presets: [ - [ - '@babel/preset-env', - { - shippedProposals: true, - useBuiltIns: 'usage', - corejs: '3', - targets: ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'], - }, - ], - ], - plugins: [ - [ - '@babel/plugin-proposal-decorators', - { - legacy: true, - }, - ], - ['@babel/plugin-proposal-class-properties', { loose: true }], - '@babel/plugin-syntax-dynamic-import', - ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }], - 'babel-plugin-macros', - ['emotion', { sourceMap: true, autoLabel: true }], - ], -}; diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js deleted file mode 100644 index e43ef8cc3..000000000 --- a/ui/.storybook/config.js +++ /dev/null @@ -1,53 +0,0 @@ -import { configure, addParameters, addDecorator } from '@storybook/ember'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; -import theme from './theme.js'; -import flightIconSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'; - -function loadStories() { - // automatically import all files ending in *.stories.js - const appStories = require.context('../stories', true, /.stories.js$/); - const addonAndRepoStories = require.context('../lib', true, /.stories.js$/); - appStories.keys().forEach((filename) => appStories(filename)); - addonAndRepoStories.keys().forEach((filename) => addonAndRepoStories(filename)); -} - -addParameters({ - viewport: { viewports: INITIAL_VIEWPORTS }, - options: { theme }, -}); - -addDecorator((storyFn) => { - const { template, context } = storyFn(); - - // flight icon sprite must be inserted into dom for icon lookup via use element - document.getElementById('root').insertAdjacentHTML('afterbegin', flightIconSprite.trim()); - - // This adds styling to the Canvas tab. - const styles = { - style: { - margin: '20px', - }, - }; - - // Create a div to wrap the Canvas tab with the applied styles. - const element = document.createElement('div'); - Object.assign(element.style, styles.style); - - const innerElement = document.createElement('div'); - const wormhole = document.createElement('div'); - wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole'); - innerElement.appendChild(wormhole); - - element.appendChild(innerElement); - innerElement.appendTo = function appendTo(el) { - el.appendChild(element); - }; - - return { - template, - context, - element: innerElement, - }; -}); - -configure(loadStories, module); diff --git a/ui/.storybook/theme.js b/ui/.storybook/theme.js deleted file mode 100644 index 882b300e2..000000000 --- a/ui/.storybook/theme.js +++ /dev/null @@ -1,32 +0,0 @@ -import { create } from '@storybook/theming'; - -// Fonts and colors are pulled from _colors.scss and _bulma_variables.scss. - -const uiGray300 = '#BAC1CC'; -const uiGray900 = '#1f2124'; -const blue500 = '#1563ff'; - -export default create({ - base: 'light', - - colorPrimary: uiGray900, - colorSecondary: blue500, - - // UI - appBorderColor: uiGray300, - - // Typography - fontBase: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif', - fontCode: '"SFMono-Regular", Consolas, monospace', - - // Text colors - textColor: uiGray900, - - // Toolbar default and active colors - barTextColor: uiGray300, - barSelectedColor: 'white', - barBg: uiGray900, - - brandTitle: 'Vault UI Storybook', - brandUrl: 'https://www.vaultproject.io/', -}); diff --git a/ui/README.md b/ui/README.md index 02a81611e..6bbe9b336 100644 --- a/ui/README.md +++ b/ui/README.md @@ -12,12 +12,6 @@ - [Running Browserstack Locally](#running-browserstack-locally) - [Linting](#linting) - [Building Vault UI into a Vault Binary](#building-vault-ui-into-a-vault-binary) - - [Vault Storybook](#vault-storybook) - - [Storybook Commands at a Glance](#storybook-commands-at-a-glance) - - [Writing Stories](#writing-stories) - - [Adding a new story](#adding-a-new-story) - - [Code Generators](#code-generators-1) - - [Storybook Deployment](#storybook-deployment) - [Further Reading / Useful Links](#further-reading--useful-links) @@ -142,94 +136,6 @@ This will result in a Vault binary that has the UI built-in - though in a non-dev setup it will still need to be enabled via the `ui` config or setting `VAULT_UI` environment variable. -## Vault Storybook - -The Vault UI uses Storybook to catalog all of its components. Below are details for running and contributing to Storybook. - -### Storybook Commands at a Glance - -| Command | Description | -| ------------------------------------------------------------------------ | ---------------------------------------------------------- | -| `yarn storybook` | run storybook | -| `ember generate story [name-of-component]` | generate a new story | -| `ember generate story [name-of-component] -ir [name-of-engine-or-addon]` | generate a new story in the specified engine or addon | -| `yarn gen-story-md [name-of-component]` | update a story notes file | -| `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` | update a story notes file in the specified engine or addon | - -### Writing Stories - -Each component in `vault/ui/app/components` should have a corresponding `[component-name].stories.js` and `[component-name].md` files within `vault/ui/stories`. Components in the `core` addon located at `vault/ui/lib/core/addon/components` have corresponding stories and markdown files in `vault/ui/lib/core/stories`. - -#### Adding a new story - -1. Make sure the component is well-documented using [jsdoc](http://usejsdoc.org/tags-exports.html). This documentation should at minimum include the module name, an example of usage, and the params passed into the handlebars template. For example, here is how we document the ToggleButton Component: - -````js -/** - * @module ToggleButton - * `ToggleButton` components are used to expand and collapse content with a toggle. - * - * @example - * ```js - * - * {{#if showOptions}} - *
- *

- * I will be toggled! - *

- *
- * {{/if}} - * ``` - * - * @param {String} toggleAttr=null - The attribute upon which to toggle. - * @param {Object} attrTarget=null - The target upon which the event handler should be added. - * @param {String} [openLabel=Hide options] - The message to display when the toggle is open. //optional params are denoted by square brackets - * @param {String} [closedLabel=More options] - The message to display when the toggle is closed. - */ -```` - -Note that placing a param inside brackets (e.g. `[closedLabel=More options]` indicates it is optional and has a default value of `'More options'`.) - -2. Generate a new story with `ember generate story [name-of-component]` -3. Inside the newly generated `stories` file, add at least one example of the component. If the component should be interactive, enable the [Storybook Knobs addon](https://github.com/storybooks/storybook/tree/master/addons/knobs). -4. Generate the `notes` file for the component with `yarn gen-story-md [name-of-component] [name-of-engine-or-addon]` (e.g. `yarn gen-md alert-banner core`). This will generate markdown documentation of the component and place it at `vault/ui/stories/[name-of-component].md`. If your component is a template-only component, you will need to manually create the markdown file. The markdown file will need to be imported in your `[component-name].stories.js` file (e.g. `import notes from './[name-of-component].md'`). -5. The completed `[component-name].stories.js` file should look something like this (with knobs): - -```js -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { text, withKnobs } from '@storybook/addon-knobs'; -import notes from './stat-text.md'; - -storiesOf('MyComponent', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `MyComponent`, - () => ({ - template: hbs` -
My Component
- - `, - context: { - param: text('param', 'My parameter'), - anotherParam: boolean('anotherParam', true), - }, - }), - { notes } - ); -``` - -See the [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) for more information on writing stories. - -### Code Generators - -It is important to add all new components into Storybook and to keep the story and notes files up to date. To ease the process of creating and updating stories please use the code generators using the [commands listed above](#storybook-commands-at-a-glance). - -### Storybook Deployment - -A Vercel integration deploys a static Storybook build for any PR on the Vault GitHub repo. A preview link will show up in the PR checks. Once items are merged, the auto-deployed integration will publish that build making it available at [https://vault-storybook.vercel.app](https://vault-storybook.vercel.app). Currently the Vercel integration will cd into the `ui/` directory and then run `yarn deploy:storybook` so troubleshooting any issues can be done locally by running this same command. The logs for this build are public and will be linked from the PR checks. - ## Further Reading / Useful Links - [ember.js](http://emberjs.com/) @@ -237,7 +143,4 @@ A Vercel integration deploys a static Storybook build for any PR on the Vault Gi - Development Browser Extensions - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/) -- [Storybook for Ember Live Example](https://vault-storybook.vercel.app/?path=/story/addon-centered--button) -- [Storybook Addons](https://github.com/storybooks/storybook/tree/master/addons/) -- [Storybook Docs](https://storybook.js.org/docs/basics/introduction/) - [Browserstack Automate](https://automate.browserstack.com/) diff --git a/ui/blueprints/story/files/__path__/stories/__name__.stories.js b/ui/blueprints/story/files/__path__/stories/__name__.stories.js deleted file mode 100644 index 38af83e4c..000000000 --- a/ui/blueprints/story/files/__path__/stories/__name__.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs } from '@storybook/addon-knobs'; - -storiesOf('<%= classifiedModuleName %>', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add(`<%= classifiedModuleName %>`, () => ({ - template: hbs` -
<%= header %>
- <<%= classifiedModuleName %>/> - `, - context: {}, - })); diff --git a/ui/blueprints/story/index.js b/ui/blueprints/story/index.js deleted file mode 100644 index cd839ab96..000000000 --- a/ui/blueprints/story/index.js +++ /dev/null @@ -1,53 +0,0 @@ -'use strict'; -/* eslint-disable node/no-extraneous-require */ -/* eslint-disable ember/no-string-prototype-extensions */ -const getPathOption = require('ember-cli-get-component-path-option'); -const stringUtil = require('ember-cli-string-utils'); -const path = require('path'); - -function findAddonByName(addonOrProject, name) { - let addon = addonOrProject.addons.find((addon) => addon.name === name); - - if (addon) { - return addon; - } - - return addonOrProject.addons.find((addon) => findAddonByName(addon, name)); -} - -module.exports = { - description: 'generates a story for storybook', - - fileMapTokens: function () { - let { project } = this; - return { - __path__: function (options) { - if (options.inRepoAddon) { - let addon = findAddonByName(project, options.inRepoAddon); - return path.relative(project.root, addon.root); - } - return path.relative(project.root, project.root); - }, - __markdownname__: function (options) { - return options.dasherizedModuleName; - }, - __name__: function (options) { - return options.dasherizedModuleName; - }, - }; - }, - - locals: function (options) { - let contents = ''; - - return { - contents: contents, - path: getPathOption(options), - header: stringUtil - .dasherize(options.entity.name) - .split('-') - .map((word) => stringUtil.capitalize(word)) - .join(' '), - }; - }, -}; diff --git a/ui/jsconfig.json b/ui/jsconfig.json index 5098e682e..1151d75b1 100644 --- a/ui/jsconfig.json +++ b/ui/jsconfig.json @@ -5,9 +5,7 @@ }, "exclude": [ "node_modules", - ".storybook", ".yarn", - "public", - "storybook-static" + "public" ] } \ No newline at end of file diff --git a/ui/lib/core/addon/components/search-select.js b/ui/lib/core/addon/components/search-select.js index ae9c906d8..0139b8596 100644 --- a/ui/lib/core/addon/components/search-select.js +++ b/ui/lib/core/addon/components/search-select.js @@ -127,12 +127,6 @@ export default Component.extend({ this.set('shouldUseFallback', true); return; } - //special case for storybook - if (this.staticOptions) { - let options = this.staticOptions; - this.formatOptions(options); - return; - } throw err; } } diff --git a/ui/lib/core/stories/alert-banner.md b/ui/lib/core/stories/alert-banner.md deleted file mode 100644 index 1a978bdcb..000000000 --- a/ui/lib/core/stories/alert-banner.md +++ /dev/null @@ -1,27 +0,0 @@ - - -## AlertBanner -`AlertBanner` components are used to inform users of important messages. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| type | String | | The banner type. This comes from the message-types helper. | -| [secondIconType] | String | | If you want a second icon to appear to the right of the title. This comes from the message-types helper. | -| [progressBar] | Object | | An object containing a value and maximum for a progress bar. Will be displayed next to the message title. | -| [message] | String | | The message to display within the banner. | -| [title] | String | | A title to show above the message. If this is not provided, there are default values for each type of alert. | - -**Example** - -```js - -``` - -**See** - -- [Uses of AlertBanner](https://github.com/hashicorp/vault/search?l=Handlebars&q=AlertBanner+OR+alert-banner) -- [AlertBanner Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/alert-banner.js) - ---- diff --git a/ui/lib/core/stories/alert-banner.stories.js b/ui/lib/core/stories/alert-banner.stories.js deleted file mode 100644 index 0b236f225..000000000 --- a/ui/lib/core/stories/alert-banner.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './alert-banner.md'; -import { withKnobs, object } from '@storybook/addon-knobs'; -import { MESSAGE_TYPES } from '../addon/helpers/message-types.js'; - -storiesOf('Alerts/AlertBanner', module) - .addParameters({ options: { showPanel: false } }) - .addDecorator( - withKnobs({ - escapeHTML: false, - }) - ) - .add( - 'AlertBanner', - () => ({ - template: hbs` - {{#each types as |type|}} -
{{humanize type}}
- - {{/each}} - `, - context: { - types: Object.keys(MESSAGE_TYPES), - message: 'Here is a message.', - }, - }), - { notes } - ) - .add( - 'AlertBanner with Progress Bar', - () => ({ - template: hbs` - - `, - context: { - type: 'info', - message: 'Here is a message.', - progressBar: object('Progress Bar', { value: 75, max: 100 }), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/alert-inline.md b/ui/lib/core/stories/alert-inline.md deleted file mode 100644 index 437b56fad..000000000 --- a/ui/lib/core/stories/alert-inline.md +++ /dev/null @@ -1,25 +0,0 @@ - - -## AlertInline -`AlertInline` components are used to inform users of important messages. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| type | String | | The alert type. This comes from the message-types helper. | -| [message] | String | | The message to display within the alert. | - -**Example** - -```js - -``` - -**See** - -- [Uses of AlertInline](https://github.com/hashicorp/vault/search?l=Handlebars&q=AlertInline) -- [AlertInline Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/alert-inline.js) - ---- diff --git a/ui/lib/core/stories/alert-inline.stories.js b/ui/lib/core/stories/alert-inline.stories.js deleted file mode 100644 index 2d5e80679..000000000 --- a/ui/lib/core/stories/alert-inline.stories.js +++ /dev/null @@ -1,23 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './alert-inline.md'; -import { MESSAGE_TYPES } from '../addon/helpers/message-types.js'; - -storiesOf('Alerts/AlertInline', module) - .addParameters({ options: { showPanel: false } }) - .add( - 'AlertInline', - () => ({ - template: hbs` - {{#each types as |type|}} -
{{humanize type}}
- - {{/each}} - `, - context: { - types: Object.keys(MESSAGE_TYPES), - message: 'Here is a message.', - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/box-radio.md b/ui/lib/core/stories/box-radio.md deleted file mode 100644 index f03b1ea2b..000000000 --- a/ui/lib/core/stories/box-radio.md +++ /dev/null @@ -1,30 +0,0 @@ - - -## BoxRadio -BoxRadio components are used to display options for a radio selection. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| displayName | string | | This is the string that will show on the box radio option. | -| type | string | | type is the key that the radio input will be identified by. Please use a value without spaces. | -| glyph | string | | glyph is the name of the icon that will be used in the box | -| groupValue | string | | The key of the radio option that is currently selected for this radio group | -| groupName | string | | The name (key) of the group that this radio option belongs to | -| onRadioChange | function | | This callback will trigger when the radio option is selected (if enabled) | -| [disabled] | boolean | false | This parameter controls whether the radio option is selectable. If not, it will be grayed out and show a tooltip. | -| [tooltipMessage] | string | "default" | The message that shows in the tooltip if the radio option is disabled | - -**Example** - -```js - -``` - -**See** - -- [Uses of BoxRadio](https://github.com/hashicorp/vault/search?l=Handlebars&q=BoxRadio+OR+box-radio) -- [BoxRadio Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/box-radio.js) - ---- diff --git a/ui/lib/core/stories/box-radio.stories.js b/ui/lib/core/stories/box-radio.stories.js deleted file mode 100644 index 9f6401900..000000000 --- a/ui/lib/core/stories/box-radio.stories.js +++ /dev/null @@ -1,50 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; -import notes from './box-radio.md'; - -const GLYPHS = { - KMIP: 'kmip', - Transform: 'transform', - AWS: 'aws', - Azure: 'azure', - Cert: 'cert', - GCP: 'gcp', - Github: 'github', - JWT: 'jwt', - HashiCorp: 'hashicorp', - LDAP: 'ldap', - OKTA: 'okta', - Radius: 'radius', - Userpass: 'userpass', - Secrets: 'kv', - Consul: 'consul', -}; - -storiesOf('BoxRadio', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `BoxRadio`, - () => ({ - template: hbs` -
Box Radio
- - `, - context: { - displayName: text('displayName', 'HashiCorp'), - type: select('glyph', GLYPHS, 'hashicorp'), - disabled: boolean('disabled', false), - onRadioChange: (e) => { - console.log('Radio changed!', e); - }, - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/chevron.md b/ui/lib/core/stories/chevron.md deleted file mode 100644 index 93ad15d5f..000000000 --- a/ui/lib/core/stories/chevron.md +++ /dev/null @@ -1,23 +0,0 @@ - - -## Chevron -`Chevron` components render `Icon` with one of the `chevron-` glyphs. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| [direction] | String | "right" | the direction the chevron icon points. Accepted values are "right", "down", "left", "up". | -| [isButton] | String | false | if true, adjusts the CSS classes to push the icon closer to the right of a button. | - -**Example** - -```js - -``` - -**See** - -- [Uses of Chevron](https://github.com/hashicorp/vault/search?l=Handlebars&q=Chevron+OR+chevron) -- [Chevron Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/chevron.js) - ---- diff --git a/ui/lib/core/stories/chevron.stories.js b/ui/lib/core/stories/chevron.stories.js deleted file mode 100644 index 304cd0f12..000000000 --- a/ui/lib/core/stories/chevron.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, select } from '@storybook/addon-knobs'; -import notes from './chevron.md'; - -storiesOf('Chevron', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `Chevron`, - () => ({ - template: hbs` -
Chevron
- - `, - context: { - direction: select('Direction', ['right', 'down', 'left', 'up'], 'right'), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/confirm-action.md b/ui/lib/core/stories/confirm-action.md deleted file mode 100644 index e13c0fa69..000000000 --- a/ui/lib/core/stories/confirm-action.md +++ /dev/null @@ -1,33 +0,0 @@ - - -## ConfirmAction -`ConfirmAction` is a button followed by a pop up confirmation message and button used to prevent users from performing actions they do not intend to. - -**Properties** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| buttonClasses | String | | The CSS classes to add to the trigger button. | -| confirmTitle | String | Delete this? | The title to display upon confirming. | -| confirmMessage | String | You will not be able to recover it later. | The message to display upon confirming. | -| confirmButtonText | String | Delete | The confirm button text. | -| cancelButtonText | String | Cancel | The cancel button text. | -| onConfirmAction | Func | | The action to take upon confirming. | - -**Example** - -```js - { console.log('Action!') } }} - Delete - - ``` - - -**See** - -- [Uses of ConfirmAction](https://github.com/hashicorp/vault/search?l=Handlebars&q=ConfirmAction) -- [ConfirmAction Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/confirm-action.js) - ---- diff --git a/ui/lib/core/stories/confirm-action.stories.js b/ui/lib/core/stories/confirm-action.stories.js deleted file mode 100644 index a75eefc89..000000000 --- a/ui/lib/core/stories/confirm-action.stories.js +++ /dev/null @@ -1,44 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, text, boolean } from '@storybook/addon-knobs'; -import notes from './confirm-action.md'; - -storiesOf('Confirm/ConfirmAction', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator( - withKnobs({ - escapeHTML: false, - }) - ) - .add( - `ConfirmAction`, - () => ({ - template: hbs` -
Confirm Action
- - {{buttonText}} - - `, - context: { - buttonText: text('buttonText', 'Delete'), - buttonClasses: text('buttonClasses', 'button'), - confirmTitle: text('confirmTitle', 'Delete this?'), - confirmMessage: text('confirmMessage', 'You will not be able to recover it later.'), - confirmButtonText: text('confirmButtonText', 'Delete'), - cancelButtonText: text('cancelButtonText', 'Cancel'), - disabled: boolean('disabled', false), - onComfirmAction: () => { - console.log('Action!'); - }, - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/confirm.md b/ui/lib/core/stories/confirm.md deleted file mode 100644 index 9eaf2165b..000000000 --- a/ui/lib/core/stories/confirm.md +++ /dev/null @@ -1,28 +0,0 @@ - - -## Confirm -`Confirm` components prevent users from performing actions they do not intend to by showing a confirmation message as an overlay. This is a contextual component that should always be rendered with a `Message` which triggers the message. - -See the `Message` component for a description of properties. - -**Example** - -```js -
- - - -
-``` - -**See** - -- [Uses of Confirm](https://github.com/hashicorp/vault/search?l=Handlebars&q=Confirm+OR+confirm) -- [Confirm Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/confirm.js) - ---- diff --git a/ui/lib/core/stories/confirm.stories.js b/ui/lib/core/stories/confirm.stories.js deleted file mode 100644 index e548b86e3..000000000 --- a/ui/lib/core/stories/confirm.stories.js +++ /dev/null @@ -1,47 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './confirm.md'; -import { withKnobs, text } from '@storybook/addon-knobs'; - -storiesOf('Confirm/Confirm', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator( - withKnobs({ - escapeHTML: false, - }) - ) - .add( - `Confirm`, - () => ({ - template: hbs` -
Confirm
-
-
- - - -
-
- `, - context: { - id: 'foo', - onConfirm: () => { - alert('Confirmed!'); - }, - title: text('title', 'Delete this?'), - message: text('message', 'You will not be able to recover it later.'), - confirmButtonText: text('confirmButtonText', 'Delete'), - cancelButtonText: text('cancelButtonText', 'Cancel'), - triggerText: text('triggerText', 'Delete'), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/doc-link.md b/ui/lib/core/stories/doc-link.md deleted file mode 100644 index 38e4f4a82..000000000 --- a/ui/lib/core/stories/doc-link.md +++ /dev/null @@ -1,22 +0,0 @@ - - -## DocLink -`DocLink` components are used to render anchor links to relevant Vault documentation. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| path | String | "/" | The path to documentation on vaultproject.io that the component should link to. | - -**Example** - -```js - Learn about KV v2 -``` - -**See** - -- [Uses of DocLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=DocLink) -- [DocLink Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/doc-link.js) - ---- diff --git a/ui/lib/core/stories/doc-link.stories.js b/ui/lib/core/stories/doc-link.stories.js deleted file mode 100644 index 8d301b2e0..000000000 --- a/ui/lib/core/stories/doc-link.stories.js +++ /dev/null @@ -1,16 +0,0 @@ -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` -
Doc Link
- Learn about KV v2 - `, - }), - { notes } - ); diff --git a/ui/lib/core/stories/empty-state.md b/ui/lib/core/stories/empty-state.md deleted file mode 100644 index 2bf5c57f3..000000000 --- a/ui/lib/core/stories/empty-state.md +++ /dev/null @@ -1,26 +0,0 @@ - - -## 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. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| title | String | | A short label for the empty state | -| message | String | | A description of why a user might be seeing the empty state and possibly instructions for actions they may take. | -| [icon] | String | '' | A optional param to display icon to the right of the title | - -**Example** - -```js - -``` - -**See** - -- [Uses of EmptyState](https://github.com/hashicorp/vault/search?l=Handlebars&q=EmptyState+OR+empty-state) -- [EmptyState Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/empty-state.js) - ---- diff --git a/ui/lib/core/stories/empty-state.stories.js b/ui/lib/core/stories/empty-state.stories.js deleted file mode 100644 index 8bb1b3e04..000000000 --- a/ui/lib/core/stories/empty-state.stories.js +++ /dev/null @@ -1,44 +0,0 @@ -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` -
Empty State
- - `, - 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` -
Empty State
- - Learn about KV v2 - - `, - 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 } - ); diff --git a/ui/lib/core/stories/form-field-groups.md b/ui/lib/core/stories/form-field-groups.md deleted file mode 100644 index 954246aee..000000000 --- a/ui/lib/core/stories/form-field-groups.md +++ /dev/null @@ -1,32 +0,0 @@ - - -## onKeyUpCallback : function - -**Params** - -| Param | Type | Description | -| --- | --- | --- | -| model- | Model | Model to be passed down to form-field component. If `fieldGroups` is present on the model then it will be iterated over and groups of `FormField` components will be rendered. | -| [renderGroup] | string | An allow list of groups to include in the render. | -| [onChange] | onChangeCallback | Handler that will get set on the `FormField` component. | -| [onKeyUp] | [onKeyUpCallback](#onKeyUpCallback) | Handler that will set the value and trigger validation on input changes | -| [modelValidations] | ModelValidations | Object containing validation message for each property | - -**Example** - -```js -{{if model.fieldGroups}} - -{{/if}} - -... - - ({ - template: hbs` -
Form Field Groups
- - `, - context: { - actions: { - getModel(modelType) { - return getOwner(this).lookup('service:store').createRecord(`auth-config/${modelType}`); - }, - }, - model: select('model', MODELS, DEFAULT_VALUE), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/form-field.md b/ui/lib/core/stories/form-field.md deleted file mode 100644 index 88edb0484..000000000 --- a/ui/lib/core/stories/form-field.md +++ /dev/null @@ -1,45 +0,0 @@ - - -## onKeyUpCallback : function - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| attr | Object | | usually derived from ember model `attributes` lookup, and all members of `attr.options` are optional | -| model | Model | | Ember Data model that `attr` is defined on | -| [disabled] | boolean | false | whether the field is disabled | -| [showHelpText] | boolean | true | whether to show the tooltip with help text from OpenAPI | -| [subText] | string | | text to be displayed below the label | -| [mode] | string | | used when editType is 'kv' | -| [modelValidations] | ModelValidations | | Object of errors. If attr.name is in object and has error message display in AlertInline. | -| [onChange] | onChangeCallback | | called whenever a value on the model changes via the component | -| [onKeyUp] | [onKeyUpCallback](#onKeyUpCallback) | | function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp. | - -**Example** - -```js -{{#each @model.fields as |attr|}} - -{{/each}} -``` -example attr object: -attr = { - name: "foo", // name of attribute -- used to populate various fields and pull value from model - options: { - label: "Foo", // custom label to be shown, otherwise attr.name will be displayed - defaultValue: "", // default value to display if model value is not present - fieldValue: "bar", // used for value lookup on model over attr.name - editType: "ttl", type of field to use -- example boolean, searchSelect, etc. - helpText: "This will be in a tooltip", - readOnly: true - }, - type: "boolean" // type of attribute value -- string, boolean, etc. -} - -**See** - -- [Uses of FormField](https://github.com/hashicorp/vault/search?l=Handlebars&q=FormField+OR+form-field) -- [FormField Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/form-field.js) - ---- diff --git a/ui/lib/core/stories/form-field.stories.js b/ui/lib/core/stories/form-field.stories.js deleted file mode 100644 index b9037a924..000000000 --- a/ui/lib/core/stories/form-field.stories.js +++ /dev/null @@ -1,140 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './form-field.md'; -import EmberObject from '@ember/object'; - -const createAttr = (name, type, options) => { - return { - name, - type, - options, - }; -}; - -storiesOf('Forms/FormField', module) - .add( - `FormField|string`, - () => ({ - template: hbs` -
String Form Field
- - `, - context: { - attr: createAttr('foo', 'string', { defaultValue: 'default' }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|boolean`, - () => ({ - template: hbs` -
Boolean Form Field
- - `, - context: { - attr: createAttr('foo', 'boolean', { defaultValue: false }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|number`, - () => ({ - template: hbs` -
Number Form Field
- - `, - context: { - attr: createAttr('foo', 'number', { defaultValue: 5 }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|object`, - () => ({ - template: hbs` -
Object Form Field
- - `, - context: { - attr: createAttr('foo', 'object'), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|textarea`, - () => ({ - template: hbs` -
Textarea Form Field
- - `, - context: { - attr: createAttr('foo', 'string', { defaultValue: 'goodbye', editType: 'textarea' }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|file`, - () => ({ - template: hbs` -
File Form Field
- - `, - context: { - attr: createAttr('foo', 'string', { editType: 'file' }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|ttl`, - () => ({ - template: hbs` -
ttl Form Field
- - `, - context: { - attr: createAttr('foo', null, { editType: 'ttl' }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|stringArray`, - () => ({ - template: hbs` -
String Array Form Field
- - `, - context: { - attr: createAttr('foo', 'string', { editType: 'stringArray' }), - model: EmberObject.create({}), - }, - }), - { notes } - ) - .add( - `FormField|sensitive`, - () => ({ - template: hbs` -
Sensitive Form Field
- - `, - context: { - attr: createAttr('password', 'string', { sensitive: true }), - model: EmberObject.create({}), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/form-save-buttons.md b/ui/lib/core/stories/form-save-buttons.md deleted file mode 100644 index f4b9e20d4..000000000 --- a/ui/lib/core/stories/form-save-buttons.md +++ /dev/null @@ -1,28 +0,0 @@ - - -## FormSaveButtons -`FormSaveButtons` displays a button save and a cancel button at the bottom of a form. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| [saveButtonText] | String | "Save" | The text that will be rendered on the Save button. | -| [isSaving] | Boolean | false | If the form is saving, this should be true. This will disable the save button and render a spinner on it; | -| [cancelLinkParams] | Array | [] | An array of arguments used to construct a link to navigate back to when the Cancel button is clicked. | -| [onCancel] | Function | | If the form should call an action on cancel instead of route somewhere, the function can be passed using onCancel instead of passing an array to cancelLinkParams. | -| [includeBox] | Boolean | true | By default we include padding around the form with underlines. Passing this value as false will remove that padding. | - -**Example** - -```js - -``` - -**See** - -- [Uses of FormSaveButtons](https://github.com/hashicorp/vault/search?l=Handlebars&q=FormSaveButtons+OR+form-save-buttons) -- [FormSaveButtons Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/form-save-buttons.js) - ---- diff --git a/ui/lib/core/stories/form-save-buttons.stories.js b/ui/lib/core/stories/form-save-buttons.stories.js deleted file mode 100644 index 5f54f36e8..000000000 --- a/ui/lib/core/stories/form-save-buttons.stories.js +++ /dev/null @@ -1,38 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, text, boolean } from '@storybook/addon-knobs'; -import notes from './form-save-buttons.md'; - -storiesOf('Forms/FormSaveButtons', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator( - withKnobs({ - escapeHTML: false, - }) - ) - .add( - `FormSaveButtons`, - () => ({ - template: hbs` -
Form save buttons
- - `, - - context: { - save: boolean('saving?', false), - includeBox: boolean('include box?', true), - saveButtonText: text('save button text', 'Save'), - cancelButtonText: text('cancel button text', 'Cancel'), - onCancel: () => { - console.log('Canceled!'); - }, - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/icon.md b/ui/lib/core/stories/icon.md deleted file mode 100644 index 038015202..000000000 --- a/ui/lib/core/stories/icon.md +++ /dev/null @@ -1,26 +0,0 @@ - - -## Icon -`Icon` components are glyphs used to indicate important information. - -Flight icon documentation at https://flight-hashicorp.vercel.app/ - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| name | string | null | The name of the SVG to render inline. | -| [size] | string | 16 | size for flight icon, can be 16 or 24 | - -**Example** - -```js - -``` - -**See** - -- [Uses of Icon](https://github.com/hashicorp/vault/search?l=Handlebars&q=Icon+OR+icon) -- [Icon Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/icon.js) - ---- diff --git a/ui/lib/core/stories/icon.stories.js b/ui/lib/core/stories/icon.stories.js deleted file mode 100644 index 929e042ee..000000000 --- a/ui/lib/core/stories/icon.stories.js +++ /dev/null @@ -1,108 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './icon.md'; -import icons from '../../../node_modules/@hashicorp/structure-icons/dist/index.js'; -import { withKnobs, select } from '@storybook/addon-knobs'; -import { structureIconMap, localIconMap } from '../icon-mappings'; - -storiesOf('Icon', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - 'Icon', - () => ({ - template: hbs` -
HashiCorp Flight Icons
- https://flight-hashicorp.vercel.app/ - -
- HashiCorp Structure Icons with Flight Mappings -
- - - - - - - - - - - {{#each types as |type|}} - - - - {{#let (get structureIconMap type) as |flightIcon|}} - - - {{/let}} - - {{/each}} - -
Structure Icon NameStructure GlyphFlight Icon NameFlight Glyph>
- {{type}} - - - - {{#if flightIcon}} - {{flightIcon}} - {{else}} - — - {{/if}} - - {{#if flightIcon}} - - {{else}} - — - {{/if}} -
- -
- Local Icons with Flight Mappings -
- - - - - - - - - - - {{#each-in localIconMap as |localIcon flightIcon|}} - - - - - - - {{/each-in}} - -
Local Icon NameGlyphFlight Icon NameFlight Glyph
- {{localIcon}} - - - - {{#if flightIcon}} - {{flightIcon}} - {{else}} - — - {{/if}} - - {{#if flightIcon}} - - {{else}} - — - {{/if}} -
- `, - context: { - types: icons, - structureIconMap, - localIconMap, - size: select('Size', ['16', '24'], '16'), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/info-table-row.md b/ui/lib/core/stories/info-table-row.md deleted file mode 100644 index 407384a73..000000000 --- a/ui/lib/core/stories/info-table-row.md +++ /dev/null @@ -1,36 +0,0 @@ - - -## 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. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| value | 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. | -| label | string | null | The display name for the value. | -| helperText | string | null | Text to describe the value displayed beneath the label. | -| alwaysRender | Boolean | false | 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. | -| [type] | string | "array" | The type of value being passed in. This is used for when you want to trim an array. For example, if you have an array value that can equal length 15+ this will trim to show 5 and count how many more are there | -| [isLink] | Boolean | true | Passed through to InfoTableItemArray. Indicates if the item should contain a link-to component. Only setup for arrays, but this could be changed if needed. | -| [modelType] | string | null | Passed through to InfoTableItemArray. Tells what model you want data for the allOptions to be returned from. Used in conjunction with the the isLink. | -| [queryParam] | String | | Passed through to InfoTableItemArray. If you want to specific a tab for the View All XX to display to. Ex: role | -| [backend] | String | | Passed through to InfoTableItemArray. To specify secrets backend to point link to Ex: transformation | -| [viewAll] | String | | Passed through to InfoTableItemArray. Specify the word at the end of the link View all. | -| [tooltipText] | String | | Text if a tooltip should display over the value. | -| [isTooltipCopyable] | Boolean | | Allows tooltip click to copy | -| [defaultShown] | String | | Text that renders as value if alwaysRender=true. Eg. "Vault default" | - -**Example** - -```js - -``` - -**See** - -- [Uses of InfoTableRow](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTableRow+OR+info-table-row) -- [InfoTableRow Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/info-table-row.js) - ---- diff --git a/ui/lib/core/stories/info-table-row.stories.js b/ui/lib/core/stories/info-table-row.stories.js deleted file mode 100644 index 63178d0fb..000000000 --- a/ui/lib/core/stories/info-table-row.stories.js +++ /dev/null @@ -1,54 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, boolean, text } from '@storybook/addon-knobs'; -import notes from './info-table-row.md'; - -storiesOf('InfoTable/InfoTableRow', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs({ escapeHTML: false })) - .add( - `InfoTableRow with text value`, - () => ({ - template: hbs` -
Info Table Row
- - `, - context: { - label: text('Label', 'TTL'), - value: text('Value', '30m (hover to see the tooltip!)'), - helperText: text('helperText', 'This is helperText - for a short description'), - alwaysRender: boolean('Always render?', false), - defaultShown: text('Default value', 'Some default value'), - tooltipText: text('tooltipText', 'This is tooltipText'), - isTooltipCopyable: boolean('Allow tooltip to be copied', true), - }, - }), - { notes } - ) - .add( - `InfoTableRow with boolean value`, - () => ({ - template: hbs` -
Info Table Row
- - `, - context: { - label: 'Local mount?', - value: boolean('Value', true), - helperText: text('helperText', 'This is helperText - for a short description'), - alwaysRender: boolean('Always render?', true), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/info-table.md b/ui/lib/core/stories/info-table.md deleted file mode 100644 index eb1188d66..000000000 --- a/ui/lib/core/stories/info-table.md +++ /dev/null @@ -1,30 +0,0 @@ - - -## InfoTable -InfoTable components are a table with a single column and header. They are used to render a list of InfoTableRow components. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| [title] | String | Info Table | The title of the table. Used for accessibility purposes. | -| header | String | | The column header. | -| items | Array | | An array of strings which will be used as the InfoTableRow value. | - -**Example** - -```js - -``` - - -**See** - -- [Uses of InfoTable](https://github.com/hashicorp/vault/search?l=Handlebars&q=InfoTable+OR+info-table) -- [InfoTable Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/info-table.js) - ---- diff --git a/ui/lib/core/stories/info-table.stories.js b/ui/lib/core/stories/info-table.stories.js deleted file mode 100644 index 66d0e7acd..000000000 --- a/ui/lib/core/stories/info-table.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, object, text } from '@storybook/addon-knobs'; -import notes from './info-table.md'; - -const ITEMS = ['https://127.0.0.1:8201', 'hello', 3]; - -storiesOf('InfoTable/InfoTable', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs({ escapeHTML: false })) - .add( - `InfoTable`, - () => ({ - template: hbs` -
Info Table
- - `, - context: { - header: text('Header', 'Column Header'), - items: object('Items', ITEMS), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/layout-loading.md b/ui/lib/core/stories/layout-loading.md deleted file mode 100644 index 89f9d57ad..000000000 --- a/ui/lib/core/stories/layout-loading.md +++ /dev/null @@ -1,17 +0,0 @@ - - -## LayoutLoading -`LayoutLoading` displays the `VaultLogoSpinner` component in a centered full-page layout. - -**Example** - -```js - -``` - -**See** - -- [Uses of LayoutLoading](https://github.com/hashicorp/vault/search?l=Handlebars&q=LayoutLoading) -- [LayoutLoading Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/layout-loading.js) - ---- diff --git a/ui/lib/core/stories/layout-loading.stories.js b/ui/lib/core/stories/layout-loading.stories.js deleted file mode 100644 index ed4af1a31..000000000 --- a/ui/lib/core/stories/layout-loading.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './layout-loading.md'; - -storiesOf('LayoutLoading', module) - .addParameters({ options: { showPanel: true } }) - .add( - `LayoutLoading`, - () => ({ - template: hbs` -
Layout Loading
- - `, - context: {}, - }), - { notes } - ); diff --git a/ui/lib/core/stories/linkable-item.md b/ui/lib/core/stories/linkable-item.md deleted file mode 100644 index f81d8edb7..000000000 --- a/ui/lib/core/stories/linkable-item.md +++ /dev/null @@ -1,26 +0,0 @@ - - -## LinkableItem -LinkableItem components have two contextual components, a Content component used to show information on the left with a Menu component on the right, all aligned vertically centered. If passed a link, the block will be clickable. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| [link] | object | | Link should have route and model | -| [disabled] | boolean | false | If no link then should be given a disabled attribute equal to true | - -**Example** - -```js - -// Use and here - -``` - -**See** - -- [Uses of LinkableItem](https://github.com/hashicorp/vault/search?l=Handlebars&q=LinkableItem+OR+linkable-item) -- [LinkableItem Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/linkable-item.js) - ---- diff --git a/ui/lib/core/stories/linkable-item.stories.js b/ui/lib/core/stories/linkable-item.stories.js deleted file mode 100644 index 598380cf4..000000000 --- a/ui/lib/core/stories/linkable-item.stories.js +++ /dev/null @@ -1,47 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { text, withKnobs, boolean } from '@storybook/addon-knobs'; -import notes from './linkable-item.md'; - -storiesOf('LinkableItem', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `LinkableItem with attributes`, - () => ({ - template: hbs` -
Linkable Item
- - - {{menu}} - - `, - context: { - disabled: boolean('disabled', false), - title: text('title', 'My Title'), - accessor: text('accessor', 'v2 secret'), - description: text( - 'description', - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat vulputate lacus sit amet lobortis. Nulla fermentum porta consequat. Mauris porttitor libero nibh, ac facilisis ex molestie non. Nulla dolor est, pharetra et maximus vel, varius eu augue. Maecenas eget nisl convallis, vehicula massa quis, pharetra justo. Praesent porttitor arcu at gravida dignissim. Vestibulum condimentum, risus a fermentum pulvinar, enim massa venenatis velit, a venenatis leo sem eget dolor. Morbi convallis dui sit amet egestas commodo. Nulla et ultricies leo.' - ), - menu: text('menu component', 'menu button goes here'), - }, - }), - { notes } - ) - .add( - `LinkableItem with blocks`, - () => ({ - template: hbs` -
Linkable Item with block content
- - - {{menu}} - - `, - context: { - disabled: boolean('disabled', false), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/list-view.md b/ui/lib/core/stories/list-view.md deleted file mode 100644 index e4c8bedc5..000000000 --- a/ui/lib/core/stories/list-view.md +++ /dev/null @@ -1,32 +0,0 @@ - - -## ListView -`ListView` components are used in conjunction with `ListItem` for rendering a list. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| items | Array | | An array of items to render as a list | -| [itemNoun] | String | | A noun to use in the empty state of message and title. | -| [message] | String | | The message to display within the banner. | - -**Example** - -```js - - {{#if list.empty}} - - {{else}} -
- {{list.item.id}} -
- {{/if}} - -``` - -**See** - -- [Uses of ListView](https://github.com/hashicorp/vault/search?l=Handlebars&q=ListView+OR+list-view) -- [ListView Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/list-view.js) - ---- diff --git a/ui/lib/core/stories/list-view.stories.js b/ui/lib/core/stories/list-view.stories.js deleted file mode 100644 index 8ea4b33b5..000000000 --- a/ui/lib/core/stories/list-view.stories.js +++ /dev/null @@ -1,48 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, select } from '@storybook/addon-knobs'; -import notes from './list-view.md'; - -import ArrayProxy from '@ember/array/proxy'; - -let filtered = ArrayProxy.create({ content: [] }); -filtered.set('meta', { - lastPage: 1, - currentPage: 1, - total: 100, -}); - -// TODO: add a pagination option when we have a better way to fake Ember models in Storybook. -let options = { - list: [{ id: 'one' }, { id: 'two' }], - empty: [], - filtered, -}; - -storiesOf('ListView', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `ListView`, - () => ({ - template: hbs` -
{{title}}
- - {{#if list.empty}} - - {{else if list.item}} -
- {{list.item.id}} -
- {{else}} -
There aren't any items in this filter
- {{/if}} - - `, - context: { - title: 'ListView', - items: select('items', options, options['list']), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/masked-input.md b/ui/lib/core/stories/masked-input.md deleted file mode 100644 index 7c9ed6fc2..000000000 --- a/ui/lib/core/stories/masked-input.md +++ /dev/null @@ -1,31 +0,0 @@ - - -## MaskedInput -`MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| [value] | String | | The value to display in the input. | -| [placeholder] | String | value | The placeholder to display before the user has entered any input. | -| [allowCopy] | bool | | Whether or not the input should render with a copy button. | -| [displayOnly] | bool | false | Whether or not to display the value as a display only `pre` element or as an input. | -| [onChange] | function \| action | Function.prototype | A function to call when the value of the input changes. | - -**Example** - -```js - -``` - -**See** - -- [Uses of MaskedInput](https://github.com/hashicorp/vault/search?l=Handlebars&q=MaskedInput) -- [MaskedInput Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/masked-input.js) - ---- diff --git a/ui/lib/core/stories/masked-input.stories.js b/ui/lib/core/stories/masked-input.stories.js deleted file mode 100644 index 4cf9bd897..000000000 --- a/ui/lib/core/stories/masked-input.stories.js +++ /dev/null @@ -1,29 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs, text, boolean } from '@storybook/addon-knobs'; -import notes from './masked-input.md'; - -storiesOf('MaskedInput', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add( - `MaskedInput`, - () => ({ - template: hbs` -
Masked Input
- - `, - context: { - value: text('value', ''), - placeholder: text('placeholder', 'super-secret'), - allowCopy: boolean('allowCopy', false), - displayOnly: boolean('displayOnly', false), - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/message-error.md b/ui/lib/core/stories/message-error.md deleted file mode 100644 index e17118ca4..000000000 --- a/ui/lib/core/stories/message-error.md +++ /dev/null @@ -1,24 +0,0 @@ - - -## MessageError -`MessageError` extracts an error from a model or a passed error and displays it using the `AlertBanner` component. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| model | DS.Model | | An Ember data model that will be used to bind error statest to the internal `errors` property. | -| errors | Array | | An array of error strings to show. | -| errorMessage | String | | An Error string to display. | - -**Example** - -```js - -``` - -**See** - -- [Uses of MessageError](https://github.com/hashicorp/vault/search?l=Handlebars&q=MessageError) -- [MessageError Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/message-error.js) - ---- diff --git a/ui/lib/core/stories/message-error.stories.js b/ui/lib/core/stories/message-error.stories.js deleted file mode 100644 index 1c3bee83e..000000000 --- a/ui/lib/core/stories/message-error.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './message-error.md'; -import EmberObject from '@ember/object'; - -let model = EmberObject.create({ - adapterError: { - message: 'This is an adapterError on the model', - }, - isError: true, -}); - -storiesOf('MessageError', module) - .addParameters({ options: { showPanel: true } }) - .add( - `MessageError`, - () => ({ - template: hbs` -
Message Error
- - `, - context: { - model, - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/message.md b/ui/lib/core/stories/message.md deleted file mode 100644 index 3eee2e9e0..000000000 --- a/ui/lib/core/stories/message.md +++ /dev/null @@ -1,39 +0,0 @@ - - -## Message -`Message` components trigger and display a confirmation message. They should only be used within a `Confirm` component. - -**Properties** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| id | ID | | A unique identifier used to bind a trigger to a confirmation message. | -| onConfirm | Func | | The action to take when the user clicks the confirm button. | -| [triggerText] | String |'Delete' | The text on the trigger button. | -| [title] | String | 'Delete this?' | The header text to display in the confirmation message. | -| [message] | String | 'You will not be able to recover it later.' | The message to display above the confirm and cancel buttons. | -| [confirmButtonText] | String | 'Delete' | The text to display on the confirm button. | -| [cancelButtonText] | String | 'Cancel' | The text to display on the cancel button. | - - -**Example** - -```js -
- - - -
-``` - -**See** - -- [Uses of Confirm](https://github.com/hashicorp/vault/search?l=Handlebars&q=Confirm+OR+confirm) -- [Confirm Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/confirm.js) - ---- diff --git a/ui/lib/core/stories/message.stories.js b/ui/lib/core/stories/message.stories.js deleted file mode 100644 index 0f2907362..000000000 --- a/ui/lib/core/stories/message.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './message.md'; - -storiesOf('Confirm/Message', module) - .addParameters({ options: { showPanel: true } }) - .add( - `Message`, - () => ({ - template: hbs` -
Message
-

- Message components should never render on their own. See the Confirm component for an example of what a Message looks like. -

- `, - context: {}, - }), - { notes } - ); diff --git a/ui/lib/core/stories/popup-menu.md b/ui/lib/core/stories/popup-menu.md deleted file mode 100644 index 4e2f27b7f..000000000 --- a/ui/lib/core/stories/popup-menu.md +++ /dev/null @@ -1,23 +0,0 @@ - - -## PopupMenu -`PopupMenu` displays a button that when pressed will toggle open a menu that is yielded in the content -block. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| contentClass | String | '' | A class that will be applied to the yielded content of the popup. | - -**Example** - -```js - -``` - -**See** - -- [Uses of PopupMenu](https://github.com/hashicorp/vault/search?l=Handlebars&q=PopupMenu) -- [PopupMenu Source Code](https://github.com/hashicorp/vault/blob/main/ui/app/components/popup-menu.js) - ---- diff --git a/ui/lib/core/stories/popup-menu.stories.js b/ui/lib/core/stories/popup-menu.stories.js deleted file mode 100644 index 286edd708..000000000 --- a/ui/lib/core/stories/popup-menu.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './popup-menu.md'; - -storiesOf('PopupMenu', module) - .addParameters({ options: { showPanel: true } }) - .add( - `PopupMenu`, - () => ({ - template: hbs` -
Popup Menu
- - - - `, - context: {}, - }), - { notes } - ); diff --git a/ui/lib/core/stories/read-more.stories.js b/ui/lib/core/stories/read-more.stories.js deleted file mode 100644 index 237695aea..000000000 --- a/ui/lib/core/stories/read-more.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import { withKnobs } from '@storybook/addon-knobs'; - -storiesOf('ReadMore', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs()) - .add(`ReadMore`, () => ({ - template: hbs` -
Read More
-
NOTE: normally this component has a "See More" button when it truncates text (which is calculated in the .js file). The button is clickable and will expand the height of the outer box (shown here with a black outline).
-
- - Anything can go in here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat vulputate lacus sit amet lobortis. Nulla fermentum porta consequat. Mauris porttitor libero nibh, ac facilisis ex molestie non. Nulla dolor est, pharetra et maximus vel, varius eu augue. Maecenas eget nisl convallis, vehicula massa quis, pharetra justo. - -
- `, - context: {}, - })); diff --git a/ui/lib/core/stories/search-select.md b/ui/lib/core/stories/search-select.md deleted file mode 100644 index 1956ab207..000000000 --- a/ui/lib/core/stories/search-select.md +++ /dev/null @@ -1,37 +0,0 @@ - - -## SearchSelect -The `SearchSelect` is an implementation of the [ember-power-select](https://github.com/cibernox/ember-power-select) used for form elements where options come dynamically from the API. - -**Params** - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| id | string | | The name of the form field | -| models | Array | | An array of model types to fetch from the API. | -| onChange | function | | The onchange action for this form field. | -| inputValue | string \| Array | | A comma-separated string or an array of strings. | -| label | string | | Label for this form field | -| fallbackComponent | string | | name of component to be rendered if the API call 403s | -| [backend] | string | | name of the backend if the query for options needs additional information (eg. secret backend) | -| [disallowNewItems] | boolean | false | Controls whether or not the user can add a new item if none found | -| [helpText] | string | | Text to be displayed in the info tooltip for this form field | -| [selectLimit] | number | | A number that sets the limit to how many select options they can choose | -| [subText] | string | | Text to be displayed below the label | -| [subLabel] | string | | a smaller label below the main Label | -| [wildcardLabel] | string | | when you want the searchSelect component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role. Should be singular. | -| options | Array | | *Advanced usage* - `options` can be passed directly from the outside to the power-select component. If doing this, `models` should not also be passed as that will overwrite the passed value. | -| search | function | | *Advanced usage* - Customizes how the power-select component searches for matches - see the power-select docs for more information. | - -**Example** - -```js - -``` - -**See** - -- [Uses of SearchSelect](https://github.com/hashicorp/vault/search?l=Handlebars&q=SearchSelect+OR+search-select) -- [SearchSelect Source Code](https://github.com/hashicorp/vault/blob/main/ui/lib/core/addon/components/search-select.js) - ---- diff --git a/ui/lib/core/stories/search-select.stories.js b/ui/lib/core/stories/search-select.stories.js deleted file mode 100644 index d7d283379..000000000 --- a/ui/lib/core/stories/search-select.stories.js +++ /dev/null @@ -1,41 +0,0 @@ -import hbs from 'htmlbars-inline-precompile'; -import { storiesOf } from '@storybook/ember'; -import notes from './search-select.md'; -import { withKnobs, text } from '@storybook/addon-knobs'; - -const onChange = (value) => alert(`New value is "${value}"`); -const models = ['identity/groups']; - -storiesOf('SearchSelect', module) - .addParameters({ options: { showPanel: true } }) - .addDecorator(withKnobs({ escapeHTML: false })) - .add( - `SearchSelect`, - () => ({ - template: hbs` -
Search Select
- - `, - context: { - label: text('Label', 'Group IDs'), - helpText: text('Help Tooltip Text', 'Group IDs to associate with this entity'), - inputValue: [], - models: models, - onChange: onChange, - staticOptions: [ - { name: 'my-group', id: '123dsafdsarf' }, - { name: 'my-other-group', id: '45ssadd435' }, - { name: 'example-1', id: '5678' }, - { name: 'group-2', id: 'gro09283' }, - ], - }, - }), - { notes } - ); diff --git a/ui/lib/core/stories/select.md b/ui/lib/core/stories/select.md deleted file mode 100644 index fcddb942f..000000000 --- a/ui/lib/core/stories/select.md +++ /dev/null @@ -1,33 +0,0 @@ - - -## Select -Select components are used to render a dropdown. - - -| Param | Type | Default | Description | -| --- | --- | --- | --- | -| label | String | | The label for the select element. | -| options | Array | | A list of items that the user will select from. This can be an array of strings or objects. | -| [name] | String | | The name of the select, used for the test selector. | -| [selectedValue] | String | | The currently selected item. Can also be used to set the default selected item. This should correspond to the `value` of one of the `