@redocly/theme 0.61.1 → 0.62.0-custom.0

package/src/index.ts

@@ -27,6 +27,7 @@ export * from '@redocly/theme/components/Tags/CounterTag';
 export * from '@redocly/theme/components/VersionPicker/VersionPicker';
 export * from '@redocly/theme/components/Marker/Marker';
 export * from '@redocly/theme/components/PageActions/PageActions';
+export * from '@redocly/theme/components/SvgViewer/SvgViewer';
 /* Buttons */
 export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
@@ -95,9 +96,12 @@ export * from '@redocly/theme/components/Sidebar/Sidebar';
 /* OpenApiDocs */
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiFooter';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AdditionalOverviewInfo';
+export * from '@redocly/theme/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription';
 /* SidebarActions */
 export * from '@redocly/theme/components/SidebarActions/ChangeViewButton';
 export * from '@redocly/theme/components/SidebarActions/SidebarActions';
@@ -293,6 +297,7 @@ export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon'
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
+export * from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';
@@ -302,6 +307,9 @@ export * from '@redocly/theme/layouts/OIDCForbidden';
 export * from '@redocly/theme/layouts/ThreePanelLayout';
 export * from '@redocly/theme/layouts/CodeWalkthroughLayout';
 export * from '@redocly/theme/layouts/InternalServerErrorLayout';
+export * from '@redocly/theme/layouts/DocumentationLayout';
+export * from '@redocly/theme/layouts/DocumentationLayoutTop';
+export * from '@redocly/theme/layouts/DocumentationLayoutBottom';
 /* Markdoc */
 export * as markdoc from '@redocly/theme/markdoc/default';
 /* DatePicker */

package/src/layouts/DocumentationLayout.tsx

@@ -4,12 +4,10 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
-import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
 import { breakpoints } from '@redocly/theme/core/utils';
