@redocly/theme 0.62.0-next.1 → 0.62.0-next.3

package/lib/components/UserMenu/LoginButton.d.ts

@@ -1,6 +1,12 @@
-import type { JSX } from 'react';
+import React from 'react';
+import type { ButtonVariant, ButtonSize } from '../../components/Button/Button';
 export type LoginButtonProps = {
     href: string;
     className?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label?: string;
+    labelTranslationKey?: string;
+    ['data-component-name']?: string;
 };
-export declare function LoginButton({ href, className }: LoginButtonProps): JSX.Element;
+export declare function LoginButton({ href, className, variant, size, label, labelTranslationKey, 'data-component-name': componentName, }: LoginButtonProps): React.JSX.Element;

package/lib/components/UserMenu/LoginButton.js

@@ -7,11 +7,12 @@ exports.LoginButton = LoginButton;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
-function LoginButton({ href, className }) {
+function LoginButton({ href, className, variant = 'primary', size = 'medium', label, labelTranslationKey = 'userMenu.login', 'data-component-name': componentName = 'UserMenu/LoginButton', }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
+    const buttonLabel = label || translate(labelTranslationKey, 'Login');
+    return (react_1.default.createElement("div", { "data-component-name": componentName, className: className },
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/core/types/hooks.d.ts

@@ -138,7 +138,19 @@ export type ThemeHooks = {
         items: BffCatalogEntityRevision[];
     };
     useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-    useTelemetry: () => Omit<AsyncApiRealmUI.Telemetry, 'init' | 'updateCloudEventData' | 'forceFlush' | 'startSpan' | 'constructCloudEvent' | 'sendToOtelService'>;
+    useTelemetry: () => Omit<AsyncApiRealmUI.Telemetry, 'init' | 'updateCloudEventData' | 'forceFlush' | 'startSpan' | 'constructCloudEvent' | 'sendToOtelService'> & {
+        send<TEventType extends AsyncApiRealmUI.EventType>(event: TEventType, data?: AsyncApiRealmUI.EventPayload<TEventType>): void;
+        /**
+         * @deprecated This method is deprecated. Use send(event, data) instead.
+         */
+        send<TEventType extends AsyncApiRealmUI.EventType>(params: AsyncApiRealmUI.SendEventParams<TEventType>): void;
+    };
+    /**
+     * @deprecated This hook is deprecated. Use `useTelemetry` instead.
+     */
+    useOtelTelemetry: () => {
+        send<TEventType extends AsyncApiRealmUI.EventType>(params: AsyncApiRealmUI.SendEventParams<TEventType>): void;
+    };
     useUserTeams: () => string[];
     usePageData: () => PageData | null;
     usePageSharedData: <T = unknown>(dataId: string) => T;

package/lib/markdoc/components/LoginButton/LoginButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { ButtonVariant, ButtonSize } from '../../../components/Button/Button';
+export type MarkdocLoginButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label?: string;
+    labelTranslationKey?: string;
+};
+export declare function LoginButton({ variant, size, label, labelTranslationKey, }: MarkdocLoginButtonProps): React.JSX.Element | null;

package/lib/markdoc/components/LoginButton/LoginButton.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginButton = LoginButton;
+const React = __importStar(require("react"));
+const hooks_1 = require("../../../core/hooks");
+const LoginButton_1 = require("../../../components/UserMenu/LoginButton");
+function LoginButton({ variant, size, label, labelTranslationKey, }) {
+    const { useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData, loginUrl } = useUserMenu();
+    if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+        return null;
+    }
+    return (React.createElement(LoginButton_1.LoginButton, { href: loginUrl || '', variant: variant, size: size, label: label, labelTranslationKey: labelTranslationKey, "data-component-name": "Markdoc/LoginButton" }));
+}
+//# sourceMappingURL=LoginButton.js.map

package/lib/markdoc/components/default.d.ts

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

package/lib/markdoc/components/default.js

@@ -37,4 +37,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"),
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 __exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
+__exportStar(require("../../markdoc/components/LoginButton/LoginButton"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -23,6 +23,7 @@ import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
+import { loginButton } from '../markdoc/tags/login-button';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -119,4 +120,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [loginButton.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -65,6 +65,7 @@ const code_toggle_1 = require("../markdoc/tags/code-toggle");
 const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
+const login_button_1 = require("../markdoc/tags/login-button");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -85,5 +86,6 @@ exports.tags = {
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
+    [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/login-button.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const loginButton: MarkdocSchemaWrapper;

package/lib/markdoc/tags/login-button.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loginButton = void 0;
+exports.loginButton = {
+    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',
+};
+//# sourceMappingURL=login-button.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-next.1",
+  "version": "0.62.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/UserMenu/LoginButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { JSX } from 'react';
+import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button/Button';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -8,25 +8,40 @@ import { Button } from '@redocly/theme/components/Button/Button';
 export type LoginButtonProps = {
   href: string;
   className?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label?: string;
+  labelTranslationKey?: string;
+  ['data-component-name']?: string;
 };
 
-export function LoginButton({ href, className }: LoginButtonProps): JSX.Element {
+export function LoginButton({
+  href,
+  className,
+  variant = 'primary',
+  size = 'medium',
+  label,
+  labelTranslationKey = 'userMenu.login',
+  'data-component-name': componentName = 'UserMenu/LoginButton',
+}: LoginButtonProps) {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
 
+  const buttonLabel = label || translate(labelTranslationKey, 'Login');
+
   return (
-    <div data-component-name="UserMenu/LoginButton" className={className}>
+    <div data-component-name={componentName} className={className}>
       <Button
-        data-translation-key="userMenu.login"
+        data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
         onClick={() => telemetry.sendLoginButtonClickedMessage()}
         data-testid="login-btn"
         extraClass={className}
-        variant="primary"
-        size="medium"
+        variant={variant}
+        size={size}
       >
-        {translate('userMenu.login', 'Login')}
+        {buttonLabel}
       </Button>
     </div>
   );

package/src/core/types/hooks.ts

@@ -177,7 +177,26 @@ export type ThemeHooks = {
     | 'startSpan'
     | 'constructCloudEvent'
     | 'sendToOtelService'
-  >;
+  > & {
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      event: TEventType,
+      data?: AsyncApiRealmUI.EventPayload<TEventType>,
+    ): void;
+    /**
+     * @deprecated This method is deprecated. Use send(event, data) instead.
+     */
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      params: AsyncApiRealmUI.SendEventParams<TEventType>,
+    ): void;
+  };
+  /**
+   * @deprecated This hook is deprecated. Use `useTelemetry` instead.
+   */
+  useOtelTelemetry: () => {
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      params: AsyncApiRealmUI.SendEventParams<TEventType>,
+    ): void;
+  };
   useUserTeams: () => string[];
   usePageData: () => PageData | null;
   usePageSharedData: <T = unknown>(dataId: string) => T;

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/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',
+};