@redocly/theme 0.6.0 → 0.6.2-beta.3

package/README.md

@@ -1 +1 @@
-For more details, contact team@redocly.com
+For more details, contact team@redocly.com.

package/lib/ColorModeSwitcher/ColorModeSwitcher.js

@@ -36,7 +36,7 @@ function ColorModeSwitcher() {
     const colorMode = themeSettings.colorMode;
     const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
     const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
-    const defaultColor = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.default) || modes[0] || 'light';
+    const defaultColor = modes[0] || 'light';
     (0, hooks_1.useMount)(() => {
         setActiveColorMode(document.documentElement.className || defaultColor);
     });

package/lib/Footer/Footer.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import type { NavGroupRecord } from '@theme/types/portal';
+import type { NavGroup } from '@theme/types/portal';
 interface FooterProps {
-    data: NavGroupRecord;
+    data: {
+        items?: NavGroup;
+        copyrightText?: string;
+    };
 }
-export declare function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null;
+export declare function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null;
 export {};

package/lib/Footer/Footer.js

@@ -10,13 +10,13 @@ const FooterColumns_1 = require("../Footer/FooterColumns");
 const FooterCopyright_1 = require("../Footer/FooterCopyright");
 const utils_1 = require("../utils");
 const hooks_1 = require("../hooks");
-function Footer({ data: { columns, copyrightText } }) {
+function Footer({ data: { items, copyrightText } }) {
     const { footer } = (0, hooks_1.useThemeConfig)();
-    if ((0, utils_1.isEmptyArray)(columns) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+    if ((0, utils_1.isEmptyArray)(items) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
     return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },
-        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: columns }),
+        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
         react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
 }
 exports.Footer = Footer;

package/lib/PageNavigation/NextButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function NextButton(): JSX.Element;

package/lib/PageNavigation/{NextPageLink.js → NextButton.js}

@@ -26,24 +26,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NextPageLink = void 0;
+exports.NextButton = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../mocks/hooks");
 const Button_1 = require("../Button/Button");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-function NextPageLink() {
+function NextButton() {
     var _a, _b;
     const { nextPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
-    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return React.createElement("div", null, "\u00A0");
     }
-    const label = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.label) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
-    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
+    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPage.label || nextPage.routeSlug || '');
+    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, text));
 }
-exports.NextPageLink = NextPageLink;
+exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
 `;
-//# sourceMappingURL=NextPageLink.js.map
+//# sourceMappingURL=NextButton.js.map

package/lib/PageNavigation/PageNavigation.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageNavigation = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
-const NextPageLink_1 = require("../PageNavigation/NextPageLink");
+const PreviousButton_1 = require("../PageNavigation/PreviousButton");
+const NextButton_1 = require("../PageNavigation/NextButton");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 function PageNavigation() {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
-    if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _b === void 0 ? void 0 : _b.hide)) {
+    if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.hide)) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
-        react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
-        react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
+        react_1.default.createElement(PreviousButton_1.PreviousButton, null),
+        react_1.default.createElement(NextButton_1.NextButton, null)));
 }
 exports.PageNavigation = PageNavigation;
 const PageNavigationWrapper = styled_components_1.default.div `

package/lib/PageNavigation/PreviousButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PreviousButton(): JSX.Element;

package/lib/PageNavigation/{PreviousPageLink.js → PreviousButton.js}

@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviousPageLink = void 0;
+exports.PreviousButton = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../mocks/hooks");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const Button_1 = require("../Button/Button");
-function PreviousPageLink() {
+function PreviousButton() {
     var _a, _b;
     const { prevPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
-    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    const label = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _b === void 0 ? void 0 : _b.label) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
+    const text = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Back to {label}').replace('{label}', prevPage.label || prevPage.routeSlug || '');
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, text));
 }
