@redocly/theme 0.70.0 → 0.70.1

package/lib/layouts/DocumentationLayout.js

@@ -1,21 +1,57 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentationLayout = DocumentationLayout;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../core/utils");
+const hooks_1 = require("../core/hooks");
 const constants_1 = require("../core/constants");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
 const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
 const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
-    var _a;
+    var _a, _b;
+    const { markdown } = (0, hooks_1.useThemeConfig)();
+    const withToc = Boolean(tableOfContent) && !((_b = (_a = (config !== null && config !== void 0 ? config : markdown)) === null || _a === void 0 ? void 0 : _a.toc) === null || _b === void 0 ? void 0 : _b.hide);
     return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
-        react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
-            react_1.default.createElement(ContentWrapper, { $withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
+        react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className, $withToc: withToc },
+            react_1.default.createElement(ContentWrapper, null,
                 react_1.default.createElement(DocumentationLayoutTop_1.DocumentationLayoutTop, { config: config, editPage: editPage, lastModified: lastModified }),
                 children,
                 react_1.default.createElement(DocumentationLayoutBottom_1.DocumentationLayoutBottom, { feedback: feedback, nextPage: nextPage, prevPage: prevPage })),
@@ -27,6 +63,14 @@ const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => (
   display: flex;
   flex: 1;
   width: 100%;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    ${({ $withToc }) => $withToc &&
+    (0, styled_components_1.css) `
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) var(--toc-width);
+      `}
+  }
 `;
 const ContentWrapper = styled_components_1.default.section `
   --md-content-font-size: var(--font-size-lg);
@@ -47,9 +91,5 @@ const ContentWrapper = styled_components_1.default.section `
     // disable margin top for h1 on the title heading
     margin-top: 0;
   }
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    width: ${({ $withToc }) => ($withToc ? `calc(90% - var(--toc-width))` : '90%')};
-  }
 `;
 //# sourceMappingURL=DocumentationLayout.js.map

package/package.json

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

package/src/layouts/DocumentationLayout.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
 import { breakpoints } from '@redocly/theme/core/utils';
+import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { H1_CLASS } from '@redocly/theme/core/constants';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
@@ -35,10 +36,17 @@ export function DocumentationLayout({
   className,
   children,
 }: React.PropsWithChildren<DocumentationLayoutProps>): JSX.Element {
+  const { markdown } = useThemeConfig();
+  const withToc = Boolean(tableOfContent) && !(config ?? markdown)?.toc?.hide;
+
   return (
     <CodeSnippetProvider>
-      <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
-        <ContentWrapper $withToc={!config?.toc?.hide}>
+      <LayoutWrapper
+        data-component-name="Layout/DocumentationLayout"
+        className={className}
+        $withToc={withToc}
+      >
+        <ContentWrapper>
           <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
           {children}
           <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
@@ -51,13 +59,22 @@ export function DocumentationLayout({
 
 const LayoutWrapper = styled.div.attrs(({ className }) => ({
   className,
-}))`
+}))<{ $withToc: boolean }>`
   display: flex;
   flex: 1;
   width: 100%;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    ${({ $withToc }) =>
+      $withToc &&
+      css`
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) var(--toc-width);
+      `}
+  }
 `;
 
-const ContentWrapper = styled.section<{ $withToc: boolean }>`
+const ContentWrapper = styled.section`
   --md-content-font-size: var(--font-size-lg);
   --md-content-line-height: var(--line-height-lg);
   --md-table-font-size: var(--md-content-font-size);
@@ -76,8 +93,4 @@ const ContentWrapper = styled.section<{ $withToc: boolean }>`
     // disable margin top for h1 on the title heading
     margin-top: 0;
   }
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    width: ${({ $withToc }) => ($withToc ? `calc(90% - var(--toc-width))` : '90%')};
-  }
 `;