@redocly/theme 0.1.27 → 0.1.30

package/src/Footer/Footer.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
-import type { NavGroupRecord } from '@theme/types/portal';
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { isEmptyArray } from '@theme/utils';
 
 interface FooterProps {
   data: NavGroupRecord;
@@ -14,13 +15,13 @@ interface FooterProps {
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
   const { footer } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  if (!(columns?.length || copyrightText) || footer?.hide) {
+  if (isEmptyArray(columns) || !copyrightText || footer?.hide) {
     return null;
   }
 
   return (
     <FooterContainer data-component-name="Footer/Footer">
-      <FooterColumns columns={columns} />
+      <FooterColumns columns={columns as ResolvedNavItem[]} />
       <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>
   );

package/src/Footer/FooterColumn.tsx

@@ -51,7 +51,9 @@ const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin: 0 30px;
+  margin: 0 20px;
+  width: 20%;
+  word-break: break-word;
 `;
 
 const FooterLink = styled(Link)`

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 { NavGroup } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnsProps {
-  columns: NavGroup;
+  columns: ResolvedNavItem[];
 }
 
 export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
-  if (typeof columns === 'string' || typeof columns === 'undefined' || !columns?.length) {
+  if (!columns?.length) {
     return null;
   }
 

package/src/JsonViewer/JsonViewer.tsx

@@ -11,9 +11,17 @@ export interface JsonProps {
   data: any;
   className?: string;
   jsonSampleExpandLevel: number;
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
 }
 
-function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): JSX.Element {
+function JsonComponent({
+  data,
+  jsonSampleExpandLevel,
+  className,
+  withLineNumbers,
+  startLineNumber,
+}: JsonProps): JSX.Element {
   const node = useRef<HTMLDivElement | null>(null);
 
   useMount(() => {
@@ -84,10 +92,10 @@ function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): J
           )}
         </SampleControls>
         <StyledCodeBlock
-          className={className}
+          className={withLineNumbers ? `${className} line-numbers` : className}
           ref={node}
           dangerouslySetInnerHTML={{
-            __html: jsonToHTML(data, jsonSampleExpandLevel),
+            __html: jsonToHTML(data, jsonSampleExpandLevel, startLineNumber),
           }}
         />
       </JsonViewerWrap>
@@ -111,15 +119,11 @@ export const JsonViewer = styled(Json).attrs(() => ({
     color: var(--color-content-inverse);
     padding: inherit;
     border: none;
-
-    & > .collapser {
-      display: none;
-      pointer-events: none;
-    }
   }
 
   contain: content;
   overflow-x: auto;
+  position: relative;
   padding: 10px;
   border-radius: var(--global-border-radius);
   background-color: var(--samples-panel-controls-background-color);
@@ -128,13 +132,26 @@ export const JsonViewer = styled(Json).attrs(() => ({
   font-family: var(--code-font-family);
   white-space: var(--code-wrap, pre);
 
-  .callback-function {
-    color: gray;
+  &.line-numbers {
+    padding: 20px 20px 20px 3em;
+
+    *[data-line]:not(.collapsed *[data-line]) {
+      &:before {
+        content: attr(data-line);
+        position: absolute;
+        left: 0;
+        min-width: 2em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+        padding: 0 0.5em;
+        font-size: 13px;
+      }
+    }
   }
 
-  .collapser:after {
-    content: '-';
-    cursor: pointer;
+  .callback-function {
+    color: gray;
   }
 
   .collapsed > .collapser:after {
@@ -147,11 +164,17 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapsible {
-    margin-left: 2ch;
+    padding-left: 2ch;
+    display: inline-block;
   }
 
   .hoverable {
     padding: 1px 2px;
+    display: inline-block;
+  }
+
+  .collapsed {
+    display: inline-flex;
   }
 
   .hovered {
@@ -161,39 +184,31 @@ export const JsonViewer = styled(Json).attrs(() => ({
   .collapser {
     background-color: transparent;
     border: 0;
+    padding: 0;
     color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 15px;
+    width: 0;
     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;
+    &:after {
+      content: '-';
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 15px;
+      height: 100%;
+      padding: 2px 5px 2px 2px;
+      transform: translateX(-100%);
+
+      &:focus {
+        outline: #fff dotted 1px;
+      }
+    }
   }
 
   .selected {
@@ -210,7 +225,7 @@ export const JsonViewer = styled(Json).attrs(() => ({
   }
 
   .collapsed > .ellipsis {
-    display: inherit;
+    display: inline;
   }
 `;
 

package/src/Markdown/Admonition.tsx

@@ -17,7 +17,7 @@ export function Admonition({
   children,
 }: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
-    <Wrapper type={type} data-component-name="Markdown/Admonition/Admonition">
+    <Wrapper type={type} data-component-name="Markdown/Admonition">
       <AlertIcon type={type} />
       {name ? <Heading type={type}>{name}</Heading> : null}
       <Content>{children}</Content>

package/src/Markdown/Heading.tsx

@@ -39,7 +39,7 @@ export function Heading({
     {
       id,
       className: concatClassNames('heading-anchor', mdClassName),
-      'data-component-name': 'Markdown/Heading/Heading',
+      'data-component-name': 'Markdown/Heading',
     },
     <>
       {linkEl}

package/src/Markdown/Mermaid.tsx

@@ -10,7 +10,7 @@ export function Mermaid({ diagramHtml }: MermaidProps): JSX.Element {
     <Wrapper
       className="mermaid-wrapper"
       dangerouslySetInnerHTML={{ __html: diagramHtml }}
-      data-component-name="Markdown/Mermaid/Mermaid"
+      data-component-name="Markdown/Mermaid"
     />
   );
 }

package/src/Markdown/Sup.tsx

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {
+  return <Wrapper data-component-name="Markdown/Sup">{children}</Wrapper>;
+}
+
+const Wrapper = styled.sup``;

package/src/Markdown/index.ts

@@ -1,9 +1,10 @@
-export * from '@theme/Markdown/CodeSample';
-export * from '@theme/Markdown/Tabs';
 export * from '@theme/Markdown/Admonition';
+export * from '@theme/Markdown/CodeSample';
 export * from '@theme/Markdown/ContentWrapper';
 export * from '@theme/Markdown/Heading';
 export * from '@theme/Markdown/MarkdownLayout';
+export * from '@theme/Markdown/MarkdownWrapper';
 export * from '@theme/Markdown/Mermaid';
 export * from '@theme/Markdown/PageWrapper';
-export * from '@theme/Markdown/MarkdownWrapper';
+export * from '@theme/Markdown/Sup';
+export * from '@theme/Markdown/Tabs';

package/src/Navbar/MobileNavbarDropdown.tsx

@@ -0,0 +1,37 @@
+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 MobileNavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+  return (
+    <MobileDropdownWrapper data-component-name="Navbar/MobileNavbarDropdown">
+      {items.map((item, index) => (
+        <div key={`${item.label}_${index}`}>
+          <Link to={item.link}>{item.label}</Link>
+        </div>
+      ))}
+    </MobileDropdownWrapper>
+  );
+}
+
+export const MobileDropdownWrapper = styled.div`
+  padding: 0 15px;
+  width: max-content;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    padding: 10px 0;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+  }
+`;

package/src/Navbar/MobileNavbarItem.tsx

@@ -0,0 +1,116 @@
+import React, { useState } 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 { MobileDropdownWrapper, MobileNavbarDropdown } from '@theme/Navbar/MobileNavbarDropdown';
+
+export interface NavbarItemProps {
+  navItem: ResolvedNavItem;
+  className?: string;
+}
+
+export function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
+  const { pathname } = useLocation();
+  const [expandedDropdown, setExpandedDropdown] = useState(false);
+  const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
+
+  if ((navItem as ResolvedNavLinkItem).link) {
+    const item = navItem as ResolvedNavLinkItem;
+    const isActive = pathname === withPathPrefix(item.link);
+    return (
+      <NavMenuItem
+        active={isActive}
+        data-component-name="Navbar/MobileNavbarItem"
+        className={className}
+      >
+        <NavLink to={item.link} active={isActive}>
+          <NavLabel>{item.label}</NavLabel>
+        </NavLink>
+      </NavMenuItem>
+    );
+  }
+
+  if ((navItem as ResolvedNavGroupItem).items) {
+    const item = navItem as ResolvedNavGroupItem;
+    return (
+      <NavMenuItemWithDropdownWrapper expanded={expandedDropdown}>
+        <NavMenuItem
+          active={false}
+          onClick={toggleDropdown}
+          data-component-name="Navbar/MobileNavbarItem"
+          className={className}
+        >
+          <NavLabel>{item.label}</NavLabel>
+          <ExpandedArrow />
+        </NavMenuItem>
+        <MobileNavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
+      </NavMenuItemWithDropdownWrapper>
+    );
+  }
+
+  return null;
+}
+
+const ExpandedArrow = styled.div`
+  width: 5px;
+  height: 5px;
+  border: 1px solid;
+  border-left: none;
+  border-top: none;
+  transition: all 0.3s ease-out;
+`;
+
+export const NavMenuItem = styled.li<{ active?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc(var(--sidebar-spacing-horizontal) * 2);
+  text-align: left;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  font-weight: var(--navbar-item-font-weight);
+  background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+  }
+`;
+
+export const NavMenuItemWithDropdownWrapper = styled.div<{ expanded: boolean }>`
+  display: inline-block;
+  position: relative;
+  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+
+  ${ExpandedArrow} {
+    transform: rotate(${({ expanded }) => (expanded ? '' : '-')}45deg);
+  }
+
+  ${MobileDropdownWrapper} {
+    height: ${({ expanded }) => (expanded ? '100%' : '0')};
+    opacity: ${({ expanded }) => (expanded ? '1' : '0')};
+  }
+
+  ${NavMenuItem} {
+    border-bottom: none;
+  }
+`;
+
+export const NavLink = styled(Link)`
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+  text-decoration: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+
+const NavLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/Navbar/MobileNavbarMenu.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { NavMenuItem, NavMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
+import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
+import { DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+import { isPrimitive, isEmptyArray } from '@theme/utils';
+
+export function MobileNavbarMenu({
+  menuItems,
+  closeMenu,
+}: {
+  menuItems: ResolvedConfigLinks;
+  closeMenu: () => void;
+}): JSX.Element | null {
+  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
+    return null;
+  }
+
+  return (
+    <NavItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
+      <NavItemsContainer>
+        {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+          return (
+            <MobileNavbarItem
+              key={`${navItem.label}_${index}`}
+              data-cy={navItem.label}
+              navItem={navItem}
+            />
+          );
+        })}
+      </NavItemsContainer>
+      <NavItemsClosableArea onClick={closeMenu} />
+    </NavItemsWrapper>
+  );
+}
+
+const NavItemsWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 201; //more than Search
+  left: 0;
+  top: 0;
+  overflow-x: hidden;
+  transition: 0.5s;
+  display: flex;
+  ${DropdownWrapper} {
+    & > div {
+      text-align: center;
+      padding: 10px 0;
+      cursor: pointer;
+      a {
+        color: var(--navbar-text-color);
+        text-decoration: none;
+      }
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+const NavItemsClosableArea = styled.div`
+  display: flex;
+  flex: 1;
+  min-width: 50px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+`;
+
+const NavItemsContainer = styled.ul` 
+  width: 70%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--navbar-background-color);
+
+  ${NavMenuItem}  { 
+    &:not(:last-child){
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+    }
+    border-radius: 0;
+    padding: 1em 0;
+    width: 100%;  
+  }
+  
+  ${NavMenuItemWithDropdownWrapper} {
+    display: block;
+    &:not(:last-child){
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+      border-radius: 0;
+    }
+    ${NavMenuItem}  {
+      border-bottom: none;
+    }
+  ${DropdownWrapper} {
+    background-color: var(--navbar-background-color); 
+    width: 100%;
+    padding: 0;
+    position: relative;
+  }
+`;

package/src/Navbar/MobileNavbarMenuButton.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import { Burger } from '@theme/ui/Burger';
+
+export const MobileNavbarMenuButton = styled(Burger).attrs(() => ({
+  'data-component-name': 'Navbar/MobileNavbarMenuButton',
+}))`
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;

package/src/Navbar/Navbar.tsx

@@ -5,6 +5,9 @@ import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
+import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -13,17 +16,22 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
-  const settings = useThemeSettings(DEFAULT_THEME_NAME);
-  const searchSettings = settings.search;
+  const [isOpen, setIsOpen] = useMobileMenu(false);
+  const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 
-  if (settings?.navbar?.hide) {
+  if (navbar?.hide) {
     return null;
   }
 
+  const openMobileMenu = () => setIsOpen(true);
+  const closeMobileMenu = () => setIsOpen(false);
+
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
+      <MobileNavbarMenuButton onClick={openMobileMenu} />
+      {isOpen && <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu} />}
       {logo}
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}

package/src/Navbar/NavbarDropdown.tsx

@@ -31,7 +31,7 @@ export const DropdownWrapper = styled.div`
   box-shadow: var(--navbar-dropdown-shadow);
   & > div {
     text-align: left;
-    padding: 10px 0px;
+    padding: 10px 0;
     cursor: pointer;
     a {
       color: var(--navbar-text-color);

package/src/Navbar/NavbarItem.tsx

@@ -11,18 +11,19 @@ import { Link } from '@portal/Link';
 import { withPathPrefix } from '@portal/utils';
 import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 
-interface NavbarItemProps {
+export interface NavbarItemProps {
   navItem: ResolvedNavItem;
+  className?: string;
 }
 
-export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
+export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
 
   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">
+      <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem" className={className}>
         <NavLink to={item.link} active={isActive}>
           <NavLabel>{item.label}</NavLabel>
         </NavLink>
@@ -34,7 +35,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
     const item = navItem as ResolvedNavGroupItem;
     return (
       <NavMenuItemWithDropdownWrapper>
-        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem">
+        <NavMenuItem active={false} data-component-name="Navbar/NavbarItem" className={className}>
           <NavLabel>{item.label}</NavLabel>
         </NavMenuItem>
         <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
@@ -45,7 +46,7 @@ export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null {
   return null;
 }
 
-const NavMenuItemWithDropdownWrapper = styled.div`
+export const NavMenuItemWithDropdownWrapper = styled.div`
   display: inline-block;
   position: relative;
   border-radius: var(--navbar-item-border-radius);
@@ -57,9 +58,9 @@ const NavMenuItemWithDropdownWrapper = styled.div`
   }
 `;
 
-const NavMenuItem = styled.li<{ active?: boolean }>`
+export const NavMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
-  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: 8px calc(var(--sidebar-spacing-horizontal) * 2);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
@@ -70,7 +71,7 @@ const NavMenuItem = styled.li<{ active?: boolean }>`
   background: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
 `;
 
-const NavLink = styled(Link)`
+export const NavLink = styled(Link)`
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>