@redocly/theme 0.63.0-next.5 → 0.63.0-next.6

package/lib/components/Accordion/variables.js

@@ -30,7 +30,7 @@ exports.accordion = (0, styled_components_1.css) `
   --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
   --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
   --accordion-header-text-color: var(--text-color-primary);
-  --accordion-header-padding: var(--spacing-sm) var(--spacing-base);
+  --accordion-header-padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-base);
   --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
   --accordion-header-bg-color: transparent; // @presenter Color
   --accordion-header-border: none; // @presenter Border
@@ -43,7 +43,7 @@ exports.accordion = (0, styled_components_1.css) `
   --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
   --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --accordion-body-text-color: var(--text-color-secondary);
-  --accordion-body-padding: 0 var(--spacing-xs) var(--spacing-sm);
+  --accordion-body-padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-base);
   --accordion-body-bg-color: transparent; // @presenter Color
   --accordion-body-border: none; // @presenter Border
 

package/lib/components/Catalog/Catalog.js

@@ -1,10 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Catalog = Catalog;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -18,20 +51,22 @@ const FilterInput_1 = require("../../components/Filter/FilterInput");
 const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
 const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
 const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
-const customCatalogOptionsCasing = (str) => {
-    const trimmedStr = str.trim();
-    if (!trimmedStr)
-        return trimmedStr;
-    const words = trimmedStr.split(/[\s-_]+/);
-    return words
-        .map((word, index) => {
-        if (index === 0 && word.toLowerCase() === 'api') {
-            return 'API';
+const CatalogMobileTopBar_1 = require("../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar");
+const CatalogMobileFiltersPanelOverlay_1 = require("../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay");
+function getActiveFiltersCount(filters, filterTerm) {
+    const filterOptionsCount = filters.reduce((sum, filter) => {
+        if (filter.selectedOptions instanceof Set)
+            return sum + filter.selectedOptions.size;
+        if ((0, utils_1.isFromToSelectedOptions)(filter.selectedOptions) &&
+            filter.selectedOptions.from &&
+            filter.selectedOptions.to) {
+            return sum + 1;
         }
-        return word[0].toUpperCase() + word.slice(1);
-    })
-        .join(' ');
-};
+        return sum;
+    }, 0);
+    const searchTermCount = filterTerm.trim() ? 1 : 0;
+    return searchTermCount + filterOptionsCount;
+}
 function Catalog(props) {
     const { catalogConfig, filters: serverFilters, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -42,35 +77,46 @@ function Catalog(props) {
         serverFilters,
         initialViewMode,
     });
+    const [mobileFiltersPanelOpen, setMobileFiltersPanelOpen] = (0, react_1.useState)(false);
+    const activeFiltersCount = (0, react_1.useMemo)(() => getActiveFiltersCount(filters, searchQuery), [filters, searchQuery]);
+    const filterContent = (react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { catalogSelector: react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, onChange: () => {
+                setSearchQuery('');
+                setSortOption(null);
+            } }), filters: filters, filterTerm: searchQuery, filterValuesCasing: utils_1.customCatalogOptionsCasing, onClear: () => {
+            setSearchQuery('');
+        }, searchInput: react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-filter-search-input" }) }));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
-            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, onChange: () => {
-                        setSearchQuery('');
-                        setSortOption(null);
-                    } })), menu: react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { filters: filters, filterTerm: searchQuery, filterValuesCasing: customCatalogOptionsCasing, onClear: () => {
-                        setSearchQuery('');
-                    } }), 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(CatalogPageDescription, null,
-                    react_1.default.createElement(CatalogTitleWrapper, null,
-                        react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
-                            (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
-                                ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
-                                : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
-                            ' '),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
-                    react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey))),
-                react_1.default.createElement(CatalogActionsRow, null,
-                    react_1.default.createElement(CatalogSearchInputWrapper, null,
-                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
-                    react_1.default.createElement(CatalogControlsWrapper, null,
-                        react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
-                        react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),
-                react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))));
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, menu: filterContent, footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(CatalogContentWrapper, null,
+                react_1.default.createElement(CatalogMobileTopBar_1.CatalogMobileTopBar, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, activeFiltersCount: activeFiltersCount, setSortOption: setSortOption, sortOption: sortOption, viewMode: viewMode, setViewMode: setViewMode }),
+                mobileFiltersPanelOpen ? (react_1.default.createElement(CatalogMobileFiltersPanelOverlay_1.CatalogMobileFiltersPanelOverlay, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen, filterContent: filterContent })) : null,
+                react_1.default.createElement(CatalogContentScrollWrapper, null,
+                    react_1.default.createElement(CatalogPageContentWrapper, null,
+                        react_1.default.createElement(CatalogTitleWrapper, null,
+                            react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
+                                (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                    ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                    : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
+                                ' '),
+                            react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
+                        react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey)),
+                        react_1.default.createElement(CatalogActionsRow, null,
+                            react_1.default.createElement(CatalogSearchInputWrapper, null,
+                                react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
+                            react_1.default.createElement(CatalogControlsWrapper, null,
+                                react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+                                react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),
+                        react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))))));
 }
 const CatalogActionsRow = styled_components_1.default.div `
   display: flex;
   align-items: center;
+  margin-bottom: var(--spacing-xl);
+
+  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
+    display: none;
+  }
 `;
 const CatalogControlsWrapper = styled_components_1.default.div `
   display: var(--catalog-controls-wrapper-display);
@@ -78,14 +124,28 @@ const CatalogControlsWrapper = styled_components_1.default.div `
   margin-left: var(--catalog-controls-wrapper-margin-left);
   gap: var(--catalog-controls-wrapper-gap);
 `;
-const CatalogPageContent = styled_components_1.default.main `
+const CatalogContentWrapper = styled_components_1.default.div `
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const CatalogContentScrollWrapper = styled_components_1.default.div `
   flex: 1;
