UI: Add Toolbar to Storybook (#6761)

* Add Toolbar stories
* Update ConfirmAction story

ui/app/components/toolbar-download-button.js

@@ -1,3 +1,19 @@
+/**
+ * @module ToolbarSecretLink
+ * `ToolbarSecretLink` styles SecretLink for the Toolbar.
+ * It should only be used inside of `Toolbar`.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarActions>
+ *     <ToolbarDownloadButton @actionText="Download policy" @extension={{if (eq policyType "acl") model.format "sentinel"}} @filename={{model.name}} @data={{model.policy}} />
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ *
+ */
+
 import DownloadButton from './download-button';
 
 export default DownloadButton.extend({

ui/app/components/toolbar-filters.js

@@ -1,3 +1,22 @@
+/**
+ * @module ToolbarFilters
+ * `ToolbarFilters` components are containers for Toolbar filters and toggles.
+ * It should only be used inside of `Toolbar`.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarFilters>
+ *     <div class="control has-icons-left">
+ *       <input class="filter input" placeholder="Filter keys" type="text">
+ *       <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+ *     </div>
+ *   </ToolbarFilters>
+ * </Toolbar>
+ ```
+ *
+ */
+
 import OuterHTML from './outer-html';
 
 export default OuterHTML.extend({});

ui/app/components/toolbar-secret-link.js

@@ -1,3 +1,22 @@
+/**
+ * @module ToolbarSecretLink
+ * `ToolbarSecretLink` styles SecretLink for the Toolbar.
+ * It should only be used inside of `Toolbar`.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarActions>
+ *     <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+ *       Create policy
+ *     </ToolbarSecretLink>
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ *
+ * @param type="" {String} - Use "add" to change icon
+ */
+
 import OuterHTML from './outer-html';
 import { computed } from '@ember/object';
 

ui/app/templates/vault/cluster/policy/show.hbs

@@ -23,11 +23,10 @@
 <Toolbar>
   <ToolbarActions>
     <ToolbarDownloadButton
-      @classNames="toolbar-link"
       @actionText="Download policy"
       @extension={{if (eq policyType "acl") model.format "sentinel"}}
-      @filename=model.name
+      @filename={{model.name}}
-      @data=model.policy
+      @data={{model.policy}}
     />
     {{#if (and (not-eq model.id "root") (or capabilities.canUpdate capabilities.canDelete))}}
       <ToolbarLink

ui/lib/core/addon/components/confirm-action.js

@@ -16,11 +16,9 @@ import layout from '../templates/components/confirm-action';
  *
  * @property {Func} [onConfirmAction=null] - The action to take upon confirming.
  * @property {String} [confirmTitle=Delete this?] - The title to display when confirming.
- * @property {String} [confirmMessage=Are you sure you want to do this?] - The message to display when confirming.
+ * @property {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @property {String} [confirmButtonText=Delete] - The confirm button text.
  * @property {String} [cancelButtonText=Cancel] - The cancel button text.
- * @property {String} [disabledTitle=Can't delete this yet] - The title to display when the button is disabled.
- * @property {String} [disabledMessage=Complete the form to complete this action] - The message to display when the button is disabled.
  *
  */
 
@@ -33,8 +31,6 @@ export default Component.extend({
   confirmMessage: 'You will not be able to recover it later.',
   confirmButtonText: 'Delete',
   cancelButtonText: 'Cancel',
-  disabledTitle: "Can't delete this yet",
-  disabledMessage: 'Complete the form to complete this action',
   horizontalPosition: 'auto-right',
   verticalPosition: 'below',
   disabled: false,

ui/lib/core/addon/components/toolbar-actions.js

@@ -1,3 +1,21 @@
+/**
+ * @module ToolbarActions
+ * `ToolbarActions` is a container for toolbar links such as "Add item".
+ * It should only be used inside of `Toolbar`.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarActions>
+ *     <ToolbarLink @params={{array 'vault.cluster.policy.edit'}}>
+ *       Edit policy
+ *     </ToolbarLink>
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ *
+ */
+
 import Component from '@ember/component';
 import layout from '../templates/components/toolbar-actions';
 

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

@@ -1,3 +1,23 @@
+/**
+ * @module ToolbarLink
+ * `ToolbarLink` components style links and buttons for the Toolbar
+ * It should only be used inside of `Toolbar`.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarActions>
+ *     <ToolbarLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+ *       Create policy
+ *     </ToolbarLink>
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ *
+ * @param params=''{Array} Array to pass to LinkTo
+ * @param type=''{String} Use "add" to change icon
+ */
+
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import layout from '../templates/components/toolbar-link';

ui/lib/core/addon/components/toolbar.js

@@ -1,3 +1,20 @@
+/**
+ * @module Toolbar
+ * `Toolbar` components are containers for Toolbar actions.
+ *
+ * @example
+ * ```js
+ * <Toolbar>
+ *   <ToolbarActions>
+ *     <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+ *       Create policy
+ *     </ToolbarSecretLink>
+ *   </ToolbarActions>
+ * </Toolbar>
+ * ```
+ *
+ */
+
 import Component from '@ember/component';
 import layout from '../templates/components/toolbar';
 

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

@@ -4,13 +4,13 @@ export const MESSAGE_TYPES = {
   info: {
     class: 'is-info',
     glyphClass: 'has-text-info',
-    glyph: 'info-circle-outline',
+    glyph: 'info-circle-fill',
     text: 'Info',
   },
   success: {
     class: 'is-success',
     glyphClass: 'has-text-success',
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle-fill',
     text: 'Success',
   },
   danger: {

ui/lib/core/addon/templates/components/confirm-action.hbs

@@ -24,10 +24,10 @@
         <div class="message is-highlight">
           <div class="message-title">
             <Icon @glyph="alert-triangle" />
-            {{if disabled disabledTitle confirmTitle}}
+            {{confirmTitle}}
           </div>
           <p>
-            {{if disabled disabledMessage confirmMessage}}
+            {{confirmMessage}}
           </p>
         </div>
         <div class="confirm-action-options">

ui/stories/confirm-action.md

@@ -5,20 +5,21 @@
 
 **Properties**
 
-| Name | Type | Default | Description |
+| Param | Type | Default | Description |
 | --- | --- | --- | --- |
+| buttonClasses | <code>String</code> | <code></code> | The CSS classes to add to the trigger button. |
+| confirmTitle | <code>String</code> | <code>Delete this?</code> | The title to display upon confirming. |
+| confirmMessage | <code>String</code> | <code>You will not be able to recover it later.</code> | The message to display upon confirming. |
+| confirmButtonText | <code>String</code> | <code>Delete</code> | The confirm button text. |
+| cancelButtonText | <code>String</code> | <code>Cancel</code> | The cancel button text. |
 | onConfirmAction | <code>Func</code> | <code></code> | The action to take upon confirming. |
-| [confirmMessage] | <code>String</code> | <code>Are you sure you want to do this?</code> | The message to display upon confirming. |
-| [confirmButtonText] | <code>String</code> | <code>Delete</code> | The confirm button text. |
-| [cancelButtonText] | <code>String</code> | <code>Cancel</code> | The cancel button text. |
-| [disabledMessage] | <code>String</code> | <code>Complete the form to complete this action</code> | The message to display when the button is disabled. |
 
 **Example**
 
 ```js
 <ConfirmAction
+  @buttonClasses="button is-primary"
   @onConfirmAction={{ () => { console.log('Action!') } }}
-  @confirmMessage="Are you sure you want to delete this config?">
   Delete
 </ConfirmAction>
  ```
@@ -27,6 +28,6 @@
 **See**
 
 - [Uses of ConfirmAction](https://github.com/hashicorp/vault/search?l=Handlebars&q=ConfirmAction)
-- [ConfirmAction Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/confirm-action.js)
+- [ConfirmAction Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/confirm-action.js)
 
 ---

ui/stories/confirm-action.stories.js

@@ -5,34 +5,39 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import notes from './confirm-action.md';
 
 storiesOf('ConfirmAction/', module)
+  .addParameters({ options: { showPanel: true } })
   .addDecorator(
     withKnobs({
       escapeHTML: false,
     })
   )
   .add(
-    `ConfirmAction`,
+    `ConfirmAction`, () => ({
-    () => ({
       template: hbs`
         <h5 class="title is-5">Confirm Action</h5>
         <ConfirmAction
-          @onConfirmAction={{onComfirmAction}}
+          @buttonClasses={{buttonClasses}}
-          @confirmButtonText={{confirmButtonText}}
+          @confirmTitle={{confirmTitle}}
           @confirmMessage={{confirmMessage}}
+          @confirmButtonText={{confirmButtonText}}
           @cancelButtonText={{cancelButtonText}}
           @disabled={{disabled}}
-          >
+          @onConfirmAction={{onComfirmAction}}
-          Delete
+        >
+          {{buttonText}}
         </ConfirmAction>
-    `,
+      `,
       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!');
         },
-        confirmButtonText: text('confirmButtonText', 'Yes'),
-        confirmMessage: text('confirmMessage', 'Are you sure you want to do this?'),
-        cancelButtonText: text('cancelButtonText', 'Cancel'),
-        disabled: boolean('disabled', false),
       },
     }),
     { notes }

ui/stories/toolbar/toolbar-actions.md

@@ -0,0 +1,24 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar-actions.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-actions" to re-generate the content.-->
+
+## ToolbarActions
+`ToolbarActions` is a container for toolbar links such as Add item.
+It should only be used inside of `Toolbar`.
+
+**Example**
+  
+```js
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarLink @params={{array 'vault.cluster.policy.edit'}}>
+      Edit policy
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
+```
+
+**See**
+
+- [Uses of ToolbarActions](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarActions+OR+toolbar-actions)
+- [ToolbarActions Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar-actions.js)
+
+---

ui/stories/toolbar/toolbar-actions.stories.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import notes from './toolbar-actions.md';
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`ToolbarActions`, () => ({
+    template: hbs`
+        <h5 class="title is-5">ToolbarActions</h5>
+        <Toolbar>
+          <ToolbarActions>
+            <ToolbarLink
+              @type="add"
+              @params={{array "#"}}
+            >
+              Add item
+            </ToolbarLink>
+          </ToolbarActions>
+        </Toolbar>
+    `,
+    context: {},
+  }),
+  {notes}
+);

ui/stories/toolbar/toolbar-download-button.md

@@ -0,0 +1,22 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-download-button.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-download-button" to re-generate the content.-->
+
+## ToolbarSecretLink
+`ToolbarSecretLink` styles SecretLink for the Toolbar.
+It should only be used inside of `Toolbar`.
+
+**Example**
+
+```js
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarDownloadButton @actionText="Download policy" @extension={{if (eq policyType "acl") model.format "sentinel"}} @filename={{model.name}} @data={{model.policy}} />
+  </ToolbarActions>
+</Toolbar>
+```
+
+**See**
+
+- [Uses of ToolbarDownloadButton](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarDownloadButton+OR+toolbar-download-button)
+- [ToolbarDownloadButton Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-download-button.js)
+
+---

ui/stories/toolbar/toolbar-download-button.stories.js

@@ -0,0 +1,29 @@
+/* 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 './toolbar-download-button.md';
+
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`ToolbarDownloadButton`,() => ({
+    template: hbs`
+      <h5 class="title is-5">ToolbarLink</h5>
+      <div style="width: 400px;">
+        <Toolbar>
+          <ToolbarActions>
+            <ToolbarDownloadButton
+              @actionText={{label}}
+            />
+          </ToolbarActions>
+        </Toolbar>
+      </div>
+    `,
+    context: {
+      label: text('Button text', 'Download policy'),
+    },
+  }),
+  {notes}
+);

ui/stories/toolbar/toolbar-filters.md

@@ -0,0 +1,25 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-filters.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-filters" to re-generate the content.-->
+
+## ToolbarFilters
+`ToolbarFilters` components are containers for Toolbar filters and toggles.
+It should only be used inside of `Toolbar`.
+
+**Example**
+  
+```js
+<Toolbar>
+  <ToolbarFilters>
+    <div class="control has-icons-left">
+      <input class="filter input" placeholder="Filter keys" type="text">
+      <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+    </div>
+  </ToolbarFilters>
+</Toolbar>
+ ```
+
+**See**
+
+- [Uses of ToolbarFilters](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarFilters+OR+toolbar-filters)
+- [ToolbarFilters Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-filters.js)
+
+---

ui/stories/toolbar/toolbar-filters.stories.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import notes from './toolbar-filters.md';
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`ToolbarFilters`, () => ({
+    template: hbs`
+        <h5 class="title is-5">ToolbarFilters</h5>
+        <Toolbar>
+          <ToolbarFilters>
+            <div class="control has-icons-left">
+              <input class="filter input" placeholder="Filter keys" type="text">
+              <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+            </div>
+            <div class="toolbar-separator"/>
+            <div class="control">
+              <input
+                id="json"
+                type="checkbox"
+                name="json"
+                class="switch is-rounded is-success is-small"
+              />
+              <label for="json" class="has-text-grey">JSON</label>
+            </div>
+          </ToolbarFilters>
+        </Toolbar>
+    `,
+    context: {},
+  }),
+  {notes}
+);

ui/stories/toolbar/toolbar-link.md

@@ -0,0 +1,30 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar-link.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-link" to re-generate the content.-->
+
+## ToolbarLink
+`ToolbarLink` components style links and buttons for the Toolbar
+It should only be used inside of `Toolbar`.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| params | <code>Array</code> | <code>&#x27;&#x27;</code> | Array to pass to LinkTo |
+| type | <code>String</code> | <code>&#x27;&#x27;</code> | Use "add" to change icon |
+
+**Example**
+  
+```js
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+      Create policy
+    </ToolbarLink>
+  </ToolbarActions>
+</Toolbar>
+```
+
+**See**
+
+- [Uses of ToolbarLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarLink+OR+toolbar-link)
+- [ToolbarLink Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar-link.js)
+
+---

ui/stories/toolbar/toolbar-link.stories.js

@@ -0,0 +1,33 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, select, text } from '@storybook/addon-knobs';
+import notes from './toolbar-link.md';
+
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`ToolbarLink`,() => ({
+    template: hbs`
+      <h5 class="title is-5">ToolbarLink</h5>
+      <div style="width: 400px;">
+        <Toolbar>
+          <ToolbarActions>
+            <ToolbarLink
+              @params={{array '#'}}
+              @type={{type}}
+            >
+              {{label}}
+            </ToolbarLink>
+          </ToolbarActions>
+        </Toolbar>
+      </div>
+    `,
+    context: {
+      type: select('Type', ['', 'add']),
+      label: text('Button text', 'Edit secret'),
+    },
+  }),
+  {notes}
+);

ui/stories/toolbar/toolbar-secret-link.md

@@ -0,0 +1,29 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-secret-link.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-secret-link" to re-generate the content.-->
+
+## ToolbarSecretLink
+`ToolbarSecretLink` styles SecretLink for the Toolbar.
+It should only be used inside of `Toolbar`.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | <code>String</code> | <code>&quot;&quot;</code> | Use "add" to change icon |
+
+**Example**
+  
+```js
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+      Create policy
+    </ToolbarSecretLink>
+  </ToolbarActions>
+</Toolbar>
+```
+
+**See**
+
+- [Uses of ToolbarSecretLink](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarSecretLink+OR+toolbar-secret-link)
+- [ToolbarSecretLink Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-secret-link.js)
+
+---

ui/stories/toolbar/toolbar-secret-link.stories.js

@@ -0,0 +1,36 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, select, text } from '@storybook/addon-knobs';
+import notes from './toolbar-secret-link.md';
+
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`ToolbarSecretLink`,() => ({
+    template: hbs`
+      <h5 class="title is-5">ToolbarLink</h5>
+      <div style="width: 400px;">
+        <Toolbar>
+          <ToolbarActions>
+            <ToolbarSecretLink
+              @secret={{model.id}}
+              @mode="edit"
+              @data-test-edit-link=true
+              @replace=true
+              @type={{type}}
+            >
+              {{label}}
+            </ToolbarSecretLink>
+          </ToolbarActions>
+        </Toolbar>
+      </div>
+    `,
+    context: {
+      type: select('Type', ['', 'add']),
+      label: text('Button text', 'Edit role'),
+    },
+  }),
+  {notes}
+);

ui/stories/toolbar/toolbar.md

@@ -0,0 +1,23 @@
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar.js. To make changes, first edit that file and run "yarn gen-story-md toolbar" to re-generate the content.-->
+
+## Toolbar
+`Toolbar` components are containers for Toolbar actions.
+
+**Example**
+  
+```js
+<Toolbar>
+  <ToolbarActions>
+    <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
+      Create policy
+    </ToolbarSecretLink>
+  </ToolbarActions>
+</Toolbar>
+```
+
+**See**
+
+- [Uses of Toolbar](https://github.com/hashicorp/vault/search?l=Handlebars&q=Toolbar+OR+toolbar)
+- [Toolbar Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar.js)
+
+---

ui/stories/toolbar/toolbar.stories.js

@@ -0,0 +1,80 @@
+/* eslint-disable import/extensions */
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import notes from './toolbar.md';
+
+storiesOf('Toolbar/', module)
+  .addParameters({ options: { showPanel: true } })
+  .addDecorator(withKnobs())
+  .add(`Toolbar`, () => ({
+    template: hbs`
+      <h5 class="title is-5">Toolbar</h5>
+      <section class="box is-fullwidth is-shadowless">
+        <h5 class="title is-6">Example for list views</h5>
+        <Toolbar>
+          <ToolbarFilters>
+            <div class="control has-icons-left">
+              <input class="filter input" placeholder="Filter keys" type="text">
+              <Icon @glyph="search" class="search-icon has-text-grey-light hs-icon-l" />
+            </div>
+          </ToolbarFilters>
+          <ToolbarActions>
+            <ToolbarLink
+              @type="add"
+              @params={{array ""}}
+            >
+              Add item
+            </ToolbarLink>
+          </ToolbarActions>
+        </Toolbar>
+      </section>
+
+      <section class="box is-fullwidth is-shadowless">
+        <h5 class="title is-6">Example for show views</h5>
+        <Toolbar>
+          <ToolbarActions>
+            <ConfirmAction
+              @buttonClasses="toolbar-link"
+            >
+              Delete
+            </ConfirmAction>
+            <ToolbarLink
+              @params={{array ""}}
+            >
+              Edit
+            </ToolbarLink>
+          </ToolbarActions>
+        </Toolbar>
+      </section>
+
+      <section class="box is-fullwidth is-shadowless">
+        <h5 class="title is-6">Example for code editor</h5>
+        <Toolbar>
+          <ToolbarFilters>
+            <div class="control">
+              <input
+                id="json"
+                type="checkbox"
+                name="json"
+                class="switch is-rounded is-success is-small"
+              />
+              <label for="json" class="has-text-grey">JSON</label>
+            </div>
+          </ToolbarFilters>
+          <ToolbarActions>
+            <ToolbarLink
+              @params={{array ""}}
+            >
+              Copy
+            </ToolbarLink>
+          </ToolbarActions>
+        </Toolbar>
+      </section>
+    `,
+    context: {
+      example: select('Example', ['List', 'Show', 'Code editor'], 'List'),
+    },
+  }),
+  {notes}
+);