chore: 🤖 upgrade help and alert icons to flight

2021-08-18 11:53:44 -04:00
1 parent 2d32726207
commit 7f022fc64c
@@ -4,5 +4,5 @@
  target="_blank"
  rel="noreferrer noopener"
  title={{t "actions.get-topic-help"}}>
-  <Rose::Icon @name="help-circle-outline" @size={{@iconSize}} />
+  <Rose::Icon @name="flight/help-16" @size={{@iconSize}} />
 </a>
@@ -27,13 +27,12 @@ export default class ErrorMessageComponent extends MessageComponent {
  @computed('args.status')
  get icon() {
    switch (this.args.status) {
+      case '404':
+        return 'flight/help-16';
      case '401':
      case '403':
-        return 'disabled';
-      case '404':
-        return 'help-circle-outline';
      default:
-        return 'alert-circle-outline';
+        return 'flight/alert-circle-16';
    }
  }

@@ -1,4 +1,43 @@
 'use strict';
+
+var path = require('path');
+
 module.exports = {
  name: require('./package').name,
+
+  included(app) {
+    this._super.included.apply(this, arguments);
+    this.includePublic(app);
+    this.setupSVGO(app);
+  },
+
+  /**
+   * Finds the public folder and includes it into the ember-inline-svg addon.
+   */
+  includePublic(app) {
+    const publicPath = path.resolve('public');
+    const rosePublicPath = path.resolve('../rose/public');
+    const dummyPublicPath = path.resolve('tests/dummy/public');
+
+    app.options.svg = app.options.svg || {};
+    app.options.svg.paths = app.options.svg.paths || [];
+
+    app.options.svg.paths.push(publicPath);
+    app.options.svg.paths.push(rosePublicPath);
+    if (this.isDevelopingAddon()) app.options.svg.paths.push(dummyPublicPath);
+
+    this.addons.forEach((addon) => {
+      if (addon.name === 'ember-inline-svg') addon.included(app);
+    });
+  },
+
+  /**
+   * Adjust SVG optimizer defaults (used by ember-inline-svg).
+   */
+  setupSVGO(app) {
+    app.options.svg = app.options.svg || {};
+    app.options.svg.optimize = app.options.svg.optimize || {};
+    app.options.svg.optimize.plugins = app.options.svg.optimize.plugins || [];
+    app.options.svg.optimize.plugins.push({ removeViewBox: false });
+  },
 };
@@ -68,7 +68,7 @@ Disabling link button is not supported as it is an action on form components onl
 Similar to `Rose::Button`, icon only link button is supported.

 ```html
-<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="flight/help-16" />
 ```

 <Preview>
@@ -92,11 +92,11 @@ Similar to `Rose::Button`, icon only link button is supported.
        'iconOnly',
        {
          'check-circle-outline': 'check-circle-outline',
-          'help-circle-outline': 'help-circle-outline',
+          'flight/help-16': 'flight/help-16',
          'plus-circle-fill': 'plus-circle-fill',
          'user-square-outline': 'user-square-outline',
        },
-        'help-circle-outline'
+        'flight/help-16'
      ),
    },
  }}</Story>
