vcc-ui/_src/components/box/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";

const style = {
	display: "flex",
	flexDirection: "column",
	flexGrow: 0,
	flexShrink: 1,
	flexBasis: "auto",
	alignSelf: "stretch"
};

export function Box({
	children,
	className,
	innerRef,
	as: As = "div",
	extend,
	...props
}) {
	const { css } = useFela(props);

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

Box.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,
	/** React DOM ref object or fn to be passed through to the DOM element **/
	innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
};