feat: added stepper component and tests

app/components/stepper.hbs

@@ -0,0 +1,26 @@
+{{#if this.arePropsValid}}
+<article data-test-stepper class='stepper'>
+  <div class='stepper-progress--container'>
+    <div class='progress'></div>
+    {{#each this.numberOfSteps as |_ index|}}
+    <div data-test-stepper-step={{getStepperStepDataTestSelector index completedSteps=@completedSteps }}
+      class='stepper__step'>
+      {{#if (eq index this.parsedCompletedSteps)}}
+      <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#1d1283' viewBox='0 0 256 256'>
+        <path d='M232,128A104,104,0,1,1,128,24,104.13,104.13,0,0,1,232,128Z'>
+        </path>
+      </svg>
+      {{else if
+      (lt index this.parsedCompletedSteps)
+      }}
+      <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#1d1283' viewBox='0 0 256 256'>
+        <path
+          d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z'>
+        </path>
+      </svg>
+      {{/if}}
+    </div>
+    {{/each}}
+  </div>
+</article>
+{{/if}}

app/components/stepper.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+export default class StepperComponent extends Component {
+  get arePropsValid() {
+    const { totalSteps, completedSteps } = this.args;
+    return !isNaN(totalSteps) && !isNaN(completedSteps) && totalSteps > 0;
+  }
+
+  get numberOfSteps() {
+    const times = Number.parseInt(this.args.totalSteps, 10);
+    return new Array(times);
+  }
+
+  get parsedCompletedSteps() {
+    return parseInt(this.args.completedSteps, 10);
+  }
+}

app/helpers/getStepperStepDataTestSelector.js

@@ -0,0 +1,13 @@
+import { helper } from '@ember/component/helper';
+
+function getStepperStepDataTestSelector([index], { completedSteps }) {
+  if (index < completedSteps) {
+    return 'completed';
+  } else if (index === completedSteps) {
+    return 'active';
+  } else {
+    return 'idle';
+  }
+}
+
+export default helper(getStepperStepDataTestSelector);

app/styles/stepper.css

@@ -0,0 +1,36 @@
+.stepper {
+  text-align: center;
+}
+
+.stepper-progress--container {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.progress {
+  background-color: var(--line-border-fill);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  height: 4px;
+  width: 100%;
+  z-index: 1;
+  transition: 0.4s ease;
+}
+
+.stepper__step {
+  background-color: #fff;
+  color: #999;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line-border-empty);
+  border-color: var(--line-border-fill);
+  transition: 0.4s ease;
+  z-index: 2;
+}

app/styles/variables.css

@@ -173,6 +173,9 @@
 
   --placeholder-text-color: grey;
 
+  --line-border-fill: #1d1283;
+  --line-border-empty: #e0e0e0;
+
   --profile-field-input-bg-clr: #f9fafb;
   --profile-field-input-border-clr: #d1d5db;
   --profile-input-outline-clr: #1c64f2;

tests/integration/components/stepper-test.js

@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | stepper', (hooks) => {
+  setupRenderingTest(hooks);
+
+  test('it not renders the stepper component when no props passed', async function (assert) {
+    await render(hbs`<Stepper />`);
+
+    assert.dom('[data-test-stepper]').doesNotExist();
+  });
+
+  test('it renders the stepper component without completed steps', async function (assert) {
+    this.setProperties({
+      totalSteps: 5,
+      completedSteps: 0,
+    });
+
+    await render(
+      hbs`<Stepper
+      @totalSteps={{this.totalSteps}}
+      @completedSteps={{this.completedSteps}}
+       />`
+    );
+
+    assert.dom('[data-test-stepper]').exists();
+    assert
+      .dom('[data-test-stepper-step="active"]')
+      .exists({ count: 1 }, 'Active Step present on step-1 in the stepper');
+    assert
+      .dom('[data-test-stepper-step="completed"]')
+      .exists({ count: 0 }, 'No Cleared Steps present in the stepper');
+  });
+
+  test('it renders the stepper component with completed steps', async function (assert) {
+    this.setProperties({
+      totalSteps: 5,
+      completedSteps: 2,
+    });
+
+    await render(
+      hbs`<Stepper
+      @totalSteps={{this.totalSteps}}
+      @completedSteps={{this.completedSteps}}
+       />`
+    );
+
+    assert.dom('[data-test-stepper]').exists();
+    assert
+      .dom('[data-test-stepper-step="active"]')
+      .exists({ count: 1 }, 'Active Step present on step-3 in the stepper');
+    assert
+      .dom('[data-test-stepper-step="completed"]')
+      .exists({ count: 2 }, 'Two Cleared Steps present in the stepper');
+  });
+});