@redocly/theme 0.61.1 → 0.62.0-custom.1

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

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -1,70 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-import type { JSX, ReactElement } from 'react';
-import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
-
-import { useControl } from '@redocly/theme/core/hooks';
-import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-
-export type TooltipWrapperProps = {
-  children: ReactElement;
-  tip: string;
-  placement?: TooltipProps['placement'];
-  width?: string;
-  className?: string;
-  showOnHover?: boolean;
-  disabled?: boolean;
-};
-
-export function TooltipWrapper({
-  children,
-  tip,
-  placement = 'top',
-  width = 'max-content',
-  className = '',
-  showOnHover = true,
-  disabled = false,
-}: TooltipWrapperProps): JSX.Element {
-  const tooltip = useControl(false);
-
-  const handleMouseEnter = (): void => {
-    if (showOnHover && !disabled) {
-      tooltip.handleOpen();
-    }
-  };
-
-  const handleMouseLeave = (): void => {
-    if (showOnHover) {
-      tooltip.handleClose();
-    }
-  };
-
-  const handleClick = (): void => {
-    if (showOnHover) {
-      tooltip.handleClose();
-    }
-  };
-
-  return (
-    <Tooltip
-      className={className}
-      tip={tip}
-      isOpen={tooltip.isOpened}
-      placement={placement}
-      width={width}
-    >
-      <TooltipEventWrapper
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleClick}
-      >
-        {children}
-      </TooltipEventWrapper>
-    </Tooltip>
-  );
-}
-
-const TooltipEventWrapper = styled.div`
-  display: contents;
-`;