@redocly/theme 0.15.1 → 0.17.0

package/src/components/Feedback/Rating.tsx

@@ -10,7 +10,7 @@ type StarsProps = {
   max: number;
 };
 
-export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
+export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Element => {
   const {
     label,
     max,
@@ -66,7 +66,7 @@ export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Rating">
+    <Wrapper data-component-name="Feedback/Rating" className={className}>
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'How helpful was this page?')}
       </Label>

package/src/components/Feedback/Reasons.tsx

@@ -5,7 +5,7 @@ import { Button } from '@theme/components/Button/Button';
 import type { ReasonsProps } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
 
-export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
+export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.Element => {
   const { label, multi, buttonText, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { translate } = useTranslate();
@@ -34,7 +34,11 @@ export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
   };
 
   return (
-    <Wrapper data-component-name="Feedback/Reasons" data-translation-key={translationKeys.label}>
+    <Wrapper
+      data-component-name="Feedback/Reasons"
+      data-translation-key={translationKeys.label}
+      className={className}
+    >
       <Label>
         {translate(
           translationKeys.label,

package/src/components/Feedback/ReportDialog.tsx

@@ -35,7 +35,7 @@ const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;
   background: var(--modal-overlay-background-color);
-  z-index: 10000;
+  z-index: var(--z-index-overlay);
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/Feedback/Sentiment.tsx

@@ -6,7 +6,7 @@ import { Comment, Reasons } from '@theme/components/Feedback';
 import { ThumbUp, ThumbDown } from '@theme/components/Feedback/Thumbs';
 import { useTranslate } from '@portal/hooks';
 
-export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
+export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
@@ -65,7 +65,7 @@ export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element =
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Sentiment">
+    <Wrapper data-component-name="Feedback/Sentiment" className={className}>
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Was this page helpful?')}
       </Label>

package/src/components/Feedback/types.ts

@@ -17,6 +17,7 @@ export type RatingProps = {
       items: string[];
     };
   };
+  className?: string;
 };
 
 export type SentimentProps = {
@@ -36,6 +37,7 @@ export type SentimentProps = {
       items: string[];
     };
   };
+  className?: string;
 };
 
 export type CommentProps = {
@@ -45,6 +47,7 @@ export type CommentProps = {
     label?: string;
     submitText?: string;
   };
+  className?: string;
 };
 
 export type ReasonsProps = {
@@ -56,6 +59,7 @@ export type ReasonsProps = {
     submitText?: string;
     buttonText?: string;
   };
+  className?: string;
 };
 
 export type ReportDialogProps = {
@@ -66,4 +70,5 @@ export type ReportDialogProps = {
     label?: string;
   };
   submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+  className?: string;
 };

package/src/components/Footer/CustomFooter.tsx

@@ -7,15 +7,16 @@ import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;
+  className?: string;
 }
 
