[Crisis Line Modal] - Add to VADS Component Examples and add modal contents

[humancompanion-usds]

Description

Please update VADS Component Examples to show the Crisis Line Modal so we can link to it from guidance. Please also add the contents of the modal to a component variation which are shown in Storybook.

Details

Confluence page with instructions: https://vfs.atlassian.net/l/cp/JR0BtAa1

Tasks

• [ ] Add Crisis Line Button to VADS Component Examples.
• [ ] Add the modal contents as a variation of the modal.
• [ ] - [ ] Rename Crisis Line Button to Crisis Line Modal in order to match guidance and Storybook.

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

[humancompanion-usds]

Not a priority quite yet but, as part of the header and footer work, we should get this modal into Figma so that we match what we have in Storybook. I'm in the process of adding it to guidance right now.

[caw310]

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