@redocly/theme 0.5.1 → 0.6.1

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/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;

package/lib/config.d.ts

@@ -17,19 +17,30 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         link?: string | undefined;
         favicon?: string | undefined;
     }>>;
-    navbar: z.ZodOptional<z.ZodObject<{
+    navbar: z.ZodOptional<z.ZodObject<z.extendShape<{
+        items: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
+    }, {
         hide: z.ZodOptional<z.ZodBoolean>;
-    }, "strict", z.ZodTypeAny, {
+    }>, "strict", z.ZodTypeAny, {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
     }, {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
     }>>;
-    footer: z.ZodOptional<z.ZodObject<{
+    footer: z.ZodOptional<z.ZodObject<z.extendShape<{
+        items: z.ZodOptional<z.ZodArray<z.ZodAny, "many">>;
+        copyrightText: z.ZodOptional<z.ZodString>;
+    }, {
         hide: z.ZodOptional<z.ZodBoolean>;
-    }, "strict", z.ZodTypeAny, {
+    }>, "strict", z.ZodTypeAny, {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
+        copyrightText?: string | undefined;
     }, {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
+        copyrightText?: string | undefined;
     }>>;
     sidebar: z.ZodOptional<z.ZodObject<{
         hide: z.ZodOptional<z.ZodBoolean>;
@@ -38,11 +49,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     }, {
         hide?: boolean | undefined;
     }>>;
-    navbarItems: z.ZodOptional<z.ZodAny>;
-    footerItems: z.ZodOptional<z.ZodAny>;
     scripts: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
     postBodyScripts: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
-    styles: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
+    stylesheets: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodBoolean, z.ZodString]>>]>, "many">>;
     search: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
         placement: z.ZodOptional<z.ZodDefault<z.ZodString>>;
     }, {
@@ -55,66 +64,63 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         placement?: string | undefined;
     }>>>;
     colorMode: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
-        disableDetect: z.ZodOptional<z.ZodBoolean>;
-        default: z.ZodOptional<z.ZodString>;
+        ignoreDetection: z.ZodOptional<z.ZodBoolean>;
         modes: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
     }, {
         hide: z.ZodOptional<z.ZodBoolean>;
     }>, "strict", z.ZodTypeAny, {
         hide?: boolean | undefined;
-        disableDetect?: boolean | undefined;
-        default?: string | undefined;
+        ignoreDetection?: boolean | undefined;
         modes?: string[] | undefined;
     }, {
         hide?: boolean | undefined;
-        disableDetect?: boolean | undefined;
-        default?: string | undefined;
+        ignoreDetection?: boolean | undefined;
         modes?: string[] | undefined;
     }>>>;
     navigation: z.ZodDefault<z.ZodOptional<z.ZodObject<{
-        nextPageLink: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
-            label: z.ZodDefault<z.ZodString>;
+        nextButton: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+            text: z.ZodDefault<z.ZodString>;
         }, {
             hide: z.ZodOptional<z.ZodBoolean>;
         }>, "strip", z.ZodTypeAny, {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         }, {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         }>>>;
