DOP-4973: Allow tabs/language selector to be added directly to the content

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,

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) => (

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>
         )}
       >

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}
           />
         );
       })}

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] }),
+  }));

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: {},

src/context/page-context.js

@@ -4,6 +4,7 @@ export const PageContext = createContext({
   page: null,
   template: null,
   slug: null,
+  tabsMainColumn: null,
   options: null,
 });
 

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>