From 827b6f9a23f0d11d9a965dbaa2e0bb211058217a Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Fri, 19 May 2023 16:54:22 +0530 Subject: [PATCH 1/6] feat: stpper component tests added --- tests/integration/components/stepper-test.js | 58 ++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 tests/integration/components/stepper-test.js diff --git a/tests/integration/components/stepper-test.js b/tests/integration/components/stepper-test.js new file mode 100644 index 00000000..4500eeb7 --- /dev/null +++ b/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``); + + assert.dom('[data-test-stpper]').doesNotExist(); + }); + + test('it renders the stepper component without active steps', async function (assert) { + this.setProperites({ + totalSteps: 5, + completedSteps: 0, + }); + + await render( + hbs`` + ); + + assert.dom('[data-test-stepper]').exists(); + assert + .dom('[data-test-stepper-step-active]') + .exists({ count: 1 }, 'One Active Step present in the stepper'); + assert + .dom('[data-test-stepper-step-cleared]') + .exists({ count: 0 }, 'No Cleared Steps present in the stepper'); + }); + + test('it renders the stepper component with active steps', async function (assert) { + this.setProperites({ + totalSteps: 5, + completedSteps: 2, + }); + + await render( + hbs`` + ); + + assert.dom('[data-test-stepper]').exists(); + assert + .dom('[data-test-stepper-step-active]') + .exists({ count: 1 }, 'One Active Step present in the stepper'); + assert + .dom('[data-test-stepper-step-cleared]') + .exists({ count: 2 }, 'No Cleared Steps present in the stepper'); + }); +}); From d509f9e3ed38880ab93e43a8189de8031649e3d6 Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Fri, 19 May 2023 22:18:20 +0530 Subject: [PATCH 2/6] feat: cleared test render component w/o props --- app/components/stepper.hbs | 9 +++++++++ app/components/stepper.js | 17 +++++++++++++++++ tests/integration/components/stepper-test.js | 10 +++++----- 3 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 app/components/stepper.hbs create mode 100644 app/components/stepper.js diff --git a/app/components/stepper.hbs b/app/components/stepper.hbs new file mode 100644 index 00000000..f5f3f067 --- /dev/null +++ b/app/components/stepper.hbs @@ -0,0 +1,9 @@ +{{#if this.arePropsValid}} +
+
    + {{#each this.numberOfSteps as |_ index|}} +
  • {{index}}
    • + {{/each}} +
+
+{{/if}} \ No newline at end of file diff --git a/app/components/stepper.js b/app/components/stepper.js new file mode 100644 index 00000000..84783072 --- /dev/null +++ b/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 ( + Number.isInteger(totalSteps) && + Number.isInteger(completedSteps) && + totalSteps > 0 + ); + } + + get numberOfSteps() { + const times = Number.parseInt(this.args.totalSteps, 10); + return new Array(times); + } +} diff --git a/tests/integration/components/stepper-test.js b/tests/integration/components/stepper-test.js index 4500eeb7..70fa3374 100644 --- a/tests/integration/components/stepper-test.js +++ b/tests/integration/components/stepper-test.js @@ -9,7 +9,7 @@ module('Integration | Component | stepper', (hooks) => { test('it not renders the stepper component when no props passed', async function (assert) { await render(hbs``); - assert.dom('[data-test-stpper]').doesNotExist(); + assert.dom('[data-test-stepper]').doesNotExist(); }); test('it renders the stepper component without active steps', async function (assert) { @@ -19,8 +19,8 @@ module('Integration | Component | stepper', (hooks) => { }); await render( - hbs`` ); @@ -41,8 +41,8 @@ module('Integration | Component | stepper', (hooks) => { }); await render( - hbs`` ); From d426930b5ed0bde37429c24806bd0a2ea9b1bf0a Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Sat, 20 May 2023 14:24:36 +0530 Subject: [PATCH 3/6] feat: helper func to get test selectors --- app/helpers/getStepperStepDataTestSelector.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 app/helpers/getStepperStepDataTestSelector.js diff --git a/app/helpers/getStepperStepDataTestSelector.js b/app/helpers/getStepperStepDataTestSelector.js new file mode 100644 index 00000000..6e90a345 --- /dev/null +++ b/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); From f71b448dbd0fbf5ac53f9b27172ed66a43b680a3 Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Sat, 20 May 2023 14:25:15 +0530 Subject: [PATCH 4/6] feat: cleared stepper component tests --- app/components/stepper.hbs | 7 ++++++- tests/integration/components/stepper-test.js | 22 ++++++++++---------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/app/components/stepper.hbs b/app/components/stepper.hbs index f5f3f067..6781090e 100644 --- a/app/components/stepper.hbs +++ b/app/components/stepper.hbs @@ -2,7 +2,12 @@
    {{#each this.numberOfSteps as |_ index|}} -
  • {{index}}
    • +
  • {{index}}
    • {{/each}}
diff --git a/tests/integration/components/stepper-test.js b/tests/integration/components/stepper-test.js index 70fa3374..539226a4 100644 --- a/tests/integration/components/stepper-test.js +++ b/tests/integration/components/stepper-test.js @@ -12,8 +12,8 @@ module('Integration | Component | stepper', (hooks) => { assert.dom('[data-test-stepper]').doesNotExist(); }); - test('it renders the stepper component without active steps', async function (assert) { - this.setProperites({ + test('it renders the stepper component without completed steps', async function (assert) { + this.setProperties({ totalSteps: 5, completedSteps: 0, }); @@ -27,15 +27,15 @@ module('Integration | Component | stepper', (hooks) => { assert.dom('[data-test-stepper]').exists(); assert - .dom('[data-test-stepper-step-active]') - .exists({ count: 1 }, 'One Active Step present in the stepper'); + .dom('[data-test-stepper-step="active"]') + .exists({ count: 1 }, 'Active Step present on step-1 in the stepper'); assert - .dom('[data-test-stepper-step-cleared]') + .dom('[data-test-stepper-step="completed"]') .exists({ count: 0 }, 'No Cleared Steps present in the stepper'); }); - test('it renders the stepper component with active steps', async function (assert) { - this.setProperites({ + test('it renders the stepper component with completed steps', async function (assert) { + this.setProperties({ totalSteps: 5, completedSteps: 2, }); @@ -49,10 +49,10 @@ module('Integration | Component | stepper', (hooks) => { assert.dom('[data-test-stepper]').exists(); assert - .dom('[data-test-stepper-step-active]') - .exists({ count: 1 }, 'One Active Step present in the stepper'); + .dom('[data-test-stepper-step="active"]') + .exists({ count: 1 }, 'Active Step present on step-3 in the stepper'); assert - .dom('[data-test-stepper-step-cleared]') - .exists({ count: 2 }, 'No Cleared Steps present in the stepper'); + .dom('[data-test-stepper-step="completed"]') + .exists({ count: 2 }, 'Two Cleared Steps present in the stepper'); }); }); From 83b84d3f99696c5869d1ae3c683a6dbddd641fe0 Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Wed, 24 May 2023 23:02:09 +0530 Subject: [PATCH 5/6] style: stepper ui --- app/components/stepper.hbs | 36 ++++++++++++++++++++----------- app/styles/stepper.css | 44 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+), 12 deletions(-) create mode 100644 app/styles/stepper.css diff --git a/app/components/stepper.hbs b/app/components/stepper.hbs index 6781090e..ae3e419e 100644 --- a/app/components/stepper.hbs +++ b/app/components/stepper.hbs @@ -1,14 +1,26 @@ {{#if this.arePropsValid}} -
-
    - {{#each this.numberOfSteps as |_ index|}} -
  • {{index}}
    • - {{/each}} -
-
+
+
+
+ {{#each this.numberOfSteps as |_ index|}} +
+ {{#if (eq index this.completedSteps)}} + + + + + {{else if + (and (gt this.completedSteps -1) (lt index this.completedSteps)) + }} + + + + + {{/if}} +
+ {{/each}} +
+
{{/if}} \ No newline at end of file diff --git a/app/styles/stepper.css b/app/styles/stepper.css new file mode 100644 index 00000000..576e03bf --- /dev/null +++ b/app/styles/stepper.css @@ -0,0 +1,44 @@ +:root { + --line-border-fill: #1d1283; + --line-border-empty: #e0e0e0; +} + +.stepper--container { + text-align: center; +} + +.stepper-progress--container { + display: flex; + justify-content: space-between; + position: relative; + margin-bottom: 30px; + max-width: 100%; + width: 350px; +} + +.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; +} From f2b12e3ffa32c74ab1dc68771ada9909e83cb7e9 Mon Sep 17 00:00:00 2001 From: shubham bajaj Date: Thu, 25 May 2023 00:08:15 +0530 Subject: [PATCH 6/6] refactor: styles and parsing props --- app/components/stepper.hbs | 6 +++--- app/components/stepper.js | 10 +++++----- app/styles/stepper.css | 10 +--------- app/styles/variables.css | 3 ++- 4 files changed, 11 insertions(+), 18 deletions(-) diff --git a/app/components/stepper.hbs b/app/components/stepper.hbs index ae3e419e..a3c0fc00 100644 --- a/app/components/stepper.hbs +++ b/app/components/stepper.hbs @@ -1,17 +1,17 @@ {{#if this.arePropsValid}} -
+
{{#each this.numberOfSteps as |_ index|}}
- {{#if (eq index this.completedSteps)}} + {{#if (eq index this.parsedCompletedSteps)}} {{else if - (and (gt this.completedSteps -1) (lt index this.completedSteps)) + (lt index this.parsedCompletedSteps) }} 0 - ); + 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); + } } diff --git a/app/styles/stepper.css b/app/styles/stepper.css index 576e03bf..d056674e 100644 --- a/app/styles/stepper.css +++ b/app/styles/stepper.css @@ -1,9 +1,4 @@ -:root { - --line-border-fill: #1d1283; - --line-border-empty: #e0e0e0; -} - -.stepper--container { +.stepper { text-align: center; } @@ -11,9 +6,6 @@ display: flex; justify-content: space-between; position: relative; - margin-bottom: 30px; - max-width: 100%; - width: 350px; } .progress { diff --git a/app/styles/variables.css b/app/styles/variables.css index 55d36aaf..7e6e563a 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -20,7 +20,6 @@ --button-identity--text: white; --button-identity--bg: rgb(81, 81, 245); - --button-image-form--bg: #1d1283; --button-image-form--bg--disabled: #ddd; --button-image-form--bg--hover: #ddd; @@ -174,4 +173,6 @@ --placeholder-text-color: grey; + --line-border-fill: #1d1283; + --line-border-empty: #e0e0e0; }