@redocly/theme 0.7.5 → 0.9.0-beta.1

package/lib/Sidebar/MenuGroup.js

@@ -64,7 +64,7 @@ const MenuWrapper = styled_components_1.default.div `
   padding-left: var(--sidebar-item-nested-offset);
   overflow: hidden;
   ${(props) => props.isExpanded
-    ? `max-height: 9999px;
+    ? `max-height: 99999px;
         transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
     : `max-height: 0px;
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};

package/lib/Sidebar/MenuItemLabel.js

@@ -35,8 +35,8 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(() => ({
     : null};
 
   :hover {
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 
   :empty {

package/lib/Sidebar/Sidebar.d.ts

@@ -1,4 +1,5 @@
 interface SidebarProps {
+    hasNavbar: boolean;
     opened?: boolean;
     animate?: boolean;
 }

package/lib/Sidebar/Sidebar.js

@@ -18,13 +18,16 @@ exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
   font-size: var(--sidebar-item-font-size);
   font-family: var(--sidebar-item-font-family);
   color: var(--sidebar-item-text-color);
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  ${({ hasNavbar }) => `
+    top: ${hasNavbar ? 'var(--navbar-height)' : '0'};
+    height: calc(100vh ${hasNavbar ? '- var(--navbar-height)' : ''});
+  `};
+
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};

package/lib/Sidebar/SidebarLayout.d.ts

@@ -6,6 +6,8 @@ interface SidebarLayoutProps {
         label: string;
         slug: string;
     };
+    footer?: React.ReactNode;
+    hasNavbar: boolean;
 }
-export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -14,7 +14,8 @@ const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
 const ArrowBack_1 = require("../Sidebar/ArrowBack");
 const Link_1 = require("../mocks/Link");
-function SidebarLayout({ versions, menu, backLink, }) {
+const Button_1 = require("../Button/Button");
+function SidebarLayout({ versions, menu, backLink, footer, hasNavbar, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -24,7 +25,7 @@ function SidebarLayout({ versions, menu, backLink, }) {
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         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 },
+        react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen, hasNavbar: hasNavbar },
             (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),
@@ -32,9 +33,19 @@ function SidebarLayout({ versions, menu, backLink, }) {
                     backLink.label)))) ||
                 null,
             versions,
-            react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
+            react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu),
+            footer ? react_1.default.createElement(FooterWrapper, null, footer) : null)));
 }
 exports.SidebarLayout = SidebarLayout;
+const FooterWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+
+  ${Button_1.Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
 const BackLinkWrapper = styled_components_1.default.div `
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)

package/lib/TableOfContent/TableOfContent.js

@@ -104,6 +104,6 @@ const TableOfContentItems = styled_components_1.default.div `
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
   border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
-  width: var(--toc-width); ;
+  width: var(--toc-width);
 `;
 //# sourceMappingURL=TableOfContent.js.map

package/lib/globalStyle.js

@@ -202,7 +202,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: 0; // @presenter Spacing
+  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -1980,10 +1980,17 @@ exports.styles = (0, styled_components_1.css) `
     ${apiLogsTable}
     ${pages}
     ${modal}
+
+    --api-onboarding-table-text-color: #4e5356;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
   }
 
   :root.dark {
     ${darkColors_1.darkMode};
+
+    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/lib/hooks/useActiveHeading.js

@@ -7,7 +7,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
     const [heading, setHeading] = (0, react_1.useState)(displayedHeaders.length > 1 ? displayedHeaders[0] : undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
     const headingElementsRef = (0, react_1.useRef)({});
-    const history = (0, react_router_dom_1.useHistory)();
+    const location = (0, react_router_dom_1.useLocation)();
     const getVisibleHeadings = () => {
         const visibleHeadings = [];
         for (const key in headingElementsRef.current) {
@@ -56,12 +56,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return;
         }
         setHeadingElements(findHeaders(contentElement));
-        const unlisten = history.listen(() => {
-            setHeadingElements(findHeaders(contentElement));
-        });
-        return () => unlisten();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contentElement]);
+    }, [contentElement, location]);
     (0, react_1.useEffect)(() => {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
             return;

package/lib/hooks/useActiveSectionId.js

@@ -33,7 +33,7 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         window.addEventListener('scroll', scrollListener, { capture: false });
         setTimeout(() => {
             scrollListener();
-        }, 0);
+        }, 10);
         return () => {
             window.removeEventListener('scroll', scrollListener);
         };

package/lib/hooks/useMobileMenu.js

@@ -4,7 +4,7 @@ exports.useMobileMenu = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState = false) {
-    const { location } = (0, react_router_dom_1.useHistory)();
+    const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
     (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname]);
     return [isOpen, setIsOpen];

package/lib/ui/Jumbotron.js

@@ -14,8 +14,8 @@ exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).at
   flex-direction: column;
   padding-top: ${({ pt }) => pt || '0'};
   padding-bottom: ${({ pb }) => pb || '8em'};