-import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
-import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
-import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
+import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
+import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -36,21 +34,13 @@ export function DocumentationLayout({
   className,
   children,
 }: React.PropsWithChildren<DocumentationLayoutProps>): JSX.Element {
-  const { editPage: themeEditPage } = config || {};
-  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
-
   return (
     <CodeSnippetProvider>
       <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
         <ContentWrapper withToc={!config?.toc?.hide}>
-          <Breadcrumbs />
-          <LayoutTop>
-            {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-            {mergedConf && <EditPageButton to={mergedConf.to} />}
-          </LayoutTop>
+          <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
           {children}
-          <LayoutBottom>{feedback}</LayoutBottom>
-          <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+          <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
         </ContentWrapper>
         {tableOfContent}
       </LayoutWrapper>
@@ -89,19 +79,3 @@ const ContentWrapper = styled.section<{ withToc: boolean }>`
     width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
   }
 `;
-
-const LayoutTop = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-
-const Breadcrumbs = styled(ThemeBreadcrumbs)`
-  margin-bottom: var(--breadcrumbs-margin-bottom);
-`;
-
-const LayoutBottom = styled(LayoutTop)`
-  > * {
-    margin: 25px 0;
-  }
-`;

package/src/layouts/DocumentationLayoutBottom.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ResolvedNavItemWithLink } from '@redocly/config';
+
+import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
+
+type DocumentationLayoutBottomProps = {
+  feedback: React.ReactNode;
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
+};
+
+export function DocumentationLayoutBottom({
+  feedback,
+  nextPage,
+  prevPage,
+}: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutBottom">
+      <LayoutBottom>{feedback}</LayoutBottom>
+      <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutBottom = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+
+  > * {
+    margin: 25px 0;
+  }
+`;

package/src/layouts/DocumentationLayoutTop.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MarkdownConfig } from '@redocly/config';
+
+import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
+import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
+import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
+
+type DocumentationLayoutTopProps = {
+  config?: MarkdownConfig;
+  editPage?: {
+    to: string;
+  };
+  /** String in ISO format */
+  lastModified?: string | null;
+};
+
+export function DocumentationLayoutTop({
+  config,
+  editPage,
+  lastModified,
+}: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element {
+  const { editPage: themeEditPage } = config || {};
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
+
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutTop">
+      <Breadcrumbs />
+      <LayoutTop>
+        {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+        {mergedConf && <EditPageButton to={mergedConf.to} />}
+      </LayoutTop>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+
+const Breadcrumbs = styled(ThemeBreadcrumbs)`
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;

package/src/layouts/Forbidden.tsx

@@ -5,50 +5,65 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 
 export function Forbidden(): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Pages/Forbidden">
-      <Header>403</Header>
-      <Description data-translation-key="page.forbidden.title">
+    <ForbiddenWrapper data-component-name="layouts/Forbidden">
+      <StatusText>403</StatusText>
+      <Title data-translation-key="page.forbidden.title">
         {translate('page.forbidden.title', 'Access forbidden')}
+      </Title>
+      <Description data-translation-key="page.forbidden.description">
+        {translate(
+          'page.forbidden.description',
+          "You don't have permission to access this page. If you believe this is an error, contact your administrator or return to the homepage.",
+        )}
       </Description>
-      <HomeButton variant="primary" size="large" to="/" data-translation-key="page.homeButton">
+      <Button
+        variant="primary"
+        size="large"
+        to="/"
+        data-translation-key="page.homeButton"
+        icon={<ArrowLeftIcon />}
+      >
         {translate('page.homeButton', 'Go home')}
-      </HomeButton>
-    </Wrapper>
+      </Button>
+    </ForbiddenWrapper>
   );
 }
 
-const Wrapper = styled.div`
+const ForbiddenWrapper = styled.div`
+  height: 100%;
+  max-width: var(--page-403-max-width);
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  margin: 25px auto;
+  margin: var(--page-403-margin-vertical) var(--page-403-margin-horizontal);
   font-family: var(--page-403-font-family);
-  text-align: center;
+  gap: var(--page-403-gap);
 `;
 
-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 StatusText = styled.div`
+  color: var(--page-403-status-text-color);
+  font-size: var(--page-403-status-font-size);
+  line-height: var(--page-403-status-line-height);
+  font-weight: var(--page-403-status-font-weight);
+`;
+
+const Title = styled.div`
+  color: var(--page-403-title-text-color);
+  font-size: var(--page-403-title-font-size);
+  line-height: var(--page-403-title-line-height);
+  font-weight: var(--page-403-title-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/markdoc/components/Cards/Card.tsx

@@ -167,6 +167,7 @@ const CardWrapper = styled.div.attrs<{
   overflow: hidden;
   transition: box-shadow 0.3s ease;
   position: relative;
+  text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
 

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -78,7 +78,7 @@ const FilterWrapper = styled.div`
   padding-bottom: var(--spacing-xs);
   top: var(--navbar-height);
   background-color: var(--bg-color);
-  z-index: 1;
+  z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);
 `;
 

package/src/markdoc/components/Heading/Heading.tsx

@@ -1,14 +1,44 @@
-import React, { createElement } from 'react';
+import React, { createElement, isValidElement } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
-import type { JSX, PropsWithChildren } from 'react';
+import type { JSX, PropsWithChildren, ReactElement, ReactNode } from 'react';
 
+import { Image as MarkdocImage } from '@redocly/theme/markdoc/components/Image/Image';
 import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
+function renderWithSpanWrapper(children: ReactNode): ReactNode {
+  const childrenArray = React.Children.toArray(children);
+
+  if (childrenArray.length === 0) return null;
+
+  const first = childrenArray[0];
+  const last = childrenArray[childrenArray.length - 1];
+
+  // Check if an element is an <img> or the Markdoc Image component
+  const isImage = (node: ReactNode): node is ReactElement => {
+    if (!isValidElement(node)) return false;
+    if (typeof node.type === 'string') return node.type === 'img';
+    return node.type === MarkdocImage;
+  };
+
+  const middleChildren = childrenArray.slice(
+    isImage(first) ? 1 : 0,
+    isImage(last) ? childrenArray.length - 1 : childrenArray.length,
+  );
+
+  return (
+    <>
+      {isImage(first) && first}
+      {middleChildren.length > 0 && <StyledHeadingText>{middleChildren}</StyledHeadingText>}
+      {isImage(last) && last}
+    </>
+  );
+}
+
 /**
  * Class name for all MD tags
  */
@@ -57,7 +87,7 @@ export function Heading({
     },
     <HeadingContentWrapper>
       {linkEl}
-      <span>{children}</span>
+      <span>{renderWithSpanWrapper(children)}</span>
       {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
     </HeadingContentWrapper>,
   );
@@ -66,5 +96,23 @@ export function Heading({
 const HeadingContentWrapper = styled.div`
   display: flex;
   gap: var(--spacing-xs);
-  align-items: center;
+
+  & > span {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+
+  &:has([data-component-name='PageActions/PageActions']:hover) {
+    && .anchor svg {
+      visibility: hidden;
+    }
+  }
+`;
+
+const StyledHeadingText = styled.span`
+  margin: auto 0;
+  && > img:only-child {
+    display: inline-block;
+  }
 `;

package/src/markdoc/components/LoginButton/LoginButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button/Button';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { LoginButton as UserMenuLoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
+
+export type MarkdocLoginButtonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label?: string;
+  labelTranslationKey?: string;
+};
+
+export function LoginButton({
+  variant,
+  size,
+  label,
+  labelTranslationKey,
+}: MarkdocLoginButtonProps) {
+  const { useUserMenu } = useThemeHooks();
+  const { userData, loginUrl } = useUserMenu();
+
+  if (userData?.isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <UserMenuLoginButton
+      href={loginUrl || ''}
+      variant={variant}
+      size={size}
+      label={label}
+      labelTranslationKey={labelTranslationKey}
+      data-component-name="Markdoc/LoginButton"
+    />
+  );
+}

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
 import { concatClassNames } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
 
 type MermaidProps = {
   diagramHtml: string;
@@ -18,20 +20,55 @@ export function Mermaid({
   'data-hash': dataHash,
   className,
 }: MermaidProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
   return (
-    <Wrapper
-      className={concatClassNames('mermaid-wrapper', className)}
-      dangerouslySetInnerHTML={{ __html: diagramHtml }}
-      data-component-name="Markdoc/Mermaid/Mermaid"
-      data-source={dataSource}
-      data-hash={dataHash}
-    />
+    <>
+      <Wrapper
+        className={concatClassNames('mermaid-wrapper', className)}
+        dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        data-component-name="Markdoc/Mermaid/Mermaid"
+        data-source={dataSource}
+        data-hash={dataHash}
+        onClick={open}
+        onKeyDown={(e) => e.key === 'Enter' || (e.key === ' ' && open())}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen')}
+      />
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
+          zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
+          fitToView: translate('mermaid.reset', 'Fit to view'),
+          close: translate('mermaid.close', 'Close'),
+          dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
+        }}
+      >
+        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
+      </SvgViewer>
+    </>
   );
 }
 
 const Wrapper = styled.div`
   background-color: var(--mermaid-bg-color);
   border-radius: var(--mermaid-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
 
   * {
     font-family: var(--mermaid-font-family) !important;
@@ -42,3 +79,15 @@ const Wrapper = styled.div`
     max-width: 100%;
   }
 `;
+
+const ViewerContent = styled.div`
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    display: block;
+    max-width: none !important;
+  }
+`;

package/src/markdoc/components/default.ts

@@ -21,3 +21,4 @@ export * from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '@redocly/theme/markdoc/components/CodeGroup/CodeGroup';
 export * from '@redocly/theme/markdoc/components/Icon/Icon';
 export * from '@redocly/theme/markdoc/components/ConnectMCP/ConnectMCP';
+export * from '@redocly/theme/markdoc/components/LoginButton/LoginButton';

package/src/markdoc/default.ts

@@ -26,6 +26,7 @@ import { toggle } from '@redocly/theme/markdoc/tags/code-toggle';
 import { codeGroup } from '@redocly/theme/markdoc/tags/code-group';
 import { icon } from '@redocly/theme/markdoc/tags/icon';
 import { connectMcp } from '@redocly/theme/markdoc/tags/connect-mcp';
+import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 
 export const tags = {
   [admonition.tagName]: admonition.schema,
@@ -47,4 +48,5 @@ export const tags = {
   [codeGroup.tagName]: codeGroup.schema,
   [icon.tagName]: icon.schema,
   [connectMcp.tagName]: connectMcp.schema,
+  [loginButton.tagName]: loginButton.schema,
 };

package/src/markdoc/tags/login-button.ts

@@ -0,0 +1,30 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const loginButton: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'LoginButton',
+    attributes: {
+      variant: {
+        type: String,
+        default: 'primary',
+        matches: ['primary', 'secondary', 'outlined', 'text', 'link', 'ghost'],
+      },
+      size: {
+        type: String,
+        default: 'medium',
+        matches: ['small', 'medium', 'large'],
+      },
+      label: {
+        type: String,
+        description: 'Custom button label text. Overrides translation.',
+      },
+      labelTranslationKey: {
+        type: String,
+        default: 'userMenu.login',
+        description: 'Translation key for the button label.',
+      },
+    },
+    selfClosing: true,
+  },
+  tagName: 'login-button',
+};

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -1,12 +0,0 @@
-import type { JSX, ReactElement } from 'react';
-import type { TooltipProps } from '../../components/Tooltip/Tooltip';
-export type TooltipWrapperProps = {
-    children: ReactElement;
-    tip: string;
-    placement?: TooltipProps['placement'];
-    width?: string;
-    className?: string;
-    showOnHover?: boolean;
-    disabled?: boolean;
-};
-export declare function TooltipWrapper({ children, tip, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipWrapper = TooltipWrapper;
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_1 = __importDefault(require("react"));
-const hooks_1 = require("../../core/hooks");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const tooltip = (0, hooks_1.useControl)(false);
-    const handleMouseEnter = () => {
-        if (showOnHover && !disabled) {
-            tooltip.handleOpen();
-        }
-    };
-    const handleMouseLeave = () => {
-        if (showOnHover) {
-            tooltip.handleClose();
-        }
-    };
-    const handleClick = () => {
-        if (showOnHover) {
-            tooltip.handleClose();
-        }
-    };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: tip, isOpen: tooltip.isOpened, placement: placement, width: width },
-        react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
-}
-const TooltipEventWrapper = styled_components_1.default.div `
-  display: contents;
-`;
-//# sourceMappingURL=TooltipWrapper.js.map