@redocly/theme 0.13.1 → 0.14.1

package/lib/globalStyle.js

@@ -1818,24 +1818,26 @@ const search = (0, styled_components_1.css) `
       * @tokens Search
       */
 
-  --search-highlight-text-color: #ffff03; // @presenter Color
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: #1677FF; // @presenter Color
 
   /**
       * @tokens Portal Search
       */
 
-  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
-  --search-input-text-color: #fff; // @presenter Color
+  --search-input-background-color: #fafafa; // @presenter Color
+  --search-input-text-color: var(--text-color); // @presenter Color
 
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
-  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize
+  --search-input-font-size: 14px; // @presenter FontSize
   --search-input-font-family: var(--font-family-base); // @presenter FontFamily
   --search-input-line-height: 1.15em; // @presenter LineHeight
 
-  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-input-hover-background-color: #fafafa; // @presenter Color
   --search-input-hover-border: none; // @presenter Color
-  --search-input-placeholder-color: var(--search-input-text-color);
+  --search-input-placeholder-color: #a8a8a8;
+  --search-input-icons-color: #a8a8a8;
 
   --search-popover-background-color: var(--background-color); // @presenter Color
   --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
@@ -1844,12 +1846,21 @@ const search = (0, styled_components_1.css) `
   --search-popover-border: none;
 
   --search-item-padding: 8px 24px;
-  --search-item-text-color: var(--text-color-secondary); // @presenter Color
-  --search-item-title-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-text-color: #525252; // @presenter Color
+  --search-item-title-text-color: #161616; // @presenter Color
+  --search-item-path-text-color: #8d8d8d; // @presenter Color
   --search-item-background-color: transparent; // @presenter Color
-  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-active-text-color: var(--text-color); // @presenter Color
   --search-item-active-title-text-color: var(--text-color); // @presenter Color
