@redocly/theme 0.37.3 → 0.37.4

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBlockControls';
 export type JsonProps = {
+    title?: CodeBlockControlsProps['title'];
     data: any;
     className?: string;
     expandLevel: number;

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -49,6 +49,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick }) {
     const source = JSON.stringify(data, null, 2);
     return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
         react_1.default.createElement(CodeBlock_1.CodeBlock, { header: {
+                title,
                 className: 'code-block-header',
                 controls: {
                     copy: { data, onClick: onCopyClick, handleOutside: true },

package/lib/core/styles/global.js

@@ -678,15 +678,6 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
-  /**
-    * @tokens GraphQL Docs Reference Schema Non null label
-    * @presenter Color
-    */
-
-  --schema-non-null-text-color: var(--schema-inline-code-text-color);
-  --schema-non-null-bg-color: var(--schema-inline-bg-color);
-  --schema-non-null-border-color: var(--schema-inline-border-color);
-
   /**
     * @tokens API Reference Schema Nested styles
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.37.3",
+  "version": "0.37.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/JsonViewer/JsonViewer.tsx

@@ -1,11 +1,14 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
 
+import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
+
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { JsonValue } from './helpers';
 
 export type JsonProps = {
+  title?: CodeBlockControlsProps['title'];
   data: any;
   className?: string;
   expandLevel: number;
@@ -13,7 +16,13 @@ export type JsonProps = {
   onCopyClick?: () => void;
 };
 
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick }: JsonProps): JSX.Element {
+function JsonComponent({
+  data,
+  expandLevel = 1,
+  className,
+  onCopyClick,
+  title,
+}: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
 
@@ -43,6 +52,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick }: JsonPr
     >
       <CodeBlock
         header={{
+          title,
           className: 'code-block-header',
           controls: {
             copy: { data, onClick: onCopyClick, handleOutside: true },

package/src/core/styles/global.ts

@@ -685,15 +685,6 @@ const apiReferenceDocs = css`
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
-  /**
-    * @tokens GraphQL Docs Reference Schema Non null label
-    * @presenter Color
-    */
-
-  --schema-non-null-text-color: var(--schema-inline-code-text-color);
-  --schema-non-null-bg-color: var(--schema-inline-bg-color);
-  --schema-non-null-border-color: var(--schema-inline-border-color);
-
   /**
     * @tokens API Reference Schema Nested styles
     */