@redocly/theme 0.15.0 → 0.16.0

package/src/components/Search/SearchIcon.tsx

@@ -17,8 +17,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const SearchIcon = styled(Icon).attrs(() => ({
+export const SearchIcon = styled(Icon).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/SearchIcon',
+  className,
 }))`
   cursor: pointer;
   width: 1em;

package/src/components/Search/SearchItem.tsx

@@ -9,9 +9,10 @@ import type { SearchDocument } from '@theme/types/portal/src/shared/types/search
 
 interface SearchItemProps {
   item: ActiveItem<SearchDocument>;
+  className?: string;
 }
 
-export function SearchItem({ item }: SearchItemProps): JSX.Element {
+export function SearchItem({ item, className }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>();
 
   useEffect(() => {
@@ -43,6 +44,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
             }`;
             return (
               <SearchLink
+                className={className}
                 key={`${item.id}-${index}`}
                 to={item.url}
                 tabIndex={0}
@@ -63,6 +65,7 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
         </>
       ) : (
         <SearchLink
+          className={className}
           to={item.url}
           tabIndex={0}
           innerRef={ref}

package/src/components/Search/SearchTrigger.tsx

@@ -6,7 +6,13 @@ import { useTranslate } from '@portal/hooks';
 import { SearchIcon } from '@theme/components/Search/SearchIcon';
 import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
 
-export function SearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+export function SearchTrigger({
+  onClick,
+  className,
+}: {
+  onClick: () => void;
+  className?: string;
+}): JSX.Element {
   const themeSettings = useThemeConfig();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -15,7 +21,7 @@ export function SearchTrigger({ onClick }: { onClick: () => void }): JSX.Element
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
 
   return (
-    <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick}>
+    <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick} className={className}>
       <SearchIconSmall />
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, 'Search')}

package/src/components/Search/Shortcut.tsx

