Add demo expand button modal

demo/docs/advanced.mdx

@@ -55,4 +55,4 @@ import BrowserWindow from '@site/src/components/BrowserWindow';
 <PetSchema />
 
 </BrowserWindow>
-```
+```

packages/docusaurus-theme-openapi-docs/src/theme-openapi.d.ts

@@ -279,6 +279,14 @@ declare module "@theme/ApiExplorer/ApiCodeBlock" {
   export default function ApiCodeBlock(): JSX.Element;
 }
 
+declare module "@theme/ApiExplorer/DemoExpandButton" {
+  import { Props as DemoExpandButtonProps } from "@theme/ApiExplorer/DemoExpandButton";
+
+  export default function DemoExpandButton(
+    props: DemoExpandButtonProps
+  ): JSX.Element;
+}
+
 declare module "@theme/ApiExplorer/Server/slice" {
   export default server as Reducer<State, AnyAction>;
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/DemoExpandButton/_DemoExpandButton.scss

@@ -0,0 +1,19 @@
+.openapi-explorer__demo-expand-modal-content {
+  padding: none;
+  border: thin solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-global-radius);
+  max-width: 95%;
+  width: 70vw;
+  height: 80vh;
+  overflow: auto;
+}
+
+.openapi-explorer__demo-expand-modal-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0px;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 201;
+}

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/DemoExpandButton/index.tsx

@@ -0,0 +1,94 @@
+/* ==========================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import React, { useEffect, useState } from "react";
+
+import { translate } from "@docusaurus/Translate";
+import ExitButton from "@theme/ApiExplorer/ApiCodeBlock/ExitButton";
+import Request from "@theme/ApiExplorer/Request";
+import Response from "@theme/ApiExplorer/Response";
+import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+import clsx from "clsx";
+import Modal from "react-modal";
+
+export interface Props {
+  readonly item: NonNullable<ApiItem>;
+  readonly className?: string;
+}
+
+export default function DemoExpandButton({
+  item,
+  className,
+}: Props): React.JSX.Element {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    Modal.setAppElement("body");
+  }, []);
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={
+          isModalOpen
+            ? translate({
+                id: "theme.Demo.expandButtonExpanded",
+                message: "Expanded",
+                description: "The expanded button label on demo panel",
+              })
+            : translate({
+                id: "theme.Demo.expandButtonAriaLabel",
+                message: "Expand demo to fullscreen",
+                description: "The ARIA label for expand demo button",
+              })
+        }
+        title={translate({
+          id: "theme.Demo.expand",
+          message: "Expand",
+          description: "The expand button label on demo panel",
+        })}
+        className={clsx(
+          "clean-btn",
+          className,
+          "openapi-explorer__demo-expand-btn"
+        )}
+        onClick={() => setIsModalOpen(true)}
+      >
+        <span
+          className="openapi-explorer__code-block-expand-btn-icons"
+          aria-hidden="true"
+        >
+          <svg
+            className="openapi-explorer__code-block-expand-btn-icon"
+            viewBox="0 0 448 512"
+          >
+            <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
+          </svg>
+        </span>
+      </button>
+      <Modal
+        className="openapi-explorer__demo-expand-modal-content"
+        overlayClassName="openapi-explorer__demo-expand-modal-overlay"
+        isOpen={isModalOpen}
+        onRequestClose={() => setIsModalOpen(false)}
+        contentLabel="API Demo"
+      >
+        <div className="openapi-explorer__demo-expand-modal-body">
+          <Request item={item} />
+          <Response item={item} />
+          <div className="openapi-explorer__code-block-btn-group">
+            <ExitButton
+              className="openapi-explorer__code-block-code-btn"
+              handler={() => setIsModalOpen(false)}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx

@@ -30,6 +30,7 @@ import * as sdk from "postman-collection";
 import { FormProvider, useForm } from "react-hook-form";
 
 import makeRequest from "./makeRequest";
+import DemoExpandButton from "@theme/ApiExplorer/DemoExpandButton";
 
 function Request({ item }: { item: ApiItem }) {
   const postman = new sdk.Request(item.postman);
@@ -194,6 +195,10 @@ function Request({ item }: { item: ApiItem }) {
               Expand all
             </span>
           )}
+          <DemoExpandButton
+            item={item}
+            className="openapi-explorer__code-block-code-btn"
+          />
         </div>
         <div className="openapi-explorer__details-outer-container">
           {showServerOptions && item.method !== "event" && (

packages/docusaurus-theme-openapi-docs/src/theme/styles.scss

@@ -17,6 +17,7 @@
 @use "./ApiExplorer/ParamOptions/ParamOptions";
 @use "./ApiExplorer/Request/Request";
 @use "./ApiExplorer/Response/Response";
+@use "./ApiExplorer/DemoExpandButton/DemoExpandButton";
 @use "./ApiExplorer/Server/Server";
 
 /* Api Demo Panel / ApiCodeBlock */