feat(components): post-stepper and post-stepper-item components
#6502
Conversation
🦋 Changeset detectedLatest commit: 2ee0158 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Related Previews |
|
@leagrdv Design review done, all good. |
|
| navigatableSteps: { | ||
| name: 'Navigatable Steps', | ||
| description: 'Defines which steps in the current process the user can navigate to.', | ||
| currentStepNumber: { |
There was a problem hiding this comment.
Can you use the argTypes generated from Stencil?
packages/documentation/src/stories/components/stepper/stepper.stories.ts
Show resolved
Hide resolved
| return ( | ||
| <Host data-version={version} role="listitem"> | ||
| <span class="stepper-item-content"> | ||
| <span> |
packages/components/src/components/post-stepper-item/post-stepper-item.tsx
Show resolved
Hide resolved
| // Update mobile label to show "Step N: ..." on mobile | ||
| const mobileLabel = el.querySelector('.step-mobile-label'); | ||
| if (mobileLabel && this.stepLabel) { | ||
| mobileLabel.textContent = `${this.stepLabel} ${i + 1}:`; |
There was a problem hiding this comment.
Since is can differ from language to language, I would let users give the full label instead of constructing it. For example in French the rule is to have a space before the colon while in other languages there is none.
📄 Description
post-stepperandpost-stepper-itemcomponents🚀 Demo
https://preview-6502--swisspost-design-system-next.netlify.app/?path=/docs/7dc546d9-e248-4d06-befe-3ad62fcd310f--docs
🔮 Design review
📝 Checklist