@redocly/theme 0.56.0-next.3 → 0.56.0-next.4

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -14,6 +14,7 @@ const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRight
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const core_1 = require("../../../core");
+const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -25,8 +26,9 @@ function CatalogCard({ entity, catalogConfig }) {
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,
-                react_1.default.createElement(HeaderIconWrapper, null,
-                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: entity.type, placement: "bottom", className: "catalog" },
+                    react_1.default.createElement(HeaderIconWrapper, null,
+                        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type, defaultColor: true }))),
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
             react_1.default.createElement(CardDescription, null,

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

@@ -6,7 +6,5 @@ export type CatalogEntityProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     initialRelations: BffCatalogRelatedEntityList;
-    mainCatalogLabelTranslationKey?: string;
-    mainCatalogSlug?: string;
 };
-export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }: CatalogEntityProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,8 +18,9 @@ const Menu_1 = require("../../../components/Menu/Menu");
 const Button_1 = require("../../../components/Button/Button");
 const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations");
 const hooks_1 = require("../../../core/hooks");
-const SidebarActions_1 = require("../../SidebarActions/SidebarActions");
-function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }) {
+const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
+const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
+function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -38,14 +39,6 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 ] }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
-                    ...(mainCatalogLabelTranslationKey
-                        ? [
-                            {
-                                label: translate(mainCatalogLabelTranslationKey),
-                                link: `catalogs/${mainCatalogSlug}`,
-                            },
-                        ]
-                        : []),
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },
                     { label: entity.title },
                 ] }),
@@ -53,7 +46,7 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
                 react_1.default.createElement(CatalogTwoColumnsSection, null,
-                    react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity }),
+                    entity.type === 'data-schema' ? (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity })) : (react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity })),
                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
                 react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
 }

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties.js

@@ -14,12 +14,18 @@ const UserEmailProperty_1 = require("../../../../components/Catalog/CatalogEntit
 const DomainsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty");
 const OwnersProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty");
 const ContactProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty");
+const FormatProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty");
 const propertyRenderers = [
     {
         key: 'type',
         condition: (entity) => !!entity.type,
         component: EntityTypeProperty_1.EntityTypeProperty,
     },
+    {
+        key: 'format',
+        condition: (entity) => { var _a; return entity.type === 'data-schema' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType); },
+        component: FormatProperty_1.FormatProperty,
+    },
     {
         key: 'contact',
         condition: (entity) => { var _a, _b; return !!((_b = (_a = entity.contact) === null || _a === void 0 ? void 0 : _a.slack) === null || _b === void 0 ? void 0 : _b.channels); },
@@ -32,7 +38,7 @@ const propertyRenderers = [
     },
     {
         key: 'tags',
-        condition: (entity) => !!entity.tags,
+        condition: (entity) => { var _a; return !!((_a = entity.tags) === null || _a === void 0 ? void 0 : _a.length); },
         component: TagsProperty_1.TagsProperty,
     },
     {

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.js

@@ -37,6 +37,7 @@ const CardHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: var(--catalog-card-content-gap);
+  font-weight: var(--font-weight-medium);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;
@@ -44,5 +45,8 @@ const CardContent = styled_components_1.default.div `
   align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
+  color: var(--text-color-primary);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-lg);
 `;
 //# sourceMappingURL=CatalogEntityPropertyCard.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomainsProperty = DomainsProperty;
 const react_1 = __importDefault(require("react"));
 const GraphIcon_1 = require("../../../../icons/GraphIcon/GraphIcon");
-const theme_1 = require("../../../../index.js");
-const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 function DomainsProperty({ entity }) {
     const { domains = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null),
-                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(theme_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
+                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
                 domain.title)))) })));
 }

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty.js

@@ -8,13 +8,18 @@ const react_1 = __importDefault(require("react"));
 const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
 const utils_1 = require("../../../../core/utils");
 const CatalogEntityTypeIcon_1 = require("../../../../components/Catalog/CatalogEntityTypeIcon");
-const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const formatEntityType = (entityType) => {
+    return (0, utils_1.capitalize)(entityType.startsWith('api-')
+        ? entityType.replace('api-', 'API-').replace(/-/g, ' ')
+        : entityType.replace(/-/g, ' '));
+};
 function EntityTypeProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null),
                 "Entity type"), content: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
-                react_1.default.createElement("strong", null, (0, utils_1.capitalize)(entity.type))) })));
+                formatEntityType(entity.type)) })));
 }
 //# sourceMappingURL=EntityTypeProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type FormatPropertyProps = {
