@redocly/theme 0.10.0 → 0.11.0

package/src/components/Menu/MenuLinkItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLink } from '@theme/components/Menu/MenuLink';
+import type { MenuItemProps } from '@theme/components/Sidebar/types';
+
+export function MenuLinkItem({
+  item,
+  children,
+}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Sidebar/MenuLinkItem">
+      {item.link ? (
+        <MenuLink to={item.link} {...item}>
+          {children}
+        </MenuLink>
+      ) : (
+        children
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.span``;

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+export * from '@theme/components/Menu/Menu';
+export * from '@theme/components/Menu/MenuItem';
+export * from '@theme/components/Menu/MenuGroup';
+export * from '@theme/components/Menu/MenuContainer';
+export * from '@theme/components/Menu/MenuItemLabel';
+export * from '@theme/components/Menu/MenuLink';
+export * from '@theme/components/Menu/MenuLinkItem';

package/src/components/Navbar/MobileNavbarItem.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '@portal/Link';
+import type {
+  ResolvedNavItem,
+  ResolvedNavLinkItem,
+  ResolvedNavGroupItem,
+} from '@theme/types/portal';
+import { withPathPrefix } from '@theme/utils';
+
+import { MobileNavbarDropdown, MobileDropdownWrapper } from './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: var(--navbar-item-padding-horizontal);
+  text-align: left;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  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/components/Navbar/MobileNavbarMenu.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  NavbarMenuItem,
+  NavbarMenuItemWithDropdownWrapper,
+} from '@theme/components/Navbar/NavbarItem';
+import { MobileNavbarItem } from '@theme/components/Navbar/MobileNavbarItem';
+import { DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
+import { isPrimitive, isEmptyArray } from '@theme/utils';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+
+export function MobileNavbarMenu({
+  menuItems,
+  closeMenu,
+  search,
+}: {
+  menuItems: ResolvedConfigLinks;
+  search: React.ReactNode | undefined;
+  closeMenu: () => void;
+}): JSX.Element | null {
+  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
+    return null;
+  }
+
+  return (
+    <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
+      <NavbarItemsContainer>
+        <MobileSearchWrapper>{search || null}</MobileSearchWrapper>
+        {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+          return (
+            <MobileNavbarItem
+              key={`${navItem.label}_${index}`}
+              data-cy={navItem.label}
+              navItem={navItem}
+            />
+          );
+        })}
+      </NavbarItemsContainer>
+      <NavbarItemsClosableArea onClick={closeMenu} />
+    </NavbarItemsWrapper>
+  );
+}
+
+const NavbarItemsWrapper = 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 NavbarItemsClosableArea = styled.div`
+  display: flex;
+  flex: 1;
+  min-width: 50px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+`;
+
+const NavbarItemsContainer = styled.ul`
+  width: 70%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--navbar-background-color);
+
+  ${NavbarMenuItem} {
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+    }
+    border-radius: 0;
+    padding: 1em 0;
+    width: 100%;
+  }
+
+  ${NavbarMenuItemWithDropdownWrapper} {
+    display: block;
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);
+      border-radius: 0;
+    }
+    ${NavbarMenuItem} {
+      border-bottom: none;
+    }
+  }
+
+  ${DropdownWrapper} {
+    background-color: var(--navbar-background-color);
+    width: 100%;
+    padding: 0;
+    position: relative;
+  }
+`;
+
+const MobileSearchWrapper = styled.div`
+  padding: var(--navbar-item-padding-horizontal);
+  > div {
+    display: block;
+    width: 100%;
+  }
+  input {
+    width: 100%;
+  }
+`;

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { NavbarMenu } from '@theme/components/Navbar';
+import { useMobileMenu } from '@theme/hooks/useMobileMenu';
+import { isEmptyArray, isPrimitive } from '@theme/utils';
+import { MobileNavbarMenuButton } from '@theme/components/Navbar/MobileNavbarMenuButton';
+import type { NavbarLogoProps } from '@theme/components/NavbarLogo';
+import { NavbarLogo } from '@theme/components/NavbarLogo';
+import { MobileNavbarMenu } from '@theme/components/Navbar/MobileNavbarMenu';
+import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { Search } from '@theme/components/Search/Search';
+import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
+import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
+
+const EmptyNavbarHack = createGlobalStyle`
+  #redocly_root {
+    --navbar-height: 0px !important;
+  }
+`;
+
+export function Navbar(): JSX.Element | null {
+  const [isOpen, setIsOpen] = useMobileMenu(false);
+  const themeConfig = useThemeConfig();
+
+  const menu = themeConfig.navbar?.items;
+  const logo = themeConfig.logo;
+
+  const { search: searchSettings, navbar, userProfile: userProfileSettings } = themeConfig;
+  const hideSearch =
+    searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
+  const hideUserProfile = userProfileSettings?.hide;
+
+  if (navbar?.hide) {
+    return null;
+  }
+
+  const openMobileMenu = () => setIsOpen(true);
+  const closeMobileMenu = () => setIsOpen(false);
+
+  const menuItemsExist = !isPrimitive(menu) && !isEmptyArray(menu);
+
+  if (!menu && !logo) {
+    return <EmptyNavbarHack />;
+  }
+
+  return (
+    <NavbarPresentational
+      {...{
+        menuItemsExist,
+        closeMobileMenu,
+        openMobileMenu,
+        isOpen,
+        hideSearch: Boolean(hideSearch),
+        menu: menu as ResolvedConfigLinks,
+        logo: logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>,
+        hideUserProfile,
+      }}
+    />
+  );
+}
+
+interface NavbarPresentationalProps extends NavbarLogoProps {
+  menuItemsExist: boolean;
+  closeMobileMenu: () => void;
+  openMobileMenu: () => void;
+  isOpen: boolean;
+  hideSearch: boolean;
+  menu: ResolvedConfigLinks;
+  hideUserProfile: boolean | string | undefined;
+}
+
+export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
+  const {
+    menuItemsExist,
+    closeMobileMenu,
+    openMobileMenu,
+    isOpen,
+    hideSearch,
+    logo,
+    menu,
+    hideUserProfile,
+  } = props;
+  return (
+    <NavbarContainer data-component-name="Navbar/Navbar">
+      {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
+
+      {isOpen && (
+        <MobileNavbarMenu
+          closeMenu={closeMobileMenu}
+          menuItems={menu as ResolvedConfigLinks}
+          search={hideSearch ? null : <Search />}
+        />
+      )}
+      <NavbarRow>
+        <NavbarLogo logo={logo} />
+        <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
+        {hideSearch ? null : <Search />}
+        {hideUserProfile ? null : <AuthUserProfile />}
+        <ColorModeSwitcher />
+      </NavbarRow>
+    </NavbarContainer>
+  );
+}
+
+export const NavbarContainer = styled.nav`
+  --text-color: var(--navbar-text-color);
+
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  font-size: 0.875rem;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  background: var(--navbar-background-color);
+  font-family: var(--navbar-item-font-family);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    font-size: 1rem;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    background: transparent;
+    display: none;
+    > :not(a, img) {
+      display: none !important;
+    }
+    img {
+      padding: 0;
+      margin: 0;
+    }
+  }
+`;
+
+export const NavbarRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 100%;
+
+  max-width: var(--navbar-container-max-width);
+`;

package/src/components/Navbar/NavbarItem.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '@portal/Link';
+import { NavbarDropdown, DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
+import type {
+  ResolvedNavItem,
+  ResolvedNavLinkItem,
+  ResolvedNavGroupItem,
+} from '@theme/types/portal';
+import { withPathPrefix } from '@theme/utils';
+
+export interface NavbarItemProps {
+  navItem: ResolvedNavItem;
+  className?: string;
+}
+
+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 (
+      <NavbarMenuItem
+        active={isActive}
+        data-component-name="Navbar/NavbarItem"
+        className={className}
+      >
+        <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
+          <NavbarLabel>{item.label}</NavbarLabel>
+        </NavbarLink>
+      </NavbarMenuItem>
+    );
+  }
+
+  if ((navItem as ResolvedNavGroupItem).items) {
+    const item = navItem as ResolvedNavGroupItem;
+    return (
+      <NavbarMenuItemWithDropdownWrapper>
+        <NavbarMenuItem
+          active={false}
+          data-component-name="Navbar/NavbarItem"
+          className={className}
+        >
+          <NavbarLabel>{item.label}</NavbarLabel>
+        </NavbarMenuItem>
+        <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
+      </NavbarMenuItemWithDropdownWrapper>
+    );
+  }
+
+  return null;
+}
+
+export const NavbarMenuItemWithDropdownWrapper = 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;
+    }
+  }
+`;
+
+export const NavbarLink = 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'};
+`;
+
+export const NavbarMenuItem = styled.li<{ active?: boolean }>`
+  display: inline-block;
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  margin-left: var(--navbar-item-margin-horizontal);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
+  color: ${({ active }) => active && 'var(--navbar-item-active-text-color)'};
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+    ${NavbarLink} {
+      color: var(--navbar-item-hover-text-color);
+      text-decoration: var(--navbar-item-hover-text-decoration);
+    }
+  }
+`;
+
+const NavbarLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/src/components/Navbar/NavbarMenu.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { NavbarItem } from '@theme/components/Navbar/NavbarItem';
+import { isPrimitive } from '@theme/utils';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+
+export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
+  if (isPrimitive(menuItems)) {
+    return null;
+  }
+
+  return (
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu">
+      {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
+        return (
+          <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />
+        );
+      })}
+    </NavItemsContainer>
+  );
+}
+
+const NavItemsContainer = styled.ul`
+  list-style: none;
+  margin: 0 var(--navbar-item-margin-horizontal);
+  padding: 0;
+  display: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: flex;
+  }
+`;

package/src/components/Navbar/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/components/Navbar/Navbar';
+export * from '@theme/components/Navbar/NavbarItem';
+export * from '@theme/components/Navbar/NavbarMenu';

package/src/components/NavbarLogo/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/NavbarLogo/NavbarLogo';