@redocly/theme 0.64.0-next.1 → 0.64.0-next.2

package/src/index.ts

@@ -136,7 +136,7 @@ export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHe
 export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 export * from '@redocly/theme/components/Catalog/CatalogSelector';
 export * from '@redocly/theme/components/Catalog/CatalogSortButton';
-export * from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+export * from '@redocly/theme/components/Catalog/CatalogTags';
 export * from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
 export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton';
 export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';

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

@@ -64,7 +64,8 @@ export function Heading({
   const { usePageProps } = useThemeHooks();
   const pageProps = usePageProps();
 
-  const isMarkdownPage = pageProps?.metadata?.type === 'markdown';
+  const isMarkdownPage =
+    pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
 
   const linkEl = (
     <a

package/lib/components/Catalog/CatalogTagsWithTooltip.d.ts

@@ -1,10 +0,0 @@
-import { JSX } from 'react';
-import { TagProps } from '../../components/Tag/Tag';
-export type CatalogTagsWithTooltipProps = {
-    items: string[];
-    itemsToShow?: number;
-    showPlaceholder?: boolean;
-    tagProps?: TagProps;
-    showAvatars?: boolean;
-};
-export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, showAvatars, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -1,57 +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.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../core/constants");
-const Tag_1 = require("../../components/Tag/Tag");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
-const hooks_1 = require("../../core/hooks");
-const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
-function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    if (!items || items.length === 0) {
-        if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, translate('catalog.notConnected', 'Not connected')));
-        }
-        return null;
-    }
-    if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-            icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-        }), { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-            react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
-    }
-    const displayedItems = items.slice(0, itemsToShow);
-    const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
-        react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-                icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-            }), { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
-            react_1.default.createElement(MoreTagsButton, null,
-                "+",
-                remainingCount,
-                " ",
-                translate('catalog.tags.more', 'more')))));
-}
-const CatalogTagsWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-`;
-const MoreTagsButton = styled_components_1.default.span `
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;
-//# sourceMappingURL=CatalogTagsWithTooltip.js.map

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -1,101 +0,0 @@
-import React, { JSX } from 'react';
-import styled from 'styled-components';
-
-import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
-
-export type CatalogTagsWithTooltipProps = {
-  items: string[];
-  itemsToShow?: number;
-  showPlaceholder?: boolean;
-  tagProps?: TagProps;
-  showAvatars?: boolean;
-};
-
-export function CatalogTagsWithTooltip({
-  items,
-  itemsToShow = 1,
-  showPlaceholder = false,
-  showAvatars,
-  tagProps,
-}: CatalogTagsWithTooltipProps): JSX.Element | null {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-
-  if (!items || items.length === 0) {
-    if (showPlaceholder) {
-      return (
-        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {translate('catalog.notConnected', 'Not connected')}
-        </CatalogTagsNotConnectedWrapper>
-      );
-    }
-    return null;
-  }
-
-  if (items.length <= itemsToShow) {
-    return (
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {items.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-      </CatalogTagsWrapper>
-    );
-  }
-
-  const displayedItems = items.slice(0, itemsToShow);
-  const remainingCount = items.length - itemsToShow;
-
-  return (
-    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {displayedItems.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            textTransform="none"
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-
-        <MoreTagsButton>
-          +{remainingCount} {translate('catalog.tags.more', 'more')}
-        </MoreTagsButton>
-      </CatalogTagsWrapper>
-    </Tooltip>
-  );
-}
-
-const CatalogTagsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-const MoreTagsButton = styled.span`
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-
-const CatalogTagsNotConnectedWrapper = styled.span`
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;