@redocly/theme 0.7.4 → 0.8.0

package/src/Sidebar/SidebarLayout.tsx

@@ -7,13 +7,25 @@ import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { ArrowBack } from '@theme/Sidebar/ArrowBack';
+import { Link } from '@portal/Link';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
   menu: React.ReactNode;
+  backLink?: {
+    label: string;
+    slug: string;
+  };
+  isNavbar: boolean;
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({
+  versions,
+  menu,
+  backLink,
+  isNavbar,
+}: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -27,7 +39,16 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen}>
+      <Sidebar animate={true} opened={isOpen} isNavbar={isNavbar}>
+        {(backLink && (
+          <BackLinkWrapper>
+            <Link to={backLink.slug}>
+              <ArrowBack />
+              Back to {backLink.label}
+            </Link>
+          </BackLinkWrapper>
+        )) ||
+          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -35,4 +56,22 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
   );
 }
 
+const BackLinkWrapper = styled.div`
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
+
 const Wrapper = styled.div``;

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/config.ts

@@ -132,7 +132,7 @@ export const ThemeConfig = z
           .object({
             buttonText: z.string().default('Copy').optional(),
             tooltipText: z.string().default('Copy to clipboard').optional(),
-            toasterText: z.string().default('Copied').optional(),
+            toasterText: z.string().default('Copied!').optional(),
             toasterDuration: z.number().default(1500).optional(),
           })
           .extend(HideConfig.shape)
@@ -145,7 +145,7 @@ export const ThemeConfig = z
           })
           .extend(HideConfig.shape)
           .optional()
-          .default({}),
+          .default({ hide: true }),
       })
       .strict()
       .default({})

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
 
@@ -517,7 +517,7 @@ const sidebar = css`
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;
@@ -1706,7 +1706,7 @@ const inputs = css`
   --input-border: none; // @presenter Border
   --input-border-radius: var(--border-radius); // @presenter BorderRadius
   --input-font-size: var(--font-size-base); // @presenter FontSize
-  --input-font-family: var(--code-font-family); // @presenter FontFamily
+  --input-font-family: var(--font-family-base); // @presenter FontFamily
   --input-line-height: 1.15em; // @presenter LineHeight
   --input-padding: 8px;
 
@@ -1716,6 +1716,8 @@ const inputs = css`
   --input-focus-text-color: var(--text-color-inverse); // @presenter Color
   --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color
 
+  --checkbox-backround-color: var(--background-color);
+  --checkbox-checked-backround-color: var(--color-primary-500);
   // @tokens End
 `;
 
@@ -1925,7 +1927,7 @@ const pages = css`
 
   --page-404-font-family: var(--font-family-base); // @presenter FontFamily
 
-  --page-404-header-text-color: #000; 
+  --page-404-header-text-color: #000;
   --page-404-header-font-size: 14em; // @presenter FontSize
   --page-404-header-font-weight: 600; // @presenter FontWeight
   --page-404-header-line-height: 1.2; // @presenter LineHeight
