Rebuild Wireframe Library in Figma

[caw310]

Description

Rebuild Wireframe Library in Figma

Details

Confluence page with instructions: https://vfs.atlassian.net/l/cp/JR0BtAa1 Sketch LIbraries: https://www.sketch.com/workspace/c99d3e96-7c23-4210-b173-92a2b73a8788/p/3e88de6d-883b-4c18-92a9-a01b7304e09d/c/4c386d08-03d9-4cc8-b529-70d943ec6498

Tasks

• [ ] Create designs for component in Figma
• [ ] Review designs with PO and/or other DST designers
• [ ] Review designs with an accessibility specialist
• [ ] Review designs with DST members
• [ ] 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 @danbrady @LWWright7