docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.651

package/lib/theme/ApiDemoPanel/ApiCodeBlock/Content/_Content.scss

@@ -15,6 +15,7 @@
 }
 
 .openapi-demo__code-block {
+  border-radius: var(--ifm-global-radius);
   --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;

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

@@ -3,6 +3,8 @@ import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/ty
 export interface Props {
     jsonRequestBodyExample: string;
     requestBodyMetadata?: RequestBodyObject;
+    methods?: any;
+    required?: boolean;
 }
-declare function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props): JSX.Element | null;
+declare function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample, methods, required, }: Props): JSX.Element | null;
 export default BodyWrap;

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

@@ -15,9 +15,6 @@ const react_1 = __importDefault(require("react"));
 const json2xml_1 = __importDefault(
   require("@theme/ApiDemoPanel/Body/json2xml")
 );
-const ContentType_1 = __importDefault(
-  require("@theme/ApiDemoPanel/ContentType")
-);
 const FormFileUpload_1 = __importDefault(
   require("@theme/ApiDemoPanel/FormFileUpload")
 );
@@ -32,7 +29,12 @@ const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
 const xml_formatter_1 = __importDefault(require("xml-formatter"));
 const slice_1 = require("./slice");
-function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
+function BodyWrap({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}) {
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
   );
@@ -42,21 +44,21 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (contentType === undefined) {
     return null;
   }
-  return react_1.default.createElement(
-    react_1.default.Fragment,
-    null,
-    react_1.default.createElement(ContentType_1.default, null),
-    react_1.default.createElement(Body, {
-      requestBodyMetadata: requestBodyMetadata,
-      jsonRequestBodyExample: jsonRequestBodyExample,
-    })
-  );
+  return react_1.default.createElement(Body, {
+    requestBodyMetadata: requestBodyMetadata,
+    jsonRequestBodyExample: jsonRequestBodyExample,
+    required: required,
+  });
 }
-function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
+function Body({
+  requestBodyMetadata,
+  jsonRequestBodyExample,
+  methods,
+  required,
+}) {
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
   );
-  const required = requestBodyMetadata?.required;
   const dispatch = (0, hooks_1.useTypedDispatch)();
   // Lot's of possible content-types:
   // - application/json
@@ -82,7 +84,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (schema?.format === "binary") {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      null,
       react_1.default.createElement(FormFileUpload_1.default, {
         placeholder: schema.description || "Body",
         onChange: (file) => {
@@ -107,17 +109,10 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   ) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      { className: "openapi-demo__form-item-body-container" },
       react_1.default.createElement(
         "div",
-        {
-          style: {
-            marginTop: "calc(var(--ifm-pre-padding) / 2)",
-            borderRadius: "4px",
-            padding: "var(--ifm-pre-padding)",
-            border: "1px solid var(--openapi-monaco-border-color)",
-          },
-        },
+        null,
         Object.entries(schema.properties ?? {}).map(([key, val]) => {
           if (val.format === "binary") {
             return react_1.default.createElement(
@@ -187,6 +182,9 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
                 Array.isArray(schema.required) && schema.required.includes(key),
             },
             react_1.default.createElement(FormTextInput_1.default, {
+              paramName: key,
+              isRequired:
+                Array.isArray(schema.required) && schema.required.includes(key),
               placeholder: val.description || key,
               onChange: (e) => {
                 dispatch(
@@ -277,7 +275,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (exampleBody) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      null,
       react_1.default.createElement(
         SchemaTabs_1.default,
         { className: "openapi-tabs__schema", lazy: true },
@@ -286,7 +284,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           { label: "Default", value: "default", default: true },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language },
+            { action: dispatch, language: language, required: required },
             defaultBody
           )
         ),
@@ -296,7 +294,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           exampleBody &&
             react_1.default.createElement(
               LiveEditor_1.default,
-              { action: dispatch, language: language },
+              { action: dispatch, language: language, required: required },
               exampleBody
             )
         )
@@ -306,7 +304,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   if (examplesBodies && examplesBodies.length > 0) {
     return react_1.default.createElement(
       FormItem_1.default,
-      { label: "Body", required: required },
+      { className: "openapi-demo__form-item-body-container" },
       react_1.default.createElement(
         SchemaTabs_1.default,
         { className: "openapi-tabs__schema", lazy: true },
@@ -315,7 +313,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
           { label: "Default", value: "default", default: true },
           react_1.default.createElement(
             LiveEditor_1.default,
-            { action: dispatch, language: language },
+            { action: dispatch, language: language, required: required },
             defaultBody
           )
         ),
@@ -345,10 +343,10 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
   }
   return react_1.default.createElement(
     FormItem_1.default,
-    { label: "Body", required: required },
+    null,
     react_1.default.createElement(
       LiveEditor_1.default,
-      { action: dispatch, language: language },
+      { action: dispatch, language: language, required: required },
       defaultBody
     )
   );

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

@@ -12,11 +12,55 @@
 
 .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: flex;
   justify-content: flex-start;
+  padding: 0.25rem;
   padding-bottom: 0.6rem;
 }
 
@@ -26,6 +70,8 @@
 
 .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"] {
@@ -34,20 +80,20 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.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);
 
@@ -55,13 +101,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -72,13 +119,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -89,13 +137,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -106,15 +155,16 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -125,13 +175,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -142,13 +193,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -159,13 +211,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -176,13 +229,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -193,13 +247,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 
@@ -210,13 +265,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     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");
+    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);
   }
 }
 

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>
@@ -135,8 +147,14 @@ function TabContent({ lazy, children, selectedValue }) {
 
 function TabsComponent(props) {
   const tabs = useTabs(props);
+  const { className } = props;
+
   return (
-    <div className="tabs-container openapi-tabs__code-container">
+    <div
+      className={clsx("tabs-container openapi-tabs__code-container", {
+        [className]: className,
+      })}
+    >
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import sdk from "@paloaltonetworks/postman-collection";
 export interface Language {
-    highlight?: string;
+    highlight: string;
     language: string;
-    logoClass?: string;
-    variant?: string;
-    options?: {
+    logoClass: string;
+    variant: string;
+    variants: string[];
+    options: {
         [key: string]: boolean;
     };
     source?: string;