@redocly/theme 0.10.0 → 0.11.0

package/src/Navbar/MobileNavbarItem.tsx

@@ -1,114 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
-
-import { Link } from '@portal/Link';
-import { withPathPrefix } from '@portal/utils';
-import { MobileDropdownWrapper, MobileNavbarDropdown } from '@theme/Navbar/MobileNavbarDropdown';
-import type {
-  ResolvedNavItem,
-  ResolvedNavLinkItem,
-  ResolvedNavGroupItem,
-} from '@theme/types/portal';
-
-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/Navbar/MobileNavbarMenu.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { NavbarMenuItem, NavbarMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
-import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
-import { DropdownWrapper } from '@theme/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/Navbar/Navbar.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { NavbarMenu } from '@theme/Navbar';
-import { useMobileMenu } from '@theme/hooks/useMobileMenu';
-import { isEmptyArray, isPrimitive } from '@theme/utils';
-import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
-import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
-import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import type { ResolvedConfigLinks } from '@theme/types/portal';
-
-interface NavbarProps {
-  menu: ResolvedConfigLinks;
-  logo: React.ReactNode;
-  search: React.ReactNode;
-  profile?: React.ReactNode;
-}
-
-export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
-  const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar, userProfile: userProfileSettings } = useThemeConfig();
-  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);
-
-  return (
-    <NavbarContainer data-component-name="Navbar/Navbar">
-      {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
-
-      {isOpen && (
-        <MobileNavbarMenu
-          closeMenu={closeMobileMenu}
-          menuItems={menu}
-          search={hideSearch ? null : search}
-        />
-      )}
-      <NavbarRow>
-        {logo}
-        <NavbarMenu menuItems={menu} />
-        {hideSearch ? null : search}
-        {hideUserProfile ? null : profile}
-        <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/Navbar/NavbarItem.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
-
-import { Link } from '@portal/Link';
-import { withPathPrefix } from '@portal/utils';
-import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
-import type {
-  ResolvedNavItem,
-  ResolvedNavLinkItem,
-  ResolvedNavGroupItem,
-} from '@theme/types/portal';
-
-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/Navbar/NavbarMenu.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { NavbarItem } from '@theme/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/Navbar/index.ts

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

package/src/NavbarLogo/index.ts

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

package/src/OperationBadge/index.ts

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

package/src/PageNavigation/NextButton.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { useSidebarSiblingsData } from '@portal/hooks';
-import { Button } from '@theme/Button/Button';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-
-interface NextPageType {
-  nextPage?: ResolvedNavItemWithLink | null;
-}
-
-export function NextButton(): JSX.Element {
-  const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeConfig();
-
-  if (!nextPage || navigation?.nextButton?.hide) {
-    return <div>&nbsp;</div>;
-  }
-
-  const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
-    '{label}',
-    nextPage.label || nextPage.routeSlug || '',
-  );
-
-  return (
-    <StyledButton
-      variant="outlined"
-      size="large"
-      to={nextPage.link}
-      data-component-name="PageNavigation/NextPageLink"
-    >
-      {text}
-    </StyledButton>
-  );
-}
-
-const StyledButton = styled(Button)`
-  font-family: var(--font-family-base);
-`;

package/src/PageNavigation/PageNavigation.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { PreviousButton } from '@theme/PageNavigation/PreviousButton';
-import { NextButton } from '@theme/PageNavigation/NextButton';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-
-export function PageNavigation(): JSX.Element | null {
-  const { navigation } = useThemeConfig();
-
-  if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
-    return null;
-  }
-
-  return (
-    <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
-      <PreviousButton />
-      <NextButton />
-    </PageNavigationWrapper>
-  );
-}
-
-const PageNavigationWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin: 25px 0;
-
-  @media print {
-    display: none;
-  }
-`;

package/src/PageNavigation/PreviousButton.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { useSidebarSiblingsData } from '@portal/hooks';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { Button } from '@theme/Button/Button';
-import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-
-interface PreviousPageType {
-  prevPage?: ResolvedNavItemWithLink | null;
-}
-
-export function PreviousButton(): JSX.Element {
-  const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeConfig();
-
-  if (!prevPage || navigation?.previousButton?.hide) {
-    return <div>&nbsp;</div>;
-  }
-
-  const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
-    '{label}',
-    prevPage.label || prevPage.routeSlug || '',
-  );
-
-  return (
-    <StyledButton
-      variant="outlined"
-      size="large"
-      to={prevPage.link}
-      data-component-name="PageNavigation/PreviousPageLink"
-    >
-      {text}
-    </StyledButton>
-  );
-}
-
-const StyledButton = styled(Button)`
-  font-family: var(--font-family-base);
-`;

package/src/PageNavigation/index.ts

@@ -1,3 +0,0 @@
-export * from '@theme/PageNavigation/NextButton';
-export * from '@theme/PageNavigation/PageNavigation';
-export * from '@theme/PageNavigation/PreviousButton';

package/src/Pages/Forbidden.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@theme/Button';
-
-export function Forbidden(): JSX.Element {
-  return (
-    <Wrapper data-component-name="Pages/Forbidden">
-      <Header>403</Header>
-      <Description>Access forbidden</Description>
-      <HomeButton color="primary" size="large" to="/">
-        Open Homepage
-      </HomeButton>
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 25px auto;
-  font-family: var(--page-403-font-family);
-  text-align: center;
-`;
-
-const Header = styled.div`
-  color: var(--page-403-header-text-color);
-  margin: var(--page-403-header-margin);
-  font-size: var(--page-403-header-font-size);
-  line-height: var(--page-403-header-line-height);
-  font-weight: var(--page-403-header-font-weight);
-`;
-
-const Description = styled.div`
-  color: var(--page-403-description-text-color);
-  margin: var(--page-403-description-margin);
-  font-size: var(--page-403-description-font-size);
-  line-height: var(--page-403-description-line-height);
-  font-weight: var(--page-403-description-font-weight);
-`;
-
-const HomeButton = styled(Button)`
-  margin-top: var(--page-403-button-margin);
-`;

package/src/Pages/NotFound.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@theme/Button';
-
-export function NotFound(): JSX.Element {
-  return (
-    <Wrapper data-component-name="Pages/NotFound">
-      <Header>404</Header>
-      <Description>It looks like you&apos;re lost</Description>
-      <HomeButton color="primary" size="large" to="/">
-        Open Homepage
-      </HomeButton>
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  margin: 25px auto;
-  font-family: var(--page-404-font-family);
-  text-align: center;
-`;
-
-const Header = styled.div`
-  color: var(--page-404-header-text-color);
-  margin: var(--page-404-header-margin);
-  font-size: var(--page-404-header-font-size);
-  line-height: var(--page-404-header-line-height);
-  font-weight: var(--page-404-header-font-weight);
-`;
-
-const Description = styled.div`
-  color: var(--page-404-description-text-color);
-  margin: var(--page-404-description-margin);
-  font-size: var(--page-404-description-font-size);
-  line-height: var(--page-404-description-line-height);
-  font-weight: var(--page-404-description-font-weight);
-`;
-
-const HomeButton = styled(Button)`
-  margin-top: var(--page-404-button-margin);
-`;

package/src/Pages/index.ts

@@ -1 +0,0 @@
-export * from '@theme/Pages/NotFound';