@redocly/theme
Version:
Shared UI components lib
152 lines (150 loc) • 7.12 kB
JavaScript
;
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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogClassicCard = CatalogClassicCard;
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
const Link_1 = require("../../components/Link/Link");
const Tag_1 = require("../../components/Tag/Tag");
const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
const Button_1 = require("../../components/Button/Button");
/**
* Strips HTML tags from a plain string.
*/
function stripHtmlTags(text) {
if (!text)
return '';
// This regex matches:
// - Opening tags: <tagname> or <tagname attributes>
// - Closing tags: </tagname>
// - Self-closing tags: <tagname/> or <tagname attributes/>
const htmlTagRegex = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s[^>]*)?\/?>|<[a-zA-Z][a-zA-Z0-9]*\/>/g;
return text.replace(htmlTagRegex, '').trim();
}
function CatalogClassicCard({ item }) {
var _a, _b;
const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
const otelTelemetry = useOtelTelemetry();
return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => otelTelemetry.send({ type: 'catalog_item.clicked' }) },
React.createElement(CardContent, null,
React.createElement(CardTitleWrapper, null,
React.createElement(CardTitle, null,
React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, item.title))),
React.createElement(CardDescription, null,
React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, stripHtmlTags((_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : '')))),
React.createElement(CardFooter, null,
React.createElement(CardTags, null,
(item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, (0, utils_1.capitalize)(tag))))),
(item.scorecardLevel && (React.createElement(Tag_1.Tag, { borderless: true, withStatusDot: true, statusDotColor: `var(${(0, utils_1.getScorecardColorVariable)(item.scorecardLevelIdx || 0, Object.keys(item.scorecardLevels || {}).length)})` },
React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, item.scorecardLevel)))) ||
null),
React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
}
const SelectButton = (0, styled_components_1.default)(Button_1.Button) `
border-radius: 100%;
transition: all 0.2s ease-in-out;
`;
const StyledCard = styled_components_1.default.div `
min-height: var(--catalog-classic-card-min-height);
height: 100%;
color: var(--catalog-classic-card-text-color);
font-size: var(--catalog-classic-card-font-size);
font-weight: var(--catalog-classic-card-font-weight);
background-color: var(--catalog-classic-card-bg-color);
border: var(--catalog-classic-card-border-width) var(--catalog-classic-card-border-style)
var(--catalog-classic-card-border-color);
transition: all 0.2s ease-in-out;
border-radius: var(--catalog-classic-card-border-radius);
cursor: pointer;
display: flex;
gap: var(--catalog-classic-card-gap);
padding: var(--catalog-classic-card-padding-vertical)
var(--catalog-classic-card-padding-horizontal);
flex-direction: column;
&:hover ${SelectButton} {
transform: rotate(-45deg);
}
`;
const CardTitleWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
min-height: var(--catalog-classic-card-title-min-height);
`;
const CardTitle = styled_components_1.default.div `
display: -webkit-box;
-webkit-line-clamp: var(--catalog-classic-card-title-line-clamp);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: var(--catalog-classic-card-title-color);
font-size: var(--catalog-classic-card-title-font-size);
font-weight: var(--catalog-classic-card-title-font-weight);
line-height: var(--catalog-classic-card-title-line-height);
margin: 0;
`;
const CardDescription = styled_components_1.default.div `
display: -webkit-box;
-webkit-line-clamp: var(--catalog-classic-card-description-line-clamp);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: var(--catalog-classic-card-description-color);
font-size: var(--catalog-classic-card-description-font-size);
font-weight: var(--catalog-classic-card-description-font-weight);
line-height: var(--catalog-classic-card-description-line-height);
height: var(--catalog-classic-card-description-height);
`;
const CardContent = styled_components_1.default.div `
flex: 1;
display: flex;
gap: var(--catalog-classic-card-content-gap);
flex-direction: column;
`;
const CardFooter = styled_components_1.default.div `
display: flex;
align-items: flex-end;
justify-content: space-between;
`;
const CardTags = styled_components_1.default.div `
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xs);
min-height: var(--spacing-xl);
`;
const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
text-transform: inherit;
margin: 0;
background-color: var(--catalog-classic-card-tag-bg);
`;
//# sourceMappingURL=CatalogClassicCard.js.map