@carbon/ibm-products
Version:
Carbon for IBM Products
125 lines (123 loc) • 6.19 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.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import React from "react";
import PropTypes from "prop-types";
import { Button, Heading, usePrefix } from "@carbon/react";
//#region src/components/Card/CardHeader.tsx
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
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 = usePrefix();
const blockClass = `${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.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.createElement("rect", {
x: "0.5",
y: "0.5",
width: "23",
height: "23"
}), /* @__PURE__ */ React.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.cloneElement(element, { size: label && title || title && titleSize === "large" ? "sm" : "xs" });
}
return /* @__PURE__ */ React.createElement("div", { className: headerClasses }, /* @__PURE__ */ React.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.createElement("div", { className: `${blockClass}__title-container` }, label && /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__label` }, label), title && /* @__PURE__ */ React.createElement(Heading, { className: `${blockClass}__title` }, title), description && /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__description` }, description)), hasActions && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__actions ${blockClass}__actions-header` }, actions, secondaryButtonText && secondaryButtonPlacement === "top" && /* @__PURE__ */ React.createElement(Button, {
kind: "ghost",
onClick: onSecondaryButtonClick,
size: "sm",
renderIcon: secondaryButtonIcon,
href: secondaryButtonHref,
className: actionGhostButtonClass,
disabled: secondaryButtonDisabled
}, secondaryButtonText), primaryButtonText && primaryButtonPlacement === "top" && /* @__PURE__ */ React.createElement(Button, {
kind: "ghost",
size: "sm",
renderIcon: primaryButtonIcon,
onClick: onPrimaryButtonClick,
className: actionGhostButtonClass,
disabled: primaryButtonDisabled
}, primaryButtonText)), slug ? normalizedDecorator : decorator ? /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__header__inner-wrapper--decorator` }, normalizedDecorator) : ""));
};
/**@ts-ignore */
CardHeader.propTypes = {
actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
/**
* Optional prop that allows you to pass any component.
*/
decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.node
]),
hasActions: PropTypes.bool,
/**
* is the host card clickable
*/
inClickableCard: PropTypes.bool,
label: PropTypes.string,
noActionIcons: PropTypes.bool,
onPrimaryButtonClick: PropTypes.func,
onSecondaryButtonClick: PropTypes.func,
primaryButtonDisabled: PropTypes.bool,
primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
primaryButtonPlacement: PropTypes.oneOf(["top", "bottom"]),
primaryButtonText: PropTypes.string,
secondaryButtonDisabled: PropTypes.bool,
secondaryButtonHref: PropTypes.string,
secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
secondaryButtonKind: PropTypes.oneOf(["secondary", "ghost"]),
secondaryButtonPlacement: PropTypes.oneOf(["top", "bottom"]),
secondaryButtonText: PropTypes.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: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
title: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.node
]),
titleSize: PropTypes.oneOf(["default", "large"])
};
/**@ts-ignore */
CardHeader.displayName = componentName;
//#endregion
export { CardHeader };