vcc-ui/_src/components/block/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import PropTypes from 'prop-types';
import React from 'react';
import { useFela } from 'react-fela';
import { deprecateInnerRef } from '../../deprecate';

const style = {
  display: 'block',
};

export const Block = React.forwardRef(
  (
    { children, className, innerRef, as: As = 'div', extend, ...props },
    ref
  ) => {
    const { css } = useFela(props);

    deprecateInnerRef({ innerRef });

    return (
      <As
        {...props}
        ref={ref || innerRef}
        className={css(style, extend) + (className ? ' ' + className : '')}
      >
        {children}
      </As>
    );
  }
);

Block.displayName = 'Block';

Block.propTypes = {
  /** Any valid React element, function, or a string specifying a name for an HTML element */
  as: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.func,
  ]),
  /** An object containing valid CSS style declarations */
  extend: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
    PropTypes.array,
  ]),
  /** A JSX node */
  children: PropTypes.node,

  /** Deprecated in favour of `ref`. React DOM ref object or fn to be passed through to the DOM element. */
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),

  /** Add an additional custom className to element. Warning: make sure it doesn't collide with the classNames being generated for the atomic CSS */
  className: PropTypes.string,
};