@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

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

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntity = CatalogEntity;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../../core/utils");
+const ArrowLeftIcon_1 = require("../../../icons/ArrowLeftIcon/ArrowLeftIcon");
+const CatalogPageDescription_1 = require("../../../components/Catalog/CatalogPageDescription");
+const CatalogEntityProperties_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties");
+const CatalogEntityMetadata_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMetadata");
+const CatalogEntityLinks_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityLinks");
+const Breadcrumbs_1 = require("../../../components/Breadcrumbs/Breadcrumbs");
+const Sidebar_1 = require("../../../components/Sidebar/Sidebar");
+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, }) {
+    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();
+    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: [
+                    {
+                        label: 'Overview',
+                        link: `${linkToMainCatalog}/entities/${entity.key}`,
+                        active: true,
+                        items: [],
+                        hasActiveSubItem: false,
+                    },
+                ] }), 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 },
+                ] }),
+            react_1.default.createElement(CatalogEntityPageWrapper, null,
+                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 }),
+                    react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
+                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
+}
+const CatalogPageWrapper = styled_components_1.default.div `
+  --sidebar-width: var(--catalog-sidebar-width);
+  --link-color-primary: var(--breadcrumbs-text-color);
+
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  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%;
+  margin: 0 auto;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    width: 100%;
+    padding: var(--catalog-page-padding);
+  }
+`;
+const CatalogSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
+  display: none;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: flex;
+  }
+  --menu-container-padding-top: 0;
+`;
+const CatalogEntityPageWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(--font-weight-regular);
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+`;
+const CatalogTwoColumnsSection = styled_components_1.default.section `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+`;
+const BackLink = (0, styled_components_1.default)(Button_1.Button) `
+  padding: var(--spacing-unit) 0;
+  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
+  justify-content: flex-start;
+  width: 100%;
+  margin-bottom: 0px;
+`;
+//# sourceMappingURL=CatalogEntity.js.map

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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" },
+        react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
+        react_1.default.createElement(RightColumn, null, rightContent)));
+}
+const InfoBarWrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: 'left right';
+  align-items: center;
+
+  color: var(--catalog-card-text-color, inherit);
+  background-color: var(--catalog-card-bg-color, white);
+  border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  padding: var(--catalog-card-gap);
+
+  &:hover {
+    border-color: var(--catalog-card-border-color-hover);
+  }
+`;
+const LeftColumn = styled_components_1.default.div `
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+  width: 100%;
+  grid-area: left;
+  justify-self: start;
+  text-align: left;
+  border-right: ${({ withSeparator }) => withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+`;
+const RightColumn = styled_components_1.default.div `
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+  grid-area: right;
+  justify-self: end;
+  text-align: right;
+`;
+//# sourceMappingURL=CatalogEntityInfoBar.js.map

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

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

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

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
+const Link_1 = require("../../../components/Link/Link");
+function CatalogEntityLinks({ entity }) {
+    const links = Object.entries(entity.links || []);
+    if (!links.length) {
+        return null;
+    }
+    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 })))));
+}
+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.span `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+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=CatalogEntityLinks.js.map

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

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

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

@@ -0,0 +1,111 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityMetadata = CatalogEntityMetadata;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+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 CatalogEntityMetadata({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
+    const metadata = Object.entries(metadataToShow);
+    const [isOn, setIsOn] = (0, react_1.useState)(false);
+    const hasMoreItems = metadata.length > MAX_INITIAL_ITEMS;
+    const visibleMetadata = isOn ? metadata : metadata.slice(0, MAX_INITIAL_ITEMS);
+    if (!metadata.length) {
+        return null;
+    }
+    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
+        react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
+        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) }))),
+        hasMoreItems && (react_1.default.createElement(ShowMoreButton, { onClick: () => setIsOn(!isOn) },
+            isOn ? 'Show less' : 'Show more',
+            " ",
+            react_1.default.createElement(ChevronIcon, { "$isExpanded": isOn })))));
+}
+const MetadataWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+const Label = styled_components_1.default.span `
+  font-weight: var(--font-weight-medium);
+  color: var(--catalog-metadata-label-color);
+`;
+const Value = styled_components_1.default.span `
+  color: var(--catalog-metadata-value-color);
+  font-weight: var(--font-weight-medium);
+`;
+const Heading = styled_components_1.default.h2 `
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;
+const ChevronIcon = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;
+const ShowMoreButton = styled_components_1.default.button `
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-metadata-button-gap, 0.5rem);
+  cursor: pointer;
+  color: var(--catalog-metadata-button-color);
+  padding: 0;
+  font-weight: var(--font-weight-medium);
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-metadata-button-color-hover);
+  }
+`;
+//# sourceMappingURL=CatalogEntityMetadata.js.map

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 theme_1 = require("../../../../index.js");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function ApiDescriptionProperty({ entity }) {
+    var _a;
+    const { useTranslate } = (0, theme_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const pathPrefix = (0, theme_1.getPathPrefix)();
+    const descriptionFile = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.descriptionFile;
+    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: () => {
+                navigate(`${pathPrefix}/${descriptionFile}`);
+            } })));
+}
+//# sourceMappingURL=ApiDescriptionProperty.js.map

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

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

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

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityProperties = CatalogEntityProperties;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const EntityTypeProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty");
+const GitProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty");
+const TagsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty");
+const ApiDescriptionProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty");
+const UserEmailProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty");
+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 propertyRenderers = [
+    {
+        key: 'type',
+        condition: (entity) => !!entity.type,
+        component: EntityTypeProperty_1.EntityTypeProperty,
+    },
+    {
+        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); },
+        component: ContactProperty_1.ContactProperty,
+    },
+    {
+        key: 'git',
+        condition: (entity) => !!entity.git,
+        component: GitProperty_1.GitProperty,
+    },
+    {
+        key: 'tags',
+        condition: (entity) => !!entity.tags,
+        component: TagsProperty_1.TagsProperty,
+    },
+    {
+        key: 'api-description',
+        condition: (entity) => { var _a; return entity.type === 'api-description' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.descriptionFile); },
+        component: ApiDescriptionProperty_1.ApiDescriptionProperty,
+    },
+    {
+        key: 'user-email',
+        condition: (entity) => { var _a; return entity.type === 'user' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email); },
+        component: UserEmailProperty_1.UserEmailProperty,
+    },
+    {
+        key: 'domains',
+        condition: (entity) => { var _a, _b; return ((_b = (_a = entity.domains) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; },
+        component: DomainsProperty_1.DomainsProperty,
+    },
+    {
+        key: 'owners',
+        condition: (entity) => { var _a, _b; return ((_b = (_a = entity.owners) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; },
+        component: OwnersProperty_1.OwnersProperty,
+    },
+];
+function CatalogEntityProperties({ entity }) {
+    return (react_1.default.createElement(CatalogEntityPropertiesGridWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties" }, propertyRenderers
+        .filter((renderer) => renderer.condition(entity))
+        .map((renderer) => (react_1.default.createElement(renderer.component, { key: renderer.key + entity.id, entity: entity })))));
+}
+const CatalogEntityPropertiesGridWrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
+  gap: var(--spacing-base);
+`;
+//# sourceMappingURL=CatalogEntityProperties.js.map

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