@@ -4,12 +4,14 @@ import styled from 'styled-components';
 export function Shortcut({
   combination,
   text,
+  className,
 }: {
   combination: string;
   text: string;
+  className?: string;
 }): JSX.Element {
   return (
-    <Wrapper data-component-name="Search/Shortcut">
+    <Wrapper data-component-name="Search/Shortcut" className={className}>
       <Key>{combination}</Key>
       {text}
     </Wrapper>

package/src/components/Search/ShortcutKey.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 interface ShortcutKeyProps {
   keyShortcuts?: string | string[];
+  className?: string;
 }
 
 export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
@@ -18,7 +19,7 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
 
-  return <Wrapper>{mainShortcutKey}</Wrapper>;
+  return <Wrapper className={props.className}>{mainShortcutKey}</Wrapper>;
 }
 
 export const Wrapper = styled.div`

package/src/components/Search/SidebarSearch.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components';
 import { Search } from '@theme/components/Search/Search';
 import { Popover } from '@theme/components/Search/Popover';
 
-export const SidebarSearch = styled(Search).attrs(() => ({
+export const SidebarSearch = styled(Search).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Search/SidebarSearch',
+  className,
 }))`
   --search-input-text-color: var(--sidebar-item-active-color);
 

package/src/components/Search/SuggestedPages.tsx

@@ -6,7 +6,7 @@ import { useSuggestedPages } from '@portal/search';
 import { Link } from '@portal/Link';
 import { useTranslate } from '@portal/hooks';
 
-export function SuggestedPages() {
+export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
   const translationKeys = {
@@ -16,7 +16,7 @@ export function SuggestedPages() {
   if (!pages.length) return null;
 
   return (
-    <Wrapper data-component-name="Search/SuggestedPages">
+    <Wrapper data-component-name="Search/SuggestedPages" className={className}>
       <Title data-translation-key={translationKeys.title}>
         {translate(translationKeys.title, 'Suggested pages')}
       </Title>

package/src/components/Separator/Separator.tsx

@@ -6,11 +6,11 @@ import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function Separator({ item }: MenuItemProps): JSX.Element {
+export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator">
+    <Wrapper data-component-name="Sidebar/Separator" className={className}>
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>

package/src/components/Separator/SeparatorItem.tsx

@@ -2,16 +2,23 @@ import styled from 'styled-components';
 
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 
-export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
-  'data-component-name': 'Sidebar/SeparatorItem',
-}))`
+export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>(
+  ({ className }) => ({
+    'data-component-name': 'Sidebar/SeparatorItem',
+    className,
+  }),
+)`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-item-color);
   font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
-  background: var(--sidebar-item-separator-background-color);
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
 
   *:not(:first-child) > & {
     margin-top: var(--sidebar-item-separator-offset);

package/src/components/Separator/SeparatorLine.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const SeparatorLine = styled.div.attrs(() => ({
+export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/SeparatorLine',
+  className,
 }))`
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);

package/src/components/Sidebar/ApiCallItem.tsx

@@ -7,16 +7,16 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 
-export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
+export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/ApiCallItem">
+    <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
+        <Label active={item.active}>
           <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </Badge>
           {item.label}
-        </MenuItemLabel>
+        </Label>
       </MenuLinkItem>
 
       {item.separatorLine ? <SeparatorLine /> : null}
@@ -24,6 +24,14 @@ export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
   );
 }
 
+const Label = styled(MenuItemLabel)`
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
+
 const Wrapper = styled.div``;
 
 export const Badge = styled(OperationBadge)`

package/src/components/Sidebar/BackButton.tsx

@@ -5,14 +5,16 @@ import { ArrowBack } from '@theme/ui/ArrowBack';
 
 interface BackButtonProps {
   back: () => void;
+  className?: string;
 }
 
 export function BackButton({
   children,
   back,
+  className,
 }: React.PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
-    <Button onClick={back} data-component-name="Sidebar/BackButton">
+    <Button onClick={back} data-component-name="Sidebar/BackButton" className={className}>
       <ArrowBack dataComponentName="Sidebar/ArrowBack" />
       {children}
     </Button>

package/src/components/Sidebar/Drilldown.tsx

@@ -10,16 +10,18 @@ import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;
   expand: () => void;
+  className?: string;
 }
 
 export function Drilldown({
   isExpanded,
   item,
   expand,
+  className,
   ...props
 }: React.PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/Drilldown">
+    <Wrapper data-component-name="Sidebar/Drilldown" className={className}>
       <DrilldownLabel onClick={expand}>
         <DrilldownMenuItem item={item} />
       </DrilldownLabel>

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -11,13 +11,14 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
+  className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
   const translationKeys = {
     backLabel: 'theme.sidebar.menu.backLabel',
   };
   return (
-    <MenuContainer data-component-name="Sidebar/DrilldownMenu">
+    <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
           <BackButton back={back} data-translation-key={translationKeys.backLabel}>
@@ -37,7 +38,7 @@ const MenuContainer = styled.div`
   top: 0;
   bottom: 0;
   width: 100%;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
 `;
 

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+export function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Container data-component-name="Sidebar/DrilldownMenuItem">
+    <Container data-component-name="Sidebar/DrilldownMenuItem" className={className}>
       {item.icon ? <Icon src={item.icon} /> : null}
       <div>
         {translate(item.labelTranslationKey, item.label)}

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const HeaderWrapper = styled.div.attrs(() => ({
+export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/HeaderWrapper',
+  className,
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);

package/src/components/Sidebar/MobileSidebarButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const MobileSidebarButton = styled.span.attrs(() => ({
+export const MobileSidebarButton = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/MobileSidebarButton',
+  className,
 }))<{ opened?: boolean }>`
   background-color: var(
     ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
@@ -13,7 +14,7 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
   cursor: pointer;
   position: fixed;
   right: 20px;
-  z-index: 3;
+  z-index: var(--z-index-surface);
   box-shadow: ${(props) =>
     props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
   border-radius: 50%;

package/src/components/Sidebar/Sidebar.tsx

@@ -5,8 +5,9 @@ interface SidebarProps {
   animate?: boolean;
 }
 
-export const Sidebar = styled.aside.attrs(() => ({
+export const Sidebar = styled.aside.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/Sidebar',
+  className,
 }))<SidebarProps>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;

package/src/components/Sidebar/SidebarLayout.tsx

@@ -25,6 +25,7 @@ interface SidebarLayoutProps {
   growContent?: boolean;
   collapsed?: boolean;
   onToggleMenu?: (isOpen: boolean) => void;
+  className?: string;
 }
 
 const StyledFooterWrapper = styled(FooterWrapper)`
@@ -43,6 +44,7 @@ export function SidebarLayout({
   growContent,
   collapsed,
   onToggleMenu,
+  className,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const [mappedCollapsed, setMappedCollapsed] = React.useState(collapsed);
@@ -76,10 +78,7 @@ export function SidebarLayout({
           </Wrapper>
         ) : null
       ) : (
-        <Wrapper data-component-name="Sidebar/SidebarLayout">
-          <MobileSidebarButton opened={isOpen} onClick={toggleMenu}>
-            <MobileSidebarIcon />
-          </MobileSidebarButton>
+        <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
             {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}

package/src/components/Sidebar/types.ts

@@ -13,11 +13,14 @@ export interface DrilldownMenuProps {
   back: () => void;
   item: ItemState;
   prevActiveItem?: ItemState;
+  className?: string;
 }
 
 export interface MenuItemProps {
   item: ItemState;
   activeItem?: ItemState;
+  className?: string;
+  isMobile?: boolean;
 }
 
 export interface NavItem {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -25,6 +25,7 @@ interface SidebarActionsProps {
   onChangeViewClick: () => void;
   onChangeCollapseSidebarClick: () => void;
   requestAccessButton?: React.ReactElement | null;
+  className?: string;
 }
 
 export const SidebarActions = ({
@@ -39,9 +40,11 @@ export const SidebarActions = ({
   onChangeViewClick,
   onChangeCollapseSidebarClick,
   requestAccessButton,
+  className,
 }: SidebarActionsProps) => {
   return (
     <ControlsWrap
+      className={className}
       isOpenapiDocs={isOpenapiDocs}
       isCollapsed={collapsedSidebar}
       data-component-name="Sidebar/Actions"

package/src/components/SidebarLogo/SidebarLogo.tsx

@@ -7,6 +7,7 @@ export interface LogoProps {
   altText?: string;
   dataTestId?: string;
   backgroundColor?: string;
+  className?: string;
 }
 
 export function SidebarLogo({
@@ -15,6 +16,7 @@ export function SidebarLogo({
   altText,
   backgroundColor,
   dataTestId,
+  className,
 }: LogoProps = {}): JSX.Element | null {
   if (!imageUrl) {
     return null;
@@ -27,6 +29,7 @@ export function SidebarLogo({
       data-cy={dataTestId}
       style={{ backgroundColor }}
       data-component-name="SidebarLogo/SidebarLogo"
+      className={className}
     >
       {href ? <Link href={href}>{logo}</Link> : logo}
     </LogoWrap>

package/src/components/TableOfContent/TableOfContent.tsx

@@ -15,10 +15,11 @@ import {
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
   contentWrapper: HTMLDivElement | null;
+  className?: string;
 }
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
-  const { headings, contentWrapper } = props;
+  const { headings, contentWrapper, className } = props;
 
   const sidebar = React.useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
@@ -43,7 +44,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   return (
     <>
-      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
+      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
             <TocHeader data-translation-key={translationKeys.header}>

package/src/components/Tags/Tags.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { Highlight } from '@theme/ui/Highlight';
 
-export function Tags({ tags }: { tags: string[] }) {
+export function Tags({ tags, className }: { tags: string[]; className?: string }) {
   return (
-    <TagsWrapper>
+    <TagsWrapper className={className}>
       {tags.map((tag) => (
         <Tag key={tag} className={'tag-' + slug(tag)}>
           <Highlight>{tag}</Highlight>

package/src/components/Tiles/TileHeader.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const TileHeader = styled.h3.attrs(() => ({
+export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'ui/Tiles/TileHeader',
+  className,
 }))<{ color?: string }>`
   font-weight: var(--h3-font-weight);
   line-height: var(--h3-line-height);

package/src/components/Tiles/TileText.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const TileText = styled.span.attrs(() => ({
+export const TileText = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'ui/Tiles/TileText',
+  className,
 }))<{ color?: string }>`
   display: inline-block;
   font-weight: var(--font-weight-regular);

package/src/components/Typography/Emphasis.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const Emphasis = styled.strong.attrs(() => ({
+export const Emphasis = styled.strong.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/Emphasis',
+  className,
 }))`
   font-weight: var(--font-weight-bold);
 `;

package/src/components/Typography/H1.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H1 = styled.h1.attrs(() => ({
+export const H1 = styled.h1.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H1',
+  className,
 }))`
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);

package/src/components/Typography/H2.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H2 = styled.h2.attrs(() => ({
+export const H2 = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H2',
+  className,
 }))`
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);

package/src/components/Typography/H3.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { typography } from '@theme/utils';
 
-export const H3 = styled.h3.attrs(() => ({
+export const H3 = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/H3',
+  className,
 }))`
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);

package/src/components/Typography/SectionHeader.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const SectionHeader = styled.h2.attrs(() => ({
+export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/SectionHeader',
+  className,
 }))`
   color: var(--h2-color);
   font-size: var(--h2-font-size);

package/src/components/Typography/Typography.ts

@@ -13,8 +13,9 @@ export interface TypographyProps {
   textAlign?: string;
 }
 
-export const Typography = styled.div.attrs(() => ({
+export const Typography = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/Typography',
+  className,
 }))<TypographyProps>`
   color: ${({ color }) => color || 'var(--text-color)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};