-exports.PreviousPageLink = PreviousPageLink;
+exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
 `;
-//# sourceMappingURL=PreviousPageLink.js.map
+//# sourceMappingURL=PreviousButton.js.map

package/lib/PageNavigation/index.d.ts

@@ -1,3 +1,3 @@
-export * from '../PageNavigation/NextPageLink';
+export * from '../PageNavigation/NextButton';
 export * from '../PageNavigation/PageNavigation';
-export * from '../PageNavigation/PreviousPageLink';
+export * from '../PageNavigation/PreviousButton';

package/lib/PageNavigation/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../PageNavigation/NextPageLink"), exports);
+__exportStar(require("../PageNavigation/NextButton"), exports);
 __exportStar(require("../PageNavigation/PageNavigation"), exports);
-__exportStar(require("../PageNavigation/PreviousPageLink"), exports);
+__exportStar(require("../PageNavigation/PreviousButton"), exports);
 //# sourceMappingURL=index.js.map

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
+    backLink?: {
+        label: string;
+        slug: string;
+    };
 }
-export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -12,7 +12,9 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-function SidebarLayout({ versions, menu }) {
+const ArrowBack_1 = require("../Sidebar/ArrowBack");
+const Link_1 = require("../mocks/Link");
+function SidebarLayout({ versions, menu, backLink, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -23,9 +25,32 @@ function SidebarLayout({ versions, menu }) {
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+            (backLink && (react_1.default.createElement(BackLinkWrapper, null,
+                react_1.default.createElement(Link_1.Link, { to: backLink.slug },
+                    react_1.default.createElement(ArrowBack_1.ArrowBack, null),
+                    "Back to ",
+                    backLink.label)))) ||
+                null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
 }
 exports.SidebarLayout = SidebarLayout;
+const BackLinkWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/Sidebar/types/NavItem.d.ts

@@ -18,7 +18,7 @@ export interface NavItem {
     target?: string;
     external?: boolean;
     items?: NavItem[];
-    permission?: string;
+    requiredPermission?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
     version?: string;

package/lib/TableOfContent/TableOfContent.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableOfContent = void 0;
-const react_1 = __importStar(require("react"));
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useFullHeight_1 = require("../hooks/useFullHeight");
 const useActiveHeading_1 = require("../hooks/useActiveHeading");
@@ -35,31 +35,26 @@ const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const utils_1 = require("./utils");
 function TableOfContent(props) {
     const { headings, contentWrapper } = props;
-    const sidebar = (0, react_1.useRef)(null);
+    const sidebar = React.useRef(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
     const { markdown: { toc = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
-    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.maxDepth || 3);
+    const displayedHeadings = (0, utils_1.getDisplayedHeadings)(headings, toc.depth || 3);
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
     const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
-    if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
-        return null;
-    }
-    if (!(headings === null || headings === void 0 ? void 0 : headings.length)) {
-        return null;
-    }
-    return (react_1.default.createElement(react_1.default.Fragment, null, headings && (react_1.default.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
-        react_1.default.createElement(TableOfContentItems, { ref: sidebar },
-            react_1.default.createElement(TocHeader, null, toc.header || 'On this page'),
-            displayedHeadings.map((heading, idx) => {
-                if (!heading) {
-                    return null;
-                }
-                const href = '#' + heading.id;
-                return (react_1.default.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
-            }))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
+            React.createElement(TableOfContentItems, { ref: sidebar },
+                displayedHeadings.length ? React.createElement(TocHeader, null, toc.header || 'On this page') : null,
+                displayedHeadings.map((heading, idx) => {
+                    if (!heading) {
+                        return null;
+                    }
+                    const href = '#' + heading.id;
+                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+                })))));
 }
 exports.TableOfContent = TableOfContent;
 const TocHeader = styled_components_1.default.div `

package/lib/TableOfContent/utils.d.ts

@@ -1,4 +1,4 @@
 import type { MdHeading } from '@theme/types/portal';
-export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocMaxDepth: number): Array<MdHeading | null>;
+export declare function getDisplayedHeadings(headings: Array<MdHeading | null> | null | undefined, tocDepth: number): Array<MdHeading | null>;
 export declare function getDisplayedHeadingsIds(headings: Array<MdHeading | null> | null | undefined): Array<string | undefined>;
 export declare function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number;

package/lib/TableOfContent/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLeastDepth = exports.getDisplayedHeadingsIds = exports.getDisplayedHeadings = void 0;
-function getDisplayedHeadings(headings, tocMaxDepth) {
+function getDisplayedHeadings(headings, tocDepth) {
     if (!headings) {
         return [];
     }
@@ -12,7 +12,7 @@ function getDisplayedHeadings(headings, tocMaxDepth) {
         if (idx === 0 && heading.depth === 1) {
             return false;
         }
-        return !(heading.depth && heading.depth > tocMaxDepth);
+        return !(heading.depth && heading.depth > tocDepth);
     });
 }
 exports.getDisplayedHeadings = getDisplayedHeadings;