Add progress-bar

app/components/progress-bar.hbs

@@ -0,0 +1,3 @@
+<div class="w-full">
+  <div class="bg-base-5 h-1.5"></div>
+</div>

app/components/progress-bar.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ProgressBarComponent extends Component {}

app/components/task-toast.hbs

@@ -1,35 +1,38 @@
 <Toast>
-  {{#if this.icon}}
-    <div
-      class='inline-flex flex-shrink-0 justify-center items-center self-start'
-    >
-      <this.icon @spin={{this.isEnqueued}} class='mr-4 {{this.color}}' />
-    </div>
-  {{/if}}
-
-  <div>
-    <div class='mb-2'>Task {{this.taskType}} Uid:{{this.taskUid}}</div>
-    <div class='mb-2'>
-      Status:
-      <span class={{this.color}}>{{this.taskStatus}}</span>
-    </div>
-    {{#if this.task.error}}
-      Error: <a
-        href={{this.task.error.link}}
-        class='text-danger'
-        target='_blank'
-        rel='noopener noreferrer'
-      >{{this.task.error.message}}</a>
+  <div class='flex items-center'>
+    {{#if this.icon}}
+      <div
+        class='inline-flex flex-shrink-0 justify-center items-center self-start'
+      >
+        <this.icon @spin={{this.isEnqueued}} class='mr-4 {{this.color}}' />
+      </div>
     {{/if}}
-  </div>
 
-  <button
-    type='button'
-    class='ml-auto self-start'
-    {{! data-dismiss-target='#toast-default' }}
-    aria-label='Close'
-    {{on 'click' @onClose}}
-  >
-    <Icons::Close />
-  </button>
+    <div>
+      <div class='mb-2'>Task {{this.taskType}} Uid:{{this.taskUid}}</div>
+      <div class={{if this.task.error 'mb-2'}}>
+        Status:
+        <span class={{this.color}}>{{this.taskStatus}}</span>
+      </div>
+      {{#if this.task.error}}
+        Error:
+        <a
+          href={{this.task.error.link}}
+          class='text-danger'
+          target='_blank'
+          rel='noopener noreferrer'
+        >{{this.task.error.message}}</a>
+      {{/if}}
+    </div>
+
+    <button
+      type='button'
+      class='ml-auto self-start'
+      {{! data-dismiss-target='#toast-default' }}
+      aria-label='Close'
+      {{on 'click' @onClose}}
+    >
+      <Icons::Close />
+    </button>
+  </div>
 </Toast>

app/components/toast.hbs

@@ -1,11 +1,16 @@
 {{#in-element this.toasts.destinationElement insertBefore=null}}
   <div
-    class='absolute flex items-center p-4 w-full max-w-xs border rounded bg-base-7 shadow-sm'
+    class='absolute w-full max-w-xs border rounded bg-base-7 shadow-sm'
     role='alert'
     style={{this.style}}
     {{did-insert this.didInsert}}
     ...attributes
   >
-    {{yield (hash triggerOnClose=this.triggerOnClose)}}
+    <div class='p-4'>
+      {{yield (hash triggerOnClose=this.triggerOnClose)}}
+    </div>
+    {{!-- {{#if this.autoCloseDuration}} --}}
+    <ProgressBar @value={{this.autoCloseDuration}} />
+    {{!-- {{/if}} --}}
   </div>
 {{/in-element}}

app/components/toast.js

@@ -13,6 +13,14 @@ export default class ToastComponent extends Component {
   @tracked width;
   @tracked height;
 
+  get autoCloseValue() {
+    return this.args?.autoCloseDuration ?? 3000;
+  }
+
+  get autoCloseDuration() {
+    return this.args?.autoCloseDuration ?? 3000;
+  }
+
   get top() {
     const queue = this.toasts.queue;
 

tests/integration/components/progress-bar-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | progress-bar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ProgressBar />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <ProgressBar>
+        template block text
+      </ProgressBar>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});