# All files / src/divider styles.ts

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

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
    501x
    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
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
     import { cnb } from "cnbuilder";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-divider");

    /** @remarks \@since 6.0.0 */
    export interface DividerClassNameOptions {
      className?: string;

      /**
       * Boolean if the divider should appear inset instead of full width. This
       * really just applied a margin-left (or margin-right when dir="rtl").
       *
       * If you want to create a divider that is centered, you most likely want to
       * use the `rmd-divider-theme-update-var` mixin instead to update the
       * `max-size` of the divider.
       *
       * @defaultValue `false`
       */
      inset?: boolean;

      /**
       * Boolean if the divider should be vertical instead of horizontal. This will
       * change the divider to be rendered as a `<div>` instead of an `<hr>`.
       *
       * Note: If your parent element of the divider does not have a static height
       * set, you **must** manually set the height of the divider to a static
       * non-percentage number OR use the `VerticalDivider` component instead to
       * automagically create a valid percentage height.
       *
       * @defaultValue `false`
       */
      vertical?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function divider(options: DividerClassNameOptions = {}): string {
      const { inset = false, vertical = false, className } = options;

      return cnb(
        styles({
          inset: inset && !vertical,
          vertical,
        }),
        className
      );
    }