docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.3

package/lib/theme/ApiDemoPanel/Body/slice.js

@@ -1,25 +1,29 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.slice = exports.setStringRawBody = exports.setStringFormBody = exports.setFileRawBody = exports.setFileFormBody = exports.default = exports.clearRawBody = exports.clearFormBodyKey = void 0;
-var _toolkit = require("@reduxjs/toolkit");
 /* ============================================================================
  * 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.
  * ========================================================================== */
-
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFileFormBody =
+  exports.setStringFormBody =
+  exports.clearFormBodyKey =
+  exports.setFileRawBody =
+  exports.setStringRawBody =
+  exports.clearRawBody =
+  exports.slice =
+    void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
 const initialState = {};
-const slice = (0, _toolkit.createSlice)({
+exports.slice = (0, toolkit_1.createSlice)({
   name: "body",
   initialState,
   reducers: {
-    clearRawBody: _state => {
+    clearRawBody: (_state) => {
       return {
-        type: "empty"
+        type: "empty",
       };
     },
     setStringRawBody: (_state, action) => {
@@ -27,8 +31,8 @@ const slice = (0, _toolkit.createSlice)({
         type: "raw",
         content: {
           type: "string",
-          value: action.payload
-        }
+          value: action.payload,
+        },
       };
     },
     setFileRawBody: (_state, action) => {
@@ -36,67 +40,58 @@ const slice = (0, _toolkit.createSlice)({
         type: "raw",
         content: {
           type: "file",
-          value: action.payload
-        }
+          value: action.payload,
+        },
       };
     },
     clearFormBodyKey: (state, action) => {
-      if ((state === null || state === void 0 ? void 0 : state.type) === "form") {
+      if (state?.type === "form") {
         delete state.content[action.payload];
       }
     },
     setStringFormBody: (state, action) => {
-      if ((state === null || state === void 0 ? void 0 : state.type) !== "form") {
+      if (state?.type !== "form") {
         return {
           type: "form",
           content: {
             [action.payload.key]: {
               type: "string",
-              value: action.payload.value
-            }
-          }
+              value: action.payload.value,
+            },
+          },
         };
       }
       state.content[action.payload.key] = {
         type: "string",
-        value: action.payload.value
+        value: action.payload.value,
       };
       return state;
     },
     setFileFormBody: (state, action) => {
-      if ((state === null || state === void 0 ? void 0 : state.type) !== "form") {
+      if (state?.type !== "form") {
         return {
           type: "form",
           content: {
             [action.payload.key]: {
               type: "file",
-              value: action.payload.value
-            }
-          }
+              value: action.payload.value,
+            },
+          },
         };
       }
       state.content[action.payload.key] = {
         type: "file",
-        value: action.payload.value
+        value: action.payload.value,
       };
       return state;
-    }
-  }
+    },
+  },
 });
-exports.slice = slice;
-const {
-  clearRawBody,
-  setStringRawBody,
-  setFileRawBody,
-  clearFormBodyKey,
-  setStringFormBody,
-  setFileFormBody
-} = slice.actions;
-exports.setFileFormBody = setFileFormBody;
-exports.setStringFormBody = setStringFormBody;
-exports.clearFormBodyKey = clearFormBodyKey;
-exports.setFileRawBody = setFileRawBody;
-exports.setStringRawBody = setStringRawBody;
-exports.clearRawBody = clearRawBody;
-var _default = slice.reducer;
-exports.default = _default;
+(_a = exports.slice.actions),
+  (exports.clearRawBody = _a.clearRawBody),
+  (exports.setStringRawBody = _a.setStringRawBody),
+  (exports.setFileRawBody = _a.setFileRawBody),
+  (exports.clearFormBodyKey = _a.clearFormBodyKey),
+  (exports.setStringFormBody = _a.setStringFormBody),
+  (exports.setFileFormBody = _a.setFileFormBody);
+exports.default = exports.slice.reducer;

