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

Implement UsaStepIndicatorSegment component #70

Closed
Tracked by #69
patrickcate opened this issue Oct 30, 2021 · 0 comments
Closed
Tracked by #69

Implement UsaStepIndicatorSegment component #70

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

Comments

@patrickcate
Copy link
Owner

patrickcate commented Oct 30, 2021

Step Indicator Segment

An individual step indicator segment.

status: draft

Props

Name Type Default Required Options
text String n/a true n/a
status String '' false 'current', 'completed'
is-current Boolean n/a true n/a

Slots

  • default

CSS Classes

  • status: usa-step-indicator__segment--current or usa-step-indicator__segment--completed

External Libraries

  • None

Sub-Components

  • None

Dependencies

  • None

Notes

  • TODO: Maybe just pass the total number of slots and calculate the segment status based on that and the is-current?

Tests

  1. The component is rendered as an li list item.
  2. The current step as the aria-current attribute set to true on the li element.
  3. The correct status CSS class is applied based on the step's status.
  4. The slot content correctly renders.
  5. When the text prop is used, the text is added as the default slot content.
  6. When the default slot is used, the content is added as the default slot content.
  7. When the text prop and default slot are both used, the default slot content slot will override the text prop.
  8. The text prop is required.
  9. The is-current prop is required.
@patrickcate patrickcate changed the title UsaStepIndicatorSegment Implement UsaStepIndicatorSegment component Oct 30, 2021
@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
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant