@redocly/theme 0.56.0-next.0 → 0.56.0-next.10

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -25,7 +25,7 @@ function Breadcrumbs(props) {
                         payload: {
                             link: breadcrumb.link,
                             position: idx + 1,
-                            total_breadcrumbs: breadcrumbs.length,
+                            totalBreadcrumbs: breadcrumbs.length,
                         },
                     });
                 } }),

package/lib/components/Button/Button.js

@@ -82,6 +82,7 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
   background-color: var(--button-bg-color);
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
   box-shadow: var(--button-box-shadow);
+  backdrop-filter: var(--button-backdrop-filter, none);
 
   font-weight: var(--button-font-weight);
   font-size: var(--button-font-size);

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,
@@ -40,6 +42,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                             },
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
+                            textTransform: 'none',
                         } })),
                 react_1.default.createElement(MetadataColumn, null,
                     react_1.default.createElement(MetadataLabel, null, "Owners:"),
@@ -49,6 +52,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                                 borderRadius: 'var(--border-radius-xl)',
                             },
+                            textTransform: 'none',
                         } })))),
         react_1.default.createElement(Divider, null),
         react_1.default.createElement(CardFooter, null,
@@ -59,6 +63,7 @@ function CatalogCard({ entity, catalogConfig }) {
                     },
                     borderless: true,
                     color: 'grey',
+                    textTransform: 'none',
                 }, itemsToShow: 3 }),
             react_1.default.createElement(ArrowCircle, null,
                 react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "16px" }),
@@ -118,6 +123,7 @@ const CardContent = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 const CardFooter = styled_components_1.default.div `
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -129,8 +135,7 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.div `
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
+  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

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

@@ -1,2 +1,6 @@
 import { JSX } from 'react';
-export declare function CatalogEntitiesEmptyState(): JSX.Element;
+interface CatalogEntitiesEmptyStateProps {
+    listType?: 'default' | 'team';
+}
+export declare function CatalogEntitiesEmptyState({ listType, }: CatalogEntitiesEmptyStateProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogEntitiesEmptyState.js

@@ -6,11 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntitiesEmptyState = CatalogEntitiesEmptyState;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntitiesEmptyState() {
+const HexagonIcon_1 = require("../../icons/HexagonIcon/HexagonIcon");
+function CatalogEntitiesEmptyState({ listType = 'default', }) {
+    if (listType === 'team') {
+        return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
+            react_1.default.createElement(EmptyStateIconWrapper, null,
+                react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
+            react_1.default.createElement(EmptyStateHeader, null, "No team members yet"),
+            react_1.default.createElement(EmptyStateText, null, "Your team members will appear here"),
+            react_1.default.createElement(EmptyStateText, null, "once they've been added to the team.")));
+    }
     return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
-        react_1.default.createElement(EmptyStateHeader, null, "No entities yet"),
-        react_1.default.createElement(EmptyStateText, null, "Start by adding your first entity to"),
-        react_1.default.createElement(EmptyStateText, null, "begin building your catalog.")));
+        react_1.default.createElement(EmptyStateIconWrapper, null,
+            react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
+        react_1.default.createElement(EmptyStateHeader, null, "No entities found"),
+        react_1.default.createElement(EmptyStateText, null, "Try adjusting your search criteria or"),
+        react_1.default.createElement(EmptyStateText, null, "check back later for new additions.")));
 }
 const EmptyStateWrapper = styled_components_1.default.div `
   display: flex;
@@ -21,6 +32,16 @@ const EmptyStateWrapper = styled_components_1.default.div `
   text-align: center;
   min-height: var(--catalog-empty-state-min-height);
 `;
+const EmptyStateIconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-warm-grey-2);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: var(--spacing-xxs);
+`;
 const EmptyStateHeader = styled_components_1.default.p `
   color: var(--catalog-empty-state-header-text-color);
   font-size: var(--catalog-empty-state-header-font-size);

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,14 +18,26 @@ 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");
+const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
+function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-    const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } = useCatalog();
+    const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick, searchQuery, setSearchQuery, } = useCatalog();
+    const renderEntityContent = () => {
+        switch (entity.type) {
+            case 'data-schema':
+                return react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity });
+            case 'api-operation':
+                return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
+            default:
+                return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
+        }
+    };
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
         react_1.default.createElement(CatalogSidebar, { collapsed: collapsedSidebar, header: react_1.default.createElement(BackLink, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", "data-component-name": "Sidebar/BackButton", to: linkToMainCatalog }, collapsedSidebar ? ('') : (react_1.default.createElement("div", { "data-translation-key": "sidebar.menu.backLabel" }, translate('sidebar.menu.backLabel')))), menu: react_1.default.createElement(Menu_1.Menu, { items: [
                     {
@@ -38,14 +50,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,9 +57,9 @@ 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 }),
+                    renderEntityContent(),
                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
-                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
+                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);

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

@@ -1,7 +1,9 @@
 import { ReactNode, JSX } from 'react';
 export type CatalogEntityInfoBarProps = {
     leftContent: ReactNode;
-    rightContent: ReactNode;
+    rightContent?: ReactNode;
     withSeparator?: boolean;
+    hoverEffect?: boolean;
+    isCodeBlock?: boolean;
 };
-export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, }: CatalogEntityInfoBarProps): JSX.Element;
+export declare function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator, hoverEffect, isCodeBlock, }: CatalogEntityInfoBarProps): JSX.Element;

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityInfoBar = CatalogEntityInfoBar;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, }) {
-    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar" },
+function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, isCodeBlock = false, }) {
+    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", hoverEffect: hoverEffect },
         react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
-        react_1.default.createElement(RightColumn, null, rightContent)));
+        rightContent && react_1.default.createElement(RightColumn, { isCodeBlock: isCodeBlock }, rightContent)));
 }
 const InfoBarWrapper = styled_components_1.default.div `
   display: grid;
