refactor(json-schema-2020-12): make styles more reusable (#8656)

Refs #8513

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

@@ -44,7 +44,9 @@ const $defs = ({ schema }) => {
           </span>
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <span className="json-schema-2020-12__type">object</span>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          object
+        </strong>
         <ul
           className={classNames("json-schema-2020-12-keyword__children", {
             "json-schema-2020-12-keyword__children--collapsed": !expanded,

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

@@ -29,7 +29,9 @@ const $vocabulary = ({ schema }) => {
           $vocabulary
         </span>
       </Accordion>
-      <span className="json-schema-2020-12__type">object</span>
+      <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+        object
+      </strong>
       <ul>
         {expanded &&
           Object.entries(schema.$vocabulary).map(([uri, enabled]) => (

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

@@ -27,12 +27,16 @@ const AdditionalProperties = ({ schema }) => {
       {additionalProperties === true ? (
         <>
           {name}
-          <span className="json-schema-2020-12__type">allowed</span>
+          <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            allowed
+          </span>
         </>
       ) : additionalProperties === false ? (
         <>
           {name}
-          <span className="json-schema-2020-12__type">forbidden</span>
+          <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+            forbidden
+          </span>
         </>
       ) : (
         <JSONSchema name={name} schema={additionalProperties} />

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

@@ -43,7 +43,9 @@ const DependentSchemas = ({ schema }) => {
           </span>
         </Accordion>
         <ExpandDeepButton expanded={expanded} onClick={handleExpansionDeep} />
-        <span className="json-schema-2020-12__type">object</span>
+        <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+          object
+        </strong>
         <ul
           className={classNames("json-schema-2020-12-keyword__children", {
             "json-schema-2020-12-keyword__children--collapsed": !expanded,

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

@@ -3,12 +3,16 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
 
 const Deprecated = ({ schema }) => {
   if (schema?.deprecated !== true) return null
 
-  return <span className="json-schema-2020-12__deprecated">deprecated</span>
+  return (
+    <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--warning">
+      deprecated
+    </span>
+  )
 }
 
 Deprecated.propTypes = {

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

@@ -1,10 +0,0 @@
-.json-schema-2020-12 {
-  &__deprecated {
-    @include text_code();
-    color: red;
-    font-size: 12px;
-    text-transform: lowercase;
-    font-weight: normal;
-    padding-left: 10px;
-  }
-}

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

@@ -3,12 +3,16 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
 
 const ReadOnly = ({ schema }) => {
   if (schema?.readOnly !== true) return null
 
-  return <span className="json-schema-2020-12__readOnly">read-only</span>
+  return (
+    <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
+      read-only
+    </span>
+  )
 }
 
 ReadOnly.propTypes = {

src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss

@@ -1,6 +0,0 @@
-.json-schema-2020-12 {
-  &__readOnly {
-    @extend .json-schema-2020-12__deprecated;
-    color: gray;
-  }
-}

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

@@ -4,8 +4,8 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
-import { useFn } from "../../../hooks"
+import { useFn } from "../../hooks"
 
 const Type = ({ schema, isCircular }) => {
   const fn = useFn()
@@ -13,7 +13,9 @@ const Type = ({ schema, isCircular }) => {
   const circularSuffix = isCircular ? " [circular]" : ""
 
   return (
-    <span className="json-schema-2020-12__type">{`${type}${circularSuffix}`}</span>
+    <strong className="json-schema-2020-12__attribute json-schema-2020-12__attribute--primary">
+      {`${type}${circularSuffix}`}
+    </strong>
   )
 }
 

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

@@ -1,18 +0,0 @@
-.json-schema-2020-12 {
-  &__type {
-    @include text_code();
-    color: $prop-type-font-color;
-    font-size: 12px;
-    text-transform: lowercase;
-    font-weight: bold;
-    padding-left: 10px;
-  }
-
-  &-property {
-    .json-schema-2020-12__type {
-      vertical-align: middle;
-    }
-  }
-}
-
-

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

@@ -3,12 +3,16 @@
  */
 import React from "react"
 
-import { schema } from "../../../prop-types"
+import { schema } from "../../prop-types"
 
 const WriteOnly = ({ schema }) => {
   if (schema?.writeOnly !== true) return null
 
-  return <span className="json-schema-2020-12__writeOnly">write-only</span>
+  return (
+    <span className="json-schema-2020-12__attribute json-schema-2020-12__attribute--muted">
+      write-only
+    </span>
+  )
 }
 
 WriteOnly.propTypes = {

src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/_write-only.scss

@@ -1,5 +0,0 @@
-.json-schema-2020-12 {
-  &__writeOnly {
-    @extend .json-schema-2020-12__readOnly;
-  }
-}

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

@@ -65,8 +65,27 @@
   content: '='
 }
 
+.json-schema-2020-12__attribute {
+  font-family: monospace;
+  color: $text-code-default-font-color;
+  font-size: 12px;
+  text-transform: lowercase;
+  padding-left: 10px;
+
+  &--primary  {
+    color: $prop-type-font-color;
+  }
+
+  &--muted {
+    color: gray;
+  }
+
+  &--warning {
+    color: red;
+  }
+}
+
 @import './$vocabulary/$vocabulary';
-@import './Type/type';
 @import './Description/description';
 @import './Title/title';
 @import './Properties/properties';
@@ -74,6 +93,3 @@
 @import './Enum/enum';
 @import './Constraint/constraint';
 @import './DependentRequired/dependent-required';
-@import './Deprecated/deprecated';
-@import './ReadOnly/read-only';
-@import './WriteOnly/write-only';

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

@@ -30,7 +30,7 @@ import KeywordAdditionalProperties from "./components/keywords/AdditionalPropert
 import KeywordPropertyNames from "./components/keywords/PropertyNames"
 import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
-import KeywordType from "./components/keywords/Type/Type"
+import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
 import KeywordConst from "./components/keywords/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
@@ -39,9 +39,9 @@ import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import KeywordDefault from "./components/keywords/Default"
-import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordDeprecated from "./components/keywords/Deprecated"
-import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
+import KeywordReadOnly from "./components/keywords/ReadOnly"
-import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
+import KeywordWriteOnly from "./components/keywords/WriteOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"

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

@@ -28,7 +28,7 @@ import KeywordAdditionalProperties from "./components/keywords/AdditionalPropert
 import KeywordPropertyNames from "./components/keywords/PropertyNames"
 import KeywordUnevaluatedItems from "./components/keywords/UnevaluatedItems"
 import KeywordUnevaluatedProperties from "./components/keywords/UnevaluatedProperties"
-import KeywordType from "./components/keywords/Type/Type"
+import KeywordType from "./components/keywords/Type"
 import KeywordEnum from "./components/keywords/Enum/Enum"
 import KeywordConst from "./components/keywords/Const"
 import KeywordConstraint from "./components/keywords/Constraint/Constraint"
@@ -37,9 +37,9 @@ import KeywordContentSchema from "./components/keywords/ContentSchema"
 import KeywordTitle from "./components/keywords/Title/Title"
 import KeywordDescription from "./components/keywords/Description/Description"
 import KeywordDefault from "./components/keywords/Default"
-import KeywordDeprecated from "./components/keywords/Deprecated/Deprecated"
+import KeywordDeprecated from "./components/keywords/Deprecated"
-import KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
+import KeywordReadOnly from "./components/keywords/ReadOnly"
-import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
+import KeywordWriteOnly from "./components/keywords/WriteOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"