design-system-starterkit/packages/components-react/src/Body/Body.tsx at 34fbcdb2fd6dad6af9aa0bcfbd79f9239ca3a32b · jeffreylauwers/design-system-starterkit · GitHub

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
import React from 'react';
import { classNames } from '@dsn/core';
import './Body.css';

export interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Child-elementen die de document-level stijlen erven
   */
  children?: React.ReactNode;
}

/**
 * Body component
 * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
 * automatisch de juiste typografie, kleur en achtergrond erven.
 *
 * @example
 * ```tsx
 * // In een applicatie: wrap de root-content
 * <Body>
 *   <h1>Mijn pagina</h1>
 *   <p>Inhoud met geërfde stijlen</p>
 * </Body>
 *
 * // Of pas de CSS class direct toe op het <body> element
 * // <body class="dsn-body">
 * ```
 */
export const Body = React.forwardRef<HTMLDivElement, BodyProps>(
  ({ className, children, ...props }, ref) => {
    const classes = classNames('dsn-body', className);

    return (
      <div ref={ref} className={classes} {...props}>
        {children}
      </div>
    );
  }
);

Body.displayName = 'Body';