feat(json-schema-2020-12): add support for description keyword

Refs #8513

src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx

@@ -30,6 +30,7 @@ const JSONSchema = ({ schema, name }) => {
   const KeywordProperties = useComponent("KeywordProperties")
   const KeywordType = useComponent("KeywordType")
   const KeywordFormat = useComponent("KeywordFormat")
+  const KeywordDescription = useComponent("KeywordDescription")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
 
   /**
@@ -85,6 +86,7 @@ const JSONSchema = ({ schema, name }) => {
           </div>
           {expanded && (
             <div className="json-schema-2020-12-body">
+              <KeywordDescription schema={schema} />
               <KeywordProperties schema={schema} />
             </div>
           )}

src/core/plugins/json-schema-2020-12/components/JSONSchema/_json-schema.scss

@@ -38,11 +38,6 @@
     }
   }
 
-  &__description {
-    color: #6b6b6b;
-    font-size: 12px;
-  }
-
   &__limit {
     @include text_code();
     margin-left: 10px;

src/core/plugins/json-schema-2020-12/components/_all.scss

@@ -4,3 +4,4 @@
 @import './ExpandDeepButton/expand-deep-button';
 @import './keywords/Type/type';
 @import './keywords/Format/format';
+@import './keywords/Description/description';

src/core/plugins/json-schema-2020-12/components/keywords/Description/Description.jsx

@@ -0,0 +1,20 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+
+const Description = ({ schema }) => {
+  if (!schema.description) return null
+
+  return (
+    <div className="json-schema-2020-12__description">{schema.description}</div>
+  )
+}
+
+Description.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Description

src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss

@@ -0,0 +1,5 @@
+.json-schema-2020-12__description {
+  color: #6b6b6b;
+  font-size: 12px;
+  margin-left: 20px;
+}

src/core/plugins/json-schema-2020-12/hoc.jsx

@@ -8,6 +8,7 @@ import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
+import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -22,6 +23,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordProperties,
       KeywordType,
       KeywordFormat,
+      KeywordDescription,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,

src/core/plugins/json-schema-2020-12/index.js

@@ -6,6 +6,7 @@ import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
+import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -19,6 +20,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,
+    JSONSchema202012KeywordDescription: KeywordDescription,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,

src/core/plugins/oas31/index.js

@@ -14,6 +14,7 @@ import InfoWrapper from "./wrap-components/info"
 import ModelsWrapper from "./wrap-components/models"
 import VersionPragmaFilterWrapper from "./wrap-components/version-pragma-filter"
 import VersionStampWrapper from "./wrap-components/version-stamp"
+import JSONSchema202012KeywordDescriptionWrapper from "./wrap-components/json-schema-2020-12-keyword-description"
 import {
   license as selectLicense,
   contact as selectContact,
@@ -77,6 +78,8 @@ const OAS31Plugin = ({ fn }) => {
       VersionPragmaFilter: VersionPragmaFilterWrapper,
       VersionStamp: VersionStampWrapper,
       Models: ModelsWrapper,
+      JSONSchema202012KeywordDescription:
+        JSONSchema202012KeywordDescriptionWrapper,
     },
     statePlugins: {
       spec: {

src/core/plugins/oas31/wrap-components/json-schema-2020-12-keyword-description.jsx

@@ -0,0 +1,20 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import { createOnlyOAS31ComponentWrapper } from "../fn"
+
+const JSONSchema202012KeywordDescriptionWrapper =
+  createOnlyOAS31ComponentWrapper(({ schema, getComponent }) => {
+    if (!schema.description) return null
+
+    const MarkDown = getComponent("Markdown")
+
+    return (
+      <div className="json-schema-2020-12__description">
+        <MarkDown source={schema.description} />
+      </div>
+    )
+  })
+
+export default JSONSchema202012KeywordDescriptionWrapper

src/core/plugins/oas31/wrap-components/models.jsx

@@ -13,6 +13,10 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
   const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
+  const KeywordDescription = getComponent(
+    "JSONSchema202012KeywordDescription",
+    true
+  )
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -27,6 +31,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       KeywordProperties,
       KeywordType,
       KeywordFormat,
+      KeywordDescription,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,

src/core/presets/apis.js

@@ -7,5 +7,5 @@ import OAS31Plugin from "../plugins/oas31"
 import JSONSchema202012Plugin from "../plugins/json-schema-2020-12"
 
 export default function PresetApis() {
-  return [BasePreset, OAS3Plugin, OAS31Plugin, JSONSchema202012Plugin]
+  return [BasePreset, OAS3Plugin, JSONSchema202012Plugin, OAS31Plugin]
 }