@redocly/theme 0.1.26 → 0.1.29

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

@@ -1,5 +1,12 @@
 import React, { createElement, PropsWithChildren } from 'react';
 
+import { concatClassNames } from '@theme/utils';
+
+/**
+ * Class name for all MD tags
+ */
+const mdClassName = 'md';
+
 const SvgIcon = (
   <svg
     aria-hidden="true"
@@ -22,14 +29,18 @@ export function Heading({
   children,
 }: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
   const linkEl = (
-    <a href={`#${id}`} className="anchor before">
+    <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
       {SvgIcon}
     </a>
   );
 
   return createElement(
     `h${level}`,
-    { id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' },
+    {
+      id,
+      className: concatClassNames('heading-anchor', mdClassName),
+      'data-component-name': 'Markdown/Heading',
+    },
     <>
       {linkEl}
       {children}

package/src/Markdown/MarkdownWrapper.tsx

@@ -3,7 +3,7 @@ import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const baseTable = css`
-  table {
+  table.md {
     display: block;
     width: 100%;
     overflow: auto;
@@ -13,58 +13,58 @@ export const baseTable = css`
     margin-top: 20px;
     margin-bottom: 20px;
     font-size: 14px;
-  }
 
-  table th,
-  table td {
-    padding: 12px;
-    border-bottom: 1px solid var(--global-border-color);
-  }
+    th,
+    td {
+      padding: 12px;
+      border-bottom: 1px solid var(--global-border-color);
+    }
 
-  table th {
-    text-align: left;
-    font-weight: bold;
-    background-color: var(--color-secondary-300);
-  }
+    th {
+      text-align: left;
+      font-weight: bold;
+      background-color: var(--color-secondary-300);
+    }
 
-  table tr th:first-child,
-  table tr td:first-child {
-    border-left: 1px solid var(--global-border-color);
-  }
+    tr th:first-child,
+    tr td:first-child {
+      border-left: 1px solid var(--global-border-color);
+    }
 
-  table tr td:last-child,
-  table tr th:last-child {
-    border-right: 1px solid var(--global-border-color);
-  }
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--global-border-color);
+    }
 
-  table thead td,
-  table thead th {
-    border-top: 1px solid var(--global-border-color);
-  }
+    thead td,
+    thead th {
+      border-top: 1px solid var(--global-border-color);
+    }
 
-  /* top-left border */
+    /* top-left border */
 
-  table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--panels-border-radius);
-  }
+    thead tr:first-child th:first-child {
+      border-top-left-radius: var(--panels-border-radius);
+    }
 
-  /* top-right border */
+    /* top-right border */
 
-  table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--panels-border-radius);
-    border-top: 1px solid var(--global-border-color);
-  }
+    thead tr:first-child th:last-child {
+      border-top-right-radius: var(--panels-border-radius);
+      border-top: 1px solid var(--global-border-color);
+    }
 
-  /* bottom-left border */
+    /* bottom-left border */
 
-  table tbody tr:last-child td:first-child {
-    border-bottom-left-radius: var(--panels-border-radius);
-  }
+    tbody tr:last-child td:first-child {
+      border-bottom-left-radius: var(--panels-border-radius);
+    }
 
-  /* bottom-right border */
+    /* bottom-right border */
 
-  table tbody tr:last-child td:last-child {
-    border-bottom-right-radius: var(--panels-border-radius);
+    tbody tr:last-child td:last-child {
+      border-bottom-right-radius: var(--panels-border-radius);
+    }
   }
 `;
 
@@ -123,12 +123,12 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     max-width: 100%;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1.md,
+  h2.md,
+  h3.md,
+  h4.md,
+  h5.md,
+  h6.md {
     font-weight: var(--h-font-weight);
     font-family: var(--h-font-family);
     position: relative;
@@ -206,9 +206,9 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     }
   }
 
-  h1 {
+  h1.md {
     ${typography('h1', 'h')};
-    margin: var(--h1-margin-top) var(--h1-margin-bottom);
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchor()};
 
     &:first-child {
@@ -216,33 +216,33 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     }
   }
 
-  h2 {
+  h2.md {
     ${typography('h2', 'h')};
-    margin: var(--h2-margin-top) var(--h2-margin-bottom);
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h3 {
+  h3.md {
     ${typography('h3', 'h')};
-    margin: var(--h3-margin-top) var(--h3-margin-bottom);
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h4 {
+  h4.md {
     ${typography('h4', 'h')};
-    margin: var(--h4-margin-top) var(--h4-margin-bottom);
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h5 {
+  h5.md {
     ${typography('h5', 'h')};
-    margin: var(--h5-margin-top) var(--h5-margin-bottom);
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h6 {
+  h6.md {
     ${typography('h6', 'h')};
-    margin: var(--h6-margin-top) var(--h6-margin-bottom);
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${headingAnchor()};
   }
 

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;
+  }
+`;