[WNMGDS-3243] Upgraded Gatsby to v5

package.json

@@ -114,17 +114,17 @@
     "@testing-library/user-event": "^14.6.1",
     "@tsconfig/node18": "^18.2.4",
     "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.22",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+    "@types/node": "^18.11.9",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.19",
     "babel-plugin-module-resolver": "^5.0.0",
     "chalk": "4.1.2",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^5",
     "cssnano": "^5.1.13",
     "eslint": "^8.11.0",
-    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -177,8 +177,5 @@
   },
   "overrides": {
     "react-docgen-typescript": "2.3.0-beta.0"
-  },
-  "dependencies": {
-    "gatsby": "^5.14.1"
   }
 }

packages/design-system-tokens/package.json

@@ -6,7 +6,7 @@
   "devDependencies": {
     "@figma/rest-api-spec": "^0.13.0",
     "@inquirer/prompts": "^3.0.3",
-    "@types/node": "^17.0.22",
+    "@types/node": "^18.11.9",
     "tsx": "^4.19.2",
     "typescript": "^5.4.3"
   },

packages/docs/.eslintrc.js

@@ -16,7 +16,13 @@ module.exports = {
   plugins: ['jsx-a11y', 'react', 'react-hooks'],
   rules: {
     'no-undef': 'warn',
+    'no-unused-vars': ['warn', { ignoreRestSiblings: true }],
     'no-useless-escape': 'warn',
     'react/prop-types': [1, { ignore: ['className', 't'] }],
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

packages/docs/content/blog/release-7.0.mdx

@@ -9,13 +9,8 @@ import versionSwitcher from '../../src/images/version-switcher.png';
 
 import { Alert } from '@cmsgov/design-system';
 
-<Alert
-  variation="warn"
-  heading="Skip to v8"
->
-
-  If you’re just now planning to upgrade to v7, consider upgrading [straight to v8](/blog/release-8.0) or higher. The `Autocomplete` and `Dropdown` components underwent some API changes that didn't stabilize until v8, so skip this version to avoid changing your code twice.
-
+<Alert variation="warn" heading="Skip to v8">
+    If you’re just now planning to upgrade to v7, consider upgrading [straight to v8](/blog/release-8.0) or higher. The `Autocomplete` and `Dropdown` components underwent some API changes that didn't stabilize until v8, so skip this version to avoid changing your code twice.
 </Alert>
 
 ## What's new in 7.0

packages/docs/content/components/card.mdx

@@ -12,8 +12,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['medicare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for Medicare. Please use the theme switcher to view the component
-      with Medicare styles.
+      {
+        'This component is only used for Medicare. Please use the theme switcher to view the component with Medicare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/footer/healthcare-footer.mdx

@@ -13,8 +13,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['healthcare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for HealthCare. Please use the theme switcher to view the
-      component with HealthCare styles.
+      {
+        'This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/footer/medicare-footer.mdx

@@ -13,8 +13,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['medicare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for Medicare. Please use the theme switcher to view the component
-      with Medicare styles.
+      {
+        'This component is only used for Medicare. Please use the theme switcher to view the component with Medicare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/header/healthcare-header.mdx

@@ -13,8 +13,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['healthcare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for HealthCare. Please use the theme switcher to view the
-      component with HealthCare styles.
+      {
+        'This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/header/medicare-header.mdx

@@ -22,8 +22,9 @@ import consistentHeaderToastImg from '../../../src/images/consistent-header/cons
 <ThemeContent neverThemes={['medicare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for Medicare. Please use the theme switcher to view the component
-      with Medicare styles.
+      {
+        'This component is only used for Medicare. Please use the theme switcher to view the component with Medicare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/inset.mdx

@@ -11,8 +11,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['healthcare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for HealthCare. Please use the theme switcher to view the
-      component with HealthCare styles.
+      {
+        'This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/logos/healthcare-logo.mdx

@@ -25,8 +25,9 @@ import greyLogoTag from '../../../src/images/HCgov-logo/GreyLogoTag.png';
 <ThemeContent neverThemes={['healthcare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for HealthCare. Please use the theme switcher to view the
-      component with HealthCare styles.
+      {
+        'This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/logos/medicare-logo.mdx

@@ -14,8 +14,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['medicare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for Medicare. Please use the theme switcher to view the component
-      with Medicare styles.
+      {
+        'This component is only used for Medicare. Please use the theme switcher to view the component with Medicare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/spinner.mdx

@@ -51,21 +51,33 @@ To provide more contrast when being rendered over other content, the `.ds-c-spin
   <>
     <div
       class="ds-u-fill--background-inverse ds-u-color--base-inverse ds-u-padding--2"
-      style="position: relative"
+      style={{ position: 'relative' }}
     >
       <p>{loremIpsumGenerator('l')}</p>
       <div
         class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center"
-        style="position: absolute; width: 100%; height: 100%; top: 0; left: 0"
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+        }}
       >
         <Spinner filled aria-valuetext="Loading" />
       </div>
     </div>
-    <div class="ds-u-padding--2" style="position: relative">
+    <div class="ds-u-padding--2" style={{ position: 'relative' }}>
       <p>{loremIpsumGenerator('l')}</p>
       <div
         class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center"
-        style="position: absolute; width: 100%; height: 100%; top: 0; left: 0"
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+        }}
       >
         <Spinner filled inversed aria-valuetext="Loading" />
       </div>

packages/docs/content/components/stars.mdx

@@ -13,8 +13,9 @@ import { Alert } from '@cmsgov/design-system';
 <ThemeContent neverThemes={['medicare']}>
   <Alert variation="error">
     <p class="ds-c-alert__text">
-      This component is only used for Medicare. Please use the theme switcher to view the component
-      with Medicare styles.
+      {
+        'This component is only used for Medicare. Please use the theme switcher to view the component with Medicare styles.'
+      }
     </p>
   </Alert>
 </ThemeContent>

packages/docs/content/components/usa-banner.mdx

@@ -48,8 +48,9 @@ The following CSS variables can be overridden to customize UsaBanner components:
 <Alert weight="lightweight">
 
 <p className="ds-c-alert__text">
-  The USA Banner uses predefined variables from a theme's global tokens to determine the default
-  width of its content and gutters (padding).
+  {
+    "The USA Banner uses predefined variables from a theme's global tokens to determine the default width of its content and gutters (padding)."
+  }
 </p>
 
 For most applications this should be sufficient, but for others with custom layouts it can result in the banner's content appearing misaligned with the content of the rest of a page. To fix this, you can customize the `--usa-banner__max-width` and `--usa-banner-gutter-width` variables to match the application's page width and gutter width.
@@ -87,6 +88,7 @@ To illustrate how this works, here's an example of how to customize the banner's
 ## Accessibility testing
 
 ### Keyboard testing
+
 - Confirm that the banner can be accessed, opened, and closed with only a keyboard.
 - When navigating with a keyboard:
   - Use the **Tab** key to move forward and **Shift + Tab** to move backward to reach the banner.
@@ -97,11 +99,13 @@ To illustrate how this works, here's an example of how to customize the banner's
 - The banner button is the first interactive object after the “skip navigation” link. When you navigate your site with a keyboard and bypass the “skip navigation” link, the "Here’s how you know” banner button is the first focusable item on the page.
 
 ### Screen reader testing
+
 Use a screen reader (such as **NVDA**, **JAWS**, or **VoiceOver**) to test the banner.
-- Screen reader announces button. When you use a screen reader and access the banner, the screen reader uses the word "button" to announce the "Here’s how you know" button.  
-- Screen reader announces collapsed and expanded states. When you first access the "Here’s how you know" button while using a screen reader, the screen reader announces that it is "collapsed." When activated, the screen reader announces "expanded."  
-- Screen reader does not announce decorative icons. When you open the banner with a screen reader, you don’t hear any information about the flag, blue government building, or green circled lock icon. When you view the `alt` text for the flag, blue government building, and green circled lock icon, you see that the `alt` attribute has an empty value.  
-- Screen reader announces the lock icon inside the parentheses. When you open the banner with a screen reader, the screen reader uses the words "lock icon"å to announce the lock icon inside the parentheses.  
+
+- Screen reader announces button. When you use a screen reader and access the banner, the screen reader uses the word "button" to announce the "Here’s how you know" button.
+- Screen reader announces collapsed and expanded states. When you first access the "Here’s how you know" button while using a screen reader, the screen reader announces that it is "collapsed." When activated, the screen reader announces "expanded."
+- Screen reader does not announce decorative icons. When you open the banner with a screen reader, you don’t hear any information about the flag, blue government building, or green circled lock icon. When you view the `alt` text for the flag, blue government building, and green circled lock icon, you see that the `alt` attribute has an empty value.
+- Screen reader announces the lock icon inside the parentheses. When you open the banner with a screen reader, the screen reader uses the words "lock icon"å to announce the lock icon inside the parentheses.
 
 From [USWDS' Banner accessibility tests](https://designsystem.digital.gov/components/banner/accessibility-tests/)
 

packages/docs/content/foundation/layout-grid/layout-grid.mdx

@@ -180,19 +180,19 @@ Align columns horizontally or vertically using [flexbox utility classes](/utilit
     </div>
     <div
       class="ds-l-row ds-u-align-items--start ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
-      style="height: 100px"
+      style={{ height: 100 }}
     >
       <div class="ds-l-col--3">Top</div>
     </div>
     <div
       class="ds-l-row ds-u-align-items--center ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
-      style="height: 100px"
+      style={{ height: 100 }}
     >
       <div class="ds-l-col--3">Center</div>
     </div>
     <div
       class="ds-l-row ds-u-align-items--end ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
-      style="height: 100px"
+      style={{ height: 100 }}
     >
       <div class="ds-l-col--3">Bottom</div>
     </div>

packages/docs/content/foundation/system-color-tokens.mdx

@@ -4,10 +4,29 @@ order: 70
 intro: System color tokens are the entire set of color tokens from which our themes are built.
 ---
 
-import ColorContrastGuidelines from '../../src/reusable-text-snippets/ColorContrastGuidelines.mdx';
-
 While this page shows the full range of colors, it's essential to use the theme color tokens identified for your brand's experience when building your product. Think of system color tokens like an entire box of crayons; our themes use specific colors from the box, not all of them.
 
 <ColorRamps />
 
-<ColorContrastGuidelines />
+## Accessibility considerations
+
+### Text contrast
+
+WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
+
+Text over gradients and background images still need to meet contrast requirements.
+
+### Non-text contrast
+
+Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
+
+### Easily test your color combinations
+
+Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast:
+
+[WebAIM Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+
+[Deque Color Contrast Analyzer](https://dequeuniversity.com/color-contrast)
+
+[Color Contrast Analyzer by TPGi](https://www.tpgi.com/color-contrast-checker/)
+

packages/docs/content/foundation/theme-colors.mdx

@@ -4,8 +4,6 @@ order: 60
 intro: The design system provides a flexible color palette that meets accessible color contrast requirements.
 ---
 
-import ColorContrastGuidelines from '../../src/reusable-text-snippets/ColorContrastGuidelines.mdx';
-
 Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand’s experiences, from product interfaces to marketing.
 
 You can apply color to:
@@ -92,4 +90,25 @@ Be cautious using these colors to signify something that may contradict what mos
 
 <ColorTable colorCategory={["focus-light", 'focus-dark']} exactMatch={true} />
 
-<ColorContrastGuidelines />
+## Accessibility considerations
+
+### Text contrast
+
+WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.
+
+Text over gradients and background images still need to meet contrast requirements.
+
+### Non-text contrast
+
+Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.
+
+### Easily test your color combinations
+
+Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast:
+
+[WebAIM Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+
+[Deque Color Contrast Analyzer](https://dequeuniversity.com/color-contrast)
+
+[Color Contrast Analyzer by TPGi](https://www.tpgi.com/color-contrast-checker/)
+

packages/docs/content/foundation/typography/body.mdx

@@ -18,11 +18,7 @@ import { Alert } from '@cmsgov/design-system';
 import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 <Alert heading="Typography sizing updates!">
-  <p class="ds-c-alert__text">
-    We've updated typography sizing variables and class names to separate semantics from
-    presentation. Read about{' '}
-    <a href="/migration-guides/agnostic-typography-classes">how you can update</a>.
-  </p>
+  <p class="ds-c-alert__text">We've updated typography sizing variables and class names to separate semantics from presentation. Read about{' '}<a href="/migration-guides/agnostic-typography-classes">how you can update</a>.</p>
 </Alert>
 
 <ThemeContent onlyThemes={['healthcare']}>

packages/docs/content/foundation/typography/links.mdx

@@ -18,11 +18,7 @@ import { Alert } from '@cmsgov/design-system';
 import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 <Alert heading="Typography sizing updates!">
-  <p class="ds-c-alert__text">
-    We've updated typography sizing variables and class names to separate semantics from
-    presentation. Read about{' '}
-    <a href="/migration-guides/agnostic-typography-classes">how you can update</a>.
-  </p>
+  <p class="ds-c-alert__text">We've updated typography sizing variables and class names to separate semantics from presentation. Read about{' '}<a href="/migration-guides/agnostic-typography-classes">how you can update</a>.</p>
 </Alert>
 
 ## Examples

packages/docs/content/foundation/typography/lists.mdx

@@ -18,11 +18,7 @@ import { Alert } from '@cmsgov/design-system';
 import loremIpsumGenerator from '../../../src/helpers/loremIpsumGenerator';
 
 <Alert heading="Typography sizing updates!">
-  <p class="ds-c-alert__text">
-    We've updated typography sizing variables and class names to separate semantics from
-    presentation. Read about{' '}
-    <a href="/migration-guides/agnostic-typography-classes">how you can update</a>.
-  </p>
+  <p class="ds-c-alert__text">We've updated typography sizing variables and class names to separate semantics from presentation. Read about{' '}<a href="/migration-guides/agnostic-typography-classes">how you can update</a>.</p>
 </Alert>
 
 ## Examples

packages/docs/content/layouts/Healthcare/one-col-page-layout.mdx

@@ -12,10 +12,7 @@ import { Alert } from '@cmsgov/design-system';
 
 <ThemeContent neverThemes={['healthcare']}>
   <Alert variation="error">
-    <p class="ds-c-alert__text">
-      This component is only used for Healthcare. Please use the theme switcher to view the
-      component with Healthcare styles.
-    </p>
+    <p class="ds-c-alert__text">This component is only used for Healthcare. Please use the theme switcher to view the component with Healthcare styles.</p>
   </Alert>
 </ThemeContent>