From a45299277c3fcf10c965802a58afb07fff9b103c Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Fri, 13 Sep 2024 15:51:20 -0400
Subject: [PATCH 1/5] DOP-4689: Implement multi-page tutorials (#1225)

Co-authored-by: Caesar Bell <caesar.bell@mongodb.com>
---
 src/components/Contents/index.js              |   16 +-
 src/components/DocumentBody.js                |    2 +-
 src/components/Heading.js                     |   17 +-
 src/components/Internal/Overline.js           |   21 +
 src/components/InternalPageNav.js             |  122 --
 .../InternalPageNav/InternalPageNav.js        |  110 ++
 .../InternalPageNav/NextPrevLink.js           |   86 +
 src/components/InternalPageNav/index.js       |    3 +
 src/components/InternalPageNav/styles.js      |   12 +
 src/components/Kicker.js                      |   19 +-
 .../MultiPageTutorials/MPTNextLinkFull.js     |   42 +
 .../MultiPageTutorials/MPTNextLinkMini.js     |   52 +
 .../MultiPageTutorials/StepNumber.js          |   35 +
 .../MultiPageTutorials/TimeRequired.js        |   31 +
 .../MultiPageTutorials/constants.js           |    4 +
 .../hooks/use-active-mp-tutorial.js           |   47 +
 .../hooks/use-mpt-page-options.js             |   10 +
 .../hooks/use-should-show-next.js             |   11 +
 src/components/MultiPageTutorials/index.js    |    3 +
 src/components/MultiPageTutorials/utils.js    |    8 +
 src/context/page-context.js                   |    1 +
 src/templates/document.js                     |    7 +-
 tests/unit/InternalPageNav.test.js            |   69 +-
 tests/unit/MultiPageTutorials.test.js         |  111 ++
 .../InternalPageNav.test.js.snap              | 1619 +++++++++++++++--
 .../unit/data/ecosystem/slugTitleMapping.json |  585 ------
 .../data/ecosystem/slugToBreadcrumbLabel.json |   55 +
 27 files changed, 2160 insertions(+), 938 deletions(-)
 create mode 100644 src/components/Internal/Overline.js
 delete mode 100644 src/components/InternalPageNav.js
 create mode 100644 src/components/InternalPageNav/InternalPageNav.js
 create mode 100644 src/components/InternalPageNav/NextPrevLink.js
 create mode 100644 src/components/InternalPageNav/index.js
 create mode 100644 src/components/InternalPageNav/styles.js
 create mode 100644 src/components/MultiPageTutorials/MPTNextLinkFull.js
 create mode 100644 src/components/MultiPageTutorials/MPTNextLinkMini.js
 create mode 100644 src/components/MultiPageTutorials/StepNumber.js
 create mode 100644 src/components/MultiPageTutorials/TimeRequired.js
 create mode 100644 src/components/MultiPageTutorials/constants.js
 create mode 100644 src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js
 create mode 100644 src/components/MultiPageTutorials/hooks/use-mpt-page-options.js
 create mode 100644 src/components/MultiPageTutorials/hooks/use-should-show-next.js
 create mode 100644 src/components/MultiPageTutorials/index.js
 create mode 100644 src/components/MultiPageTutorials/utils.js
 create mode 100644 tests/unit/MultiPageTutorials.test.js
 delete mode 100644 tests/unit/data/ecosystem/slugTitleMapping.json
 create mode 100644 tests/unit/data/ecosystem/slugToBreadcrumbLabel.json

diff --git a/src/components/Contents/index.js b/src/components/Contents/index.js
index eab245b06..16069545e 100644
--- a/src/components/Contents/index.js
+++ b/src/components/Contents/index.js
@@ -1,23 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { theme } from '../../theme/docsTheme';
 import { formatText } from '../../utils/format-text';
 import { ContentsContext } from './contents-context';
 import ContentsList from './ContentsList';
 import ContentsListItem from './ContentsListItem';
 
-const StyledContents = styled('div')`
-  @media ${theme.screenSize.largeAndUp} {
-    display: ${(props) => (props.displayOnDesktopOnly ? '' : 'none')};
-  }
-`;
-
 const formatTextOptions = {
   literalEnableInline: true,
 };
 
-const Contents = ({ displayOnDesktopOnly }) => {
+const Contents = ({ className }) => {
   const { activeHeadingId, headingNodes, showContentsComponent } = useContext(ContentsContext);
 
   if (headingNodes.length === 0 || !showContentsComponent) {
@@ -27,7 +19,7 @@ const Contents = ({ displayOnDesktopOnly }) => {
   const label = 'On this page';
 
   return (
-    <StyledContents displayOnDesktopOnly={displayOnDesktopOnly}>
+    <div className={className}>
       <ContentsList label={label}>
         {headingNodes.map(({ depth, id, title }) => {
           // Depth of heading nodes refers to their depth in the AST
@@ -39,12 +31,12 @@ const Contents = ({ displayOnDesktopOnly }) => {
           );
         })}
       </ContentsList>
-    </StyledContents>
+    </div>
   );
 };
 
 Contents.propTypes = {
-  displayOnDesktopOnly: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default Contents;
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index 7d7c78f8c..aced08aea 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -150,7 +150,7 @@ const DocumentBody = (props) => {
           >
             <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
               <FootnoteContext.Provider value={{ footnotes }}>
-                <PageContext.Provider value={{ page, template, slug }}>
+                <PageContext.Provider value={{ page, template, slug, options: page?.options }}>
                   <div id="template-container">
                     <Template {...props} useChatbot={useChatbot}>
                       {pageNodes.map((child, index) => (
diff --git a/src/components/Heading.js b/src/components/Heading.js
index e93e23478..7eb45f0c6 100644
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@@ -7,6 +7,7 @@ import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import useScreenSize from '../hooks/useScreenSize';
 import { usePageContext } from '../context/page-context';
+import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
 import TabSelectors from './Tabs/TabSelectors';
 import { TabContext } from './Tabs/tab-context';
@@ -14,6 +15,7 @@ import { InstruqtContext } from './Instruqt/instruqt-context';
 import ConditionalWrapper from './ConditionalWrapper';
 import Contents from './Contents';
 import Permalink from './Permalink';
+import { TimeRequired } from './MultiPageTutorials';
 
 const h2Styling = css`
   margin-top: 16px;
@@ -30,6 +32,14 @@ const labButtonStyling = css`
   margin-left: 18px;
 `;
 
+const contentsStyle = css`
+  margin-top: ${theme.size.medium};
+
+  @media ${theme.screenSize.largeAndUp} {
+    display: none;
+  }
+`;
+
 const determineHeading = (sectionDepth) => {
   if (sectionDepth === 1) {
     return H2;
@@ -93,7 +103,12 @@ const Heading = ({ sectionDepth, nodeData, className, ...rest }) => {
           )}
         </HeadingTag>
       </ConditionalWrapper>
-      {isPageTitle && <Contents />}
+      {isPageTitle && (
+        <>
+          <TimeRequired />
+          <Contents className={contentsStyle} />
+        </>
+      )}
     </>
   );
 };
diff --git a/src/components/Internal/Overline.js b/src/components/Internal/Overline.js
new file mode 100644
index 000000000..1efe3dd7c
--- /dev/null
+++ b/src/components/Internal/Overline.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Overline as LGOverline } from '@leafygreen-ui/typography';
+
+const overlineBaseStyling = css`
+  margin-top: 48px;
+  margin-bottom: 0px;
+  color: var(--font-color-light);
+`;
+
+const Overline = ({ className, children }) => {
+  return <LGOverline className={cx(overlineBaseStyling, className)}>{children}</LGOverline>;
+};
+
+Overline.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Overline;
diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js
deleted file mode 100644
index 6f61121f4..000000000
--- a/src/components/InternalPageNav.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@leafygreen-ui/button';
-import { Body } from '@leafygreen-ui/typography';
-import Icon, { glyphs } from '@leafygreen-ui/icon';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { palette } from '@leafygreen-ui/palette';
-import { theme } from '../theme/docsTheme';
-import { getPageTitle } from '../utils/get-page-title';
-import Link from './Link';
-
-const containerStyling = css`
-  padding-bottom: 2.5em;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  column-gap: ${theme.size.default};
-  margin-top: 88px;
-
-  @media ${theme.screenSize.upToSmall} {
-    flex-direction: column-reverse;
-    row-gap: 64px;
-    margin-top: 66px;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const commonTextStyles = css`
-  font-size: ${theme.fontSize.small};
-  line-height: 20px;
-`;
-
-const nextPrevTextStyling = css`
-  ${commonTextStyles}
-  font-weight: 500;
-`;
-
-const nextTextStyling = css`
-  text-align: end;
-`;
-
-const prevTextStyling = css`
-  text-align: start;
-`;
-
-const nextPrevTitleTextStyling = css`
-  ${commonTextStyles}
-  color: ${palette.gray.base};
-`;
-
-const commonLinkContentContainerStyling = css`
-  align-items: center;
-  display: flex;
-  column-gap: 14px;
-`;
-
-const nextLinkContainerStyling = css`
-  ${commonLinkContentContainerStyling}
-  flex-direction: row-reverse;
-`;
-
-const prevLinkContainerStyling = css`
-  ${commonLinkContentContainerStyling}
-  flex-direction: row;
-`;
-
-const NextPrevLink = ({ icon, direction, pageTitle }) => {
-  const isNext = direction?.toLowerCase() === 'next';
-  const isPrev = direction?.toLowerCase() === 'back';
-
-  return (
-    <div className={cx({ [nextLinkContainerStyling]: isNext, [prevLinkContainerStyling]: isPrev })}>
-      <Button size="large">
-        <Icon glyph={icon} />
-      </Button>
-      <div className={cx({ [nextTextStyling]: isNext }, { [prevTextStyling]: isPrev })}>
-        <Body className={cx(nextPrevTextStyling)}>{direction}</Body>
-        <Body className={cx(nextPrevTitleTextStyling)}>{pageTitle}</Body>
-      </div>
-    </div>
-  );
-};
-
-const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => {
-  const slugIndex = toctreeOrder.indexOf(slug);
-  const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null;
-  const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null;
-  return (
-    <div className={cx(containerStyling)}>
-      {prevSlug && (
-        <Link to={prevSlug} title="Previous Section">
-          <NextPrevLink
-            icon={glyphs.ArrowLeft.displayName}
-            direction="Back"
-            pageTitle={getPageTitle(prevSlug, slugTitleMapping)}
-          />
-        </Link>
-      )}
-      {nextSlug && (
-        <Link to={nextSlug} title="Next Section">
-          <NextPrevLink
-            icon={glyphs.ArrowRight.displayName}
-            direction="Next"
-            pageTitle={getPageTitle(nextSlug, slugTitleMapping)}
-          />
-        </Link>
-      )}
-    </div>
-  );
-};
-
-InternalPageNav.propTypes = {
-  slug: PropTypes.string.isRequired,
-  slugTitleMapping: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]))
-    .isRequired,
-  toctreeOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
-export default InternalPageNav;
diff --git a/src/components/InternalPageNav/InternalPageNav.js b/src/components/InternalPageNav/InternalPageNav.js
new file mode 100644
index 000000000..870577fb1
--- /dev/null
+++ b/src/components/InternalPageNav/InternalPageNav.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { glyphs } from '@leafygreen-ui/icon';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { theme } from '../../theme/docsTheme';
+import { getPageTitle } from '../../utils/get-page-title';
+import { useActiveMpTutorial } from '../MultiPageTutorials';
+import { reportAnalytics } from '../../utils/report-analytics';
+import NextPrevLink from './NextPrevLink';
+
+const containerStyling = css`
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  column-gap: ${theme.size.default};
+  margin-top: 88px;
+
+  @media ${theme.screenSize.upToSmall} {
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+const getActiveTutorialPage = (activeTutorial, key, linkTitle) => {
+  return {
+    targetSlug: activeTutorial[key].targetSlug,
+    pageTitle: activeTutorial[key].pageTitle,
+    linkTitle,
+  };
+};
+
+const getTocPage = (targetSlug, slugTitleMapping, linkTitle) => {
+  return {
+    targetSlug,
+    pageTitle: targetSlug ? getPageTitle(targetSlug, slugTitleMapping) : null,
+    linkTitle,
+  };
+};
+
+const getPrev = (activeTutorial, toctreeOrder, slugTitleMapping, slugIndex) => {
+  const key = 'prev';
+  if (activeTutorial?.[key]) {
+    return getActiveTutorialPage(activeTutorial, key, 'Previous Step');
+  }
+  const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null;
+  return getTocPage(prevSlug, slugTitleMapping, 'Previous Section');
+};
+
+const getNext = (activeTutorial, toctreeOrder, slugTitleMapping, slugIndex) => {
+  const key = 'next';
+  if (activeTutorial?.[key]) {
+    return getActiveTutorialPage(activeTutorial, key, 'Next Step');
+  }
+  const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null;
+  return getTocPage(nextSlug, slugTitleMapping, 'Next Section');
+};
+
+const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => {
+  const activeTutorial = useActiveMpTutorial();
+  const slugIndex = toctreeOrder.indexOf(slug);
+  const prevPage = getPrev(activeTutorial, toctreeOrder, slugTitleMapping, slugIndex);
+  const nextPage = getNext(activeTutorial, toctreeOrder, slugTitleMapping, slugIndex);
+
+  const handleClick = (direction, targetSlug) => {
+    reportAnalytics('InternalPageNavClicked', {
+      direction,
+      targetSlug,
+    });
+  };
+
+  return (
+    <div className={cx(containerStyling)}>
+      {prevPage?.targetSlug && (
+        <NextPrevLink
+          icon={glyphs.ArrowLeft.displayName}
+          direction="Back"
+          targetSlug={prevPage.targetSlug}
+          pageTitle={prevPage.pageTitle}
+          title={prevPage.linkTitle}
+          onClick={handleClick}
+        />
+      )}
+      {nextPage?.targetSlug && (
+        <NextPrevLink
+          icon={glyphs.ArrowRight.displayName}
+          direction="Next"
+          targetSlug={nextPage.targetSlug}
+          pageTitle={nextPage.pageTitle}
+          title={nextPage.linkTitle}
+          onClick={handleClick}
+        />
+      )}
+    </div>
+  );
+};
+
+InternalPageNav.propTypes = {
+  slug: PropTypes.string.isRequired,
+  slugTitleMapping: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]))
+    .isRequired,
+  toctreeOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default InternalPageNav;
diff --git a/src/components/InternalPageNav/NextPrevLink.js b/src/components/InternalPageNav/NextPrevLink.js
new file mode 100644
index 000000000..c27e7117c
--- /dev/null
+++ b/src/components/InternalPageNav/NextPrevLink.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import Button from '@leafygreen-ui/button';
+import { Body } from '@leafygreen-ui/typography';
+import Icon from '@leafygreen-ui/icon';
+import { palette } from '@leafygreen-ui/palette';
+import { theme } from '../../theme/docsTheme';
+import Link from '../Link';
+import { navLinkButtonStyle } from './styles';
+
+const commonTextStyles = css`
+  font-size: ${theme.fontSize.small};
+  line-height: 20px;
+`;
+
+const nextPrevTextStyling = css`
+  ${commonTextStyles}
+  font-weight: 500;
+  color: var(--font-color-primary);
+`;
+
+const nextTextStyling = css`
+  text-align: end;
+`;
+
+const prevTextStyling = css`
+  text-align: start;
+`;
+
+const nextPrevTitleTextStyling = css`
+  ${commonTextStyles}
+  color: ${palette.gray.base};
+
+  .dark-theme & {
+    color: ${palette.gray.light1};
+  }
+`;
+
+const commonLinkContentContainerStyling = css`
+  align-items: center;
+  display: flex;
+  column-gap: 14px;
+`;
+
+const nextLinkContainerStyling = css`
+  ${commonLinkContentContainerStyling}
+  flex-direction: row-reverse;
+`;
+
+const prevLinkContainerStyling = css`
+  ${commonLinkContentContainerStyling}
+  flex-direction: row;
+`;
+
+const baseButtonStyle = css`
+  width: 52px;
+  height: 48px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    width: 40px;
+    height: 36px;
+  }
+`;
+
+const NextPrevLink = ({ className, icon, direction, pageTitle, targetSlug, title, onClick }) => {
+  const isNext = direction?.toLowerCase() === 'next';
+  const isPrev = direction?.toLowerCase() === 'back';
+
+  return (
+    <div className={className} onClick={() => onClick(direction, targetSlug)}>
+      <Link to={targetSlug} title={title}>
+        <div className={cx({ [nextLinkContainerStyling]: isNext, [prevLinkContainerStyling]: isPrev })}>
+          <Button className={cx(baseButtonStyle, navLinkButtonStyle)}>
+            <Icon glyph={icon} />
+          </Button>
+          <div className={cx({ [nextTextStyling]: isNext }, { [prevTextStyling]: isPrev })}>
+            <Body className={cx(nextPrevTextStyling)}>{direction}</Body>
+            <Body className={cx(nextPrevTitleTextStyling)}>{pageTitle}</Body>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default NextPrevLink;
diff --git a/src/components/InternalPageNav/index.js b/src/components/InternalPageNav/index.js
new file mode 100644
index 000000000..83e86045c
--- /dev/null
+++ b/src/components/InternalPageNav/index.js
@@ -0,0 +1,3 @@
+export { default as InternalPageNav } from './InternalPageNav';
+export { default as NextPrevLink } from './NextPrevLink';
+export { navLinkButtonStyle } from './styles';
diff --git a/src/components/InternalPageNav/styles.js b/src/components/InternalPageNav/styles.js
new file mode 100644
index 000000000..225944796
--- /dev/null
+++ b/src/components/InternalPageNav/styles.js
@@ -0,0 +1,12 @@
+import { css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+
+export const navLinkButtonStyle = css`
+  background-color: ${palette.gray.light3};
+  color: ${palette.black};
+
+  .dark-theme & {
+    background-color: ${palette.gray.dark2};
+    color: ${palette.white};
+  }
+`;
diff --git a/src/components/Kicker.js b/src/components/Kicker.js
index 5c3fe2b19..cf1a2cb82 100644
--- a/src/components/Kicker.js
+++ b/src/components/Kicker.js
@@ -1,17 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Overline } from '@leafygreen-ui/typography';
-import { palette } from '@leafygreen-ui/palette';
+import { css } from '@leafygreen-ui/emotion';
 import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
+import Overline from './Internal/Overline';
 
-const kickerBaseStyling = css`
+const kickerBaseStyle = css`
   grid-column: 2;
-  margin-top: 48px;
-  margin-bottom: 0px;
-  color: var(--font-color-light);
   @media ${theme.screenSize.upToSmall} {
     padding-top: 56px;
   }
@@ -20,15 +15,9 @@ const kickerBaseStyling = css`
   }
 `;
 
-const kickerLightStyling = css`
-  color: ${palette.gray.base};
-  ${kickerBaseStyling}
-`;
-
 const Kicker = ({ nodeData: { argument }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   return (
-    <Overline className={cx({ [kickerBaseStyling]: darkMode === true }, { [kickerLightStyling]: darkMode === false })}>
+    <Overline className={kickerBaseStyle}>
       {argument.map((child, i) => (
         <ComponentFactory {...rest} nodeData={child} key={i} />
       ))}
diff --git a/src/components/MultiPageTutorials/MPTNextLinkFull.js b/src/components/MultiPageTutorials/MPTNextLinkFull.js
new file mode 100644
index 000000000..6e37affec
--- /dev/null
+++ b/src/components/MultiPageTutorials/MPTNextLinkFull.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { glyphs } from '@leafygreen-ui/icon';
+import { css } from '@leafygreen-ui/emotion';
+import { NextPrevLink } from '../InternalPageNav';
+import { theme } from '../../theme/docsTheme';
+import { LINK_TITLE } from './constants';
+import { useShouldShowNext } from './hooks/use-should-show-next';
+import { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
+import { reportMPTAnalytics } from './utils';
+
+const baseStyle = css`
+  display: none;
+  float: right;
+  margin-left: ${theme.size.medium};
+  // Top margin to help align title of next page with the middle of heading
+  margin-top: 6px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    display: initial;
+  }
+`;
+
+export const MPTNextLinkFull = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const showNext = useShouldShowNext();
+
+  if (!showNext) {
+    return null;
+  }
+
+  return (
+    <NextPrevLink
+      className={baseStyle}
+      icon={glyphs.ArrowRight.displayName}
+      direction={'Next'}
+      pageTitle={activeTutorial.next.pageTitle}
+      targetSlug={activeTutorial.next.targetSlug}
+      title={LINK_TITLE}
+      onClick={() => reportMPTAnalytics(activeTutorial.next.targetSlug, 'full')}
+    />
+  );
+};
diff --git a/src/components/MultiPageTutorials/MPTNextLinkMini.js b/src/components/MultiPageTutorials/MPTNextLinkMini.js
new file mode 100644
index 000000000..57de9e572
--- /dev/null
+++ b/src/components/MultiPageTutorials/MPTNextLinkMini.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import Icon, { glyphs } from '@leafygreen-ui/icon';
+import { css, cx } from '@leafygreen-ui/emotion';
+import Button from '@leafygreen-ui/button';
+import { theme } from '../../theme/docsTheme';
+import Link from '../Link';
+import { navLinkButtonStyle } from '../InternalPageNav';
+import { LINK_TITLE } from './constants';
+import { useShouldShowNext } from './hooks/use-should-show-next';
+import { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
+import { reportMPTAnalytics } from './utils';
+
+const baseStyle = css`
+  float: right;
+  margin-left: ${theme.size.medium};
+  // Add top margin to align bottom of container to bottom of overline
+  margin-top: -38px;
+  width: 103px;
+  height: 22px;
+
+  @media ${theme.screenSize.mediumAndUp} {
+    display: none;
+  }
+`;
+
+const buttonStyle = css`
+  width: 100%;
+`;
+
+export const MPTNextLinkMini = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const showNext = useShouldShowNext();
+
+  if (!showNext) {
+    return null;
+  }
+
+  return (
+    <div className={baseStyle} onClick={() => reportMPTAnalytics(activeTutorial.next.targetSlug, 'mini')}>
+      <Button
+        className={cx(buttonStyle, navLinkButtonStyle)}
+        as={Link}
+        to={activeTutorial.next.targetSlug}
+        title={LINK_TITLE}
+        leftGlyph={<Icon glyph={glyphs.ArrowRight.displayName} />}
+        size="xsmall"
+      >
+        {LINK_TITLE}
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/MultiPageTutorials/StepNumber.js b/src/components/MultiPageTutorials/StepNumber.js
new file mode 100644
index 000000000..1002422f5
--- /dev/null
+++ b/src/components/MultiPageTutorials/StepNumber.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@leafygreen-ui/emotion';
+import { theme } from '../../theme/docsTheme';
+import Overline from '../Internal/Overline';
+import { MPTNextLinkFull } from './MPTNextLinkFull';
+
+const overlineStyle = css`
+  font-weight: 600;
+  line-height: ${theme.size.default};
+  padding-top: 0 !important;
+`;
+
+export const StepNumber = ({ slug, activeTutorial }) => {
+  const totalSteps = activeTutorial.total_steps;
+  const currentStep = activeTutorial.slugs.indexOf(slug) + 1;
+
+  return (
+    <>
+      <Overline className={overlineStyle}>
+        Step {currentStep} of {totalSteps}
+      </Overline>
+      <MPTNextLinkFull />
+    </>
+  );
+};
+
+StepNumber.propTypes = {
+  slug: PropTypes.string.isRequired,
+  activeTutorial: PropTypes.shape({
+    parent: PropTypes.string,
+    total_steps: PropTypes.number,
+    slugs: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
diff --git a/src/components/MultiPageTutorials/TimeRequired.js b/src/components/MultiPageTutorials/TimeRequired.js
new file mode 100644
index 000000000..a3140a409
--- /dev/null
+++ b/src/components/MultiPageTutorials/TimeRequired.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { css } from '@leafygreen-ui/emotion';
+import Overline from '../Internal/Overline';
+import { theme } from '../../theme/docsTheme';
+import { MPTNextLinkMini } from './MPTNextLinkMini';
+import { useMptPageOptions } from './hooks/use-mpt-page-options';
+import { OPTION_KEY_TIME_REQUIRED } from './constants';
+
+const timeBaseStyle = css`
+  font-weight: 600;
+  line-height: ${theme.size.default};
+  margin-top: 40px;
+  margin-bottom: ${theme.size.default};
+`;
+
+export const TimeRequired = () => {
+  const options = useMptPageOptions();
+  const time = options?.[OPTION_KEY_TIME_REQUIRED];
+
+  if (!time) {
+    return null;
+  }
+
+  return (
+    <>
+      <Overline className={timeBaseStyle}>Read time {time} min</Overline>
+      {/* Keeping at the bottom so that it can be more easily aligned regardless of what's above the Time component*/}
+      <MPTNextLinkMini />
+    </>
+  );
+};
diff --git a/src/components/MultiPageTutorials/constants.js b/src/components/MultiPageTutorials/constants.js
new file mode 100644
index 000000000..1839dd010
--- /dev/null
+++ b/src/components/MultiPageTutorials/constants.js
@@ -0,0 +1,4 @@
+export const PAGE_OPTION_NAME = 'multi_page_tutorial_settings';
+export const OPTION_KEY_SHOW_NEXT_TOP = 'show_next_top';
+export const OPTION_KEY_TIME_REQUIRED = 'time_required';
+export const LINK_TITLE = 'Next Step';
diff --git a/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js b/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js
new file mode 100644
index 000000000..ab8e3e165
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-active-mp-tutorial.js
@@ -0,0 +1,47 @@
+import { usePageContext } from '../../../context/page-context';
+import useSnootyMetadata from '../../../utils/use-snooty-metadata';
+
+const addPrevNextTutorials = (slugTitleMapping, slug, activeTutorial) => {
+  if (!activeTutorial || Object.keys(activeTutorial).length === 0) {
+    return;
+  }
+
+  const currPageIdx = activeTutorial.slugs.indexOf(slug);
+  const keyNext = 'next';
+  const keyPrev = 'prev';
+  activeTutorial[keyNext] = null;
+  activeTutorial[keyPrev] = null;
+
+  const nextPageIdx = currPageIdx + 1;
+  if (nextPageIdx < activeTutorial.total_steps) {
+    const targetSlug = activeTutorial.slugs[nextPageIdx];
+    const pageTitle = slugTitleMapping[targetSlug];
+    activeTutorial[keyNext] = {
+      targetSlug,
+      pageTitle,
+    };
+  }
+
+  const prevPageIdx = currPageIdx - 1;
+  if (prevPageIdx >= 0) {
+    const targetSlug = activeTutorial.slugs[prevPageIdx];
+    const pageTitle = slugTitleMapping[targetSlug];
+    activeTutorial[keyPrev] = {
+      targetSlug,
+      pageTitle,
+    };
+  }
+};
+
+/**
+ * @returns {object | null} Metadata about a multi-page tutorial, if the current page is part of one. Otherwise, null is returned.
+ */
+export const useActiveMpTutorial = () => {
+  const { slug } = usePageContext();
+  const { multiPageTutorials = {}, slugToBreadcrumbLabel } = useSnootyMetadata();
+
+  const activeTutorial = Object.values(multiPageTutorials).find((tutorial) => tutorial.slugs?.includes(slug)) ?? null;
+  addPrevNextTutorials(slugToBreadcrumbLabel, slug, activeTutorial);
+
+  return activeTutorial;
+};
diff --git a/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js b/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js
new file mode 100644
index 000000000..ed755819b
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-mpt-page-options.js
@@ -0,0 +1,10 @@
+import { usePageContext } from '../../../context/page-context';
+import { PAGE_OPTION_NAME } from '../constants';
+
+export const useMptPageOptions = () => {
+  const { options } = usePageContext();
+  if (!options || Object.keys(options).length === 0) {
+    return;
+  }
+  return options[PAGE_OPTION_NAME];
+};
diff --git a/src/components/MultiPageTutorials/hooks/use-should-show-next.js b/src/components/MultiPageTutorials/hooks/use-should-show-next.js
new file mode 100644
index 000000000..a29dbd280
--- /dev/null
+++ b/src/components/MultiPageTutorials/hooks/use-should-show-next.js
@@ -0,0 +1,11 @@
+import { OPTION_KEY_SHOW_NEXT_TOP } from '../constants';
+import { useActiveMpTutorial } from './use-active-mp-tutorial';
+import { useMptPageOptions } from './use-mpt-page-options';
+
+export const useShouldShowNext = () => {
+  const activeTutorial = useActiveMpTutorial();
+  const options = useMptPageOptions();
+  const hasNextTutorial = activeTutorial && !!activeTutorial.next;
+  const hasPageOption = !!options?.[OPTION_KEY_SHOW_NEXT_TOP];
+  return hasPageOption && hasNextTutorial;
+};
diff --git a/src/components/MultiPageTutorials/index.js b/src/components/MultiPageTutorials/index.js
new file mode 100644
index 000000000..2830a2189
--- /dev/null
+++ b/src/components/MultiPageTutorials/index.js
@@ -0,0 +1,3 @@
+export { StepNumber } from './StepNumber';
+export { TimeRequired } from './TimeRequired';
+export { useActiveMpTutorial } from './hooks/use-active-mp-tutorial';
diff --git a/src/components/MultiPageTutorials/utils.js b/src/components/MultiPageTutorials/utils.js
new file mode 100644
index 000000000..919059f7d
--- /dev/null
+++ b/src/components/MultiPageTutorials/utils.js
@@ -0,0 +1,8 @@
+import { reportAnalytics } from '../../utils/report-analytics';
+
+export const reportMPTAnalytics = (targetSlug, variant) => {
+  reportAnalytics('MultiPageTutorialNextClicked', {
+    targetSlug,
+    variant,
+  });
+};
diff --git a/src/context/page-context.js b/src/context/page-context.js
index 236c101a3..1d6e954eb 100644
--- a/src/context/page-context.js
+++ b/src/context/page-context.js
@@ -4,6 +4,7 @@ export const PageContext = createContext({
   page: null,
   template: null,
   slug: null,
+  options: null,
 });
 
 export const usePageContext = () => {
diff --git a/src/templates/document.js b/src/templates/document.js
index 33b2fbfa3..e52d0f806 100644
--- a/src/templates/document.js
+++ b/src/templates/document.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import Breadcrumbs from '../components/Breadcrumbs';
 import Contents from '../components/Contents';
-import InternalPageNav from '../components/InternalPageNav';
+import { InternalPageNav } from '../components/InternalPageNav';
+import { StepNumber, useActiveMpTutorial } from '../components/MultiPageTutorials';
 import MainColumn from '../components/MainColumn';
 import RightColumn from '../components/RightColumn';
 import TabSelectors from '../components/Tabs/TabSelectors';
@@ -33,12 +34,14 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
   const pageOptions = page?.ast.options;
   const showPrevNext = !(pageOptions?.noprevnext === '' || pageOptions?.template === 'guide');
   const hasMethodSelector = pageOptions?.has_method_selector;
+  const activeTutorial = useActiveMpTutorial();
 
   return (
     <DocumentContainer>
       <StyledMainColumn>
         <div className="body">
           <Breadcrumbs siteTitle={title} slug={slug} />
+          {activeTutorial && <StepNumber slug={slug} activeTutorial={activeTutorial} />}
           {children}
           {showPrevNext && (
             <InternalPageNav slug={slug} slugTitleMapping={slugToBreadcrumbLabel} toctreeOrder={toctreeOrder} />
@@ -48,7 +51,7 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
       <StyledRightColumn>
         {isAssociatedProduct && <AssociatedVersionSelector />}
         {!hasMethodSelector && <TabSelectors />}
-        <Contents displayOnDesktopOnly={true} />
+        <Contents />
       </StyledRightColumn>
     </DocumentContainer>
   );
diff --git a/tests/unit/InternalPageNav.test.js b/tests/unit/InternalPageNav.test.js
index 096058fc9..cd50a81e7 100644
--- a/tests/unit/InternalPageNav.test.js
+++ b/tests/unit/InternalPageNav.test.js
@@ -1,16 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { mockLocation } from '../utils/mock-location';
-import InternalPageNav from '../../src/components/InternalPageNav';
-import slugTitleMapping from './data/ecosystem/slugTitleMapping.json';
+import { InternalPageNav } from '../../src/components/InternalPageNav';
+import useSnootyMetadata from '../../src/utils/use-snooty-metadata';
+import { PageContext } from '../../src/context/page-context';
+import slugToBreadcrumbLabel from './data/ecosystem/slugToBreadcrumbLabel.json';
 
-const data = ['drivers/csharp', 'drivers/go', 'drivers/java'];
+const data = ['drivers/csharp', 'drivers/go', 'drivers/java', 'drivers/motor', 'drivers/cxx'];
+
+jest.mock(`../../src/utils/use-snooty-metadata`, () => jest.fn());
 
 const renderNav = (slug) =>
-  render(<InternalPageNav slug={slug} slugTitleMapping={slugTitleMapping} toctreeOrder={data} />);
+  render(
+    <PageContext.Provider value={{ slug }}>
+      <InternalPageNav slug={slug} slugTitleMapping={slugToBreadcrumbLabel} toctreeOrder={data} />
+    </PageContext.Provider>
+  );
 
 beforeAll(() => {
   mockLocation(null, `/`);
+  useSnootyMetadata.mockImplementation(() => ({}));
 });
 
 it('renders a page with next and previous links correctly', () => {
@@ -24,6 +33,56 @@ it('renders a page with no previous link correctly', () => {
 });
 
 it('renders a page with no next link correctly', () => {
-  const tree = renderNav('drivers/java');
+  const tree = renderNav('drivers/cxx');
   expect(tree.asFragment()).toMatchSnapshot();
 });
+
+describe('multi-page tutorials', () => {
+  it('renders a page with next and previous page steps', () => {
+    const mockData = ['drivers/csharp', 'drivers/java', 'drivers/cxx'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/go');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders a page with next in multi-page tutorial, and previous toctree order', () => {
+    const mockData = ['drivers/go', 'drivers/motor'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/go');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders a page with previous in multi-page tutorial, and next toctree order', () => {
+    const mockData = ['drivers/go', 'drivers/motor'];
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: {
+        'mock-page': {
+          slugs: mockData,
+          total_steps: mockData.length,
+        },
+      },
+      slugToBreadcrumbLabel,
+    }));
+
+    const tree = renderNav('drivers/motor');
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/MultiPageTutorials.test.js b/tests/unit/MultiPageTutorials.test.js
new file mode 100644
index 000000000..bb7c328fa
--- /dev/null
+++ b/tests/unit/MultiPageTutorials.test.js
@@ -0,0 +1,111 @@
+import { render } from '@testing-library/react';
+import { MPTNextLinkFull } from '../../src/components/MultiPageTutorials/MPTNextLinkFull';
+import { MPTNextLinkMini } from '../../src/components/MultiPageTutorials/MPTNextLinkMini';
+import useSnootyMetadata from '../../src/utils/use-snooty-metadata';
+import { PageContext } from '../../src/context/page-context';
+import {
+  OPTION_KEY_SHOW_NEXT_TOP,
+  OPTION_KEY_TIME_REQUIRED,
+  PAGE_OPTION_NAME,
+} from '../../src/components/MultiPageTutorials/constants';
+import slugToBreadcrumbLabel from './data/ecosystem/slugToBreadcrumbLabel.json';
+
+jest.mock(`../../src/utils/use-snooty-metadata`, () => jest.fn());
+
+const VALID_PAGE_OPTIONS = {
+  [PAGE_OPTION_NAME]: {
+    [OPTION_KEY_SHOW_NEXT_TOP]: true,
+    [OPTION_KEY_TIME_REQUIRED]: 15,
+  },
+};
+
+const MOCK_SLUGS = ['drivers/csharp', 'drivers/go', 'drivers/java'];
+
+const MULTI_PAGE_TUTORIALS = {
+  'mock-page': {
+    slugs: MOCK_SLUGS,
+    total_steps: MOCK_SLUGS.length,
+  },
+};
+
+const TestWrapper = ({ slugIndex, options, children }) => (
+  <PageContext.Provider value={{ slug: MOCK_SLUGS[slugIndex], options: options }}>{children}</PageContext.Provider>
+);
+
+const renderFullComponent = ({ ...props }) =>
+  render(
+    <TestWrapper {...props}>
+      <MPTNextLinkFull />
+    </TestWrapper>
+  );
+
+const renderMiniComponent = ({ ...props }) =>
+  render(
+    <TestWrapper {...props}>
+      <MPTNextLinkMini />
+    </TestWrapper>
+  );
+
+describe('Next link button', () => {
+  beforeEach(() => {
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: MULTI_PAGE_TUTORIALS,
+      slugToBreadcrumbLabel,
+    }));
+  });
+
+  it("renders when there's a next step in the multi-page tutorial", () => {
+    const testIndex = 1;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.getByText('Next')).toBeTruthy();
+    expect(tree.getByText(slugToBreadcrumbLabel[MOCK_SLUGS[testIndex + 1]])).toBeTruthy();
+  });
+
+  it("does not render when there's no next step in the multi-page tutorial", () => {
+    const testIndex = MOCK_SLUGS.length - 1;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.queryByText('Next')).toBeFalsy();
+  });
+
+  it('does not render unless page option is present', () => {
+    const testIndex = 1;
+    const mockOptions = {
+      [PAGE_OPTION_NAME]: {
+        [OPTION_KEY_SHOW_NEXT_TOP]: false,
+        [OPTION_KEY_TIME_REQUIRED]: 15,
+      },
+    };
+    mockOptions.multi_page_tutorial_settings.show_next_top = false;
+    const tree = renderFullComponent({ slugIndex: testIndex, options: mockOptions });
+    expect(tree.queryByText('Next')).toBeFalsy();
+  });
+});
+
+describe('Next mini button', () => {
+  beforeEach(() => {
+    useSnootyMetadata.mockImplementation(() => ({
+      multiPageTutorials: MULTI_PAGE_TUTORIALS,
+      slugToBreadcrumbLabel,
+    }));
+  });
+
+  it("renders when there's a next step in the multi-page tutorial", () => {
+    const testIndex = 1;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.getByText('Next Step')).toBeTruthy();
+  });
+
+  it("does not render when there's no next step in the multi-page tutorial", () => {
+    const testIndex = MOCK_SLUGS.length - 1;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: VALID_PAGE_OPTIONS });
+    expect(tree.queryByText('Next Step')).toBeFalsy();
+  });
+
+  it('does not render unless page option is present', () => {
+    const testIndex = 1;
+    const mockOptions = { ...VALID_PAGE_OPTIONS };
+    mockOptions.multi_page_tutorial_settings.show_next_top = false;
+    const tree = renderMiniComponent({ slugIndex: testIndex, options: mockOptions });
+    expect(tree.queryByText('Next Step')).toBeFalsy();
+  });
+});
diff --git a/tests/unit/__snapshots__/InternalPageNav.test.js.snap b/tests/unit/__snapshots__/InternalPageNav.test.js.snap
index 9e686c26d..7ae915883 100644
--- a/tests/unit/__snapshots__/InternalPageNav.test.js.snap
+++ b/tests/unit/__snapshots__/InternalPageNav.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders a page with next and previous links correctly 1`] = `
+exports[`multi-page tutorials renders a page with next and previous page steps 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -119,9 +119,11 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -157,6 +159,18 @@ exports[`renders a page with next and previous links correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -188,8 +202,8 @@ exports[`renders a page with next and previous links correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
@@ -207,6 +221,7 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -232,6 +247,10 @@ exports[`renders a page with next and previous links correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
 .emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -255,117 +274,121 @@ exports[`renders a page with next and previous links correctly 1`] = `
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/csharp/"
-      title="Previous Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Left Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
           </div>
-        </button>
-        <div
-          class="emotion-6"
-        >
-          <p
-            class="emotion-7"
-          >
-            Back
-          </p>
-          <p
-            class="emotion-8"
-          >
-            MongoDB C#/.NET Driver
-          </p>
         </div>
-      </div>
-    </a>
-    <a
-      class="emotion-1"
-      href="/drivers/java/"
-      title="Next Section"
-    >
-      <div
-        class="emotion-10"
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/java/"
+        title="Next Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-10"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-14"
           >
-            <svg
-              aria-label="Arrow Right Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
             >
-              <path
-                d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Java MongoDB Driver
+            </p>
           </div>
-        </button>
-        <div
-          class="emotion-14"
-        >
-          <p
-            class="emotion-7"
-          >
-            Next
-          </p>
-          <p
-            class="emotion-8"
-          >
-            Java MongoDB Driver
-          </p>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`renders a page with no next link correctly 1`] = `
+exports[`multi-page tutorials renders a page with next in multi-page tutorial, and previous toctree order 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -484,9 +507,11 @@ exports[`renders a page with no next link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -522,6 +547,18 @@ exports[`renders a page with no next link correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -553,8 +590,8 @@ exports[`renders a page with no next link correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
@@ -572,6 +609,7 @@ exports[`renders a page with no next link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -597,67 +635,148 @@ exports[`renders a page with no next link correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/go/"
-      title="Previous Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Left Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
           </div>
-        </button>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/motor/"
+        title="Next Step"
+      >
         <div
-          class="emotion-6"
+          class="emotion-10"
         >
-          <p
-            class="emotion-7"
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
           >
-            Back
-          </p>
-          <p
-            class="emotion-8"
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
           >
-            MongoDB Go Driver
-          </p>
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Motor (Async Driver)
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`renders a page with no previous link correctly 1`] = `
+exports[`multi-page tutorials renders a page with previous in multi-page tutorial, and next toctree order 1`] = `
 <DocumentFragment>
   .emotion-0 {
   padding-bottom: 2.5em;
@@ -739,9 +858,9 @@ exports[`renders a page with no previous link correctly 1`] = `
   display: flex;
   -webkit-column-gap: 14px;
   column-gap: 14px;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
 .emotion-3 {
@@ -776,9 +895,11 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  height: 36px;
+  width: 52px;
   height: 48px;
-  font-size: 18px;
-  line-height: 24px;
+  background-color: #F9FBFA;
+  color: #001E2B;
 }
 
 .emotion-3:focus-visible,
@@ -814,6 +935,18 @@ exports[`renders a page with no previous link correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
 .emotion-4 {
   overflow: hidden;
   position: absolute;
@@ -845,12 +978,12 @@ exports[`renders a page with no previous link correctly 1`] = `
   z-index: 0;
   -webkit-transition: all 150 ease-in-out;
   transition: all 150 ease-in-out;
-  padding: 0 15px;
-  gap: 8px;
+  padding: 0 11px;
+  gap: 6px;
 }
 
 .emotion-6 {
-  text-align: end;
+  text-align: start;
 }
 
 .emotion-7 {
@@ -864,6 +997,7 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-size: 13px;
   line-height: 20px;
   font-weight: 500;
+  color: var(--font-color-primary);
 }
 
 .emotion-7 strong,
@@ -889,62 +1023,1157 @@ exports[`renders a page with no previous link correctly 1`] = `
   font-weight: 700;
 }
 
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
 <div
     class="emotion-0"
   >
-    <a
-      class="emotion-1"
-      href="/drivers/go/"
-      title="Next Section"
-    >
-      <div
-        class="emotion-2"
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/go/"
+        title="Previous Step"
       >
-        <button
-          aria-disabled="false"
-          class="lg-ui-button-0000 emotion-3"
-          data-lgid="lg-button"
-          type="button"
+        <div
+          class="emotion-2"
         >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
           <div
-            class="emotion-4"
-          />
-          <div
-            class="emotion-5"
+            class="emotion-6"
           >
-            <svg
-              aria-label="Arrow Right Icon"
-              class=""
-              fill="none"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <p
+              class="emotion-7"
             >
-              <path
-                d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
-                fill="currentColor"
-              />
-            </svg>
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB Go Driver
+            </p>
           </div>
-        </button>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/cxx/"
+        title="Next Section"
+      >
         <div
-          class="emotion-6"
+          class="emotion-10"
         >
-          <p
-            class="emotion-7"
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
           >
-            Next
-          </p>
-          <p
-            class="emotion-8"
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
           >
-            MongoDB Go Driver
-          </p>
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C++ Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with next and previous links correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: start;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-14 {
+  text-align: end;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/csharp/"
+        title="Previous Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB C#/.NET Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/java/"
+        title="Next Section"
+      >
+        <div
+          class="emotion-10"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-14"
+          >
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Java MongoDB Driver
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with no next link correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: start;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/motor/"
+        title="Previous Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Left Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 6.832H6.056L7.59 5.297a1 1 0 0 0 0-1.414l-.24-.239a1 1 0 0 0-1.414 0L2.555 7.027c-.01.008-.018.017-.027.026l-.24.239a1 1 0 0 0 0 1.414l3.652 3.651a1 1 0 0 0 1.414 0l.239-.239a1 1 0 0 0 0-1.414L6.059 9.17H13a1 1 0 0 0 1-1v-.338a1 1 0 0 0-1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Back
+            </p>
+            <p
+              class="emotion-8"
+            >
+              Motor (Async Driver)
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`renders a page with no previous link correctly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  padding-bottom: 2.5em;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-column-gap: 16px;
+  column-gap: 16px;
+  margin-top: 88px;
+}
+
+@media only screen and (max-width: 480px) {
+  .emotion-0 {
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    row-gap: 64px;
+    margin-top: 66px;
+  }
+}
+
+@media print {
+  .emotion-0 {
+    display: none;
+  }
+}
+
+.emotion-1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-decoration-color: transparent;
+  line-height: 13px;
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1>code {
+  color: var(--link-color-primary);
+  font-weight: var(--link-font-weight);
+}
+
+.emotion-1:focus,
+.emotion-1:hover {
+  text-decoration-line: underline;
+  -webkit-transition: text-decoration 150ms ease-in-out;
+  transition: text-decoration 150ms ease-in-out;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+}
+
+.emotion-1:focus {
+  text-decoration-color: #016BF8;
+  outline: none;
+}
+
+.emotion-1:hover {
+  text-decoration-color: #E8EDEB;
+}
+
+.emotion-2 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 14px;
+  column-gap: 14px;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.emotion-3 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-transition: all 150ms ease-in-out;
+  transition: all 150ms ease-in-out;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 0;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  border-radius: 6px;
+  background-color: #F9FBFA;
+  border-color: #889397;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  height: 36px;
+  width: 52px;
+  height: 48px;
+  background-color: #F9FBFA;
+  color: #001E2B;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  outline: none;
+}
+
+.emotion-3:active,
+.emotion-3[data-active="true"],
+.emotion-3:focus,
+.emotion-3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  color: #001E2B;
+}
+
+.emotion-3:hover,
+.emotion-3[data-hover="true"],
+.emotion-3:active,
+.emotion-3[data-active="true"] {
+  color: #001E2B;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 3px #E8EDEB;
+}
+
+.emotion-3:focus-visible,
+.emotion-3[data-focus="true"] {
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
+}
+
+@media not all and (max-width: 767px) {
+  .emotion-3 {
+    width: 40px;
+    height: 36px;
+  }
+}
+
+.dark-theme .emotion-3 {
+  background-color: #3D4F58;
+  color: #FFFFFF;
+}
+
+.emotion-4 {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 5px;
+}
+
+.emotion-5 {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: 0;
+  -webkit-transition: all 150 ease-in-out;
+  transition: all 150 ease-in-out;
+  padding: 0 11px;
+  gap: 6px;
+}
+
+.emotion-6 {
+  text-align: end;
+}
+
+.emotion-7 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--font-color-primary);
+}
+
+.emotion-7 strong,
+.emotion-7 b {
+  font-weight: 700;
+}
+
+.emotion-8 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  color: #889397;
+}
+
+.emotion-8 strong,
+.emotion-8 b {
+  font-weight: 700;
+}
+
+.dark-theme .emotion-8 {
+  color: #C1C7C6;
+}
+
+<div
+    class="emotion-0"
+  >
+    <div>
+      <a
+        class="emotion-1"
+        href="/drivers/go/"
+        title="Next Section"
+      >
+        <div
+          class="emotion-2"
+        >
+          <button
+            aria-disabled="false"
+            class="lg-ui-button-0000 emotion-3"
+            data-lgid="lg-button"
+            type="button"
+          >
+            <div
+              class="emotion-4"
+            />
+            <div
+              class="emotion-5"
+            >
+              <svg
+                aria-label="Arrow Right Icon"
+                class=""
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 6.832h6.944L8.41 5.297a1 1 0 0 1 0-1.414l.24-.239a1 1 0 0 1 1.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 0 1 0 1.414l-3.652 3.651a1 1 0 0 1-1.414 0l-.239-.239a1 1 0 0 1 0-1.414L9.941 9.17H3a1 1 0 0 1-1-1v-.338a1 1 0 0 1 1-1Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-6"
+          >
+            <p
+              class="emotion-7"
+            >
+              Next
+            </p>
+            <p
+              class="emotion-8"
+            >
+              MongoDB Go Driver
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/tests/unit/data/ecosystem/slugTitleMapping.json b/tests/unit/data/ecosystem/slugTitleMapping.json
deleted file mode 100644
index 9dd02173b..000000000
--- a/tests/unit/data/ecosystem/slugTitleMapping.json
+++ /dev/null
@@ -1,585 +0,0 @@
-{
-  "contents": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Ecosystem Documentation Contents"
-    }
-  ],
-  "platforms": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Platforms"
-    }
-  ],
-  "tools": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Integration and Tools"
-    }
-  ],
-  "index": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Drivers and Ecosystem"
-    }
-  ],
-  "drivers": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Drivers and ODM"
-    }
-  ],
-  "connectors/kafka": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Kafka Connector"
-    }
-  ],
-  "use-cases": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Use Cases"
-    }
-  ],
-  "connectors/kafka-connect-migration": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Migrate from Kafka Connect"
-    }
-  ],
-  "connectors/kafka-sink-cdc": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Change Data Capture"
-    }
-  ],
-  "connectors/kafka-sink": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Guide"
-    }
-  ],
-  "platforms/windows-azure": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Microsoft Azure"
-    }
-  ],
-  "platforms/windows": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Windows Quick Links and Reference Center"
-    }
-  ],
-  "connectors/kafka-installation": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Install MongoDB Kafka Connector"
-    }
-  ],
-  "platforms/red-hat-enterprise-linux": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Red Hat Enterprise Linux"
-    }
-  ],
-  "connectors/kafka-sink-data-formats": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Data Formats"
-    }
-  ],
-  "connectors/kafka-docker-example": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Kafka Connector Docker Example"
-    }
-  ],
-  "tutorial/authenticate-with-csharp-driver": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Authenticate to MongoDB with the C# Driver"
-    }
-  ],
-  "platforms/amazon-ec2": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Amazon EC2"
-    }
-  ],
-  "connectors/kafka-source": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Source Connector Guide"
-    }
-  ],
-  "tutorial/getting-started-with-hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Getting Started with Hadoop"
-    }
-  ],
-  "tutorial/manage-red-hat-enterprise-linux-identity-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Operational Procedures using Red Hat Enterprise Linux Identity Management"
-    }
-  ],
-  "tutorial/configure-red-hat-enterprise-linux-identity-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Configure Red Hat Enterprise Linux Identity Management with MongoDB"
-    }
-  ],
-  "connectors/kafka-sink-properties": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Configuration Properties"
-    }
-  ],
-  "tools/hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Connector for Hadoop"
-    }
-  ],
-  "tools/http-interfaces": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "HTTP Interface"
-    }
-  ],
-  "tutorial/backup-and-restore-mongodb-on-amazon-ec2": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "EC2 Backup and Restore"
-    }
-  ],
-  "drivers/cxx": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C++ Driver"
-    }
-  ],
-  "drivers/java": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Java MongoDB Driver"
-    }
-  ],
-  "drivers/motor": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Motor (Async Driver)"
-    }
-  ],
-  "tools/munin": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Munin Configuration Examples"
-    }
-  ],
-  "drivers/python": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Python Drivers"
-    }
-  ],
-  "drivers/c": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C Driver"
-    }
-  ],
-  "drivers/scala": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Scala Driver"
-    }
-  ],
-  "drivers/perl": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Perl Driver"
-    }
-  ],
-  "drivers/community-supported-drivers": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Community Supported Drivers Reference"
-    }
-  ],
-  "drivers/pymongo": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "PyMongo"
-    }
-  ],
-  "drivers/php": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB PHP Driver"
-    }
-  ],
-  "drivers/go": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB Go Driver"
-    }
-  ],
-  "drivers/node": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "MongoDB Node.js Driver"
-    }
-  ],
-  "drivers/specs": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "MongoDB Drivers Specs"
-    }
-  ],
-  "drivers/php-libraries": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "PHP Libraries, Frameworks, and Tools"
-    }
-  ],
-  "drivers/csharp": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "MongoDB C#/.NET Driver"
-    }
-  ],
-  "connectors/kafka-sink-postprocessors": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 4
-        }
-      },
-      "value": "Kafka Sink Connector Post-Processors"
-    }
-  ],
-  "use-cases/hadoop": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 6
-        }
-      },
-      "value": "Hadoop and MongoDB Use Cases"
-    }
-  ],
-  "drivers/driver-compatibility-reference": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Driver Compatibility"
-    }
-  ],
-  "use-cases/category-hierarchy": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Category Hierarchy"
-    }
-  ],
-  "use-cases/metadata-and-asset-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Metadata and Asset Management"
-    }
-  ],
-  "use-cases/hierarchical-aggregation": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Hierarchical Aggregation"
-    }
-  ],
-  "use-cases/inventory-management": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Inventory Management"
-    }
-  ],
-  "use-cases/storing-comments": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Storing Comments"
-    }
-  ],
-  "use-cases/product-catalog": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Product Catalog"
-    }
-  ],
-  "use-cases/storing-log-data": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Storing Log Data"
-    }
-  ],
-  "use-cases/client-side-field-level-encryption-guide": [
-    {
-      "type": "text",
-      "position": {
-        "start": {
-          "line": 2
-        }
-      },
-      "value": "Client Side Field Level Encryption Guide"
-    }
-  ]
-}
diff --git a/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json b/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json
new file mode 100644
index 000000000..818d97646
--- /dev/null
+++ b/tests/unit/data/ecosystem/slugToBreadcrumbLabel.json
@@ -0,0 +1,55 @@
+{
+  "contents": "MongoDB Ecosystem Documentation Contents",
+  "platforms": "Platforms",
+  "tools": "MongoDB Integration and Tools",
+  "index": "MongoDB Drivers and Ecosystem",
+  "drivers": "MongoDB Drivers and ODM",
+  "connectors/kafka": "MongoDB Kafka Connector",
+  "use-cases": "Use Cases",
+  "connectors/kafka-connect-migration": "Migrate from Kafka Connect",
+  "connectors/kafka-sink-cdc": "Kafka Sink Change Data Capture",
+  "connectors/kafka-sink": "Kafka Sink Connector Guide",
+  "platforms/windows-azure": "Microsoft Azure",
+  "platforms/windows": "Windows Quick Links and Reference Center",
+  "connectors/kafka-installation": "Install MongoDB Kafka Connector",
+  "platforms/red-hat-enterprise-linux": "Red Hat Enterprise Linux",
+  "connectors/kafka-sink-data-formats": "Kafka Sink Connector Data Formats",
+  "connectors/kafka-docker-example": "MongoDB Kafka Connector Docker Example",
+  "tutorial/authenticate-with-csharp-driver": "Authenticate to MongoDB with the C# Driver",
+  "platforms/amazon-ec2": "Amazon EC2",
+  "connectors/kafka-source": "Kafka Source Connector Guide",
+  "tutorial/getting-started-with-hadoop": "Getting Started with Hadoop",
+  "tutorial/manage-red-hat-enterprise-linux-identity-management": "Operational Procedures using Red Hat Enterprise Linux Identity Management",
+  "tutorial/configure-red-hat-enterprise-linux-identity-management": "Configure Red Hat Enterprise Linux Identity Management with MongoDB",
+  "connectors/kafka-sink-properties": "Kafka Sink Connector Configuration Properties",
+  "tools/hadoop": "MongoDB Connector for Hadoop",
+  "tools/http-interfaces": "HTTP Interface",
+  "tutorial/backup-and-restore-mongodb-on-amazon-ec2": "EC2 Backup and Restore",
+  "drivers/cxx": "MongoDB C++ Driver",
+  "drivers/java": "Java MongoDB Driver",
+  "drivers/motor": "Motor (Async Driver)",
+  "tools/munin": "Munin Configuration Examples",
+  "drivers/python": "MongoDB Python Drivers",
+  "drivers/c": "MongoDB C Driver",
+  "drivers/scala": "MongoDB Scala Driver",
+  "drivers/perl": "MongoDB Perl Driver",
+  "drivers/community-supported-drivers": "Community Supported Drivers Reference",
+  "drivers/pymongo": "PyMongo",
+  "drivers/php": "MongoDB PHP Driver",
+  "drivers/go": "MongoDB Go Driver",
+  "drivers/node": "MongoDB Node.js Driver",
+  "drivers/specs": "MongoDB Drivers Specs",
+  "drivers/php-libraries": "PHP Libraries, Frameworks, and Tools",
+  "drivers/csharp": "MongoDB C#/.NET Driver",
+  "connectors/kafka-sink-postprocessors": "Kafka Sink Connector Post-Processors",
+  "use-cases/hadoop": "Hadoop and MongoDB Use Cases",
+  "drivers/driver-compatibility-reference": "Driver Compatibility",
+  "use-cases/category-hierarchy": "Category Hierarchy",
+  "use-cases/metadata-and-asset-management": "Metadata and Asset Management",
+  "use-cases/hierarchical-aggregation": "Hierarchical Aggregation",
+  "use-cases/inventory-management": "Inventory Management",
+  "use-cases/storing-comments": "Storing Comments",
+  "use-cases/product-catalog": "Product Catalog",
+  "use-cases/storing-log-data": "Storing Log Data",
+  "use-cases/client-side-field-level-encryption-guide": "Client Side Field Level Encryption Guide"
+}

