@redocly/theme 0.56.0-rc.2 → 0.56.0

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

@@ -13,13 +13,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
+    external?: boolean;
     icon?: JSX.Element;
     iconPosition?: 'left' | 'right';
     title?: string;
     tabIndex?: number;
     onClick?: (e?: any) => void;
     ref?: React.Ref<HTMLButtonElement>;
-    type?: 'button' | 'submit' | 'reset';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;
 export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, ButtonProps, never>;

package/lib/components/Button/Button.js

@@ -55,6 +55,7 @@ const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
 `;
 function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', }) {
     const classNames = [
+        'button',
         extraClass,
         `button-tone-${tone}`,
         `button-variant-${variant}`,
@@ -82,6 +83,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);
@@ -160,7 +162,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { ButtonSize } from '../../components/Button/Button';
+type ButtonGroupVariant = 'outlined';
+type ButtonGroupProps = {
+    variant?: ButtonGroupVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
+export {};

package/lib/components/Button/ButtonGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = ButtonGroup;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function ButtonGroup(props) {
+    const { variant = 'outlined', className = '', children, size = 'medium' } = props;
+    return (react_1.default.createElement(ButtonGroupWrapper, { "data-component-name": "Button/ButtonGroup", className: `button-group-${variant} button-group-size-${size} ${className}` }, children));
+}
+const ButtonGroupWrapper = styled_components_1.default.div `
+  display: flex;
+  line-height: var(--button-line-height);
+
+  .button {
+    border-radius: 0;
+  }
+
+  & > .button:first-child,
+  *:first-child > .button {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+  }
+
+  & > .button:last-child,
+  *:last-child > .button {
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+  }
+
+  & > .button:not(:first-child),
+  *:not(:first-child) > .button {
+    border-left: none;
+  }
+`;
+//# sourceMappingURL=ButtonGroup.js.map

package/lib/components/Button/variables.js

@@ -93,9 +93,12 @@ exports.button = (0, styled_components_1.css) `
     * @tokens Button size
     */
 
-  .button-size-small {
+  .button-size-small,
+  .button-group-size-small .button {
+    --button-font-size: var(--font-size-base);
     --button-border-radius: var(--border-radius);
     --button-padding: 1px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
     
     --button-icon-size: 14px;
     --button-icon-padding: 5px; /* Padding for small buttons with only icon */
@@ -103,11 +106,25 @@ exports.button = (0, styled_components_1.css) `
     --button-icon-right-padding: 1px 10px 1px var(--spacing-sm); /* Padding for small buttons with icon on the right */
   }
 
-  .button-size-large {
+  .button-size-medium,
+  .button-group-size-medium .button {
+    --button-font-size: var(--font-size-base);
+    --button-border-radius: var(--border-radius-md);
+    --button-padding: 5px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
+
+    --button-icon-size: 16px;
+    --button-icon-padding: var(--spacing-xs); /* Padding for buttons with only icon */
+    --button-icon-left-padding: 5px var(--spacing-base) 5px 14px; /* Padding for buttons with icon on the left */
+    --button-icon-right-padding: 5px 14px 5px var(--spacing-base); /* Padding for buttons with icon on the right */
+  }
+
+  .button-size-large,
+  .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-line-height: var(--line-height-lg); // @presenter LineHeight
-    --border-radius: var(--border-radius-lg);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: var(--spacing-xs) var(--spacing-md);
+    --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
     --button-icon-size: 18px;
     --button-icon-padding: 11px; /* Padding for large buttons with only icon */
@@ -155,7 +172,8 @@ exports.button = (0, styled_components_1.css) `
     --button-border-color-danger-pressed: transparent;
   }
 
-  .button-variant-outlined {
+  .button-variant-outlined,
+  .button-group-outlined .button {
     --button-color: var(--button-content-color-custom); // @presenter Color
     --button-color-hover: var(--button-content-color-custom-hover); // @presenter Color
     --button-color-active: var(--button-content-color-custom-hover); // @presenter Color
@@ -165,6 +183,15 @@ exports.button = (0, styled_components_1.css) `
     --button-bg-color-disabled: transparent; // @presenter Color
     --button-border-width: 1px; 
     --button-border-width-disabled: 1px;
+    --button-bg-color: transparent; // @presenter Color
+    --button-border-color-disabled: var(--color-warm-grey-2); // @presenter Color
+    --button-border-color-danger: var(--color-raspberry-6); // @presenter Color
+    --button-border-color-danger-hover: var(--color-raspberry-7); // @presenter Color
+    --button-border-color-danger-pressed: var(--color-raspberry-8); // @presenter Color
+  }
+
+  .button-group-outlined .button {
+    --button-bg-color-hover: var(--color-hover-base); // @presenter Color
   }
 
   .button-variant-text {

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

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core';
+import { CatalogSwitcherItem } from '../../core/types/catalog';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];

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

@@ -13,20 +13,22 @@ const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon")
 const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
-const core_1 = require("../../../core");
+const utils_1 = require("../../../core/utils");
+const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
             window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
             telemetry.send({ type: 'catalog_item.clicked' });
         } },
         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;