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.color.foreground.primary,
  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.color.ornament.border,

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

export const NavItem = React.forwardRef(
  ({ children, isDropdown = false, isActive = false, ...props }, ref) => {
    const { theme } = useFela();

    const styleProps = {
      isActive,
      isDropdown,
      theme,
    };

    const { size = 14, color = theme.tokens.inputControl } = getThemeStyle(
      'navItemArrow',
      theme
    );

    return (
      <Click
        ref={ref}
        {...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.displayName = 'NavItem';

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,
};