Merge branch 'main' into DOP-4616

mongodb · Sep 17, 2024 · ff46c6d · ff46c6d
2 parents c8eaf7c + 5ca5e23
commit ff46c6d
Show file tree

Hide file tree

Showing 50 changed files with 2,387 additions and 1,147 deletions.
diff --git 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
@@ -16,14 +17,6 @@ export const onRenderBody = ({ setHeadComponents }) => {
         __html: `!function(e,n){var t=document.createElement("script"),o=null,x="pathway";t.async=!0,t.src='https://'+x+'.mongodb.com/'+(e?x+'-debug.js':''),document.head.append(t),t.addEventListener("load",function(){o=window.pathway.default,(n&&o.configure(n)),o.createProfile("mongodbcom").load(),window.segment=o})}();`,
       }}
     />,
-    // Delighted
-    <script
-      key="delighted"
-      type="text/javascript"
-      dangerouslySetInnerHTML={{
-        __html: `!function(e,t,r,n){if(!e[n]){for(var a=e[n]=[],i=["survey","reset","config","init","set","get","event","identify","track","page","screen","group","alias"],s=0;s<i.length;s++){var c=i[s];a[c]=a[c]||function(e){return function(){var t=Array.prototype.slice.call(arguments);a.push([e,t])}}(c)}a.SNIPPET_VERSION="1.0.1";var o=t.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://d2yyd1h5u9mauk.cloudfront.net/integrations/web/v1/library/"+r+"/"+n+".js";var l=t.getElementsByTagName("script")[0];l.parentNode.insertBefore(o,l)}}(window,document,"Dk30CC86ba0nATlK","delighted");`,
-      }}
-    />,
     // Client-side redirect based on browser's language settings
     <script
       key="browser-lang-redirect"
@@ -92,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/Collapsible/index.js b/src/components/Collapsible/index.js
@@ -1,30 +1,34 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from '@gatsbyjs/reach-router';
 import Box from '@leafygreen-ui/box';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { cx } from '@leafygreen-ui/emotion';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Body } from '@leafygreen-ui/typography';
+import { findAllNestedAttribute } from '../../utils/find-all-nested-attribute';
+import { isBrowser } from '../../utils/is-browser';
 import { reportAnalytics } from '../../utils/report-analytics';
 import ComponentFactory from '../ComponentFactory';
 import Heading from '../Heading';
 import { collapsibleStyle, headerContainerStyle, headerStyle, iconStyle, innerContentStyle } from './styles';
 import './styles.css';
 
 const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   const { id, heading, sub_heading: subHeading } = options;
-  const [open, setOpen] = useState(false);
   const { hash } = useLocation();
-  const headingNodeData = useMemo(
-    () => ({
-      id,
-      children: [{ type: 'text', value: heading }],
-    }),
-    [heading, id]
-  );
+
+  // get a list of all ids in collapsible content
+  // in order to set collapsible open, if any are found in url hash
+  const childrenHashIds = useMemo(() => {
+    return findAllNestedAttribute(children, 'id');
+  }, [children]);
+
+  const [open, setOpen] = useState(false);
+  const headingNodeData = {
+    id,
+    children: [{ type: 'text', value: heading }],
+  };
 
   const onIconClick = useCallback(() => {
     reportAnalytics('CollapsibleClicked', {
@@ -34,12 +38,31 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
     setOpen(!open);
   }, [heading, open]);
 
+  // open the collapsible if the hash in URL is equal to collapsible heading id,
+  // or if the collapsible's children has the id
+  useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
+    const hashId = hash?.slice(1) ?? '';
+    if (id === hashId || childrenHashIds.includes(hashId)) {
+      return setOpen(true);
+    }
+  }, [childrenHashIds, hash, id]);
+
+  const rendered = useRef(false);
+
+  // on first open, scroll the child with the URL hash id into view
   useEffect(() => {
+    if (!open) return;
+    if (rendered.current) return;
+    rendered.current = true;
     const hashId = hash?.slice(1) ?? '';
-    if (id === hashId) {
-      setOpen(true);
+    if (childrenHashIds.includes(hashId)) {
+      const child = document?.querySelector(`#${hashId}`);
+      child && child.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' });
     }
-  }, [hash, id]);
+  }, [childrenHashIds, hash, open]);
 
   return (
     <Box className={cx('collapsible', collapsibleStyle)}>
@@ -50,11 +73,7 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
           </Heading>
           <Body baseFontSize={13}>{subHeading}</Body>
         </Box>
-        <IconButton
-          className={iconStyle(darkMode)}
-          aria-labelledby={'Expand the collapsed content'}
-          onClick={onIconClick}
-        >
+        <IconButton className={iconStyle} aria-labelledby={'Expand the collapsed content'} onClick={onIconClick}>
           <Icon glyph={open ? 'ChevronDown' : 'ChevronRight'} />
         </IconButton>
       </Box>

diff --git a/src/components/Collapsible/styles.js b/src/components/Collapsible/styles.js
@@ -26,16 +26,16 @@ export const headerStyle = css`
   margin-top: 0;
 `;
 
-export const iconStyle = (darkMode) => css`
+export const iconStyle = css`
   align-self: center;
   flex-shrink: 0;
-  ${!darkMode && `color: ${palette.gray.dark1}`}
 `;
 
 export const innerContentStyle = (open) => css`
   overflow: hidden;
   height: 0;
-  visibility: hidden;
+  color: --font-color-primary;
+
   ${open && `height: auto;`}
   ${open && `visibility: visible;`}
 `;
diff --git 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/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
@@ -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 SEO from './SEO';
 import FootnoteContext from './Footnote/footnote-context';
 import ComponentFactory from './ComponentFactory';
@@ -79,12 +78,11 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => {
   return index > numAnonRefs ? [] : [`id${index + 1}`];
 };
 
-const fontFamily = getCurrentLocaleFontFamilyValue();
-
 const DocumentBody = (props) => {
   const { 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) || [];
@@ -141,8 +139,8 @@ const DocumentBody = (props) => {
         <InstruqtProvider hasLabDrawer={page?.options?.instruqt}>
           <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
             <FootnoteContext.Provider value={{ footnotes }}>
-              <PageContext.Provider value={{ page, template, slug }}>
-                <div id="template-container">
+              <PageContext.Provider value={{ page, template, slug, options: page?.options, tabsMainColumn }}>
+                <div id={TEMPLATE_CONTAINER_ID}>
                   <Template {...props} useChatbot={useChatbot}>
                     {pageNodes.map((child, index) => (
                       <ComponentFactory
@@ -168,13 +166,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
@@ -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
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { UnifiedNav } from '@mdb/consistent-nav';
 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(
@@ -19,7 +19,7 @@ const StyledHeaderContainer = styled.header(
 const Header = ({ 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/Heading.js b/src/components/Heading.js
@@ -7,13 +7,15 @@ 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';
 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;
@@ -51,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);
 
@@ -62,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>
         )}
       >
@@ -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
@@ -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;