@@ -18,7 +18,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   align-items: center;
 
   color: var(--catalog-card-text-color, inherit);
-  background-color: var(--catalog-card-bg-color, white);
+  background-color: var(--catalog-card-bg-color);
   border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
     var(--catalog-card-border-color);
   border-radius: var(--catalog-card-border-radius);
@@ -26,9 +26,13 @@ const InfoBarWrapper = styled_components_1.default.div `
   height: 100%;
   padding: var(--catalog-card-gap);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) => hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+      background-color: var(--bg-color-active);
+    }
+  `}
 `;
 const LeftColumn = styled_components_1.default.div `
   font-weight: var(--font-weight-medium);
@@ -38,6 +42,9 @@ const LeftColumn = styled_components_1.default.div `
   justify-self: start;
   text-align: left;
   border-right: ${({ withSeparator }) => withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 const RightColumn = styled_components_1.default.div `
   color: var(--catalog-metadata-value-color);
@@ -45,5 +52,6 @@ const RightColumn = styled_components_1.default.div `
   grid-area: right;
   justify-self: end;
   text-align: right;
+  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
 `;
 //# sourceMappingURL=CatalogEntityInfoBar.js.map

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

@@ -7,7 +7,7 @@ exports.CatalogEntityLinks = CatalogEntityLinks;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const LaunchIcon_1 = require("../../../icons/LaunchIcon/LaunchIcon");
-const DocumentIcon_1 = require("../../../icons/DocumentIcon/DocumentIcon");
+const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const Link_1 = require("../../../components/Link/Link");
 function CatalogEntityLinks({ entity }) {
@@ -17,11 +17,11 @@ function CatalogEntityLinks({ entity }) {
     }
     return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityLinks" },
         react_1.default.createElement(Heading, null, "Links"),
-        links.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
-                react_1.default.createElement(DocumentIcon_1.DocumentIcon, null),
-                " ",
-                value.label), rightContent: react_1.default.createElement(Link_1.Link, { color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
-                react_1.default.createElement(LaunchIcon_1.LaunchIcon, null)), withSeparator: false })))));
+        links.map(([key, value]) => (react_1.default.createElement(Link_1.Link, { key: key, color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
+            react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
+                    react_1.default.createElement(LinkIcon_1.LinkIcon, null),
+                    " ",
+                    value.label), rightContent: react_1.default.createElement(LaunchIcon_1.LaunchIcon, null), withSeparator: false }))))));
 }
 const LinksWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -41,10 +41,20 @@ exports.CatalogEntityMetadata = CatalogEntityMetadata;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const utils_1 = require("../../../core/utils");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const MAX_INITIAL_ITEMS = 4;
+function renderMetadataValue(value) {
+    if ((0, utils_1.isPlainObject)(value)) {
+        return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, hideHeader: true });
+    }
+    if (Array.isArray(value)) {
+        return (react_1.default.createElement(ArrayWrapper, null, value.map((item, index) => (react_1.default.createElement("div", { key: index }, (0, utils_1.isPlainObject)(item) ? (react_1.default.createElement(JsonViewerWrapper, { data: item, expandLevel: 3, hideHeader: true })) : (react_1.default.createElement("span", null, String(item))))))));
+    }
+    return react_1.default.createElement("span", null, String(value));
+}
 function CatalogEntityMetadata({ entity }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -60,12 +70,15 @@ function CatalogEntityMetadata({ entity }) {
         react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
         visibleMetadata.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
                 (0, utils_1.capitalize)(key),
-                ":"), rightContent: react_1.default.createElement(Value, null, value) }))),
+                ":"), rightContent: react_1.default.createElement(Value, null, renderMetadataValue(value)), hoverEffect: false, isCodeBlock: (0, utils_1.isPlainObject)(value) || Array.isArray(value) }))),
         hasMoreItems && (react_1.default.createElement(ShowMoreButton, { onClick: () => setIsOn(!isOn) },
             isOn ? 'Show less' : 'Show more',
             " ",
             react_1.default.createElement(ChevronIcon, { "$isExpanded": isOn })))));
 }
