vcc-ui/dist/esm/components/click/click.js

A React library for building user interfaces at Volvo Cars

import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React from 'react';
import { useConfig } from '../../config/use-config';
import { getLinkRel } from '../../utils/helpers';
import { Block } from '../block';
const buttonResetStyle = {
  background: 'none',
  margin: 0,
  padding: 0,
  textAlign: 'left',
  cursor: 'pointer',
  appearance: 'none',
  borderWidth: 0,
  touchAction: 'manipulation',
  '::-moz-focus-inner': {
    borderWidth: 0,
    padding: 0
  }
};
const linkResetStyle = {
  textDecoration: 'none'
};

/**
 * @deprecated Use either a `<button>` or `<a>` tag instead.
 */
export const Click = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    children,
    extend,
    href,
    disabled,
    onClick,
    ...props
  } = _ref;
  const config = useConfig();
  const hasHref = typeof href === 'string';
  const as = hasHref ? config.linkComponent : 'button';
  const rel = getLinkRel(props);
  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
    disabled: as === 'button' && disabled,
    href: !disabled && hasHref ? href : undefined,
    onClick: !disabled && onClick ? onClick : undefined,
    ref: ref,
    as: as,
    rel: rel,
    type: as === 'button' ? props.type || 'button' : null,
    extend: [{
      boxSizing: 'border-box'
    }, as === 'button' ? buttonResetStyle : linkResetStyle, _ref2 => {
      let {
        theme
      } = _ref2;
      return {
        ':focus-visible': theme.states.focus
      };
    }, extend]
  }), children);
});
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,
  /** Set the Click to disabled */
  disabled: PropTypes.bool,
  /** An action that is fired on click */
  onClick: PropTypes.func
};