vcc-ui/_src/components/click/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 React from "react";
import PropTypes from "prop-types";

import { Block } from "../block";

const buttonResetStyle = {
	background: "none",
	margin: 0,
	padding: 0,
	textAlign: "left",
	cursor: "pointer",
	appearance: "none",
	borderWidth: 0,
	"::-moz-focus-inner": {
		borderWidth: 0,
		padding: 0
	}
};
const linkResetStyle = {
	textDecoration: "none"
};

export function Click({ children, extend, innerRef, ...props }) {
	const as = props.href ? "a" : "button";

	return (
		<Block
			{...props}
			innerRef={innerRef}
			as={as}
			type={as === "button" ? props.type || "button" : null}
			extend={[
				{
					boxSizing: "border-box",
					color: "#000",
					fontSize: "12px",
					fontFamily: "sans-serif"
				},
				as === "button" ? buttonResetStyle : linkResetStyle,
				extend
			]}
		>
			{children}
		</Block>
	);
}

Click.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])
};