UI icon - add size (#6736)

* add size prop to icon component

* use size instead of css classes to adjust Icons

* add knobs for icon stories

ui/app/templates/components/alert-popup.hbs

@@ -3,7 +3,7 @@
     <div class="column is-narrow message-icon">
       <Icon
         aria-hidden="true"
-        class="hs-icon-l"
+        @size="l"
         @glyph="{{type.glyph}}"
       />
     </div>

ui/app/templates/components/console/command-input.hbs

@@ -7,7 +7,7 @@
   <input onkeyup={{action 'handleKeyUp'}} value={{value}} autocomplete="off" spellcheck="false" />
   {{#tool-tip horizontalPosition="auto-right" verticalPosition=(if isFullscreen "above" "below") as |d|}}
     {{#d.trigger tagName="button" type="button" class=(concat "button is-compact" (if isFullscreen " active")) click=(action "fullscreen") data-test-tool-tip-trigger=true}}
-    <Icon class="hs-icon-l" @glyph={{if isFullscreen "expand-less" "expand-more"}} aria-label={{if isFullscreen "Minimize" "Maximize"}} />
+    <Icon @size="l" @glyph={{if isFullscreen "expand-less" "expand-more"}} aria-label={{if isFullscreen "Minimize" "Maximize"}} />
     {{/d.trigger}}
     {{#d.content class="tool-tip"}}
       <div class="box">

ui/app/templates/components/kv-object-editor.hbs

@@ -44,7 +44,7 @@
           aria-label="Delete row"
           data-test-kv-delete-row
         >
-        <Icon @glyph="trash" class="hs-icon-l" />
+        <Icon @glyph="trash" @size="l" />
         </button>
       {{/if}}
     </div>

ui/app/templates/components/license-info.hbs

@@ -71,10 +71,20 @@
     {{#each featuresInfo as |info|}}
       {{#info-table-row label=info.name value=(if info.active "Active" "Not Active") data-test-feature-row="data-test-feature-row"}}
         {{#if info.active}}
-        <Icon @glyph="check-circle-outline" class="hs-icon-l icon-true" aria-hidden="true" /> <span data-test-feature-status>Active {{#if info.count}}&mdash;
+        <Icon
+          @glyph="check-circle-outline"
+          @size="l"
+          class="icon-true"
+          aria-hidden="true"
+        /><span data-test-feature-status>Active {{#if info.count}}&mdash;
          {{info.count}} standby nodes allotted{{/if}}</span>
         {{else}}
-          <Icon @glyph="cancel-circle-outline" class="hs-icon-l icon-false" aria-hidden="true" /> <span data-test-feature-status>Not Active</span>
+          <Icon
+            @glyph="cancel-circle-outline"
+            @size="l"
+            class="icon-false"
+            aria-hidden="true"
+          /><span data-test-feature-status>Not Active</span>
         {{/if}}
       {{/info-table-row}}
     {{/each}}

ui/app/templates/components/mount-backend-form.hbs

@@ -5,7 +5,8 @@
         {{#with (find-by "type" mountModel.type mountTypes) as |typeInfo|}}
           <Icon
             @glyph={{or typeInfo.glyph typeInfo.type}}
-            class="has-text-grey-light hs-icon-l"
+            @size="l"
+            class="has-text-grey-light"
            />
 
           {{#if (eq mountType "auth")}}
@@ -57,7 +58,8 @@
             >
               <Icon
                 @glyph={{or type.glyph type.type}}
-                class="has-text-grey-light hs-icon-xl"
+                @size="xl"
+                class="has-text-grey-light"
                />
 
               {{type.displayName}}

ui/app/templates/components/navigate-input.hbs

@@ -13,6 +13,6 @@
     onfocus={{action "setFilterFocused" true}}
     onblur={{action "setFilterFocused" false}}
    />
-    <Icon @glyph="search" class="search-icon has-text-grey-light hs-icon-l" />
+    <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
   </p>
 </div>

ui/app/templates/components/secret-edit-display.hbs

@@ -94,7 +94,8 @@
             >
               <Icon
                 @glyph="trash"
-                class="hs-icon-l has-text-grey-light"
+                @size="l"
+                class="has-text-grey-light"
               />
             </button>
           {{/if}}

ui/app/templates/components/secret-list-header.hbs

@@ -16,7 +16,11 @@
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
-        <Icon @glyph={{or model.engineType "secrets"}} class="hs-icon-xl has-text-grey-light" />
+        <Icon
+          @glyph={{or model.engineType "secrets"}}
+          @size="xl"
+          class="has-text-grey-light"
+        />
         {{model.id}}
         {{#if (eq model.options.version 2)}}
           <span class="tag">

ui/app/templates/components/status-menu.hbs

@@ -1,6 +1,6 @@
 {{#basic-dropdown-hover horizontalPosition="auto-left" verticalPosition="below" renderInPlace=media.isMobile as |d|}}
   {{#d.trigger tagName=(if (eq type "replication") "span" "button") class=(if (eq type "replication") "" "button is-transparent")}}
-    <Icon @glyph={{glyphName}} class="hs-icon-l" @aria-label={{ariaLabel}} />
+    <Icon @glyph={{glyphName}} @size="l" aria-label={{ariaLabel}} />
     <div class="status-menu-label">
       {{label}}
     </div>

ui/app/templates/components/string-list.hbs

@@ -40,7 +40,7 @@
           data-test-string-list-button="delete"
           {{action "removeInput" index}}
         >
-          <Icon @glyph="trash" class="hs-icon-l" />
+          <Icon @glyph="trash" @size="l" />
         </button>
       {{/if}}
     </div>

ui/app/templates/components/wizard-content.hbs

@@ -13,7 +13,7 @@
     </PopupMenu>
   {{/unless}}
   <h1 class="title is-5">
-    <Icon @glyph={{glyph}} class="hs-icon-l"/> {{headerText}}
+    <Icon @glyph={{glyph}} @size="l"/> {{headerText}}
   </h1>
   {{#if showProgress}}
     <ToolTip @verticalPosition="below" as |T|>

ui/app/templates/components/wizard-section.hbs

@@ -1,7 +1,7 @@
 <div class="wizard-section {{class}}">
   <h2 class="title is-6">
     {{#if headerIcon}}
-      <Icon @glyph={{headerIcon}} class="hs-icon-l" aria-hidden="true" />
+      <Icon @glyph={{headerIcon}} @size="l" aria-hidden="true" />
     {{/if}}
     {{headerText}}
   </h2>

ui/app/templates/vault.hbs

@@ -2,7 +2,11 @@
 {{outlet}}
   <footer class="footer has-text-grey has-text-centered">
     <span class="is-inline-block">
-      <Icon @glyph="hashicorp" aria-hidden="true" class="hs-icon-l has-text-grey-light" />
+      <Icon
+        @glyph="hashicorp"
+        @size="l"
+        aria-hidden="true"
+        class="has-text-grey-light" />
       &copy; {{date-format (now) "YYYY"}} HashiCorp
     </span>
     <span>

ui/app/templates/vault/cluster.hbs

@@ -3,7 +3,7 @@
     as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item has-text-white has-current-color-fill">
-        <Icon @glyph="vault-logo" class="hs-icon-l" />
+        <Icon @glyph="vault-logo" @size="l" />
       </HomeLink>
     </Nav.home>
     <Nav.main>
@@ -76,7 +76,7 @@
       <div class="navbar-item">
         <button type="button" class="button is-transparent nav-console-button{{if consoleOpen " popup-open"}}"
           {{action (queue (action 'toggleConsole') (action Nav.closeDrawer))}} data-test-console-toggle>
-          <Icon @glyph="console" class="hs-icon-l" />
+          <Icon @glyph="console" @size="l" />
           <div class="status-menu-label">
             Console
           </div>

ui/app/templates/vault/cluster/access/methods.hbs

@@ -35,7 +35,10 @@
                   )
                   method.methodType
                   "auth"
-                }} @class="hs-icon-l has-text-grey-light"/>
+                }}
+                @size="l"
+                class="has-text-grey-light"
+                />
             </T.trigger>
             <T.content @class="tool-tip">
               <div class="box">

ui/app/templates/vault/cluster/secrets/backends.hbs

@@ -29,7 +29,11 @@
         <div>
           <ToolTip @horizontalPosition="left" as |T|>
             <T.trigger>
-              <Icon @glyph={{or backend.engineType "secrets"}} class="hs-icon-l has-text-grey-light" />
+              <Icon
+                @glyph={{or backend.engineType "secrets"}}
+                @size="l"
+                class="has-text-grey-light"
+              />
             </T.trigger>
             <T.content @class="tool-tip">
               <div class="box">
@@ -102,7 +106,10 @@
           <div data-test-secret-path class="has-text-weight-semibold has-text-grey">
             <ToolTip @horizontalPosition="left" as |T|>
               <T.trigger>
-                <Icon @glyph={{or backend.engineType "secrets"}} class="has-text-grey-light"/>
+                <Icon
+                  @glyph={{or backend.engineType "secrets"}}
+                  class="has-text-grey-light"
+                />
               </T.trigger>
               <T.content @class="tool-tip">
                 <div class="box">

ui/app/templates/vault/not-found.hbs

@@ -2,7 +2,7 @@
   <nav class="navbar is-grouped-split">
     <div class="navbar-brand">
       <HomeLink @class="navbar-item has-text-white has-current-color-fill">
-        <Icon @glyph="vault-logo" class="hs-icon-l" />
+        <Icon @glyph="vault-logo" @size="l" />
       </HomeLink>
     </div>
   </nav>

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

@@ -7,13 +7,30 @@
  * <Icon @glyph="cancel-square-outline" />
  * ```
  * @param glyph=null {String} - The name of the SVG to render inline.
+ * @param [size='m'] {String} - The size of the Icon, can be one of 's', 'm', 'l', 'xl', 'xxl'. The default is 'm'.
  *
  */
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { assert } from '@ember/debug';
 import layout from '../templates/components/icon';
 
+const SIZES = ['s', 'm', 'l', 'xl', 'xxl'];
+
 export default Component.extend({
   tagName: '',
   layout,
   glyph: null,
+  size: 'm',
+  sizeClass: computed('size', function() {
+    let { size } = this;
+    assert(
+      `The size property of ${this.toString()} must be one of the following: ${SIZES.join(', ')}`,
+      SIZES.includes(size)
+    );
+    if (size === 'm') {
+      return '';
+    }
+    return `hs-icon-${size}`;
+  }),
 });

ui/lib/core/addon/templates/components/alert-banner.hbs

@@ -2,7 +2,8 @@
   <div class="columns is-mobile is-variable is-1">
     <div class="column is-narrow message-icon">
       <Icon
-        class="hs-icon-l {{alertType.glyphClass}}"
+        @size="l"
+        class="{{alertType.glyphClass}}"
         aria-hidden=true
         @glyph={{alertType.glyph}}
       />

ui/lib/core/addon/templates/components/icon.hbs

@@ -1,3 +1,3 @@
-<span class="hs-icon {{class}}" ...attributes>
+<span class="hs-icon {{sizeClass}} {{class}}" ...attributes>
   {{svg-jar @glyph}}
 </span>

ui/lib/core/addon/templates/components/info-table-row.hbs

@@ -9,13 +9,15 @@
       {{#if value}}
         <Icon
           aria-hidden="true"
-          class="hs-icon-l icon-true"
+          class="icon-true"
+          @size="l"
           @glyph="check-circle-outline"
         /> Yes
       {{else}}
         <Icon
           aria-hidden="true"
-          class="hs-icon-l icon-false"
+          class="icon-false"
+          @size="l"
           @glyph="cancel-circle-outline"
         /> No
       {{/if}}

ui/lib/core/addon/templates/components/upgrade-link.hbs

@@ -7,7 +7,7 @@
     <div class="modal-background"></div>
     <div class="modal-content">
       <h2 class="title upgrade-overlay-title is-2 has-text-white">
-        <Icon @glyph="edition-enterprise" aria-hidden="true" class="hs-icon-xl" />
+        <Icon @glyph="edition-enterprise" aria-hidden="true" @size="xl" />
         Try Vault Enterprise free for 30 days
       </h2>
       <h3 class="title is-5 has-text-white">

ui/lib/replication/addon/templates/components/replication-summary.hbs

@@ -39,7 +39,7 @@
         {{#if (eq initialReplicationMode 'dr')}}
           <h3 class="title is-flex-center is-5 is-marginless">
             <Icon
-              class="hs-icon-xl"
+              @size="xl"
               aria-hidden="true"
               @glyph="replication"
             />
@@ -51,7 +51,7 @@
         {{else if (eq initialReplicationMode 'performance')}}
           <h3 class="title is-flex-center is-5 is-marginless">
             <Icon
-              class="hs-icon-xl"
+              @size="xl"
               aria-hidden="true"
               @glyph="perf-replication"
             />
@@ -80,7 +80,7 @@
               <div>
                 <h3 class="box-label-header title is-6">
                   <Icon
-                    class="hs-icon-xl"
+                    @size="xl"
                     aria-hidden="true"
                     @glyph="replication"
                   />
@@ -106,7 +106,7 @@
               <div>
                 <h3 class="box-label-header title is-6">
                   <Icon
-                    class="hs-icon-xl"
+                    @size="xl"
                     aria-hidden="true"
                     @glyph="perf-replication"
                   />
@@ -286,7 +286,7 @@
   <div class="box is-sideless is-fullwidth is-marginless">
     <h3 class="title is-flex-center is-5 is-marginless">
       <Icon
-        class="hs-icon-xl"
+        @size="xl"
         aria-hidden="true"
         @glyph="replication"
       />
@@ -315,7 +315,7 @@
   <div class="box is-bottomless is-fullwidth is-marginless">
     <h3 class="title is-flex-center is-5 is-marginless">
       <Icon
-        class="hs-icon-xl"
+        @size="xl"
         aria-hidden="true"
         @glyph="perf-replication"
       />

ui/stories/icon.stories.js

@@ -3,9 +3,11 @@ 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';
 
 storiesOf('Icon/', module)
-  .addParameters({ options: { showPanel: false } })
+  .addParameters({ options: { showPanel: true} })
+  .addDecorator(withKnobs())
   .add(
     'Icon',
     () => ({
@@ -25,7 +27,7 @@ storiesOf('Icon/', module)
                 <h5>{{humanize type}}</h5>
               </td>
               <td>
-                <Icon @glyph={{type}} />
+                <Icon @glyph={{type}} @size={{size}} />
               </td>
             </tr>
           {{/each}}
@@ -34,6 +36,7 @@ storiesOf('Icon/', module)
       `,
       context: {
         types: icons,
+        size: select('Size', ['s', 'm', 'l', 'xl', 'xxl'], 'm'),
       },
     }),
     { notes }

ui/tests/integration/components/icon-test.js

@@ -2,6 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import waitForError from 'vault/tests/helpers/wait-for-error';
 
 module('Integration | Component | icon', function(hooks) {
   setupRenderingTest(hooks);
@@ -18,5 +19,13 @@ module('Integration | Component | icon', function(hooks) {
 
     await render(hbs`<Icon class="al" aria-label="Testing" />`);
     assert.dom('.al').hasAttribute('aria-label', 'Testing', 'renders aria-label');
+
+    await render(hbs`<Icon @glyph="vault-logo" @size="s"/>`);
+    assert.dom('.hs-icon').hasClass('hs-icon-s', 'adds the size class');
+
+    let promise = waitForError();
+    render(hbs`<Icon @glyph="vault-logo" @size="no"/>`);
+    let err = await promise;
+    assert.ok(err.message.includes('The size property of'), "errors when passed a size that's not allowed");
   });
 });