refactor(json-schema-2020-12): consolidate existing code + styles

Refs #8513

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

@@ -32,21 +32,6 @@
     border-radius: 4px;
   }
 
-  &-core-keyword {
-    color: #6b6b6b;
-    font-size: 12px;
-    font-style: italic;
-    margin-left: 20px;
-    font-weight: bold;
-
-    &__value {
-      color: #6b6b6b;
-      font-style: italic;
-      font-size: 12px;
-      font-weight: normal;
-    }
-  }
-
   //&-note {
   //  @include text_headline($section-models-model-title-font-color);
   //  padding: 10px 0 0 20px;
@@ -55,8 +40,4 @@
   //}
 }
 
-.json-schema-2020-12-core-keyword + .json-schema-2020-12-core-keyword__value::before {
-  content: '='
-}
-
 

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

@@ -6,18 +6,4 @@
 @import './JSONSchema/json-schema';
 @import './Accordion/accordion';
 @import './ExpandDeepButton/expand-deep-button';
-@import './keywords/$vocabulary/$vocabulary';
+@import './keywords/all';
-@import './keywords/$defs/$defs';
-@import './keywords/AllOf/all-of';
-@import './keywords/AnyOf/any-of';
-@import './keywords/OneOf/one-of';
-@import './keywords/Not/not';
-@import './keywords/If/if';
-@import './keywords/Then/then';
-@import './keywords/Else/else';
-@import './keywords/DependentSchemas/dependent-schemas';
-@import './keywords/Type/type';
-@import './keywords/Format/format';
-@import './keywords/Description/description';
-@import './keywords/Title/title';
-@import './keywords/Properties/properties';

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