package/lib/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -1,233 +1,278 @@
+:root {
+  --bash-background-color: transparent;
+  --bash-border-radius: none;
+  --code-tab-logo-width: 24px;
+  --code-tab-logo-height: 24px;
+}
+
+[data-theme="dark"] {
+  --bash-background-color: lightgrey;
+  --bash-border-radius: 20px;
+}
+
+.openapi-tabs__code-container {
+  margin-bottom: 1rem;
+
+  &:not(.openapi-tabs__code-container-inner) {
+    padding: 1rem;
+    background-color: var(--ifm-pre-background);
+    border-radius: var(--ifm-global-radius);
+    border: 1px solid var(--openapi-demo-border-color);
+    box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+      0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+    transition: 300ms;
+
+    &:hover {
+      box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+        0 2px 3px hsla(222, 8%, 43%, 0.15),
+        0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+    }
+  }
+
+  .openapi-tabs__code-item {
+    display: flex;
+    flex-direction: column-reverse;
+    flex: 0 0 80px;
+    align-items: center;
+    padding: 0.5rem 0 !important;
+    margin-top: 0 !important;
+    margin-right: 0.5rem;
+    border: 1px solid transparent;
+    transition: 300ms;
+
+    &:not(.active):hover {
+      border: 1px solid var(--openapi-code-tab-border-color);
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    span {
+      padding-top: 0.5rem;
+      color: var(--ifm-font-color-secondary);
+      font-size: 10px;
+      text-transform: uppercase;
+    }
+  }
+}
+
 .openapi-tabs__code-list-container {
-  display: table-row-group;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.25rem;
+  padding-bottom: 0.6rem;
+}
+
+.openapi-tabs__code-content {
+  margin-top: unset !important;
+}
+
+.openapi-demo__code-block code {
+  max-height: 200px;
+  font-size: var(--openapi-demo-font-size-code);
+  padding-top: var(--ifm-pre-padding);
+}
+
+body[class="ReactModal__Body--open"] {
+  .openapi-demo__code-block code {
+    max-height: 600px;
+  }
 }
 
-.openapi-tabs__code-item {
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+.openapi-tabs__code-item--variant {
+  color: var(--ifm-color-secondary);
 
   &.active {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-color: var(--ifm-toc-border-color);
   }
 }
 
+.openapi-tabs__code-item--variant > span {
+  padding-top: unset !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
+    border-color: var(--openapi-code-tab-border-color-python);
   }
 }
 
-.language-python {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--go {
   color: var(--ifm-color-info);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-info);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-go);
+    border-color: var(--openapi-code-tab-border-color-go);
   }
 }
 
-.language-go {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--javascript {
   color: var(--ifm-color-warning);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-js);
+    border-color: var(--openapi-code-tab-border-color-js);
   }
 }
 
-.language-javascript {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--bash {
   color: var(--ifm-color-danger);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg")
+      no-repeat;
     margin-block: auto;
+    background-color: var(--bash-background-color);
+    border-radius: var(--bash-border-radius);
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    border-color: var(--ifm-color-danger);
   }
 }
 
-.language-bash {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--ruby {
   color: var(--ifm-color-danger);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-ruby);
+    border-color: var(--openapi-code-tab-border-color-ruby);
   }
 }
 
-.language-ruby {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--csharp {
   color: var(--ifm-color-gray-500);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-csharp);
+    border-color: var(--openapi-code-tab-border-color-csharp);
   }
 }
 
-.language-csharp {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--nodejs {
   color: var(--ifm-color-success);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-nodejs);
+    border-color: var(--openapi-code-tab-border-color-nodejs);
   }
 }
 
-.language-nodejs {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--php {
   color: var(--ifm-color-gray-500);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-php);
+    border-color: var(--openapi-code-tab-border-color-php);
   }
 }
 
-.language-php {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--java {
   color: var(--ifm-color-warning);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-java);
+    border-color: var(--openapi-code-tab-border-color-java);
   }
 }
 
-.language-powershell {
-  max-height: 500px;
-  overflow: auto;
-}
-
 .openapi-tabs__code-item--powershell {
   color: var(--ifm-color-info);
 
   &::after {
     content: "";
-    width: 28px;
-    height: 28px;
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-powershell);
+    border-color: var(--openapi-code-tab-border-color-powershell);
   }
 }
 
@@ -236,3 +281,11 @@
     justify-content: space-around;
   }
 }
+
+.ReactModal__Body--open {
+  overflow: hidden !important;
+}
+
+.openapi-modal--open {
+  background-color: rgba(0, 0, 0, 0.7) !important;
+}

package/lib/theme/ApiDemoPanel/CodeTabs/index.js

