vcc-ui/dist/components/card/card.js

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Card = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactFela = require("react-fela");
var _flex = require("../flex");
const transition = '300ms cubic-bezier(0.23, 1, 0.32, 1) 0s';
const style = _ref => {
  let {
    theme,
    href,
    selected,
    disabled
  } = _ref;
  return {
    boxSizing: 'border-box',
    boxShadow: theme.tokens.card.shadow,
    overflow: 'hidden',
    background: theme.tokens.card.background,
    borderRadius: 4,
    extend: [{
      condition: !disabled,
      style: {
        ':focus-visible': theme.states.focus
      }
    }, {
      condition: selected,
      style: {
        position: 'relative',
        ':after': {
          content: '" "',
          pointerEvents: 'none',
          display: 'block',
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          borderRadius: 4,
          border: '1px solid ' + theme.color.ornament.highlight
        }
      }
    }, {
      condition: href,
      style: {
        textDecoration: 'none',
        color: 'inherit',
        transition: `transform ${transition}, box-shadow ${transition}`,
        ':hover': {
          transform: 'translateY(-5px)',
          boxShadow: 'rgba(0, 0, 0, 0.2) 0px 12px 24px'
        }
      }
    }]
  };
};

/**
 * @deprecated This component is deprecated and can be recreated using CSS only. See [ClickableCard Example](https://developer.volvocars.com/design-system/web/?path=/docs/how-to-clickablecard--docs)
 */
const Card = exports.Card = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
  let {
    selected,
    href,
    children,
    ...props
  } = _ref2;
  const {
    theme
  } = (0, _reactFela.useFela)();
  const styleProps = {
    theme,
    selected,
    href
  };
  return /*#__PURE__*/_react.default.createElement(_flex.Flex, (0, _extends2.default)({
    as: href ? 'a' : 'div',
    ref: ref,
    href: href
  }, props, {
    extend: style(styleProps)
  }), children);
});
Card.displayName = 'Card';
Card.propTypes = {
  selected: _propTypes.default.bool,
  href: _propTypes.default.string,
  children: _propTypes.default.node
};