Merge pull request #464 from appuniversum/feat/au-loader-improvements

`AuLoader` improvements

Author: Windvis

addon/components/au-button.gts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import AuIcon from './au-icon';
-import AuLoader from './au-loader';
+import { LoadingAnimation } from '../private/components/loading-animation';
 
 const SKINS = [
   'primary',
@@ -118,14 +118,14 @@ export default class AuButton extends Component<AuButtonSignature> {
       {{#if @hideText}}
         {{#if @loading}}
           <span class="au-u-hidden-visually">{{this.loadingMessage}}</span>
-          <AuLoader @padding="small" />
+          <LoadingAnimation />
         {{else}}
           <span class="au-u-hidden-visually">{{yield}}</span>
         {{/if}}
       {{else}}
         {{#if @loading}}
           {{this.loadingMessage}}
-          <AuLoader @padding="small" />
+          <LoadingAnimation />
         {{else}}
           {{yield}}
         {{/if}}

addon/components/au-loader.gts

@@ -1,11 +1,40 @@
 import Component from '@glimmer/component';
+import { deprecate } from '@ember/debug';
+import { LoadingAnimation } from '../private/components/loading-animation';
+import { modifier } from 'ember-modifier';
+
+const deprecateOldVersion = modifier(function deprecateOldVersion() {
+  deprecate(
+    `[AuLoader] This version of the \`AuLoader\` component is deprecated.
+
+Follow the migration guide to switch to the new version: https://github.com/appuniversum/ember-appuniversum/pull/464
+
+`,
+    false,
+    {
+      id: '@appuniversum/ember-appuniversum.au-loader-visible-by-default',
+      until: '4.0.0',
+      for: '@appuniversum/ember-appuniversum',
+      since: {
+        available: '3.1.0',
+        enabled: '3.1.0',
+      },
+    },
+  );
+});
 
 export interface AuLoaderSignature {
   Args: {
+    inline?: boolean;
+    hideMessage?: boolean;
+    // Deprecated arguments
     disableMessage?: boolean;
     message?: string;
     padding?: 'small' | 'large';
   };
+  Blocks: {
+    default: [];
+  };
   Element: HTMLDivElement;
 }
 
@@ -21,11 +50,30 @@ export default class AuLoader extends Component<AuLoaderSignature> {
   }
 
   <template>
-    <div class="au-c-loader {{this.padding}}" ...attributes>
-      <div class="au-c-loader__animation" aria-hidden="true"></div>
-      {{#unless @disableMessage}}
-        <span class="au-u-hidden-visually">{{this.message}}</span>
-      {{/unless}}
-    </div>
+    {{#if (has-block)}}
+      <div class="au-c-loader au-u-text-center" role="status" ...attributes>
+        <LoadingAnimation />
+        {{#if @inline}}
+          <span
+            class="au-u-para {{if @hideMessage 'au-u-hidden-visually'}}"
+          >{{~yield~}}</span>
+        {{else}}
+          <p
+            class="au-u-para {{if @hideMessage 'au-u-hidden-visually'}}"
+          >{{yield}}</p>
+        {{/if}}
+      </div>
+    {{else}}
+      <div
+        class="au-c-loader {{this.padding}}"
+        {{deprecateOldVersion}}
+        ...attributes
+      >
+        <div class="au-c-loader__animation" aria-hidden="true"></div>
+        {{#unless @disableMessage}}
+          <span class="au-u-hidden-visually">{{this.message}}</span>
+        {{/unless}}
+      </div>
+    {{/if}}
   </template>
 }

addon/private/components/loading-animation.gts

@@ -0,0 +1,9 @@
+import type { TOC } from '@ember/component/template-only';
+
+interface Signature {
+  Element: HTMLDivElement;
+}
+
+export const LoadingAnimation: TOC<Signature> = <template>
+  <div class="au-p-c-loading-animation" aria-hidden="true" ...attributes></div>
+</template>;

stories/5-components/Notifications/AuLoader.stories.js

@@ -3,18 +3,17 @@ import { hbs } from 'ember-cli-htmlbars';
 export default {
   title: 'Components/Notifications/AuLoader',
   argTypes: {
-    padding: {
-      control: 'select',
-      options: ['default', 'small', 'large'],
-      description: 'Set the padding of the loader',
-    },
     message: {
       control: 'text',
-      description: 'Set the hidden loading text',
+      description: 'Set the loading text',
+    },
+    inline: {
+      control: 'boolean',
+      description: 'Use the inline version of the loader',
     },
-    disableMessage: {
+    hideMessage: {
       control: 'boolean',
-      description: 'Remove the loading text',
+      description: 'Hide the loading text',
     },
   },
   parameters: {
@@ -24,13 +23,16 @@ export default {
 
 const Template = (args) => ({
   template: hbs`
-    <AuLoader @padding={{this.padding}} @message={{this.message}} @disableMessage={{this.disableMessage}} />`,
+    <AuLoader
+      @inline={{this.inline}}
+      @hideMessage={{this.hideMessage}}
+    >{{this.message}}</AuLoader>`,
   context: args,
 });
 
 export const Component = Template.bind({});
 Component.args = {
-  padding: 'default',
   message: 'Aan het laden',
-  disableMessage: false,
+  inline: false,
+  hideMessage: false,
 };

styles/components/_c-loader.scss

@@ -9,6 +9,15 @@
   display: block;
 }
 
+// .au-p- = private class
+.au-p-c-loading-animation {
+  display: inline-block;
+  position: relative;
+  width: 3rem;
+  height: 1.8rem;
+}
+
+// TODO: Remove this once we drop support for the "old" AuLoader setup
 .au-c-loader__animation {
   display: block;
   position: relative;
@@ -24,7 +33,11 @@
     width: 3rem + $au-unit-large;
     height: 3rem + $au-unit-large;
   }
+}
 
+.au-p-c-loading-animation,
+// TODO: Remove this once we drop support for the "old" AuLoader setup
+.au-c-loader__animation {
   &::before {
     content: "";
     display: block;

tests/helpers/deprecations.js tests/helpers/deprecations.ts

@@ -1,12 +1,14 @@
 import { getDeprecations } from '@ember/test-helpers';
 
-export function hasDeprecation(deprecationMessage) {
+export function hasDeprecation(deprecationMessage: string): boolean {
   return getDeprecations().some(
     (deprecation) => deprecation.message === deprecationMessage,
   );
 }
 
-export function hasDeprecationStartingWith(deprecationMessage) {
+export function hasDeprecationStartingWith(
+  deprecationMessage: string,
+): boolean {
   return getDeprecations().some((deprecation) =>
     deprecation.message.startsWith(deprecationMessage),
   );

tests/integration/components/au-loader-test.gts

@@ -1,26 +1,75 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
 import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import { getRootElement, render } from '@ember/test-helpers';
+import { queryByText } from '@testing-library/dom';
+import { hasDeprecationStartingWith } from 'dummy/tests/helpers/deprecations';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 module('Integration | Component | au-loader', function (hooks) {
   setupRenderingTest(hooks);
 
+  test('it uses the block contents as the loading message', async function (assert) {
+    await render(
+      <template>
+        <AuLoader>
+          Pagina is aan het laden
+        </AuLoader>
+      </template>,
+    );
+
+    assert.dom().hasText('Pagina is aan het laden');
+    assert.false(hasDeprecationStartingWith('[AuLoader]'));
+  });
+
+  test('it supports visually hiding the loading text', async function (assert) {
+    await render(
+      <template>
+        <AuLoader @hideMessage={{true}}>
+          Pagina is aan het laden
+        </AuLoader>
+      </template>,
+    );
+
+    const root = getRootElement() as HTMLElement;
+    const text = queryByText(root, 'Pagina is aan het laden') as HTMLElement;
+
+    // Hacky way to test if the text is visible.
+    // `assert.dom(text).isNotVisible()` doesn't work here because of the styles we use for the au-u-hidden-visually class.
+    assert.true(text.offsetHeight <= 1);
+    assert.true(text.offsetWidth <= 1);
+    assert.false(hasDeprecationStartingWith('[AuLoader]'));
+  });
+
   test('it renders a hidden loading text for screen readers', async function (assert) {
     await render(<template><AuLoader /></template>);
 
     assert.dom().hasText('Aan het laden');
+    assert.true(showsDeprecationMessage());
   });
 
   test('it supports rendering a custom hidden loading text', async function (assert) {
     await render(<template><AuLoader @message="Loading" /></template>);
 
     assert.dom().hasText('Loading');
+    assert.true(showsDeprecationMessage());
   });
 
   test('it supports disabling the hidden message', async function (assert) {
     await render(<template><AuLoader @disableMessage={{true}} /></template>);
 
     assert.dom().hasNoText();
+    assert.true(showsDeprecationMessage());
+  });
+
+  test('@padding shows a deprecation', async function (assert) {
+    await render(<template><AuLoader @padding="small" /></template>);
+
+    assert.true(showsDeprecationMessage());
   });
 });
+
+function showsDeprecationMessage() {
+  return hasDeprecationStartingWith(
+    '[AuLoader] This version of the `AuLoader` component is deprecated',
+  );
+}

tests/integration/components/loose-mode-test.ts

@@ -135,7 +135,7 @@ module('Integration | Component | Loose mode', function (hooks) {
 
   test('`<AuLoader>` resolves in loose mode', async function (assert) {
     await render(hbs`
-      <AuLoader data-test-loader />
+      <AuLoader data-test-loader></AuLoader>
     `);
     assert.dom('[data-test-loader]').exists();
   });