UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

88 lines (87 loc) 2.12 kB
import _extends from "@babel/runtime/helpers/extends"; import PropTypes from 'prop-types'; import React from 'react'; import { useFela } from 'react-fela'; import { Flex } from '../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) */ export const Card = /*#__PURE__*/React.forwardRef((_ref2, ref) => { let { selected, href, children, ...props } = _ref2; const { theme } = useFela(); const styleProps = { theme, selected, href }; return /*#__PURE__*/React.createElement(Flex, _extends({ as: href ? 'a' : 'div', ref: ref, href: href }, props, { extend: style(styleProps) }), children); }); Card.displayName = 'Card'; Card.propTypes = { selected: PropTypes.bool, href: PropTypes.string, children: PropTypes.node };