# All files / src/card CardHeader.tsx

100% Statements 78/78
100% Branches 2/2
100% Functions 1/1
100% Lines 78/78

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    791x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x
    1x
     import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { type PropsWithRef } from "../types.js";
    import { cardHeader, cardHeaderContent } from "./styles.js";

    /**
     * @remarks
     * \@since 6.0.0 Removed the `align` prop.
     * \@since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
     * `beforeAddon` and `afterAddon`.
     * \@since 6.0.0 Removed the `contentClassName` prop in favor of the
     * {@link contentProps}.
     */
    export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
      /**
       * Any content to display after the children in the header. This could be an
       * expander icon button, visual media like an image or video, etc.
       */
      afterAddon?: ReactNode;

      /**
       * Any content to display before the children in the header. This could be an
       * expander icon button, visual media like an image or video, etc.
       */
      beforeAddon?: ReactNode;

      /**
       * Any props to pass to the `<div>` that surrounds the `children`. This is
       * generally used to apply custom `style` or `className`.
       */
      contentProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
    }

    /**
     * **Server Component**
     *
     * @remarks
     * \@since 6.0.0 Removed the `align` prop.
     * \@since 6.0.0 Renamed the `beforeChildren` and `afterChildren` props to
     * `beforeAddon` and `afterAddon`.
     * \@since 6.0.0 Removed the `contentClassName` prop in favor of the
     * {@link contentProps}.
     * \@since 6.0.0 No longer uses the `TextIconSpacing` component and instead
     * relies on the CSS `gap` for spacing.
     * \@since 6.0.0 Renders as a `<div>` instead of a `<header>`
     */
    export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
      function CardHeader(props, ref) {
        const {
          className,
          children,
          beforeAddon,
          afterAddon,
          contentProps,
          ...remaining
        } = props;

        return (
          <div
            {...remaining}
            ref={ref}
            className={cardHeader({
              className,
              addonBefore: !!beforeAddon,
              addonAfter: !!afterAddon,
            })}
          >
            {beforeAddon}
            <div
              {...contentProps}
              className={cardHeaderContent({ className: contentProps?.className })}
            >
              {children}
            </div>
            {afterAddon}
          </div>
        );
      }
    );