-
Notifications
You must be signed in to change notification settings - Fork 97
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
base: develop
Are you sure you want to change the base?
feat: added stepper component and tests #408
Conversation
✅ Deploy Preview for staging-my ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this 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
<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> |
There was a problem hiding this comment.
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|}} |
There was a problem hiding this comment.
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
?
<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> |
There was a problem hiding this comment.
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?
return 'completed'; | ||
} else if (index === completedSteps) { | ||
return 'active'; | ||
} else { | ||
return 'idle'; |
There was a problem hiding this comment.
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 ?
background-color: #fff; | ||
color: #999; |
There was a problem hiding this comment.
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 ?
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
andcompletedSteps
. ThetotalSteps
prop determines the total number of steps in the component, while thecompletedSteps
prop specifies the completed and active steps.The behavior of the component based on the range of values for
completedSteps
is as follows:To ensure proper rendering and visibility of the component, both
totalSteps
andcompletedSteps
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