[CST] Add margin top to the Need Help section

[pmclaren19]

Background Context

@jstrothman reached out and asked if we could add a top margin of 80px to the NeedHelp.jsx element for all CST pages.

It currently looks like this where there is no top margin:

Julie would like it to look like this:

Design

@skylerschain

Enablement team (if needed)

@member of team

Engineering

Components that use the Need Help section:

• ClaimDetailLayout
• AppealHelpSidebar
• AskVAPage
• ClaimEstimationPage
• DocumentRequestPage
• YourClaimsPageV2

Open questions

• @skylerschain

Tasks

• [ ] Update the NeedHelp section to have top padding className="vads-u-margin-top--10"
• [ ] Verify that the components that use the Need Help section look correct with 80 px padding

Definition of Done

• [ ] Meets acceptance criteria
• [ ] Passed E2E testing (90% coverage)
• [ ] Passed unit testing (90% coverage)
• [ ] Passed integration testing (if applicable)
• [ ] Code reviewed (internal)
• [ ] Submitted to staging
• [ ] Team approved production verification process
• [ ] Design performs design QA and verifies the implementation matches the design spec
• [ ] Accessibility specialist performs accessibility review (in code or design)
• [ ] Engineering identifies staging users required to test and shares account and credentials with design and product
• [ ] Product performs functional QA and verifies acceptance criteria was met

Acceptance Criteria

• [x] The Need Help section has additional top padding.

[pmclaren19]

Reviewed during eng refinement.

[harshil1793]

@skylerschain I don't see vads-u-margin-top--10 as part of design.va.gov. What do you suggest as an alternative?

[skylerschain]

Chatted offline updating here: there is no consensus for margin-top padding in VADS so we're going to go with vads-u-margin-top--9 for now

[jstrothman]

As info, this request is based on the margins specified in VADS figma file: VADS Templates, Patterns, and Forms

Makes sense to use the utility that's available to us

[jstrothman]

@jacobworrell @skylerschain I followed up on this with Matt D in the VADS Figma margins annotations

VADS spacing units, and USWDS, go up to 120px: https://design.va.gov/foundation/spacing-units

If there is not a utility class for it then teams will have to write CSS or use Forms templates that have that CSS built in. We're not limited by the availability of a utility class. FWIW, I do think it is forthcoming in the new CSS Library, which we are actively switching to. That will offer all of the classes USWDS has.