+    entity: BffCatalogEntity;
+};
+export declare function FormatProperty({ entity }: FormatPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatProperty = FormatProperty;
+const react_1 = __importDefault(require("react"));
+const NotesIcon_1 = require("../../../../icons/NotesIcon/NotesIcon");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function FormatProperty({ entity }) {
+    var _a, _b;
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(NotesIcon_1.NotesIcon, null),
+                "Format"), content: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Tag_1.Tag, { textTransform: "none", key: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType, style: { backgroundColor: 'var(--bg-color)' } }, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.specType)) })));
+}
+//# sourceMappingURL=FormatProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.js

@@ -5,11 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityDefaultRelations = CatalogEntityDefaultRelations;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityCell");
-const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
+const CatalogEntityTypeTag_1 = require("../../../../components/Catalog/CatalogEntityTypeTag");
 const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const columns = [
     {
@@ -23,7 +21,7 @@ const columns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, CatalogTableView_1.getEntityTagColor)(entity.type) }, entity.type)),
+        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         sortable: true,
         sortKey: 'type',
         width: '1fr',
@@ -39,8 +37,4 @@ function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery,
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
         react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: "Related entities", columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
 }
-const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  font-size: var(--font-size-base);
-  background-color: transparent;
-`;
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BffCatalogEntity } from '../../../core/types';
+export type CatalogEntitySchemaProps = {
+    entity: BffCatalogEntity;
+};
+export declare function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps): React.JSX.Element | null;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntitySchema = CatalogEntitySchema;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
+function CatalogEntitySchema({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
+    const metadata = Object.entries(metadataToShow);
+    if (!metadata.length) {
+        return null;
+    }
+    let parsedSchema;
+    try {
+        parsedSchema = JSON.parse(schema);
+    }
+    catch (error) {
+        return null;
+    }
+    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
+        react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
+        react_1.default.createElement(JsonViewer_1.JsonViewer, { data: parsedSchema, expandLevel: 3, title: "JSON" })));
+}
+const MetadataWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+const Heading = styled_components_1.default.h2 `
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;
+//# sourceMappingURL=CatalogEntitySchema.js.map

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

@@ -1,5 +1,6 @@
 import { JSX } from 'react';
 export type CatalogEntityIconProps = {
     entityType: string;
+    defaultColor?: boolean;
 };
