@redocly/theme 0.7.3 → 0.7.5

package/src/Sidebar/SidebarLayout.tsx

@@ -7,13 +7,23 @@ 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;
+  };
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({
+  versions,
+  menu,
+  backLink,
+}: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -28,6 +38,15 @@ export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Eleme
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
+        {(backLink && (
+          <BackLinkWrapper>
+            <Link to={backLink.slug}>
+              <ArrowBack />
+              Back to {backLink.label}
+            </Link>
+          </BackLinkWrapper>
+        )) ||
+          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -35,4 +54,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/config.ts

@@ -126,6 +126,30 @@ export const ThemeConfig = z
       .strict()
       .optional()
       .default({}),
+    codeSnippet: z
+      .object({
+        copy: z
+          .object({
+            buttonText: z.string().default('Copy').optional(),
+            tooltipText: z.string().default('Copy to clipboard').optional(),
+            toasterText: z.string().default('Copied!').optional(),
+            toasterDuration: z.number().default(1500).optional(),
+          })
+          .extend(HideConfig.shape)
+          .optional()
+          .default({}),
+        report: z
+          .object({
+            tooltipText: z.string().default('Report a problem').optional(),
+            label: z.string().optional(),
+          })
+          .extend(HideConfig.shape)
+          .optional()
+          .default({ hide: true }),
+      })
+      .strict()
+      .default({})
+      .optional(),
     markdown: z
       .object({
         frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
@@ -154,24 +178,6 @@ export const ThemeConfig = z
           .extend(HideConfig.shape)
           .default({})
           .optional(),
-        copyCodeSnippet: z
-          .object({
-            buttonText: z.string().default('Copy').optional(),
-            tooltipText: z.string().default('Copy to clipboard').optional(),
-            toasterText: z.string().default('Copied').optional(),
-            toasterDuration: z.number().default(1500).optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        reportCodeSnippet: z
-          .object({
-            tooltipText: z.string().default('Report a problem').optional(),
-            label: z.string().optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({ hide: true }), // TODO: temporary disabled
       })
       .strict()
       .default({})

package/src/globalStyle.ts

@@ -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/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;
@@ -13,20 +14,22 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
       placement: 'navbar',
       shortcuts: ['ctrl+f', 'cmd+k', '/'],
     },
-    markdown: {
-      toc: { depth: 3, header: 'Table of contents', hide: false },
-      lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
-      copyCodeSnippet: {
+    codeSnippet: {
+      copy: {
         hide: false,
         buttonText: 'Copy',
         tooltipText: 'Copy to clipboard',
         toasterText: 'Copied',
         toasterDuration: 1500,
       },
-      reportCodeSnippet: {
+      report: {
         hide: false,
         tooltipText: 'Report a problem',
       },
+    },
+    markdown: {
+      toc: { depth: 3, header: 'Table of contents', hide: false },
+      lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
       editPage: {
         baseUrl: '',
         text: 'Edit this page',
@@ -63,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/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];
-}