@redocly/theme 0.1.27 → 0.1.28

package/hooks/useActiveHeading.js

@@ -1,9 +1,25 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = void 0;
 var react_1 = require("react");
 function useActiveHeading(contentElement) {
-    var _a = (0, react_1.useState)(undefined), heading = _a[0], setHeading = _a[1];
+    var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
     var headings = (0, react_1.useMemo)(function () { return contentElement && contentElement.querySelectorAll('.heading-anchor'); }, [contentElement]);
     var handler = (0, react_1.useCallback)(
     // throttle(

package/hooks/useActiveSectionId.js

@@ -1,4 +1,20 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,7 +25,7 @@ var lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 var useNavbarHeight_1 = require("../hooks/useNavbarHeight");
 function useActiveSectionId(location, hasOverviewPage) {
     if (hasOverviewPage === void 0) { hasOverviewPage = false; }
-    var _a = (0, react_1.useState)(''), itemId = _a[0], setItemId = _a[1];
+    var _a = __read((0, react_1.useState)(''), 2), itemId = _a[0], setItemId = _a[1];
     var navbarHeight = (0, useNavbarHeight_1.useNavbarHeight)(location);
     var scrollListener = (0, react_1.useMemo)(function () {
         return (0, lodash_throttle_1.default)(function () {

package/hooks/useControl.js

@@ -1,10 +1,26 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControl = void 0;
 var react_1 = require("react");
 var useControl = function (initialVal) {
     if (initialVal === void 0) { initialVal = false; }
-    var _a = (0, react_1.useState)(initialVal), isOpened = _a[0], setIsOpened = _a[1];
+    var _a = __read((0, react_1.useState)(initialVal), 2), isOpened = _a[0], setIsOpened = _a[1];
     var handleOpen = (0, react_1.useCallback)(function () { return setIsOpened(true); }, []);
     var handleClose = (0, react_1.useCallback)(function () { return setIsOpened(false); }, []);
     return {

package/hooks/useMobileMenu.js

@@ -1,4 +1,20 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenu = void 0;
 var react_1 = require("react");
@@ -6,7 +22,7 @@ var react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState) {
     if (initialState === void 0) { initialState = false; }
     var location = (0, react_router_dom_1.useHistory)().location;
-    var _a = (0, react_1.useState)(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _a = __read((0, react_1.useState)(initialState), 2), isOpen = _a[0], setIsOpen = _a[1];
     (0, react_1.useEffect)(function () { return setIsOpen(false); }, [location.pathname]);
     return [isOpen, setIsOpen];
 }

package/hooks/useNavbarHeight.js

@@ -1,10 +1,26 @@
 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNavbarHeight = void 0;
 var react_1 = require("react");
 var getNavbarElement_1 = require("../utils/getNavbarElement");
 function useNavbarHeight(location) {
-    var _a = (0, react_1.useState)(0), height = _a[0], setHeight = _a[1];
+    var _a = __read((0, react_1.useState)(0), 2), height = _a[0], setHeight = _a[1];
     (0, react_1.useEffect)(function () {
         var navbar = (0, getNavbarElement_1.getNavbarElement)();
         setHeight((navbar && navbar.clientHeight) || 0);

package/package.json

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

package/src/Button/Button.tsx

@@ -48,6 +48,7 @@ export const baseButtonStyles = css`
   font-weight: var(--button-font-weight);
   font-size: 14px;
   padding: 2px 20px;
+  margin: var(--button-margin);
   cursor: pointer;
   transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
@@ -92,12 +93,15 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
         `
       : css`
           color: var(--button-color);
+          border: 2px solid var(--button-background-color);
           background-color: var(--button-background-color);
           &:hover {
+            border: 2px solid var(--button-hover-background-color);
             background-color: var(--button-hover-background-color);
           }
 
           &:active {
+            border: 2px solid var(--button-active-background-color);
             background-color: var(--button-active-background-color);
           }
         `};
@@ -121,7 +125,7 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
       &,
       &:hover {
         cursor: default;
-        color: #999999;
+        color: #999;
         pointer-events: none;
       }
     `}

package/src/CodeBlock/CodeBlock.ts

@@ -84,5 +84,17 @@ export const CodeBlock = styled.div.attrs(() => ({
     cursor: help;
   }
 
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
   ${generateCodeBlockTokens()}
 `;

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