@redocly/theme 0.17.0 → 0.17.1

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

@@ -12,4 +12,3 @@ export declare const JsonViewer: import("styled-components").StyledComponent<Rea
     'data-component-name': string;
 } & JsonProps, "data-component-name">;
 export declare const JsonViewerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledCodeBlock: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/JsonViewer/JsonViewer.js

@@ -26,11 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCodeBlock = exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
+exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CopyButton_1 = require("../../components/CopyButton");
-const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
 const utils_1 = require("../../utils");
 const hooks_1 = require("../../hooks");
 const CodeBlock_1 = require("../../components/CodeBlock");
@@ -44,6 +42,11 @@ function JsonComponent({ data, jsonSampleExpandLevel, className, withLineNumbers
         var _a;
         (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
     });
+    const setRef = (instance) => {
+        if (instance)
+            node.current = instance;
+    };
+    const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const expandAll = () => {
         var _a, _b;
         const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
@@ -85,19 +88,14 @@ function JsonComponent({ data, jsonSampleExpandLevel, className, withLineNumbers
     const clickListener = (event) => {
         collapseElement(event.target);
     };
-    const renderInner = ({ renderCopyButton }) => {
-        const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-        return (react_1.default.createElement(exports.JsonViewerWrap, { "data-cy": "json-viewer" },
-            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "buttons" },
-                renderCopyButton(),
-                showFoldingButtons && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: expandAll, "data-cy": "expand-all" }, "Expand all"),
-                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: collapseAll, "data-cy": "collapse-all" }, "Collapse all")))),
-            react_1.default.createElement(exports.StyledCodeBlock, { className: withLineNumbers ? `${className} line-numbers` : className, ref: node, dangerouslySetInnerHTML: {
-                    __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber),
-                } })));
-    };
-    return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data, onCopyClick: onCopyClick }, renderInner));
+    return (react_1.default.createElement(exports.JsonViewerWrap, { "data-cy": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
+        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: {
+                controls: {
+                    copy: { data, onClick: onCopyClick, handleOutside: true },
+                    expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+                    collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                },
+            }, codeBlockRef: setRef, withLineNumbers: withLineNumbers, highlightedHtml: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber) })));
 }
 exports.Json = (0, react_1.memo)(JsonComponent);
 exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() => ({
@@ -110,131 +108,114 @@ exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() =>
     border: none;
   }
 
-  contain: content;
-  overflow-x: auto;
-  position: relative;
-  padding: 10px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-samples-code-block-background-color);
-  color: var(--text-color-inverse);
-  font-size: var(--code-font-size);
-  font-family: var(--code-font-family);
-  white-space: var(--code-wrap, pre);
-
-  &.line-numbers {
-    padding: 20px 20px 20px 3em;
-
-    *[data-line]:not(.collapsed *[data-line]) {
-      &:before {
-        content: attr(data-line);
-        position: absolute;
-        left: 0;
-        min-width: 2em;
-        text-align: right;
-        pointer-events: none;
-        user-select: none;
-        padding: 0 0.5em;
-        font-size: 13px;
+  pre {
+    contain: content;
+    overflow-x: auto;
+    position: relative;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+    &.line-numbers {
+      padding: 20px 20px 20px 3em;
+
+      *[data-line]:not(.collapsed *[data-line]) {
+        &:before {
+          content: attr(data-line);
+          position: absolute;
+          left: 0;
+          min-width: 2em;
+          text-align: right;
+          pointer-events: none;
+          user-select: none;
+          padding: 0 0.5em;
+          font-size: 13px;
+        }
       }
     }
-  }
 
-  .callback-function {
-    color: gray;
-  }
+    .callback-function {
+      color: gray;
+    }
 
-  .ellipsis:after {
-    content: ' … ';
-  }
+    .ellipsis:after {
+      content: ' … ';
+    }
 
-  .collapsible {
-    padding-left: 2ch;
-    display: inline-block;
-  }
+    .collapsible {
+      padding-left: 2ch;
+      display: inline-block;
+    }
 
-  .hoverable {
-    padding: 1px 2px;
-    display: inline-block;
-  }
+    .hoverable {
+      padding: 1px 2px;
+      display: inline-block;
+    }
 
-  .collapsed {
-    white-space: nowrap;
+    .collapsed {
+      white-space: nowrap;
 
-    & > .collapser:after {
-      content: '+';
+      & > .collapser:after {
+        content: '+';
+      }
     }
-  }
-
-  .hovered {
-    background-color: rgba(235, 238, 249, 1);
-  }
 
-  .collapser {
-    --size: 15px;
-    --margin-right: 3px;
-
-    display: inline-block;
-    background-color: transparent;
-    border: 0;
-    padding: 1px;
-    color: #fff;
-    width: var(--size);
-    height: var(--size);
-    margin-left: calc((var(--size) + var(--margin-right)) * -1);
-    margin-right: var(--margin-right);
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
-
-    &:after {
-      content: '-';
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
+    .hovered {
+      background-color: rgba(235, 238, 249, 1);
     }
 
-    &:focus {
-      outline: #fff dotted 1px;
+    .collapser {
+      --size: 15px;
+      --margin-right: 3px;
+
+      display: inline-block;
+      background-color: transparent;
+      border: 0;
+      padding: 1px;
+      color: #fff;
+      width: var(--size);
+      height: var(--size);
+      margin-left: calc((var(--size) + var(--margin-right)) * -1);
+      margin-right: var(--margin-right);
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      font-family: var(--code-font-family);
+      font-size: var(--code-font-size);
+
+      &:after {
+        content: '-';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+      }
+
+      &:focus {
+        outline: #fff dotted 1px;
+      }
     }
-  }
 
-  .selected {
-    outline-width: 1px;
-    outline-style: dotted;
-  }
+    .selected {
+      outline-width: 1px;
+      outline-style: dotted;
+    }
 
-  .collapsed > .collapsible {
-    display: none;
-  }
+    .collapsed > .collapsible {
+      display: none;
+    }
 
-  .ellipsis {
-    display: none;
-  }
+    .ellipsis {
+      display: none;
+    }
 
-  .collapsed > .ellipsis {
-    display: inline;
+    .collapsed > .ellipsis {
+      display: inline;
+    }
   }
 `;
 exports.JsonViewerWrap = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   flex: 1;
-
-  &:hover > ${SamplesPanelControls_1.SampleControls} {
-    opacity: 1;
-  }
-`;
-exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock) `
-  flex: 1;
-
-  code {
-    font-family: var(--code-font-family);
-    font-size: 14px;
-    line-height: 18px;
-  }
 `;
 //# sourceMappingURL=JsonViewer.js.map

package/lib/components/Markdown/MarkdownWrapper.d.ts

@@ -1,4 +1,8 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare const baseTable: FlattenSimpleInterpolation;
+export declare const linksCss: FlattenSimpleInterpolation;
 export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
-export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {
+    compact?: boolean | undefined;
+    inline?: boolean | undefined;
+}, never>;

package/lib/components/Markdown/MarkdownWrapper.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
+exports.MarkdownWrapper = exports.headingAnchor = exports.linksCss = exports.baseTable = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const theme_helpers_1 = require("../../utils/theme-helpers");
 exports.baseTable = (0, styled_components_1.css) `
@@ -105,6 +105,28 @@ exports.baseTable = (0, styled_components_1.css) `
     }
   }
 `;
+exports.linksCss = (0, styled_components_1.css) `
+  a:not([role='button']) {
+    text-decoration: var(--link-decoration);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+
+    &:visited {
+      color: var(--link-visited-text-color);
+      text-decoration: var(--link-visited-decoration);
+    }
+
+    &:hover {
+      text-decoration: var(--link-hover-decoration);
+      color: var(--link-hover-text-color);
+    }
+
+    &:focus {
+      color: var(--link-active-text-color);
+      text-decoration: var(--link-active-decoration);
+    }
+  }
+`;
 // TODO: Can users specify another className or we should hardcode it?
 function headingAnchor(className = 'anchor') {
     return (0, styled_components_1.css) `
@@ -150,26 +172,24 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
 
-  a:not([role='button']) {
-    text-decoration: var(--link-decoration);
-    color: var(--link-text-color);
-    font-weight: var(--link-font-weight);
-
-    &:visited {
-      color: var(--link-visited-text-color);
-      text-decoration: var(--link-visited-decoration);
-    }
+  ${({ compact }) => compact &&
+    (0, styled_components_1.css) `
+      p:first-child {
+        margin-top: 0;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    `}
 
-    &:hover {
-      text-decoration: var(--link-hover-decoration);
-      color: var(--link-hover-text-color);
-    }
+  ${({ inline }) => inline &&
+    (0, styled_components_1.css) `
+      p {
+        display: inline-block;
+      }
+    `}
 
-    &:focus {
-      color: var(--link-active-text-color);
-      text-decoration: var(--link-active-decoration);
-    }
-  }
+  ${exports.linksCss}
 
   img {
     max-width: 100%;
@@ -221,40 +241,6 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
 
   ${exports.baseTable};
 
-  .code-snippets-tabs {
-    .snippets-tabs-headers {
-      font-size: 0.9em;
-
-      font-family: var(--heading-font-family);
-
-      .tab-header {
-        text-align: center;
-        padding: 0.2em 0.5em;
-        display: inline-block;
-        cursor: pointer;
-        color: var(--text-color-secondary);
-
-        &.active {
-          color: var(--heading-text-color);
-          font-weight: var(--font-weight-bold);
-        }
-      }
-    }
-
-    .tab-content {
-      margin-top: 4px;
-      display: none;
-
-      pre {
-        margin-top: 0;
-      }
-
-      &.active {
-        display: block;
-      }
-    }
-  }
-
   p {
     margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
 
@@ -339,6 +325,26 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
     font-family: var(--code-font-family);
   }
 
+  pre {
+    white-space: var(--code-wrap, pre);
+    background-color: var(--code-block-background-color);
+    font-family: var(--code-block-font-family);
+    color: var(--code-block-text-color);
+    padding: calc(var(--spacing-unit) * 2);
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: var(--code-block-border-radius);
+    border: 1px solid var(--code-block-border-color);
+
+    code {
+      background-color: transparent;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      border: none;
+    }
+  }
+
   blockquote {
     margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
     padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);

package/lib/components/Menu/MobileMenu.js

@@ -80,11 +80,11 @@ function MobileMenu({ navItems, sidebarItems, className, }) {
         react_1.default.createElement(ScrollableArea, null,
             isButtonsSectionVisible && (react_1.default.createElement(ButtonsSection, { alignRight: isPreviousButtonVisible },
                 isMenuButtonVisible && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(MenuLevel.NAVBAR) },
-                    react_1.default.createElement(icons_1.ExpandIcon, { direction: "left" }),
+                    react_1.default.createElement(icons_1.ArrowIcon, { direction: "left", weight: "thin" }),
                     react_1.default.createElement(ControlButtonLabel, { paddingDirection: "left" }, translate(translationKeys.mainMenu, 'Main Menu')))),
                 isPreviousButtonVisible && (react_1.default.createElement(exports.ControlButton, { "data-component-name": "Menu/ControlButton", onClick: () => setMenuLevel(MenuLevel.SIDEBAR) },
                     react_1.default.createElement(ControlButtonLabel, { paddingDirection: "right" }, translate(translationKeys.previous, 'Previous')),
-                    react_1.default.createElement(icons_1.ExpandIcon, { direction: "right" }))))),
+                    react_1.default.createElement(icons_1.ArrowIcon, { direction: "right", weight: "thin" }))))),
             react_1.default.createElement(MenuWrapper, null,
                 react_1.default.createElement(index_1.Menu, { items: menuItems, isMobile: true }))),
         react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));

