@redocly/theme 0.1.20 → 0.1.21

package/{ui/Arrow.js → icons/ArrowIcon/ArrowIcon.js}

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Arrow = void 0;
+exports.ArrowIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function directionToTransform(_a) {
@@ -25,9 +25,9 @@ function directionToTransform(_a) {
 }
 var Icon = function (_a) {
     var className = _a.className;
-    return (react_1.default.createElement("span", { "data-component-name": "ui/Arrow/Arrow" },
+    return (react_1.default.createElement("span", { "data-component-name": "icons/ArrowIcon/ArrowIcon" },
         react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
             react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
-exports.Arrow = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
+exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/icons/ArrowIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { ArrowIcon } from '../../icons/ArrowIcon/ArrowIcon';
+export type { ArrowIconProps } from '../../icons/ArrowIcon/ArrowIcon';

package/icons/ArrowIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowIcon = void 0;
+var ArrowIcon_1 = require("../../icons/ArrowIcon/ArrowIcon");
+Object.defineProperty(exports, "ArrowIcon", { enumerable: true, get: function () { return ArrowIcon_1.ArrowIcon; } });

package/icons/index.d.ts

@@ -1 +1,3 @@
 export * from '../icons/ShelfIcon';
+export * from '../icons/AlertIcon';
+export * from '../icons/ArrowIcon';

package/icons/index.js

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../icons/ShelfIcon"), exports);
+__exportStar(require("../icons/AlertIcon"), exports);
+__exportStar(require("../icons/ArrowIcon"), exports);

package/index.d.ts

@@ -1,7 +1,7 @@
 export * from './Button';
 export * from './CopyButton';
 export * from './JsonViewer';
-export * from './Headings';
+export * from './Typography';
 export * from './SidebarLogo';
 export * from './CodeBlock';
 export * from './SamplesPanelControls';

package/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
 __exportStar(require("./CopyButton"), exports);
 __exportStar(require("./JsonViewer"), exports);
-__exportStar(require("./Headings"), exports);
+__exportStar(require("./Typography"), exports);
 __exportStar(require("./SidebarLogo"), exports);
 __exportStar(require("./CodeBlock"), exports);
 __exportStar(require("./SamplesPanelControls"), exports);

package/mocks/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_THEME_NAME = "@redocly/theme";
+export declare const USER_THEME_ALIAS = "@theme";

package/mocks/constants/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = void 0;
+exports.DEFAULT_THEME_NAME = '@redocly/theme';
+exports.USER_THEME_ALIAS = '@theme';

package/mocks/hooks/index.d.ts

@@ -0,0 +1,6 @@
+interface RawTheme {
+    name: string;
+    settings?: any;
+}
+export declare function useThemeSettings(name: string): RawTheme['settings'];
+export {};

package/mocks/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeSettings = void 0;
+function useThemeSettings(name) {
+    return {
+        name: name,
+        settings: {
+            toc: { header: 'header', hide: false },
+            navigation: {
+                nextPageLink: { label: 'next page' },
+                previousPageLink: { label: 'prev page' },
+            },
+        },
+    };
+}
+exports.useThemeSettings = useThemeSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/settings.yaml

@@ -0,0 +1,9 @@
+search:
+  hide: false
+  placement: navbar
+toc:
+  header:
+    hide: false
+    label: On this page
+navigation:
+  hide: false

package/src/Button/Button.tsx

@@ -1,5 +1,8 @@
+import React from 'react';
 import styled, { css, FlattenSimpleInterpolation, keyframes, Keyframes } from 'styled-components';
 
+import { Link } from '@portal/Link';
+
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
 export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
@@ -12,6 +15,8 @@ export interface ButtonProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   extraClass?: string;
+  to?: string;
+  onClick?: () => void;
 }
 
 const getBlink = (): Keyframes => keyframes`
@@ -59,8 +64,9 @@ export const baseButtonStyles = css`
   }
 `;
 
-export const Button = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
+const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: ButtonProps) => ({
   className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+  'data-component-name': 'Button/Button',
 }))<ButtonProps>`
   text-decoration: none;
   text-align: center;
@@ -120,3 +126,15 @@ export const Button = styled.button.attrs(({ color = 'default', extraClass }: Bu
       }
     `}
 `;
+
+export const Button: React.FC<ButtonProps> = (props) => {
+  if (props.to) {
+    return (
+      <Link to={props.to}>
+        <StyledButton {...props} />
+      </Link>
+    );
+  } else {
+    return <StyledButton {...props} />;
+  }
+};

package/src/JsonViewer/JsonViewer.tsx

@@ -6,7 +6,6 @@ import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControl
 import { jsonToHTML } from '@theme/utils';
 import { useMount, useUnmount } from '@theme/hooks';
 import { CodeBlock } from '@theme/CodeBlock';
-import { jsonStyles } from '@theme/JsonViewer/styled';
 
 export interface JsonProps {
   data: any;
@@ -105,7 +104,112 @@ function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): J
 export const Json = memo<JsonProps>(JsonComponent);
 
 export const JsonViewer = styled(Json)<JsonProps>`
-  ${jsonStyles};
+  .redoc-json code {
+    background-color: var(--samples-panel-controls-background-color);
+    color: var(--color-content-inverse);
+    padding: inherit;
+    border: none;
+
+    & > .collapser {
+      display: none;
+      pointer-events: none;
+    }
+  }
+
+  contain: content;
+  overflow-x: auto;
+  padding: 10px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
+  white-space: var(--code-wrap, pre);
+
+  .callback-function {
+    color: gray;
+  }
+
+  .collapser:after {
+    content: '-';
+    cursor: pointer;
+  }
+
+  .collapsed > .collapser:after {
+    content: '+';
+    cursor: pointer;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    margin-left: 2ch;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    background-color: transparent;
+    border: 0;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    top: 4px;
+    left: -1.5em;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+    padding: 2px;
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0 0 0 26px;
+  }
+
+  li {
+    position: relative;
+    display: block;
+  }
+
+  .hoverable {
+    display: inline-block;
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inherit;
+  }
 `;
 
 export const JsonViewerWrap = styled.div`

package/src/JsonViewer/index.ts

@@ -1,2 +1 @@
 export * from '@theme/JsonViewer/JsonViewer';
-export * from '@theme/JsonViewer/styled';

package/src/Markdown/Admonition.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { AlertIcon } from '@theme/ui/AlertIcon';
+import { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
 
 interface AdmonitionTypeProps {
   type: 'warning' | 'success' | 'danger' | 'attention' | 'info';

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
-import {
-  Wrapper,
-  DoneIndicator,
-  CopyCodeButton,
-  CodeSampleButtonContainer,
-} from '@theme/Markdown/CodeSample/styled';
 
 type CodeSampleProps = {
   language: string;
@@ -37,3 +32,162 @@ export function CodeSample({ rawContent, highlighted, language }: CodeSampleProp
     </Wrapper>
   );
 }
+
+const CodeSampleButtonContainer = styled.div`
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+
+const CopyCodeButton = styled.div`
+  padding: 0 5px;
+  border-radius: 4px;
+  display: none;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const DoneIndicator = styled.div`
+  padding: 0 5px;
+  border-radius: 4px;
+  cursor: default;
+`;
+
+const darkStyleTokens = css`
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #62bff9;
+  }
+  .token.boolean {
+    color: firebrick;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a0fbaa;
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+  .token.deleted {
+    color: red;
+  }
+`;
+
+const Wrapper = styled.div`
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${CopyCodeButton},
+  ${DoneIndicator} {
+    color: rgba(255, 255, 255, 0.15);
+  }
+  ${CopyCodeButton}:hover {
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+
+  &:hover {
+    ${CodeSampleButtonContainer} ${CopyCodeButton} {
+      display: block;
+    }
+  }
+  pre {
+    white-space: var(--code-wrap);
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: 4px;
+    font-family: var(--code-font-family);
+    background-color: var(--code-block-preformatted-background-color);
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      color: white;
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: var(--global-border-radius);
+  }
+  code[class='language-text'] {
+    line-height: 1.2em;
+    display: inline-flex;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+    .token.entity {
+      cursor: help;
+    }
+    .token.punctuation {
+      opacity: 0.7;
+    }
+    .namespace {
+      opacity: 0.7;
+    }
+
+    ${darkStyleTokens};
+  }
+`;

package/src/Markdown/CodeSample/index.ts

@@ -1,2 +1 @@
 export * from '@theme/Markdown/CodeSample/CodeSample';
-export * from '@theme/Markdown/CodeSample/styled';

package/src/Navbar/Navbar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { useThemeSettings } from '@portal/hooks';
+import { USER_THEME_ALIAS } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 
@@ -11,11 +13,16 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
+  const searchThemeSettings = useThemeSettings(USER_THEME_ALIAS)?.search;
+  const hideSearch =
+    searchThemeSettings?.hide ||
+    (searchThemeSettings?.placement && searchThemeSettings?.placement !== 'navbar');
+
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
       {logo}
       <NavbarMenu menuItems={menu} />
-      {search}
+      {hideSearch ? null : search}
     </NavbarContainer>
   );
 }

package/src/PageNavigation/NextPageLink.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 import { usePageData } from '@portal/hooks/usePageData';
-import { Button } from '@theme/ui';
+import { useThemeSettings } from '@portal/hooks/';
+import { DEFAULT_THEME_NAME } from '@portal/constants/';
+import { Button } from '@theme/Button/Button';
 
 interface NextPageType {
   nextPage?: ResolvedNavLinkItem | null;
@@ -10,13 +12,17 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = usePageData() || {};
-  if (!nextPage) {
+  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (!nextPage || themeSettings?.navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
+  const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
+
   return (
     <Button variant="outlined" size="large" to={nextPage.link}>
-      Next to {nextPage.label}
+      {label}
     </Button>
   );
 }

package/src/PageNavigation/PreviousPageLink.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 import { usePageData } from '@portal/hooks/usePageData';
-import { Button } from '@theme/ui';
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { Button } from '@theme/Button/Button';
 
 interface PreviousPageType {
   prevPage?: ResolvedNavLinkItem | null;
@@ -10,13 +12,17 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = usePageData() || {};
-  if (!prevPage) {
+  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (!prevPage || themeSettings?.navigation?.hide) {
     return <div>&nbsp;</div>;
   }
 
+  const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
+
   return (
     <Button variant="outlined" size="large" to={prevPage.link}>
-      Back to {prevPage.label}
+      {label}
     </Button>
   );
 }

package/src/Search/SidebarSearch.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Search } from '@theme/Search/Search';
+import { Popover } from '@theme/Search/Popover';
+
+export const SidebarSearch = styled(Search)`
+  --search-input-text-color: var(--sidebar-item-active-color);
+
+  ${Popover} {
+    right: unset;
+    top: 100%;
+  }
+`;

package/src/Sidebar/MenuGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Arrow } from '@theme/ui/Arrow';
+import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
 import { ItemState } from '@theme/Sidebar/types/ItemState';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
@@ -50,6 +50,6 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
 `;
 
-const MenuGroupArrow = styled(Arrow)`
+const MenuGroupArrow = styled(ArrowIcon)`
   margin-right: calc(var(--sidebar-spacing-unit) / 2);
 `;

package/src/Sidebar/SidebarLayout.tsx

@@ -5,6 +5,9 @@ import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
+import { useThemeSettings } from '@portal/hooks/';
+import { DEFAULT_THEME_NAME } from '@portal/constants/';
+import { SidebarSearch } from '@theme/Search/SidebarSearch';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -14,11 +17,13 @@ interface SidebarLayoutProps {
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
+  const { hide, placement } = useThemeSettings(DEFAULT_THEME_NAME).search || {};
 
   return (
     <Wrapper data-component-name="Sidebar/SidebarLayout">
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
+      {!hide && placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
         {versions}
         <MenuContainer>{menu}</MenuContainer>

package/src/TableOfContent/TableOfContent.tsx

@@ -2,8 +2,10 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
+import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
 import { MdHeading } from '@theme/types/portal';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -17,7 +19,11 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
   const activeHeadingId = useActiveHeading(contentWrapper);
+  const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
 
+  if (themeSettings?.toc?.hide) {
+    return null;
+  }
   if (headings && headings.length === 1 && (!headings[0] || headings[0].depth === 1)) {
     return null;
   }
@@ -30,7 +36,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       {headings && (
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
-            <TocHeader>On this page</TocHeader>
+            <TocHeader>{themeSettings?.toc?.header?.label || 'On this page'}</TocHeader>
             {headings.map((heading: MdHeading | null, idx: number) => {
               // TODO: not sure about !heading
               if (!heading) {

package/src/Typography/CompactTypography.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+import { Typography } from '@theme/Typography/Typography';
+
+export const CompactTypography = styled(Typography).attrs(() => ({
+  mt: '0em',
+  mb: '0em',
+  'data-component-name': 'Typography/CompactTypography',
+}))``;