-        prevPageLink: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
-            label: z.ZodDefault<z.ZodString>;
+        previousButton: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+            text: z.ZodDefault<z.ZodString>;
         }, {
             hide: z.ZodOptional<z.ZodBoolean>;
         }>, "strip", z.ZodTypeAny, {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         }, {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         }>>>;
     }, "strict", z.ZodTypeAny, {
-        nextPageLink: {
+        nextButton: {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         };
-        prevPageLink: {
+        previousButton: {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         };
     }, {
-        nextPageLink?: {
+        nextButton?: {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         } | undefined;
-        prevPageLink?: {
+        previousButton?: {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     }>>>;
     markdown: z.ZodOptional<z.ZodDefault<z.ZodObject<{
-        frontmatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
+        frontMatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
         lastUpdatedBlock: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
             format: z.ZodOptional<z.ZodDefault<z.ZodEnum<["timeago", "iso", "long", "short"]>>>;
             locale: z.ZodOptional<z.ZodDefault<z.ZodString>>;
@@ -131,17 +137,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         }>>>;
         toc: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
             header: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-            maxDepth: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
+            depth: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
         }, {
             hide: z.ZodOptional<z.ZodBoolean>;
         }>, "strip", z.ZodTypeAny, {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         }, {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         }>>>;
         editPage: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
             baseUrl: z.ZodOptional<z.ZodString>;
@@ -156,9 +162,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text: string;
         }, {
             hide?: boolean | undefined;
+            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
-            text?: string | undefined;
         }>>>;
         copyCodeSnippet: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
             buttonText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
@@ -181,7 +187,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterDuration?: number | undefined;
         }>>>;
     }, "strict", z.ZodTypeAny, {
-        frontmatterKeysToResolve?: string[] | undefined;
+        frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
             hide?: boolean | undefined;
             format?: "timeago" | "iso" | "long" | "short" | undefined;
@@ -196,7 +202,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         toc: {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         };
         copyCodeSnippet: {
             hide?: boolean | undefined;
@@ -206,7 +212,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             toasterDuration?: number | undefined;
         };
     }, {
-        frontmatterKeysToResolve?: string[] | undefined;
+        frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
             hide?: boolean | undefined;
             format?: "timeago" | "iso" | "long" | "short" | undefined;
@@ -215,13 +221,13 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         toc?: {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
+            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
-            text?: string | undefined;
         } | undefined;
         copyCodeSnippet?: {
             hide?: boolean | undefined;
@@ -243,24 +249,25 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     } | undefined;
     navbar?: {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
     } | undefined;
     footer?: {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
+        copyrightText?: string | undefined;
     } | undefined;
     sidebar?: {
         hide?: boolean | undefined;
     } | undefined;
-    navbarItems?: any;
-    footerItems?: any;
     scripts?: (string | Record<string, string | boolean>)[] | undefined;
     postBodyScripts?: (string | Record<string, string | boolean>)[] | undefined;
-    styles?: (string | Record<string, string | boolean>)[] | undefined;
+    stylesheets?: (string | Record<string, string | boolean>)[] | undefined;
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
     } | undefined;
     markdown?: {
-        frontmatterKeysToResolve?: string[] | undefined;
+        frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
             hide?: boolean | undefined;
             format?: "timeago" | "iso" | "long" | "short" | undefined;
@@ -275,7 +282,7 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         toc: {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         };
         copyCodeSnippet: {
             hide?: boolean | undefined;
@@ -289,18 +296,17 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     graphql?: {} | undefined;
     colorMode: {
         hide?: boolean | undefined;
-        disableDetect?: boolean | undefined;
-        default?: string | undefined;
+        ignoreDetection?: boolean | undefined;
         modes?: string[] | undefined;
     };
     navigation: {
-        nextPageLink: {
+        nextButton: {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         };
-        prevPageLink: {
+        previousButton: {
             hide?: boolean | undefined;
-            label: string;
+            text: string;
         };
     };
 }, {
@@ -313,40 +319,40 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     } | undefined;
     navbar?: {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
     } | undefined;
     footer?: {
         hide?: boolean | undefined;
+        items?: any[] | undefined;
+        copyrightText?: string | undefined;
     } | undefined;
     sidebar?: {
         hide?: boolean | undefined;
     } | undefined;
-    navbarItems?: any;
-    footerItems?: any;
     scripts?: (string | Record<string, string | boolean>)[] | undefined;
     postBodyScripts?: (string | Record<string, string | boolean>)[] | undefined;
-    styles?: (string | Record<string, string | boolean>)[] | undefined;
+    stylesheets?: (string | Record<string, string | boolean>)[] | undefined;
     search?: {
         hide?: boolean | undefined;
         placement?: string | undefined;
     } | undefined;
     colorMode?: {
         hide?: boolean | undefined;
-        disableDetect?: boolean | undefined;
-        default?: string | undefined;
+        ignoreDetection?: boolean | undefined;
         modes?: string[] | undefined;
     } | undefined;
     navigation?: {
-        nextPageLink?: {
+        nextButton?: {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         } | undefined;
-        prevPageLink?: {
+        previousButton?: {
             hide?: boolean | undefined;
-            label?: string | undefined;
+            text?: string | undefined;
         } | undefined;
     } | undefined;
     markdown?: {
-        frontmatterKeysToResolve?: string[] | undefined;
+        frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
             hide?: boolean | undefined;
             format?: "timeago" | "iso" | "long" | "short" | undefined;
@@ -355,13 +361,13 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         toc?: {
             hide?: boolean | undefined;
             header?: string | undefined;
-            maxDepth?: number | undefined;
+            depth?: number | undefined;
         } | undefined;
         editPage?: {
             hide?: boolean | undefined;
+            text?: string | undefined;
             baseUrl?: string | undefined;
             icon?: string | undefined;
-            text?: string | undefined;
         } | undefined;
         copyCodeSnippet?: {
             hide?: boolean | undefined;
@@ -375,9 +381,9 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     graphql?: {} | undefined;
 }>>;
 export declare type ThemeConfig = z.infer<typeof ThemeConfig>;
-export declare type ThemeUIConfig = Omit<ThemeConfig, 'navbarItems' | 'footerItems' | 'styles' | 'scripts' | 'postBodyScripts'> & {
-    navbarItems?: any;
-    footerItems?: any;
+export declare type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'styles' | 'scripts' | 'postBodyScripts'> & {
+    navbar?: any;
+    footer?: any;
     auth?: {
         idpIds?: string[];
         devLogin?: boolean;

package/lib/config.js

@@ -17,18 +17,31 @@ exports.ThemeConfig = zod_1.z
     .object({
     imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
     logo: LogoConfig.optional(),
-    navbar: HideConfig.strict().optional(),
-    footer: HideConfig.strict().optional(),
+    navbar: zod_1.z
+        .object({
+        items: zod_1.z.array(zod_1.z.any()).optional(), // todo: think about validation here
+    })
+        .extend(HideConfig.shape)
+        .strict()
+        .optional(),
+    footer: zod_1.z
+        .object({
+        items: zod_1.z.array(zod_1.z.any()).optional(),
+        copyrightText: zod_1.z.string().optional(),
+    })
+        .extend(HideConfig.shape)
+        .strict()
+        .optional(),
     sidebar: HideConfig.strict().optional(),
-    navbarItems: zod_1.z.any().optional(),
-    footerItems: zod_1.z.any().optional(),
     scripts: zod_1.z
         .array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
         .optional(),
     postBodyScripts: zod_1.z
         .array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
         .optional(),
-    styles: zod_1.z.array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))])).optional(),
+    stylesheets: zod_1.z
+        .array(zod_1.z.union([zod_1.z.string(), zod_1.z.record(zod_1.z.union([zod_1.z.boolean(), zod_1.z.string()]))]))
+        .optional(),
     search: zod_1.z
         .object({
         placement: zod_1.z.string().default('navbar').optional(),
@@ -39,8 +52,7 @@ exports.ThemeConfig = zod_1.z
         .optional(),
     colorMode: zod_1.z
         .object({
-        disableDetect: zod_1.z.boolean().optional(),
-        default: zod_1.z.string().optional(),
+        ignoreDetection: zod_1.z.boolean().optional(),
         modes: zod_1.z.array(zod_1.z.string()).default(['light', 'dark']).optional(),
     })
         .extend(HideConfig.shape)
@@ -49,13 +61,13 @@ exports.ThemeConfig = zod_1.z
         .default({}),
     navigation: zod_1.z
         .object({
-        nextPageLink: zod_1.z
-            .object({ label: zod_1.z.string().default('Next to {label}') })
+        nextButton: zod_1.z
+            .object({ text: zod_1.z.string().default('Next to {label}') })
             .extend(HideConfig.shape)
             .optional()
             .default({}),
-        prevPageLink: zod_1.z
-            .object({ label: zod_1.z.string().default('Back to {label}') })
+        previousButton: zod_1.z
+            .object({ text: zod_1.z.string().default('Back to {label}') })
             .extend(HideConfig.shape)
             .optional()
             .default({}),
@@ -65,7 +77,7 @@ exports.ThemeConfig = zod_1.z
         .default({}),
     markdown: zod_1.z
         .object({
-        frontmatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
+        frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
         lastUpdatedBlock: zod_1.z
             .object({
             format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
@@ -77,7 +89,7 @@ exports.ThemeConfig = zod_1.z
         toc: zod_1.z
             .object({
             header: zod_1.z.string().default('On this page').optional(),
-            maxDepth: zod_1.z.number().default(3).optional(),
+            depth: zod_1.z.number().default(3).optional(),
         })
             .extend(HideConfig.shape)
             .optional()

package/lib/index.d.ts

@@ -17,5 +17,6 @@ export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
 export * from './ColorModeSwitcher';
+export * from './Sidebar';
 export * from './types/config';
 export * from './config';

package/lib/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./OperationBadge"), exports);
 __exportStar(require("./TableOfContent"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./ColorModeSwitcher"), exports);
+__exportStar(require("./Sidebar"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mocks/hooks/index.js

@@ -5,7 +5,7 @@ function useThemeConfig() {
     return {
         search: { hide: false, placement: 'navbar' },
         markdown: {
-            toc: { maxDepth: 3, header: 'Table of contents', hide: false },
+            toc: { depth: 3, header: 'Table of contents', hide: false },
             lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
             copyCodeSnippet: {
                 hide: false,
@@ -18,15 +18,14 @@ function useThemeConfig() {
                 baseUrl: '',
                 text: 'Edit this page',
             },
-            frontmatterKeysToResolve: ['image', 'links'],
+            frontMatterKeysToResolve: ['image', 'links'],
         },
         navigation: {
-            nextPageLink: { label: 'next page theme config label' },
-            prevPageLink: { label: 'prev page theme config label' },
+            nextButton: { text: 'next page theme config label' },
+            previousButton: { text: 'prev page theme config label' },
         },
         colorMode: {
             modes: ['light', 'dark'],
-            default: 'light',
         },
     };
 }

package/lib/mocks/utils.js

@@ -6,7 +6,7 @@ function withPathPrefix(link) {
 }
 exports.withPathPrefix = withPathPrefix;
 function timeAgo(lastModified) {
-    // should return format(lastModified) in new-hope
+    // should return format(lastModified) in portal
     const d = new Date(lastModified);
     return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -56,13 +56,13 @@
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/node-logger": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.11",
+    "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.1.2",
+    "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^16.11.26",
@@ -70,20 +70,18 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.1",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
     "esbuild": "^0.15.11",
-    "jest": "^29.2.0",
-    "jest-environment-jsdom": "^29.2.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
     "jest-when": "^3.5.1",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-refresh": "^0.14.0",
     "react-router-dom": "^5.3.0",
     "storybook-addon-pseudo-states": "^1.15.1",

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

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

package/src/Footer/Footer.tsx

@@ -5,22 +5,25 @@ import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
 import { useThemeConfig } from '@theme/hooks';
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
+import type { NavGroup, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
-  data: NavGroupRecord;
+  data: {
+    items?: NavGroup;
+    copyrightText?: string;
+  };
 }
 
-export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
+export function Footer({ data: { items, copyrightText } }: FooterProps): JSX.Element | null {
   const { footer } = useThemeConfig();
 
-  if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
+  if (isEmptyArray(items) || !copyrightText || footer?.hide) {
     return null;
   }
 
   return (
     <FooterContainer data-component-name="Footer/Footer">
-      <FooterColumns columns={columns as ResolvedNavItem[]} />
+      <FooterColumns columns={items as ResolvedNavItem[]} />
       <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>
   );

package/src/PageNavigation/{NextPageLink.tsx → NextButton.tsx}

@@ -10,15 +10,15 @@ interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
 }
 
-export function NextPageLink(): JSX.Element {
+export function NextButton(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeConfig();
 
-  if (!nextPage || navigation?.nextPageLink?.hide) {
+  if (!nextPage || navigation?.nextButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = (navigation?.nextPageLink?.label || 'Next to {label}').replace(
+  const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
     '{label}',
     nextPage.label || nextPage.routeSlug || '',
   );
@@ -30,7 +30,7 @@ export function NextPageLink(): JSX.Element {
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
     >
-      {label}
+      {text}
     </StyledButton>
   );
 }

package/src/PageNavigation/PageNavigation.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
-import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
+import { PreviousButton } from '@theme/PageNavigation/PreviousButton';
+import { NextButton } from '@theme/PageNavigation/NextButton';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export function PageNavigation(): JSX.Element | null {
   const { navigation } = useThemeConfig();
 
-  if (navigation?.prevPageLink?.hide && navigation?.nextPageLink?.hide) {
+  if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
     return null;
   }
 
   return (
     <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousPageLink />
-      <NextPageLink />
+      <PreviousButton />
+      <NextButton />
     </PageNavigationWrapper>
   );
 }

package/src/PageNavigation/{PreviousPageLink.tsx → PreviousButton.tsx}

@@ -10,15 +10,15 @@ interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;
 }
 
-export function PreviousPageLink(): JSX.Element {
+export function PreviousButton(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { navigation } = useThemeConfig();
 
-  if (!prevPage || navigation?.prevPageLink?.hide) {
+  if (!prevPage || navigation?.previousButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = (navigation?.prevPageLink?.label || 'Back to {label}').replace(
+  const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
     '{label}',
     prevPage.label || prevPage.routeSlug || '',
   );
@@ -30,7 +30,7 @@ export function PreviousPageLink(): JSX.Element {
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
     >
-      {label}
+      {text}
     </StyledButton>
   );
 }

package/src/PageNavigation/index.ts

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

package/src/TableOfContent/TableOfContent.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
@@ -16,11 +16,11 @@ interface TableOfContentProps {
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const { headings, contentWrapper } = props;
 
-  const sidebar = useRef<HTMLDivElement | null>(null);
+  const sidebar = React.useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
   const { markdown: { toc = {} } = {} } = useThemeConfig();
 
-  const displayedHeadings = getDisplayedHeadings(headings, toc.maxDepth || 3);
+  const displayedHeadings = getDisplayedHeadings(headings, toc.depth || 3);
   const leastDepth = getLeastDepth(displayedHeadings);
 
   const activeHeadingId = useActiveHeading(
@@ -31,38 +31,30 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   if (toc?.hide) {
     return null;
   }
-  if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
-    return null;
-  }
-  if (!headings?.length) {
-    return null;
-  }
 
   return (
     <>
-      {headings && (
-        <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
-          <TableOfContentItems ref={sidebar}>
-            <TocHeader>{toc.header || 'On this page'}</TocHeader>
-            {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
-              if (!heading) {
-                return null;
-              }
-              const href = '#' + heading.id;
-              return (
-                <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}`}
-                />
-              );
-            })}
-          </TableOfContentItems>
-        </TableOfContentMenu>
-      )}
+      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+        <TableOfContentItems ref={sidebar}>
+          {displayedHeadings.length ? <TocHeader>{toc.header || 'On this page'}</TocHeader> : null}
+          {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
+            if (!heading) {
+              return null;
+            }
+            const href = '#' + heading.id;
+            return (
+              <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}`}
+              />
+            );
+          })}
+        </TableOfContentItems>
+      </TableOfContentMenu>
     </>
   );
 }

package/src/TableOfContent/utils.ts

@@ -2,7 +2,7 @@ import type { MdHeading } from '@theme/types/portal';
 
 export function getDisplayedHeadings(
   headings: Array<MdHeading | null> | null | undefined,
-  tocMaxDepth: number,
+  tocDepth: number,
 ): Array<MdHeading | null> {
   if (!headings) {
     return [];
@@ -14,7 +14,7 @@ export function getDisplayedHeadings(
     if (idx === 0 && heading.depth === 1) {
       return false;
     }
-    return !(heading.depth && heading.depth > tocMaxDepth);
+    return !(heading.depth && heading.depth > tocDepth);
   });
 }
 

package/src/config.ts

@@ -18,11 +18,23 @@ export const ThemeConfig = z
     imports: z.array(z.string()).default([]).optional(),
 
     logo: LogoConfig.optional(),
-    navbar: HideConfig.strict().optional(),
-    footer: HideConfig.strict().optional(),
+    navbar: z
+      .object({
+        items: z.array(z.any()).optional(), // todo: think about validation here
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .optional(),
+
+    footer: z
+      .object({
+        items: z.array(z.any()).optional(), // todo: think about validation here
+        copyrightText: z.string().optional(),
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .optional(),
     sidebar: HideConfig.strict().optional(),
-    navbarItems: z.any().optional(), // todo: think about validation here
-    footerItems: z.any().optional(), // todo: think about validation here
 
     scripts: z
       .array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
@@ -30,7 +42,9 @@ export const ThemeConfig = z
     postBodyScripts: z
       .array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
       .optional(),
-    styles: z.array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))])).optional(),
+    stylesheets: z
+      .array(z.union([z.string(), z.record(z.union([z.boolean(), z.string()]))]))
+      .optional(),
 
     search: z
       .object({
@@ -43,8 +57,7 @@ export const ThemeConfig = z
 
     colorMode: z
       .object({
-        disableDetect: z.boolean().optional(),
-        default: z.string().optional(),
+        ignoreDetection: z.boolean().optional(),
         modes: z.array(z.string()).default(['light', 'dark']).optional(),
       })
       .extend(HideConfig.shape)
@@ -53,13 +66,13 @@ export const ThemeConfig = z
       .default({}),
     navigation: z
       .object({
-        nextPageLink: z
-          .object({ label: z.string().default('Next to {label}') })
+        nextButton: z
+          .object({ text: z.string().default('Next to {label}') })
           .extend(HideConfig.shape)
           .optional()
           .default({}),
-        prevPageLink: z
-          .object({ label: z.string().default('Back to {label}') })
+        previousButton: z
+          .object({ text: z.string().default('Back to {label}') })
           .extend(HideConfig.shape)
           .optional()
           .default({}),
@@ -69,7 +82,7 @@ export const ThemeConfig = z
       .default({}),
     markdown: z
       .object({
-        frontmatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
+        frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
         lastUpdatedBlock: z
           .object({
             format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
@@ -81,7 +94,7 @@ export const ThemeConfig = z
         toc: z
           .object({
             header: z.string().default('On this page').optional(),
-            maxDepth: z.number().default(3).optional(),
+            depth: z.number().default(3).optional(),
           })
           .extend(HideConfig.shape)
           .optional()
@@ -118,10 +131,10 @@ export const ThemeConfig = z
 export type ThemeConfig = z.infer<typeof ThemeConfig>;
 export type ThemeUIConfig = Omit<
   ThemeConfig,
-  'navbarItems' | 'footerItems' | 'styles' | 'scripts' | 'postBodyScripts'
+  'navbar' | 'footer' | 'styles' | 'scripts' | 'postBodyScripts'
 > & {
-  navbarItems?: any; // TODO
-  footerItems?: any; // TODO
+  navbar?: any; // TODO
+  footer?: any; // TODO
   auth?: {
     // used by portal dev login emulator
     idpIds?: string[];

package/src/index.ts

@@ -17,6 +17,6 @@ export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
 export * from './ColorModeSwitcher';
-
+export * from './Sidebar';
 export * from './types/config';
 export * from './config';

package/src/mocks/hooks/index.ts

@@ -10,7 +10,7 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
   return {
     search: { hide: false, placement: 'navbar' },
     markdown: {
-      toc: { maxDepth: 3, header: 'Table of contents', hide: false },
+      toc: { depth: 3, header: 'Table of contents', hide: false },
       lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
       copyCodeSnippet: {
         hide: false,
@@ -23,15 +23,14 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
         baseUrl: '',
         text: 'Edit this page',
       },
-      frontmatterKeysToResolve: ['image', 'links'],
+      frontMatterKeysToResolve: ['image', 'links'],
     },
     navigation: {
-      nextPageLink: { label: 'next page theme config label' },
-      prevPageLink: { label: 'prev page theme config label' },
+      nextButton: { text: 'next page theme config label' },
+      previousButton: { text: 'prev page theme config label' },
     },
     colorMode: {
       modes: ['light', 'dark'],
-      default: 'light',
     },
   } as ThemeUIConfig as T & ThemeUIConfig;
 }

package/src/mocks/utils.ts

@@ -3,7 +3,7 @@ export function withPathPrefix(link: string): string {
 }
 
 export function timeAgo(lastModified: string | Date): string {
-  // should return format(lastModified) in new-hope
+  // should return format(lastModified) in portal
   const d = new Date(lastModified);
   return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }

package/src/settings.yaml

@@ -7,9 +7,9 @@ toc:
     label: On this page
 navigation:
   hide: false
-  nextPageLink:
+  nextButton:
     hide: false
-  prevPageLink:
+  previousButton:
     hide: false
 navbar:
   hide: false

package/src/types/portal/src/shared/constants.d.ts

@@ -8,7 +8,6 @@ export declare const PUBLIC_ASSETS_FOLDER = '/assets';
 export declare const PUBLIC_STATIC_FOLDER = '/static';
 export declare const PERMISSION_PROP_NAME = 'redocly::permission';
 export declare const DEFAULT_PLACEHOLDER_PERMISSION = 'redocly:default-permission';
-export declare const DIRECTORY_PERMISSIONS_FILE_NAME = 'permissions.rbac.yaml';
 export declare const REQUIRED_OIDC_SCOPES: string[];
 export declare const DEFAULT_COOKIE_EXPIRATION: number;
 export declare const DEFAULT_AUTHENTICATED_ROLE = 'AuthenticatedUser';

package/lib/PageNavigation/NextPageLink.d.ts

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

package/lib/PageNavigation/PreviousPageLink.d.ts

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