@redocly/theme 0.6.5 → 0.7.0

package/src/Feedback/types.ts

@@ -1,23 +1,57 @@
 export type RatingProps = {
-  onSubmit: (value: number) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {
     label?: string;
     max?: number;
     submitText?: string;
+    comment?: {
+      enable: boolean;
+      label?: string;
+    };
+    reasons?: {
+      enable: boolean;
+      label?: string;
+      multi?: boolean;
+      items: string[];
+    };
   };
 };
 
 export type SentimentProps = {
-  onSubmit: (value: -1 | 1) => void;
+  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {
     label?: string;
+    submitText?: string;
+    comment?: {
+      enable: boolean;
+      likeLabel?: string;
+      dislikeLabel?: string;
+    };
+    reasons?: {
+      enable: boolean;
+      label?: string;
+      multi?: boolean;
+      items: string[];
+    };
   };
 };
 
 export type CommentProps = {
-  onSubmit: (value: string) => void;
+  onSubmit: (value: { comment: string }) => void;
   settings?: {
     label?: string;
+    submitText?: string;
+  };
+};
+
+export type ReasonsProps = {
+  onSubmit: (value: { reasons: string[] }) => void;
+  settings: {
+    label?: string;
+    multi?: boolean;
+    items: string[];
+    submitText?: string;
+    buttonText?: string;
   };
 };
 

package/src/Markdown/Tabs/Tab.tsx

