diff --git a/src/components/Heading.js b/src/components/Heading.js index 534064fcb..71c1515c7 100644 --- a/src/components/Heading.js +++ b/src/components/Heading.js @@ -3,10 +3,13 @@ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { cx, css } from '@leafygreen-ui/emotion'; import { H2, H3, Subtitle, Body } from '@leafygreen-ui/typography'; +import Button from '@leafygreen-ui/button'; +import Icon from '@leafygreen-ui/icon'; import useScreenSize from '../hooks/useScreenSize'; 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'; @@ -21,6 +24,10 @@ const headingStyles = css` margin-bottom: 8px; `; +const labButtonStyling = css` + margin-left: 18px; +`; + const determineHeading = (sectionDepth) => { if (sectionDepth === 1) { return H2; @@ -39,7 +46,9 @@ const Heading = ({ sectionDepth, nodeData, page, ...rest }) => { const isPageTitle = sectionDepth === 1; const { isMobile, isTabletOrMobile } = useScreenSize(); const { selectors } = useContext(TabContext); + const { hasDrawer, isOpen, setIsOpen } = useContext(InstruqtContext); const hasSelectors = selectors && Object.keys(selectors).length > 0; + const shouldShowLabButton = process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && isPageTitle && hasDrawer; const shouldShowMobileHeader = !!(isPageTitle && isTabletOrMobile && hasSelectors); return ( @@ -62,6 +71,17 @@ const Heading = ({ sectionDepth, nodeData, page, ...rest }) => { return ; })} + {shouldShowLabButton && ( + + )} {isPageTitle && } diff --git a/src/components/Instruqt/index.js b/src/components/Instruqt/index.js index fc30760a3..a1be86703 100644 --- a/src/components/Instruqt/index.js +++ b/src/components/Instruqt/index.js @@ -23,7 +23,7 @@ const Instruqt = ({ nodeData }) => { const embedValue = nodeData?.argument[0]?.value; const title = nodeData?.options?.title; const iframeRef = useRef(null); - const { setIsOpen, hasLab } = useContext(InstruqtContext); + const { setIsOpen, isOpen, hasDrawer } = useContext(InstruqtContext); const onFullScreen = useCallback(() => { if (iframeRef) { @@ -47,10 +47,12 @@ const Instruqt = ({ nodeData }) => { return ( <> - {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasLab ? ( - <> - - + {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasDrawer ? ( + isOpen && ( + <> + + + ) ) : ( <> diff --git a/src/components/Instruqt/instruqt-context.js b/src/components/Instruqt/instruqt-context.js index d530a0a90..a3671cd06 100644 --- a/src/components/Instruqt/instruqt-context.js +++ b/src/components/Instruqt/instruqt-context.js @@ -1,22 +1,22 @@ import React, { useState } from 'react'; const defaultContextValue = { - hasLab: false, + hasDrawer: false, isOpen: false, setIsOpen: () => {}, }; const InstruqtContext = React.createContext(defaultContextValue); -const InstruqtProvider = ({ children, hasInstruqtLab }) => { - const hasLab = hasInstruqtLab; +const InstruqtProvider = ({ children, hasLabDrawer }) => { + const hasDrawer = hasLabDrawer; const [isOpen, setIsOpen] = useState(false); - return {children}; + return {children}; }; InstruqtProvider.defaultProps = { - hasInstruqtLab: false, + hasLabDrawer: false, }; export { InstruqtContext, InstruqtProvider }; diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js index b9a2f5e98..27c03785e 100644 --- a/src/components/RootProvider.js +++ b/src/components/RootProvider.js @@ -19,7 +19,7 @@ const RootProvider = ({ selectors, slug, repoBranches, - hasInstruqtLab, + hasLabDrawer, remoteMetadata, project, }) => { @@ -30,7 +30,7 @@ const RootProvider = ({ - + {children} diff --git a/src/layouts/index.js b/src/layouts/index.js index 0e2211669..56f618208 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -103,7 +103,7 @@ const DefaultLayout = ({ children, pageContext: { page, slug, repoBranches, temp selectors={page?.options?.selectors} remoteMetadata={remoteMetadata} project={project} - hasInstruqtLab={page?.options?.instruqt} + hasLabDrawer={page?.options?.instruqt} > {!isInPresentationMode ?
:
} diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js index af9a2ddf5..a09d3549b 100644 --- a/src/layouts/preview-layout.js +++ b/src/layouts/preview-layout.js @@ -154,7 +154,7 @@ const DefaultLayout = ({ associatedReposInfo={associatedReposInfo} headingNodes={page?.options?.headings} selectors={page?.options?.selectors} - hasInstruqtLab={page?.options?.instruqt} + hasLabDrawer={page?.options?.instruqt} isAssociatedProduct={isAssociatedProduct} > diff --git a/tests/unit/Instruqt.test.js b/tests/unit/Instruqt.test.js index 25a6cd763..19513f52f 100644 --- a/tests/unit/Instruqt.test.js +++ b/tests/unit/Instruqt.test.js @@ -34,7 +34,6 @@ describe('Instruqt', () => { const hasLabDrawer = true; const wrapper = renderComponent(mockData.example, hasLabDrawer); expect(wrapper.queryByTitle('Instruqt', { exact: false })).toBeTruthy(); - expect(wrapper.queryByText('MongoDB Interactive Lab')).toBeTruthy(); }); }); });