vcc-ui/dist/esm/components/link/index.js

A React library for building user interfaces at Volvo Cars

import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { useFela } from 'react-fela';
import { useConfig } from '../../config/use-config';
import { useTheme } from '../../styling/use-theme';
import { getLinkRel } from '../../utils/helpers';
import { Click } from '../click';
import { Inline } from '../inline';
const Svg = _ref => {
  let {
    As = 'svg',
    extend,
    children,
    ...props
  } = _ref;
  const {
    css
  } = useFela(props);
  return /*#__PURE__*/React.createElement(As, _extends({
    className: css(extend)
  }, props), children);
};
const arrows = {
  left: 'm9.272 2-4 4 4 4L8 11.271 2.727 6 8 .727l1.272 1.272Z',
  right: 'm2.728 10 4-4-4-4L4 .729 9.273 6 4 11.273l-1.272-1.272Z',
  up: 'm10 9.272-4-4-4 4L.729 8 6 2.727 11.273 8l-1.272 1.272Z',
  down: 'm2 2.728 4 4 4-4L11.271 4 6 9.273.727 4l1.272-1.272Z'
};
const Arrow = _ref2 => {
  let {
    arrowDirection,
    arrowPath,
    before
  } = _ref2;
  return /*#__PURE__*/React.createElement(Svg, {
    extend: {
      marginInlineStart: '0.3em',
      ...(before && {
        marginInlineEnd: '0.3em',
        marginInlineStart: 0
      }),
      top: 1,
      position: 'relative'
    },
    viewBox: `${arrowDirection === 'up' || arrowDirection === 'down' ? '0 -1' : '0 0'} 12 12`,
    width: "0.75em",
    height: "0.75em",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React.createElement("path", {
    d: arrowPath,
    fill: "currentColor"
  }));
};
/**
 * @deprecated Use `<a>` element instead, with or without arrows. See [Link](https://developer.volvocars.com/design-system/web/?path=/docs/components-link--docs)
 */
export const Link = /*#__PURE__*/forwardRef((_ref3, ref) => {
  let {
    children,
    arrow,
    intent = 'primary',
    textTransform = 'first-letter-uppercase',
    ...props
  } = _ref3;
  const theme = useTheme();
  const {
    v3Button
  } = useConfig();
  const rel = getLinkRel({
    rel: props.rel,
    href: props.href,
    target: props.target
  });
  let resolveArrow = arrow;
  if (theme.direction === 'rtl') {
    if (arrow === 'right') {
      resolveArrow = 'left';
    }
    if (arrow === 'left') {
      resolveArrow = 'right';
    }
  }
  const arrowPath = arrows[resolveArrow || 'right'];
  const color = intent === 'destructive' ? theme.tokens.linkDestructiveForeground : theme.tokens.linkForeground;
  return /*#__PURE__*/React.createElement(Click, _extends({
    ref: ref,
    rel: rel,
    href: props.href
  }, props, {
    extend: {
      fontSize: '1rem',
      fontWeight: 500,
      letterSpacing: '0.02em',
      padding: '12px 0',
      lineHeight: '1.375rem',
      fontFamily: theme.fontTypes.NOVUM,
      color,
      outlineColor: color,
      outlineOffset: '0.25em',
      extend: [{
        condition: v3Button,
        style: {
          fontSize: '0.875rem',
          textTransform: 'uppercase'
        }
      }, {
        condition: props.disabled,
        style: {
          opacity: 0.3
        }
      }, {
        condition: !props.disabled,
        style: {
          '@media (hover: hover)': {
            ':hover:not(:active)': {
              textDecorationLine: 'underline'
            },
            ':hover:active': {
              textDecorationLine: 'none'
            }
          },
          ':active': {
            textDecorationLine: 'underline'
          }
        }
      }, ...constrainedText({
        textTransform
      })]
    }
  }), arrow && arrow === 'left' && /*#__PURE__*/React.createElement(Inline, {
    extend: {
      whiteSpace: 'nowrap'
    }
  }, /*#__PURE__*/React.createElement(Arrow, {
    before: true,
    arrowPath: arrowPath,
    arrowDirection: arrow
  }), "\uFEFF"), children, arrow && arrow !== 'left' && /*#__PURE__*/React.createElement(Inline, {
    extend: {
      whiteSpace: 'nowrap'
    }
  }, "\uFEFF", /*#__PURE__*/React.createElement(Arrow, {
    arrowPath: arrowPath,
    arrowDirection: arrow
  })));
});
const constrainedText = _ref4 => {
  let {
    textTransform
  } = _ref4;
  return [{
    condition: textTransform === 'capitalize',
    style: {
      textTransform: 'capitalize'
    }
  }, {
    condition: textTransform === 'none',
    style: {
      textTransform: 'none'
    }
  }, {
    condition: textTransform === 'first-letter-uppercase',
    style: {
      '&::first-letter': {
        textTransform: 'uppercase'
      }
    }
  }];
};
Link.displayName = 'Link';
Link.propTypes = {
  /** A JSX node */
  // @ts-ignore
  children: PropTypes.node,
  intent: PropTypes.oneOf(['primary', 'destructive']),
  href: PropTypes.string,
  arrow: PropTypes.oneOf(['up', 'down', 'right', 'left', null]),
  /** Disable link interaction */
  disabled: PropTypes.bool,
  textTransform: PropTypes.oneOf(['none', 'capitalize', 'first-letter-uppercase'])
};