feat(json-schema-2020-12): add support for required keyword (#8628)

Refs #8513

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

@@ -2,12 +2,14 @@
  * @prettier
  */
 import React from "react"
+import classNames from "classnames"
 
 import { schema } from "../../../prop-types"
 import { useComponent } from "../../../hooks"
 
 const Properties = ({ schema }) => {
   const properties = schema?.properties || {}
+  const required = Array.isArray(schema?.required) ? schema.required : []
   const JSONSchema = useComponent("JSONSchema")
 
   /**
@@ -21,7 +23,13 @@ const Properties = ({ schema }) => {
     <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--properties">
       <ul>
         {Object.entries(properties).map(([propertyName, schema]) => (
-          <li key={propertyName} className="json-schema-2020-12-property">
+          <li
+            key={propertyName}
+            className={classNames("json-schema-2020-12-property", {
+              "json-schema-2020-12-property--required":
+                required.includes(propertyName),
+            })}
+          >
             <JSONSchema name={propertyName} schema={schema} />
           </li>
         ))}

src/core/plugins/json-schema-2020-12/components/keywords/Properties/_properties.scss

@@ -9,5 +9,13 @@
 
   &-property {
     list-style-type: none;
+
+    &--required {
+      .json-schema-2020-12__title:after {
+        content: '*';
+        color: red;
+        font-weight: bold;
+      }
+    }
   }
 }