@@ -1945,31 +1947,31 @@ const pages = css`
   * @tokens 403 Page
   * @presenter Color
   */
- 
+
    --page-403-font-family: var(--font-family-base); // @presenter FontFamily
- 
+
    --page-403-header-text-color: #000;
    --page-403-header-font-size: 14em; // @presenter FontSize
    --page-403-header-font-weight: 600; // @presenter FontWeight
    --page-403-header-line-height: 1.2; // @presenter LineHeight
    --page-403-header-margin: 0; // @presenter Spacing
- 
+
    --page-403-description-text-color: #000;
    --page-403-description-font-size: 2em; // @presenter FontSize
    --page-403-description-font-weight: 400; // @presenter FontWeight
    --page-403-description-line-height: 1; // @presenter LineHeight
    --page-403-description-margin: 0; // @presenter Spacing
- 
+
    --page-403-button-margin: 4em; // @presenter Spacing
- 
+
    // @tokens End
 `
 
 const modal = css`
-  body:has([id='modal']) {
+  body:has(.modal) {
     overflow: hidden;
   }
-  
+
   --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);

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/mocks/hooks/index.ts

@@ -1,5 +1,6 @@
 import type { ThemeUIConfig } from '@theme/config';
-
+import type { ResolvedNavItem } from '@theme/types/portal';
+import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
   link: string;
@@ -65,3 +66,11 @@ export function useSidebarSiblingsData(): { nextPage: PageLink | null; prevPage:
     },
   };
 }
+
+export function usePageSharedData<T = unknown>(_id: string): T {
+  throw new Error('Mock not implemented yet.');
+}
+
+export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog {
+  throw new Error('Mock not implemented yet.');
+}

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

@@ -0,0 +1,55 @@
+import type { NavItem } from './nav';
+
+export type FilteredCatalog = {
+  groups: { title: string; items: CatalogItem[] }[];
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  setFilterTerm: (term: string) => void;
+};
+
+export type Filter = {
+  type?: 'select' | 'checkboxes';
+  title: string;
+  property: string;
+  parentFilter?: string;
+  missingCategoryName?: string;
+  options?: string[];
+};
+
+export type CatalogConfig = {
+  slug: string;
+  filters: Filter[];
+  groupByFirstFilter: boolean;
+  items: NavItem[];
+  requiredPermission?: string;
+  separateVersions?: boolean;
+  title?: string;
+  description?: string;
+};
+
+export type CatalogThemeConfig = {
+  catalog: Record<string, CatalogConfig>;
+};
+
+export type ResolvedFilter = Omit<Filter, 'options'> & {
+  options: {
+    value: string;
+    count: number;
+  }[];
+  filteredOptions: {
+    value: string;
+    count: number;
+  }[];
+  toggleOption: (option: string) => void;
+  selectOption: (option: string) => void;
+  parentUsed: boolean;
+  selectedOptions: Set<string>;
+};
+
+export type CatalogItem = {
+  title: string;
+  link: string;
+  description?: string;
+  image?: string;
+  [k: string]: unknown;
+};

package/src/ui/Checkbox.tsx

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Checkbox = styled.input`
+  position: absolute;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+
+    div {
+      margin-top: 1px;
+    }
+    p {
+      line-height: 1.2;
+    }
+
+    &::before {
+      content: '';
+      margin-right: 10px;
+      display: inline-block;
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+      background: var(--checkbox-backround-color);
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus + label:before {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  &:checked + label {
+    &::before {
+      background: var(--checkbox-checked-backround-color);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      background: var(--checkbox-backround-color);
+      width: 2px;
+      height: 2px;
+      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white,
+        4px -8px 0 white;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:disabled + label {
+    color: #b8b8b8;
+    cursor: auto;
+    &::before {
+      box-shadow: none;
+      background: #ddd;
+    }
+  }
+`;

package/src/ui/Highlight.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { findAll } from 'highlight-words-core';
+
+export const HighlightContext = React.createContext<string[]>([]);
+
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element {
+  const { children } = props;
+  const searchWords = React.useContext(HighlightContext);
+
+  if (!searchWords.length) {
+    return <>children</> || null;
+  }
+
+  function highlight(str: string, childIdx: number = 0) {
+    const chunks = findAll({
+      searchWords,
+      textToHighlight: str,
+    });
+
+    return (
+      <React.Fragment key={childIdx}>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const text = str.substr(start, end - start);
+          if (highlight) {
+            return <mark key={idx}>{text}</mark>;
+          } else {
+            return text;
+          }
+        })}
+      </React.Fragment>
+    );
+  }
+
+  if (typeof children === 'string') {
+    return highlight(children);
+  } else if (Array.isArray(children)) {
+    return (
+      <>
+        {children.map((child, idx) =>
+          typeof children === 'string' ? highlight(child, idx) : child || null,
+        )}
+      </>
+    );
+  } else {
+    return <>children</> || null;
+  }
+}

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 &&

package/src/ui/darkColors.tsx

@@ -60,12 +60,14 @@ export const darkMode = css`
   --tooltip-text-color: #fff;
   --md-table-head-background-color: var(--color-secondary-300);
   --md-tabs-hover-tab-border-color: var(--color-secondary-500);
-  --wide-tile-background-color: #000000;
-  --thin-tile-background-color: #000000;
+  --thin-tile-background-color: #1d242d;
+  --wide-tile-background-color: #1d242d;
   --page-404-header-text-color: #fff;
   --page-404-description-text-color: #fff;
   --page-403-header-text-color: #fff;
   --page-403-description-text-color: #fff;
+  --checkbox-backround-color: var(--color-secondary-900);
+  --checkbox-checked-backround-color: var(--color-primary-400);
 
   background-color: var(--background-color);
   color: var(--text-color);

package/lib/hooks/useReportDialog.d.ts

@@ -1 +0,0 @@
-export declare function useReportDialog(initialState?: boolean): [boolean, () => void, () => void];

package/lib/hooks/useReportDialog.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReportDialog = void 0;
-const react_1 = require("react");
-function useReportDialog(initialState = false) {
-    const [isDialogShown, setIsShown] = (0, react_1.useState)(initialState);
-    const showDialog = () => {
-        setIsShown(true);
-    };
-    const hideDialog = () => {
-        setIsShown(false);
-    };
-    return [isDialogShown, showDialog, hideDialog];
-}
-exports.useReportDialog = useReportDialog;
-//# sourceMappingURL=useReportDialog.js.map

package/src/hooks/useReportDialog.ts

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-export function useReportDialog(initialState = false): [boolean, () => void, () => void] {
-  const [isDialogShown, setIsShown] = useState(initialState);
-
-  const showDialog = () => {
-    setIsShown(true);
-  };
-  const hideDialog = () => {
-    setIsShown(false);
-  };
-
-  return [isDialogShown, showDialog, hideDialog];
-}