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";

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

const link = ({ intent, arrow, theme }) => ({
	whiteSpace: "nowrap",
	fontWeight: 400,
	fontSize: 15,
	textDecoration: "none",
	transition: "all 0.3s ease-out",
	transitionProperty: "background, fill, stroke, color, border-color",
	":focus": {
		textDecoration: "underline",
		outline: "none"
	},
	extend: [
		{
			condition: intent === "primary",
			style: {
				color: theme.colors.grey1,
				fill: theme.colors.primary,
				":hover": {
					color: theme.colors.grey3
				}
			}
		},
		{
			condition: intent === "primary-light",
			style: {
				color: theme.colors.white,
				fill: theme.colors.white,
				":hover": {
					color: theme.colors.grey5,
					fill: theme.colors.grey5
				}
			}
		},
		{
			condition: arrow,
			style: {
				":hover": {
					"& svg": {
						transform: arrowTransform[arrow]
					}
				}
			}
		}
	]
});

export function Link({ arrow, intent = "primary", children, ...props }) {
	const { theme } = useFela();

	const styleProps = {
		arrow,
		intent,
		theme
	};

	return (
		<Block
			{...props}
			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.propTypes = {
	/** A JSX node */
	children: PropTypes.node,
	intent: PropTypes.oneOf(["primary", "primary-light"]),
	arrow: PropTypes.oneOf(["up", "down", "right", "left"]),
	href: PropTypes.string
};