feat(json-schema-2020-12): add support for title 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 KeywordTitle = useComponent("KeywordTitle")
   const KeywordDescription = useComponent("KeywordDescription")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
 
@@ -73,9 +74,7 @@ const JSONSchema = ({ schema, name }) => {
         >
           <div className="json-schema-2020-12-head">
             <Accordion expanded={expanded} onChange={handleExpansion}>
-              <div className="json-schema-2020-12__title">
+              <KeywordTitle title={name} schema={schema} />
-                {name || fn.getTitle(schema)}
-              </div>
             </Accordion>
             <ExpandDeepButton
               expanded={expanded}

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

@@ -17,27 +17,11 @@
     padding: 0 inherit 0 inherit;
   }
 
-  &__title {
-    @include text_headline($section-models-model-title-font-color);
-    display: inline-block;
-    font-weight: bold;
-  }
-
   &-body {
     margin: 2px 0;
     border-left: 1px dashed rgba($section-models-model-container-background-color, 0.1);
   }
 
-  &-property {
-    margin: 7px 0;
-
-    .json-schema-2020-12__title {
-      @include text_code();
-      font-size: 12px;
-      vertical-align: bottom;
-    }
-  }
-
   &__limit {
     @include text_code();
     margin-left: 10px;

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

@@ -5,3 +5,4 @@
 @import './keywords/Type/type';
 @import './keywords/Format/format';
 @import './keywords/Description/description';
+@import './keywords/Title/title';

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

@@ -0,0 +1,29 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+
+import { schema } from "../../../prop-types"
+import { useFn } from "../../../hooks"
+
+const Title = ({ title, schema }) => {
+  const fn = useFn()
+
+  return (
+    <div className="json-schema-2020-12__title">
+      {title || fn.getTitle(schema)}
+    </div>
+  )
+}
+
+Title.propTypes = {
+  title: PropTypes.string,
+  schema: schema.isRequired,
+}
+
+Title.defaultProps = {
+  title: "",
+}
+
+export default Title

src/core/plugins/json-schema-2020-12/components/keywords/Title/_title.scss

@@ -0,0 +1,17 @@
+.json-schema-2020-12 {
+  &__title {
+    @include text_headline($section-models-model-title-font-color);
+    display: inline-block;
+    font-weight: bold;
+  }
+
+  &-property {
+    margin: 7px 0;
+
+    .json-schema-2020-12__title {
+      @include text_code();
+      font-size: 12px;
+      vertical-align: bottom;
+    }
+  }
+}

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 KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
@@ -23,6 +24,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       KeywordProperties,
       KeywordType,
       KeywordFormat,
+      KeywordTitle,
       KeywordDescription,
       Accordion,
       ExpandDeepButton,

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 KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
@@ -20,6 +21,7 @@ const JSONSchema202012Plugin = () => ({
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012KeywordFormat: KeywordFormat,
+    JSONSchema202012KeywordTitle: KeywordTitle,
     JSONSchema202012KeywordDescription: KeywordDescription,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,

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

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