@@ -9,9 +9,11 @@ const $anchor = ({ schema }) => {
   if (!schema?.$anchor) return null
 
   return (
-    <div className="json-schema-2020-12__$anchor">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$anchor">
-      <span className="json-schema-2020-12-core-keyword">$anchor</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $anchor
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$anchor}
       </span>
     </div>

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

@@ -9,9 +9,11 @@ const $comment = ({ schema }) => {
   if (!schema?.$comment) return null
 
   return (
-    <div className="json-schema-2020-12__$comment">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$comment">
-      <span className="json-schema-2020-12-core-keyword">$comment</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $comment
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$comment}
       </span>
     </div>

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

@@ -3,8 +3,8 @@
  */
 import React, { useCallback, useState } from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../../hooks"
+import { useComponent, useIsExpandedDeeply } from "../../hooks"
 
 const $defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
@@ -23,15 +23,17 @@ const $defs = ({ schema }) => {
   }, [])
 
   return (
-    <div className="json-schema-2020-12__$defs">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$defs">
       <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword">$defs</span>
+        <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-        <span className="json-schema-2020-12__type">object</span>
+          $defs
+        </span>
       </Accordion>
+      <span className="json-schema-2020-12__type">object</span>
       {expanded && (
         <ul>
           {Object.entries($defs).map(([schemaName, schema]) => (
-            <li key={schemaName} className="json-schema-2020-12-$def">
+            <li key={schemaName} className="json-schema-2020-12-property">
               <JSONSchema name={schemaName} schema={schema} />
             </li>
           ))}

src/core/plugins/json-schema-2020-12/components/keywords/$defs/_$defs.scss

@@ -1,12 +0,0 @@
-.json-schema-2020-12 {
-  &__\$defs {
-    & ul {
-      @include expansion-border;
-      padding: 0;
-    }
-  }
-
-  &-\$def {
-    @extend .json-schema-2020-12-property;
-  }
-}

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

@@ -9,9 +9,11 @@ const $dynamicAnchor = ({ schema }) => {
   if (!schema?.$dynamicAnchor) return null
 
   return (
-    <div className="json-schema-2020-12__$dynamicAnchor">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$dynamicAnchor">
-      <span className="json-schema-2020-12-core-keyword">$dynamicAnchor</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $dynamicAnchor
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$dynamicAnchor}
       </span>
     </div>

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

@@ -9,9 +9,11 @@ const $dynamicRef = ({ schema }) => {
   if (!schema?.$dynamicRef) return null
 
   return (
-    <div className="json-schema-2020-12__$dynamicRef">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$dynamicRef">
-      <span className="json-schema-2020-12-core-keyword">$dynamicRef</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $dynamicRef
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$dynamicRef}
       </span>
     </div>

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

@@ -9,9 +9,11 @@ const $id = ({ schema }) => {
   if (!schema?.$id) return null
 
   return (
-    <div className="json-schema-2020-12__$id">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$id">
-      <span className="json-schema-2020-12-core-keyword">$id</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $id
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$id}
       </span>
     </div>

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

@@ -9,9 +9,11 @@ const $ref = ({ schema }) => {
   if (!schema?.$ref) return null
 
   return (
-    <div className="json-schema-2020-12__$ref">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$ref">
-      <span className="json-schema-2020-12-core-keyword">$ref</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $ref
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$ref}
       </span>
     </div>

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

@@ -9,9 +9,11 @@ const $schema = ({ schema }) => {
   if (!schema?.$schema) return null
 
   return (
-    <div className="json-schema-2020-12__$schema">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$schema">
-      <span className="json-schema-2020-12-core-keyword">$schema</span>
+      <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-      <span className="json-schema-2020-12-core-keyword__value">
+        $schema
+      </span>
+      <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
         {schema.$schema}
       </span>
     </div>

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

@@ -20,21 +20,23 @@ const $vocabulary = ({ schema }) => {
   }, [])
 
   return (
-    <div className="json-schema-2020-12__$vocabulary">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--$vocabulary">
       <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword">$vocabulary</span>
+        <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--secondary">
-        <span className="json-schema-2020-12__type">object</span>
+          $vocabulary
+        </span>
       </Accordion>
+      <span className="json-schema-2020-12__type">object</span>
       <ul>
         {expanded &&
           Object.entries(schema.$vocabulary).map(([uri, enabled]) => (
             <li
               key={uri}
-              className={classNames("json-schema-2020-12__$vocabulary-uri", {
+              className={classNames("json-schema-2020-12-$vocabulary-uri", {
-                "json-schema-2020-12__$vocabulary-uri--disabled": !enabled,
+                "json-schema-2020-12-$vocabulary-uri--disabled": !enabled,
               })}
             >
-              <span className="json-schema-2020-12-core-keyword__value">
+              <span className="json-schema-2020-12-keyword__value json-schema-2020-12-keyword__value--secondary">
                 {uri}
               </span>
             </li>

src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/_$vocabulary.scss

@@ -1,11 +1,13 @@
 .json-schema-2020-12 {
-  &__\$vocabulary {
+  &-keyword--\$vocabulary {
     ul {
       @include expansion-border;
     }
   }
 
-  &__\$vocabulary-uri {
+  &-\$vocabulary-uri {
+    margin-left: 35px;
+
     &--disabled {
       text-decoration: line-through;
     }

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

@@ -0,0 +1,68 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import { JSONSchemaDeepExpansionContext } from "../../context"
+
+const AllOf = ({ schema }) => {
+  const allOf = schema?.allOf || []
+
+  if (!Array.isArray(allOf) || allOf.length === 0) {
+    return null
+  }
+
+  const fn = useFn()
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+  const KeywordType = useComponent("KeywordType")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
+  }, [])
+
+  return (
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--allOf">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+            All of
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        <KeywordType schema={{ allOf }} />
+        {expanded && (
+          <ul>
+            {allOf.map((schema, index) => (
+              <li key={`#${index}`} className="json-schema-2020-12-property">
+                <JSONSchema
+                  name={`#${index} ${fn.getTitle(schema)}`}
+                  schema={schema}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
+  )
+}
+
+AllOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default AllOf

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

@@ -1,56 +0,0 @@
-/**
- * @prettier
- */
-import React, { useCallback, useState } from "react"
-
-import { schema } from "../../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
-
-const AllOf = ({ schema }) => {
-  const allOf = schema?.allOf || []
-
-  if (!Array.isArray(allOf) || allOf.length === 0) {
-    return null
-  }
-
-  const fn = useFn()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
-  const Accordion = useComponent("Accordion")
-  const JSONSchema = useComponent("JSONSchema")
-
-  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-
-  return (
-    <div className="json-schema-2020-12__allOf">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--allOf">
-          All of
-        </span>
-        <span className="json-schema-2020-12__type">
-          {fn.getType({ allOf })}
-        </span>
-      </Accordion>
-      {expanded && (
-        <ul>
-          {allOf.map((schema, index) => (
-            <li key={`#${index}`} className="json-schema-2020-12-property">
-              <JSONSchema
-                name={`#${index} ${fn.getTitle(schema)}`}
-                schema={schema}
-              />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-AllOf.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default AllOf

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

@@ -1,19 +0,0 @@
-.json-schema-2020-12 {
-  &__allOf {
-    margin: 5px 0 5px 0;
-
-    & > ul {
-      @include expansion-border;
-      padding: 0;
-    }
-  }
-
-  &-core-keyword {
-    &--allOf {
-      color: $text-code-default-font-color;
-      font-style: normal;
-    }
-  }
-}
-
-

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

@@ -0,0 +1,68 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import { JSONSchemaDeepExpansionContext } from "../../context"
+
+const AnyOf = ({ schema }) => {
+  const anyOf = schema?.anyOf || []
+
+  if (!Array.isArray(anyOf) || anyOf.length === 0) {
+    return null
+  }
+
+  const fn = useFn()
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+  const KeywordType = useComponent("KeywordType")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
+  }, [])
+
+  return (
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--anyOf">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+            Any of
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        <KeywordType schema={{ anyOf }} />
+        {expanded && (
+          <ul>
+            {anyOf.map((schema, index) => (
+              <li key={`#${index}`} className="json-schema-2020-12-property">
+                <JSONSchema
+                  name={`#${index} ${fn.getTitle(schema)}`}
+                  schema={schema}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
+  )
+}
+
+AnyOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default AnyOf

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

@@ -1,56 +0,0 @@
-/**
- * @prettier
- */
-import React, { useCallback, useState } from "react"
-
-import { schema } from "../../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
-
-const AnyOf = ({ schema }) => {
-  const anyOf = schema?.anyOf || []
-
-  if (!Array.isArray(anyOf) || anyOf.length === 0) {
-    return null
-  }
-
-  const fn = useFn()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
-  const Accordion = useComponent("Accordion")
-  const JSONSchema = useComponent("JSONSchema")
-
-  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-
-  return (
-    <div className="json-schema-2020-12__anyOf">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--anyOf">
-          Any of
-        </span>
-        <span className="json-schema-2020-12__type">
-          {fn.getType({ anyOf })}
-        </span>
-      </Accordion>
-      {expanded && (
-        <ul>
-          {anyOf.map((schema, index) => (
-            <li key={`#${index}`} className="json-schema-2020-12-property">
-              <JSONSchema
-                name={`#${index} ${fn.getTitle(schema)}`}
-                schema={schema}
-              />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-AnyOf.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default AnyOf

src/core/plugins/json-schema-2020-12/components/keywords/AnyOf/_any-of.scss

@@ -1,13 +0,0 @@
-.json-schema-2020-12 {
-  &__anyOf {
-    @extend .json-schema-2020-12__allOf;
-  }
-
-  &-core-keyword {
-    &--anyOf {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-

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

@@ -0,0 +1,62 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../prop-types"
+import { useComponent, useIsExpandedDeeply } from "../../hooks"
+import { JSONSchemaDeepExpansionContext } from "../../context"
+
+const DependentSchemas = ({ schema }) => {
+  const dependentSchemas = schema?.dependentSchemas || []
+
+  if (typeof dependentSchemas !== "object") return null
+  if (Object.keys(dependentSchemas).length === 0) return null
+
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
+  }, [])
+
+  return (
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--dependentSchemas">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+            Dependent schemas
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        <span className="json-schema-2020-12__type">object</span>
+        {expanded && (
+          <ul>
+            {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
+              <li key={schemaName} className="json-schema-2020-12-property">
+                <JSONSchema name={schemaName} schema={schema} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
+  )
+}
+
+DependentSchemas.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default DependentSchemas

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

@@ -1,49 +0,0 @@
-/**
- * @prettier
- */
-import React, { useCallback, useState } from "react"
-
-import { schema } from "../../../prop-types"
-import { useComponent, useIsExpandedDeeply } from "../../../hooks"
-
-const DependentSchemas = ({ schema }) => {
-  const dependentSchemas = schema?.dependentSchemas || []
-
-  if (typeof dependentSchemas !== "object") return null
-  if (Object.keys(dependentSchemas).length === 0) return null
-
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
-  const Accordion = useComponent("Accordion")
-  const JSONSchema = useComponent("JSONSchema")
-
-  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-
-  return (
-    <div className="json-schema-2020-12__dependentSchemas">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--dependentSchemas">
-          Dependent schemas
-        </span>
-        <span className="json-schema-2020-12__type">object</span>
-      </Accordion>
-      {expanded && (
-        <ul>
-          {Object.entries(dependentSchemas).map(([schemaName, schema]) => (
-            <li key={schemaName} className="json-schema-2020-12-property">
-              <JSONSchema name={schemaName} schema={schema} />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-DependentSchemas.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default DependentSchemas

src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas/_dependent-schemas.scss

@@ -1,13 +0,0 @@
-.json-schema-2020-12 {
-  &__dependentSchemas {
-    @extend .json-schema-2020-12__allOf;
-  }
-
-  &-core-keyword {
-    &--dependentSchemas {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-

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

@@ -9,7 +9,11 @@ const Description = ({ schema }) => {
   if (!schema?.description) return null
 
   return (
-    <div className="json-schema-2020-12__description">{schema.description}</div>
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--description">
+      <div className="json-schema-2020-12-core-keyword__value json-schema-2020-12-core-keyword__value--secondary">
+        {schema.description}
+      </div>
+    </div>
   )
 }
 

src/core/plugins/json-schema-2020-12/components/keywords/Description/_description.scss

@@ -1,4 +1,4 @@
-.json-schema-2020-12__description {
+.json-schema-2020-12-keyword--description {
   color: #6b6b6b;
   font-size: 12px;
   margin-left: 20px;

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

@@ -3,21 +3,21 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent } from "../../hooks"
 
 const Else = ({ schema }) => {
   if (!schema?.else) return null
 
   const JSONSchema = useComponent("JSONSchema")
   const name = (
-    <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--else">
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Else
     </span>
   )
 
   return (
-    <div className="json-schema-2020-12__else">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
       <JSONSchema name={name} schema={schema.else} />
     </div>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Else/_else.scss

@@ -1,10 +0,0 @@
-.json-schema-2020-12 {
-  &__else {
-    .json-schema-2020-12-core-keyword--else {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-
-

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

@@ -3,21 +3,21 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent } from "../../hooks"
 
 const If = ({ schema }) => {
   if (!schema?.if) return null
 
   const JSONSchema = useComponent("JSONSchema")
   const name = (
-    <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--if">
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       If
     </span>
   )
 
   return (
-    <div className="json-schema-2020-12__if">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--if">
       <JSONSchema name={name} schema={schema.if} />
     </div>
   )

src/core/plugins/json-schema-2020-12/components/keywords/If/_if.scss

@@ -1,10 +0,0 @@
-.json-schema-2020-12 {
-  &__if {
-    .json-schema-2020-12-core-keyword--if {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-
-

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

@@ -3,21 +3,21 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent } from "../../hooks"
 
 const Not = ({ schema }) => {
   if (!schema?.not) return null
 
   const JSONSchema = useComponent("JSONSchema")
   const name = (
-    <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--not">
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Not
     </span>
   )
 
   return (
-    <div className="json-schema-2020-12__not">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--not">
       <JSONSchema name={name} schema={schema.not} />
     </div>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Not/_not.scss

@@ -1,10 +0,0 @@
-.json-schema-2020-12 {
-  &__not {
-    .json-schema-2020-12-core-keyword--not {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-
-

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

@@ -0,0 +1,68 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useState } from "react"
+
+import { schema } from "../../prop-types"
+import { useFn, useComponent, useIsExpandedDeeply } from "../../hooks"
+import { JSONSchemaDeepExpansionContext } from "../../context"
+
+const OneOf = ({ schema }) => {
+  const oneOf = schema?.oneOf || []
+
+  if (!Array.isArray(oneOf) || oneOf.length === 0) {
+    return null
+  }
+
+  const fn = useFn()
+  const isExpandedDeeply = useIsExpandedDeeply()
+  const [expanded, setExpanded] = useState(isExpandedDeeply)
+  const [expandedDeeply, setExpandedDeeply] = useState(false)
+  const Accordion = useComponent("Accordion")
+  const ExpandDeepButton = useComponent("ExpandDeepButton")
+  const JSONSchema = useComponent("JSONSchema")
+  const KeywordType = useComponent("KeywordType")
+
+  /**
+   * Event handlers.
+   */
+  const handleExpansion = useCallback(() => {
+    setExpanded((prev) => !prev)
+  }, [])
+  const handleExpansionDeep = useCallback((e, expandedDeepNew) => {
+    setExpanded(expandedDeepNew)
+    setExpandedDeeply(expandedDeepNew)
+  }, [])
+
+  return (
+    <JSONSchemaDeepExpansionContext.Provider value={expandedDeeply}>
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--oneOf">
+        <Accordion expanded={expanded} onChange={handleExpansion}>
+          <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
+            One of
+          </span>
+        </Accordion>
+        <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
+        <KeywordType schema={{ oneOf }} />
+        {expanded && (
+          <ul>
+            {oneOf.map((schema, index) => (
+              <li key={`#${index}`} className="json-schema-2020-12-property">
+                <JSONSchema
+                  name={`#${index} ${fn.getTitle(schema)}`}
+                  schema={schema}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </JSONSchemaDeepExpansionContext.Provider>
+  )
+}
+
+OneOf.propTypes = {
+  schema: schema.isRequired,
+}
+
+export default OneOf

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

@@ -1,56 +0,0 @@
-/**
- * @prettier
- */
-import React, { useCallback, useState } from "react"
-
-import { schema } from "../../../prop-types"
-import { useFn, useComponent, useIsExpandedDeeply } from "../../../hooks"
-
-const OneOf = ({ schema }) => {
-  const oneOf = schema?.oneOf || []
-
-  if (!Array.isArray(oneOf) || oneOf.length === 0) {
-    return null
-  }
-
-  const fn = useFn()
-  const isExpandedDeeply = useIsExpandedDeeply()
-  const [expanded, setExpanded] = useState(isExpandedDeeply)
-  const Accordion = useComponent("Accordion")
-  const JSONSchema = useComponent("JSONSchema")
-
-  const handleExpansion = useCallback(() => {
-    setExpanded((prev) => !prev)
-  }, [])
-
-  return (
-    <div className="json-schema-2020-12__oneOf">
-      <Accordion expanded={expanded} onChange={handleExpansion}>
-        <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--oneOf">
-          One of
-        </span>
-        <span className="json-schema-2020-12__type">
-          {fn.getType({ oneOf })}
-        </span>
-      </Accordion>
-      {expanded && (
-        <ul>
-          {oneOf.map((schema, index) => (
-            <li key={`#${index}`} className="json-schema-2020-12-property">
-              <JSONSchema
-                name={`#${index} ${fn.getTitle(schema)}`}
-                schema={schema}
-              />
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-OneOf.propTypes = {
-  schema: schema.isRequired,
-}
-
-export default OneOf

src/core/plugins/json-schema-2020-12/components/keywords/OneOf/_one-of.scss

@@ -1,13 +0,0 @@
-.json-schema-2020-12 {
-  &__oneOf {
-    @extend .json-schema-2020-12__allOf;
-  }
-
-  &-core-keyword {
-    &--oneOf {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-

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

@@ -3,21 +3,21 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useComponent } from "../../../hooks"
+import { useComponent } from "../../hooks"
 
 const Then = ({ schema }) => {
   if (!schema?.then) return null
 
   const JSONSchema = useComponent("JSONSchema")
   const name = (
-    <span className="json-schema-2020-12-core-keyword json-schema-2020-12-core-keyword--then">
+    <span className="json-schema-2020-12-keyword__name json-schema-2020-12-keyword__name--primary">
       Then
     </span>
   )
 
   return (
-    <div className="json-schema-2020-12__then">
+    <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--then">
       <JSONSchema name={name} schema={schema.then} />
     </div>
   )

src/core/plugins/json-schema-2020-12/components/keywords/Then/_then.scss

@@ -1,10 +0,0 @@
-.json-schema-2020-12 {
-  &__then {
-    .json-schema-2020-12-core-keyword--then {
-      @extend .json-schema-2020-12-core-keyword--allOf;
-    }
-  }
-}
-
-
-

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

@@ -4,13 +4,11 @@
     display: inline-block;
     font-weight: bold;
 
-    & .json-schema-2020-12-core-keyword {
+    & .json-schema-2020-12-keyword__name {
       margin: 0;
     }
   }
 
-
-
   &-property {
     margin: 7px 0;
 

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

@@ -0,0 +1,51 @@
+.json-schema-2020-12-keyword {
+  margin: 5px 0 5px 0;
+
+  & > ul {
+    @include expansion-border;
+    padding: 0;
+  }
+
+  &__name {
+    font-size: 12px;
+    margin-left: 20px;
+    font-weight: bold;
+
+    &--primary {
+      color: $text-code-default-font-color;
+      font-style: normal;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+  }
+
+  &__value {
+    color: #6b6b6b;
+    font-style: italic;
+    font-size: 12px;
+    font-weight: normal;
+
+    &--primary {
+      color: $text-code-default-font-color;
+      font-style: normal;
+    }
+
+    &--secondary {
+      color: #6b6b6b;
+      font-style: italic;
+    }
+  }
+}
+.json-schema-2020-12-keyword__name--secondary + .json-schema-2020-12-keyword__value--secondary::before {
+  content: '='
+}
+
+@import './$vocabulary/$vocabulary';
+@import './Type/type';
+@import './Format/format';
+@import './Description/description';
+@import './Title/title';
+@import './Properties/properties';

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

@@ -11,16 +11,16 @@ import Keyword$anchor from "./components/keywords/$anchor"
 import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
 import Keyword$ref from "./components/keywords/$ref"
 import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
-import Keyword$defs from "./components/keywords/$defs/$defs"
+import Keyword$defs from "./components/keywords/$defs"
 import Keyword$comment from "./components/keywords/$comment"
-import KeywordAllOf from "./components/keywords/AllOf/AllOf"
+import KeywordAllOf from "./components/keywords/AllOf"
-import KeywordAnyOf from "./components/keywords/AnyOf/AnyOf"
+import KeywordAnyOf from "./components/keywords/AnyOf"
-import KeywordOneOf from "./components/keywords/OneOf/OneOf"
+import KeywordOneOf from "./components/keywords/OneOf"
-import KeywordNot from "./components/keywords/Not/Not"
+import KeywordNot from "./components/keywords/Not"
-import KeywordIf from "./components/keywords/If/If"
+import KeywordIf from "./components/keywords/If"
-import KeywordThen from "./components/keywords/Then/Then"
+import KeywordThen from "./components/keywords/Then"
-import KeywordElse from "./components/keywords/Else/Else"
+import KeywordElse from "./components/keywords/Else"
-import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
+import KeywordDependentSchemas from "./components/keywords/DependentSchemas"
 import KeywordProperties from "./components/keywords/Properties/Properties"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"

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

@@ -10,16 +10,16 @@ import Keyword$anchor from "./components/keywords/$anchor"
 import Keyword$dynamicAnchor from "./components/keywords/$dynamicAnchor"
 import Keyword$ref from "./components/keywords/$ref"
 import Keyword$dynamicRef from "./components/keywords/$dynamicRef"
-import Keyword$defs from "./components/keywords/$defs/$defs"
+import Keyword$defs from "./components/keywords/$defs"
 import Keyword$comment from "./components/keywords/$comment"
-import KeywordAllOf from "./components/keywords/AllOf/AllOf"
+import KeywordAllOf from "./components/keywords/AllOf"
-import KeywordAnyOf from "./components/keywords/AnyOf/AnyOf"
+import KeywordAnyOf from "./components/keywords/AnyOf"
-import KeywordOneOf from "./components/keywords/OneOf/OneOf"
+import KeywordOneOf from "./components/keywords/OneOf"
-import KeywordNot from "./components/keywords/Not/Not"
+import KeywordNot from "./components/keywords/Not"
-import KeywordIf from "./components/keywords/If/If"
+import KeywordIf from "./components/keywords/If"
-import KeywordThen from "./components/keywords/Then/Then"
+import KeywordThen from "./components/keywords/Then"
-import KeywordElse from "./components/keywords/Else/Else"
+import KeywordElse from "./components/keywords/Else"
-import KeywordDependentSchemas from "./components/keywords/DependentSchemas/DependentSchemas"
+import KeywordDependentSchemas from "./components/keywords/DependentSchemas"
 import KeywordType from "./components/keywords/Type/Type"
 import KeywordFormat from "./components/keywords/Format/Format"
 import KeywordTitle from "./components/keywords/Title/Title"

src/core/plugins/oas31/wrap-components/json-schema-2020-12-keyword-description.jsx

@@ -11,9 +11,11 @@ const JSONSchema202012KeywordDescriptionWrapper =
     const MarkDown = getComponent("Markdown")
 
     return (
-      <div className="json-schema-2020-12__description">
+      <div className="json-schema-2020-12-keyword json-schema-2020-12-keyword--description">
+        <div className="json-schema-2020-12-core-keyword__value json-schema-2020-12-core-keyword__value--secondary">
           <MarkDown source={schema.description} />
         </div>
+      </div>
     )
   })