docusaurus-theme-openapi-docs 1.1.2 → 1.1.5

package/src/theme/MimeTabs/styles.module.css

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tabItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  /* border: 1px solid var(--openapi-code-dim-dark);
+  border-radius: 0; */
+  font-weight: var(--ifm-font-weight-normal);
+  /* color: var(--openapi-code-dim-dark); */
+  font-size: 12px;
+}
+
+.tabItem:active {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+/* .tabItem:hover {
+  color: var(--ifm-color-emphasis-500) !important;
+} */
+
+.tabItem:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Response Code Tabs */
+.mimeTabsTopSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mimeTabsContainer {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  /* padding-left: 1rem; */
+  overflow: hidden;
+}
+
+.mimeTabsListContainer {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.mimeTabsListContainer::-webkit-scrollbar {
+  display: none;
+}
+
+/* Response Code Tabs - Colored Dots */
+.mimeTabDot {
+  width: 12.5px;
+  height: 12.5px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.mimeTabDotSuccess {
+  background-color: var(--ifm-color-success);
+}
+
+.mimeTabDotDanger {
+  background-color: var(--ifm-color-danger);
+}
+
+.mimeTabDotInfo {
+  background-color: var(--ifm-color-info);
+}
+
+.mimeTabActive {
+  border-bottom-color: var(--ifm-tabs-color-active-border);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  color: var(--ifm-tabs-color-active);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.mimeSchemaContainer {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.tabArrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  border: none;
+  min-width: 1.25rem;
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+
+.tabArrow:hover {
+  cursor: pointer;
+}
+
+.tabArrowLeft {
+  transform: rotate(270deg);
+}
+
+.tabArrowRight {
+  transform: rotate(90deg);
+}
+
+@media screen and (max-width: 500px) {
+  .mimeTabsTopSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mimeTabsContainer {
+    width: 100%;
+    margin-top: var(--ifm-spacing-vertical);
+    padding: 0;
+  }
+}

package/src/theme/ParamsItem/index.js

@@ -37,6 +37,15 @@ function ParamsItem({
     </div>
   ));
 
+  const renderDefaultValue = guard(
+    schema.items ? schema.items.default : schema.default,
+    (value) => (
+      <div>
+        <ReactMarkdown children={`**Default value:** \`${value}\``} />
+      </div>
+    )
+  );
+
   const renderExample = guard(example, (example) => (
     <div>{`Example: ${example}`}</div>
   ));
@@ -58,6 +67,7 @@ function ParamsItem({
       {renderSchemaName}
       {renderSchemaRequired}
       {renderSchema}
+      {renderDefaultValue}
       {renderDescription}
       {renderExample}
       {renderExamples}

package/src/theme/ResponseSamples/index.js

@@ -0,0 +1,27 @@
+/* ============================================================================
+ * 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 from "react";
+
+import CodeBlock from "@theme/CodeBlock";
+
+import styles from "./styles.module.css";
+
+function ResponseSamples({ responseExample }) {
+  return (
+    <div className={styles.responseSamplesContainer}>
+      <CodeBlock
+        language="javascript"
+        className={styles.responseSamplesCodeBlock}
+      >
+        {responseExample}
+      </CodeBlock>
+    </div>
+  );
+}
+
+export default ResponseSamples;

package/src/theme/ResponseSamples/styles.module.css

@@ -0,0 +1,7 @@
+.responseSamplesContainer {
+  margin-top: 2rem;
+}
+
+.responseSamplesTabItem {
+  width: 100%;
+}

package/src/theme/SchemaItem/index.js

@@ -21,10 +21,12 @@ function SchemaItem({
   required,
   schemaDescription,
   schemaName,
+  defaultValue,
 }) {
-  const renderRequired = guard(required, () => (
-    <strong className={styles.required}> required</strong>
-  ));
+  const renderRequired = guard(
+    Array.isArray(required) ? required.includes(name) : required,
+    () => <strong className={styles.required}> required</strong>
+  );
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
     <div className={styles.schemaDescription}>
@@ -38,12 +40,22 @@ function SchemaItem({
     </div>
   ));
 
+  const renderDefaultValue = guard(
+    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
+    (value) => (
+      <div className={styles.schemaQualifierMessage}>
+        <ReactMarkdown children={`**Default value:** \`${value}\``} />
+      </div>
+    )
+  );
+
   const schemaContent = (
     <div>
       <strong>{name}</strong>
       <span className={styles.schemaName}> {schemaName}</span>
       {renderRequired}
       {renderQualifierMessage}
+      {renderDefaultValue}
       {renderSchemaDescription}
     </div>
   );

package/src/theme/SchemaTabs/styles.module.css

@@ -38,14 +38,6 @@
   display: none;
 }
 
-.schemaTabsContainer {
-  display: flex;
-  align-items: center;
-  max-width: 390px;
-  padding-left: 3px;
-  overflow: hidden;
-}
-
 .schemaTabsListContainer {
   padding: 0 0.25rem;
   overflow-y: hidden;