@redocly/theme 0.15.1 → 0.17.0

package/src/components/Menu/MobileMenu.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
+import { isPrimitive, isEmptyArray, withPathPrefix } from '@theme/utils';
+import type { ResolvedNavItem } from '@theme/types/portal';
+import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
+import type { ItemState } from '@portal/Sidebar/types';
+import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
+import { getPathnameForLocale } from '@portal/utils';
+import { useI18nConfig, useTranslate } from '@portal/hooks';
+import { ExpandIcon } from '@theme/icons';
+
+interface MobileMenuProps {
+  navItems: ResolvedNavItem[];
+  sidebarItems: ItemState[];
+  className?: string;
+}
+
+enum MenuLevel {
+  NAVBAR = 'NAVBAR',
+  SIDEBAR = 'SIDEBAR',
+}
+
+export function MobileMenu({
+  navItems,
+  sidebarItems,
+  className,
+}: MobileMenuProps): JSX.Element | null {
+  const [menuLevel, setMenuLevel] = useState(
+    sidebarItems.length ? MenuLevel.SIDEBAR : MenuLevel.NAVBAR,
+  );
+  const { pathname, hash } = useLocation();
+  const pathHash = pathname + hash;
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
+  const { translate } = useTranslate();
+
+  if (isPrimitive(navItems) || isEmptyArray(navItems)) {
+    return null;
+  }
+
+  const isItemActive = (item: ResolvedNavItem): boolean => {
+    return (
+      pathHash ===
+      withPathPrefix(getPathnameForLocale(item.link || '/', defaultLocale, currentLocale, locales))
+    );
+  };
+
+  const mapNavbarItems = (items: ResolvedNavItem[]): ItemState[] => {
+    return items.map(
+      (navItem) =>
+        ({
+          ...navItem,
+          ...(navItem.items && { items: mapNavbarItems(navItem.items) }),
+          ...('link' in navItem && { link: navItem.link || '/' }),
+          active: 'link' in navItem && isItemActive(navItem),
+          hasActiveSubItem: !!navItem.items?.find(isItemActive),
+        } as ItemState),
+    );
+  };
+
+  let menuItems: ItemState[];
+  switch (menuLevel) {
+    case MenuLevel.SIDEBAR:
+      menuItems = sidebarItems;
+      break;
+    default:
+      menuItems = mapNavbarItems(navItems);
+  }
+
+  const isMenuButtonVisible = menuLevel === MenuLevel.SIDEBAR;
+  const isPreviousButtonVisible = menuLevel === MenuLevel.NAVBAR && !!sidebarItems.length;
+  const isButtonsSectionVisible = isMenuButtonVisible || isPreviousButtonVisible;
+
+  const translationKeys = {
+    mainMenu: 'theme.mobileMenu.mainMenu',
+    previous: 'theme.mobileMenu.previous',
+  };
+
+  return (
+    <MobileMenuWrapper data-component-name="Menu/MobileMenu" className={className}>
+      <ScrollableArea>
+        {isButtonsSectionVisible && (
+          <ButtonsSection alignRight={isPreviousButtonVisible}>
+            {isMenuButtonVisible && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(MenuLevel.NAVBAR)}
+              >
+                <ExpandIcon direction="left" />
+                <ControlButtonLabel paddingDirection="left">
+                  {translate(translationKeys.mainMenu, 'Main Menu')}
+                </ControlButtonLabel>
+              </ControlButton>
+            )}
+            {isPreviousButtonVisible && (
+              <ControlButton
+                data-component-name="Menu/ControlButton"
+                onClick={() => setMenuLevel(MenuLevel.SIDEBAR)}
+              >
+                <ControlButtonLabel paddingDirection="right">
+                  {translate(translationKeys.previous, 'Previous')}
+                </ControlButtonLabel>
+                <ExpandIcon direction="right" />
+              </ControlButton>
+            )}
+          </ButtonsSection>
+        )}
+        <MenuWrapper>
+          <Menu items={menuItems} isMobile />
+        </MenuWrapper>
+      </ScrollableArea>
+      <MobileUserProfile />
+    </MobileMenuWrapper>
+  );
+}
+
+const MobileMenuWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: var(--z-index-raised);
+  left: 0;
+  top: var(--navbar-height);
+  overflow-x: hidden;
+  transition: 0.5s;
+  display: flex;
+  flex-direction: column;
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+
+  ${DropdownWrapper} {
+    & > div {
+      text-align: center;
+      padding: 10px 0;
+      cursor: pointer;
+      a {
+        color: var(--navbar-text-color);
+        text-decoration: none;
+      }
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+const ButtonsSection = styled.div<{ alignRight: boolean }>`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  ${({ alignRight }) => alignRight && 'justify-content: flex-end'};
+`;
+
+const ScrollableArea = styled.div`
+  padding-top: var(--mobile-menu-padding-top);
+  flex: 1;
+  overflow-y: scroll;
+  margin-bottom: 140px;
+`;
+
+const MenuWrapper = styled.div`
+  margin: 0 var(--mobile-menu-horizontal-margin);
+  margin-top: var(--mobile-menu-items-margin-top);
+  line-height: 22px;
+  background: var(--mobile-menu-background);
+
+  ${MenuItemLabel} {
+    margin: 0;
+    border-radius: var(--mobile-menu-item-radius);
+    padding-left: var(--sidebar-item-padding-horizontal);
+  }
+`;
+
+export const ControlButton = styled.li`
+  display: inline-block;
+  padding: var(--mobile-menu-control-button-padding-vertical)
+    var(--mobile-menu-control-button-padding-horizontal);
+  margin: var(--mobile-menu-control-button-margin-vertical)
+    var(--mobile-menu-control-button-margin-horizontal);
+  text-align: center;
+  font-size: var(--mobile-menu-control-button-font-size);
+  line-height: 22px;
+  font-weight: var(--mobile-menu-control-button-weight);
+  color: var(--mobile-menu-control-button-color);
+  cursor: pointer;
+
+  svg {
+    fill: var(--mobile-menu-control-button-color);
+  }
+
+  &:hover {
+    color: var(--mobile-menu-control-button-hover-color);
+
+    svg {
+      fill: var(--mobile-menu-control-button-hover-color);
+    }
+  }
+`;
+
+const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
+  vertical-align: middle;
+  ${({ paddingDirection }) => paddingDirection === 'left' && 'padding-left: 8px'};
+  ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
+`;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
+import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
+import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
+import type { ItemState } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
+import { ExpandIcon } from '@theme/icons';
+
+interface MenuGroupProps {
+  item: ItemState;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export function MobileMenuGroup({
+  item,
+  isExpanded,
+  toggleExpanded,
+  children,
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
+  const { translate } = useTranslate();
+
+  return (
+    <Wrapper data-component-name="Menu/MobileMenuGroup">
+      <MenuLinkItem item={item}>
+        <MenuGroupLabel onClick={toggleExpanded} active={item.active} expanded={isExpanded}>
+          <LabelContainer>
+            <Label>{translate(item.labelTranslationKey, item.label)}</Label>
+          </LabelContainer>
+          {!!item.items.length && <ExpandIcon direction={isExpanded ? 'down' : 'right'} />}
+        </MenuGroupLabel>
+      </MenuLinkItem>
+      <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>
+      {item.separatorLine ? <SeparatorLine /> : null}
+    </Wrapper>
+  );
+}
+
+const LabelContainer = styled.div`
+  display: flex;
+`;
+
+const Label = styled.div``;
+
+const Wrapper = styled.div``;
+
+const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
+  padding-left: var(--mobile-menu-item-nested-offset);
+  overflow: hidden;
+  ${(props) => !props.isExpanded && 'max-height: 0'}
+`;
+
+const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: boolean }>`
+  color: var(--mobile-menu-item-text-color);
+  background: var(--mobile-menu-background);
+  display: flex;
+  justify-content: space-between;
+
+  ${({ active }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+  `}
+
+  ${({ expanded }) =>
+    expanded &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+  `}
+`;

package/src/components/Menu/index.ts

@@ -5,3 +5,4 @@ export * from '@theme/components/Menu/MenuContainer';
 export * from '@theme/components/Menu/MenuItemLabel';
 export * from '@theme/components/Menu/MenuLink';
 export * from '@theme/components/Menu/MenuLinkItem';
+export * from '@theme/components/Menu/MobileMenuGroup';

package/src/components/Navbar/BurgerButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BurgerIcon, CloseIcon } from '@theme/icons';
+
+export function BurgerButton({
+  isOpen,
+  onClick,
+}: {
+  isOpen: boolean;
+  onClick: () => void;
+}): JSX.Element | null {
+  return (
+    <Wrapper data-component-name="BurgerButton/BurgerButton" onClick={onClick}>
+      {isOpen ? <CloseIcon /> : <BurgerIcon />}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  fill: var(--navbar-text-color);
+
+  * {
+    margin: var(--mobile-menu-burger-button-margin);
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
+  }
+`;

package/src/components/Navbar/MobileUserProfile.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useProfileProps } from '@portal/Profile/useProfileProps';
+import { LogoutIcon } from '@theme/icons/LogoutIcon';
+import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profile/Profile';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+
+export function MobileUserProfile(): JSX.Element {
+  const { userProfile } = useThemeConfig();
+  const { userData, handleLogout, loginUrl } = useProfileProps();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    login: 'theme.profile.login',
+  };
+
+  if (!userData?.isAuthenticated) {
+    return (
+      <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
+        <LoginButton href={loginUrl} data-cy="login-btn">
+          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+        </LoginButton>
+      </MobileProfileWrapper>
+    );
+  }
+
+  return (
+    <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
+      <UserDataWrapper>
+        <ProfilePicture>
+          <Profile name={userData.name} imageUrl={userData.picture} />
+        </ProfilePicture>
+        <UserName>{userData.name}</UserName>
+      </UserDataWrapper>
+      <LogoutButton onClick={() => handleLogout()}>
+        <LogoutIcon />
+      </LogoutButton>
+    </MobileProfileWrapper>
+  );
+}
+const LoginButton = styled.a`
+  background: var(--mobile-menu-login-button-background);
+  border-radius: 6px;
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  color: var(--mobile-menu-login-button-color);
+  font-size: 14px;
+  text-align: center;
+  line-height: 22px;
+  cursor: pointer;
+  text-decoration: none;
+`;
+
+const MobileProfileWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  padding: 18px 16px;
+  border-top: 1px solid var(--mobile-menu-profile-border-color);
+  background: var(--mobile-menu-profile-background);
+`;
+
+const UserDataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProfilePicture = styled.div`
+  margin-right: 16px;
+
+  ${AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${ProfileWrapper} {
+    padding: 0;
+  }
+`;
+
+const UserName = styled.div``;
+
+const LogoutButton = styled.div`
+  cursor: pointer;
+  user-select: none;
+`;

package/src/components/Navbar/Navbar.tsx

@@ -4,17 +4,19 @@ 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 { MobileMenu } from '@theme/components/Menu/MobileMenu';
 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';
-import { useI18n } from '@portal/hooks';
-import { LanguagePicker } from '@theme/I18n/LanguagePicker';
+import type { LogoConfig, ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
+import { useI18n, usePageVersions } from '@portal/hooks';
+import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
+import { useSidebarItems } from '@portal/Sidebar/useSidebarItems';
+
+import { LanguagePicker } from '../../I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   :root {
@@ -74,9 +76,14 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
   menu: ResolvedConfigLinks;
   hideUserProfile: boolean | string | undefined;
   changeLanguage: (value: string) => void;
+  className?: string;
 }
 
 export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
+  const { versions = [] } = usePageVersions() || {};
+  const activeVersion = versions.find((version) => version?.active);
+  const sidebarItems = useSidebarItems(activeVersion);
+
   const {
     menuItemsExist,
     closeMobileMenu,
@@ -87,26 +94,48 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
     menu,
     hideUserProfile,
     changeLanguage,
+    className,
   } = props;
   return (
-    <NavbarContainer data-component-name="Navbar/Navbar">
-      {menuItemsExist && <MobileNavbarMenuButton onClick={openMobileMenu} />}
-
-      {isOpen && (
-        <MobileNavbarMenu closeMenu={closeMobileMenu} menuItems={menu as ResolvedConfigLinks} />
-      )}
+    <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
+      {isOpen && <MobileMenu navItems={menu as ResolvedNavItem[]} sidebarItems={sidebarItems} />}
       <NavbarRow>
+        {menuItemsExist && (
+          <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
+        )}
         <NavbarLogo logo={logo} />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
         <LanguagePicker onChangeLanguage={changeLanguage} />
-        {hideUserProfile ? null : <AuthUserProfile />}
-        <ColorModeSwitcher />
+        {hideUserProfile ? null : (
+          <AuthUserProfileWrapper>
+            <AuthUserProfile />
+          </AuthUserProfileWrapper>
+        )}
+        <ColorModeSwitcherWrapper isVisible={isOpen}>
+          <ColorModeSwitcher />
+        </ColorModeSwitcherWrapper>
       </NavbarRow>
     </NavbarContainer>
   );
 }
 
+const ColorModeSwitcherWrapper = styled.div<{ isVisible: boolean }>`
+  display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
+const AuthUserProfileWrapper = styled.div`
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+
 export const NavbarContainer = styled.nav`
   --text-color: var(--navbar-text-color);
 
@@ -119,7 +148,7 @@ export const NavbarContainer = styled.nav`
   font-size: 0.875rem;
   position: sticky;
   top: 0;
-  z-index: 200;
+  z-index: var(--z-index-raised);
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
   font-family: var(--navbar-item-font-family);

package/src/components/Navbar/NavbarDropdown.tsx

@@ -7,12 +7,13 @@ import { useTranslate } from '@portal/hooks';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];
+  className?: string;
 }
 
