Add a @centered argument to the AuLoader component

The loader is centered by default but this doesn't always look correctly for some use-cases. The `@centered` argument allows you to op-out of the default centering in case you need it.

Author: Windvis

addon/components/au-loader.gts

@@ -27,6 +27,7 @@ export interface AuLoaderSignature {
   Args: {
     inline?: boolean;
     hideMessage?: boolean;
+    centered?: boolean;
     // Deprecated arguments
     disableMessage?: boolean;
     message?: string;
@@ -49,9 +50,17 @@ export default class AuLoader extends Component<AuLoaderSignature> {
     return this.args.message || 'Aan het laden';
   }
 
+  get centered() {
+    if (typeof this.args.centered === 'undefined' || this.args.centered) {
+      return 'au-u-text-center';
+    }
+
+    return '';
+  }
+
   <template>
     {{#if (has-block)}}
-      <div class="au-c-loader au-u-text-center" role="status" ...attributes>
+      <div class="au-c-loader {{this.centered}}" role="status" ...attributes>
         <LoadingAnimation />
         {{#if @inline}}
           <span

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

@@ -15,6 +15,10 @@ export default {
       control: 'boolean',
       description: 'Hide the loading text',
     },
+    centered: {
+      control: 'boolean',
+      description: 'Allows you to opt-out of the centered positioning. defaults to `true`',
+    },
   },
   parameters: {
     layout: 'padded',
@@ -26,6 +30,7 @@ const Template = (args) => ({
     <AuLoader
       @inline={{this.inline}}
       @hideMessage={{this.hideMessage}}
+      @centered={{this.centered}}
     >{{this.message}}</AuLoader>`,
   context: args,
 });
@@ -35,4 +40,5 @@ Component.args = {
   message: 'Aan het laden',
   inline: false,
   hideMessage: false,
+  centered: true,
 };