@redocly/theme 0.1.16 → 0.1.21

package/src/Footer/CustomFooterNavItem.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
+
+interface CustomFooterNavItemProps {
+  navItem: ResolvedNavItem;
+}
+
+export function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element {
+  const item = navItem as ResolvedNavLinkItem;
+
+  return (
+    <FooterItem data-component-name="Navbar/NavbarItem">
+      <FooterLink to={item.link}>
+        <FooterLabel>{item.label}</FooterLabel>
+      </FooterLink>
+    </FooterItem>
+  );
+}
+
+const FooterItem = styled.li`
+  display: inline-block;
+  text-align: center;
+  line-height: var(--line-height-base);
+  font-size: var(--navbar-item-font-size);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+
+const FooterLink = styled(Link)`
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+
+const FooterLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/Footer/Footer.tsx

@@ -3,9 +3,13 @@ import styled from 'styled-components';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroupRecord } from '@theme/types/portal';
 
-export function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null {
+interface FooterProps {
+  data: NavGroupRecord;
+}
+
+export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
   if (!(columns?.length || copyrightText)) {
     return null;
   }

package/src/Footer/FooterColumn.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
-import type { FooterColumn as Column } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnProps {
-  column: Column;
+  column: ResolvedNavItem;
 }
 
 export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
-      <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
-      {column.items.map((columnItem, columnItemIndex) => {
+      <FooterColumnTitle>{column.label}</FooterColumnTitle>
+      {column?.items?.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
         }

package/src/Footer/FooterColumns.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FooterColumn } from '@theme/Footer/FooterColumn';
-import type { FooterConfig } from '@theme/types/portal';
-
-export function FooterColumns({
-  columns = [],
-}: {
-  columns?: FooterConfig['columns'];
-}): JSX.Element | null {
-  if (!columns?.length) {
+import type { NavGroup } from '@theme/types/portal';
+
+interface FooterColumnsProps {
+  columns: NavGroup;
+}
+
+export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+  if (typeof columns === 'string' || typeof columns === 'undefined' || !columns?.length) {
     return null;
   }
 
@@ -17,7 +17,7 @@ export function FooterColumns({
     <FooterColumnsContainer data-component-name="Footer/FooterColumns">
       <FooterRow>
         {columns.map((column, index) => (
-          <FooterColumn key={index} column={column} />
+          <FooterColumn key={`${column.label}_${index}`} column={column} />
         ))}
       </FooterRow>
     </FooterColumnsContainer>

package/src/Footer/FooterCopyright.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { FooterConfig } from '@theme/types/portal';
+import type { NavGroup } from '@theme/types/portal';
 
-export function FooterCopyright({
-  copyrightText = '',
-}: {
-  copyrightText?: FooterConfig['copyrightText'];
-}): JSX.Element | null {
+interface FooterCopyrightProps {
+  copyrightText: NavGroup;
+}
+
+export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
   return copyrightText ? (
     <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
   ) : null;

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,18 +1,28 @@
 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';
+
 interface NavbarProps {
-  menu: React.ReactNode;
+  menu: ResolvedConfigLinks;
   logo: React.ReactNode;
   search: React.ReactNode;
 }
 
 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}
-      {menu}
-      {search}
+      <NavbarMenu menuItems={menu} />
+      {hideSearch ? null : search}
     </NavbarContainer>
   );
 }

package/src/Navbar/NavbarDropdown.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+import { Link } from '@portal/Link';
+
+interface NavbarDropdownProps {
+  items: ResolvedNavLinkItem[];
+}
+
+export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+  return (
+    <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
+      {items.map((item, index) => (
+        <div key={`${item.label}_${index}`}>
+          <Link to={item.link}>{item.label}</Link>
+        </div>
+      ))}
+    </DropdownWrapper>
+  );
+}
+
+export const DropdownWrapper = styled.div`
+  display: none;
+  position: absolute;
+  background: var(--navbar-item-active-background-color);
+  border-radius: var(--navbar-item-border-radius);
+  padding: 10px 15px;
+  width: max-content;
+  line-height: 1rem;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    text-align: left;
+    padding: 10px 0px;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+    :hover {
+      text-decoration: underline;
+    }
+  }
+`;

package/src/Navbar/NavbarItem.tsx

@@ -2,67 +2,60 @@ import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
+import type {
+  ResolvedNavItem,
+  ResolvedNavLinkItem,
+  ResolvedNavGroupItem,
+} from '@theme/types/portal';
 import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
+import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 
-export enum MenuStyle {
-  Drilldown = 'drilldown',
+interface NavbarItemProps {
+  navItem: ResolvedNavItem;
 }
 
-export type ResolvedNavLinkItem = {
-  type: 'link';
-  link: string;
-  label: string;
-  items?: ResolvedNavItem[];
-  external?: boolean;
-  version?: string;
-  default?: string;
-  httpVerb?: string; // TODO: make a separate type of item
-  separatorLine?: boolean;
-  active?: boolean;
-};
+export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
+  const { pathname } = useLocation();
 
-export type ResolvedNavGroupItem = {
-  type: 'group';
-  link?: string;
-  label: string;
-  items: ResolvedNavItem[];
-  version?: string;
-  default?: string;
-  menuStyle?: MenuStyle;
-  separatorLine?: boolean;
-  active?: boolean;
-};
+  if ((navItem as ResolvedNavLinkItem).link) {
+    const item = navItem as ResolvedNavLinkItem;
+    const isActive = pathname === withPathPrefix(item.link);
+    return (
+      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
+        <NavLink to={item.link} active={isActive}>
+          <NavLabel>{item.label}</NavLabel>
+        </NavLink>
+      </NavMenuItem>
+    );
+  }
 
-export type ResolvedNavItem =
-  | ResolvedNavLinkItem
-  | ResolvedNavGroupItem
-  | {
-      type: 'separator';
-      label?: string;
-      separatorLine?: boolean;
-    }
-  | {
-      type: 'error';
-      label: string;
-    };
+  if ((navItem as ResolvedNavGroupItem).items) {
+    const item = navItem as ResolvedNavGroupItem;
+    return (
+      <NavMenuItemWithDropdownWrapper>
+        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem">
+          <NavLabel>{item.label}</NavLabel>
+        </NavMenuItem>
+        <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
+      </NavMenuItemWithDropdownWrapper>
+    );
+  }
 
-interface NavbarItemProps {
-  navItem: ResolvedNavLinkItem;
+  return null;
 }
 
-export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
-  const { pathname } = useLocation();
-  const isActive = pathname === withPathPrefix(navItem.link);
-
-  return (
-    <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
-      <NavLink to={navItem.link} active={isActive}>
-        <NavLabel>{navItem.label}</NavLabel>
-      </NavLink>
-    </NavMenuItem>
-  );
-}
+const NavMenuItemWithDropdownWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+  border-radius: var(--navbar-item-border-radius);
+  &:hover {
+    background: var(--navbar-item-active-background-color);
+    ${DropdownWrapper} {
+      display: block;
+    }
+  }
+`;
 
 const NavMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;

package/src/Navbar/NavbarMenu.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
-export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
+export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
   if (!menuItems?.length) {
     return null;
   }
 
   return (
     <NavItemsContainer data-component-name="Navbar/NavbarMenu">
-      {menuItems.map((navItem, index) => {
-        return <NavbarItem key={index} data-cy={navItem.label} navItem={navItem} />;
+      {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />
+        );
       })}
     </NavItemsContainer>
   );