-export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+export function NavbarDropdown({ items, className }: NavbarDropdownProps): JSX.Element {
   const { translate } = useTranslate();
   return (
-    <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
+    <DropdownWrapper data-component-name="Navbar/NavbarDropdown" className={className}>
       {items.map((item, index) => (
         <div key={`${item.label}_${index}`}>
           <Link to={item.link}>{translate(item.labelTranslationKey, item.label)}</Link>

package/src/components/Navbar/NavbarMenu.tsx

@@ -5,13 +5,19 @@ 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 {
+export function NavbarMenu({
+  menuItems,
+  className,
+}: {
+  menuItems: ResolvedConfigLinks;
+  className?: string;
+}): JSX.Element | null {
   if (isPrimitive(menuItems)) {
     return null;
   }
 
   return (
-    <NavItemsContainer data-component-name="Navbar/NavbarMenu">
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu" className={className}>
       {(menuItems as ResolvedNavItem[]).map((navItem, index) => {
         return (
           <NavbarItem key={`${navItem.label}_${index}`} data-cy={navItem.label} navItem={navItem} />

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -4,14 +4,22 @@ import styled from 'styled-components';
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
 
-export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
+export type NavbarLogoProps = {
+  logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+  className?: string;
+};
 
-export function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null {
+export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
   if (!logo.image) {
     return null;
   }
   const img = (
-    <NavLogo src={logo.image} alt={logo.altText} data-component-name="NavbarLogo/NavbarLogo" />
+    <NavLogo
+      className={className}
+      src={logo.image}
+      alt={logo.altText}
+      data-component-name="NavbarLogo/NavbarLogo"
+    />
   );
   return logo.link ? <Link to={logo.link}>{img}</Link> : img;
 }

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { TryItSecurityAppsProps } from './TryItSecurityApps';
-
+import type { TryItSecurityAppsProps } from '@theme/components/OpenApiDocs/TryItSecurityApps';
 import { Button } from '@theme/components/Button/Button';
 import { usePreloadHistory } from '@portal/usePreloadHistory';
 import { usePageData } from '@portal/hooks/usePageData';
-
-import { Dropdown } from './Dropdown';
+import { Dropdown } from '@theme/components/OpenApiDocs/Dropdown';
 
 export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
   const apiId = (props as any).apiId;

package/src/components/PageNavigation/NextButton.tsx

@@ -8,9 +8,10 @@ import { useTranslate } from '@portal/hooks';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function NextButton({ nextPage }: NextPageType): JSX.Element {
+export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
   const { navigation } = useThemeConfig();
   const { translate } = useTranslate();
 
@@ -33,6 +34,7 @@ export function NextButton({ nextPage }: NextPageType): JSX.Element {
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
       data-translation-key={translationKey}
+      extraClass={className}
     >
       {text}
     </StyledButton>

package/src/components/PageNavigation/PageNavigation.tsx

@@ -9,9 +9,14 @@ import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 interface PageNavigationType {
   nextPage?: ResolvedNavItemWithLink | null;
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.Element | null {
+export function PageNavigation({
+  nextPage,
+  prevPage,
+  className,
+}: PageNavigationType): JSX.Element | null {
   const { navigation } = useThemeConfig();
 
   if (navigation?.previousButton?.hide && navigation?.nextButton?.hide) {
@@ -19,7 +24,10 @@ export function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.
   }
 
   return (
-    <PageNavigationWrapper data-component-name="PageNavigation/PageNavigation">
+    <PageNavigationWrapper
+      data-component-name="PageNavigation/PageNavigation"
+      className={className}
+    >
       <PreviousButton prevPage={prevPage} />
       <NextButton nextPage={nextPage} />
     </PageNavigationWrapper>

package/src/components/PageNavigation/PreviousButton.tsx

@@ -8,9 +8,10 @@ import { useTranslate } from '@portal/hooks';
 
 interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 }
 
-export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
+export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.Element {
   const { navigation } = useThemeConfig();
   const { translate } = useTranslate();
 
@@ -36,6 +37,7 @@ export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
       data-translation-key={translationKey}
+      extraClass={className}
     >
       {text}
     </StyledButton>

package/src/components/Panel/PanelBody.ts

@@ -18,8 +18,9 @@ interface PanelBodyProps {
   hidden?: boolean;
 }
 
-export const PanelBody = styled.div.attrs(() => ({
+export const PanelBody = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelBody',
+  className,
 }))<PanelBodyProps>`
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};