-  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color
+  --search-item-active-background-color: #fafafa; // @presenter Color
+
+  --search-trigger-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color); // @presenter Color
+  --search-trigger-border: none; // @presenter Border
+  --search-trigger-border-radius: 6px; // @presenter BorderRadius
+  --search-trigger-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-shortcut-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-font-size: var(--navbar-item-font-size); // @presenter FontSize
 
   /**
     * @tokens Sidebar Search
@@ -2018,7 +2029,7 @@ const modal = (0, styled_components_1.css) `
     overflow: hidden;
   }
 
-  --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
+  --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);
 `;

package/lib/hooks/useDialogHotKeys.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export declare function useDialogHotKeys(ref: MutableRefObject<HTMLElement | null>, onClose: () => void): void;

package/lib/hooks/useDialogHotKeys.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogHotKeys = void 0;
+const react_1 = require("react");
+function useDialogHotKeys(ref, onClose) {
+    const firstFocusableRef = (0, react_1.useRef)();
+    const lastFocusableRef = (0, react_1.useRef)();
+    const onKeyDownHandler = (event) => {
+        var _a, _b;
+        if (event.key === 'Escape') {
+            onClose();
+        }
+        else if (event.key === 'Tab') {
+            if (!event.shiftKey && document.activeElement === lastFocusableRef.current) {
+                event.preventDefault();
+                (_a = firstFocusableRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (event.shiftKey && document.activeElement === firstFocusableRef.current) {
+                event.preventDefault();
+                (_b = lastFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    };
+    const onFocusableElementsHandler = () => {
+        var _a, _b;
+        const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            firstFocusableRef.current = focusableElements[0];
+            lastFocusableRef.current = focusableElements[focusableElements.length - 1];
+            (_b = firstFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', onKeyDownHandler);
+        return () => {
+            document.removeEventListener('keydown', onKeyDownHandler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        onFocusableElementsHandler();
+    });
+}
+exports.useDialogHotKeys = useDialogHotKeys;
+//# sourceMappingURL=useDialogHotKeys.js.map

package/lib/icons/SpinnerIcon/SpinnerIcon.js

@@ -16,13 +16,11 @@ exports.Icon = Icon;
 exports.SpinnerIcon = (0, styled_components_1.default)(exports.Icon).attrs(() => ({
     'data-component-name': 'icons/AnchorIcon/AnchorIcon',
 })) `
-  position: absolute;
   cursor: pointer;
   width: 1em;
   height: 1em;
   left: 0.8em;
   stroke: var(--search-input-text-color);
-  z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 1.2em;

package/lib/mocks/search.d.ts

@@ -17,7 +17,16 @@ interface SearchDocument {
 export declare function useFuseSearch(): {
     query: string;
     setQuery: (val: string) => void;
-    items: SearchDocument[];
+    items: SearchDocument[] | null;
     isLoading: boolean;
 };
+export declare const useRecentSearches: () => {
+    items: string[];
+    addSearchHistoryItem: (value: string) => string;
+    removeSearchHistoryItem: (value: string) => string;
+};
+export declare const useSuggestedPages: () => {
+    link: string;
+    label: string;
+}[];
 export {};

package/lib/mocks/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFuseSearch = void 0;
+exports.useSuggestedPages = exports.useRecentSearches = exports.useFuseSearch = void 0;
 const react_1 = require("react");
 function useFuseSearch() {
     const [query, setQuery] = (0, react_1.useState)('');
@@ -25,4 +25,22 @@ function useFuseSearch() {
     };
 }
 exports.useFuseSearch = useFuseSearch;
+const useRecentSearches = () => {
+    const items = ['test'];
+    return {
+        items,
+        addSearchHistoryItem: (value) => value,
+        removeSearchHistoryItem: (value) => value,
+    };
+};
+exports.useRecentSearches = useRecentSearches;
+const useSuggestedPages = () => {
+    return [
+        {
+            link: '/',
+            label: 'some page',
+        },
+    ];
+};
+exports.useSuggestedPages = useSuggestedPages;
 //# sourceMappingURL=search.js.map

package/lib/types/portal/src/shared/types/activeItem.d.ts

@@ -1,3 +1,3 @@
 export type ActiveItem<T> = T & {
-    active: boolean;
+    active?: boolean;
 };

package/lib/ui/darkColors.js

@@ -47,9 +47,14 @@ exports.darkMode = (0, styled_components_1.css) `
   --button-border-color: #0065fb;
   --button-hover-background-color: #2b4cc4;
   --button-hover-border-color: #2b4cc4;
+  --search-input-background-color: #1b2738;
   --search-popover-background-color: #1b2738;
   --search-highlight-text-color: #ffff03;
-  --search-item-active-background-color: #1f3559;
+  --search-item-text-color: #ffffffcf;
+  --search-item-title-text-color: #ffffff;
+  --search-item-active-text-color: var(--text-color);
+  --search-item-active-title-text-color: var(--text-color);
+  --search-item-active-background-color: #1b2738;
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;
   --panel-try-it-tabs-hover-background-color: #141a26;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Shared UI components library",
   "keywords": [],
   "author": "team@redocly.com",
@@ -20,7 +20,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.4.4",
+    "react-router-dom": "^6.10.0",
     "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
@@ -65,7 +65,7 @@
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.4.4",
+    "react-router-dom": "^6.10.0",
     "storybook-addon-pseudo-states": "^1.15.1",
     "storybook-design-token": "^2.9.0",
     "styled-components": "^5.3.6",

package/src/components/Navbar/MobileNavbarMenu.tsx

@@ -13,10 +13,8 @@ import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 export function MobileNavbarMenu({
   menuItems,
   closeMenu,
-  search,
 }: {
   menuItems: ResolvedConfigLinks;
-  search: React.ReactNode | undefined;
   closeMenu: () => void;
 }): JSX.Element | null {
   if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
@@ -26,7 +24,6 @@ export function MobileNavbarMenu({
   return (
     <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
       <NavbarItemsContainer>
-        <MobileSearchWrapper>{search || null}</MobileSearchWrapper>
         {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
           return (
             <MobileNavbarItem
@@ -112,14 +109,3 @@ const NavbarItemsContainer = styled.ul`
     position: relative;
   }
 `;
-
-const MobileSearchWrapper = styled.div`
-  padding: var(--navbar-item-padding-horizontal);
-  > div {
-    display: block;
-    width: 100%;
-  }
-  input {
-    width: 100%;
-  }
-`;

package/src/components/Navbar/Navbar.tsx

@@ -93,11 +93,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
       {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
 
       {isOpen && (
-        <MobileNavbarMenu
-          closeMenu={closeMobileMenu}
-          menuItems={menu as ResolvedConfigLinks}
-          search={hideSearch ? null : <Search />}
-        />
+        <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu as ResolvedConfigLinks} />
       )}
       <NavbarRow>
         <NavbarLogo logo={logo} />

package/src/components/Search/CancelSearch.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { useTranslate } from '@theme/mocks/hooks';
+
+export function CancelSearch({ onClick }: { onClick: () => void }): JSX.Element {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    cancel: 'theme.search.cancel',
+  };
+
+  return (
+    <Wrapper data-component-name="Search/CancelSearch" onClick={onClick}>
+      <Button data-translation-keys={translationKeys.cancel}>
+        {translate(translationKeys.cancel, 'Cancel')}
+      </Button>
+    </Wrapper>
+  );
+}
+
+const Button = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  padding: 4px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 22px;
+  height: 32px;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 12px 16px 16px;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;

package/src/components/Search/ClearIcon.tsx

@@ -20,7 +20,6 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
 export const ClearIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'Search/ClearIcon',
 }))`
-  position: absolute;
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;

package/src/components/Search/ClockBackwardsIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { SVGProps } from 'react';
+
+const Icon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.295 11L7.5 8.205V3.5H8.5V7.79L11 10.295L10.295 11Z" />
+    <path d="M8 1C7.06748 1.00013 6.14446 1.18739 5.28562 1.55068C4.42677 1.91397 3.64955 2.44591 3 3.115V1H2V5H6V4H3.54C4.47801 2.95765 5.75149 2.27676 7.13926 2.0756C8.52703 1.87444 9.94142 2.16571 11.1368 2.89882C12.3322 3.63193 13.233 4.76057 13.6829 6.08873C14.1327 7.41689 14.1032 8.86066 13.5993 10.1693C13.0955 11.4779 12.1492 12.5688 10.9249 13.2523C9.7005 13.9359 8.27537 14.1691 6.897 13.9113C5.51862 13.6535 4.27407 12.9211 3.3795 11.8412C2.48492 10.7614 1.99683 9.40227 2 8H1C1 9.38447 1.41054 10.7378 2.17971 11.889C2.94888 13.0401 4.04213 13.9373 5.32122 14.4672C6.6003 14.997 8.00776 15.1356 9.36563 14.8655C10.7235 14.5954 11.9708 13.9287 12.9497 12.9497C13.9287 11.9708 14.5954 10.7235 14.8655 9.36563C15.1356 8.00776 14.997 6.6003 14.4672 5.32122C13.9373 4.04213 13.0401 2.94888 11.889 2.17971C10.7378 1.41054 9.38447 1 8 1Z" />
+  </svg>
+);
+
+export const ClockBackwardsIcon = styled(Icon).attrs(({ className }: { className?: string }) => ({
+  'data-component-name': 'Search/RecentlyViewedIcon',
+  className,
+}))`
+  width: 0.5em;
+  height: 0.5em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;

package/src/components/Search/Input.tsx

@@ -12,13 +12,9 @@ export const FormInput = styled.input.attrs(() => ({
   font-size: var(--search-input-font-size);
   font-family: var(--search-input-font-family);
   line-height: var(--search-input-line-height);
+  width: 100%;
 
   ::placeholder {
     color: var(--search-input-placeholder-color);
   }
-
-  &:hover {
-    background-color: var(--search-input-hover-background-color);
-    border: var(--search-input-hover-border);
-  }
 `;

package/src/components/Search/InputWrapper.tsx

@@ -0,0 +1,93 @@
+import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+import type { ChangeEvent, SyntheticEvent } from 'react';
+
+import { FormInput } from '@theme/components/Search/Input';
+import { SearchIcon as ThemeSearchIcon } from '@theme/components/Search/SearchIcon';
+import { SpinnerIcon as ThemeSpinnerIcon } from '@theme/icons/SpinnerIcon';
+import { ClearIcon as ThemeClearIcon } from '@theme/components/Search/ClearIcon';
+
+interface InputWrapperProps {
+  placeholder?: string;
+  value: string;
+  change(value: string): void;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  isLoading: boolean;
+}
+
+export function InputWrapper({
+  placeholder,
+  value,
+  change,
+  isLoading,
+}: InputWrapperProps): JSX.Element {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const refInput = useRef<HTMLInputElement>(null);
+
+  const onFocus = () => setIsFocused(true);
+
+  const close = () => {
+    setIsFocused(false);
+  };
+
+  const reset = () => {
+    change('');
+    close();
+  };
+
+  const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    change(event.target.value);
+  };
+
+  return (
+    <Wrapper data-component-name="Search/InputContainer">
+      {isFocused && isLoading ? <SpinnerIcon /> : <SearchIcon />}
+      <FormInput
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        onFocus={onFocus}
+        onClick={stopPropagation}
+        ref={refInput}
+      />
+      {!!value && <ClearIcon onClick={reset} />}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  height: 56px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: var(--search-input-background-color);
+  border-radius: 0;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    border-radius: 8px 8px 0 0;
+  }
+`;
+
+const SearchIcon = styled(ThemeSearchIcon)`
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+
+const SpinnerIcon = styled(ThemeSpinnerIcon)`
+  width: 20px;
+  height: 20px;
+  fill: var(--search-input-placeholder-color);
+`;
+
+const ClearIcon = styled(ThemeClearIcon)`
+  width: 12px;
+  height: 12px;
+  fill: var(--search-input-placeholder-color);
+`;

package/src/components/Search/MobileSearchTrigger.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { SearchIcon as ThemeSearchIcon } from '@theme/components/Search/SearchIcon';
+
+export function MobileSearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+  return (
+    <Wrapper data-component-name="Search/MobileSearchTrigger" onClick={onClick}>
+      <SearchIcon />
+    </Wrapper>
+  );
+}
+
+const SearchIcon = styled(ThemeSearchIcon)`
+  width: 20px;
+  height: 20px;
+  fill: #8d8d8d;
+`;
+
+const Wrapper = styled.div`
+  display: block;
+  user-select: none;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;

package/src/components/Search/RecentSearches.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ClockBackwardsIcon as ThemeClockBackwardsIcon } from '@theme/components/Search/ClockBackwardsIcon';
+import { ClearIcon as ThemeClearIcon } from '@theme/components/Search/ClearIcon';
+import { useRecentSearches } from '@portal/search';
+import { useTranslate } from '@portal/hooks';
+
+export function RecentSearches({ onSelect }: { onSelect: (value: string) => void }) {
+  const { items, removeSearchHistoryItem } = useRecentSearches();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    title: 'theme.search.recent',
+  };
+
+  if (!items || !items.length) return null;
+
+  const removeItem = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
+    e.stopPropagation();
+    removeSearchHistoryItem(item);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string) => {
+    if (e.key === 'Enter') {
+      onSelect(item);
+    }
+  };
+
+  return (
+    <Wrapper data-component-name="Search/RecentSearches">
+      <Title data-translation-key={translationKeys.title}>
+        {translate(translationKeys.title, 'Recent searches')}
+      </Title>
+      <RecentItems>
+        {items.map((item) => (
+          <Item
+            key={item}
+            onClick={() => onSelect(item)}
+            onKeyDown={(e) => handleKeyDown(e, item)}
+            tabIndex={0}
+            role="link"
+          >
+            <Group>
+              <ClockBackwardsIcon />
+              {item}
+            </Group>
+            <ClearIcon onClick={(e) => removeItem(e, item)} />
+          </Item>
+        ))}
+      </RecentItems>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Title = styled.div`
+  color: var(--search-item-title-text-color);
+  font-weight: 600;
+  font-size: var(--font-size-small);
+  line-height: 20px;
+  padding: 8px 24px;
+`;
+
+const RecentItems = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px 12px 12px;
+`;
+
+const ClockBackwardsIcon = styled(ThemeClockBackwardsIcon)`
+  width: 16px;
+  height: 16px;
+  fill: #8d8d8d;
+`;
+
+const ClearIcon = styled(ThemeClearIcon)`
+  display: inline;
+  width: 10px;
+  height: 10px;
+  fill: var(--search-item-active-text-color))
+`;
+
+const Item = styled.div`
+  display: flex;
+  font-size: var(--font-size-base);
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  color: var(--search-item-text-color);
+  width: 100%;
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--search-item-active-background-color);
+    color: var(--search-item-active-text-color);
+
+    ${ClockBackwardsIcon} {
+      fill: var(--search-item-active-text-color);
+    }
+
+    ${ClearIcon} {
+      display: inline;
+    }
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary-200);
+    border-radius: 2px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    ${ClearIcon} {
+      display: none;
+    }
+  }
+`;
+
+const Group = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;