@octopusdeploy/design-system-components/dist/src/components/Tag/TagGroup.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TagGroup = TagGroup;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const routing_1 = require("../../routing");
const utils_1 = require("../../utils");
const Tag_1 = require("./Tag");
function TagGroup({ tags, limit }) {
    const Link = (0, routing_1.useOctopusLinkComponent)();
    const shouldApplyLimit = limit && limit.count > 0;
    const visibleTags = shouldApplyLimit ? tags.slice(0, limit.count) : tags;
    const moreCount = shouldApplyLimit && tags.length > limit.count ? tags.length - limit.count : 0;
    return ((0, jsx_runtime_1.jsxs)("ul", { className: styles.root, children: [visibleTags.map((tag, index) => ((0, jsx_runtime_1.jsx)("li", { className: styles.listItem, children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { ...tag }) }, index))), limit && moreCount > 0 && ((0, jsx_runtime_1.jsx)("li", { className: styles.listItem, children: (0, jsx_runtime_1.jsxs)(Link, { className: styles.moreText, href: limit.link, children: ["+", moreCount, " more"] }) }))] }));
}
const styles = {
    root: (0, css_1.css)({
        ...utils_1.resetStyles.list,
        display: "flex",
        flexWrap: "wrap",
        gap: design_system_tokens_1.space[8],
    }),
    listItem: (0, css_1.css)({
        alignContent: "center",
    }),
    moreText: (0, css_1.css)({
        textDecoration: "none",
        color: design_system_tokens_1.themeTokens.color.text.link.default,
        font: design_system_tokens_1.text.body.regular.medium,
    }),
};