From 09a524f3cfbaabbe32f66127b18cf3d951a8b2c8 Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Mon, 16 Sep 2024 12:38:46 -0400
Subject: [PATCH 2/5] DOP-4994: Feedback Button horizontal text in all
 languages (#1238)

---
 src/components/Widgets/FeedbackWidget/FeedbackButton.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Widgets/FeedbackWidget/FeedbackButton.js b/src/components/Widgets/FeedbackWidget/FeedbackButton.js
index a186a07ad..1f4759db3 100644
--- a/src/components/Widgets/FeedbackWidget/FeedbackButton.js
+++ b/src/components/Widgets/FeedbackWidget/FeedbackButton.js
@@ -38,6 +38,8 @@ const FeedbackButton = () => {
           darkModePrestyling,
           css`
             ${displayNone.onMobileAndTablet}
+            // For vertical languages (chinese, korean, japanese)
+            text-wrap: nowrap;
           `
         )}
         onClick={() => (!feedback ? initializeFeedback() : abandon())}

From 790f07cb61f0315effd23ad2c5f837b549777c79 Mon Sep 17 00:00:00 2001
From: Maya Raman <maya.raman19@gmail.com>
Date: Tue, 17 Sep 2024 10:20:08 -0400
Subject: [PATCH 3/5] DOP-4973: Allow tabs/language selector to be added
 directly to the content (#1228)

---
 src/components/ComponentFactory.js  |  3 ++-
 src/components/DocumentBody.js      |  3 ++-
 src/components/Heading.js           |  4 +--
 src/components/Tabs/TabSelectors.js | 38 +++++++++++++++++++----------
 src/components/Tabs/make-choices.js |  8 ++++++
 src/components/Tabs/tab-context.js  |  2 +-
 src/context/page-context.js         |  1 +
 src/templates/document.js           |  4 ++-
 8 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Tabs/make-choices.js

diff --git a/src/components/ComponentFactory.js b/src/components/ComponentFactory.js
index 7a11226b0..71ba80340 100644
--- a/src/components/ComponentFactory.js
+++ b/src/components/ComponentFactory.js
@@ -61,6 +61,7 @@ import Subscript from './Subscript';
 import SubstitutionReference from './SubstitutionReference';
 import Superscript from './Superscript';
 import Tabs from './Tabs';
+import TabSelectors from './Tabs/TabSelectors';
 import Target from './Target';
 import Text from './Text';
 import Time from './Time';
@@ -88,7 +89,6 @@ const IGNORED_NAMES = new Set([
   'raw',
   'short-description',
   'tabs-pillstrip',
-  'tabs-selector',
   'toctree',
   'meta',
   'facet',
@@ -183,6 +183,7 @@ const componentMap = {
   strong: Strong,
   substitution_reference: SubstitutionReference,
   tabs: Tabs,
+  'tabs-selector': TabSelectors,
   target: Target,
   text: Text,
   time: Time,
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index aced08aea..b50009310 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -86,6 +86,7 @@ const DocumentBody = (props) => {
   const { location, data, pageContext } = props;
   const page = data?.page?.ast;
   const { slug, template, repoBranches } = pageContext;
+  const tabsMainColumn = page?.options?.['tabs-selector-position'] === 'main';
 
   const initialization = () => {
     const pageNodes = getNestedValue(['children'], page) || [];
@@ -150,7 +151,7 @@ const DocumentBody = (props) => {
           >
             <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
               <FootnoteContext.Provider value={{ footnotes }}>
-                <PageContext.Provider value={{ page, template, slug, options: page?.options }}>
+                <PageContext.Provider value={{ page, template, slug, options: page?.options, tabsMainColumn }}>
                   <div id="template-container">
                     <Template {...props} useChatbot={useChatbot}>
                       {pageNodes.map((child, index) => (
diff --git a/src/components/Heading.js b/src/components/Heading.js
index 7eb45f0c6..2a35147c4 100644
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@@ -61,7 +61,7 @@ const Heading = ({ sectionDepth, nodeData, className, ...rest }) => {
   const { hasDrawer, isOpen, setIsOpen } = useContext(InstruqtContext);
   const hasSelectors = selectors && Object.keys(selectors).length > 0;
   const shouldShowLabButton = isPageTitle && hasDrawer;
-  const { page } = usePageContext();
+  const { page, tabsMainColumn } = usePageContext();
   const hasMethodSelector = page?.options?.['has_method_selector'];
   const shouldShowMobileHeader = !!(isPageTitle && isTabletOrMobile && hasSelectors && !hasMethodSelector);
 
@@ -72,7 +72,7 @@ const Heading = ({ sectionDepth, nodeData, className, ...rest }) => {
         wrapper={(children) => (
           <HeadingContainer stackVertically={isMobile}>
             {children}
-            <ChildContainer isStacked={isMobile}>{hasSelectors && <TabSelectors />}</ChildContainer>
+            <ChildContainer isStacked={isMobile}>{hasSelectors && !tabsMainColumn && <TabSelectors />}</ChildContainer>
           </HeadingContainer>
         )}
       >
diff --git a/src/components/Tabs/TabSelectors.js b/src/components/Tabs/TabSelectors.js
index aef911ad2..5204ea7fb 100644
--- a/src/components/Tabs/TabSelectors.js
+++ b/src/components/Tabs/TabSelectors.js
@@ -1,11 +1,12 @@
 import React, { useContext, useMemo } from 'react';
 import { cx, css } from '@leafygreen-ui/emotion';
 import Select from '../Select';
-import { getPlaintext } from '../../utils/get-plaintext';
 import { reportAnalytics } from '../../utils/report-analytics';
 import { DRIVER_ICON_MAP } from '../icons/DriverIconMap';
 import { theme } from '../../theme/docsTheme';
+import { PageContext } from '../../context/page-context';
 import { TabContext } from './tab-context';
+import { makeChoices } from './make-choices';
 
 const selectStyle = css`
   width: 100%;
@@ -21,6 +22,20 @@ const selectStyle = css`
   }
 `;
 
+const mainColumnStyles = css`
+  margin: ${theme.size.large} 0px;
+  div > button {
+    display: flex;
+    width: 458px;
+    @media ${theme.screenSize.upToMedium} {
+      width: 385px;
+    }
+    @media ${theme.screenSize.upToSmall} {
+      width: 100%;
+    }
+  }
+`;
+
 const capitalizeFirstLetter = (str) => str.trim().replace(/^\w/, (c) => c.toUpperCase());
 
 const getLabel = (name) => {
@@ -36,21 +51,16 @@ const getLabel = (name) => {
   }
 };
 
-export const makeChoices = ({ name, iconMapping, options }) =>
-  Object.entries(options).map(([tabId, title]) => ({
-    text: getPlaintext(title),
-    value: tabId,
-    ...(name === 'drivers' && { tabSelectorIcon: iconMapping[tabId] }),
-  }));
-
-const TabSelector = ({ className, activeTab, handleClick, iconMapping, name, options }) => {
+const TabSelector = ({ className, activeTab, handleClick, iconMapping, name, options, mainColumn }) => {
   const choices = useMemo(() => makeChoices({ name, iconMapping, options }), [name, iconMapping, options]);
+  // usePortal set to true when Select is in main column to
+  // prevent z-index issues with content overlapping dropdown
   return (
     <Select
-      className={cx(selectStyle, className)}
+      className={cx(selectStyle, mainColumn ? mainColumnStyles : '', className)}
       choices={choices}
       label={getLabel(name)}
-      usePortal={false}
+      usePortal={mainColumn}
       onChange={({ value }) => {
         handleClick({ [name]: value });
         reportAnalytics('LanguageSelection', {
@@ -64,10 +74,11 @@ const TabSelector = ({ className, activeTab, handleClick, iconMapping, name, opt
   );
 };
 
-const TabSelectors = ({ className }) => {
+const TabSelectors = ({ className, rightColumn }) => {
+  const { tabsMainColumn } = useContext(PageContext);
   const { activeTabs, selectors, setActiveTab } = useContext(TabContext);
 
-  if (!selectors || Object.keys(selectors).length === 0) {
+  if (!selectors || Object.keys(selectors).length === 0 || (!tabsMainColumn && !rightColumn)) {
     return null;
   }
 
@@ -88,6 +99,7 @@ const TabSelectors = ({ className }) => {
             iconMapping={iconMapping}
             name={name}
             options={options}
+            mainColumn={tabsMainColumn}
           />
         );
       })}
diff --git a/src/components/Tabs/make-choices.js b/src/components/Tabs/make-choices.js
new file mode 100644
index 000000000..7e336a6fd
--- /dev/null
+++ b/src/components/Tabs/make-choices.js
@@ -0,0 +1,8 @@
+import { getPlaintext } from '../../utils/get-plaintext';
+
+export const makeChoices = ({ name, iconMapping, options }) =>
+  Object.entries(options).map(([tabId, title]) => ({
+    text: getPlaintext(title),
+    value: tabId,
+    ...(name === 'drivers' && { tabSelectorIcon: iconMapping[tabId] }),
+  }));
diff --git a/src/components/Tabs/tab-context.js b/src/components/Tabs/tab-context.js
index dd3665f36..c7cc663f9 100644
--- a/src/components/Tabs/tab-context.js
+++ b/src/components/Tabs/tab-context.js
@@ -8,7 +8,7 @@
 import React, { useEffect, useReducer, useRef } from 'react';
 import { getLocalValue, setLocalValue } from '../../utils/browser-storage';
 import { DRIVER_ICON_MAP } from '../icons/DriverIconMap';
-import { makeChoices } from './TabSelectors';
+import { makeChoices } from './make-choices';
 
 const defaultContextValue = {
   activeTabs: {},
diff --git a/src/context/page-context.js b/src/context/page-context.js
index 1d6e954eb..579871ffc 100644
--- a/src/context/page-context.js
+++ b/src/context/page-context.js
@@ -4,6 +4,7 @@ export const PageContext = createContext({
   page: null,
   template: null,
   slug: null,
+  tabsMainColumn: null,
   options: null,
 });
 
diff --git a/src/templates/document.js b/src/templates/document.js
index e52d0f806..f7926a85c 100644
--- a/src/templates/document.js
+++ b/src/templates/document.js
@@ -11,6 +11,7 @@ import TabSelectors from '../components/Tabs/TabSelectors';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
 import AssociatedVersionSelector from '../components/AssociatedVersionSelector';
 import { theme } from '../theme/docsTheme';
+import { usePageContext } from '../context/page-context';
 
 const MAX_CONTENT_WIDTH = '775px';
 
@@ -33,6 +34,7 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
   const { slugToBreadcrumbLabel, title, toctreeOrder } = useSnootyMetadata();
   const pageOptions = page?.ast.options;
   const showPrevNext = !(pageOptions?.noprevnext === '' || pageOptions?.template === 'guide');
+  const { tabsMainColumn } = usePageContext();
   const hasMethodSelector = pageOptions?.has_method_selector;
   const activeTutorial = useActiveMpTutorial();
 
@@ -50,7 +52,7 @@ const Document = ({ children, data: { page }, pageContext: { slug, isAssociatedP
       </StyledMainColumn>
       <StyledRightColumn>
         {isAssociatedProduct && <AssociatedVersionSelector />}
-        {!hasMethodSelector && <TabSelectors />}
+        {!hasMethodSelector && !tabsMainColumn && <TabSelectors rightColumn={true} />}
         <Contents />
       </StyledRightColumn>
     </DocumentContainer>

From c8eaf7ccbbd6f909ea1cf835201b50baa20a6b79 Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Tue, 17 Sep 2024 12:26:01 -0400
Subject: [PATCH 4/5] Easiest solution: disallow option and hotkey in locale
 not en-us (#1240)

---
 src/components/ActionBar/SearchInput.js | 44 +++++++++++---------
 src/components/ActionBar/SearchMenu.js  | 54 +++++++++++++------------
 2 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/src/components/ActionBar/SearchInput.js b/src/components/ActionBar/SearchInput.js
index 29a8770ab..6161736b9 100644
--- a/src/components/ActionBar/SearchInput.js
+++ b/src/components/ActionBar/SearchInput.js
@@ -14,6 +14,7 @@ import debounce from '../../utils/debounce';
 import { isBrowser } from '../../utils/is-browser';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { SuspenseHelper } from '../SuspenseHelper';
+import { getCurrLocale } from '../../utils/locale';
 import { searchIconStyling, searchInputStyling, StyledInputContainer } from './styles';
 import { ShortcutIcon, SparkleIcon } from './SparkIcon';
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
@@ -60,6 +61,8 @@ const SearchInput = ({ className, slug }) => {
   const [selectedOption, setSelectedOption] = useState(0);
   const [mobileSearchActive, setMobileSearchActive] = useState(false);
   const { search } = useLocation();
+  const locale = getCurrLocale();
+  const isEnglish = locale === 'en-us';
 
   useBackdropClick(
     () => {
@@ -80,24 +83,27 @@ const SearchInput = ({ className, slug }) => {
     return () => debounced();
   }, [searchValue]);
 
-  const keyPressHandler = useCallback(async (event) => {
-    // cmd+k or ctrl+k focuses search bar,
-    // unless already focused on an input field
-    const holdingCtrlCmd = (navigator.userAgent.includes('Mac') && event.metaKey) || event.ctrlKey;
-    if (holdingCtrlCmd && event.key === 'k' && document.activeElement.tagName.toLowerCase() !== 'input') {
-      event.preventDefault();
-      inputRef.current?.focus();
-      return;
-    }
+  const keyPressHandler = useCallback(
+    async (event) => {
+      // cmd+k or ctrl+k focuses search bar,
+      // unless already focused on an input field
+      const holdingCtrlCmd = (navigator.userAgent.includes('Mac') && event.metaKey) || event.ctrlKey;
+      if (holdingCtrlCmd && event.key === 'k' && document.activeElement.tagName.toLowerCase() !== 'input') {
+        event.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
 
-    // if currently focused on search input,
-    // activates the chatbot modal
-    if (event.target.isSameNode(inputRef.current) && event.key === '/') {
-      event.preventDefault();
-      setIsOpen(false);
-      return menuRef.current?.select(1);
-    }
-  }, []);
+      // if currently focused on search input and on English site (therefore, chatbot is an option),
+      // activates the chatbot modal
+      if (event.target.isSameNode(inputRef.current) && event.key === '/' && isEnglish) {
+        event.preventDefault();
+        setIsOpen(false);
+        return menuRef.current?.select(1);
+      }
+    },
+    [isEnglish]
+  );
 
   // adding keyboard shortcuts document wide
   useEffect(() => {
@@ -164,7 +170,7 @@ const SearchInput = ({ className, slug }) => {
       }
 
       case keyMap.ArrowDown: {
-        if (isOpen) {
+        if (isOpen && isEnglish) {
           setSelectedOption((selectedOption + 1) % 2);
           inputRef.current?.focus();
           e.preventDefault();
@@ -173,7 +179,7 @@ const SearchInput = ({ className, slug }) => {
       }
 
       case keyMap.ArrowUp: {
-        if (isOpen) {
+        if (isOpen && isEnglish) {
           setSelectedOption(Math.abs(selectedOption - (1 % 2)));
           inputRef.current?.focus();
           e.preventDefault();
diff --git a/src/components/ActionBar/SearchMenu.js b/src/components/ActionBar/SearchMenu.js
index 77d2d8b83..addb57852 100644
--- a/src/components/ActionBar/SearchMenu.js
+++ b/src/components/ActionBar/SearchMenu.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useAllDocsets } from '../../hooks/useAllDocsets';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import { assertTrailingSlash } from '../../utils/assert-trailing-slash';
-import { localizePath } from '../../utils/locale';
+import { getCurrLocale, localizePath } from '../../utils/locale';
 import { reportAnalytics } from '../../utils/report-analytics';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { suggestionStyling } from './styles';
@@ -22,6 +22,7 @@ const SearchMenu = forwardRef(function SearchMenu({ searchValue, searchBoxRef, i
   const { project } = useSnootyMetadata();
   const docsets = useAllDocsets();
   const { snootyEnv } = useSiteMetadata();
+  const locale = getCurrLocale();
 
   // get search url for staging and prod environments
   // all other environments will fall back to prod
@@ -83,33 +84,36 @@ const SearchMenu = forwardRef(function SearchMenu({ searchValue, searchBoxRef, i
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
+  const searchOptions = useMemo(() => {
+    const useChatbot = !!conversation.conversationId && locale === 'en-us';
+    return SEARCH_SUGGESTIONS.slice(0, useChatbot ? SEARCH_SUGGESTIONS.length : 1);
+  }, [conversation, locale]);
+
   return (
     <>
       <SearchResultsMenu open={isOpen} refEl={searchBoxRef} ref={menuRef}>
-        {SEARCH_SUGGESTIONS.slice(0, !conversation.conversationId ? 1 : SEARCH_SUGGESTIONS.length).map(
-          (suggestion, i) => {
-            const { copy } = suggestion;
-            const isChatbot = i === 1;
-            return (
-              <SearchResult
-                className={cx(suggestionStyling({ copy }))}
-                key={`result-${i}`}
-                id={`result-${i}`}
-                onClick={async () => handleSearchResultClick(i === 1)}
-                highlighted={selectedOption === i}
-              >
-                {!isChatbot && <>{searchValue}</>}
-                {isChatbot && (
-                  <>
-                    {suggestion.icon}
-                    {searchValue}
-                    {suggestion.shortcutIcon}
-                  </>
-                )}
-              </SearchResult>
-            );
-          }
-        )}
+        {searchOptions.map((suggestion, i) => {
+          const { copy } = suggestion;
+          const isChatbot = i === 1;
+          return (
+            <SearchResult
+              className={cx(suggestionStyling({ copy }))}
+              key={`result-${i}`}
+              id={`result-${i}`}
+              onClick={async () => handleSearchResultClick(i === 1)}
+              highlighted={selectedOption === i}
+            >
+              {!isChatbot && <>{searchValue}</>}
+              {isChatbot && (
+                <>
+                  {suggestion.icon}
+                  {searchValue}
+                  {suggestion.shortcutIcon}
+                </>
+              )}
+            </SearchResult>
+          );
+        })}
       </SearchResultsMenu>
       <ModalView
         inputBottomText={

From 5ca5e232dd8854decf66bca70c42ddea5b8475d3 Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Tue, 17 Sep 2024 14:55:29 -0400
Subject: [PATCH 5/5] DOP-4941: Allow fonts for hidden languages to work
 without feature flag (#1239)

---
 gatsby-ssr.js                                 |  7 +-
 src/components/DocumentBody.js                | 14 +--
 src/components/Footer.js                      |  4 +-
 src/components/Header/index.js                |  4 +-
 src/components/Sidenav/Sidenav.js             | 14 +--
 src/constants.js                              |  4 +
 src/layouts/index.js                          |  3 +
 .../head-scripts/redirect-based-on-lang.js    |  1 +
 src/utils/locale.js                           | 85 ++++++++++++++-----
 tests/unit/Head.test.js                       |  4 +-
 tests/unit/utils/locale.test.js               | 15 +++-
 11 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index c9533d8a3..0ff7d91a4 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -5,8 +5,9 @@ import { renderToString } from 'react-dom/server';
 import { theme } from './src/theme/docsTheme';
 import EuclidCircularASemiBold from './src/styles/fonts/EuclidCircularA-Semibold-WebXL.woff';
 import redirectBasedOnLang from './src/utils/head-scripts/redirect-based-on-lang';
+import { getHtmlLangFormat } from './src/utils/locale';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setHtmlAttributes }) => {
   const headComponents = [
     // GTM Pathway
     <script
@@ -84,6 +85,10 @@ export const onRenderBody = ({ setHeadComponents }) => {
       />
     );
   }
+  setHtmlAttributes({
+    // Help work with translated content locally; Smartling should handle rewriting the lang
+    lang: process.env.GATSBY_LOCALE ? getHtmlLangFormat(process.env.GATSBY_LOCALE) : 'en',
+  });
   setHeadComponents(headComponents);
 };
 
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index b50009310..5eaa18311 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -1,7 +1,6 @@
 import React, { useState, lazy } from 'react';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
-import { Global, css } from '@emotion/react';
 import { ImageContextProvider } from '../context/image-context';
 import { usePresentationMode } from '../hooks/use-presentation-mode';
 import { useCanonicalUrl } from '../hooks/use-canonical-url';
@@ -11,11 +10,11 @@ import { getMetaFromDirective } from '../utils/get-meta-from-directive';
 import { getPlaintext } from '../utils/get-plaintext';
 import { getTemplate } from '../utils/get-template';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
-import { getCurrentLocaleFontFamilyValue } from '../utils/locale';
 import { getSiteTitle } from '../utils/get-site-title';
 import { PageContext } from '../context/page-context';
 import { useBreadcrumbs } from '../hooks/use-breadcrumbs';
 import { isBrowser } from '../utils/is-browser';
+import { TEMPLATE_CONTAINER_ID } from '../constants';
 import Widgets from './Widgets';
 import SEO from './SEO';
 import FootnoteContext from './Footnote/footnote-context';
@@ -80,8 +79,6 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => {
   return index > numAnonRefs ? [] : [`id${index + 1}`];
 };
 
-const fontFamily = getCurrentLocaleFontFamilyValue();
-
 const DocumentBody = (props) => {
   const { location, data, pageContext } = props;
   const page = data?.page?.ast;
@@ -152,7 +149,7 @@ const DocumentBody = (props) => {
             <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
               <FootnoteContext.Provider value={{ footnotes }}>
                 <PageContext.Provider value={{ page, template, slug, options: page?.options, tabsMainColumn }}>
-                  <div id="template-container">
+                  <div id={TEMPLATE_CONTAINER_ID}>
                     <Template {...props} useChatbot={useChatbot}>
                       {pageNodes.map((child, index) => (
                         <ComponentFactory
@@ -179,13 +176,6 @@ const DocumentBody = (props) => {
           </SuspenseHelper>
         </div>
       )}
-      <Global
-        styles={css`
-          #template-container *:not(:is(code, code *)) {
-            font-family: ${fontFamily};
-          }
-        `}
-      />
     </>
   );
 };
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 079208dc3..77e884dc4 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { UnifiedFooter } from '@mdb/consistent-nav';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../utils/locale';
+import { getAvailableLanguages, getCurrLocale, onSelectLocale } from '../utils/locale';
 
 const Footer = () => {
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
+  const enabledLocales = getAvailableLanguages().map((language) => language.localeCode);
   return <UnifiedFooter onSelectLocale={onSelectLocale} locale={getCurrLocale()} enabledLocales={enabledLocales} />;
 };
 
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 9bbed804e..7363f0e1a 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -5,7 +5,7 @@ import { UnifiedNav } from '@mdb/consistent-nav';
 import { SidenavMobileMenuDropdown } from '../Sidenav';
 import SiteBanner from '../Banner/SiteBanner';
 import { theme } from '../../theme/docsTheme';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../../utils/locale';
+import { getAvailableLanguages, getCurrLocale, onSelectLocale } from '../../utils/locale';
 import { HeaderContext } from './header-context';
 
 const StyledHeaderContainer = styled.header(
@@ -21,7 +21,7 @@ const StyledHeaderContainer = styled.header(
 const Header = ({ sidenav, eol, template }) => {
   const unifiedNavProperty = 'DOCS';
 
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
+  const enabledLocales = getAvailableLanguages().map((language) => language.localeCode);
   const { bannerContent } = useContext(HeaderContext);
 
   return (
diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js
index e03c763f4..6b141503e 100644
--- a/src/components/Sidenav/Sidenav.js
+++ b/src/components/Sidenav/Sidenav.js
@@ -16,7 +16,7 @@ import { formatText } from '../../utils/format-text';
 import { TocContext } from '../../context/toc-context';
 import { VersionContext } from '../../context/version-context';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
-import { getCurrentLocaleFontFamilyValue } from '../../utils/locale';
+import { SIDE_NAV_CONTAINER_ID } from '../../constants';
 import GuidesLandingTree from './GuidesLandingTree';
 import GuidesTOCTree from './GuidesTOCTree';
 import IA from './IA';
@@ -30,8 +30,6 @@ import DocsHomeButton from './DocsHomeButton';
 
 const SIDENAV_WIDTH = 268;
 
-const fontFamily = getCurrentLocaleFontFamilyValue();
-
 // Use LG's css here to style the component without passing props
 const sideNavStyling = ({ hideMobile, isCollapsed }) => LeafyCSS`
   height: 100%;
@@ -76,12 +74,6 @@ const disableScroll = (shouldDisableScroll) => css`
   }
 `;
 
-const translatedFontFamilyStyles = css`
-  #side-nav-1 * {
-    font-family: ${fontFamily};
-  }
-`;
-
 // use eol status to determine side nav styling
 const getTopAndHeight = (topValue, template) => css`
   ${template === 'landing'
@@ -248,10 +240,10 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, slug, eol })
     <>
       <Global
         styles={css`
-          ${disableScroll(!hideMobile)} ${translatedFontFamilyStyles}
+          ${disableScroll(!hideMobile)}
         `}
       />
-      <SidenavContainer {...topValues} template={template}>
+      <SidenavContainer {...topValues} template={template} id={SIDE_NAV_CONTAINER_ID}>
         <SidenavMobileTransition hideMobile={hideMobile} isMobile={isMobile}>
           <LeafygreenSideNav
             aria-label="Side navigation"
diff --git a/src/constants.js b/src/constants.js
index 90ddb2e55..25d981dd0 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,3 +1,7 @@
+// Append "docs" to the beginning of SIDE_NAV_CONTAINER_ID due to differentiate from LG's internal side-nav-container testid
+export const SIDE_NAV_CONTAINER_ID = 'docs-side-nav-container';
+export const TEMPLATE_CONTAINER_ID = 'template-container';
+
 export const REF_TARGETS = {
   'compass-index': 'https://www.mongodb.com/docs/compass/current/#compass-index',
   'document-dot-notation': 'https://www.mongodb.com/docs/manual/core/document/#document-dot-notation',
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 71f5e4cdc..b87662f06 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -11,6 +11,7 @@ import { usePresentationMode } from '../hooks/use-presentation-mode';
 import { theme } from '../theme/docsTheme';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
 import { useRemoteMetadata } from '../hooks/use-remote-metadata';
+import { getAllLocaleCssStrings } from '../utils/locale';
 
 // TODO: Delete this as a part of the css cleanup
 // Currently used to preserve behavior and stop legacy css
@@ -24,6 +25,8 @@ const footerOverrides = css`
 `;
 
 const globalCSS = css`
+  ${getAllLocaleCssStrings()}
+
   body {
     font-size: 16px;
     line-height: 24px;
diff --git a/src/utils/head-scripts/redirect-based-on-lang.js b/src/utils/head-scripts/redirect-based-on-lang.js
index 4af642e73..7e3fa5b2a 100644
--- a/src/utils/head-scripts/redirect-based-on-lang.js
+++ b/src/utils/head-scripts/redirect-based-on-lang.js
@@ -9,6 +9,7 @@ function redirectBasedOnLang() {
     const storedPrefLocale = JSON.parse(localStorage.getItem('mongodb-docs'))?.['preferredLocale'];
 
     // Based on locale utils; couldn't figure out how to use imports due to how webpack attempts to resolve them
+    // PLEASE make sure this matches the AVAILABLE_LANGUAGES object, excluding English and other hidden languages
     const supportedLocaleCodes = ['zh-cn', 'ko-kr', 'pt-br'];
     const isEnglishSite = !supportedLocaleCodes.find((localeCode) =>
       window.location.pathname.startsWith('/' + localeCode)
diff --git a/src/utils/locale.js b/src/utils/locale.js
index 1a45a95a6..af5dad21d 100644
--- a/src/utils/locale.js
+++ b/src/utils/locale.js
@@ -1,4 +1,5 @@
 import { withPrefix } from 'gatsby';
+import { SIDE_NAV_CONTAINER_ID, TEMPLATE_CONTAINER_ID } from '../constants';
 import { assertTrailingSlash } from './assert-trailing-slash';
 import { isBrowser } from './is-browser';
 import { normalizePath } from './normalize-path';
@@ -17,19 +18,32 @@ export const STORAGE_KEY_PREF_LOCALE = 'preferredLocale';
 // Update this as more languages are introduced
 // Because the client-side redirect script cannot use an import, PLEASE remember to update the list of supported languages
 // in redirect-based-on-lang.js
-export const AVAILABLE_LANGUAGES = [
+const AVAILABLE_LANGUAGES = [
   { language: 'English', localeCode: 'en-us' },
-  { language: '简体中文', localeCode: 'zh-cn' },
-  { language: '한국어', localeCode: 'ko-kr' },
+  { language: '简体中文', localeCode: 'zh-cn', fontFamily: 'Noto Sans SC' },
+  { language: '한국어', localeCode: 'ko-kr', fontFamily: 'Noto Sans KR' },
   { language: 'Português', localeCode: 'pt-br' },
 ];
 
-if (process.env.GATSBY_FEATURE_SHOW_HIDDEN_LOCALES === 'true') {
-  AVAILABLE_LANGUAGES.push({ language: '日本語', localeCode: 'ja-jp' });
-}
+// Languages in current development that we do not want displayed publicly yet
+const HIDDEN_LANGUAGES = [{ language: '日本語', localeCode: 'ja-jp', fontFamily: 'Noto Sans JP' }];
+
+/**
+ * @param {boolean} forceAll - Bypasses feature flag requirements if necessary
+ * @returns An array of languages supported for translation
+ */
+export const getAvailableLanguages = (forceAll = false) => {
+  const langs = [...AVAILABLE_LANGUAGES];
+
+  if (forceAll || process.env.GATSBY_FEATURE_SHOW_HIDDEN_LOCALES === 'true') {
+    langs.push(...HIDDEN_LANGUAGES);
+  }
+
+  return langs;
+};
 
 const validateLocaleCode = (potentialCode) =>
-  !!AVAILABLE_LANGUAGES.find(({ localeCode }) => potentialCode === localeCode);
+  !!getAvailableLanguages().find(({ localeCode }) => potentialCode === localeCode);
 
 /**
  * Strips the first locale code found in the slug. This function should be used to determine the original un-localized path of a page.
@@ -60,21 +74,30 @@ const stripLocale = (slug) => {
   }
 };
 
-/**
- * Returns the font-family name or undefined as a value based on the locale code
- * returned from getCurrentLocale, undefined to tell CSS to ignore this and work as
- * normal and use LG's styles.
- *
- * This is currently for overriding font-family from LG.
- */
-export const getCurrentLocaleFontFamilyValue = () => {
-  const fontFamilyMap = {
-    'zh-cn': 'Noto Sans SC',
-    'ko-kr': 'Noto Sans KR',
-    'ja-jp': 'Noto Sans JP',
-  };
-  const locale = getCurrLocale();
-  return fontFamilyMap[locale] ? `${fontFamilyMap[locale]}` : undefined;
+export const getAllLocaleCssStrings = () => {
+  const strings = [];
+  // We want to bypass feature flag requirements to ensure fonts for hidden languages are always included
+  const allLangs = getAvailableLanguages(true);
+
+  allLangs.forEach(({ localeCode, fontFamily }) => {
+    if (!fontFamily) {
+      return;
+    }
+    const [languageCode] = localeCode.split('-');
+    // Only check that languageCode is in the beginning to be flexible when region code is capitalized
+    // For example: zh-cn and zh-CN will be treated the same.
+    // We want to target everything except for inline code, code blocks, and the consistent-nav components
+    strings.push(`
+      html[lang^=${languageCode}] {
+        #${TEMPLATE_CONTAINER_ID} *:not(:is(code, code *)),
+        #${SIDE_NAV_CONTAINER_ID} * {
+          font-family: ${fontFamily};
+        }
+      }
+    `);
+  });
+
+  return strings;
 };
 
 /**
@@ -136,7 +159,7 @@ export const getLocaleMapping = (siteUrl, slug) => {
   const normalizedSiteUrl = siteUrl?.endsWith('/') ? siteUrl.slice(0, -1) : siteUrl;
   const localeHrefMap = {};
 
-  AVAILABLE_LANGUAGES.forEach(({ localeCode }) => {
+  getAvailableLanguages().forEach(({ localeCode }) => {
     const localizedPath = localizePath(slugForUrl, localeCode);
     const targetUrl = normalizedSiteUrl + localizedPath;
     localeHrefMap[localeCode] = assertTrailingSlash(targetUrl);
@@ -151,3 +174,19 @@ export const onSelectLocale = (locale) => {
   const localizedPath = localizePath(location.pathname, locale);
   window.location.href = localizedPath;
 };
+
+/**
+ * Ensures that a locale code has an all lowercase language code with an all uppercase region code,
+ * as described in https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#region_subtag.
+ * @param {string} localeCode - A valid locale code with either 1 or 2 parts. Example: `zh-cn` or `zh`
+ * @returns {string | undefined}
+ */
+export const getHtmlLangFormat = (localeCode) => {
+  const parts = localeCode.split('-');
+  if (parts.length < 2) {
+    return localeCode;
+  }
+
+  const [langCode, regionCode] = parts;
+  return `${langCode.toLowerCase()}-${regionCode.toUpperCase()}`;
+};
diff --git a/tests/unit/Head.test.js b/tests/unit/Head.test.js
index 3c5a3ecb2..bd43506c0 100644
--- a/tests/unit/Head.test.js
+++ b/tests/unit/Head.test.js
@@ -4,7 +4,7 @@ import { Head } from '../../src/components/DocumentBody';
 import mockStaticQuery from '../utils/mockStaticQuery';
 import * as siteMetadata from '../../src/hooks/use-site-metadata';
 import useSnootyMetadata from '../../src/utils/use-snooty-metadata';
-import { AVAILABLE_LANGUAGES } from '../../src/utils/locale';
+import { getAvailableLanguages } from '../../src/utils/locale';
 import { DOTCOM_BASE_URL } from '../../src/utils/base-url';
 import mockCompleteEOLPageContext from './data/CompleteEOLPageContext.json';
 import mockEOLSnootyMetadata from './data/EOLSnootyMetadata.json';
@@ -223,7 +223,7 @@ describe('Head', () => {
       const mockData = { ...mockHeadPageContext.data };
       const { container } = render(<Head pageContext={mockPageContext} data={mockData} />);
       const hrefLangLinks = container.querySelectorAll('link.sl_opaque');
-      expect(hrefLangLinks).toHaveLength(AVAILABLE_LANGUAGES.length);
+      expect(hrefLangLinks).toHaveLength(getAvailableLanguages().length);
       expect(hrefLangLinks).toMatchSnapshot();
     });
   });
diff --git a/tests/unit/utils/locale.test.js b/tests/unit/utils/locale.test.js
index 45f52058b..518ec5343 100644
--- a/tests/unit/utils/locale.test.js
+++ b/tests/unit/utils/locale.test.js
@@ -1,4 +1,4 @@
-import { AVAILABLE_LANGUAGES, getLocaleMapping, localizePath } from '../../../src/utils/locale';
+import { getAvailableLanguages, getHtmlLangFormat, getLocaleMapping, localizePath } from '../../../src/utils/locale';
 
 describe('getLocaleMapping', () => {
   it.each([
@@ -7,7 +7,7 @@ describe('getLocaleMapping', () => {
     ['https://www.mongodb.com', 'introduction'],
   ])('returns a valid mapping of URLs', (siteUrl, slug) => {
     const mapping = getLocaleMapping(siteUrl, slug);
-    expect(Object.keys(mapping)).toHaveLength(AVAILABLE_LANGUAGES.length);
+    expect(Object.keys(mapping)).toHaveLength(getAvailableLanguages().length);
     expect(mapping).toMatchSnapshot();
   });
 });
@@ -77,3 +77,14 @@ describe('localizePath', () => {
     expect(res).toEqual(expectedRes);
   });
 });
+
+describe('getHtmlLangFormat', () => {
+  it.each([
+    ['zh-cn', 'zh-CN'],
+    ['zh-CN', 'zh-CN'],
+    ['zh', 'zh'],
+  ])('transforms %s into %s', (input, expectedRes) => {
+    const res = getHtmlLangFormat(input);
+    expect(res).toEqual(expectedRes);
+  });
+});