@@ -23,15 +23,21 @@ export function Tab({ activeTab, label, onClick }: TabProps): JSX.Element {
 const TabItem = styled.li<{ active: boolean }>`
   display: inline-block;
   list-style: none;
-  margin-bottom: -1px;
   padding: 0.75rem 1rem;
   cursor: pointer;
 
   ${({ active }) =>
-    active &&
+    active
+      ? `
+      background-color: var(--background-color);
+      border: solid var(--md-tabs-active-tab-border-color);
+      border-width: 0 0 1px 0;
+      color: var(--text-color);
     `
-    background-color: white;
-    border: solid #ccc;
-    border-width: 1px 1px 0 1px;
+      : `
+    &:hover {
+      border: solid var(--md-tabs-hover-tab-border-color);
+      border-width: 0 0 1px 0;
+    }
   `}
 `;

package/src/Markdown/Tabs/Tabs.tsx

@@ -31,17 +31,26 @@ export function Tabs({ children }: TabsProps): JSX.Element {
 
 const TabsContainer = styled.div`
   margin: 10px 0;
+
+  ol[class^='Tabs__TabList'] {
+    margin: 0;
+    padding: 0;
+  }
 `;
 
 const TabList = styled.ol`
-  border-bottom: 1px solid #ccc;
+  color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
+  border: solid var(--color-secondary-400);
+  border-width: 0 0 1px 0;
+
+  li[class^='Tab__TabItem'] {
+    margin: 0;
+    margin-bottom: -1px;
+  }
 `;
 
 const TabContent = styled.div`
-  padding: 10px 5px;
-  border: 1px solid #ccc;
-  border-top: none;
-  padding: 1rem;
+  padding: 1rem 0;
 `;

package/src/Navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { isEmptyArray, isPrimitive } from '@theme/utils';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
@@ -30,9 +31,12 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
   const openMobileMenu = () => setIsOpen(true);
   const closeMobileMenu = () => setIsOpen(false);
 
+  const menuItemsExist = !isPrimitive(menu) && !isEmptyArray(menu);
+
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
-      <MobileNavbarMenuButton onClick={openMobileMenu} />
+      {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
+
       {isOpen && (
         <MobileNavbarMenu
           closeMenu={closeMobileMenu}

package/src/Pages/Forbidden.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/Button';
+
+export function Forbidden(): JSX.Element {
+  return (
+    <Wrapper data-component-name="Pages/Forbidden">
+      <Header>403</Header>
+      <Description>Access forbidden</Description>
+      <HomeButton color="primary" size="large" to="/">
+        Open Homepage
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-403-button-margin);
+`;

package/src/Pages/NotFound.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@theme/Button';
+
+export function NotFound(): JSX.Element {
+  return (
+    <Wrapper data-component-name="Pages/NotFound">
+      <Header>404</Header>
+      <Description>It looks like you&apos;re lost</Description>
+      <HomeButton color="primary" size="large" to="/">
+        Open Homepage
+      </HomeButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 25px auto;
+  font-family: var(--page-404-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-404-header-text-color);
+  margin: var(--page-404-header-margin);
+  font-size: var(--page-404-header-font-size);
+  line-height: var(--page-404-header-line-height);
+  font-weight: var(--page-404-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-404-description-text-color);
+  margin: var(--page-404-description-margin);
+  font-size: var(--page-404-description-font-size);
+  line-height: var(--page-404-description-line-height);
+  font-weight: var(--page-404-description-font-weight);
+`;
+
+const HomeButton = styled(Button)`
+  margin-top: var(--page-404-button-margin);
+`;

package/src/Pages/index.ts

@@ -0,0 +1 @@
+export * from '@theme/Pages/NotFound';

package/src/Search/Autocomplete.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import hotkeys from 'hotkeys-js';
 
 import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 
 import { FormInput } from '@theme/Search/Input';
 import { Popover } from '@theme/Search/Popover';
+import { ShortcutKey } from '@theme/Search/ShortcutKey';
 import type { ActiveItem } from '@portal/types';
 
 interface AutocompleteProps<T> {
@@ -16,6 +18,8 @@ interface AutocompleteProps<T> {
   change(value: string): void;
   select(item: T): void;
   children?(isOpen: boolean, close: () => void): ReactNode;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  keyShortcuts?: string[];
 }
 
 export function Autocomplete<T>({
@@ -26,12 +30,28 @@ export function Autocomplete<T>({
   select,
   renderItem,
   children,
+  keyShortcuts,
 }: AutocompleteProps<T>): JSX.Element {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
   const [activeIdx, setActiveIdx] = useState(-1);
+  const refInput = useRef<HTMLInputElement>(null);
+
+  const hotkeysKeys = keyShortcuts?.join(',');
+
+  useEffect(() => {
+    if (hotkeysKeys) {
+      hotkeys(hotkeysKeys, (ev) => {
+        refInput.current?.focus();
+        ev.preventDefault();
+      });
+
+      return () => hotkeys.unbind(hotkeysKeys as string);
+    }
+  }, [hotkeysKeys]);
 
   const open = () => setIsOpen(true);
+
   const close = () => {
     setIsOpen(false);
     setActiveIdx(-1);
@@ -65,6 +85,7 @@ export function Autocomplete<T>({
         break;
       case 'Enter':
         if (activeIdx > -1) {
+          reset();
           select(items[activeIdx]);
         }
         break;
@@ -82,15 +103,18 @@ export function Autocomplete<T>({
     <Wrapper data-component-name="Search/Autocomplete">
       {isOpen ? <Overlay onClick={close} /> : null}
       <AutocompleteBox onKeyDown={onKeydown}>
+        {children?.(isOpen, reset)}
+
         <FormInput
           value={value}
           placeholder={placeholder}
           onChange={onChange}
           onFocus={open}
           onClick={stopPropagation}
+          ref={refInput}
         />
 
-        {children?.(isOpen, reset)}
+        {!isOpen && <ShortcutKey keyShortcuts={keyShortcuts} />}
 
         {isOpen && value ? (
           <Popover>{items.length ? items.map(mapItem) : <Message>No results</Message>}</Popover>

package/src/Search/ClearIcon.tsx

@@ -24,7 +24,7 @@ export const ClearIcon = styled(Icon).attrs(() => ({
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;
-  right: 1.2em;
+  left: 1.2em;
   fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/Search/Input.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const FormInput = styled.input.attrs(() => ({
   'data-component-name': 'Search/Input',
 }))`
-  padding: 1em 2.5em 1em 1em;
+  padding: 1em 2.5em 1em 2.5em;
   background-color: var(--search-input-background-color);
   border-radius: var(--search-input-border-radius);
   border: var(--search-input-border);

package/src/Search/Search.tsx

@@ -7,6 +7,7 @@ import { Autocomplete } from '@theme/Search/Autocomplete';
 import { ClearIcon } from '@theme/Search/ClearIcon';
 import { SearchIcon } from '@theme/Search/SearchIcon';
 import { SearchItem } from '@theme/Search/SearchItem';
+import { useThemeConfig } from '@theme/hooks';
 
 interface OperationParameter {
   name: string | string[];
@@ -29,6 +30,7 @@ interface SearchDocument {
 export function Search(): JSX.Element {
   const history = usePreloadHistory();
   const { query, setQuery, items } = useFuseSearch();
+  const themeSettings = useThemeConfig();
 
   // TODO: ask somebody about typings
   const navigate = (item: SearchDocument) => history.push(item.url);
@@ -40,6 +42,7 @@ export function Search(): JSX.Element {
       change={setQuery}
       select={navigate}
       placeholder="Search the docs"
+      keyShortcuts={themeSettings?.search?.shortcuts ?? ['/']}
       renderItem={(item) => <SearchItem key={item.id} item={item} />}
     >
       {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}

package/src/Search/SearchIcon.tsx

@@ -24,7 +24,7 @@ export const SearchIcon = styled(Icon).attrs(() => ({
   cursor: pointer;
   width: 1em;
   height: 1em;
-  right: 1em;
+  left: 0.8em;
   fill: var(--search-input-text-color);
   z-index: -1;
 

package/src/Search/ShortcutKey.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface ShortcutKeyProps {
+  keyShortcuts?: string | string[];
+}
+
+export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
+  let mainShortcutKey: string | null | undefined = null;
+
+  if (props.keyShortcuts) {
+    if (Array.isArray(props.keyShortcuts)) {
+      mainShortcutKey = props.keyShortcuts[0];
+    } else {
+      mainShortcutKey = props.keyShortcuts;
+    }
+  }
+
+  mainShortcutKey = mainShortcutKey?.toUpperCase();
+
+  return <Wrapper>{mainShortcutKey}</Wrapper>;
+}
+
+export const Wrapper = styled.div`
+  position: absolute;
+  cursor: pointer;
+  font-size: 0.8em;
+  height: 2em;
+  line-height: 2em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+  color: var(--search-input-placeholder-color);
+  opacity: 0.5;
+  z-index: -1;
+`;

package/src/config.ts

@@ -94,6 +94,7 @@ export const ThemeConfig = z
     search: z
       .object({
         placement: z.string().default('navbar').optional(),
+        shortcuts: z.array(z.string()).default(['/']).optional(),
       })
       .extend(HideConfig.shape)
       .strict()
@@ -195,4 +196,7 @@ export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 's
     }[];
     devLogin?: boolean;
   };
+  search?: {
+    shortcuts?: string[];
+  };
 };

package/src/globalStyle.ts

@@ -1804,6 +1804,16 @@ const markdown = css`
   --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
 
   // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+
+  --md-tabs-tab-text-color: var(--color-emphasis-600); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--text-color); // @presenter Color
+  --md-tabs-hover-tab-border-color: var(--text-color-secondary); // @presenter Color
+
+  // @tokens End
 `;
 
 const search = css`
@@ -1904,7 +1914,55 @@ const tile = css`
 `;
 
 const apiLogsTable = css`
- --api-logs-row-hover-background-color: var(--color-secondary-300)
+ --api-logs-row-hover-background-color: var(--color-secondary-300);
+`
+
+const pages = css`
+  /**
+  * @tokens 404 Page
+  * @presenter Color
+  */
+
+  --page-404-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --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
+  --page-404-header-margin: 0; // @presenter Spacing
+
+  --page-404-description-text-color: #000;
+  --page-404-description-font-size: 2em; // @presenter FontSize
+  --page-404-description-font-weight: 400; // @presenter FontWeight
+  --page-404-description-line-height: 1; // @presenter LineHeight
+  --page-404-description-margin: 0; // @presenter Spacing
+
+  --page-404-button-margin: 4em; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @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
 `
 
 export const styles = css`
@@ -1936,6 +1994,7 @@ export const styles = css`
     ${tile}
     ${loadProgressBar}
     ${apiLogsTable}
+    ${pages}
   }
 
   :root.dark {

package/src/index.ts

@@ -21,3 +21,4 @@ export * from './ColorModeSwitcher';
 export * from './Sidebar';
 export * from './types/config';
 export * from './config';
+export * from './Pages';

package/src/mocks/Link.tsx

@@ -11,6 +11,7 @@ export function Link(props: any): JSX.Element {
     external: _4,
     ...filteredProps
   } = props;
+
   // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-  return <a href={filteredProps.to} {...filteredProps} />;
+  return <a href={filteredProps.to} ref={filteredProps.innerRef} {...filteredProps} />;
 }

package/src/mocks/hooks/index.ts

@@ -8,7 +8,11 @@ interface PageLink {
 
 export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUIConfig {
   return {
-    search: { hide: false, placement: 'navbar' },
+    search: {
+      hide: false,
+      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' },

package/src/mocks/search.ts

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 interface OperationParameter {
   name: string | string[];
   description: string | string[];
@@ -21,11 +23,24 @@ export function useFuseSearch(): {
   setQuery: (val: string) => void;
   items: SearchDocument[];
 } {
+  const [query, setQuery] = useState('');
+
   return {
-    query: '',
-    setQuery(val: string) {
-      this.query = val;
-    },
-    items: [],
+    query,
+    setQuery,
+    items: [
+      {
+        id: '1',
+        url: '#someUrl1',
+        title: 'Some Dummy Result Item 1',
+        text: 'Some sample search text',
+      },
+      {
+        id: '2',
+        url: '#someUrl2',
+        title: 'Some Dummy Result Item 2',
+        text: 'Some sample search text 2',
+      },
+    ],
   };
 }

package/src/ui/darkColors.tsx

@@ -59,8 +59,13 @@ export const darkMode = css`
   --copy-button-tooltip-background-color: var(--tooltip-background-color);
   --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;
+  --page-404-header-text-color: #fff;
+  --page-404-description-text-color: #fff;
+  --page-403-header-text-color: #fff;
+  --page-403-description-text-color: #fff;
 
   background-color: var(--background-color);
   color: var(--text-color);