import clsx from "clsx"; import React from "react"; import { ButtonProps } from "../button"; import { Toolbar, ToolbarItem } from "../toolbar"; import { Body, H3 } from "../typography"; import "./card.scss"; export type CardProps = React.PropsWithChildren< Omit, "title"> > & { /** Buttons to use in the header. */ actions?: ToolbarItem[]; /** Border around the card. */ border?: boolean; /** @deprecated: REMOVE IN 3.0 - Renamed to actions. */ controls?: ButtonProps[]; /** The (flex) direction. */ direction?: React.CSSProperties["flexDirection"]; /** Whether to use `height 100%;`. */ fullHeight?: boolean; /** Justification method. */ justify?: | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"; /** A title for the card. */ title?: string | React.ReactNode; /** titleAs, a component to use as the title. */ titleAs?: React.ElementType; }; /** * Card component */ export const Card: React.FC = ({ controls = [], border = false, className, actions = controls, children, direction = "column", justify, fullHeight = false, title, titleAs: TitleComponent = H3, ...props }) => { // Controls is renamed to actions. if (controls && controls.length) { console.warn('mykn.components.Card: use of deprecated prop "controls"'); } return (
{(actions.length || title) && (
{typeof title === "string" ? ( {title} ) : ( title )} {Boolean(actions?.length) && ( )}
)} {children}
); };