-export function CustomFooter({ data }: FooterProps): JSX.Element | null {
+export function CustomFooter({ data, className }: FooterProps): JSX.Element | null {
   if (!data) {
     return null;
   }
 
   return (
-    <FooterContainer data-component-name="Footer/CustomFooter">
+    <FooterContainer data-component-name="Footer/CustomFooter" className={className}>
       {(data.links as ResolvedNavItem[]).map((navItem, index) => {
         return (
           <CustomFooterNavItem

package/src/components/Footer/CustomFooterNavItem.tsx

@@ -6,13 +6,14 @@ import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface CustomFooterNavItemProps {
   navItem: ResolvedNavItem;
+  className?: string;
 }
 
-export function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element {
+export function CustomFooterNavItem({ navItem, className }: CustomFooterNavItemProps): JSX.Element {
   const item = navItem as ResolvedNavLinkItem;
 
   return (
-    <FooterItem data-component-name="Navbar/NavbarItem">
+    <FooterItem data-component-name="Navbar/NavbarItem" className={className}>
       <FooterLink to={item.link}>
         <FooterLabel>{item.label}</FooterLabel>
       </FooterLink>

package/src/components/Footer/Footer.tsx

@@ -26,14 +26,16 @@ export function Footer(): JSX.Element | null {
 interface FooterPresentationalComponentProps {
   items: ResolvedNavItem[];
   copyrightText: string;
+  className?: string;
 }
 
 export function FooterPresentationalComponent({
   items,
   copyrightText,
+  className,
 }: FooterPresentationalComponentProps): JSX.Element | null {
   return (
-    <FooterContainer data-component-name="Footer/Footer">
+    <FooterContainer data-component-name="Footer/Footer" className={className}>
       <FooterColumns columns={items as ResolvedNavItem[]} />
       <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>

package/src/components/Footer/FooterColumn.tsx

@@ -7,14 +7,15 @@ import { useTranslate } from '@portal/hooks';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
+  className?: string;
 }
 
-export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+export function FooterColumn({ column, className }: FooterColumnProps): JSX.Element {
   const { translate } = useTranslate();
   const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
 
   return (
-    <FooterColumnContainer data-component-name="Footer/FooterColumn">
+    <FooterColumnContainer data-component-name="Footer/FooterColumn" className={className}>
       <FooterColumnTitle withIconPadding={hasIcon}>
         {translate(column.labelTranslationKey, column.label)}
       </FooterColumnTitle>

package/src/components/Footer/FooterColumns.tsx

@@ -6,15 +6,16 @@ import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnsProps {
   columns: ResolvedNavItem[];
+  className?: string;
 }
 
-export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+export function FooterColumns({ columns, className }: FooterColumnsProps): JSX.Element | null {
   if (!columns?.length) {
     return null;
   }
 
   return (
-    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
+    <FooterColumnsContainer data-component-name="Footer/FooterColumns" className={className}>
       <FooterRow>
         {columns.map((column, index) => (
           <FooterColumn key={`${column.label}_${index}`} column={column} />

package/src/components/Footer/FooterCopyright.tsx

@@ -5,15 +5,20 @@ import { useTranslate } from '@portal/hooks';
 
 interface FooterCopyrightProps {
   copyrightText: string;
+  className?: string;
 }
 
-export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
+export function FooterCopyright({
+  copyrightText = '',
+  className,
+}: FooterCopyrightProps): JSX.Element | null {
   const { translate } = useTranslate();
   const translationKeys = {
     copyrightText: 'theme.footer.copyrightText',
   };
   return copyrightText ? (
     <Wrapper
+      className={className}
       data-component-name="Footer/FooterCopyright"
       data-translation-key={translationKeys.copyrightText}
     >

package/src/components/LastUpdated/LastUpdated.tsx

@@ -18,6 +18,7 @@ export interface LastUpdatedProps {
   lastModified: Date;
   format?: keyof typeof FORMATS;
   locale?: string;
+  className?: string;
 }
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
@@ -44,6 +45,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   return (
     <Wrapper
+      className={props.className}
       data-component-name="LastUpdated/LastUpdated"
       rawOnPrint={format === 'timeago'}
       data-print-datetime={isoDate}

package/src/components/Markdown/ContainerWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const ContainerWrapper = styled.section.attrs(() => ({
+export const ContainerWrapper = styled.section.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/ContainerWrapper',
+  className,
 }))<{ withToc: boolean }>`
   max-width: var(--md-container-max-width);
   width: 90%;

package/src/components/Markdown/Heading.tsx

@@ -16,11 +16,13 @@ export function Heading({
   children,
   'data-source': dataSource,
   'data-hash': dataHash,
+  className,
 }: PropsWithChildren<{
   level: number;
   id: string;
   'data-source'?: string;
   'data-hash'?: string;
+  className?: string;
 }>): JSX.Element {
   const linkEl = (
     <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
@@ -32,7 +34,7 @@ export function Heading({
     `h${level}`,
     {
       id,
-      className: concatClassNames('heading-anchor', mdClassName),
+      className: concatClassNames('heading-anchor', mdClassName, className),
       'data-component-name': 'Markdown/Heading',
       'data-source': dataSource,
       'data-hash': dataHash,

package/src/components/Markdown/MarkdownLayout.tsx

@@ -24,6 +24,7 @@ type MarkdownLayoutProps = {
   lastModified?: string | null;
   nextPage?: ResolvedNavItemWithLink | null;
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 };
 
 export function MarkdownLayout({
@@ -34,6 +35,7 @@ export function MarkdownLayout({
   lastModified,
   nextPage,
   prevPage,
+  className,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
   const { translate } = useTranslate();
@@ -45,7 +47,7 @@ export function MarkdownLayout({
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
 
   return (
-    <PageWrapper data-component-name="Markdown/MarkdownLayout">
+    <PageWrapper data-component-name="Markdown/MarkdownLayout" className={className}>
       <ContainerWrapper withToc={true}>
         <Breadcrumbs />
         <LayoutTop>

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -117,8 +117,9 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
   `;
 }
 
-export const MarkdownWrapper = styled.main.attrs(() => ({
+export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/MarkdownWrapper',
+  className,
 }))`
   font-weight: var(--font-weight-regular);
   padding: 0;

package/src/components/Markdown/Mermaid.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { concatClassNames } from '@theme/utils';
+
 type MermaidProps = {
   diagramHtml: string;
   'data-source'?: string;
   'data-hash'?: string;
+  className?: string;
 };
 
 export function Mermaid({
   diagramHtml,
   'data-source': dataSource,
   'data-hash': dataHash,
+  className,
 }: MermaidProps): JSX.Element {
   return (
     <Wrapper
-      className="mermaid-wrapper"
+      className={concatClassNames('mermaid-wrapper', className)}
       dangerouslySetInnerHTML={{ __html: diagramHtml }}
       data-component-name="Markdown/Mermaid"
       data-source={dataSource}

package/src/components/Markdown/PageWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const PageWrapper = styled.div.attrs(() => ({
+export const PageWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/PageWrapper',
+  className,
 }))`
   display: flex;
   flex: 1;

package/src/components/Markdown/Sup.tsx

@@ -3,8 +3,15 @@ import styled from 'styled-components';
 
 import type { PropsWithChildren } from 'react';
 
-export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {
-  return <Wrapper data-component-name="Markdown/Sup">{children}</Wrapper>;
+export function Sup({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Markdown/Sup" className={className}>
+      {children}
+    </Wrapper>
+  );
 }
 
 const Wrapper = styled.sup``;

package/src/components/Menu/Menu.tsx

@@ -8,18 +8,27 @@ import { MenuItemSwitch } from './MenuItemSwitch';
 export interface MenuListProps {
   items: ItemState[];
   depth?: number;
+  isMobile?: boolean;
+  className?: string;
 }
 
-export function Menu({ depth = 0, items }: MenuListProps) {
+export function Menu({ depth = 0, items, className, isMobile }: MenuListProps) {
   // TODO: provide active section via MenuContext
   const activeItem = items.find(({ active }) => active);
 
   return (
-    <ThemeMenu>
+    <ThemeMenu className={className}>
       {items.map((item, index) => {
         return (
-          <MenuItemSwitch item={item} key={`${item.pageId}-${index}`} activeItem={activeItem}>
-            {item.items?.length ? <Menu items={item.items} depth={depth + 1} /> : null}
+          <MenuItemSwitch
+            item={item}
+            key={`${item.pageId}-${index}`}
+            activeItem={activeItem}
+            isMobile={isMobile}
+          >
+            {item.items?.length ? (
+              <Menu items={item.items} depth={depth + 1} isMobile={isMobile} />
+            ) : null}
           </MenuItemSwitch>
         );
       })}
@@ -34,5 +43,7 @@ export const ThemeMenu = styled.ul.attrs(() => ({
   margin: 0;
   list-style: none;
   color: var(--sidebar-item-text-color);
-  position: relative;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: relative;
+  }
 `;

package/src/components/Menu/MenuContainer.tsx

@@ -2,11 +2,13 @@ import styled from 'styled-components';
 
 interface MenuContainerProps {
   growContent?: boolean;
+  className?: string;
 }
 
-export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent, className }) => ({
   'data-component-name': 'Menu/MenuContainer',
   growContent: growContent === undefined ? true : growContent,
+  className,
 }))<MenuContainerProps>`
   position: relative;
   overflow-y: auto;

package/src/components/Menu/MenuGroup.tsx

@@ -12,6 +12,7 @@ interface MenuGroupProps {
   item: ItemState;
   isExpanded: boolean;
   toggleExpanded: () => void;
+  className?: string;
 }
 
 export function MenuGroup({
@@ -19,6 +20,7 @@ export function MenuGroup({
   isExpanded,
   toggleExpanded,
   children,
+  className,
 }: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
   const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -39,7 +41,7 @@ export function MenuGroup({
   }, [isExpanded]);
 
   return (
-    <Wrapper data-component-name="Menu/MenuGroup">
+    <Wrapper data-component-name="Menu/MenuGroup" className={className}>
       <MenuLinkItem item={item}>
         <MenuGroupLabel
           onClick={toggleExpanded}
@@ -47,10 +49,7 @@ export function MenuGroup({
           active={item.active}
           role={!item.link ? 'link' : 'none'}
         >
-          <MenuGroupArrow
-            visibility={item.items.length ? 'visible' : 'hidden'}
-            direction={isExpanded ? 'down' : 'right'}
-          />
+          {!!item.items.length && <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />}
           {translate(item.labelTranslationKey, item.label)}
         </MenuGroupLabel>
       </MenuLinkItem>

package/src/components/Menu/MenuItem.tsx

@@ -8,15 +8,15 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
 
-export function MenuItem({ item }: MenuItemProps): JSX.Element {
+export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
   return (
-    <Wrapper data-component-name="Sidebar/MenuItem">
+    <Wrapper data-component-name="Sidebar/MenuItem" className={className}>
       <MenuLinkItem item={item}>
-        <MenuItemLabel active={item.active}>
+        <Label active={item.active}>
           {translate(item.labelTranslationKey, item.label)}
           {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
-        </MenuItemLabel>
+        </Label>
       </MenuLinkItem>
 
       {item.separatorLine ? <SeparatorLine /> : null}
@@ -25,3 +25,21 @@ export function MenuItem({ item }: MenuItemProps): JSX.Element {
 }
 
 const Wrapper = styled.div``;
+
+const Label = styled(MenuItemLabel)<{ active?: boolean }>`
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+
+  ${({ active, theme }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+    }
+  `};
+`;

package/src/components/Menu/MenuItemLabel.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const MenuItemLabel = styled.li.attrs(() => ({
+export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Menu/MenuItemLabel',
+  className,
 }))<{ active?: boolean }>`
   display: flex;
   align-items: center;
@@ -22,17 +23,25 @@ export const MenuItemLabel = styled.li.attrs(() => ({
   );
   border-radius: var(--sidebar-item-border-radius);
 
-  ${(props) =>
-    props.active
-      ? `
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
-  `
-      : null};
+  ${({ active, theme }) =>
+    active &&
+    `
+    color: var(--mobile-menu-item-active-text-color);
+    background-color: var(--mobile-menu-item-active-color);
+    
+    ${theme.mediaQueries.medium} {
+      color: var(--sidebar-item-active-color);
+      background-color: var(--sidebar-item-active-background-color);
+    }
+  `};
 
   :hover {
-    color: var(--sidebar-item-hover-color);
-    background-color: var(--sidebar-item-hover-background-color);
+    color: var(--mobile-menu-item-active-text-color);
+
+    ${({ theme }) => theme.mediaQueries.medium} {
+      color: var(--sidebar-item-hover-color);
+      background-color: var(--sidebar-item-hover-background-color);
+    }
   }
 
   :empty {

package/src/components/Menu/MenuItemSwitch.tsx

@@ -8,6 +8,7 @@ import { MenuType } from '@portal/Sidebar/types';
 import { getMenuType } from '@portal/Sidebar/getMenuType';
 import { useDrilldown } from '@portal/Sidebar/useDrilldown';
 import { useMenuGroup } from '@portal/Sidebar/useMenuGroup';
+import { MobileMenuGroup } from '@theme/components/Menu/MobileMenuGroup';
 
 export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
   const type = getMenuType(props.item);
@@ -24,26 +25,27 @@ export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
   });
 
   const { MenuGroup, handleGroupClick, isExpanded } = useMenuGroup(props.item);
-
   switch (type) {
     case MenuType.Separator:
       return <Separator {...props} />;
     case MenuType.Operation:
       return <ApiCallItem {...props} />;
     case MenuType.Group:
+      const Group = props.isMobile ? MobileMenuGroup : MenuGroup;
+
       if (!props.item.items?.length) {
         // Needed for OpenApi docs model items
         return (
-          <MenuGroup item={props.item} isExpanded={false} toggleExpanded={() => {}}>
+          <Group item={props.item} isExpanded={false} toggleExpanded={() => {}}>
             {props.children}
-          </MenuGroup>
+          </Group>
         );
       }
 
       return (
-        <MenuGroup item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
+        <Group item={props.item} isExpanded={isExpanded} toggleExpanded={handleGroupClick}>
           {props.children}
-        </MenuGroup>
+        </Group>
       );
     case MenuType.DrillDown:
       return (

package/src/components/Menu/MenuLink.tsx

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const MenuLink = styled(Link).attrs(() => ({
+export const MenuLink = styled(Link).attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Sidebar/MenuLink',
+  className,
 }))`
   text-decoration: none;
   color: var(--sidebar-item-text-color);

package/src/components/Menu/MenuLinkItem.tsx

@@ -7,9 +7,10 @@ import type { MenuItemProps } from '@theme/components/Sidebar/types';
 export function MenuLinkItem({
   item,
   children,
+  className,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem">
+    <Wrapper data-component-name="Sidebar/MenuLinkItem" className={className}>
       {item.link ? (
         <MenuLink to={item.link} {...item}>
           {children}