From 67e3e606de940ccc4c1f38451dd6c49898b7e901 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 29 Feb 2024 11:33:23 +0100
Subject: [PATCH] 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.
---
 addon/components/au-loader.gts                        | 11 ++++++++++-
 .../5-components/Notifications/AuLoader.stories.js    |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/addon/components/au-loader.gts b/addon/components/au-loader.gts
index 958bfa64f..7fd61b2fd 100644
--- a/addon/components/au-loader.gts
+++ b/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
diff --git a/stories/5-components/Notifications/AuLoader.stories.js b/stories/5-components/Notifications/AuLoader.stories.js
index 88625bb2b..fc216ab9c 100644
--- a/stories/5-components/Notifications/AuLoader.stories.js
+++ b/stories/5-components/Notifications/AuLoader.stories.js
@@ -15,6 +15,10 @@ export default {
       control: 'boolean',
       description: 'Hide the loading text',
     },
+    centered: {
+      control: 'boolean',
+      description: 'The loader is centered by default, but that can be disabled by setting this 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,
 };