diff --git a/src/components/Instruqt.js b/src/components/Instruqt/index.js
similarity index 85%
rename from src/components/Instruqt.js
rename to src/components/Instruqt/index.js
index 5d671b466..b1b6e296f 100644
--- a/src/components/Instruqt.js
+++ b/src/components/Instruqt/index.js
@@ -1,8 +1,9 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useContext } from 'react';
import { css } from '@emotion/react';
import IconButton from '@leafygreen-ui/icon-button';
import Icon from '@leafygreen-ui/icon';
-import { theme } from '../theme/docsTheme';
+import { theme } from '../../theme/docsTheme';
+import { InstruqtContext } from './instruqt-context';
const controlsStyle = css`
width: 100%;
@@ -19,10 +20,12 @@ const controlsStyle = css`
const Instruqt = ({ nodeData: { argument }, nodeData }) => {
const embedValue = argument[0].value;
const iframeRef = useRef(null);
+ const { setIsOpen } = useContext(InstruqtContext);
const onFullScreen = useCallback(() => {
if (iframeRef) {
const element = iframeRef.current;
+ setIsOpen(true);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
@@ -33,7 +36,7 @@ const Instruqt = ({ nodeData: { argument }, nodeData }) => {
element.webkitRequestFullscreen();
}
}
- }, [iframeRef]);
+ }, [iframeRef, setIsOpen]);
if (!embedValue) {
return null;
diff --git a/src/components/Instruqt/instruqt-context.js b/src/components/Instruqt/instruqt-context.js
new file mode 100644
index 000000000..d530a0a90
--- /dev/null
+++ b/src/components/Instruqt/instruqt-context.js
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+const defaultContextValue = {
+ hasLab: false,
+ isOpen: false,
+ setIsOpen: () => {},
+};
+
+const InstruqtContext = React.createContext(defaultContextValue);
+
+const InstruqtProvider = ({ children, hasInstruqtLab }) => {
+ const hasLab = hasInstruqtLab;
+ const [isOpen, setIsOpen] = useState(false);
+
+ return {children};
+};
+
+InstruqtProvider.defaultProps = {
+ hasInstruqtLab: false,
+};
+
+export { InstruqtContext, InstruqtProvider };
diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js
index a2a13773a..b9a2f5e98 100644
--- a/src/components/RootProvider.js
+++ b/src/components/RootProvider.js
@@ -8,11 +8,21 @@ import { SidenavContextProvider } from './Sidenav';
import { TabProvider } from './Tabs/tab-context';
import { ContentsProvider } from './Contents/contents-context';
import { SearchContextProvider } from './SearchResults/SearchContext';
+import { InstruqtProvider } from './Instruqt/instruqt-context';
// Check for feature flag here to make it easier to pass down for testing purposes
const SHOW_FACETS = process.env.GATSBY_FEATURE_FACETED_SEARCH === 'true';
-const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, remoteMetadata, project }) => {
+const RootProvider = ({
+ children,
+ headingNodes,
+ selectors,
+ slug,
+ repoBranches,
+ hasInstruqtLab,
+ remoteMetadata,
+ project,
+}) => {
let providers = (
@@ -20,7 +30,9 @@ const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, r
- {children}
+
+ {children}
+
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 28595fe47..0e2211669 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -103,6 +103,7 @@ const DefaultLayout = ({ children, pageContext: { page, slug, repoBranches, temp
selectors={page?.options?.selectors}
remoteMetadata={remoteMetadata}
project={project}
+ hasInstruqtLab={page?.options?.instruqt}
>
{!isInPresentationMode ? : }
diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
index 5b82968a3..af9a2ddf5 100644
--- a/src/layouts/preview-layout.js
+++ b/src/layouts/preview-layout.js
@@ -154,6 +154,7 @@ const DefaultLayout = ({
associatedReposInfo={associatedReposInfo}
headingNodes={page?.options?.headings}
selectors={page?.options?.selectors}
+ hasInstruqtLab={page?.options?.instruqt}
isAssociatedProduct={isAssociatedProduct}
>