Skip to content

Latest commit

 

History

History
90 lines (65 loc) · 4.42 KB

README.md

File metadata and controls

90 lines (65 loc) · 4.42 KB
Raw

🪜 se-step-navigator

Use this Marko component as a back and forth method for different views. A more usable extension to ebay-progress-stepper

Preview

step-navigator.mov

Usage

    <se-step-navigator
    	title="My Great Step Navigator!"
        previousStepText="Previous"
        nextStepText="Next"
 	 >
 	 
 	 <@step>
 	 	<@title>Title #1</@title>
 	 	<@subtitle>SubTitle #1</@subtitle>
 	 	<@content>
 	 		<sample-inner-marko-component/>
 	 		<div>Hello World!</div>
 	 		...
 	 	</@content>
 	 </@step>
 	 
 	 <@step>
 	 	<@title>Title #2</@title>
 	 	<@subtitle>SubTitle #2</@subtitle>
 	 	<@content>
 	 		<sample-inner-marko-component-2/>
 	 		<div>Hello World #2!</div>
 	 		...
 	 	</@content>
 	 </@step>
	 <@static-content>Some Static Content that shows in all steps!</@static-content>
 	 </se-step-navigator>

Nested Tags

Name Has Nested Tags Required Description
@step Yes Yes Each step can contain the nested tags @title, @subtitle and @content. These map to both the progress-stepper at the top and the content are below it.
@static-content No No Add static content (like a static sidebar component) outside of the "step" flow.
@footer No No Replaces entire button footer with your own custom footer.

Input

Name Type Required Description
title String No overarching title text (appears at top of component)
nextStepText String No Next Button text. Defaults to "Next" if empty
previousStepText String No Previous Button text. Defaults to "Previous" if empty
a11yHeadingTag String Yes heading tag for progress stepper
a11yHeadingText String Yes heading text for progress stepper which will be clipped
defaultState String No If complete, then all items will be in complete state by default. If upcoming, all items will be in upcoming state. If attention, then the current item will show as blocked. Otherwise, the default (active), will change items based on the current item (current defaults to first step if not set).
buttonAlignment justify-content types No Alignment of bottom buttons. Defaults to flex-start. See all types at MDN documentation on justify-content.
nextStepButtonPriority ebay-button string types (primary, secondary, etc) No Priority of button, defaults to "primary"
previousStepButtonPriority ebay-button string types (primary, secondary, etc) No Priority of button, defaults to "secondary"
previousStepButtonDisabled boolean No By default, disabled, but toggle-able here. Previous button will be disabled.
nextStepButtonDisabled boolean No By default, not disabled, but toggle-able here. Next button will be disabled.
isProgressStepperHidden boolean No Toggle the ProgressStepper. Most often used when steps <= 2 per Playbook specs. Default: false.
width CSS value types (eg 700px, 5em, etc) No Sets the width of the progress-stepper component at the top

Events

Name Data Type Description
previous-button-click {currentIdx} No Event returned when the Previous button is clicked
next-button-click {currentIdx} No Event returned when the Next button is clicked

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

For full contributing guidelines, please see our CONTRIBUTING.md

License

eBay License