From a511c95c7ff896b99c8cb8fcf7ff08f249161eb1 Mon Sep 17 00:00:00 2001
From: Mike Surowiec <mikesurowiec@users.noreply.github.com>
Date: Thu, 29 Jul 2021 13:27:20 -0400
Subject: [PATCH] SCSS and Component cleanup (pt 1) (#20572)

* turn article.scss into a module + componentized

* Update Survey to use only component styles, add cancel button

* Update GenericError + 404 page to use only standard classes

* update LearningTrack to not use markdown-body

* remove / consolidate stylesheets

* cleanup Graphiql explorer page and scss

* Componentize Breadcrumb styles

* Componentize DeprecationBanner styles

* scope h2 a link style to markdown-body

* cleanup nav, organize page-header and page-footer components

* remove unused scroll-button.scss

* organize LanguagePicker and ProductPicker

* add declarations file

* remove featured-links.scss, update tests

* update list utility and toc test

* fix bad merge resolution

* update breadcrumbs test
---
 Dockerfile                                    |   1 +
 components/Breadcrumbs.tsx                    |  44 +++----
 components/DefaultLayout.tsx                  |   8 +-
 components/DeprecationBanner.tsx              |  38 ------
 components/GenericError.tsx                   |   4 +-
 components/article/ArticleContent.tsx         |  12 ++
 .../article/ArticleGridLayout.module.scss     |  15 +--
 components/article/ArticleGridLayout.tsx      |  28 +++++
 components/article/ArticlePage.tsx            | 103 +++++++---------
 components/article/ArticleTopper.tsx          |  18 +++
 components/article/LearningTrackNav.tsx       |   2 +-
 components/context/LanguagesContext.tsx       |   8 --
 components/context/TocLandingContext.tsx      |   7 +-
 components/declarations.d.ts                  |   4 +
 components/landing/TableOfContents.tsx        |  49 ++++----
 components/landing/TocLanding.tsx             | 112 +++++++-----------
 components/{ => page-footer}/Contribution.tsx |   0
 components/{ => page-footer}/SmallFooter.tsx  |   0
 components/{ => page-footer}/Support.tsx      |   0
 .../{ => page-footer}/SupportSection.tsx      |   8 +-
 components/{ => page-footer}/Survey.tsx       |  32 ++++-
 components/page-header/DeprecationBanner.tsx  |  40 +++++++
 components/{ => page-header}/Header.tsx       |   6 +-
 .../HeaderNotifications.module.scss           |   4 +
 .../{ => page-header}/HeaderNotifications.tsx |  20 ++--
 .../{ => page-header}/LanguagePicker.tsx      |   2 +-
 .../{ => page-header}/ProductPicker.tsx       |   0
 components/sublanding/LearningTracks.tsx      |  10 +-
 pages/404.tsx                                 |   4 +-
 .../[versionId]/graphql/overview/explorer.tsx |  42 ++++---
 pages/_app.tsx                                |  22 ++--
 pages/index.tsx                               |   2 +-
 stylesheets/breadcrumbs.scss                  |  17 ---
 stylesheets/deprecation-banner.scss           |  24 ----
 stylesheets/dev-toc.scss                      |  14 ---
 stylesheets/explorer.scss                     |   8 --
 stylesheets/featured-links.scss               |  16 ---
 stylesheets/headings.scss                     |  14 +--
 stylesheets/index.scss                        |  12 --
 stylesheets/lists.scss                        |   4 -
 stylesheets/nav.scss                          |  98 ---------------
 stylesheets/opacity.scss                      |  12 --
 stylesheets/print.scss                        |   8 --
 stylesheets/scroll-button.scss                |  20 ----
 stylesheets/survey.scss                       |   8 --
 stylesheets/underline-dashed.scss             |  13 --
 stylesheets/utilities.scss                    |  47 ++++++++
 tests/content/featured-links.js               |   4 +-
 tests/rendering/breadcrumbs.js                |  28 ++---
 tests/rendering/header.js                     |  40 +++----
 tests/rendering/server.js                     |   2 +-
 .../routing/deprecated-enterprise-versions.js |   8 +-
 52 files changed, 441 insertions(+), 601 deletions(-)
 delete mode 100644 components/DeprecationBanner.tsx
 create mode 100644 components/article/ArticleContent.tsx
 rename stylesheets/article.scss => components/article/ArticleGridLayout.module.scss (73%)
 create mode 100644 components/article/ArticleGridLayout.tsx
 create mode 100644 components/article/ArticleTopper.tsx
 create mode 100644 components/declarations.d.ts
 rename components/{ => page-footer}/Contribution.tsx (100%)
 rename components/{ => page-footer}/SmallFooter.tsx (100%)
 rename components/{ => page-footer}/Support.tsx (100%)
 rename components/{ => page-footer}/SupportSection.tsx (78%)
 rename components/{ => page-footer}/Survey.tsx (81%)
 create mode 100644 components/page-header/DeprecationBanner.tsx
 rename components/{ => page-header}/Header.tsx (95%)
 create mode 100644 components/page-header/HeaderNotifications.module.scss
 rename components/{ => page-header}/HeaderNotifications.tsx (83%)
 rename components/{ => page-header}/LanguagePicker.tsx (97%)
 rename components/{ => page-header}/ProductPicker.tsx (100%)
 delete mode 100644 stylesheets/breadcrumbs.scss
 delete mode 100644 stylesheets/deprecation-banner.scss
 delete mode 100644 stylesheets/dev-toc.scss
 delete mode 100644 stylesheets/explorer.scss
 delete mode 100644 stylesheets/featured-links.scss
 delete mode 100644 stylesheets/nav.scss
 delete mode 100644 stylesheets/opacity.scss
 delete mode 100644 stylesheets/print.scss
 delete mode 100644 stylesheets/scroll-button.scss
 delete mode 100644 stylesheets/survey.scss
 delete mode 100644 stylesheets/underline-dashed.scss

diff --git a/Dockerfile b/Dockerfile
index b320d4c8ae4b..1580f03fa863 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -47,6 +47,7 @@ COPY content/index.md ./content/index.md
 
 COPY next.config.js ./next.config.js
 COPY tsconfig.json ./tsconfig.json
+COPY next-env.d.ts ./next-env.d.ts
 
 RUN npx tsc --noEmit
 
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index 5535675b0d95..b110311b3394 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -18,31 +18,35 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
   const { breadcrumbs } = useMainContext()
 
   return (
-    <nav className="breadcrumbs f5" aria-label="Breadcrumb">
-      {Object.values(breadcrumbs).map((breadcrumb) => {
+    <nav data-testid="breadcrumbs" className="f5" aria-label="Breadcrumb">
+      {Object.values(breadcrumbs).map((breadcrumb, i, arr) => {
         if (!breadcrumb) {
           return null
         }
 
         const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
-        return !breadcrumb.href ? (
-          <span key={title} title={title}>
-            {breadcrumb.title}
-          </span>
-        ) : (
-          <Link
-            key={title}
-            href={breadcrumb.href}
-            title={title}
-            className={cx(
-              'd-inline-block',
-              variant === 'large' && 'text-uppercase text-mono',
-              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-            )}
-          >
-            {breadcrumb.title}
-          </Link>
-        )
+        return [
+          !breadcrumb.href ? (
+            <span data-testid="breadcrumb-title" key={title} title={title} className="px-2">
+              {breadcrumb.title}
+            </span>
+          ) : (
+            <Link
+              key={title}
+              data-testid="breadcrumb-link"
+              href={breadcrumb.href}
+              title={title}
+              className={cx(
+                'd-inline-block px-2',
+                variant === 'large' && 'text-uppercase text-mono',
+                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+              )}
+            >
+              {breadcrumb.title}
+            </Link>
+          ),
+          i !== arr.length - 1 ? <span className="color-text-tertiary">/</span> : null,
+        ]
       })}
     </nav>
   )
diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
index e2d0c9d39814..aa5a702dd3a9 100644
--- a/components/DefaultLayout.tsx
+++ b/components/DefaultLayout.tsx
@@ -1,11 +1,11 @@
 import Head from 'next/head'
 
 import { SidebarNav } from 'components/SidebarNav'
-import { Header } from 'components/Header'
-import { SmallFooter } from 'components/SmallFooter'
+import { Header } from 'components/page-header/Header'
+import { SmallFooter } from 'components/page-footer/SmallFooter'
 import { ScrollButton } from 'components/ScrollButton'
-import { SupportSection } from 'components/SupportSection'
-import { DeprecationBanner } from 'components/DeprecationBanner'
+import { SupportSection } from 'components/page-footer/SupportSection'
+import { DeprecationBanner } from 'components/page-header/DeprecationBanner'
 import { useMainContext } from 'components/context/MainContext'
 import { useTranslation } from './hooks/useTranslation'
 
diff --git a/components/DeprecationBanner.tsx b/components/DeprecationBanner.tsx
deleted file mode 100644
index 89ebe1bbf7cd..000000000000
--- a/components/DeprecationBanner.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useMainContext } from 'components/context/MainContext'
-import { useVersion } from 'components/hooks/useVersion'
-
-export const DeprecationBanner = () => {
-  const { data, enterpriseServerReleases } = useMainContext()
-  const { currentVersion } = useVersion()
-
-  if (!currentVersion.includes(enterpriseServerReleases.oldestSupported)) {
-    return null
-  }
-
-  const message = enterpriseServerReleases.isOldestReleaseDeprecated
-    ? data.reusables.enterprise_deprecation.version_was_deprecated
-    : data.reusables.enterprise_deprecation.version_will_be_deprecated
-
-  return (
-    <div className="deprecation-banner border rounded-1 mb-2 color-bg-warning p-3 color-border-warning f5">
-      <p>
-        <b>
-          <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
-          <span
-            data-date={enterpriseServerReleases.nextDeprecationDate}
-            data-format="%B %d, %Y"
-            title={enterpriseServerReleases.nextDeprecationDate}
-          >
-            {enterpriseServerReleases.nextDeprecationDate}
-          </span>
-          .
-        </b>{' '}
-        <span
-          dangerouslySetInnerHTML={{
-            __html: data.reusables.enterprise_deprecation.deprecation_details,
-          }}
-        />
-      </p>
-    </div>
-  )
-}
diff --git a/components/GenericError.tsx b/components/GenericError.tsx
index ac853e5b654a..69c15609c707 100644
--- a/components/GenericError.tsx
+++ b/components/GenericError.tsx
@@ -17,8 +17,8 @@ export function GenericError() {
       <SimpleHeader />
 
       <div className="container-xl p-responsive py-9 width-full flex-1">
-        <article className="markdown-body col-md-10 col-lg-7 mx-auto">
-          <h1>Ooops!</h1>
+        <article className="col-md-10 col-lg-7 mx-auto">
+          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
           <p className="lead-mktg">It looks like something went wrong.</p>
           <p className="lead-mktg">
             We track these errors automatically, but if the problem persists please feel free to
diff --git a/components/article/ArticleContent.tsx b/components/article/ArticleContent.tsx
new file mode 100644
index 000000000000..a369eb37c1f7
--- /dev/null
+++ b/components/article/ArticleContent.tsx
@@ -0,0 +1,12 @@
+type Props = {
+  children: string
+}
+export const ArticleContent = ({ children }: Props) => {
+  return (
+    <div
+      id="article-contents"
+      className="markdown-body"
+      dangerouslySetInnerHTML={{ __html: children }}
+    />
+  )
+}
diff --git a/stylesheets/article.scss b/components/article/ArticleGridLayout.module.scss
similarity index 73%
rename from stylesheets/article.scss
rename to components/article/ArticleGridLayout.module.scss
index c4da64df2e41..48c6af06e550 100644
--- a/stylesheets/article.scss
+++ b/components/article/ArticleGridLayout.module.scss
@@ -1,7 +1,8 @@
-/* Grid-based layout
-------------------------------------------------------------------------------*/
+@import "@primer/css/layout/index.scss";
+@import "@primer/css/support/variables/layout.scss";
+@import "@primer/css/marketing/support/variables.scss";
 
-.article-grid-container {
+.container {
   max-width: 720px;
 
   @include breakpoint(xl) {
@@ -20,11 +21,11 @@
   }
 }
 
-.article-grid-toc {
+.sidebar {
   grid-area: right-sidebar;
 }
 
-.article-grid-toc-content {
+.sidebarContent {
   @include breakpoint(xl) {
     position: sticky;
     top: $spacer-4;
@@ -34,10 +35,10 @@
   }
 }
 
-.article-grid-head {
+.head {
   grid-area: top;
 }
 
-.article-grid-body {
+.content {
   grid-area: bottom;
 }
diff --git a/components/article/ArticleGridLayout.tsx b/components/article/ArticleGridLayout.tsx
new file mode 100644
index 000000000000..9d6b3e52ce0d
--- /dev/null
+++ b/components/article/ArticleGridLayout.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './ArticleGridLayout.module.scss'
+
+type Props = {
+  head?: React.ReactNode
+  toc?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+}
+export const ArticleGridLayout = ({ head, toc, children, className }: Props) => {
+  return (
+    <div className={cx(styles.container, className)}>
+      {/* head */}
+      {head && <div className={styles.head}>{head}</div>}
+
+      {/* toc */}
+      {toc && (
+        <div className={cx(styles.sidebar, 'border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0')}>
+          <div className={styles.sidebarContent}>{toc}</div>
+        </div>
+      )}
+
+      {/* content */}
+      <div className={styles.content}>{children}</div>
+    </div>
+  )
+}
diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
index 0634436fa910..7e8a7457f848 100644
--- a/components/article/ArticlePage.tsx
+++ b/components/article/ArticlePage.tsx
@@ -1,13 +1,14 @@
 import cx from 'classnames'
 
 import { DefaultLayout } from 'components/DefaultLayout'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
-import { Breadcrumbs } from 'components/Breadcrumbs'
+import { ArticleTopper } from 'components/article/ArticleTopper'
 import { ArticleTitle } from 'components/article/ArticleTitle'
 import { useArticleContext } from 'components/context/ArticleContext'
 import { InfoIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { LearningTrackNav } from './LearningTrackNav'
+import { ArticleContent } from './ArticleContent'
+import { ArticleGridLayout } from './ArticleGridLayout'
 
 export const ArticlePage = () => {
   const {
@@ -26,21 +27,12 @@ export const ArticlePage = () => {
   return (
     <DefaultLayout>
       <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
-        <article className="markdown-body">
-          <div className="d-lg-flex flex-justify-between">
-            <div className="d-block d-lg-none">
-              <ArticleVersionPicker />
-            </div>
-            <div className="d-flex flex-items-center">
-              <Breadcrumbs />
-            </div>
-            <div className="d-none d-lg-block">
-              <ArticleVersionPicker />
-            </div>
-          </div>
+        <ArticleTopper />
 
-          <div className="article-grid-container mt-2">
-            <div className="article-grid-head">
+        <ArticleGridLayout
+          className="mt-7"
+          head={
+            <>
               <ArticleTitle>{title}</ArticleTitle>
 
               {contributor && (
@@ -99,52 +91,43 @@ export const ArticlePage = () => {
                   dangerouslySetInnerHTML={{ __html: product }}
                 />
               )}
-            </div>
-
-            <div className="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
-              <div className="article-grid-toc-content">
-                {miniTocItems.length > 1 && (
-                  <>
-                    <h2 id="in-this-article" className="f5 mb-2">
-                      <a className="Link--primary" href="#in-this-article">
-                        {t('miniToc')}
-                      </a>
-                    </h2>
-                    <ul className="list-style-none pl-0 f5 mb-0">
-                      {miniTocItems.map((item) => {
-                        return (
-                          <li
-                            key={item.contents}
-                            className={cx(
-                              `ml-${item.indentationLevel * 3}`,
-                              item.platform,
-                              'mb-2 lh-condensed'
-                            )}
-                            dangerouslySetInnerHTML={{ __html: item.contents }}
-                          />
-                        )
-                      })}
-                    </ul>
-                  </>
-                )}
-              </div>
-            </div>
+            </>
+          }
+          toc={
+            miniTocItems.length > 1 && (
+              <>
+                <h2 id="in-this-article" className="f5 mb-2">
+                  <a className="Link--primary" href="#in-this-article">
+                    {t('miniToc')}
+                  </a>
+                </h2>
+                <ul className="list-style-none pl-0 f5 mb-0">
+                  {miniTocItems.map((item) => {
+                    return (
+                      <li
+                        key={item.contents}
+                        className={cx(
+                          `ml-${item.indentationLevel * 3}`,
+                          item.platform,
+                          'mb-2 lh-condensed'
+                        )}
+                        dangerouslySetInnerHTML={{ __html: item.contents }}
+                      />
+                    )
+                  })}
+                </ul>
+              </>
+            )
+          }
+        >
+          <ArticleContent>{renderedPage}</ArticleContent>
+        </ArticleGridLayout>
 
-            <div className="markdown-body">
-              <div
-                id="article-contents"
-                className="article-grid-body"
-                dangerouslySetInnerHTML={{ __html: renderedPage }}
-              />
-            </div>
+        {currentLearningTrack?.trackName ? (
+          <div className="mt-4">
+            <LearningTrackNav track={currentLearningTrack} />
           </div>
-
-          {currentLearningTrack?.trackName ? (
-            <div className="d-block mt-4 markdown-body">
-              <LearningTrackNav track={currentLearningTrack} />
-            </div>
-          ) : null}
-        </article>
+        ) : null}
       </div>
     </DefaultLayout>
   )
diff --git a/components/article/ArticleTopper.tsx b/components/article/ArticleTopper.tsx
new file mode 100644
index 000000000000..cf7cef107406
--- /dev/null
+++ b/components/article/ArticleTopper.tsx
@@ -0,0 +1,18 @@
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+
+export const ArticleTopper = () => {
+  return (
+    <div className="d-lg-flex flex-justify-between">
+      <div className="d-block d-lg-none mb-2">
+        <ArticleVersionPicker />
+      </div>
+      <div className="d-flex flex-items-center">
+        <Breadcrumbs />
+      </div>
+      <div className="d-none d-lg-block">
+        <ArticleVersionPicker />
+      </div>
+    </div>
+  )
+}
diff --git a/components/article/LearningTrackNav.tsx b/components/article/LearningTrackNav.tsx
index 21931eff9baf..a85df641017c 100644
--- a/components/article/LearningTrackNav.tsx
+++ b/components/article/LearningTrackNav.tsx
@@ -29,7 +29,7 @@ export function LearningTrackNav({ track }: Props) {
             <span className="f6 color-text-secondary">{t('nextGuide')}</span>
             <a
               href={`${nextGuide.href}?learn=${trackName}`}
-              className="text-bold color-text-secondary text-right"
+              className="text-bold color-text-secondary text-right f4"
             >
               {nextGuide.title}
             </a>
diff --git a/components/context/LanguagesContext.tsx b/components/context/LanguagesContext.tsx
index 630e806da33f..748b59031a27 100644
--- a/components/context/LanguagesContext.tsx
+++ b/components/context/LanguagesContext.tsx
@@ -1,5 +1,4 @@
 import { createContext, useContext } from 'react'
-import languages from 'lib/languages.js'
 
 type LanguageItem = {
   name: string
@@ -15,13 +14,6 @@ export type LanguagesContextT = {
 
 export const LanguagesContext = createContext<LanguagesContextT | null>(null)
 
-type Props = {
-  children?: React.ReactNode
-}
-export const LanguagesProvider = ({ children }: Props) => {
-  return <LanguagesContext.Provider value={{ languages }}>{children}</LanguagesContext.Provider>
-}
-
 export const useLanguages = (): LanguagesContextT => {
   const context = useContext(LanguagesContext)
 
diff --git a/components/context/TocLandingContext.tsx b/components/context/TocLandingContext.tsx
index cc0d084e8677..689829a106d3 100644
--- a/components/context/TocLandingContext.tsx
+++ b/components/context/TocLandingContext.tsx
@@ -12,11 +12,10 @@ export type TocLandingContextT = {
   title: string
   introPlainText: string
   productCallout: string
-  isEarlyAccess: boolean
   tocItems: Array<TocItem>
   variant?: 'compact' | 'expanded'
   featuredLinks: Record<string, Array<FeaturedLink>>
-  renderedEarlyAccessPage: string
+  renderedPage: string
 }
 
 export const TocLandingContext = createContext<TocLandingContextT | null>(null)
@@ -32,17 +31,17 @@ export const useTocLandingContext = (): TocLandingContextT => {
 }
 
 export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  const isEarlyAccess = req.context.page?.documentType === 'early-access'
   return {
     title: req.context.page.title,
     productCallout: req.context.page.product || '',
     introPlainText: req.context.page.introPlainText,
-    isEarlyAccess: req.context.page?.documentType === 'early-access',
     tocItems: (req.context.genericTocFlat || req.context.genericTocNested || []).map((obj: any) =>
       pick(obj, ['fullPath', 'title', 'intro', 'childTocItems'])
     ),
     variant: req.context.genericTocFlat ? 'expanded' : 'compact',
 
     featuredLinks: getFeaturedLinksFromReq(req),
-    renderedEarlyAccessPage: req.context.renderedPage,
+    renderedPage: isEarlyAccess ? req.context.renderedPage : '',
   }
 }
diff --git a/components/declarations.d.ts b/components/declarations.d.ts
new file mode 100644
index 000000000000..f8e975fa544f
--- /dev/null
+++ b/components/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: Record<string, string>
+  export default content
+}
diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
index 9c4fe148a231..9e87fc10873b 100644
--- a/components/landing/TableOfContents.tsx
+++ b/components/landing/TableOfContents.tsx
@@ -13,7 +13,10 @@ export const TableOfContents = (props: Props) => {
   const router = useRouter()
 
   return (
-    <ul className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
+    <ul
+      data-testid="table-of-contents"
+      className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}
+    >
       {(items || []).map((item) => {
         if (!item) {
           return null
@@ -24,27 +27,29 @@ export const TableOfContents = (props: Props) => {
         return variant === 'compact' ? (
           <li key={href} className="f4 my-1">
             <Link href={href}>{title}</Link>
-            <ul
-              className={cx(
-                variant === 'compact' ? 'list-style-circle pl-5 my-3' : 'list-style-none'
-              )}
-            >
-              {(childTocItems || []).map((childItem) => {
-                if (!childItem) {
-                  return null
-                }
-                return (
-                  <li key={childItem.fullPath} className="f4 mt-1">
-                    <Link
-                      href={childItem.fullPath}
-                      className="Bump-link--hover no-underline py-1 color-border-primary"
-                    >
-                      {childItem.title}
-                    </Link>
-                  </li>
-                )
-              })}
-            </ul>
+            {(childTocItems || []).length > 0 && (
+              <ul
+                className={cx(
+                  variant === 'compact' ? 'list-style-circle pl-5 my-3' : 'list-style-none'
+                )}
+              >
+                {(childTocItems || []).map((childItem) => {
+                  if (!childItem) {
+                    return null
+                  }
+                  return (
+                    <li key={childItem.fullPath} className="f4 mt-1">
+                      <Link
+                        href={childItem.fullPath}
+                        className="Bump-link--hover no-underline py-1 color-border-primary"
+                      >
+                        {childItem.title}
+                      </Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
           </li>
         ) : (
           <li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
diff --git a/components/landing/TocLanding.tsx b/components/landing/TocLanding.tsx
index bbe20b22582d..24022406ff1e 100644
--- a/components/landing/TocLanding.tsx
+++ b/components/landing/TocLanding.tsx
@@ -1,95 +1,67 @@
 import { DefaultLayout } from 'components/DefaultLayout'
 import { TableOfContents } from 'components/landing/TableOfContents'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
-import { Breadcrumbs } from 'components/Breadcrumbs'
 import { useTocLandingContext } from 'components/context/TocLandingContext'
+import { ArticleTopper } from 'components/article/ArticleTopper'
 import { ArticleTitle } from 'components/article/ArticleTitle'
+import { ArticleContent } from 'components/article/ArticleContent'
 import { ArticleList } from 'components/landing/ArticleList'
 import { useTranslation } from 'components/hooks/useTranslation'
+import { ArticleGridLayout } from 'components/article/ArticleGridLayout'
 
 export const TocLanding = () => {
-  const {
-    title,
-    introPlainText,
-    tocItems,
-    productCallout,
-    variant,
-    featuredLinks,
-    isEarlyAccess,
-    renderedEarlyAccessPage,
-  } = useTocLandingContext()
+  const { title, introPlainText, tocItems, productCallout, variant, featuredLinks, renderedPage } =
+    useTocLandingContext()
   const { t } = useTranslation('toc')
 
   return (
     <DefaultLayout>
       <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
-        <div className="d-lg-flex flex-justify-between">
-          <div className="d-block d-lg-none">
-            <ArticleVersionPicker />
-          </div>
-          <div className="d-flex flex-items-center">
-            <Breadcrumbs />
-          </div>
-          <div className="d-none d-lg-block">
-            <ArticleVersionPicker />
-          </div>
-        </div>
+        <ArticleTopper />
 
-        <div className="article-grid-container">
-          <div>
-            <div className="mt-7">
-              <ArticleTitle>{title}</ArticleTitle>
+        <ArticleGridLayout className="mt-7">
+          <ArticleTitle>{title}</ArticleTitle>
 
-              <div className="lead-mktg">
-                <p>{introPlainText}</p>
-              </div>
+          <div className="lead-mktg">
+            <p>{introPlainText}</p>
+          </div>
 
-              {productCallout && (
-                <div
-                  className="product-callout border rounded-1 mb-4 p-3 color-border-success color-bg-success"
-                  dangerouslySetInnerHTML={{ __html: productCallout }}
-                />
-              )}
-            </div>
+          {productCallout && (
+            <div
+              className="product-callout border rounded-1 mb-4 p-3 color-border-success color-bg-success"
+              dangerouslySetInnerHTML={{ __html: productCallout }}
+            />
+          )}
 
-            <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0" />
+          <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-2 mb-xl-2" />
 
-            <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
-              {featuredLinks.gettingStarted && featuredLinks.popular && (
-                <div className="pb-8 container-xl">
-                  <div className="gutter gutter-xl-spacious clearfix">
-                    <div className="col-12 col-lg-6 mb-md-4 mb-lg-0 float-left">
-                      <ArticleList
-                        title={t('getting_started')}
-                        variant="spaced"
-                        articles={featuredLinks.gettingStarted}
-                      />
-                    </div>
+          <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
+            {featuredLinks.gettingStarted && featuredLinks.popular && (
+              <div className="pb-8 container-xl">
+                <div className="gutter gutter-xl-spacious clearfix">
+                  <div className="col-12 col-lg-6 mb-md-4 mb-lg-0 float-left">
+                    <ArticleList
+                      title={t('getting_started')}
+                      variant="spaced"
+                      articles={featuredLinks.gettingStarted}
+                    />
+                  </div>
 
-                    <div className="col-12 col-lg-6 float-left">
-                      <ArticleList
-                        title={t('popular')}
-                        variant="spaced"
-                        articles={featuredLinks.popular}
-                      />
-                    </div>
+                  <div className="col-12 col-lg-6 float-left">
+                    <ArticleList
+                      title={t('popular')}
+                      variant="spaced"
+                      articles={featuredLinks.popular}
+                    />
                   </div>
                 </div>
-              )}
-              {isEarlyAccess && (
-                <div className="markdown-body">
-                  <div
-                    id="article-contents"
-                    className="article-grid-body"
-                    dangerouslySetInnerHTML={{ __html: renderedEarlyAccessPage }}
-                  />
-                </div>
-              )}
-              <TableOfContents items={tocItems} variant={variant} />
-            </div>
+              </div>
+            )}
+
+            {renderedPage && <ArticleContent>{renderedPage}</ArticleContent>}
+
+            <TableOfContents items={tocItems} variant={variant} />
           </div>
-          <div></div>
-        </div>
+        </ArticleGridLayout>
       </div>
     </DefaultLayout>
   )
diff --git a/components/Contribution.tsx b/components/page-footer/Contribution.tsx
similarity index 100%
rename from components/Contribution.tsx
rename to components/page-footer/Contribution.tsx
diff --git a/components/SmallFooter.tsx b/components/page-footer/SmallFooter.tsx
similarity index 100%
rename from components/SmallFooter.tsx
rename to components/page-footer/SmallFooter.tsx
diff --git a/components/Support.tsx b/components/page-footer/Support.tsx
similarity index 100%
rename from components/Support.tsx
rename to components/page-footer/Support.tsx
diff --git a/components/SupportSection.tsx b/components/page-footer/SupportSection.tsx
similarity index 78%
rename from components/SupportSection.tsx
rename to components/page-footer/SupportSection.tsx
index 179ac9ecf55f..288a41da32f6 100644
--- a/components/SupportSection.tsx
+++ b/components/page-footer/SupportSection.tsx
@@ -1,7 +1,7 @@
-import { Survey } from 'components/Survey'
-import { Contribution } from 'components/Contribution'
-import { Support } from 'components/Support'
-import { useMainContext } from './context/MainContext'
+import { Survey } from 'components/page-footer/Survey'
+import { Contribution } from 'components/page-footer/Contribution'
+import { Support } from 'components/page-footer/Support'
+import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
 
 export const SupportSection = () => {
diff --git a/components/Survey.tsx b/components/page-footer/Survey.tsx
similarity index 81%
rename from components/Survey.tsx
rename to components/page-footer/Survey.tsx
index bbc2e8f3e821..50b742a93ba4 100644
--- a/components/Survey.tsx
+++ b/components/page-footer/Survey.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef } from 'react'
+import cx from 'classnames'
 import { ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
@@ -63,8 +64,14 @@ export const Survey = () => {
             onChange={vote(ViewState.YES)}
             defaultChecked={state === ViewState.YES}
           />
-          <label className="btn x-radio-label mr-1" htmlFor="survey-yes">
-            <ThumbsupIcon size={24} className="color-text-tertiary" />
+          <label
+            className={cx('btn mr-1', state === ViewState.YES && 'color-bg-info-inverse')}
+            htmlFor="survey-yes"
+          >
+            <ThumbsupIcon
+              size={24}
+              className={state === ViewState.YES ? 'color-text-primary' : 'color-text-tertiary'}
+            />
           </label>
           <input
             id="survey-no"
@@ -76,8 +83,14 @@ export const Survey = () => {
             onChange={vote(ViewState.NO)}
             defaultChecked={state === ViewState.NO}
           />
-          <label className="btn x-radio-label" htmlFor="survey-no">
-            <ThumbsdownIcon size={24} className="color-text-tertiary" />
+          <label
+            className={cx('btn', state === ViewState.NO && 'color-bg-danger-inverse')}
+            htmlFor="survey-no"
+          >
+            <ThumbsdownIcon
+              size={24}
+              className={state === ViewState.NO ? 'color-text-primary' : 'color-text-tertiary'}
+            />
           </label>
         </p>
       )}
@@ -120,11 +133,18 @@ export const Survey = () => {
             />
             <span className="f6 color-text-secondary">{t`not_support`}</span>
           </p>
-          <p className="text-right">
+          <div className="d-flex flex-justify-end flex-items-center mt-3">
+            <button
+              type="button"
+              className="btn btn-sm btn-invisible mr-3"
+              onClick={() => setState(ViewState.START)}
+            >
+              Cancel
+            </button>
             <button type="submit" className="btn btn-sm">
               {t`send`}
             </button>
-          </p>
+          </div>
         </>
       )}
 
diff --git a/components/page-header/DeprecationBanner.tsx b/components/page-header/DeprecationBanner.tsx
new file mode 100644
index 000000000000..a9fc921ab0a0
--- /dev/null
+++ b/components/page-header/DeprecationBanner.tsx
@@ -0,0 +1,40 @@
+import { useMainContext } from 'components/context/MainContext'
+import { useVersion } from 'components/hooks/useVersion'
+
+export const DeprecationBanner = () => {
+  const { data, enterpriseServerReleases } = useMainContext()
+  const { currentVersion } = useVersion()
+
+  if (!currentVersion.includes(enterpriseServerReleases.oldestSupported)) {
+    return null
+  }
+
+  const message = enterpriseServerReleases.isOldestReleaseDeprecated
+    ? data.reusables.enterprise_deprecation.version_was_deprecated
+    : data.reusables.enterprise_deprecation.version_will_be_deprecated
+
+  return (
+    <div data-testid="deprecation-banner" className="container-xl mt-3 mx-auto p-responsive">
+      <div className="border rounded-1 color-bg-warning p-3 color-border-warning f5">
+        <p className="m-0">
+          <b className="text-bold">
+            <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
+            <span
+              data-date={enterpriseServerReleases.nextDeprecationDate}
+              data-format="%B %d, %Y"
+              title={enterpriseServerReleases.nextDeprecationDate}
+            >
+              {enterpriseServerReleases.nextDeprecationDate}
+            </span>
+            .
+          </b>{' '}
+          <span
+            dangerouslySetInnerHTML={{
+              __html: data.reusables.enterprise_deprecation.deprecation_details,
+            }}
+          />
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Header.tsx b/components/page-header/Header.tsx
similarity index 95%
rename from components/Header.tsx
rename to components/page-header/Header.tsx
index d472d09063b5..190f39a01187 100644
--- a/components/Header.tsx
+++ b/components/page-header/Header.tsx
@@ -5,10 +5,10 @@ import { MarkGithubIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'
 import { ButtonOutline } from '@primer/components'
 
 import { Link } from 'components/Link'
-import { useMainContext } from './context/MainContext'
+import { useMainContext } from 'components/context/MainContext'
 import { LanguagePicker } from './LanguagePicker'
-import { HeaderNotifications } from 'components/HeaderNotifications'
-import { ProductPicker } from 'components/ProductPicker'
+import { HeaderNotifications } from 'components/page-header/HeaderNotifications'
+import { ProductPicker } from 'components/page-header/ProductPicker'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { HomepageVersionPicker } from 'components/landing/HomepageVersionPicker'
 import { Search } from 'components/Search'
diff --git a/components/page-header/HeaderNotifications.module.scss b/components/page-header/HeaderNotifications.module.scss
new file mode 100644
index 000000000000..cc444ef74a8d
--- /dev/null
+++ b/components/page-header/HeaderNotifications.module.scss
@@ -0,0 +1,4 @@
+.container a {
+  color: var(--color-bg-info-inverse);
+  text-decoration: underline;
+}
diff --git a/components/HeaderNotifications.tsx b/components/page-header/HeaderNotifications.tsx
similarity index 83%
rename from components/HeaderNotifications.tsx
rename to components/page-header/HeaderNotifications.tsx
index efce794d0cc6..faed327ebb64 100644
--- a/components/HeaderNotifications.tsx
+++ b/components/page-header/HeaderNotifications.tsx
@@ -4,8 +4,9 @@ import cx from 'classnames'
 import { useMainContext } from 'components/context/MainContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ExcludesNull } from 'components/lib/ExcludesNull'
-import { useVersion } from './hooks/useVersion'
-import { useLanguages } from './context/LanguagesContext'
+import { useVersion } from 'components/hooks/useVersion'
+import { useLanguages } from 'components/context/LanguagesContext'
+import styles from './HeaderNotifications.module.scss'
 
 enum NotificationType {
   RELEASE = 'RELEASE',
@@ -83,23 +84,26 @@ export const HeaderNotifications = () => {
   ].filter(ExcludesNull)
 
   return (
-    <>
+    <div>
       {allNotifications.map(({ type, content }, i) => {
         const isLast = i === allNotifications.length - 1
         return (
           <div
             key={content}
+            data-testid="header-notification"
+            data-type={type}
             className={cx(
-              'header-notifications text-center f5 color-text-primary py-4 px-6',
-              type === NotificationType.TRANSLATION && 'translation_notice color-bg-info',
-              type === NotificationType.RELEASE && 'release_notice color-bg-info',
-              type === NotificationType.EARLY_ACCESS && 'early_access color-bg-danger',
+              styles.container,
+              'text-center f5 color-text-primary py-4 px-6',
+              type === NotificationType.TRANSLATION && 'color-bg-info',
+              type === NotificationType.RELEASE && 'color-bg-info',
+              type === NotificationType.EARLY_ACCESS && 'color-bg-danger',
               !isLast && 'border-bottom color-border-tertiary'
             )}
             dangerouslySetInnerHTML={{ __html: content }}
           />
         )
       })}
-    </>
+    </div>
   )
 }
diff --git a/components/LanguagePicker.tsx b/components/page-header/LanguagePicker.tsx
similarity index 97%
rename from components/LanguagePicker.tsx
rename to components/page-header/LanguagePicker.tsx
index 0bc308783ca6..5bbfca0f30db 100644
--- a/components/LanguagePicker.tsx
+++ b/components/page-header/LanguagePicker.tsx
@@ -4,7 +4,7 @@ import { Dropdown, Details, useDetails } from '@primer/components'
 import { ChevronDownIcon } from '@primer/octicons-react'
 
 import { Link } from 'components/Link'
-import { useLanguages } from './context/LanguagesContext'
+import { useLanguages } from 'components/context/LanguagesContext'
 
 type Props = {
   variant?: 'inline'
diff --git a/components/ProductPicker.tsx b/components/page-header/ProductPicker.tsx
similarity index 100%
rename from components/ProductPicker.tsx
rename to components/page-header/ProductPicker.tsx
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index 96b9462066c4..b003719f1a2e 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -5,12 +5,10 @@ export const LearningTracks = () => {
   const { learningTracks } = useProductSubLandingContext()
 
   return (
-    <div>
-      <div className="d-flex flex-wrap flex-items-start my-5 gutter">
-        {(learningTracks || []).map((track) => {
-          return <LearningTrack key={track?.title} track={track} />
-        })}
-      </div>
+    <div className="d-flex flex-wrap flex-items-start my-5 gutter">
+      {(learningTracks || []).map((track) => {
+        return <LearningTrack key={track?.title} track={track} />
+      })}
     </div>
   )
 }
diff --git a/pages/404.tsx b/pages/404.tsx
index 93dbe3f62add..f2fa870ee761 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -14,8 +14,8 @@ const Custom404 = () => {
       <SimpleHeader />
 
       <div className="container-xl p-responsive py-6 width-full flex-1">
-        <article className="markdown-body col-md-10 col-lg-7 mx-auto">
-          <h1>Ooops!</h1>
+        <article className="col-md-10 col-lg-7 mx-auto">
+          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
           <p className="lead-mktg">It looks like this page doesn't exist.</p>
           <p className="lead-mktg">
             We track these errors automatically, but if the problem persists please feel free to
diff --git a/pages/[versionId]/graphql/overview/explorer.tsx b/pages/[versionId]/graphql/overview/explorer.tsx
index 11fd22b0f25d..67f4d51cf7c3 100644
--- a/pages/[versionId]/graphql/overview/explorer.tsx
+++ b/pages/[versionId]/graphql/overview/explorer.tsx
@@ -26,30 +26,28 @@ export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props)
   return (
     <MainContext.Provider value={mainContext}>
       <DefaultLayout>
-        <main className="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
-          <article className="markdown-body width-full">
-            <div className="d-lg-flex flex-justify-between">
-              <div className="d-flex flex-items-center breadcrumbs-wrapper">
-                <Breadcrumbs />
-              </div>
-            </div>
+        <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
+          <Breadcrumbs />
 
-            <h1 className="border-bottom-0">{page.title}</h1>
+          <h1>{page.title}</h1>
+        </div>
 
-            <div className="mt-2">
-              <div>
-                {airGap ? (
-                  <p>GraphQL explorer is not available on this environment.</p>
-                ) : (
-                  /* eslint-disable-next-line jsx-a11y/iframe-has-title */
-                  <iframe ref={graphiqlRef} id="graphiql" scrolling="no" src={graphqlExplorerUrl}>
-                    <p>You must have iframes enabled to use this feature.</p>
-                  </iframe>
-                )}
-              </div>
-            </div>
-          </article>
-        </main>
+        <div>
+          {airGap ? (
+            <p>GraphQL explorer is not available on this environment.</p>
+          ) : (
+            /* eslint-disable-next-line jsx-a11y/iframe-has-title */
+            <iframe
+              ref={graphiqlRef}
+              style={{ height: 715 }}
+              className="border width-full"
+              scrolling="no"
+              src={graphqlExplorerUrl}
+            >
+              <p>You must have iframes enabled to use this feature.</p>
+            </iframe>
+          )}
+        </div>
       </DefaultLayout>
     </MainContext.Provider>
   )
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 164a912cbff9..9887822b7e90 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,11 +9,14 @@ import '../stylesheets/index.scss'
 
 import events from 'components/lib/events'
 import experiment from 'components/lib/experiment'
-import { LanguagesProvider } from 'components/context/LanguagesContext'
+import { LanguagesContext, LanguagesContextT } from 'components/context/LanguagesContext'
 
-
-type MyAppProps = AppProps & { csrfToken: string; themeProps: typeof defaultThemeProps }
-const MyApp = ({ Component, pageProps, csrfToken, themeProps }: MyAppProps) => {
+type MyAppProps = AppProps & {
+  csrfToken: string
+  themeProps: typeof defaultThemeProps
+  languagesContext: LanguagesContextT
+}
+const MyApp = ({ Component, pageProps, csrfToken, themeProps, languagesContext }: MyAppProps) => {
   useEffect(() => {
     events()
     experiment()
@@ -41,10 +44,10 @@ const MyApp = ({ Component, pageProps, csrfToken, themeProps }: MyAppProps) => {
         <meta name="csrf-token" content={csrfToken} />
       </Head>
       <ThemeProvider>
-        <LanguagesProvider>
+        <LanguagesContext.Provider value={languagesContext}>
           <SetTheme themeProps={themeProps} />
           <Component {...pageProps} />
-        </LanguagesProvider>
+        </LanguagesContext.Provider>
       </ThemeProvider>
     </>
   )
@@ -56,7 +59,12 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
   const appProps = await App.getInitialProps(appContext)
   const req: any = ctx.req
 
-  return { ...appProps, themeProps: getThemeProps(req), csrfToken: req?.csrfToken?.() || '' }
+  return {
+    ...appProps,
+    themeProps: getThemeProps(req),
+    csrfToken: req?.csrfToken?.() || '',
+    languagesContext: { languages: req.context.languages },
+  }
 }
 
 const SetTheme = ({ themeProps }: { themeProps: typeof defaultThemeProps }) => {
diff --git a/pages/index.tsx b/pages/index.tsx
index d7b327bb54a2..dae4ea4bf0d1 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -111,7 +111,7 @@ function LandingPage(props: LandingPageProps) {
       </section>
 
       <div className="px-3 px-md-6 container-xl">
-        <div className="featured-links container-xl">
+        <div className="container-xl">
           <div className="gutter gutter-xl-spacious clearfix">
             <div className="col-12 col-lg-6 mb-md-4 mb-lg-0 float-left">
               <ArticleList
diff --git a/stylesheets/breadcrumbs.scss b/stylesheets/breadcrumbs.scss
deleted file mode 100644
index 7e7dc50ea020..000000000000
--- a/stylesheets/breadcrumbs.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Breadcrumbs
-------------------------------------------------------------------------------*/
-
-.breadcrumbs-wrapper {
-  @include breakpoint(xl) {
-    height: 39px;
-  }
-}
-
-.breadcrumbs a:not(:last-child)::after,
-.breadcrumbs span:not(:last-child)::after {
-  content: "/";
-  color: var(--color-auto-gray-4);
-  padding-right: $spacer-2;
-  padding-left: $spacer-2;
-  display: inline-block;
-}
diff --git a/stylesheets/deprecation-banner.scss b/stylesheets/deprecation-banner.scss
deleted file mode 100644
index 64d365eed1ba..000000000000
--- a/stylesheets/deprecation-banner.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/* Deprecation banner
-------------------------------------------------------------------------------*/
-.deprecation-banner {
-  & + .alert {
-    margin-top: 5px;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-
-  b,
-  strong {
-    font-weight: bold;
-  }
-
-  p {
-    margin: 0;
-  }
-}
diff --git a/stylesheets/dev-toc.scss b/stylesheets/dev-toc.scss
deleted file mode 100644
index b40f48cbbb33..000000000000
--- a/stylesheets/dev-toc.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/* Styles used for top-level TOC in development only
-------------------------------------------------------------------------------*/
-
-ul.versions-list {
-  list-style-type: none;
-}
-
-ul.versions-list > li {
-  margin: 3px 0 0 0;
-}
-
-details ul.products-list li {
-  margin: 3px 0 0 30px;
-}
diff --git a/stylesheets/explorer.scss b/stylesheets/explorer.scss
deleted file mode 100644
index 124ffb3652ab..000000000000
--- a/stylesheets/explorer.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// GraphiQL wrapper
-//
-iframe#graphiql {
-  width: 100%;
-  height: 715px;
-  border: 1px solid var(--color-auto-gray-3);
-}
diff --git a/stylesheets/featured-links.scss b/stylesheets/featured-links.scss
deleted file mode 100644
index 8c2def48f201..000000000000
--- a/stylesheets/featured-links.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/* Getting Started and Popular Articles sections in article layout */
-.markdown-body div.featured-links {
-  padding-bottom: 30px;
-}
-
-.markdown-body div.featured-links-heading {
-  padding-top: 24px;
-}
-
-.markdown-body div.featured-links p.link-with-intro-intro {
-  margin-bottom: 5px;
-}
-
-.markdown-body div.featured-links h4.link-with-intro-title {
-  margin-top: 0;
-}
diff --git a/stylesheets/headings.scss b/stylesheets/headings.scss
index 0afb504c8231..da7ed7f056c8 100644
--- a/stylesheets/headings.scss
+++ b/stylesheets/headings.scss
@@ -6,16 +6,6 @@ h3 {
   }
 }
 
-// all h2 headers that are links should be blue-500
-h2 a {
-  color: var(--color-auto-blue-5);
-}
-
-// ... except those on each product's toc
-.product-landing h2 a {
-  color: var(--color-auto-gray-9);
-}
-
 .markdown-body {
   h1,
   h2,
@@ -29,6 +19,10 @@ h2 a {
   h2 {
     font-size: 1.25em;
   }
+  // all h2 headers that are links should be blue-500
+  h2 a {
+    color: var(--color-auto-blue-5);
+  }
   #article-contents h2:not(.link-with-intro-title) {
     padding-bottom: 0;
     border-bottom: none;
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index 8b6e4a767c77..67fd2d7f12f6 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -10,32 +10,20 @@ $marketing-font-path: "/assets/fonts/inter/";
 @import "font-mktg.scss";
 
 @import "alerts.scss";
-@import "article.scss";
-@import "breadcrumbs.scss";
 @import "bump-link.scss";
 @import "code.scss";
-@import "deprecation-banner.scss";
-@import "dev-toc.scss";
-@import "explorer.scss";
 @import "extended-markdown.scss";
-@import "featured-links.scss";
 @import "font-mktg.scss";
 @import "gradient.scss";
 @import "headings.scss";
-@import "survey.scss";
 @import "images.scss";
 @import "lists.scss";
-@import "nav.scss";
-@import "opacity.scss";
-@import "print.scss";
 @import "product-sublanding.scss";
 @import "release-notes.scss";
-@import "scroll-button.scss";
 @import "search.scss";
 @import "shadows.scss";
 @import "sidebar.scss";
 @import "summary.scss";
 @import "syntax-highlighting.scss";
 @import "tables.scss";
-@import "underline-dashed.scss";
 @import "utilities.scss";
diff --git a/stylesheets/lists.scss b/stylesheets/lists.scss
index 531310696cae..05d488dc87e1 100644
--- a/stylesheets/lists.scss
+++ b/stylesheets/lists.scss
@@ -1,10 +1,6 @@
 /* Numbered procedures (step 1, step 2, ...)
 ------------------------------------------------------------------------------*/
 
-.list-style-inside {
-  list-style: inside;
-}
-
 .markdown-body ol {
   counter-reset: li;
   list-style: none;
diff --git a/stylesheets/nav.scss b/stylesheets/nav.scss
deleted file mode 100644
index 9271120e14e7..000000000000
--- a/stylesheets/nav.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-/* Navigation & Header
-.nav-mobile prefixed classes style nav elements only for mobile (< 768px)
-.nav-desktop prefixed classes style nav elements only for desktop
-------------------------------------------------------------------------------*/
-
-.header-notifications a {
-  color: var(--color-auto-blue-6);
-  text-decoration: underline;
-}
-
-header summary,
-.nav-contact {
-  @include breakpoint(md) {
-    font-size: $spacer-3;
-  }
-}
-
-.dropdown-withArrow[open] {
-  .arrow {
-    transform: rotate(180deg) scaleX(-1);
-  }
-}
-
-.nav-mobile-dropdown {
-  @media (max-width: $width-md - 1) {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-.nav-mobile-dropdown.js-open {
-  @media (max-width: $width-md) {
-    display: block;
-    visibility: visible;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 2;
-    background-color: var(--color-auto-gray-0);
-    padding: $spacer-3;
-    padding-top: $spacer-8;
-    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.nav-mobile-burgerIcon {
-  background: url("/assets/images/octicons/hamburger.svg") no-repeat right;
-  width: 18px;
-  height: 23px;
-  position: relative;
-  z-index: 3;
-
-  &.js-open {
-    background: url("/assets/images/octicons/x.svg") no-repeat right;
-    width: 16px;
-    height: 21px;
-  }
-}
-
-.nav-desktop-productDropdown,
-.nav-desktop-langDropdown {
-  @include breakpoint(md) {
-    min-width: 200px;
-    background: var(--color-bg-primary);
-    border-radius: 3px;
-    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.nav-desktop-productDropdownButton {
-  @include breakpoint(md) {
-    font-family: $mono-font;
-  }
-}
-
-// Allows dropdown to be closed when clicking outside of it
-@include breakpoint(md) {
-  details.close-when-clicked-outside[open] > summary::before {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 5;
-    display: block;
-    cursor: default;
-    content: " ";
-    background: transparent;
-  }
-}
-
-.nav-dropdown {
-  @media (min-width: 1012px) and (max-width: 1279px) {
-    right: 0;
-  }
-}
diff --git a/stylesheets/opacity.scss b/stylesheets/opacity.scss
deleted file mode 100644
index 7da1e628e1d4..000000000000
--- a/stylesheets/opacity.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-60 {
-  opacity: 0.6;
-}
-.opacity-70 {
-  opacity: 0.7;
-}
-.opacity-100 {
-  opacity: 1;
-}
diff --git a/stylesheets/print.scss b/stylesheets/print.scss
deleted file mode 100644
index 1ec6e832e33a..000000000000
--- a/stylesheets/print.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Styles used while printing
-------------------------------------------------------------------------------*/
-
-@media print {
-  .no-print {
-    display: none;
-  }
-}
diff --git a/stylesheets/scroll-button.scss b/stylesheets/scroll-button.scss
deleted file mode 100644
index 1a5523004673..000000000000
--- a/stylesheets/scroll-button.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-button.arrow-for-scrolling-top {
-  opacity: 0;
-  transition: 0.2s;
-  background-color: var(--color-auto-blue-5);
-  color: var(--color-text-inverse);
-  position: fixed;
-  bottom: $spacer-2;
-  right: $spacer-2;
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: $spacer-1;
-
-  &.show {
-    opacity: 1;
-    border: none;
-    transition: 0.2s;
-  }
-}
diff --git a/stylesheets/survey.scss b/stylesheets/survey.scss
deleted file mode 100644
index ab9552ee482f..000000000000
--- a/stylesheets/survey.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Survey override */
-:checked + .x-radio-label {
-  background: var(--color-auto-blue-5);
-
-  svg {
-    fill: var(--color-auto-inverse);
-  }
-}
diff --git a/stylesheets/underline-dashed.scss b/stylesheets/underline-dashed.scss
deleted file mode 100644
index 3d831447ef1b..000000000000
--- a/stylesheets/underline-dashed.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Text styling
-.underline-dashed {
-  display: inline;
-  padding-bottom: $spacer-1;
-  background-image: linear-gradient(
-    to right,
-    var(--color-auto-gray-3) 50%,
-    transparent 0%
-  );
-  background-repeat: repeat-x;
-  background-position: bottom;
-  background-size: 10px 1px;
-}
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
index c50c9cc7c6a8..44b7682534ab 100644
--- a/stylesheets/utilities.scss
+++ b/stylesheets/utilities.scss
@@ -17,3 +17,50 @@
 .min-h-screen {
   min-height: 100vh;
 }
+
+/* Print utilities
+------------------------------------------------------------------------------*/
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+/* Opacity utilities
+------------------------------------------------------------------------------*/
+
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-60 {
+  opacity: 0.6;
+}
+.opacity-70 {
+  opacity: 0.7;
+}
+.opacity-100 {
+  opacity: 1;
+}
+
+/* Text utilities
+------------------------------------------------------------------------------*/
+
+.underline-dashed {
+  padding-bottom: $spacer-1;
+  background-image: linear-gradient(
+    to right,
+    var(--color-auto-gray-3) 50%,
+    transparent 0%
+  );
+  background-repeat: repeat-x;
+  background-position: bottom;
+  background-size: 10px 1px;
+}
+
+/* List utilities
+------------------------------------------------------------------------------*/
+
+.list-style-inside {
+  list-style: inside;
+}
diff --git a/tests/content/featured-links.js b/tests/content/featured-links.js
index 4a72d5da3a5c..f8df3b21dc18 100644
--- a/tests/content/featured-links.js
+++ b/tests/content/featured-links.js
@@ -10,7 +10,7 @@ describe('featuredLinks', () => {
   describe('rendering', () => {
     test('non-TOC pages do not have intro links', async () => {
       const $ = await getDOM('/en/github/getting-started-with-github/set-up-git')
-      expect($('.featured-links')).toHaveLength(0)
+      expect($('[data-testid=article-list]')).toHaveLength(0)
     })
 
     test('landing page intro links have expected properties', async () => {
@@ -34,7 +34,7 @@ describe('featuredLinks', () => {
 
     test('localized intro links link to localized pages', async () => {
       const $ = await getDOM('/ja')
-      const $featuredLinks = $('.featured-links a')
+      const $featuredLinks = $('[data-testid=article-list] a')
       expect($featuredLinks).toHaveLength(9)
       expect($featuredLinks.eq(0).attr('href').startsWith('/ja')).toBe(true)
       expect(japaneseCharacters.presentIn($featuredLinks.eq(1).children('h4').text())).toBe(true)
diff --git a/tests/rendering/breadcrumbs.js b/tests/rendering/breadcrumbs.js
index 12a6464ef3ac..40eefb5a9aa1 100644
--- a/tests/rendering/breadcrumbs.js
+++ b/tests/rendering/breadcrumbs.js
@@ -10,14 +10,14 @@ describe('breadcrumbs', () => {
   describe('rendering', () => {
     test('top-level product pages have breadcrumbs', async () => {
       const $ = await getDOM('/github')
-      expect($('.breadcrumbs')).toHaveLength(1)
+      expect($('[data-testid=breadcrumbs]')).toHaveLength(1)
     })
 
     test('article pages have breadcrumbs with product, category, maptopic, and article', async () => {
       const $ = await getDOM(
         '/github/authenticating-to-github/troubleshooting-ssh/using-ssh-over-the-https-port'
       )
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
 
       expect($breadcrumbs).toHaveLength(4)
       expect($breadcrumbs[0].attribs.title).toBe('product: GitHub')
@@ -30,7 +30,7 @@ describe('breadcrumbs', () => {
       const $ = await getDOM(
         '/github/authenticating-to-github/keeping-your-account-and-data-secure'
       )
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
 
       expect($breadcrumbs).toHaveLength(3)
       expect($breadcrumbs[0].attribs.title).toBe('product: GitHub')
@@ -43,27 +43,27 @@ describe('breadcrumbs', () => {
       const $ = await getDOM(
         '/en/enterprise-server/github/authenticating-to-github/troubleshooting-ssh/recovering-your-ssh-key-passphrase'
       )
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(4)
       expect($breadcrumbs[0].attribs.title).toBe('product: GitHub')
     })
 
     test('parses Liquid variables inside titles', async () => {
       const $ = await getDOM('/en/enterprise/admin/enterprise-support')
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs).toHaveLength(2)
       expect($breadcrumbs[1].attribs.title).toBe('category: Working with support')
     })
 
     test('English breadcrumbs link to English pages', async () => {
       const $ = await getDOM('/en/github/setting-up-and-managing-your-github-user-account')
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs[0].attribs.href).toBe('/en/github')
     })
 
     test('localized breadcrumbs link to localize pages', async () => {
       const $ = await getDOM('/ja/github/setting-up-and-managing-your-github-user-account')
-      const $breadcrumbs = $('.breadcrumbs a')
+      const $breadcrumbs = $('[data-testid=breadcrumbs] a')
       expect($breadcrumbs[0].attribs.href).toBe('/ja/github')
     })
   })
@@ -71,20 +71,20 @@ describe('breadcrumbs', () => {
   describeInternalOnly('early access rendering', () => {
     test('top-level product pages have breadcrumbs', async () => {
       const $ = await getDOM('/early-access/github/articles/using-gist-playground')
-      expect($('.breadcrumbs')).toHaveLength(1)
+      expect($('[data-testid=breadcrumbs]')).toHaveLength(1)
     })
 
     test('early access article pages have breadcrumbs with product, category, and article', async () => {
       const $ = await getDOM(
         '/early-access/github/enforcing-best-practices-with-github-policies/about-github-policies'
       )
-      const $breadcrumbSpans = $('.breadcrumbs span')
-      const $breadcrumbLinks = $('.breadcrumbs a')
+      const $breadcrumbTitles = $('[data-testid=breadcrumbs] [data-testid=breadcrumb-title]')
+      const $breadcrumbLinks = $('[data-testid=breadcrumbs] a')
 
-      expect($breadcrumbSpans).toHaveLength(2)
+      expect($breadcrumbTitles).toHaveLength(2)
       expect($breadcrumbLinks).toHaveLength(2)
-      expect($breadcrumbSpans[0].children[0].data).toBe('Early Access documentation')
-      expect($breadcrumbSpans[1].children[0].data).toBe('GitHub')
+      expect($breadcrumbTitles[0].children[0].data).toBe('Early Access documentation')
+      expect($breadcrumbTitles[1].children[0].data).toBe('GitHub')
       expect($breadcrumbLinks[0].attribs.title).toBe(
         'category: Enforcing best practices with GitHub Policies'
       )
@@ -93,7 +93,7 @@ describe('breadcrumbs', () => {
     })
   })
 
-  describe('context.breadcrumbs object', () => {
+  describe('breadcrumbs object', () => {
     test('works on product index pages', async () => {
       const breadcrumbs = await getJSON('/en/github?json=breadcrumbs')
       const expected = [
diff --git a/tests/rendering/header.js b/tests/rendering/header.js
index 42ae084a3b5b..45555758e240 100644
--- a/tests/rendering/header.js
+++ b/tests/rendering/header.js
@@ -50,27 +50,27 @@ describe('header', () => {
   describe('notices', () => {
     test('displays a "localization in progress" notice for WIP languages', async () => {
       const $ = await getDOM('/de')
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href="/en"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href="/en"]').length).toBe(1)
     })
 
     test('displays "complete" notice for non-WIP non-English languages', async () => {
       const $ = await getDOM('/ja')
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href="/en"]').length).toBe(1)
-      expect($('.header-notifications a[href*="github.com/contact"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href="/en"]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="github.com/contact"]').length).toBe(1)
     })
 
     test.skip('does not display any notices for English', async () => {
       const $ = await getDOM('/en')
-      expect($('.header-notifications').length).toBe(0)
+      expect($('[data-testid=header-notification]').length).toBe(0)
     })
 
     test('displays translation disclaimer notice on localized site-policy pages', async () => {
       const $ = await getDOM('/ja/github/site-policy/github-logo-policy')
       expect(
         $(
-          '.header-notifications.translation_notice a[href="/github/site-policy/issues"]'
+          '[data-testid=header-notification][data-type=TRANSLATION] a[href="/github/site-policy/issues"]'
         ).length
       ).toBe(1)
     })
@@ -78,54 +78,54 @@ describe('header', () => {
     test("renders a link to the same page in user's preferred language, if available", async () => {
       const headers = { 'accept-language': 'ja' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href*="/ja"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="/ja"]').length).toBe(1)
     })
 
     test("renders a link to the same page if user's preferred language is Chinese - PRC", async () => {
       const headers = { 'accept-language': 'zh-CN' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href*="/cn"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="/cn"]').length).toBe(1)
     })
 
     test("does not render a link when user's preferred language is Chinese - Taiwan", async () => {
       const headers = { 'accept-language': 'zh-TW' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications').length).toBe(0)
+      expect($('[data-testid=header-notification]').length).toBe(0)
     })
 
     test("does not render a link when user's preferred language is English", async () => {
       const headers = { 'accept-language': 'en' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications').length).toBe(0)
+      expect($('[data-testid=header-notification]').length).toBe(0)
     })
 
     test("renders a link to the same page in user's preferred language from multiple, if available", async () => {
       const headers = { 'accept-language': 'ja, *;q=0.9' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href*="/ja"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="/ja"]').length).toBe(1)
     })
 
     test("renders a link to the same page in user's preferred language with weights, if available", async () => {
       const headers = { 'accept-language': 'ja;q=1.0, *;q=0.9' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href*="/ja"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="/ja"]').length).toBe(1)
     })
 
     test("renders a link to the user's 2nd preferred language if 1st is not available", async () => {
       const headers = { 'accept-language': 'zh-TW,zh;q=0.9,ja *;q=0.8' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications.translation_notice').length).toBe(1)
-      expect($('.header-notifications a[href*="/ja"]').length).toBe(1)
+      expect($('[data-testid=header-notification][data-type=TRANSLATION]').length).toBe(1)
+      expect($('[data-testid=header-notification] a[href*="/ja"]').length).toBe(1)
     })
 
     test('renders no notices if no language preference is available', async () => {
       const headers = { 'accept-language': 'zh-TW,zh;q=0.9,zh-SG *;q=0.8' }
       const $ = await getDOM('/en', headers)
-      expect($('.header-notifications').length).toBe(0)
+      expect($('[data-testid=header-notification]').length).toBe(0)
     })
   })
 
diff --git a/tests/rendering/server.js b/tests/rendering/server.js
index 262841543a17..f589c54c6a9e 100644
--- a/tests/rendering/server.js
+++ b/tests/rendering/server.js
@@ -673,7 +673,7 @@ describe('server', () => {
 
     test('category page renders with TOC', async () => {
       const $ = await getDOM('/en/github/managing-large-files')
-      expect($('.list-style-inside ul li a').length).toBeGreaterThan(5)
+      expect($('[data-testid=table-of-contents] ul li a').length).toBeGreaterThan(5)
     })
 
     test('map topic renders with h2 links to articles', async () => {
diff --git a/tests/routing/deprecated-enterprise-versions.js b/tests/routing/deprecated-enterprise-versions.js
index a2c96ba3389b..c9f9bc280126 100644
--- a/tests/routing/deprecated-enterprise-versions.js
+++ b/tests/routing/deprecated-enterprise-versions.js
@@ -89,17 +89,17 @@ describe('enterprise deprecation', () => {
 describe('deprecation banner', () => {
   test('renders a deprecation warning banner on oldest supported Enterprise version', async () => {
     const $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.oldestSupported}`)
-    expect($('.deprecation-banner').length).toBe(1)
+    expect($('[data-testid=deprecation-banner]').length).toBe(1)
   })
 
   test('does not render a deprecation warning banner on other Enterprise versions', async () => {
     const $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.latest}`)
-    expect($('.deprecation-banner').length).toBe(0)
+    expect($('[data-testid=deprecation-banner]').length).toBe(0)
   })
 
   test('deprecation warning banner includes a date', async () => {
     const $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.oldestSupported}`)
-    expect($('.deprecation-banner b').text().endsWith('discontinued on .')).toBe(false)
+    expect($('[data-testid=deprecation-banner] b').text().endsWith('discontinued on .')).toBe(false)
   })
 
   test('deprecation warning banner includes the right text depending on the date', async () => {
@@ -107,7 +107,7 @@ describe('deprecation banner', () => {
     const expectedString = enterpriseServerReleases.isOldestReleaseDeprecated
       ? 'was discontinued'
       : 'will be discontinued'
-    expect($('.deprecation-banner b').text().includes(expectedString)).toBe(true)
+    expect($('[data-testid=deprecation-banner] b').text().includes(expectedString)).toBe(true)
   })
 })