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

Refs #8513
This commit is contained in:
Vladimír Gorej
2023-05-11 15:16:00 +02:00
committed by GitHub
parent 7d14577523
commit f74ff82897
15 changed files with 66 additions and 65 deletions

View File

@@ -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,

View File

@@ -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]) => (

View File

@@ -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} />

View File

@@ -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,

View File

@@ -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 = {

View File

@@ -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;
}
}

View File

@@ -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 = {

View File

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

View File

@@ -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>
)
}

View File

@@ -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;
}
}
}

View File

@@ -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 = {

View File

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

View File

@@ -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';

View File

@@ -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"

View File

@@ -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"