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

Refs #8513

src/core/plugins/json-schema-2020-12/components/ExpandDeepButton/_expand-deep-button.scss

@@ -1,6 +1,6 @@
 .json-schema-2020-12-expand-deep-button {
   @include text_headline($section-models-model-title-font-color);
   font-size: 12px;
-  color: #6b6b6b;
+  color: rgb(175, 174, 174);
   border: none;
 }

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

@@ -28,6 +28,7 @@ const JSONSchema = ({ schema, name }) => {
   const BooleanJSONSchema = useComponent("BooleanJSONSchema")
   const Accordion = useComponent("Accordion")
   const KeywordProperties = useComponent("KeywordProperties")
+  const KeywordType = useComponent("KeywordType")
   const ExpandDeepButton = useComponent("ExpandDeepButton")
 
   /**
@@ -78,6 +79,7 @@ const JSONSchema = ({ schema, name }) => {
               expanded={expanded}
               onClick={handleExpansionDeep}
             />
+            <KeywordType schema={schema} />
           </div>
           {expanded && (
             <div className="json-schema-2020-12-body">

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

@@ -38,21 +38,6 @@
     }
   }
 
-  &__type {
-    @include text_code();
-    color: $prop-type-font-color;
-    font-size: 12px;
-    text-transform: capitalize;
-    font-weight: bold;
-
-    &:before {
-      content: "{";
-    }
-    &:after {
-      content: "}";
-    }
-  }
-
   &__description {
     color: #6b6b6b;
     font-size: 12px;
@@ -66,6 +51,7 @@
     color: white;
     background-color: #D69E2E;
     border-radius: 4px;
+    text-transform: lowercase;
 
     &:before {
       content: "format: ";

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

@@ -2,3 +2,4 @@
 @import './JSONSchema/json-schema';
 @import './Accordion/accordion';
 @import './ExpandDeepButton/expand-deep-button';
+@import './keywords/Type/type';

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

@@ -0,0 +1,19 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+import { useFn } from "../../../hooks"
+
+const Type = ({ schema }) => {
+  const fn = useFn()
+
+  return <span className="json-schema-2020-12__type">{fn.getType(schema)}</span>
+}
+
+Type.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Type

src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss

@@ -0,0 +1,7 @@
+.json-schema-2020-12__type {
+  @include text_code();
+  color: $prop-type-font-color;
+  font-size: 12px;
+  text-transform: lowercase;
+  font-weight: bold;
+}

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

@@ -1,7 +1,6 @@
 /**
  * @prettier
  */
-
 export const upperFirst = (value) => {
   if (typeof value === "string") {
     return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
@@ -17,4 +16,16 @@ export const getTitle = (schema) => {
   return ""
 }
 
+export const getType = (schema) => {
+  if (Array.isArray(schema.type)) {
+    return schema.type.map(String).join(" | ")
+  }
+
+  if (schema.type != null) {
+    return String(schema.type)
+  }
+
+  return "any"
+}
+
 export const isBooleanJSONSchema = (schema) => typeof schema === "boolean"

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

@@ -6,18 +6,20 @@ import React from "react"
 import JSONSchema from "./components/JSONSchema/JSONSchema"
 import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
 import KeywordProperties from "./components/keywords/Properties"
+import KeywordType from "./components/keywords/Type/Type"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
 import { JSONSchemaContext } from "./context"
-import { getTitle, isBooleanJSONSchema, upperFirst } from "./fn"
+import { getTitle, isBooleanJSONSchema, upperFirst, getType } from "./fn"
 
 export const withJSONSchemaContext = (Component, overrides = {}) => {
   const value = {
     components: {
       JSONSchema,
       BooleanJSONSchema,
       KeywordProperties,
+      KeywordType,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,
@@ -30,6 +32,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
     fn: {
       upperFirst,
       getTitle,
+      getType,
       isBooleanJSONSchema,
       ...overrides.fn,
     },

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

@@ -3,7 +3,8 @@
  */
 import JSONSchema from "./components/JSONSchema/JSONSchema"
 import BooleanJSONSchema from "./components/BooleanJSONSchema/BooleanJSONSchema"
-import JSONSchemaKeywordProperties from "./components/keywords/Properties"
+import KeywordProperties from "./components/keywords/Properties"
+import KeywordType from "./components/keywords/Type/Type"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -14,7 +15,8 @@ const JSONSchema202012Plugin = () => ({
   components: {
     JSONSchema202012: JSONSchema,
     BooleanJSONSchema202012: BooleanJSONSchema,
-    JSONSchema202012KeywordProperties: JSONSchemaKeywordProperties,
+    JSONSchema202012KeywordProperties: KeywordProperties,
+    JSONSchema202012KeywordType: KeywordType,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,

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

@@ -11,6 +11,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const JSONSchema = getComponent("JSONSchema202012")
   const BooleanJSONSchema = getComponent("BooleanJSONSchema202012")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
+  const KeywordType = getComponent("JSONSchema202012KeywordType")
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -23,6 +24,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       JSONSchema,
       BooleanJSONSchema,
       KeywordProperties,
+      KeywordType,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,