@@ -0,0 +1,7 @@
+import { ReactNode, JSX } from 'react';
+export type CatalogEntityPropertyCardProps = {
+    header: ReactNode;
+    content: ReactNode;
+    onClick?: () => void;
+};
+export declare function CatalogEntityPropertyCard({ header, content, onClick, }: CatalogEntityPropertyCardProps): JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 },
+        react_1.default.createElement(CardHeader, null, header),
+        react_1.default.createElement(CardContent, null, content)));
+}
+const CatalogEntityPropertyWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  color: var(--catalog-card-text-color);
+  background-color: var(--catalog-card-bg-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
+  border-radius: var(--catalog-card-border-radius, 8px);
+  transition: all 0.2s ease-in-out;
+  height: 100%;
+  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);
+  }
+
+  ${(props) => props.onClick &&
+    `
+    cursor: pointer;
+  `}
+`;
+const CardHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+`;
+const CardContent = styled_components_1.default.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-card-content-gap);
+  flex-wrap: wrap;
+`;
+//# sourceMappingURL=CatalogEntityPropertyCard.js.map

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

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

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.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.ContactProperty = ContactProperty;
+const react_1 = __importDefault(require("react"));
+const SlackIcon_1 = require("../../../../icons/SlackIcon/SlackIcon");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function ContactProperty({ entity }) {
+    var _a, _b;
+    const channels = (_b = (_a = entity.contact) === null || _a === void 0 ? void 0 : _a.slack) === null || _b === void 0 ? void 0 : _b.channels;
+    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)))) })));
+}
+//# sourceMappingURL=ContactProperty.js.map

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+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)' } },
+                react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
+                domain.title)))) })));
+}
+//# sourceMappingURL=DomainsProperty.js.map

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityTypeProperty = EntityTypeProperty;
+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");
+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))) })));
+}
+//# sourceMappingURL=EntityTypeProperty.js.map

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

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