Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added stepper component and tests #408

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from

Conversation

bajajcodes
Copy link
Contributor

@bajajcodes bajajcodes commented May 19, 2023

Issue# Ref: [Identity Route] Stepper #353

Change:

The new Stepper component has been added to facilitate the display of completed steps in an ongoing process. It takes two input props: totalSteps and completedSteps. The totalSteps prop determines the total number of steps in the component, while the completedSteps prop specifies the completed and active steps.

The behavior of the component based on the range of values for completedSteps is as follows:

  • If completedSteps is zero, then Step 1 is considered active or in progress.
  • If completedSteps is greater than the totalSteps, all steps are marked as completed.
  • If completedSteps is between 1 and totalSteps, the appropriate number of completed steps is shown, along with the step in progress.

To ensure proper rendering and visibility of the component, both totalSteps and completedSteps must be provided as numeric values. If either prop is not a number, the component will not be rendered.

This new Stepper component enhances the user experience by providing a visual representation of progress within a process.

Media/Screenshort

Screen.Recording.2023-05-25.at.12.20.51.AM.mp4

Checklist

  • All checks passed as expected
  • Responsive
  • TDD followed

@netlify
Copy link

netlify bot commented May 19, 2023

Deploy Preview for staging-my ready!

Name Link
🔨 Latest commit fabce8e
🔍 Latest deploy log https://app.netlify.com/sites/staging-my/deploys/6473a320bdd0790008d07e3d
😎 Deploy Preview https://deploy-preview-408--staging-my.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@bajajcodes bajajcodes marked this pull request as ready for review May 24, 2023 18:56
@rohan09-raj rohan09-raj changed the title feat: stpper component tests added feat: Stepper component tests added May 28, 2023
@rohan09-raj rohan09-raj changed the title feat: Stepper component tests added feat: added stepper component and tests May 28, 2023
Copy link
Contributor

@rohan09-raj rohan09-raj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shmbajaj Requesting some changes and added some comments, please take a pull from your branch (I have resolved a conflict) before doing any further changes

Comment on lines +9 to +12
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please use svg in img tag?

<article data-test-stepper class='stepper'>
<div class='stepper-progress--container'>
<div class='progress'></div>
{{#each this.numberOfSteps as |_ index|}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why have we used _ here with index?

Comment on lines +16 to +20
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please use svg in img tag?

Comment on lines +5 to +9
return 'completed';
} else if (index === completedSteps) {
return 'active';
} else {
return 'idle';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please use enums (constants) here ?

Comment on lines +24 to +25
background-color: #fff;
color: #999;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please use CSS variables here too ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants