vcc-ui/_src/components/nav-item/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 { Click } from "../click";
import { Arrow } from "../arrow";
import { Inline } from "../inline";

import { getThemeStyle } from "../../get-theme-style";

const navItemStyle = ({ isActive, isDropdown, theme }) => ({
	color: theme.colors.grey1,
	fontSize: 20,
	padding: "18px 0",
	minHeight: 20,
	alignItems: "center",
	textAlign: "left",
	boxSizing: "content-box",
	fontWeight: 200,
	letterSpacing: 0.3,
	borderBottomWidth: 1,
	borderBottomStyle: "solid",
	borderBottomColor: theme.colors.grey7,

	[theme.breakpoints.untilL]: {
		width: "100%",
		display: "block",
		extend: {
			condition: isDropdown,
			style: {
				display: "flex",
				justifyContent: "space-between"
			}
		}
	},
	[theme.breakpoints.fromL]: {
		padding: "25px 0",
		fontSize: 15,
		display: "inline-block",
		borderBottomWidth: 3,
		borderBottomColor: "transparent",
		marginRight: 20,
		":last-child": {
			marginRight: 0
		},
		":focus": {
			outline: "none",
			extend: {
				condition: !isActive,
				style: {
					borderBottomColor: theme.colors.primary
				}
			}
		},
		":hover": {
			borderBottomColor: theme.colors.primary
		},
		extend: {
			condition: isActive,
			style: {
				borderBottomColor: theme.colors.primary
			}
		}
	}
});

export function NavItem({
	children,
	isDropdown = false,
	isActive = false,
	...props
}) {
	const { theme } = useFela();

	const styleProps = {
		isActive,
		isDropdown,
		theme
	};

	const { size = 14, color = theme.colors.primary } = getThemeStyle(
		"navItemArrow",
		theme
	);

	return (
		<Click
			{...props}
			extend={[
				navItemStyle(styleProps),
				getThemeStyle("navItem", theme, styleProps)
			]}
		>
			{children}
			{isDropdown && (
				<React.Fragment>
					<Inline
						extend={{
							[theme.breakpoints.untilL]: { display: "none" },
							marginLeft: 8,
							verticalAlign: "middle"
						}}
					>
						<Arrow
							direction={isActive ? "up" : "down"}
							size={size}
							color={color}
						/>
					</Inline>
					<Inline
						extend={{
							[theme.breakpoints.fromL]: { display: "none" },
							marginLeft: 8,
							verticalAlign: "middle"
						}}
					>
						<Arrow direction={"right"} size={size} color={color} />
					</Inline>
				</React.Fragment>
			)}
		</Click>
	);
}

NavItem.propTypes = {
	children: PropTypes.node,
	/** Indicate if the NavItem will open a dropdown menu */
	isDropdown: PropTypes.bool,
	/** Indicate if the NavItem is in an active state */
	isActive: PropTypes.bool
};