Load icons from sprite file

.github/workflows/auto-merge.yml

@@ -14,7 +14,6 @@ jobs:
         - "@formatjs/intl-locale"
         - "@formatjs/intl-pluralrules"
         - "@formatjs/intl-relativetimeformat"
-        - "@fortawesome"
         - "@percy/cli"
         - "@percy/ember"
         - "broccoli-file-creator"

addon/components/editable-field.hbs

@@ -39,7 +39,7 @@
                 {{/if}}
               </button>
               {{#if isTruncated}}
-                <FaIcon @icon="ellipsis" @transform="down-6" />
+                <EllipsisIcon />
                 <button
                   class="expand-text-button"
                   type="button"

addon/components/ellipsis-icon.hbs

@@ -0,0 +1,14 @@
+<svg
+  class="fa-ellipsis awesome-icon"
+  aria-hidden="true"
+  focusable="false"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <g transform="translate(224 256)">
+    <g transform="translate(0, 192)">
+      <use xlink:href="/fontawesome/solid.svg#ellipsis" transform="translate(-224 -256)"></use>
+    </g>
+  </g>
+</svg>

addon/components/fa-icon.hbs

@@ -0,0 +1,21 @@
+{{! template-lint-disable eol-last }}
+<svg
+  class="awesome-icon fa-{{@icon}} {{if @spin "spin"}} {{this.flip}} {{if @listItem "list-item"}}"
+  data-icon={{@icon}}
+  aria-hidden={{this.ariaHidden}}
+  focusable={{this.focusable}}
+  role="img"
+  fill="currentColor"
+  aria-labelledby={{this.titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{this.titleId}}>{{@title}}</title>
+  {{/if}}
+
+  {{#if (eq @prefix "brands")}}
+    <use xlink:href="/fontawesome/brands.svg#{{@icon}}"></use>
+  {{else}}
+    <use xlink:href="/fontawesome/solid.svg#{{@icon}}"></use>
+  {{/if}}
+</svg>

addon/components/fa-icon.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+
+export default class FaIconComponent extends Component {
+  get uniqueId() {
+    return guidFor(this);
+  }
+
+  get titleId() {
+    if (!this.args.title) {
+      return null;
+    }
+
+    return `inline-title-${this.uniqueId}`;
+  }
+
+  get ariaHidden() {
+    return this.args.title ? 'false' : 'true';
+  }
+
+  get focusable() {
+    return this.args.title ? 'true' : 'false';
+  }
+
+  get flip() {
+    if (this.args.flip === 'horizontal') {
+      return 'flip-horizontal';
+    }
+
+    if (this.args.flip === 'vertical') {
+      return 'flip-vertical';
+    }
+
+    if (this.args.flip === 'both') {
+      return 'flip-horizontal flip-vertical';
+    }
+
+    return '';
+  }
+}

addon/components/lm-type-icon.hbs

@@ -1,8 +1,8 @@
-<FaIcon 
+<FaIcon
   class="lm-type-icon"
   @icon={{this.icon}}
   @listItem={{@listItem}}
   @fixedWidth={{@fixedWidth}}
   @title={{t this.title}}
-  data-test-lm-type-icon 
+  data-test-lm-type-icon
 />

addon/components/truncate-text.hbs

@@ -4,7 +4,7 @@
   <span class="truncate-text" data-test-truncate-text ...attributes>
     {{this.displayText}}
     {{#if this.isTruncated}}
-      <FaIcon @icon="ellipsis" @transform="down-6"/>
+      <EllipsisIcon />
       <button
         class="expand-buttons"
         aria-label={{t "general.expand"}}

app/components/ellipsis-icon.js

@@ -0,0 +1 @@
+export { default } from 'ilios-common/components/ellipsis-icon';

app/components/fa-icon.js

@@ -0,0 +1 @@
+export { default } from 'ilios-common/components/fa-icon';

app/styles/ilios-common/components.scss

@@ -1,4 +1,5 @@
 @import "components/api-version-notice";
+@import "components/awesome-icon";
 @import "components/back-link";
 @import "components/body";
 @import "components/breadcrumbs";
@@ -48,6 +49,7 @@
 @import "components/detail-taxonomies";
 @import "components/detail-terms-list";
 @import "components/editinplace";
+@import "components/ellipsis-icon";
 @import "components/event-not-found";
 @import "components/flatpickr";
 @import "components/html-editor";

app/styles/ilios-common/components/awesome-icon.scss

@@ -0,0 +1,63 @@
+/*!
+ * Copied and Modified from https://fontawesome.com/license/free [MIT]
+ */
+
+.awesome-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  line-height: 1; /* stylelint-disable-line property-disallowed-list */
+  text-rendering: auto;
+
+  &.spin {
+    animation-name: awesome-spin;
+    animation-delay: 0s;
+    animation-direction: normal;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-delay: -1ms;
+      animation-duration: 1ms;
+      animation-iteration-count: 1;
+      transition-delay: 0s;
+      transition-duration: 0s;
+    }
+  }
+
+  &.fixed-width {
+    text-align: center;
+    width: 1.25em;
+  }
+
+  &.list-item {
+    left: calc(var(--fa-li-width, 2em) * -1);
+    position: absolute;
+    text-align: center;
+    width: var(--fa-li-width, 2em);
+    line-height: inherit; /* stylelint-disable-line property-disallowed-list */
+  }
+
+  &.flip-horizontal {
+    transform: scale(-1, 1);
+  }
+
+  &.flip-vertical {
+    transform: scale(1, -1);
+  }
+
+  @keyframes awesome-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

app/styles/ilios-common/components/ellipsis-icon.scss

@@ -0,0 +1,3 @@
+.ellipsis-icon {
+  transform-origin: 0.4375em 0.875em;
+}

ember-cli-build.js

@@ -2,6 +2,7 @@
 /* eslint camelcase: 0 */
 
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+const broccoliAssetRevDefaults = require('broccoli-asset-rev/lib/default-options');
 
 module.exports = function (defaults) {
   const app = new EmberAddon(defaults, {
@@ -18,6 +19,9 @@ module.exports = function (defaults) {
     'ember-simple-auth': {
       useSessionSetupMethod: true, //can be removed in ESA v5.x
     },
+    fingerprint: {
+      extensions: broccoliAssetRevDefaults.extensions.concat(['svg']),
+    },
   });
 
   /*