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

Refs #8513

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

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

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

@@ -43,21 +43,6 @@
     font-size: 12px;
   }
 
-  &__format {
-    @include text_code();
-    margin-left: 10px;
-    line-height: 1.5;
-    padding: 1px;
-    color: white;
-    background-color: #D69E2E;
-    border-radius: 4px;
-    text-transform: lowercase;
-
-    &:before {
-      content: "format: ";
-    }
-  }
-
   &__limit {
     @include text_code();
     margin-left: 10px;

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+import { schema } from "../../../prop-types"
+
+const Format = ({ schema }) => {
+  if (!schema.format) return null
+
+  return <span className="json-schema-2020-12__format">{schema.format}</span>
+}
+
+Format.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default Format

src/core/plugins/json-schema-2020-12/components/keywords/Format/_format.scss

@@ -0,0 +1,14 @@
+.json-schema-2020-12__format {
+  @include text_code();
+  margin-left: 10px;
+  line-height: 1.5;
+  padding: 1px;
+  color: white;
+  background-color: #D69E2E;
+  border-radius: 4px;
+  text-transform: lowercase;
+
+  &:before {
+    content: "format: ";
+  }
+}

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

@@ -7,6 +7,7 @@ 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 KeywordFormat from "./components/keywords/Format/Format"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -20,6 +21,7 @@ export const withJSONSchemaContext = (Component, overrides = {}) => {
       BooleanJSONSchema,
       KeywordProperties,
       KeywordType,
+      KeywordFormat,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,

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

@@ -5,6 +5,7 @@ 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 KeywordFormat from "./components/keywords/Format/Format"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
@@ -17,6 +18,7 @@ const JSONSchema202012Plugin = () => ({
     BooleanJSONSchema202012: BooleanJSONSchema,
     JSONSchema202012KeywordProperties: KeywordProperties,
     JSONSchema202012KeywordType: KeywordType,
+    JSONSchema202012KeywordFormat: KeywordFormat,
     JSONSchema202012Accordion: Accordion,
     JSONSchema202012ExpandDeepButton: ExpandDeepButton,
     JSONSchema202012ChevronRightIcon: ChevronRightIcon,

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

@@ -12,6 +12,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
   const BooleanJSONSchema = getComponent("BooleanJSONSchema202012")
   const KeywordProperties = getComponent("JSONSchema202012KeywordProperties")
   const KeywordType = getComponent("JSONSchema202012KeywordType")
+  const KeywordFormat = getComponent("JSONSchema202012KeywordFormat")
   const Accordion = getComponent("JSONSchema202012Accordion")
   const ExpandDeepButton = getComponent("JSONSchema202012ExpandDeepButton")
   const ChevronRightIcon = getComponent("JSONSchema202012ChevronRightIcon")
@@ -25,6 +26,7 @@ const ModelsWrapper = createOnlyOAS31ComponentWrapper(({ getSystem }) => {
       BooleanJSONSchema,
       KeywordProperties,
       KeywordType,
+      KeywordFormat,
       Accordion,
       ExpandDeepButton,
       ChevronRightIcon,