-export declare function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element;
+export declare function CatalogEntityIcon({ entityType, defaultColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,36 +9,29 @@ const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
 const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
 const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
 const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const iconColor = 'var(--catalog-entity-icon-color)';
-const entityIconMap = {
-    service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-    domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
-    team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
-    user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
-    'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-    'data-schema': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-    'api-operation': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
+const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
+const getEntityIcon = ({ entityType, defaultColor }) => {
+    const iconColor = defaultColor
+        ? `var(--catalog-entity-icon-color)`
+        : getIconColor(entityType);
+    const entityIconMap = {
+        service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+        domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+        team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
+        user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
+        'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
+        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
+    };
+    return entityIconMap[entityType];
 };
-function CatalogEntityIcon({ entityType }) {
-    const key = entityType.toLowerCase();
-    switch (key) {
-        case 'service':
-            return entityIconMap.service;
-        case 'domain':
-            return entityIconMap.domain;
-        case 'team':
-            return entityIconMap.team;
-        case 'user':
-            return entityIconMap.user;
-        case 'api-description':
-            return entityIconMap['api-description'];
-        case 'data-schema':
-            return entityIconMap.service;
-        case 'api-operation':
-            return entityIconMap.service;
-        default:
-            const exhaustiveCheck = key;
-            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+function CatalogEntityIcon({ entityType, defaultColor = false, }) {
+    const icon = getEntityIcon({ entityType, defaultColor });
+    if (!icon) {
+        throw new Error(`Unhandled entity type: ${entityType}`);
     }
+    return icon;
 }
 //# sourceMappingURL=CatalogEntityIcon.js.map

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export type CatalogEntityTypeIconProps = {
     entityType: string;
+    defaultColor?: boolean;
 };
-export declare function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps): React.JSX.Element;
+export declare function CatalogEntityTypeIcon({ entityType, defaultColor, }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -6,27 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
-const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
-const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
-const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const getEntityIcon = (entityType) => {
-    const iconColor = 'var(--catalog-entity-icon-color)';
-    switch (entityType.toLowerCase()) {
-        case 'service':
-            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
-        case 'domain':
-            return react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor });
-        case 'team':
-            return react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor });
-        case 'user':
-            return react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor });
-        default:
-            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
-    }
-};
-function CatalogEntityTypeIcon({ entityType }) {
-    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon" }, getEntityIcon(entityType)));
+const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
+function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
@@ -35,8 +18,13 @@ const IconContainer = styled_components_1.default.div `
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: var(--catalog-table-icon-bg-color);
+  background-color: ${({ defaultColor, entityType }) => defaultColor
+    ? 'var(--catalog-entity-bg-color)'
+    : `var(--catalog-entity-bg-color-${entityType})`};
   flex-shrink: 0;
-  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+  border: 1px solid
+    ${({ defaultColor, entityType }) => defaultColor
+    ? 'var(--catalog-entity-border-color)'
+    : `var(--catalog-entity-border-color-${entityType})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

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

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+import { EntityType } from '../../core/types';
+export type CatalogEntityTypeTagProps = {
+    entityType: string;
+};
+export declare const getEntityTagColor: (type: EntityType) => string;
+export declare function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEntityTagColor = void 0;
+exports.CatalogEntityTypeTag = CatalogEntityTypeTag;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../components/Tag/Tag");
+const entityTagColorMap = {
+    service: 'blue',
+    domain: 'grass',
+    team: 'purple',
+    user: 'yellow',
+    'api-description': 'sky',
+    'data-schema': 'carrot',
+    'api-operation': 'raspberry',
+};
+const getEntityTagColor = (type) => {
+    const color = entityTagColorMap[type];
+    if (!color) {
+        throw new Error(`Unhandled entity type: ${type}`);
+    }
+    return color;
+};
+exports.getEntityTagColor = getEntityTagColor;
+function CatalogEntityTypeTag({ entityType }) {
+    return (react_1.default.createElement(EntityTypeTagWrapper, { color: (0, exports.getEntityTagColor)(entityType) }, entityType));
+}
+const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
+//# sourceMappingURL=CatalogEntityTypeTag.js.map

package/lib/components/Catalog/CatalogPageDescription.js

@@ -8,12 +8,12 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const H3_1 = require("../../components/Typography/H3");
-const CounterTag_1 = require("../Tags/CounterTag");
+const Tag_1 = require("../../components/Tag/Tag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
     return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
         react_1.default.createElement(CatalogTitleWrapper, null,
             react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
-            react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, tag)),
+            react_1.default.createElement(Tag_1.Tag, { borderless: true, textTransform: "none" }, tag)),
         react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));
 }
 const CatalogPageDescriptionWrapper = styled_components_1.default.div `

package/lib/components/Catalog/CatalogTableView/CatalogEntityCell.js

@@ -7,11 +7,10 @@ exports.CatalogEntityCell = CatalogEntityCell;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
+const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
 function CatalogEntityCell({ entity }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
-        react_1.default.createElement(IconContainer, null,
-            react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, defaultColor: true }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
@@ -24,17 +23,6 @@ const EntityTitleCellWrapper = styled_components_1.default.div `
   gap: var(--catalog-table-title-cell-gap);
   max-width: 100%;
 `;
-const IconContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
-  border-radius: var(--catalog-table-icon-border-radius);
-  background-color: var(--catalog-table-icon-bg-color);
-  flex-shrink: 0;
-  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
-`;
 const EntityTitleContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SortOption } from '../../../core/types';
-import { BaseEntity, CatalogColumn } from './CatalogTableView';
+import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
     setSortOption: (sortOption: SortOption | null) => void;

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { EntityType, SortOption } from '../../../core/types';
+import { SortOption } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -27,5 +27,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -3,38 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableView = exports.getEntityTagColor = void 0;
+exports.CatalogTableView = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../../components/Tag/Tag");
 const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableHeaderCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
-const getEntityTagColor = (type) => {
-    switch (type) {
-        case 'service':
-            return 'blue';
-        case 'domain':
-            return 'grass';
-        case 'team':
-            return 'purple';
-        case 'user':
-            return 'yellow';
-        case 'api-description':
-            return 'sky';
-        case 'data-schema':
-            return 'sky';
-        case 'api-operation':
-            return 'sky';
-        default:
-            const exhaustiveCheck = type;
-            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-    }
-};
-exports.getEntityTagColor = getEntityTagColor;
+const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
 const baseColumns = [
     {
         key: 'entity',
@@ -48,7 +26,7 @@ const baseColumns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
+        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         width: '2fr',
         minWidth: '120px',
         sortable: true,
@@ -88,11 +66,6 @@ const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, colu
         react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
 };
 exports.CatalogTableView = CatalogTableView;
-const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
 const CatalogTableWrapper = styled_components_1.default.div `
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { EntityType } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -23,5 +22,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, }: CatalogTableViewRowProps<T>) => React.JSX.Element;