package/lib/components/Menu/MobileMenuGroup.js

@@ -18,7 +18,7 @@ function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }) {
             react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded },
                 react_1.default.createElement(LabelContainer, null,
                     react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
-                !!item.items.length && react_1.default.createElement(icons_1.ExpandIcon, { direction: isExpanded ? 'down' : 'right' }))),
+                !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }

package/lib/components/Panel/PanelHeader.js

@@ -10,7 +10,6 @@ exports.PanelHeader = styled_components_1.default.div.attrs(({ className }) => (
     className,
 })) `
   position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/lib/components/Tooltip/Tooltip.js

@@ -151,6 +151,8 @@ const TooltipBody = styled_components_1.default.span `
 
   font-size: 13px;
 
+  z-index: var(--z-index-overlay);
+
   &::after {
     position: absolute;
 

package/lib/components/index.d.ts

@@ -13,9 +13,7 @@ export * from './CodeBlock';
 export * from './OpenApiDocs/hooks/OpenApiFooter';
 export * from './OpenApiDocs/hooks/OpenApiHeader';
 export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
-export * from './SamplesPanelControls';
 export * from './Tooltip';
-export * from './SourceCode';
 export * from './Panel';
 export * from './Feedback';
 export * from './OperationBadge';
@@ -28,7 +26,6 @@ export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
 export * from './Tags';
-export * from './CodeSample';
 export * from './Tabs';
 export * from './Menu';
 export * from './Separator';

package/lib/components/index.js

@@ -29,9 +29,7 @@ __exportStar(require("./CodeBlock"), exports);
 __exportStar(require("./OpenApiDocs/hooks/OpenApiFooter"), exports);
 __exportStar(require("./OpenApiDocs/hooks/OpenApiHeader"), exports);
 __exportStar(require("./OpenApiDocs/hooks/OpenApiTryItSecurityPanel"), exports);
-__exportStar(require("./SamplesPanelControls"), exports);
 __exportStar(require("./Tooltip"), exports);
-__exportStar(require("./SourceCode"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./Feedback"), exports);
 __exportStar(require("./OperationBadge"), exports);
@@ -44,7 +42,6 @@ __exportStar(require("./OpenApiDocs"), exports);
 __exportStar(require("./SidebarActions"), exports);
 __exportStar(require("./Filter"), exports);
 __exportStar(require("./Tags"), exports);
-__exportStar(require("./CodeSample"), exports);
 __exportStar(require("./Tabs"), exports);
 __exportStar(require("./Menu"), exports);
 __exportStar(require("./Separator"), exports);

package/lib/config.d.ts

@@ -881,31 +881,21 @@ export declare const themeConfigSchema: {
         readonly codeSnippet: {
             readonly type: "object";
             readonly properties: {
+                readonly controlsStyle: {
+                    readonly type: "string";
+                    readonly default: "icon";
+                };
                 readonly copy: {
                     readonly type: "object";
                     readonly properties: {
                         readonly hide: {
                             readonly type: "boolean";
                         };
-                        readonly buttonText: {
-                            readonly type: "string";
-                            readonly default: "Copy";
-                        };
-                        readonly tooltipText: {
-                            readonly type: "string";
-                            readonly default: "Copy to clipboard";
-                        };
-                        readonly toasterText: {
-                            readonly type: "string";
-                            readonly default: "Copied!";
-                        };
-                        readonly toasterDuration: {
-                            readonly type: "number";
-                            readonly default: 1500;
-                        };
                     };
                     readonly additionalProperties: false;
-                    readonly default: {};
+                    readonly default: {
+                        readonly hide: false;
+                    };
                 };
                 readonly report: {
                     readonly type: "object";
@@ -913,17 +903,34 @@ export declare const themeConfigSchema: {
                         readonly hide: {
                             readonly type: "boolean";
                         };
-                        readonly tooltipText: {
-                            readonly type: "string";
-                            readonly default: "Report a problem";
+                    };
+                    readonly additionalProperties: false;
+                    readonly default: {
+                        readonly hide: true;
+                    };
+                };
+                readonly expand: {
+                    readonly type: "object";
+                    readonly properties: {
+                        readonly hide: {
+                            readonly type: "boolean";
                         };
-                        readonly label: {
-                            readonly type: "string";
+                    };
+                    readonly additionalProperties: false;
+                    readonly default: {
+                        readonly hide: false;
+                    };
+                };
+                readonly collapse: {
+                    readonly type: "object";
+                    readonly properties: {
+                        readonly hide: {
+                            readonly type: "boolean";
                         };
                     };
                     readonly additionalProperties: false;
                     readonly default: {
-                        readonly hide: true;
+                        readonly hide: false;
                     };
                 };
             };

package/lib/config.js

@@ -369,18 +369,31 @@ exports.themeConfigSchema = {
         codeSnippet: {
             type: 'object',
             properties: {
+                controlsStyle: { type: 'string', default: 'icon' },
                 copy: {
                     type: 'object',
-                    properties: Object.assign({ buttonText: { type: 'string', default: 'Copy' }, tooltipText: { type: 'string', default: 'Copy to clipboard' }, toasterText: { type: 'string', default: 'Copied!' }, toasterDuration: { type: 'number', default: 1500 } }, hideConfigSchema.properties),
+                    properties: Object.assign({}, hideConfigSchema.properties),
                     additionalProperties: false,
-                    default: {},
+                    default: { hide: false },
                 },
                 report: {
                     type: 'object',
-                    properties: Object.assign({ tooltipText: { type: 'string', default: 'Report a problem' }, label: { type: 'string' } }, hideConfigSchema.properties),
+                    properties: Object.assign({}, hideConfigSchema.properties),
                     additionalProperties: false,
                     default: { hide: true },
                 },
+                expand: {
+                    type: 'object',
+                    properties: Object.assign({}, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: { hide: false },
+                },
+                collapse: {
+                    type: 'object',
+                    properties: Object.assign({}, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: { hide: false },
+                },
             },
             additionalProperties: false,
             default: {},