@carbon/ibm-products
Version:
Carbon for IBM Products
127 lines (125 loc) • 6.85 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/Card/CardHeader.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "CardHeader";
const defaults = {
hasActions: false,
titleSize: "default"
};
const CardHeader = ({ actions, decorator, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions = defaults.hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize = "default" }) => {
const carbonPrefix = (0, _carbon_react.usePrefix)();
const blockClass = `${require_settings.pkg.prefix}--card`;
const headerClass = `${blockClass}__header`;
const headerClasses = (0, import_classnames.default)(headerClass, {
[`${headerClass}-label-only`]: label && !title && !description,
[`${headerClass}-has-label`]: !!label,
[`${blockClass}__title-lg`]: titleSize === "large"
});
const actionGhostButton = `${blockClass}__actions-header-ghost-button`;
const actionGhostButtonClass = (0, import_classnames.default)(actionGhostButton, { [`${actionGhostButton}--only`]: noActionIcons });
const hollowAiIcon = /* @__PURE__ */ react.default.createElement("svg", {
className: `${carbonPrefix}--slug ${carbonPrefix}--slug-icon`,
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ react.default.createElement("rect", {
x: "0.5",
y: "0.5",
width: "23",
height: "23"
}), /* @__PURE__ */ react.default.createElement("path", {
d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
fill: "#161616"
}));
let normalizedDecorator = null;
if (decorator || slug) if (inClickableCard || typeof decorator === "boolean" || typeof slug === "boolean") normalizedDecorator = hollowAiIcon;
else {
const element = decorator || slug;
normalizedDecorator = react.default.cloneElement(element, { size: label && title || title && titleSize === "large" ? "sm" : "xs" });
}
return /* @__PURE__ */ react.default.createElement("div", { className: headerClasses }, /* @__PURE__ */ react.default.createElement("div", { className: (0, import_classnames.default)([
`${headerClass}-container`,
{ [`${headerClass}-container--has-slug`]: !!slug },
{ [`${headerClass}-container--has-decorator`]: !!decorator },
{ [`${headerClass}-container--has-actions`]: !!hasActions },
{ [`${headerClass}-container--large-tile-or-label`]: title && (label || titleSize === "large") }
]) }, /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__title-container` }, label && /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}__label` }, label), title && /* @__PURE__ */ react.default.createElement(_carbon_react.Heading, { className: `${blockClass}__title` }, title), description && /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}__description` }, description)), hasActions && /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__actions ${blockClass}__actions-header` }, actions, secondaryButtonText && secondaryButtonPlacement === "top" && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
kind: "ghost",
onClick: onSecondaryButtonClick,
size: "sm",
renderIcon: secondaryButtonIcon,
href: secondaryButtonHref,
className: actionGhostButtonClass,
disabled: secondaryButtonDisabled
}, secondaryButtonText), primaryButtonText && primaryButtonPlacement === "top" && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
kind: "ghost",
size: "sm",
renderIcon: primaryButtonIcon,
onClick: onPrimaryButtonClick,
className: actionGhostButtonClass,
disabled: primaryButtonDisabled
}, primaryButtonText)), slug ? normalizedDecorator : decorator ? /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__header__inner-wrapper--decorator` }, normalizedDecorator) : ""));
};
/**@ts-ignore */
CardHeader.propTypes = {
actions: prop_types.default.oneOfType([prop_types.default.array, prop_types.default.node]),
/**
* Optional prop that allows you to pass any component.
*/
decorator: prop_types.default.oneOfType([prop_types.default.node, prop_types.default.bool]),
description: prop_types.default.oneOfType([
prop_types.default.string,
prop_types.default.object,
prop_types.default.node
]),
hasActions: prop_types.default.bool,
/**
* is the host card clickable
*/
inClickableCard: prop_types.default.bool,
label: prop_types.default.string,
noActionIcons: prop_types.default.bool,
onPrimaryButtonClick: prop_types.default.func,
onSecondaryButtonClick: prop_types.default.func,
primaryButtonDisabled: prop_types.default.bool,
primaryButtonIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
primaryButtonPlacement: prop_types.default.oneOf(["top", "bottom"]),
primaryButtonText: prop_types.default.string,
secondaryButtonDisabled: prop_types.default.bool,
secondaryButtonHref: prop_types.default.string,
secondaryButtonIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
secondaryButtonKind: prop_types.default.oneOf(["secondary", "ghost"]),
secondaryButtonPlacement: prop_types.default.oneOf(["top", "bottom"]),
secondaryButtonText: prop_types.default.string,
/**
* **Experimental:** For all cases a `Slug` component can be provided.
* Clickable tiles only accept a boolean value of true and display a hollow slug.
* @deprecated please use the `decorator` prop
*/
slug: prop_types.default.oneOfType([prop_types.default.node, prop_types.default.bool]),
title: prop_types.default.oneOfType([
prop_types.default.string,
prop_types.default.object,
prop_types.default.node
]),
titleSize: prop_types.default.oneOf(["default", "large"])
};
/**@ts-ignore */
CardHeader.displayName = componentName;
//#endregion
exports.CardHeader = CardHeader;