vcc-ui/_src/components/arrow/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 PropTypes from "prop-types";
import React from "react";
import { useFela } from "react-fela";
import { Inline } from "../inline";
import { getThemeStyle } from "../../get-theme-style";

const ArrowDown = ({ extend, themeName }) =>
	themeName === "polestar" ? (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 16 16"
		>
			<path d="M7.778 13.214L14 6.93l-.778-.785-5.672 5.728V0h-1.1v11.873L.778 6.145 0 6.93 7 14z" />
		</Inline>
	) : (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 13 6"
		>
			<path d="M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z" />
		</Inline>
	);

const ArrowUp = ({ extend, themeName }) =>
	themeName === "polestar" ? (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 16 16"
		>
			<path d="M7.222 1.786L1 8.07l.778.785L7.45 3.127V15h1.1V3.127l5.672 5.728L15 8.07 8 1l-.778.786z" />
		</Inline>
	) : (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 13 6"
		>
			<path d="M6.50012725 1.86602559L1.21516521 5.5.5 4.62573225 6.50013536.5 12.5 4.6256396l-.7151756.87426061z" />
		</Inline>
	);

const ArrowLeft = ({ extend, themeName }) =>
	themeName === "polestar" ? (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 16 16"
		>
			<path d="M1.354 9.046L8.308 16l.861-.862L2.831 8.8H16V7.57H2.83l6.34-6.34-.862-.922L.492 8.185z" />
		</Inline>
	) : (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 5 12"
		>
			<path d="M1.36602559 5.99987275L5 11.28483479 4.12573225 12 0 5.99986464 4.1256396 0l.87426061.7151756z" />
		</Inline>
	);

const ArrowRight = ({ extend, themeName }) =>
	themeName === "polestar" ? (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 25.2 25.5"
		>
			<path d="M23.8 11.3L12.5 0l-1.4 1.4 10.3 10.3H0v2h21.4L11.1 24l1.4 1.5 12.7-12.8z" />
		</Inline>
	) : (
		<Inline
			extend={extend}
			as="svg"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 5 12"
		>
			<path d="M3.63397441 6.00012725L0 .71516521.87426775 0 5 6.00013536.87436041 12l-.87426062-.7151756z" />
		</Inline>
	);

const directionResolver = (direction, isRtl) => {
	if (direction === "right" && isRtl) {
		return "left";
	}
	if (direction === "left" && isRtl) {
		return "right";
	}
	return direction;
};

const ArrowResolver = ({ direction, extend, themeName }) => {
	switch (direction) {
		case "right":
			return <ArrowRight extend={extend} themeName={themeName} />;
		case "left":
			return <ArrowLeft extend={extend} themeName={themeName} />;
		case "up":
			return <ArrowUp extend={extend} themeName={themeName} />;
		case "down":
			return <ArrowDown extend={extend} themeName={themeName} />;
	}
};

const arrowStyle = ({ size, color }) => ({
	fill: color,
	height: size,
	width: size,
	stroke: "transparent",
	transition: "all 0.3s ease-out",
	transitionProperty: "transform"
});

export function Arrow({ direction = "right", size = 10, color }) {
	const { theme } = useFela();

	const styleProps = {
		size,
		color
	};

	return (
		<ArrowResolver
			direction={directionResolver(direction, theme.direction === "rtl")}
			themeName={theme.name}
			extend={[
				arrowStyle(styleProps),
				getThemeStyle("arrow", theme, styleProps)
			]}
		/>
	);
}

Arrow.propTypes = {
	/** Any valid CSS color value */
	color: PropTypes.string,
	size: PropTypes.number,
	direction: PropTypes.oneOf(["up", "down", "right", "left"])
};