[Header] - Update Design with Interactions - Mobile

[danbrady]

Description

Update Figma Header component to have the interactive designs (popup search, mega menu, mobile accordions, etc).

Details

During the initial conversion to Figma, a simple "static" Header was created. This was for designers. However, we plan to develop an official header component. Before that can happen, we will need to update the header with designs for the interactions and popups.

Interactions:

Mobile

• [x] Main menu popup w/ search box and accordions
• [x] Level 1 accordion expanded [1]
• [x] Level 2 list of links [1]

[1] We only need one instance of this interaction to show the needed specs for developers. We do not need to show all variations of every link when it's only content differences. [2] These appear to be the same (please validate). If so, these can be made using instances from a subcomponent.

Tasks

• [ ] Create designs for component in Figma
• [ ] Review designs with other DST designers
• [ ] Review designs with an accessibility specialist
• [ ] Review designs with PO
• [ ] Review designs with DST engineers
• [ ] Address any comments from reviews, if necessary
• [ ] Comment on this ticket with any accessibility considerations engineers may need to know
• [ ] Comment on this ticket with content specifications (e.g. labels and error messages)
• [ ] Comment on this ticket with a link to the designs and post in DST Slack channel

Acceptance Criteria

Styles & Variables/Token 

• [ ] All components should be connected to VADS Component Library styles & Variables
• [ ] All components should be connected to the proper style or variable/token 
  • [ ] Colors: connected to the correct color token (not primitive!) - can be found in local variables library
  • [ ] Typography: connected to the correct text style - under local styles
  • [ ] Spacing: connected to the correct spacing token or primitive 
  • [ ] Icons: connected to correct icon - can be found on foundation page Auto layout
• [ ] Components should be as reactive as possible. Most, if not all, components should be able to be resize for either mobile, tablet, or desktop sizes 
• [ ] The correct spacing should be applied to auto layout  Properties Note: Not all components need every property. It will differ component to component 
• [ ] Variants: Should be used when the component has several states i.e primary, secondary, error 
• [ ] Boolean: Should be used if the component has a part that does not always need to be shown i.e icons, nested components and mobile view
• [ ] Text: Should be used when the test on a component needs to be changed. There are some exceptions to this if the component has several variants that need to have different/specific text. When you change the text on the parent component it will change all of the variants
• [ ] Instance Swap
  • [ ] Should be used if there is a part of the component that needs to be switched out but nothing else needs to change i.e. icons Color contrast (Pro Tip: The plugin “Contrast” can help with this.)
• [ ] Test as a DS library user
  • [ ] Connect your Figma design file to the DS library found in the Assets panel, Team Library (open book icon)
  • [ ] After connecting to the library, use the Assets panel to view all components
  • [ ] Does the component naming make sense and follow storybook?
  • [ ] Try to break the component! Test on asset NOT parent component
  • [ ] Expand/shrink the asset and put into containers
  • [ ] change body text and/or header from a sentence to paragraph
  • [ ] make sure text wraps correctly
  • [ ] the component should expand or shrink with text
  • [ ] Test all combinations of properties

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @babsdenney @danbrady @LWWright7

[LWWright7]

@caw310 This description is pretty broad...this sounds more like an epic ticket. Maybe we need a research ticket or more info before I can point this because I think it's an 8 or 13 easily...maybe a 21?

@danbrady @babsdenney Thoughts?

[danbrady]

Fair point, @LWWright7! I'll update with more details.

[danbrady]

OK, added more information about what interactions we need to show in order to have the specs the developers need.

[danbrady]

@babsdenney @LWWright7 Ready for review!

[LWWright7]

@danbrady looks great Dan!

Left just a minor comment in Figma. (should we organize these interaction snippets in a more formal way? dividing them by mobile/tablet/desktop?)

[danbrady]

Thanks @LWWright7!