-  width: var(--catalog-page-content-width-mobile);
-  margin: var(--catalog-page-content-margin-mobile);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+const CatalogPageContentWrapper = styled_components_1.default.main `
+  width: var(--catalog-page-content-width);
+  margin: var(--catalog-page-content-margin);
+  padding: var(--catalog-page-padding);
+  max-width: 1072px;
 
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    width: var(--catalog-page-content-width-desktop);
-    padding: var(--catalog-page-padding);
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    padding: var(--catalog-page-padding-mobile);
   }
 `;
 const CatalogTitleWrapper = styled_components_1.default.div `
@@ -112,8 +172,10 @@ const CatalogDescription = styled_components_1.default.p `
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);
 
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   font-weight: var(--catalog-page-wrapper-font-weight);
   color: var(--catalog-page-wrapper-text-color);
@@ -138,16 +200,13 @@ const CatalogPageWrapper = styled_components_1.default.div `
     padding: 0;
   }
 `;
-const CatalogPageDescription = styled_components_1.default.div `
-  display: var(--catalog-page-description-display-mobile);
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: var(--catalog-page-description-display-desktop);
-  }
-`;
 const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   display: var(--catalog-sidebar-display-mobile);
 
+  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
+    display: none;
+  }
+
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: var(--catalog-sidebar-display-desktop);
   }
@@ -158,6 +217,11 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
 `;
 const CatalogSearchInputWrapper = styled_components_1.default.div `
+  display: none;
   width: var(--catalog-search-input-wrapper-width);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: block;
+  }
 `;
 //# sourceMappingURL=Catalog.js.map

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function CatalogAvatar({ value, size, }: {
+    value: string;
+    size: 'small' | 'medium' | 'large';
+}): React.JSX.Element;

package/lib/components/Catalog/CatalogAvatar.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogAvatar = CatalogAvatar;
+const styled_components_1 = __importStar(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const extractInitials = (value) => {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return '';
+    if (trimmed.split('-').length > 1) {
+        return trimmed
+            .split('-')
+            .filter((part) => part.length > 0)
+            .map((part) => part[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    }
+    const initials = trimmed.split(' ').map((n) => n[0]);
+    if (initials.length === 1) {
+        return initials[0];
+    }
+    return initials[0] + initials[initials.length - 1];
+};
+function CatalogAvatar({ value, size, }) {
+    return (react_1.default.createElement(CatalogAvatarWrapper, { "data-component-name": "Catalog/CatalogAvatar", size: size }, extractInitials(value)));
+}
+const CatalogAvatarWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--catalog-avatar-bg-color);
+  flex-shrink: 0;
+  font-weight: var(--catalog-avatar-font-weight);
+  line-height: var(--catalog-avatar-line-height);
+  ${({ size }) => SIZES[size]};
+`;
+const SIZES = {
+    small: (0, styled_components_1.css) `
+    width: var(--catalog-avatar-small-size);
+    height: var(--catalog-avatar-small-size);
+    font-size: var(--catalog-avatar-font-size-small);
+  `,
+    medium: (0, styled_components_1.css) `
+    width: var(--catalog-avatar-medium-size);
+    height: var(--catalog-avatar-medium-size);
+    font-size: var(--catalog-avatar-font-size-medium);
+  `,
+    large: (0, styled_components_1.css) `
+    width: var(--catalog-avatar-large-size);
+    height: var(--catalog-avatar-large-size);
+    font-size: var(--catalog-avatar-font-size-large);
+  `,
+};
+//# sourceMappingURL=CatalogAvatar.js.map

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

