vcc-ui/_src/components/card/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 { useFela } from 'react-fela';
import { Flex } from '../flex';
import { getThemeStyle } from '../../get-theme-style';

const transition = '300ms cubic-bezier(0.23, 1, 0.32, 1) 0s';

const style = ({ theme, href, selected }) => ({
  boxSizing: 'border-box',

  boxShadow: theme.tokens.card.shadow,
  overflow: 'hidden',
  background: theme.tokens.card.background,
  borderRadius: 4,
  extend: [
    {
      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',
        },
      },
    },
  ],
});

export const Card = React.forwardRef(
  ({ selected, href, children, ...props }, ref) => {
    const { theme } = useFela();

    const styleProps = {
      theme,
      selected,
      href,
    };

    return (
      <Flex
        as={href ? 'a' : 'div'}
        ref={ref}
        href={href}
        {...props}
        extend={[style(styleProps), getThemeStyle('card', theme, styleProps)]}
      >
        {children}
      </Flex>
    );
  }
);

Card.displayName = 'Card';

Card.propTypes = {
  selected: PropTypes.bool,
  href: PropTypes.string,
  children: PropTypes.node,
};