@@ -17,6 +17,8 @@ import clsx from "clsx";
 
 function TabList({
   action,
+  currentLanguage,
+  includeVariant,
   className,
   block,
   selectedValue,
@@ -38,10 +40,20 @@ function TabList({
     }
 
     if (action) {
-      const newLanguage = languageSet.filter(
-        (lang) => lang.language === newTabValue
-      );
-      action(newLanguage[0]);
+      let newLanguage;
+      if (currentLanguage && includeVariant) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.variant = newTabValue;
+        action.setSelectedVariant(newTabValue.toLowerCase());
+      } else {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === newTabValue
+        )[0];
+        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+      }
+      action.setLanguage(newLanguage);
     }
   };
 
@@ -101,7 +113,7 @@ function TabList({
             }
           )}
         >
-          {label ?? value}
+          <span>{label ?? value}</span>
         </li>
       ))}
     </ul>
@@ -122,7 +134,7 @@ function TabContent({ lazy, children, selectedValue }) {
     return cloneElement(selectedTabItem, { className: "margin-top--md" });
   }
   return (
-    <div className="margin-top--md">
+    <div className="margin-top--md openapi-tabs__code-content">
       {children.map((tabItem, i) =>
         cloneElement(tabItem, {
           key: i,
@@ -135,8 +147,14 @@ function TabContent({ lazy, children, selectedValue }) {
 
 function TabsComponent(props) {
   const tabs = useTabs(props);
+  const { className } = props;
+
   return (
-    <div className="tabs-container">
+    <div
+      className={clsx("tabs-container openapi-tabs__code-container", {
+        [className]: className,
+      })}
+    >
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

package/lib/theme/ApiDemoPanel/ContentType/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ContentType(): JSX.Element | null;
+export default ContentType;

package/lib/theme/ApiDemoPanel/ContentType/index.js

@@ -1,32 +1,40 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _FormItem = _interopRequireDefault(require("@theme/ApiDemoPanel/FormItem"));
-var _FormSelect = _interopRequireDefault(require("@theme/ApiDemoPanel/FormSelect"));
-var _hooks = require("@theme/ApiItem/hooks");
-var _slice = require("./slice");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * 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.
  * ========================================================================== */
-
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const FormItem_1 = __importDefault(require("@theme/ApiDemoPanel/FormItem"));
+const FormSelect_1 = __importDefault(require("@theme/ApiDemoPanel/FormSelect"));
+const hooks_1 = require("@theme/ApiItem/hooks");
+const slice_1 = require("./slice");
 function ContentType() {
-  const value = (0, _hooks.useTypedSelector)(state => state.contentType.value);
-  const options = (0, _hooks.useTypedSelector)(state => state.contentType.options);
-  const dispatch = (0, _hooks.useTypedDispatch)();
+  const value = (0, hooks_1.useTypedSelector)(
+    (state) => state.contentType.value
+  );
+  const options = (0, hooks_1.useTypedSelector)(
+    (state) => state.contentType.options
+  );
+  const dispatch = (0, hooks_1.useTypedDispatch)();
   if (options.length <= 1) {
     return null;
   }
-  return <_FormItem.default label="Content-Type">
-      <_FormSelect.default value={value} options={options} onChange={e => dispatch((0, _slice.setContentType)(e.target.value))} />
-    </_FormItem.default>;
+  return react_1.default.createElement(
+    FormItem_1.default,
+    { label: "Content-Type" },
+    react_1.default.createElement(FormSelect_1.default, {
+      value: value,
+      options: options,
+      onChange: (e) => dispatch((0, slice_1.setContentType)(e.target.value)),
+    })
+  );
 }
-var _default = ContentType;
-exports.default = _default;
+exports.default = ContentType;

package/lib/theme/ApiDemoPanel/ContentType/slice.d.ts

@@ -0,0 +1,11 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+export interface State {
+    value: string;
+    options: string[];
+}
+export declare const slice: import("@reduxjs/toolkit").Slice<State, {
+    setContentType: (state: import("immer/dist/internal").WritableDraft<State>, action: PayloadAction<string>) => void;
+}, "contentType">;
+export declare const setContentType: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "contentType/setContentType">;
+declare const _default: import("redux").Reducer<State, import("redux").AnyAction>;
+export default _default;