Skip to content

Commit d56366a

Browse files
WindvisWindvis
authored
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.
1 parent 0791d7a commit d56366a

17 files changed

+74
-28
lines changed

‎addon/components/au-accordion.gts

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import AuContent from './au-content';
88
import AuIcon, { type AuIconSignature } from './au-icon';
99
import AuLoader from './au-loader';
1010
import AuToolbar from './au-toolbar';
11+
import { NavDownIcon } from './icons/nav-down';
12+
import { NavRightIcon } from './icons/nav-right';
1113

1214
const autofocus = modifier(function autofocus(element: HTMLElement) {
1315
element.focus();
@@ -48,15 +50,15 @@ export default class AuAccordion extends Component<AuAccordionSignature> {
4850
if (this.args.iconOpen) {
4951
return this.args.iconOpen;
5052
} else {
51-
return 'nav-down';
53+
return NavDownIcon;
5254
}
5355
}
5456

5557
get iconClosed() {
5658
if (this.args.iconClosed) {
5759
return this.args.iconClosed;
5860
} else {
59-
return 'nav-right';
61+
return NavRightIcon;
6062
}
6163
}
6264

‎addon/components/au-alert.gts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { action } from '@ember/object';
33
import Component from '@glimmer/component';
44
import { tracked } from '@glimmer/tracking';
55
import AuIcon, { type AuIconSignature } from './au-icon';
6+
import { CrossIcon } from './icons/cross';
67

78
export interface AuAlertSignature {
89
Args: {
@@ -79,7 +80,7 @@ export default class AuAlert extends Component<AuAlertSignature> {
7980
data-test-alert-close
8081
{{on "click" this.closeAlert}}
8182
>
82-
<AuIcon @icon="cross" @size="large" />
83+
<AuIcon @icon={{CrossIcon}} @size="large" />
8384
<span class="au-u-hidden-visually">Sluit</span>
8485
</button>
8586
{{/if}}

‎addon/components/au-card.gts

+20-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import AuBadge from './au-badge';
77
import AuButton from './au-button';
88
import AuContent, { type AuContentSignature } from './au-content';
99
import AuIcon, { type AuIconSignature } from './au-icon';
10+
import { AddIcon } from './icons/add';
11+
import { NavDownIcon } from './icons/nav-down';
12+
import { NavUpIcon } from './icons/nav-up';
13+
import { RemoveIcon } from './icons/remove';
1014

1115
export interface AuCardSignature {
1216
Args: {
@@ -128,12 +132,16 @@ export default class AuCard extends Component<AuCardSignature> {
128132
aria-expanded={{if this.sectionOpen "true" "false"}}
129133
>
130134
{{#if this.sectionOpen}}
131-
<AuIcon @icon="remove" @size="large" @ariaHidden={{true}} />
135+
<AuIcon
136+
@icon={{RemoveIcon}}
137+
@size="large"
138+
@ariaHidden={{true}}
139+
/>
132140
<span class="au-u-hidden-visually au-c-card__toggle-false">
133141
Verberg
134142
</span>
135143
{{else}}
136-
<AuIcon @icon="add" @size="large" @ariaHidden={{true}} />
144+
<AuIcon @icon={{AddIcon}} @size="large" @ariaHidden={{true}} />
137145
<span class="au-u-hidden-visually au-c-card__toggle-true">
138146
Toon
139147
</span>
@@ -158,12 +166,20 @@ export default class AuCard extends Component<AuCardSignature> {
158166
aria-expanded={{if this.sectionOpen "true" "false"}}
159167
>
160168
{{#if this.sectionOpen}}
161-
<AuIcon @icon="nav-up" @size="large" @ariaHidden={{true}} />
169+
<AuIcon
170+
@icon={{NavUpIcon}}
171+
@size="large"
172+
@ariaHidden={{true}}
173+
/>
162174
<span class="au-u-hidden-visually au-c-card__toggle-false">
163175
Verberg
164176
</span>
165177
{{else}}
166-
<AuIcon @icon="nav-down" @size="large" @ariaHidden={{true}} />
178+
<AuIcon
179+
@icon={{NavDownIcon}}
180+
@size="large"
181+
@ariaHidden={{true}}
182+
/>
167183
<span class="au-u-hidden-visually au-c-card__toggle-true">
168184
Toon
169185
</span>

‎addon/components/au-data-table/number-pagination.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<li class="au-c-pagination__list-item">
1313
<AuButton
1414
@skin="link"
15-
@icon="nav-left"
15+
@icon={{this.NavLeftIcon}}
1616
{{action "changePage" this.links.prev}}
1717
>
1818
vorige
@@ -24,7 +24,7 @@
2424
<li class="au-c-pagination__list-item">
2525
<AuButton
2626
@skin="link"
27-
@icon="nav-right"
27+
@icon={{this.NavRightIcon}}
2828
@iconAlignment="right"
2929
{{action "changePage" this.links.next}}
3030
>

‎addon/components/au-data-table/number-pagination.js

+5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import NumberPagination from 'ember-data-table/components/number-pagination';
22
import { computed } from '@ember/object';
3+
import { NavLeftIcon } from '../icons/nav-left';
4+
import { NavRightIcon } from '../icons/nav-right';
35

46
export default NumberPagination.extend({
57
tagName: '',
68

9+
NavLeftIcon,
10+
NavRightIcon,
11+
712
totalItems: computed('total', 'nbOfItems', function () {
813
return this.total ? this.total : this.nbOfItems;
914
}),

‎addon/components/au-data-table/text-search.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
class="au-c-input au-c-input--block"
66
/>
77
<span class="au-c-data-table__search-icon">
8-
<AuIcon @icon="search" @size="large" />
8+
<AuIcon @icon={{this.SearchIcon}} @size="large" />
99
</span>
1010
</div>

‎addon/components/au-data-table/text-search.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
import TextSearch from 'ember-data-table/components/text-search';
2+
import { SearchIcon } from '../icons/search';
23

3-
export default TextSearch.extend({});
4+
export default TextSearch.extend({
5+
SearchIcon,
6+
});

‎addon/components/au-data-table/th-sortable.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
class="au-c-data-table__sort"
1111
>
1212
<span class="au-u-hidden-visually">Oplopend sorteren</span>
13-
<AuIcon @icon="nav-up" />
13+
<AuIcon @icon={{this.NavUpIcon}} />
1414
</button>
1515
{{else if (eq this.order "asc")}}
1616
<button
@@ -19,7 +19,7 @@
1919
class="au-c-data-table__sort"
2020
>
2121
<span class="au-u-hidden-visually">Aflopend sorteren</span>
22-
<AuIcon @icon="nav-down" />
22+
<AuIcon @icon={{this.NavDownIcon}} />
2323
</button>
2424
{{else}}
2525
<button
@@ -28,7 +28,7 @@
2828
class="au-c-data-table__sort"
2929
>
3030
<span class="au-u-hidden-visually">Sorteren</span>
31-
<AuIcon @icon="nav-up-down" />
31+
<AuIcon @icon={{this.NavUpDownIcon}} />
3232
</button>
3333
{{/if}}
3434
</span>

‎addon/components/au-data-table/th-sortable.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
import ThSortable from 'ember-data-table/components/th-sortable';
2+
import { NavDownIcon } from '../icons/nav-down';
3+
import { NavUpIcon } from '../icons/nav-up';
4+
import { NavUpDownIcon } from '../icons/nav-up-down';
25

3-
export default ThSortable.extend({});
6+
export default ThSortable.extend({
7+
NavDownIcon,
8+
NavUpIcon,
9+
NavUpDownIcon,
10+
});

‎addon/components/au-date-input.gts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import AuInput, { type AuInputSignature } from './au-input';
33
import auDateInput, {
44
type AuDateInputModifierSignature,
55
} from '../modifiers/au-date-input';
6+
import { CalendarIcon } from './icons/calendar';
67

78
export interface AuDateInputSignature {
89
Args: {
@@ -23,7 +24,7 @@ export default class AuDateInput extends Component<AuDateInputSignature> {
2324
<AuInput
2425
@disabled={{@disabled}}
2526
@error={{@error}}
26-
@icon="calendar"
27+
@icon={{CalendarIcon}}
2728
@warning={{@warning}}
2829
@width={{@width}}
2930
autocomplete="off"

‎addon/components/au-dropdown.gjs

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
77
import { tracked } from '@glimmer/tracking';
88
import { focusTrap } from 'ember-focus-trap';
99
import { modifier } from 'ember-modifier';
10+
import { ChevronDownIcon } from './icons/chevron-down';
1011

1112
export default class AuDropdown extends Component {
1213
@tracked referenceElement = undefined;
@@ -72,7 +73,7 @@ export default class AuDropdown extends Component {
7273

7374
get icon() {
7475
if (this.args.icon) return this.args.icon;
75-
else return 'chevron-down';
76+
else return ChevronDownIcon;
7677
}
7778

7879
get iconAlignment() {

‎addon/components/au-fieldset.gts

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { hash } from '@ember/helper';
33
import Component from '@glimmer/component';
44
import AuBadge from './au-badge';
55
import AuPill from './au-pill';
6+
import { AlertTriangleIcon } from './icons/alert-triangle';
7+
import { CrossIcon } from './icons/cross';
68

79
export interface AuFieldsetSignature {
810
Args: {
@@ -86,15 +88,15 @@ class Legend extends Component<LegendSignature> {
8688
>
8789
{{#if this.warning}}
8890
<AuBadge
89-
@icon="alert-triangle"
91+
@icon={{AlertTriangleIcon}}
9092
@size="small"
9193
@skin="warning"
9294
class="au-u-margin-right-tiny"
9395
/>
9496
{{/if}}
9597
{{#if this.error}}
9698
<AuBadge
97-
@icon="cross"
99+
@icon={{CrossIcon}}
98100
@size="small"
99101
@skin="error"
100102
class="au-u-margin-right-tiny"

‎addon/components/au-file-card.gts

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { action } from '@ember/object';
33
import Component from '@glimmer/component';
44
import AuHeading from './au-heading';
55
import AuIcon from './au-icon';
6+
import { CrossIcon } from './icons/cross';
7+
import { DownloadIcon } from './icons/download';
68

79
export interface AuFileCardSignature {
810
Args: {
@@ -41,7 +43,7 @@ export default class AuFileCard extends Component<AuFileCardSignature> {
4143
data-test-file-card-delete
4244
{{on "click" this.delete}}
4345
>
44-
<AuIcon @icon="cross" @size="large" />
46+
<AuIcon @icon={{CrossIcon}} @size="large" />
4547
<span class="au-u-hidden-visually">Verwijderen</span>
4648
</button>
4749
{{/if}}
@@ -65,7 +67,7 @@ export default class AuFileCard extends Component<AuFileCardSignature> {
6567
download={{@filename}}
6668
data-test-file-card-download
6769
>
68-
<AuIcon @icon="download" />
70+
<AuIcon @icon={{DownloadIcon}} />
6971
Download bestand
7072
</a>
7173
</div>

‎addon/components/au-file-upload.gts

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import type { FileQueueService, UploadFile } from 'ember-file-upload';
1010
import AuAlert from './au-alert';
1111
import AuHelpText from './au-help-text';
1212
import AuIcon from './au-icon';
13+
import { AttachmentIcon } from './icons/attachment';
14+
import { AlertTriangleIcon } from './icons/alert-triangle';
1315

1416
export interface AuFileUploadSignature {
1517
Args: {
@@ -194,7 +196,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
194196
>
195197
{{#if dropzone.active}}
196198
<p class="au-c-file-upload-message">
197-
<AuIcon @icon="attachment" @alignment="left" />
199+
<AuIcon @icon={{AttachmentIcon}} @alignment="left" />
198200
<AuHelpText @skin="secondary">{{this.helpTextDragDrop}}</AuHelpText>
199201
</p>
200202
{{else if queue.files.length}}
@@ -212,7 +214,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
212214
/>
213215
<span class="au-c-file-upload-label">
214216
<span class="au-c-file-upload-label__title">
215-
<AuIcon @icon="attachment" @alignment="left" />
217+
<AuIcon @icon={{AttachmentIcon}} @alignment="left" />
216218
{{this.title}}
217219
</span>
218220
{{#if dropzone.supported}}
@@ -228,7 +230,7 @@ export default class AuFileUpload extends Component<AuFileUploadSignature> {
228230

229231
{{#if this.hasErrors}}
230232
<AuAlert
231-
@icon="alert-triangle"
233+
@icon={{AlertTriangleIcon}}
232234
@skin="error"
233235
@size="small"
234236
@closable={{false}}

‎addon/components/au-label.gts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Component from '@glimmer/component';
22
import AuBadge from './au-badge';
33
import AuPill from './au-pill';
4+
import { AlertTriangleIcon } from './icons/alert-triangle';
5+
import { CrossIcon } from './icons/cross';
46

57
export interface AuLabelSignature {
68
Args: {
@@ -39,15 +41,15 @@ export default class AuLabel extends Component<AuLabelSignature> {
3941
>
4042
{{#if this.warning}}
4143
<AuBadge
42-
@icon="alert-triangle"
44+
@icon={{AlertTriangleIcon}}
4345
@size="small"
4446
@skin="warning"
4547
class="au-u-margin-right-tiny"
4648
/>
4749
{{/if}}
4850
{{#if this.error}}
4951
<AuBadge
50-
@icon="cross"
52+
@icon={{CrossIcon}}
5153
@size="small"
5254
@skin="error"
5355
class="au-u-margin-right-tiny"

‎addon/components/au-main-header.gts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { service } from '@ember/service';
66
import Component from '@glimmer/component';
77
import AuBrand from './au-brand';
88
import AuLink from './au-link';
9+
import { QuestionCircleIcon } from './icons/question-circle';
910

1011
export interface AuMainHeaderSignature {
1112
Args: {
@@ -55,7 +56,7 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
5556
<AuLink
5657
@route={{@contactRoute}}
5758
@skin="secondary"
58-
@icon="question-circle"
59+
@icon={{QuestionCircleIcon}}
5960
>
6061
Contacteer ons
6162
</AuLink>

‎addon/components/au-modal.gjs

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
55
import { action } from '@ember/object';
66
import Component from '@glimmer/component';
77
import { focusTrap } from 'ember-focus-trap';
8+
import { CrossIcon } from './icons/cross';
89
import { cn } from '../private/helpers/class-names';
910

1011
// 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 {
133134
data-test-modal-close
134135
{{on "click" this.handleCloseClick}}
135136
>
136-
<AuIcon @icon="cross" @size="large" />
137+
<AuIcon @icon={{CrossIcon}} @size="large" />
137138
<span class="au-u-hidden-visually">Venster sluiten</span>
138139
</button>
139140
</div>

0 commit comments

Comments
 (0)