From 1238f070d7040a55bb559151e9fff37a4b6824e8 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Fri, 19 Jul 2024 15:40:54 +0800
Subject: [PATCH] added new `<ProgressBar />` component

---
 addon/components/progress-bar.hbs             | 12 +++++++++
 addon/components/progress-bar.js              |  8 ++++++
 app/components/progress-bar.js                |  1 +
 .../components/progress-bar-test.js           | 26 +++++++++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 addon/components/progress-bar.hbs
 create mode 100644 addon/components/progress-bar.js
 create mode 100644 app/components/progress-bar.js
 create mode 100644 tests/integration/components/progress-bar-test.js

diff --git a/addon/components/progress-bar.hbs b/addon/components/progress-bar.hbs
new file mode 100644
index 0000000..60d46dc
--- /dev/null
+++ b/addon/components/progress-bar.hbs
@@ -0,0 +1,12 @@
+<div>
+    <div class="mb-2 flex justify-between items-center">
+        <h3 class="text-sm font-semibold text-gray-800 dark:text-white">{{@title}}</h3>
+        <span class="text-sm text-gray-800 dark:text-white">{{@percent}}%</span>
+    </div>
+    <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-neutral-700" role="progressbar" aria-valuenow={{@percent}} aria-valuemin="0" aria-valuemax="100">
+        <div
+            class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
+            {{did-update this.setProgress @percent}}
+        ></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addon/components/progress-bar.js b/addon/components/progress-bar.js
new file mode 100644
index 0000000..0cff7ee
--- /dev/null
+++ b/addon/components/progress-bar.js
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ProgressBarComponent extends Component {
+    @action setProgress(el, [percent]) {
+        el.style.width = `${percent}%`;
+    }
+}
diff --git a/app/components/progress-bar.js b/app/components/progress-bar.js
new file mode 100644
index 0000000..50c769c
--- /dev/null
+++ b/app/components/progress-bar.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/progress-bar';
diff --git a/tests/integration/components/progress-bar-test.js b/tests/integration/components/progress-bar-test.js
new file mode 100644
index 0000000..2008d3d
--- /dev/null
+++ b/tests/integration/components/progress-bar-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/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().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <ProgressBar>
+        template block text
+      </ProgressBar>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});