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: add stepper and step components #1134

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add stepper and step components #1134

wants to merge 1 commit into from

Conversation

anusha-c18
Copy link

@anusha-c18 anusha-c18 commented Sep 18, 2024

Done

  • Added stepper wrapper component
  • Added step component with options to:
    • add a title for the step
    • enable/disable the step
    • select the step
    • display an optional label
    • display an optional link
    • display a progress line
    • display the index of the step
    • display an icon for the step
  • Added tests for the step component
  • Added tests for the stepper component

The current stepper component is of the standard size outlined in the spec. If required, the large size can be added at a later time.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

  • Steps for QA.

Percy steps

  • List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: # .

@webteam-app
Copy link

Copy link

This PR is being prevented from merging because it needs to be reviewed on Percy.

Go to Percy, find the build relevant to this PR and check if it looks as expected.

Once it's approved, add the label Review: Percy +1 to this PR.

1 similar comment
Copy link

This PR is being prevented from merging because it needs to be reviewed on Percy.

Go to Percy, find the build relevant to this PR and check if it looks as expected.

Once it's approved, add the label Review: Percy +1 to this PR.

@anusha-c18 anusha-c18 marked this pull request as ready for review September 18, 2024 13:28
@anusha-c18 anusha-c18 self-assigned this Sep 18, 2024
Copy link
Contributor

@edlerd edlerd left a comment

Choose a reason for hiding this comment

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

QA LGTM.
The linter has some errors, one idea for improvement and one concern regarding css namespacing.

Comment on lines +3 to +10
.p-list__item {
padding-bottom: 0;
padding-top: 0;
}

.p-inline-list {
display: flex;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Those look like standard vanilla classes, which we shouldn't override globally.

I think best is

  1. to namespace all selectors in this file with a wrapper and
  2. target only custom classes

/**
* Icon to display in the step. Specify "number" if the index should be displayed.
*/
iconName: string;
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we reference the icon names ValueOf<typeof ICONS> | string | "number" here to allow autocomplete?

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.

3 participants