+const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonViewer) `
+  text-align: left;
+`;
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
@@ -83,6 +96,10 @@ const Value = styled_components_1.default.span `
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
 `;
+const ArrayWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
 const Heading = styled_components_1.default.h2 `
   margin-bottom: var(--spacing-base);
   margin-top: 0;

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityMethodAndPath = CatalogEntityMethodAndPath;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
+const HttpTag_1 = require("../../../components/Tags/HttpTag");
+function CatalogEntityMethodAndPath({ entity }) {
+    var _a, _b;
+    const method = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.method;
+    const path = (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.path;
+    if (!method || !path) {
+        return null;
+    }
+    return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMethodAndPath" },
+        react_1.default.createElement(Heading, null, "Method & Path"),
+        react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
+                react_1.default.createElement(MethodTag, { color: method.toLowerCase() }, method),
+                path), withSeparator: false })));
+}
+const MethodTag = (0, styled_components_1.default)(HttpTag_1.HttpTag) `
+  width: auto;
+  justify-content: start;
+  margin-right: var(--spacing-xxs);
+`;
+const LinksWrapper = 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 Label = styled_components_1.default.div `
+  display: flex;
+`;
+const Heading = styled_components_1.default.h2 `
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;
+//# sourceMappingURL=CatalogEntityMethodAndPath.js.map

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ApiDescriptionProperty = ApiDescriptionProperty;
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
 const theme_1 = require("../../../../index.js");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 function ApiDescriptionProperty({ entity }) {
@@ -18,8 +19,14 @@ function ApiDescriptionProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(theme_1.DocumentIcon, null),
-                translate('catalog.entity.properties.apiDescription.title')), content: react_1.default.createElement(theme_1.Tag, null, descriptionFile), onClick: () => {
+                translate('catalog.entity.properties.apiDescription.title')), content: react_1.default.createElement(theme_1.Tag, { textTransform: "none" },
+                react_1.default.createElement(DescriptionFile, null, descriptionFile)), onClick: () => {
                 navigate(`${pathPrefix}/${descriptionFile}`);
             } })));
 }
+const DescriptionFile = styled_components_1.default.span `
+  word-break: break-all;
+  overflow-wrap: break-word;
+  white-space: normal;
+`;
 //# sourceMappingURL=ApiDescriptionProperty.js.map

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.d.ts

@@ -3,5 +3,6 @@ export type CatalogEntityPropertyCardProps = {
     header: ReactNode;
     content: ReactNode;
     onClick?: () => void;
+    hoverEffect?: boolean;
 };
-export declare function CatalogEntityPropertyCard({ header, content, onClick, }: CatalogEntityPropertyCardProps): JSX.Element;
+export declare function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect, }: CatalogEntityPropertyCardProps): JSX.Element;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityPropertyCard = CatalogEntityPropertyCard;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function CatalogEntityPropertyCard({ header, content, onClick, }) {
-    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick },
+function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect = true, }) {
+    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick, hoverEffect: hoverEffect },
         react_1.default.createElement(CardHeader, null, header),
         react_1.default.createElement(CardContent, null, content)));
 }
@@ -24,9 +24,12 @@ const CatalogEntityPropertyWrapper = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   gap: var(--catalog-card-content-gap-vertical);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) => hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+    }
+  `}
 
   ${(props) => props.onClick &&
     `
@@ -37,6 +40,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 +48,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/ContactProperty.js

@@ -14,6 +14,6 @@ function ContactProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SlackIcon_1.SlackIcon, null),
-                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, style: { backgroundColor: 'var(--bg-color)' } }, channel.name)))) })));
+                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, channel.name)))) })));
 }
 //# sourceMappingURL=ContactProperty.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)), hoverEffect: false })));
 }
 //# 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)), hoverEffect: false })));
+}
+//# sourceMappingURL=FormatProperty.js.map

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

@@ -17,7 +17,7 @@ function GitProperty({ entity }) {
                 "Repositories"), content: react_1.default.createElement(react_1.default.Fragment, null, git === null || git === void 0 ? void 0 : git.map((repo) => {
                 const url = new URL(repo);
                 const repoName = (0, utils_1.removeLeadingSlash)(url.pathname);
-                return (react_1.default.createElement(Tag_1.Tag, { key: repo, style: { backgroundColor: 'var(--bg-color)' } }, repoName));
+                return (react_1.default.createElement(Tag_1.Tag, { key: repo, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, repoName));
             })) })));
 }
 //# sourceMappingURL=GitProperty.js.map

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

@@ -19,6 +19,7 @@ function TagsProperty({ entity }) {
                     },
                     borderless: true,
                     color: 'grey',
-                } }) })));
+                    textTransform: 'none',
+                } }), hoverEffect: false })));
 }
 //# sourceMappingURL=TagsProperty.js.map