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.

Sign up for GitHub

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

Jump to bottom

Implement UsaStepIndicator component #69

Closed
2 tasks done
patrickcate opened this issue Oct 30, 2021 · 0 comments
Closed
2 tasks done

Implement UsaStepIndicator component #69

patrickcate opened this issue Oct 30, 2021 · 0 comments
Assignees
@patrickcate
Labels
feature New feature or request

Comments

@patrickcate
Copy link
Owner

patrickcate commented Oct 30, 2021 •
edited
Loading

Step Indicator

A step indicator updates users on their progress through a multi-step process.

status: draft

Props

Name Type Default Required Options
steps Array n/a true n/a
counters Boolean false false n/a
counter-size String '' false '', 'small
center Boolean false false n/a
no-labels Boolean false false n/a
current-step Number 1 false n/a

Slots

  • default: scoped to the steps prop.

CSS Classes

  • counters: usa-step-indicator--counters
  • counter-size: usa-step-indicator--counters-sm
  • center: usa-step-indicator--center
  • no-labels: usa-step-indicator--no-labels

External Libraries

  • None

Sub-Components

Dependencies

  • None

Notes

  • The component emits the current step when changed.

Tests

  1. The component is rendered as an ordered list.
  2. The component has a the aria-label attribute set to progress.
  3. When the counters prop is used, the CSS class usa-step-indicator--counters is applied.
  4. When the center prop is used, the CSS class usa-step-indicator--center is applied.
  5. When the no-labels prop is used, the CSS class usa-step-indicator--no-labels is applied.
  6. When the counter-size prop is set to small, the CSS class usa-step-indicator--counters-sm is applied.
  7. When the current-step prop changes, the correct segment is set as the currently active segment.
  8. When the current-step prop is greater than 1, all previous segments are set as completed.
  9. All segments greater than the currently active segment is marked as uncompleted.
  10. The slot content correctly renders.
  11. The steps prop is required.
@patrickcate patrickcate added the feature New feature or request label Nov 11, 2021
@patrickcate patrickcate self-assigned this Nov 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickcate patrickcate

Labels
feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@patrickcate