@redocly/theme 0.15.0 → 0.16.0

package/src/components/Navbar/MobileNavbarDropdown.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-
-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/components/Navbar/MobileNavbarItem.tsx

@@ -1,121 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
-
-import { Link } from '@portal/Link';
-import { useI18nConfig } from '@portal/hooks';
-import { getPathnameForLocale } from '@portal/utils';
-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);
-  const { defaultLocale, currentLocale, locales } = useI18nConfig();
-
-  if ((navItem as ResolvedNavLinkItem).link) {
-    const item = navItem as ResolvedNavLinkItem;
-    const isActive =
-      pathname ===
-      withPathPrefix(getPathnameForLocale(item.link, defaultLocale, currentLocale, locales));
-
-    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

@@ -1,111 +0,0 @@
-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,
-}: {
-  menuItems: ResolvedConfigLinks;
-  closeMenu: () => void;
-}): JSX.Element | null {
-  if (isPrimitive(menuItems) || isEmptyArray(menuItems)) {
-    return null;
-  }
-
-  return (
-    <NavbarItemsWrapper data-component-name="Navbar/MobileNavbarMenu">
-      <NavbarItemsContainer>
-        {(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;
-  }
-`;

package/src/components/Navbar/MobileNavbarMenuButton.tsx

@@ -1,13 +0,0 @@
-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;
-  }
-`;