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,