# All files / src/dialog DialogTitle.tsx

100% Statements 57/57
100% Branches 1/1
100% Functions 1/1
100% Lines 57/57

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
    581x
    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
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    3x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import { type Margin } from "../cssUtils.js";
    import {
      Typography,
      type CustomTypographyComponent,
      type TypographyProps,
      type TypographyType,
    } from "../typography/Typography.js";

    /**
     * @remarks \@since 6.0.0 Inherits the `TypographyProps` instead of
     * `HTMLAttributes<HTMLHeadingElement>`.
     */
    export interface DialogTitleProps extends TypographyProps {
      /** @defaultValue `"h2"` */
      as?: CustomTypographyComponent;

      /** @defaultValue `"headline-4"` */
      type?: TypographyType;

      /** @defaultValue `"none"` */
      margin?: Margin;
    }

    /**
     * **Server Component**
     *
     * Look at the `Dialog` or `FixedDialog` components for example usage.
     */
    export const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
      function DialogTitle(
        {
          as = "h2",
          type = "headline-4",
          margin = "none",
          children,
          className,
          ...props
        },
        ref
      ) {
        return (
          <Typography
            {...props}
            ref={ref}
            as={as}
            type={type}
            margin={margin}
            // Note: This class applies no styles at this time
            className={cnb("rmd-dialog__title", className)}
          >
            {children}
          </Typography>
        );
      }
    );