vcc-ui/_src/components/link/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 { Block } from '../block';
import { Inline } from '../inline';
import { Arrow } from '../arrow';
import { getThemeStyle } from '../../get-theme-style';
import { getLinkRel } from '../../helpers';
import { deprecate } from '../../deprecate';

const arrowTransform = {
  up: 'translateY(-3px)',
  down: 'translateY(3px)',
  right: 'translateX(5px)',
  left: 'translateX(-5px)',
};

const link = ({ intent, arrow, disabled, theme }) => ({
  whiteSpace: 'nowrap',
  textDecoration: 'none',
  transitionDuration: disabled ? 0 : '300ms',
  transitionTimingFunction: 'ease-out',
  transitionProperty: 'background, fill, stroke, color, border-color',
  ':focus': {
    textDecoration: 'underline',
    outline: 'none',
  },
  /* Intent prop deprecated, remove in 2.x */
  extend: [
    {
      condition: !disabled && intent === 'primary',
      style: {
        color: theme.color.foreground.action,
        fill: theme.color.foreground.action,
      },
    },
    {
      condition: !disabled && intent === 'primary-light',
      style: {
        color: theme.color.primitive.white,
        fill: theme.color.primitive.white,
      },
    },
    {
      condition: !disabled && arrow,
      style: {
        ':hover': {
          '& svg': {
            transform: arrowTransform[arrow],
          },
        },
      },
    },
    {
      condition: disabled,
      style: {
        cursor: 'not-allowed',
        color: theme.color.foreground.secondary,
      },
    },
  ],
});

export const Link = React.forwardRef(
  ({ arrow, intent = 'primary', disabled, children, href, ...props }, ref) => {
    const { theme } = useFela();

    const styleProps = {
      disabled,
      arrow,
      intent,
      theme,
    };

    // TODO: remove in 2.0.0
    deprecate(
      'Intent prop for link component has been deprecated, use dark theme to get primary-light style',
      intent === 'primary-light'
    );

    const rel = getLinkRel(props);
    return (
      <Block
        ref={ref}
        {...props}
        disabled={disabled}
        href={!disabled && href ? href : undefined}
        rel={rel}
        as="a"
        extend={[link(styleProps), getThemeStyle('link', theme, styleProps)]}
      >
        {arrow && arrow === 'left' && (
          <Inline extend={{ marginRight: 8 }}>
            <Arrow direction={arrow} />
          </Inline>
        )}
        {children}
        {arrow && arrow !== 'left' && (
          <Inline extend={{ marginLeft: 8 }}>
            <Arrow direction={arrow} />
          </Inline>
        )}
      </Block>
    );
  }
);

Link.displayName = 'Link';

Link.propTypes = {
  /** A JSX node */
  children: PropTypes.node,
  intent: PropTypes.oneOf(['primary', 'primary-light']), // Deprecated, remove in 2.x
  arrow: PropTypes.oneOf(['up', 'down', 'right', 'left']),
  href: PropTypes.string,
  target: PropTypes.string,
  /** Disable link interaction */
  disabled: PropTypes.bool,
};