Merge pull request #440 from appuniversum/chore/gjs-support

.gjs conversion

.prettierrc.js

@@ -1,11 +1,13 @@
 'use strict';
 
 module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: '*.{js,ts,gjs,gts}',
       options: {
         singleQuote: true,
+        templateSingleQuote: false,
       },
     },
   ],

addon/components/au-accordion.gjs

@@ -0,0 +1,109 @@
+import {
+  AuButton,
+  AuContent,
+  AuIcon,
+  AuLoader,
+  AuToolbar,
+} from '@appuniversum/ember-appuniversum';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import autoFocus from '@zestia/ember-auto-focus/modifiers/auto-focus';
+
+export default class AuAccordion extends Component {
+  @tracked isOpen = false;
+
+  get loading() {
+    if (this.args.loading) return 'is-loading';
+    else return '';
+  }
+
+  get iconOpen() {
+    if (this.args.iconOpen) {
+      return this.args.iconOpen;
+    } else {
+      return 'nav-down';
+    }
+  }
+
+  get iconClosed() {
+    if (this.args.iconClosed) {
+      return this.args.iconClosed;
+    } else {
+      return 'nav-right';
+    }
+  }
+
+  get skin() {
+    if (this.args.skin == 'border') return 'au-c-accordion--border';
+    return '';
+  }
+
+  get reverse() {
+    if (this.args.reverse) return 'au-c-accordion--reverse';
+    return '';
+  }
+
+  @action
+  toggleAccordion() {
+    this.isOpen = !this.isOpen;
+  }
+
+  <template>
+    <div class="au-c-accordion {{this.skin}} {{this.reverse}}" ...attributes>
+      <AuToolbar
+        @nowrap={{true}}
+        @reverse={{@reverse}}
+        {{on "click" this.toggleAccordion}}
+        data-test-accordion-toggle
+        as |Group|
+      >
+        <Group>
+          <div>
+            <AuButton
+              @skin="link"
+              aria-expanded="{{if this.isOpen 'true' 'false'}}"
+              data-test-accordion-button
+            >
+              {{@buttonLabel}}
+            </AuButton>
+            {{#if @subtitle}}
+              <p data-test-accordion-subtitle>
+                {{@subtitle}}
+              </p>
+            {{/if}}
+          </div>
+        </Group>
+        <Group>
+          {{#if this.isOpen}}
+            <AuIcon
+              @icon={{this.iconOpen}}
+              @alignment="left"
+              @size="large"
+              @ariaHidden={{true}}
+              data-test-accordion-icon-open={{this.iconOpen}}
+            />
+          {{else}}
+            <AuIcon
+              @icon={{this.iconClosed}}
+              @alignment="left"
+              @size="large"
+              @ariaHidden={{true}}
+              data-test-accordion-icon-closed={{this.iconClosed}}
+            />
+          {{/if}}
+        </Group>
+      </AuToolbar>
+      {{#if this.isOpen}}
+        <AuContent {{autoFocus}} tabindex="0" data-test-accordion-content>
+          {{#if this.loading}}
+            <AuLoader data-test-accordion-loader />
+          {{else}}
+            {{yield}}
+          {{/if}}
+        </AuContent>
+      {{/if}}
+    </div>
+  </template>
+}

addon/components/au-alert.gjs

@@ -0,0 +1,73 @@
+import { AuIcon } from '@appuniversum/ember-appuniversum';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AuAlert extends Component {
+  @tracked isVisible = true;
+
+  get skin() {
+    let skin = this.args.skin;
+
+    if (skin === 'info') return 'au-c-alert--info';
+    if (skin === 'success') return 'au-c-alert--success';
+    if (skin == 'warning') return 'au-c-alert--warning';
+    if (skin == 'error') return 'au-c-alert--error';
+    return '';
+  }
+
+  get size() {
+    let size = this.args.size;
+    if (size === 'tiny') return 'au-c-alert--tiny';
+    if (size === 'small') return 'au-c-alert--small';
+    return '';
+  }
+
+  @action
+  closeAlert() {
+    this.isVisible = false;
+
+    this.args.onClose?.();
+  }
+
+  <template>
+    {{#if this.isVisible}}
+      <div
+        class="au-c-alert {{this.skin}} {{this.size}}"
+        role="alert"
+        ...attributes
+      >
+        {{#if @icon}}
+          <div
+            class="au-c-alert__icon"
+            aria-hidden={{if @iconVisible "false" "true"}}
+            data-test-alert-icon
+          >
+            <AuIcon @icon={{@icon}} />
+          </div>
+        {{/if}}
+        <div class="au-c-alert__content">
+          {{#if @title}}
+            <p class="au-c-alert__title" data-test-alert-title>{{@title}}</p>
+          {{/if}}
+          <div
+            class="au-c-alert__message"
+            data-test-alert-message
+          >{{yield}}</div>
+        </div>
+        {{#if @closable}}
+          <button
+            class="au-c-alert__close"
+            type="button"
+            data-test-alert-close
+            {{on "click" this.closeAlert}}
+          >
+            <AuIcon @icon="cross" @size="large" />
+            <span class="au-u-hidden-visually">Sluit</span>
+          </button>
+        {{/if}}
+      </div>
+    {{/if}}
+  </template>
+}

addon/components/au-app.gjs

@@ -0,0 +1,5 @@
+<template>
+  <div class="au-c-app" ...attributes>
+    {{yield}}
+  </div>
+</template>