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 { deprecateInnerRef } from '../../deprecate';
import { Block } from '../block';
import { getLinkRel } from '../../helpers';

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 const Click = React.forwardRef(
  ({ children, extend, innerRef, href, disabled, onClick, ...props }, ref) => {
    const as = href ? 'a' : 'button';
    const rel = getLinkRel(props);

    deprecateInnerRef({ innerRef });

    return (
      <Block
        {...props}
        disabled={as === 'button' && disabled}
        href={!disabled && href ? href : undefined}
        onClick={!disabled && onClick ? onClick : undefined}
        ref={ref || innerRef}
        as={as}
        rel={rel}
        type={as === 'button' ? props.type || 'button' : null}
        extend={[
          {
            boxSizing: 'border-box',
          },
          as === 'button' ? buttonResetStyle : linkResetStyle,
          extend,
        ]}
      >
        {children}
      </Block>
    );
  }
);

Click.displayName = 'Click';

Click.propTypes = {
  /** An object containing valid CSS style declarations */
  extend: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
    PropTypes.array,
  ]),
  /** Setting an href attribute will force the component to render with an `<a>` tag */
  href: PropTypes.string,
  /** If rendering a button (by not supplying an href), this let's you provide a type attribute for that button */
  type: PropTypes.string,
  /** 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]),
  /** Set the Click to disabled */
  disabled: PropTypes.bool,
  /** An action that is fired on click */
  onClick: PropTypes.func,
};