@redocly/theme 0.6.4 → 0.7.0

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

@@ -81,9 +81,20 @@ export const ThemeConfig = z
       .optional(),
     links: z.array(LinksConfig).optional(),
 
+    feedback: z
+      .object({
+        type: z.string().default('sentiment'),
+        settings: z.string().optional(),
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .default({})
+      .optional(),
+
     search: z
       .object({
         placement: z.string().default('navbar').optional(),
+        shortcuts: z.array(z.string()).default(['/']).optional(),
       })
       .extend(HideConfig.shape)
       .strict()
@@ -159,6 +170,15 @@ export const ThemeConfig = z
       .optional(),
     openapi: z.object({}).passthrough().optional(),
     graphql: z.object({}).passthrough().optional(),
+    userProfile: z
+      .object({
+        loginLabel: z.string().default('Login').optional(),
+        logoutLabel: z.string().default('Logout').optional(),
+        logoutRedirect: z.string().default('/').optional(),
+      })
+      .extend(HideConfig.shape)
+      .optional()
+      .default({}),
   })
   .passthrough()
   .default({});
@@ -176,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`
@@ -1903,6 +1913,58 @@ const tile = css`
   --thin-tile-background-color: var(--color-secondary-50);
 `;
 
+const apiLogsTable = css`
+ --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`
   :root {
     ${baseColors}
@@ -1931,6 +1993,8 @@ export const styles = css`
     ${lastUpdated}
     ${tile}
     ${loadProgressBar}
+    ${apiLogsTable}
+    ${pages}
   }
 
   :root.dark {

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './Tooltip';
 export * from './SourceCode';
 export * from './Panel';
 export * from './icons';
+export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
@@ -20,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' },
@@ -32,6 +36,12 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
     colorMode: {
       modes: ['light', 'dark'],
     },
+    feedback: {
+      type: 'sentiment',
+    },
+    userProfile: {
+      hide: false,
+    },
   } as ThemeUIConfig as T & ThemeUIConfig;
 }
 

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/settings.yaml

@@ -25,3 +25,5 @@ colorMode:
     - 'dark'
 lastUpdatedBlock:
   hide: false
+userProfile:
+  hide: false

package/src/types/portal/index.d.ts

@@ -1,2 +1,2 @@
 export * from './src/shared/types/nav';
-export type { MdHeading } from './src/shared/types/markdown';
+export type { MdHeading } from './src/shared/types/markdown';

package/src/ui/Box.tsx

@@ -1,4 +1,4 @@
-import { space, position, flex, textAlign, color, border, layout } from 'styled-system';
+import { space, position, flex, textAlign, color, border, layout, grid } from 'styled-system';
 import styled from 'styled-components';
 
 import type {
@@ -9,6 +9,7 @@ import type {
   PositionProps,
   FlexProps,
   BordersProps,
+  GridProps,
 } from 'styled-system';
 
 export interface BoxProps
@@ -18,7 +19,8 @@ export interface BoxProps
     FlexProps,
     TextAlignProps,
     ColorProps,
-    BordersProps {}
+    BordersProps,
+    GridProps {}
 
 export const Box = styled.div.attrs(() => ({
   'data-component-name': 'ui/Box',
@@ -31,4 +33,5 @@ export const Box = styled.div.attrs(() => ({
   ${textAlign}
   ${color}
   ${border}
+  ${grid}
 `;

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);