vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
88 lines (87 loc) • 2.12 kB
JavaScript
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
};