Use the icon components internally (#486)

This is a good experiment to see if everything works, and it allows projects to skip the svg-symbolset download if they also refactor their own code.
appuniversum · Mar 25, 2024 · d56366a · d56366a
1 parent 0791d7a
commit d56366a
Show file tree

Hide file tree

Showing 17 changed files with 74 additions and 28 deletions.
diff --git a/addon/components/au-accordion.gts b/addon/components/au-accordion.gts
@@ -8,6 +8,8 @@ import AuContent from './au-content';
 import AuIcon, { type AuIconSignature } from './au-icon';
 import AuLoader from './au-loader';
 import AuToolbar from './au-toolbar';
+import { NavDownIcon } from './icons/nav-down';
+import { NavRightIcon } from './icons/nav-right';
 
 const autofocus = modifier(function autofocus(element: HTMLElement) {
   element.focus();
@@ -48,15 +50,15 @@ export default class AuAccordion extends Component<AuAccordionSignature> {
     if (this.args.iconOpen) {
       return this.args.iconOpen;
     } else {
-      return 'nav-down';
+      return NavDownIcon;
     }
   }
 
   get iconClosed() {
     if (this.args.iconClosed) {
       return this.args.iconClosed;
     } else {
-      return 'nav-right';
+      return NavRightIcon;
     }
   }
 

diff --git a/addon/components/au-alert.gts b/addon/components/au-alert.gts
@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import AuIcon, { type AuIconSignature } from './au-icon';
+import { CrossIcon } from './icons/cross';
 
 export interface AuAlertSignature {
   Args: {
@@ -79,7 +80,7 @@ export default class AuAlert extends Component<AuAlertSignature> {
             data-test-alert-close
             {{on "click" this.closeAlert}}
           >
-            <AuIcon @icon="cross" @size="large" />
+            <AuIcon @icon={{CrossIcon}} @size="large" />
             <span class="au-u-hidden-visually">Sluit</span>
           </button>
         {{/if}}

diff --git a/addon/components/au-card.gts b/addon/components/au-card.gts
@@ -7,6 +7,10 @@ import AuBadge from './au-badge';
 import AuButton from './au-button';
 import AuContent, { type AuContentSignature } from './au-content';
 import AuIcon, { type AuIconSignature } from './au-icon';
+import { AddIcon } from './icons/add';
+import { NavDownIcon } from './icons/nav-down';
+import { NavUpIcon } from './icons/nav-up';
+import { RemoveIcon } from './icons/remove';
 
 export interface AuCardSignature {
   Args: {
@@ -128,12 +132,16 @@ export default class AuCard extends Component<AuCardSignature> {
               aria-expanded={{if this.sectionOpen "true" "false"}}
             >
               {{#if this.sectionOpen}}
-                <AuIcon @icon="remove" @size="large" @ariaHidden={{true}} />
+                <AuIcon
+                  @icon={{RemoveIcon}}
+                  @size="large"
+                  @ariaHidden={{true}}
+                />
                 <span class="au-u-hidden-visually au-c-card__toggle-false">
                   Verberg
                 </span>
               {{else}}
-                <AuIcon @icon="add" @size="large" @ariaHidden={{true}} />
+                <AuIcon @icon={{AddIcon}} @size="large" @ariaHidden={{true}} />
                 <span class="au-u-hidden-visually au-c-card__toggle-true">
                   Toon
                 </span>
@@ -158,12 +166,20 @@ export default class AuCard extends Component<AuCardSignature> {
               aria-expanded={{if this.sectionOpen "true" "false"}}
             >
               {{#if this.sectionOpen}}
-                <AuIcon @icon="nav-up" @size="large" @ariaHidden={{true}} />
+                <AuIcon
+                  @icon={{NavUpIcon}}
+                  @size="large"
+                  @ariaHidden={{true}}
+                />
                 <span class="au-u-hidden-visually au-c-card__toggle-false">
                   Verberg
                 </span>
               {{else}}
-                <AuIcon @icon="nav-down" @size="large" @ariaHidden={{true}} />
+                <AuIcon
+                  @icon={{NavDownIcon}}
+                  @size="large"
+                  @ariaHidden={{true}}
+                />
                 <span class="au-u-hidden-visually au-c-card__toggle-true">
                   Toon
                 </span>

diff --git a/addon/components/au-data-table/number-pagination.hbs b/addon/components/au-data-table/number-pagination.hbs
@@ -12,7 +12,7 @@
         <li class="au-c-pagination__list-item">
           <AuButton
             @skin="link"
-            @icon="nav-left"
+            @icon={{this.NavLeftIcon}}
             {{action "changePage" this.links.prev}}
           >
             vorige
@@ -24,7 +24,7 @@
         <li class="au-c-pagination__list-item">
           <AuButton
             @skin="link"
-            @icon="nav-right"
+            @icon={{this.NavRightIcon}}
             @iconAlignment="right"
             {{action "changePage" this.links.next}}
           >

diff --git a/addon/components/au-data-table/number-pagination.js b/addon/components/au-data-table/number-pagination.js
@@ -1,9 +1,14 @@
 import NumberPagination from 'ember-data-table/components/number-pagination';
 import { computed } from '@ember/object';
+import { NavLeftIcon } from '../icons/nav-left';
+import { NavRightIcon } from '../icons/nav-right';
 
 export default NumberPagination.extend({
   tagName: '',
 
+  NavLeftIcon,
+  NavRightIcon,
+
   totalItems: computed('total', 'nbOfItems', function () {
     return this.total ? this.total : this.nbOfItems;
   }),

diff --git a/addon/components/au-data-table/text-search.hbs b/addon/components/au-data-table/text-search.hbs
@@ -5,6 +5,6 @@
     class="au-c-input au-c-input--block"
   />
   <span class="au-c-data-table__search-icon">
-    <AuIcon @icon="search" @size="large" />
+    <AuIcon @icon={{this.SearchIcon}} @size="large" />
   </span>
 </div>
diff --git a/addon/components/au-data-table/text-search.js b/addon/components/au-data-table/text-search.js
@@ -1,3 +1,6 @@
 import TextSearch from 'ember-data-table/components/text-search';
+import { SearchIcon } from '../icons/search';
 
-export default TextSearch.extend({});
+export default TextSearch.extend({
+  SearchIcon,
+});
diff --git a/addon/components/au-data-table/th-sortable.hbs b/addon/components/au-data-table/th-sortable.hbs
@@ -10,7 +10,7 @@
       class="au-c-data-table__sort"
     >
       <span class="au-u-hidden-visually">Oplopend sorteren</span>
-      <AuIcon @icon="nav-up" />
+      <AuIcon @icon={{this.NavUpIcon}} />
     </button>
   {{else if (eq this.order "asc")}}
     <button
@@ -19,7 +19,7 @@
       class="au-c-data-table__sort"
     >
       <span class="au-u-hidden-visually">Aflopend sorteren</span>
-      <AuIcon @icon="nav-down" />
+      <AuIcon @icon={{this.NavDownIcon}} />
     </button>
   {{else}}
     <button
@@ -28,7 +28,7 @@
       class="au-c-data-table__sort"
     >
       <span class="au-u-hidden-visually">Sorteren</span>
-      <AuIcon @icon="nav-up-down" />
+      <AuIcon @icon={{this.NavUpDownIcon}} />
     </button>
   {{/if}}
 </span>
diff --git a/addon/components/au-data-table/th-sortable.js b/addon/components/au-data-table/th-sortable.js
@@ -1,3 +1,10 @@
 import ThSortable from 'ember-data-table/components/th-sortable';
+import { NavDownIcon } from '../icons/nav-down';
+import { NavUpIcon } from '../icons/nav-up';
+import { NavUpDownIcon } from '../icons/nav-up-down';
 
-export default ThSortable.extend({});
+export default ThSortable.extend({
+  NavDownIcon,
+  NavUpIcon,
+  NavUpDownIcon,
+});
diff --git a/addon/components/au-date-input.gts b/addon/components/au-date-input.gts
@@ -3,6 +3,7 @@ import AuInput, { type AuInputSignature } from './au-input';
 import auDateInput, {
   type AuDateInputModifierSignature,
 } from '../modifiers/au-date-input';
+import { CalendarIcon } from './icons/calendar';
 
 export interface AuDateInputSignature {
   Args: {
@@ -23,7 +24,7 @@ export default class AuDateInput extends Component<AuDateInputSignature> {
     <AuInput
       @disabled={{@disabled}}
       @error={{@error}}
-      @icon="calendar"
+      @icon={{CalendarIcon}}
       @warning={{@warning}}
       @width={{@width}}
       autocomplete="off"

diff --git a/addon/components/au-dropdown.gjs b/addon/components/au-dropdown.gjs
@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { focusTrap } from 'ember-focus-trap';
 import { modifier } from 'ember-modifier';
+import { ChevronDownIcon } from './icons/chevron-down';
 
 export default class AuDropdown extends Component {
   @tracked referenceElement = undefined;
@@ -72,7 +73,7 @@ export default class AuDropdown extends Component {
 
   get icon() {
     if (this.args.icon) return this.args.icon;
-    else return 'chevron-down';
+    else return ChevronDownIcon;
   }
 
   get iconAlignment() {

diff --git a/addon/components/au-fieldset.gts b/addon/components/au-fieldset.gts
@@ -3,6 +3,8 @@ import { hash } from '@ember/helper';
 import Component from '@glimmer/component';
 import AuBadge from './au-badge';
 import AuPill from './au-pill';
+import { AlertTriangleIcon } from './icons/alert-triangle';
+import { CrossIcon } from './icons/cross';
 
 export interface AuFieldsetSignature {
   Args: {
@@ -86,15 +88,15 @@ class Legend extends Component<LegendSignature> {
         >
           {{#if this.warning}}
             <AuBadge
-              @icon="alert-triangle"
+              @icon={{AlertTriangleIcon}}
               @size="small"
               @skin="warning"
               class="au-u-margin-right-tiny"
             />
           {{/if}}
           {{#if this.error}}
             <AuBadge
-              @icon="cross"
+              @icon={{CrossIcon}}
               @size="small"
               @skin="error"
               class="au-u-margin-right-tiny"

diff --git a/addon/components/au-file-card.gts b/addon/components/au-file-card.gts
@@ -3,6 +3,8 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import AuHeading from './au-heading';
 import AuIcon from './au-icon';
+import { CrossIcon } from './icons/cross';
+import { DownloadIcon } from './icons/download';
 
 export interface AuFileCardSignature {
   Args: {
@@ -41,7 +43,7 @@ export default class AuFileCard extends Component<AuFileCardSignature> {
           data-test-file-card-delete
           {{on "click" this.delete}}
         >
-          <AuIcon @icon="cross" @size="large" />
+          <AuIcon @icon={{CrossIcon}} @size="large" />
           <span class="au-u-hidden-visually">Verwijderen</span>
         </button>
       {{/if}}
@@ -65,7 +67,7 @@ export default class AuFileCard extends Component<AuFileCardSignature> {
             download={{@filename}}
             data-test-file-card-download
           >
-            <AuIcon @icon="download" />
+            <AuIcon @icon={{DownloadIcon}} />
             Download bestand
           </a>
         </div>

diff --git a/addon/components/au-file-upload.gts b/addon/components/au-file-upload.gts
@@ -10,6 +10,8 @@ import type { FileQueueService, UploadFile } from 'ember-file-upload';
 import AuAlert from './au-alert';
 import AuHelpText from './au-help-text';
 import AuIcon from './au-icon';
+import { AttachmentIcon } from './icons/attachment';
+import { AlertTriangleIcon } from './icons/alert-triangle';
 
 export interface AuFileUploadSignature {
   Args: {
@@ -194,7 +196,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
       >
         {{#if dropzone.active}}
           <p class="au-c-file-upload-message">
-            <AuIcon @icon="attachment" @alignment="left" />
+            <AuIcon @icon={{AttachmentIcon}} @alignment="left" />
             <AuHelpText @skin="secondary">{{this.helpTextDragDrop}}</AuHelpText>
           </p>
         {{else if queue.files.length}}
@@ -212,7 +214,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
             />
             <span class="au-c-file-upload-label">
               <span class="au-c-file-upload-label__title">
-                <AuIcon @icon="attachment" @alignment="left" />
+                <AuIcon @icon={{AttachmentIcon}} @alignment="left" />
                 {{this.title}}
               </span>
               {{#if dropzone.supported}}
@@ -228,7 +230,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
 
     {{#if this.hasErrors}}
       <AuAlert
-        @icon="alert-triangle"
+        @icon={{AlertTriangleIcon}}
         @skin="error"
         @size="small"
         @closable={{false}}

diff --git a/addon/components/au-label.gts b/addon/components/au-label.gts
@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
 import AuBadge from './au-badge';
 import AuPill from './au-pill';
+import { AlertTriangleIcon } from './icons/alert-triangle';
+import { CrossIcon } from './icons/cross';
 
 export interface AuLabelSignature {
   Args: {
@@ -39,15 +41,15 @@ export default class AuLabel extends Component<AuLabelSignature> {
     >
       {{#if this.warning}}
         <AuBadge
-          @icon="alert-triangle"
+          @icon={{AlertTriangleIcon}}
           @size="small"
           @skin="warning"
           class="au-u-margin-right-tiny"
         />
       {{/if}}
       {{#if this.error}}
         <AuBadge
-          @icon="cross"
+          @icon={{CrossIcon}}
           @size="small"
           @skin="error"
           class="au-u-margin-right-tiny"

diff --git a/addon/components/au-main-header.gts b/addon/components/au-main-header.gts
@@ -6,6 +6,7 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import AuBrand from './au-brand';
 import AuLink from './au-link';
+import { QuestionCircleIcon } from './icons/question-circle';
 
 export interface AuMainHeaderSignature {
   Args: {
@@ -55,7 +56,7 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
               <AuLink
                 @route={{@contactRoute}}
                 @skin="secondary"
-                @icon="question-circle"
+                @icon={{QuestionCircleIcon}}
               >
                 Contacteer ons
               </AuLink>

diff --git a/addon/components/au-modal.gjs b/addon/components/au-modal.gjs
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { focusTrap } from 'ember-focus-trap';
+import { CrossIcon } from './icons/cross';
 import { cn } from '../private/helpers/class-names';
 
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
@@ -133,7 +134,7 @@ export default class AuModal extends Component {
               data-test-modal-close
               {{on "click" this.handleCloseClick}}
             >
-              <AuIcon @icon="cross" @size="large" />
+              <AuIcon @icon={{CrossIcon}} @size="large" />
               <span class="au-u-hidden-visually">Venster sluiten</span>
             </button>
           </div>