@redocly/theme
Version:
Shared UI components lib
206 lines (205 loc) • 9.93 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogCard = CatalogCard;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../../core/hooks");
const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
const GraphIcon_1 = require("../../../icons/GraphIcon/GraphIcon");
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 utils_1 = require("../../../core/utils");
function CatalogCard({ entity, catalogConfig }) {
var _a, _b, _c, _d;
const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const telemetry = useTelemetry();
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.sendCatalogItemClickedMessage();
} },
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(HeaderIconText, { entityType: entity.type }, entity.type)),
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(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)) || [], 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)) || [], 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, { 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)',
borderRadius: 'var(--border-radius)',
},
borderless: true,
color: 'grey',
textTransform: 'none',
}, itemsToShow: 3 }),
react_1.default.createElement(ArrowCircle, null,
react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "16px" }),
react_1.default.createElement(ArrowUpRightIcon_1.ArrowUpRightIcon, { size: "16px" })))));
}
const HeaderIconWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
width: var(--catalog-card-icon-width);
height: var(--catalog-card-icon-height);
border-radius: var(--catalog-card-icon-border-radius);
background-color: var(--catalog-card-icon-bg-color);
flex-shrink: 0;
border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
margin-right: var(--catalog-card-icon-margin-right);
`;
const HeaderIconText = styled_components_1.default.div `
color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
`;
const CardHeader = styled_components_1.default.div `
display: flex;
align-items: center;
`;
const MetadataLabel = styled_components_1.default.div `
font-size: var(--catalog-metadata-label-font-size);
font-weight: var(--catalog-metadata-label-font-weight);
color: var(--catalog-metadata-label-color);
`;
const CardMetadataSection = styled_components_1.default.div `
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: var(--catalog-metadata-section-margin-top);
gap: var(--catalog-metadata-section-gap);
width: 100%;
`;
const MetadataRow = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--catalog-metadata-row-gap);
`;
const ArrowCircle = styled_components_1.default.div `
width: var(--catalog-arrow-circle-size);
height: var(--catalog-arrow-circle-size);
border-radius: var(--catalog-arrow-circle-radius);
background-color: var(--catalog-arrow-circle-bg-color);
display: flex;
align-items: center;
justify-content: center;
position: relative;
${ArrowRightIcon_1.ArrowRightIcon}, ${ArrowUpRightIcon_1.ArrowUpRightIcon} {
position: absolute;
transition: opacity 0.2s ease-in-out;
}
`;
const CardContent = styled_components_1.default.div `
min-width: 0;
padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
height: 100%;
`;
const CardFooter = styled_components_1.default.div `
height: var(--catalog-card-footer-height);
display: flex;
align-items: center;
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 `
width: 100%;
height: 1px;
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);
background-color: var(--catalog-card-bg-color);
border: var(--catalog-card-border-width) var(--catalog-card-border-style)
var(--catalog-card-border-color);
transition: all 0.2s ease-in-out;
border-radius: var(--catalog-card-border-radius);
cursor: pointer;
display: flex;
flex-direction: column;
${ArrowRightIcon_1.ArrowRightIcon} {
opacity: 1;
}
${ArrowUpRightIcon_1.ArrowUpRightIcon} {
opacity: 0;
}
&:hover {
${ArrowRightIcon_1.ArrowRightIcon} {
opacity: 0;
}
${ArrowUpRightIcon_1.ArrowUpRightIcon} {
opacity: 1;
}
border-color: var(--catalog-card-border-color-hover);
}
`;
const CardTitle = styled_components_1.default.div `
color: var(--catalog-card-title-color);
font-size: var(--catalog-card-title-font-size);
font-weight: var(--catalog-card-title-font-weight);
line-height: var(--catalog-card-title-line-height);
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);
color: var(--catalog-card-description-color);
font-size: var(--catalog-card-description-font-size);
font-weight: var(--catalog-card-description-font-weight);
line-height: var(--catalog-card-description-line-height);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
`;
//# sourceMappingURL=CatalogCard.js.map