From f74ff828972b8aafbe7ff578762e9186ca069e27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr=20Gorej?= <vladimir.gorej@gmail.com>
Date: Thu, 11 May 2023 15:16:00 +0200
Subject: [PATCH] refactor(json-schema-2020-12): make styles more reusable
 (#8656)

Refs #8513
---
 .../components/keywords/$defs.jsx             |  4 +++-
 .../keywords/$vocabulary/$vocabulary.jsx      |  4 +++-
 .../keywords/AdditionalProperties.jsx         |  8 +++++--
 .../components/keywords/DependentSchemas.jsx  |  4 +++-
 .../keywords/{Deprecated => }/Deprecated.jsx  |  8 +++++--
 .../keywords/Deprecated/_deprecated.scss      | 10 --------
 .../keywords/{ReadOnly => }/ReadOnly.jsx      |  8 +++++--
 .../keywords/ReadOnly/_read-only.scss         |  6 -----
 .../components/keywords/{Type => }/Type.jsx   |  8 ++++---
 .../components/keywords/Type/_type.scss       | 18 --------------
 .../keywords/{WriteOnly => }/WriteOnly.jsx    |  8 +++++--
 .../keywords/WriteOnly/_write-only.scss       |  5 ----
 .../components/keywords/_all.scss             | 24 +++++++++++++++----
 src/core/plugins/json-schema-2020-12/hoc.jsx  |  8 +++----
 src/core/plugins/json-schema-2020-12/index.js |  8 +++----
 15 files changed, 66 insertions(+), 65 deletions(-)
 rename src/core/plugins/json-schema-2020-12/components/keywords/{Deprecated => }/Deprecated.jsx (55%)
 delete mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/_deprecated.scss
 rename src/core/plugins/json-schema-2020-12/components/keywords/{ReadOnly => }/ReadOnly.jsx (54%)
 delete mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss
 rename src/core/plugins/json-schema-2020-12/components/keywords/{Type => }/Type.jsx (64%)
 delete mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss
 rename src/core/plugins/json-schema-2020-12/components/keywords/{WriteOnly => }/WriteOnly.jsx (54%)
 delete mode 100644 src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/_write-only.scss

diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx
index dc09a1b5..200d6ca2 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx
+++ b/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,
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
index 8efe641d..8ff0bc7a 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/$vocabulary/$vocabulary.jsx
+++ b/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]) => (
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx
index 8ba6999c..4ac6bed5 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/AdditionalProperties.jsx
+++ b/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} />
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx
index d4f41fb7..a9a94405 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/DependentSchemas.jsx
+++ b/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,
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/Deprecated.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated.jsx
similarity index 55%
rename from src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/Deprecated.jsx
rename to src/core/plugins/json-schema-2020-12/components/keywords/Deprecated.jsx
index 9701f580..de3fe9cc 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/Deprecated.jsx
+++ b/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 = {
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/_deprecated.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/_deprecated.scss
deleted file mode 100644
index 559c59e5..00000000
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Deprecated/_deprecated.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly.jsx
similarity index 54%
rename from src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx
rename to src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly.jsx
index 92118a01..246c80c5 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/ReadOnly.jsx
+++ b/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 = {
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss b/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss
deleted file mode 100644
index aa4130c2..00000000
--- a/src/core/plugins/json-schema-2020-12/components/keywords/ReadOnly/_read-only.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.json-schema-2020-12 {
-  &__readOnly {
-    @extend .json-schema-2020-12__deprecated;
-    color: gray;
-  }
-}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Type.jsx
similarity index 64%
rename from src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx
rename to src/core/plugins/json-schema-2020-12/components/keywords/Type.jsx
index 0d0d2d20..251280d5 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Type/Type.jsx
+++ b/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 { useFn } from "../../../hooks"
+import { schema } from "../../prop-types"
+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>
   )
 }
 
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss b/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss
deleted file mode 100644
index 616dd630..00000000
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Type/_type.scss
+++ /dev/null
@@ -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;
-    }
-  }
-}
-
-
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/WriteOnly.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly.jsx
similarity index 54%
rename from src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/WriteOnly.jsx
rename to src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly.jsx
index bc5dd568..1b382b9b 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/WriteOnly.jsx
+++ b/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 = {
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/_write-only.scss b/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/_write-only.scss
deleted file mode 100644
index 461f2dbf..00000000
--- a/src/core/plugins/json-schema-2020-12/components/keywords/WriteOnly/_write-only.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.json-schema-2020-12 {
-  &__writeOnly {
-    @extend .json-schema-2020-12__readOnly;
-  }
-}
diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss b/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
index 78aa7094..36d93dc9 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/_all.scss
+++ b/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';
diff --git a/src/core/plugins/json-schema-2020-12/hoc.jsx b/src/core/plugins/json-schema-2020-12/hoc.jsx
index cfd4d73b..32825070 100644
--- a/src/core/plugins/json-schema-2020-12/hoc.jsx
+++ b/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 KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
-import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
+import KeywordDeprecated from "./components/keywords/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly"
+import KeywordWriteOnly from "./components/keywords/WriteOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"
diff --git a/src/core/plugins/json-schema-2020-12/index.js b/src/core/plugins/json-schema-2020-12/index.js
index 4bef023d..3392b90d 100644
--- a/src/core/plugins/json-schema-2020-12/index.js
+++ b/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 KeywordReadOnly from "./components/keywords/ReadOnly/ReadOnly"
-import KeywordWriteOnly from "./components/keywords/WriteOnly/WriteOnly"
+import KeywordDeprecated from "./components/keywords/Deprecated"
+import KeywordReadOnly from "./components/keywords/ReadOnly"
+import KeywordWriteOnly from "./components/keywords/WriteOnly"
 import Accordion from "./components/Accordion/Accordion"
 import ExpandDeepButton from "./components/ExpandDeepButton/ExpandDeepButton"
 import ChevronRightIcon from "./components/icons/ChevronRight"