Wizard header and footer

[marektonik]

hey, we would need header and footer components for wizards. Couldn't find it in the Patterns on Figma.
Header typically has the title, steps and button.
Footer has button group on the left and right side.

Do you have such components prepared? thanks

[loreina]

Hi @marektonik

Paste doesn't currently have a pattern or layout for a full page wizard. I shared the Wizard layout from our team in Figma before, that would be a good place to start when considering what wizards may look like for consistency across products.

cc @ceyerkes for a Segment-specific guidance

[marektonik]

@loreina @serifluous we prepared wizard topbard and footer based on topbard component from Paste library. Let us know what you think about this. Screenshots below, here's Figma link

[jess-watson]

Hi team, I'm coming to office hours tomorrow with questions around how we use the wizard pattern in Segment. I saw this thread and am wondering if I should use the pattern @marektonik created. I also know Andy Doyle is working on a broader pattern. The designs I'm working on are for a pilot in the Segment Journeys flow and needs to be finalized by end of week.

Additional questions include:

• For pilot this wizard is a single page, but over time we will build it out into more steps – is it okay to remove the stepper from the top?
• Is there guidance for the width of the form within the wizard? Segment has a few different layouts but they're not well documented. Is this something we could include in Andy Doyle's work?
• Should we build this in Evergreen until Andy's work is complete, or should we use @marektonik's proposal in the interim?

Thanks for your help!

[serifluous]

Thanks for coming to office hours! Here's the recording: https://twilio.zoom.us/rec/share/kuydsjC0DZRO7uxWChsRzW8FDubQwox_9LZQQ9slgg0RQfFCANkd38BX1spFHe4r.oiXawtqRIZE7zCnD?startTime=1694099030000 You can find the password in #help-design-system.