@redocly/theme 0.4.16 → 0.5.1

package/lib/mocks/hooks/index.js

@@ -1,12 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
-function useThemeSettings(_) {
+exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+function useThemeConfig() {
     return {
-        toc: { header: { label: 'header' }, hide: false },
+        search: { hide: false, placement: 'navbar' },
+        markdown: {
+            toc: { maxDepth: 3, header: 'Table of contents', hide: false },
+            lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
+            copyCodeSnippet: {
+                hide: false,
+                buttonText: 'Copy',
+                tooltipText: 'Copy to clipboard',
+                toasterText: 'Copied',
+                toasterDuration: 1500,
+            },
+            editPage: {
+                baseUrl: '',
+                text: 'Edit this page',
+            },
+            frontmatterKeysToResolve: ['image', 'links'],
+        },
         navigation: {
-            nextPageLink: { label: 'next page theme settings label' },
-            prevPageLink: { label: 'prev page theme settings label' },
+            nextPageLink: { label: 'next page theme config label' },
+            prevPageLink: { label: 'prev page theme config label' },
         },
         colorMode: {
             modes: ['light', 'dark'],
@@ -14,7 +30,7 @@ function useThemeSettings(_) {
         },
     };
 }
-exports.useThemeSettings = useThemeSettings;
+exports.useThemeConfig = useThemeConfig;
 function useSidebarSiblingsData() {
     return {
         nextPage: {

package/lib/mocks/types.d.ts

@@ -1,14 +1,3 @@
 export declare type ActiveItem<T> = T;
 export declare type SearchDocument = any;
 export declare type OperationParameter = any;
-export interface RawTheme {
-    name: string;
-    settings: {
-        lastUpdatedBlock?: {
-            hide?: boolean;
-            format?: 'timeago' | 'iso' | 'short' | 'long';
-            locale?: string;
-        };
-        [k: string]: any;
-    };
-}

package/lib/mocks/types.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// TODO: get rid of these types
 //# sourceMappingURL=types.js.map

package/lib/types/config.d.ts

@@ -0,0 +1,5 @@
+export declare type DefaultThemeUIConfig = {
+    lastUpdatedBlock?: {
+        hide?: boolean;
+    };
+};

package/lib/types/config.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=config.js.map

package/lib/ui/index.d.ts

@@ -5,6 +5,5 @@ export * from '../ui/Box';
 export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
-export * from '../ui/UniversalLink';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/lib/ui/index.js

@@ -21,7 +21,6 @@ __exportStar(require("../ui/Box"), exports);
 __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
-__exportStar(require("../ui/UniversalLink"), exports);
 const LandingLayout = ({ children }) => children;
 exports.LandingLayout = LandingLayout;
 exports.EmptyLayout = exports.LandingLayout;

package/lib/utils/args-typecheck.js

@@ -8,7 +8,7 @@ function isEmptyArray(items) {
 exports.isEmptyArray = isEmptyArray;
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function isPrimitive(arg) {
-    return ['string', 'boolean', 'number'].includes(typeof arg);
+    return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
 }
 exports.isPrimitive = isPrimitive;
 //# sourceMappingURL=args-typecheck.js.map

package/package.json

@@ -1,38 +1,37 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.16",
+  "version": "0.5.1",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
+    "./config.js": "./lib/config.js",
+    "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
     "./*": "./lib/*/index.js",
     "./src/": "./src/"
   },
   "scripts": {
-    "start": "npm-run-all --parallel storybook generate-tokens:watch",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "npm run generate-tokens && build-storybook",
-    "generate-tokens": "ts-node scripts/generate-css-tokens.ts",
-    "generate-tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rm -rf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
-    "build:on-rebuild": "tsc-alias -p tsconfig.build.json",
-    "build:watch": "npm run clean && tsc-watch --project tsconfig.build.json --onSuccess \"npm run build:on-rebuild\"",
-    "lint": "eslint . --ext .ts,.tsx --cache",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix",
-    "prettier-base": "prettier \"**/*.{json,js,jsx,ts,tsx,yml,yaml,html,md}\"",
-    "prettier": "npm run prettier-base -- --write",
-    "prettier:check": "npm run prettier-base -- --check",
-    "ts:check": "tsc --noEmit --skipLibCheck",
     "test": "jest",
+    "test:update": "jest -u",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:updateSnapshot": "jest --updateSnapshot",
+    "test:coverage:html": "jest --coverage --coverageReporters html",
+    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "npm run storybook:tokens && build-storybook",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "peerDependencies": {
@@ -41,8 +40,9 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "styled-components": "^5.3.1",
-    "styled-system": "^5.1.5"
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5",
+    "zod": ">=3.19.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.9",
@@ -55,7 +55,6 @@
     "@storybook/core-common": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/node-logger": "^6.5.9",
-    "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.11",
     "@storybook/theming": "^6.5.9",
@@ -75,34 +74,31 @@
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
-    "chromatic": "^6.5.4",
-    "esbuild": "^0.14.38",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
+    "chromatic": "^6.10.2",
+    "esbuild": "^0.15.11",
+    "jest": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.0",
     "jest-styled-components": "^7.1.1",
     "jest-when": "^3.5.1",
-    "lint-staged": "^12.4.1",
-    "lodash": "^4.17.21",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-refresh": "^0.13.0",
+    "react-refresh": "^0.14.0",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "5.0.1",
     "storybook-addon-pseudo-states": "^1.15.1",
-    "storybook-design-token": "^2.1.0",
-    "styled-components": "^5.3.5",
+    "storybook-design-token": "^2.7.1",
+    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.7.0",
-    "ts-node-dev": "^1.1.8",
-    "tsc-alias": "^1.6.7",
-    "tsc-watch": "^5.0.3",
+    "ts-node-dev": "^2.0.0",
+    "tsc-alias": "^1.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4",
-    "webpack": "^5.72.0"
+    "typescript": "^4.8.4",
+    "webpack": "^5.72.0",
+    "concurrently": "^7.4.0",
+    "zod": ">=3.19.1"
   },
   "dependencies": {
     "timeago.js": "^4.0.2"

package/src/ApiOnboarding/AppCustomAttributes.tsx

@@ -0,0 +1,6 @@
+interface AppCustomAttributesProps {
+  onChange: (value: Record<string, string>) => void;
+}
+export function AppCustomAttributes(_props: AppCustomAttributesProps) {
+  return null;
+}

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -2,28 +2,26 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
-import { useMount } from '@theme/hooks';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useMount, useThemeConfig } from '@theme/hooks';
 
 export function ColorModeSwitcher(): JSX.Element | null {
-  const themeSettings = useDefaultThemeSettings();
+  const themeSettings = useThemeConfig();
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
+  const modes = colorMode?.modes || ['light', 'dark'];
+  const defaultColor = colorMode?.default || modes[0] || 'light';
 
   useMount(() => {
-    setActiveColorMode(document.documentElement.className || colorMode?.default);
+    setActiveColorMode(document.documentElement.className || defaultColor);
   });
 
-  if (!colorMode?.modes || colorMode?.hide) {
+  if (colorMode?.hide) {
     return null;
   }
 
   const handelChangeColorMode = () => {
-    const activeIndex = colorMode.modes.indexOf(activeColorMode);
-    const mode =
-      activeIndex < colorMode.modes.length - 1
-        ? colorMode.modes[activeIndex + 1]
-        : colorMode.modes[0];
+    const activeIndex = modes.indexOf(activeColorMode);
+    const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
     setActiveColorMode(mode);
     localStorage.setItem('colorSchema', mode);
     document.documentElement.className = `${mode} notransition`;
@@ -37,16 +35,35 @@ export function ColorModeSwitcher(): JSX.Element | null {
     <Wrapper
       data-component-name="ColorModeSwitcher/ColorModeSwitcher"
       onClick={handelChangeColorMode}
+      modes={modes}
     >
-      <ColorModeIcon mode={activeColorMode} />
+      {modes.map((mode) => (
+        <ColorModeIcon mode={mode} key={mode} />
+      ))}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ modes: string[] }>`
   margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
+
+  ${ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }: { modes: string[] }) => {
+    const items = modes.map((mode) => {
+      return `
+        html.${mode} & ${ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+
+    return items.join('');
+  }}
 `;

package/src/EditPageButton/EditPageButton.tsx

@@ -6,13 +6,13 @@ import { Link } from '@portal/Link';
 export interface EditPageButtonProps {
   text: string;
   to: string;
-  icon: string;
+  icon?: string;
 }
 
 export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
   return (
     <EditButton to={to}>
-      <ButtonIcon src={icon} />
+      {icon ? <ButtonIcon src={icon} /> : null}
       <ButtonText>{text}</ButtonText>
     </EditButton>
   );
@@ -26,6 +26,10 @@ const EditButton = styled(Link)`
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
+
+  @media print {
+    display: none;
+  }
 `;
 
 const ButtonIcon = styled.img`

package/src/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks';
 import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
@@ -12,7 +12,7 @@ interface FooterProps {
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useDefaultThemeSettings();
+  const { footer } = useThemeConfig();
 
   if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
     return null;

package/src/Footer/FooterColumn.tsx

@@ -22,7 +22,13 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
             {columnItem.label}
           </FooterSeparator>
         ) : (
-          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
+          <FooterLink
+            key={columnItemIndex}
+            to={columnItem.link}
+            external={columnItem.external}
+            target={columnItem.target}
+            data-cy={columnItem.label}
+          >
             {columnItem.label}
           </FooterLink>
         );

package/src/LastUpdated/LastUpdated.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { format } from 'timeago.js';
 
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 const FORMATS = {
   timeago: (date: Date, locale: string) => format(date, locale),
@@ -20,18 +20,19 @@ export interface LastUpdatedProps {
 }
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
-  const { lastUpdatedBlock } = useDefaultThemeSettings();
+  const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
 
   if (lastUpdatedBlock?.hide) {
     return null;
   }
 
   const lastModified = props.lastModified;
-  const format = props.format || lastUpdatedBlock?.format || 'timeago';
-  const locale = props.locale || lastUpdatedBlock?.locale || 'en-US';
+  const format = props.format || lastUpdatedBlock.format || 'timeago';
+  const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
   const isoDate = lastModified.toISOString().split('T')[0];
 
-  const lastUpdatedString = FORMATS[format](lastModified, locale);
+  const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
+
   const separator = format === 'timeago' ? ' ' : ' on ';
 
   return (
@@ -41,6 +42,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
     >
       Last updated{separator}
+      {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );

package/src/Markdown/Admonition.tsx

@@ -36,6 +36,9 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   font-weight: var(--admonition-font-weight);
   line-height: var(--admonition-line-height);
 
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export type CodeSampleProps = {
   language: string;
@@ -10,37 +10,28 @@ export type CodeSampleProps = {
   rawContent: string;
 };
 
-const defaultCopyCodeSnippet = {
-  hide: false,
-  buttonText: 'Copy',
-  tooltipText: 'Copy the code snippet',
-  toasterText: 'Copied',
-  toasterDuration: 1500,
-};
-
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
-  const { copyCodeSnippet } = useDefaultThemeSettings();
-  const copyCodeProps = { ...defaultCopyCodeSnippet, ...copyCodeSnippet };
+  const { markdown: { copyCodeSnippet = {} } = {} } = useThemeConfig();
 
   const [isCopied, setIsCopied] = useState(false);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
+    setTimeout(() => setIsCopied(false), copyCodeSnippet.toasterDuration);
   };
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      {!copyCodeProps.hide && (
+      {!copyCodeSnippet.hide && (
         <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
           {!isCopied && (
-            <CopyCodeButton title={copyCodeProps.tooltipText}>
-              {copyCodeProps.buttonText}
+            <CopyCodeButton title={copyCodeSnippet.tooltipText || 'Copy to clipboard'}>
+              {copyCodeSnippet.buttonText}
             </CopyCodeButton>
           )}
-          {isCopied && <DoneIndicator>{copyCodeProps.toasterText}</DoneIndicator>}
+          {isCopied && <DoneIndicator>{copyCodeSnippet.toasterText}</DoneIndicator>}
         </CodeSampleButtonContainer>
       )}
       <pre className={langClassName}>
@@ -64,6 +55,10 @@ const CopyCodeButton = styled.div`
   &:hover {
     cursor: pointer;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 const DoneIndicator = styled.div`
@@ -150,6 +145,10 @@ const Wrapper = styled.div`
     border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
     background-color: var(--code-block-background-color);
+
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+
     code {
       background-color: transparent;
       border: 0;

package/src/Markdown/MarkdownLayout.tsx

@@ -6,6 +6,7 @@ import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 import { EditPageButton } from '@theme/EditPageButton';
 import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
+import { useThemeConfig } from '@theme/hooks';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -13,7 +14,7 @@ type MarkdownLayoutProps = {
   editPage?: {
     to: string;
     text: string;
-    icon: string;
+    icon?: string;
   };
   /** String in ISO format */
   lastModified?: string | null;
@@ -25,13 +26,18 @@ export function MarkdownLayout({
   editPage,
   lastModified,
 }: MarkdownLayoutProps): JSX.Element {
+  const { markdown } = useThemeConfig();
+  const { editPage: themeEditPage } = markdown || {};
+
+  const mergedConf = editPage ? { ...editPage, ...themeEditPage } : undefined;
+
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {editPage && (
-            <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
+          {mergedConf && (
+            <EditPageButton text={mergedConf.text} to={mergedConf.to} icon={mergedConf.icon} />
           )}
         </LayoutTop>
         {markdownWrapper}

package/src/Navbar/Navbar.tsx

@@ -6,7 +6,7 @@ import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 
 interface NavbarProps {
@@ -18,7 +18,7 @@ interface NavbarProps {
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar } = useDefaultThemeSettings();
+  const { search: searchSettings, navbar } = useThemeConfig();
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 

package/src/Navbar/NavbarItem.tsx

@@ -28,7 +28,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         data-component-name="Navbar/NavbarItem"
         className={className}
       >
-        <NavbarLink to={item.link} active={isActive}>
+        <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           <NavbarLabel>{item.label}</NavbarLabel>
         </NavbarLink>
       </NavbarMenuItem>

package/src/PageNavigation/NextPageLink.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { useSidebarSiblingsData } from '@portal/hooks';
 import { Button } from '@theme/Button/Button';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
 interface NextPageType {
@@ -12,13 +12,16 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
+  if (!nextPage || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
+  const label = (navigation?.nextPageLink?.label || 'Next to {label}').replace(
+    '{label}',
+    nextPage.label || nextPage.routeSlug || '',
+  );
 
   return (
     <StyledButton

package/src/PageNavigation/PageNavigation.tsx

@@ -3,12 +3,12 @@ import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 
 export function PageNavigation(): JSX.Element | null {
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (navigation?.hide) {
+  if (navigation?.prevPageLink?.hide && navigation?.nextPageLink?.hide) {
     return null;
   }
 
@@ -24,4 +24,8 @@ const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
 `;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useSidebarSiblingsData } from '@portal/hooks';
-import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Button } from '@theme/Button/Button';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
@@ -12,13 +12,16 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useDefaultThemeSettings();
+  const { navigation } = useThemeConfig();
 
-  if (!prevPage || navigation?.hide || navigation?.prevPageLink?.hide) {
+  if (!prevPage || navigation?.prevPageLink?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const label = navigation?.prevPageLink?.label || `Back to ${prevPage.label}`;
+  const label = (navigation?.prevPageLink?.label || 'Back to {label}').replace(
+    '{label}',
+    prevPage.label || prevPage.routeSlug || '',
+  );
 
   return (
     <StyledButton