-  padding-left: ${({ pl }) => pl || '0'};
-  padding-right: ${({ pr }) => pr || '0'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
   ${({ bgColor }) => bgColor && `background: ${bgColor}`};
   ${({ bgImage, bgColor }) => bgImage &&
     `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.7.5",
+  "version": "0.9.0-beta.1",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -39,8 +39,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^5.3.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.4",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "zod": ">=3.19.1"
@@ -71,8 +70,6 @@
     "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-router": "^5.1.20",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -87,8 +84,7 @@
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
-    "react-router": "^5.3.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.4",
     "storybook-addon-pseudo-states": "^1.15.1",
     "storybook-design-token": "^2.7.1",
     "styled-components": "^5.3.6",

package/src/Sidebar/MenuGroup.tsx

@@ -62,7 +62,7 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   overflow: hidden;
   ${(props) =>
     props.isExpanded
-      ? `max-height: 9999px;
+      ? `max-height: 99999px;
         transition: max-height .8s cubic-bezier(0.5, 0, 1, 0) 0s;`
       : `max-height: 0px;
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};

package/src/Sidebar/MenuItemLabel.tsx

@@ -31,8 +31,8 @@ export const MenuItemLabel = styled.li.attrs(() => ({
       : null};
 
   :hover {
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 
   :empty {

package/src/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 interface SidebarProps {
+  hasNavbar: boolean;
   opened?: boolean;
   animate?: boolean;
 }
@@ -18,13 +19,16 @@ export const Sidebar = styled.aside.attrs(() => ({
   font-size: var(--sidebar-item-font-size);
   font-family: var(--sidebar-item-font-family);
   color: var(--sidebar-item-text-color);
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  ${({ hasNavbar }) => `
+    top: ${hasNavbar ? 'var(--navbar-height)' : '0'};
+    height: calc(100vh ${hasNavbar ? '- var(--navbar-height)' : ''});
+  `};
+
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};

package/src/Sidebar/SidebarLayout.tsx

@@ -9,6 +9,7 @@ import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { ArrowBack } from '@theme/Sidebar/ArrowBack';
 import { Link } from '@portal/Link';
+import { Button } from '@theme/Button/Button';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -17,12 +18,17 @@ interface SidebarLayoutProps {
     label: string;
     slug: string;
   };
+  footer?: React.ReactNode;
+
+  hasNavbar: boolean;
 }
 
 export function SidebarLayout({
   versions,
   menu,
   backLink,
+  footer,
+  hasNavbar,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -37,7 +43,7 @@ export function SidebarLayout({
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen}>
+      <Sidebar animate={true} opened={isOpen} hasNavbar={hasNavbar}>
         {(backLink && (
           <BackLinkWrapper>
             <Link to={backLink.slug}>
@@ -49,11 +55,22 @@ export function SidebarLayout({
           null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
+        {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
       </Sidebar>
     </Wrapper>
   );
 }
 
+const FooterWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
+
+  ${Button} {
+    width: 100%;
+    margin: 0;
+  }
+`;
+
 const BackLinkWrapper = styled.div`
   padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
     var(--sidebar-item-padding-horizontal)

package/src/TableOfContent/TableOfContent.tsx

@@ -109,5 +109,5 @@ const TableOfContentItems = styled.div`
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
   border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
-  width: var(--toc-width); ;
+  width: var(--toc-width);
 `;

package/src/globalStyle.ts

@@ -204,7 +204,7 @@ const headingsTypography = css`
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: 0; // @presenter Spacing
+  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -2008,10 +2008,17 @@ export const styles = css`
     ${apiLogsTable}
     ${pages}
     ${modal}
+
+    --api-onboarding-table-text-color: #4e5356;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
   }
 
   :root.dark {
     ${darkMode};
+
+    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/src/hooks/useActiveHeading.ts

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-
+import { useLocation } from 'react-router-dom';
 export type UseActiveHeadingReturnType = string | undefined;
 
 type HeadingEntry = {
@@ -16,8 +15,7 @@ export function useActiveHeading(
   );
   const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
   const headingElementsRef = useRef<HeadingEntry>({});
-
-  const history = useHistory();
+  const location = useLocation();
 
   const getVisibleHeadings = () => {
     const visibleHeadings: IntersectionObserverEntry[] = [];
@@ -86,14 +84,7 @@ export function useActiveHeading(
       return;
     }
     setHeadingElements(findHeaders(contentElement));
-
-    const unlisten = history.listen(() => {
-      setHeadingElements(findHeaders(contentElement));
-    });
-
-    return () => unlisten();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentElement]);
+  }, [contentElement, location]);
 
   useEffect(() => {
     if (!headingElements?.length) {

package/src/hooks/useActiveSectionId.ts

@@ -41,7 +41,7 @@ export function useActiveSectionId(
     window.addEventListener('scroll', scrollListener, { capture: false });
     setTimeout(() => {
       scrollListener();
-    }, 0);
+    }, 10);
 
     return () => {
       window.removeEventListener('scroll', scrollListener);

package/src/hooks/useMobileMenu.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import type { Dispatch, SetStateAction } from 'react';
 
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
-  const { location } = useHistory();
+  const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname]);

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

@@ -63,7 +63,7 @@ export declare type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNav
 export declare type ResolvedSidebar = ResolvedNavItem[];
 export interface PageProps {
   seo?: {
-    title: string;
+    title?: string;
   };
   frontmatter?: Omit<PageProps, 'frontmatter'> & {
     settings?: any;

package/src/ui/Jumbotron.tsx

@@ -19,8 +19,8 @@ export const Jumbotron = styled(Background).attrs(() => ({
   flex-direction: column;
   padding-top: ${({ pt }) => pt || '0'};
   padding-bottom: ${({ pb }) => pb || '8em'};
-  padding-left: ${({ pl }) => pl || '0'};
-  padding-right: ${({ pr }) => pr || '0'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
   ${({ bgColor }) => bgColor && `background: ${bgColor}`};
   ${({ bgImage, bgColor }) =>
     bgImage &&