@@ -33,18 +33,17 @@ Title can be configured with optional icon and subtitle.
      icon: select(
        'icon',
        {
-          'alert-circle-outline': 'alert-circle-outline',
-          'help-circle-outline': 'help-circle-outline',
-          'disabled': 'disabled',
+          'flight/alert-circle-16': 'flight/alert-circle-16',
+          'flight/help-16': 'flight/help-16',
        },
-        'help-circle-outline'
+        'flight/help-16'
      ),
    },
  }}</Story>
 </Preview>

 ```html
-<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="disabled" as |message|>
+<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="flight/alert-circle-16" as |message|>
  <message.description>
      You must be granted permissions to view this data. Ask your administrator
      if you think you should have access.
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(0, 0)">
+  <path d="M8 4C8.41421 4 8.75 4.33579 8.75 4.75L8.75 8.25C8.75 8.66421 8.41421 9 8 9C7.58579 9 7.25 8.66421 7.25 8.25L7.25 4.75C7.25 4.33579 7.58579 4 8 4Z" fill-rule="NONZERO"></path>
+  <path d="M8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12L8.00667 12C8.55895 12 9.00667 11.5523 9.00667 11C9.00667 10.4477 8.55895 10 8.00667 10L8 10Z" fill-rule="NONZERO"></path>
+  <path d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5Z" fill-rule="EVENODD"></path>
+ </g>
+</svg>
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(0, 0)">
+  <path d="M8.1969 4.52275C7.83582 4.45975 7.46375 4.52849 7.14594 4.7185C6.82781 4.9087 6.58324 5.20915 6.45878 5.56907C6.32341 5.96054 5.89632 6.16815 5.50485 6.03278C5.11338 5.89741 4.90577 5.47032 5.04114 5.07886C5.27962 4.3892 5.75141 3.80461 6.37621 3.43106C7.00132 3.05732 7.73786 2.91999 8.45475 3.04508C9.17148 3.17015 9.81887 3.54878 10.2837 4.11048C10.7481 4.67171 11.0009 5.37994 11 6.10959C10.9999 6.59724 10.9078 7.01534 10.7254 7.37628C10.5432 7.73694 10.2936 7.9952 10.0464 8.19341C9.85239 8.34899 9.63602 8.48431 9.46464 8.59149C9.431 8.61253 9.39909 8.63248 9.36942 8.65129C9.16778 8.77916 9.02667 8.87887 8.91689 8.99055C8.81461 9.0946 8.77388 9.18682 8.75706 9.23816C8.74978 9.26038 8.74659 9.27628 8.74537 9.28347C8.72786 9.68216 8.3991 10 7.9961 10C7.58189 10 7.2461 9.66422 7.2461 9.25C7.24626 9.08689 7.28103 8.92552 7.33163 8.77109C7.41129 8.52797 7.56353 8.22758 7.84718 7.93902C8.0857 7.69637 8.35223 7.52016 8.56613 7.38452C8.61117 7.35596 8.65343 7.32942 8.69337 7.30434C8.8616 7.1987 8.98859 7.11896 9.10803 7.02318C9.24074 6.91676 9.32751 6.81683 9.38666 6.69978C9.44562 6.5831 9.49996 6.4041 9.49996 6.10918L9.49996 6.10808C9.50052 5.72536 9.36781 5.35654 9.12803 5.06677C8.88848 4.77728 8.55813 4.58578 8.1969 4.52275Z" fill-rule="EVENODD"></path>
+  <path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13L8.00667 13C8.55895 13 9.00667 12.5523 9.00667 12C9.00667 11.4477 8.55895 11 8.00667 11L8 11Z" fill-rule="NONZERO"></path>
+  <path d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5Z" fill-rule="EVENODD"></path>
+ </g>
+</svg>
@@ -42,7 +42,7 @@ module('Integration | Component | rose/card/link', function (hooks) {

  test('it renders with @icon', async function (assert) {
    await render(
-      hbs`<Rose::Card::Link @title="foo" @icon="alert-circle-outline" />`
+      hbs`<Rose::Card::Link @title="foo" @icon="flight/alert-circle-16" />`
    );
    assert.ok(find('.rose-icon'));
  });
@@ -51,7 +51,7 @@ module('Integration | Component | rose/link-button', function (hooks) {

  test('it supports only icon with @iconOnly', async function (assert) {
    await render(
-      hbs`<Rose::LinkButton @route="index" @iconOnly="help-circle-outline" />`
+      hbs`<Rose::LinkButton @route="index" @iconOnly="flight/help-16" />`
    );
    assert.ok(find('.rose-icon'));
    assert.ok(find('.has-icon-only'));
@@ -8,7 +8,7 @@
        <Rose::Layout::Centered>
          <Rose::Message
            @title={{t 'auth.titles.no-scopes'}}
-            @icon='alert-circle-outline'
+            @icon='flight/alert-circle-16'
            as |message|
          >
            <message.description>
@@ -79,7 +79,7 @@
            <Rose::Layout::Centered>
              <Rose::Message
                @title={{t 'resources.auth-method.messages.none.title'}}
-                @icon='alert-circle-outline'
+                @icon='flight/alert-circle-16'
                as |message|
              >
                <message.description>
@@ -2,7 +2,7 @@
  <Rose::Layout::Centered>
    <Rose::Message
      @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='alert-circle-outline'
+      @icon='flight/alert-circle-16'
      as |message|
    >
      <message.description>
@@ -67,7 +67,7 @@
      <Rose::Layout::Centered>
        <Rose::Message
          @title={{t 'resources.auth-method.messages.none.title'}}
-          @icon='alert-circle-outline'
+          @icon='flight/alert-circle-16'
          as |message|
        >
          <message.description>
@@ -2,7 +2,7 @@
  <Rose::Layout::Centered>
    <Rose::Message
      @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='alert-circle-outline'
+      @icon='flight/alert-circle-16'
      as |message|
    >
      <message.description>