@@ -15,7 +15,7 @@ const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTag
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const utils_1 = require("../../../core/utils");
 function CatalogCard({ entity, catalogConfig }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
@@ -32,30 +32,34 @@ function CatalogCard({ entity, catalogConfig }) {
             react_1.default.createElement(CardDescription, null,
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
-                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : '')),
+                react_1.default.createElement(CardSummary, null,
+                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : ''))),
             react_1.default.createElement(CardMetadataSection, null,
                 react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.domains', 'Domains:')),
-                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], tagProps: {
+                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], showPlaceholder: true, tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                             },
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
                             textTransform: 'none',
+                            variant: 'outline',
                         } })),
                 react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.owners', 'Owners:')),
-                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], tagProps: {
+                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], showPlaceholder: true, showAvatars: true, tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                                 borderRadius: 'var(--border-radius-xl)',
+                                paddingLeft: 'var(--catalog-card-metadata-owner-tag-left-padding)',
                             },
                             textTransform: 'none',
+                            variant: 'outline',
                         } })))),
         react_1.default.createElement(Divider, null),
-        react_1.default.createElement(CardFooter, null,
+        react_1.default.createElement(CardFooter, { hasTags: !!((_d = entity.tags) === null || _d === void 0 ? void 0 : _d.length) },
             react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--catalog-card-font-size)',
@@ -123,6 +127,7 @@ const ArrowCircle = styled_components_1.default.div `
   }
 `;
 const CardContent = styled_components_1.default.div `
+  min-width: 0;
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   height: 100%;
 `;
@@ -130,7 +135,7 @@ const CardFooter = styled_components_1.default.div `
   height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hasTags }) => (hasTags ? 'space-between' : 'flex-end')};
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 const Divider = styled_components_1.default.div `
@@ -139,6 +144,8 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.div `
+  min-width: 0;
+  max-width: 100%;
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
@@ -171,7 +178,19 @@ const CardTitle = styled_components_1.default.div `
   font-size: var(--catalog-card-title-font-size);
   font-weight: var(--catalog-card-title-font-weight);
   line-height: var(--catalog-card-title-line-height);
-  margin: 0;
+  height: var(--catalog-card-title-height);
+  display: var(--catalog-card-title-display);
+  align-items: var(--catalog-card-title-align-items);
+  margin-bottom: var(--catalog-card-title-margin-bottom);
+`;
+const CardSummary = styled_components_1.default.div `
+  min-width: 0;
+  font-size: var(--catalog-card-summary-font-size);
+  font-weight: var(--catalog-card-summary-font-weight);
+  line-height: var(--catalog-card-summary-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 const CardDescription = styled_components_1.default.div `
   margin-top: var(--catalog-card-description-margin-top);

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

@@ -6,15 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogCardView = CatalogCardView;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../../core/utils");
 const CatalogCard_1 = require("../../../components/Catalog/CatalogCardView/CatalogCard");
 function CatalogCardView({ entities, catalogConfig }) {
     return (react_1.default.createElement(CatalogCardsWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCardView" }, entities.map((entity) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: entity.id, entity: entity, catalogConfig: catalogConfig })))));
 }
 const CatalogCardsWrapper = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
   gap: var(--catalog-cards-group-gap);
   margin-bottom: var(--spacing-xl);
-  margin-top: var(--spacing-xl);
+  overflow-x: auto;
+
+  @media screen and (min-width: ${utils_1.breakpoints.small}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
+    margin-top: 0;
+  }
 `;
 //# sourceMappingURL=CatalogCardView.js.map

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

@@ -72,6 +72,22 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
                         react_1.default.createElement(react_router_dom_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `
+  max-width: var(--catalog-entity-max-width);
+  margin: var(--catalog-entity-margin);
+  padding: var(--catalog-entity-padding);
+
+  @media screen and (max-width: ${utils_1.breakpoints.large}) {
+    padding: var(--catalog-entity-padding-large);
+  }
+
+  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
+    padding: var(--catalog-entity-padding-medium);
+  }
+
+  @media screen and (max-width: ${utils_1.breakpoints.small}) {
+    padding: var(--catalog-entity-padding-small);
+  }
+
   --sidebar-width: var(--catalog-sidebar-width);
   --link-color-primary: var(--breadcrumbs-text-color);
 
@@ -85,32 +101,16 @@ const CatalogPageWrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
 
-  hr {
-    border: 0;
-    width: calc(100% + 48px);
-    margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-color-primary);
-  }
   a:not([role='button']) {
     text-decoration: none;
     color: var(--link-color-primary);
     font-weight: var(--link-font-weight);
   }
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    flex-direction: row;
-    padding: 0;
-  }
 `;
 const CatalogPageContent = styled_components_1.default.main `
   flex: 1;
-  width: 90%;
+  width: 100%;
   margin: 0 auto;
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    width: 100%;
-    padding: var(--catalog-page-padding);
-  }
 `;
 const CatalogEntityPageWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -6,28 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsLinkedNode = CatalogEntityRelationsLinkedNode;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@xyflow/react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
 const Link_1 = require("../../../../components/Link/Link");
 const catalog_1 = require("../../../../core/constants/catalog");
+const CatalogEntityRelationsNodeContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent");
 function CatalogEntityRelationsLinkedNode({ label, entityType, className, to, }) {
-    return (react_1.default.createElement(RelationsLinkedNodeWrapper, { className: className, to: to, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode" },
-        react_1.default.createElement(react_2.Handle, { type: catalog_1.GraphHandleType.Target, position: react_2.Position.Top, id: catalog_1.GraphHandleType.Target }),
-        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false }),
-        react_1.default.createElement("div", null, label)));
+    return (react_1.default.createElement(Link_1.Link, { className: className, to: to, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode" },
+        react_1.default.createElement(CatalogEntityRelationsNodeContent_1.CatalogEntityRelationsNodeContent, { entityType: entityType, label: label, isRoot: false }),
+        react_1.default.createElement(react_2.Handle, { type: catalog_1.GraphHandleType.Target, position: react_2.Position.Top, id: catalog_1.GraphHandleType.Target })));
 }
-const RelationsLinkedNodeWrapper = (0, styled_components_1.default)(Link_1.Link) `
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-entity-relations-node-gap);
-  padding: var(--catalog-entity-relations-node-padding);
-  border-radius: var(--catalog-entity-relations-node-border-radius);
-  font-style: normal;
-  font-weight: var(--catalog-entity-relations-node-font-weight);
-  background: var(--catalog-entity-relations-node-bg-color);
-  color: var(--catalog-entity-relations-node-text-color);
-  border: var(--catalog-entity-relations-node-border-width)
-    var(--catalog-entity-relations-node-border-style)
-    var(--catalog-entity-relations-node-border-color);
-`;
 //# sourceMappingURL=CatalogEntityRelationsLinkedNode.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CatalogEntityRelationsNodeContentProps = {
+    entityType: string;
+    label: string;
+    isRoot: boolean;
+};
+export declare function CatalogEntityRelationsNodeContent({ entityType, label, isRoot, }: CatalogEntityRelationsNodeContentProps): React.ReactElement;

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsNodeContent = CatalogEntityRelationsNodeContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
+const utils_1 = require("../../../../core/utils");
+function CatalogEntityRelationsNodeContent({ entityType, label, isRoot, }) {
+    const formattedEntityType = (0, utils_1.customCatalogOptionsCasing)(entityType);
+    return (react_1.default.createElement(CatalogEntityRelationsNodeContentWrapper, { isRoot: isRoot, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent" },
+        react_1.default.createElement(CatalogEntityRelationsNodeTypeRow, { isRoot: isRoot },
+            isRoot ? (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, forceColor: "var(--catalog-entity-relations-node-root-icon-color)" })) : (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })),
+            react_1.default.createElement("span", null, formattedEntityType)),
+        react_1.default.createElement(CatalogEntityRelationsNodeLabelRow, { isRoot: isRoot }, label)));
+}
+const CatalogEntityRelationsNodeTypeRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-sm);
+  font-size: var(--font-size-sm);
+  color: ${({ isRoot }) => isRoot
+    ? 'var(--catalog-entity-relations-node-root-text-color)'
+    : 'var(--text-color-description)'};
+`;
+const CatalogEntityRelationsNodeLabelRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-lg);
+  font-size: var(--font-size-lg);
+  color: ${({ isRoot }) => isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
+`;
+const CatalogEntityRelationsNodeContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight);
+  background: ${({ isRoot }) => isRoot
+    ? 'var(--catalog-entity-relations-node-root-bg-color)'
+    : 'var(--catalog-entity-relations-node-bg-color)'};
+  border: ${({ isRoot }) => isRoot
+    ? 'none'
+    : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
+`;
+//# sourceMappingURL=CatalogEntityRelationsNodeContent.js.map