[WNMGDS-2835] Adds figma links to docs site

[kim-cmsds]

Summary

• JIRA link: https://jira.cms.gov/browse/WNMGDS-2835
• Removes links to sketch assets on the docs site and replaces those with links to figma pages based on whichever theme is currently in use

How to test

1. This branch can either be pulled down locally or viewed at https://cmsgov.github.io/design-system/branch/kniedermaier/WNMGDS-2835-update-docs-site/
2. Go through each updated docs site page using each theme (cmsgov, core, healthcare, medicare) and click the figma link and verify that the figma page corresponds with the docs site page content

• [x] accordion
• [x] accordion
• [x] alert
• [x] autocomplete
• [x] badge
• [x] button
• [x] card
• [x] checkbox
• [x] date-picker
• [x] multi-input-date-field
• [x] single-input-date-field
• [x] drawer
• [x] dropdown
• [x] filter-chip
• [x] healthcare-footer
• [x] medicare-footer
• [x] healthcare-header
• [x] medicare-header
• [x] icon
• [x] healthcare-logo
• [x] hhs-logo
• [x] medicare-logo
• [x] modal-dialog
• [x] month-picker
• [x] pagination
• [x] radio
• [x] review
• [x] skip-nav
• [x] spinner
• [ ] stars
• [x] step-list
• [x] table
• [x] tabs
• [x] text-field/text-field
• [x] tooltip
• [x] usa-banner
• [x] vertical-navigation
• [ ] layout-grid
• [x] spacing
• [x] body
• [x] headings
• [x] links
• [x] lists
• [ ] one-col-page-layout
• [x] documentation-page
• [x] error-validation
• [x] measure

Checklist

• [x] Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
• [x] Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
• [x] Selected appropriate Impacts, multiple can be selected.
• [x] Selected appropriate release milestone

[jack-ryan-nava-pbc]

I am experiencing some unexpected behavior that is going to be tricky to convey verbally, but here goes. Seems like the theme switcher is not properly changing the Figma library link when the theme is changed. The theme is changed properly on initial page load, but the theme switcher sets the url back to the generic Design System link instead of the theme specific link.

Steps to reproduce:

1. Select the alert component with the Core theme chosen
2. Open the Figma library in your local instance of Figma desktop (not browser Figma)
3. You'll be sent to the Design System Library - okey dokey
4. Change theme from Core to Medicare
5. Open Figma
6. Still sent to Design System Library - hmm
7. Leave Medicare theme selected
8. Go to autocomplete component page then back to the alert component page
9. Open Figma
10. Sent to Medicare specific Figma library - ok, but hmm?
11. Switch theme to Healthcare or CMS
12. Open Figma
13. Go to Design System library?

[tamara-corbalt]

@jack-ryan-nava-pbc, I was able to replicate this:

I am experiencing some unexpected behavior that is going to be tricky to convey verbally, but here goes. Seems like the theme switcher is not properly changing the Figma library link when the theme is changed. The theme is changed properly on initial page load, but the theme switcher sets the url back to the generic Design System link instead of the theme specific link.

Steps to reproduce:

1. Select the alert component with the Core theme chosen
2. Open the Figma library in your local instance of Figma desktop (not browser Figma)
3. You'll be sent to the Design System Library - okey dokey
4. Change theme from Core to Medicare
5. Open Figma
6. Still sent to Design System Library - hmm
7. Leave Medicare theme selected
8. Go to autocomplete component page then back to the alert component page
9. Open Figma
10. Sent to Medicare specific Figma library - ok, but hmm?
11. Switch theme to Healthcare or CMS
12. Open Figma
13. Go to Design System library?

Additional steps I followed:

14. Left the Healthcare theme selected, and navigated to the Autocomplete page then back to the alert component page.
15. Opened Figma link, was sent to the Healthcare specific Figma library.

Could this point towards a caching issue or a missed update in the theme-switching logic?

[kim-cmsds]

@tamara-corbalt and @jack-ryan-nava-pbc I think this is an issue with gatsby when deployed with gh-pages.

If you go to another branch that is deployed with gh-pages (https://cmsgov.github.io/design-system/branch/pwolfert/release-11-blog-post/components/alert/?theme=medicare) and follow the same step series (more or less) then you'll notice that the sketch link is not updating based on the theme switcher.

I was not able to reproduce this locally or on the production site.

[kim-cmsds]

@malloryiden thank you for the thorough review! I'm re-requesting your review for those 3 components you pointed out:

• stars
• layout grid
• one column grid layout

[kim-cmsds]

@tamara-corbalt and @jack-ryan-nava-pbc: I pushed up changes that should resolve the issues you pointed out