vcc-ui/es/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.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

var navItemStyle = function navItemStyle(_ref) {
  var _ref2;

  var isActive = _ref.isActive,
      isDropdown = _ref.isDropdown,
      theme = _ref.theme;
  return _ref2 = {
    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
  }, _defineProperty(_ref2, theme.breakpoints.untilL, {
    width: '100%',
    display: 'block',
    extend: {
      condition: isDropdown,
      style: {
        display: 'flex',
        justifyContent: 'space-between'
      }
    }
  }), _defineProperty(_ref2, 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
      }
    }
  }), _ref2;
};

export var NavItem = React.forwardRef(function (_ref3, ref) {
  var _ref4, _ref5;

  var children = _ref3.children,
      _ref3$isDropdown = _ref3.isDropdown,
      isDropdown = _ref3$isDropdown === void 0 ? false : _ref3$isDropdown,
      _ref3$isActive = _ref3.isActive,
      isActive = _ref3$isActive === void 0 ? false : _ref3$isActive,
      props = _objectWithoutProperties(_ref3, ["children", "isDropdown", "isActive"]);

  var _useFela = useFela(),
      theme = _useFela.theme;

  var styleProps = {
    isActive: isActive,
    isDropdown: isDropdown,
    theme: theme
  };

  var _getThemeStyle = getThemeStyle('navItemArrow', theme),
      _getThemeStyle$size = _getThemeStyle.size,
      size = _getThemeStyle$size === void 0 ? 14 : _getThemeStyle$size,
      _getThemeStyle$color = _getThemeStyle.color,
      color = _getThemeStyle$color === void 0 ? theme.tokens.inputControl : _getThemeStyle$color;

  return React.createElement(Click, _extends({
    ref: ref
  }, props, {
    extend: [navItemStyle(styleProps), getThemeStyle('navItem', theme, styleProps)]
  }), children, isDropdown && React.createElement(React.Fragment, null, React.createElement(Inline, {
    extend: (_ref4 = {}, _defineProperty(_ref4, theme.breakpoints.untilL, {
      display: 'none'
    }), _defineProperty(_ref4, "marginLeft", 8), _defineProperty(_ref4, "verticalAlign", 'middle'), _ref4)
  }, React.createElement(Arrow, {
    direction: isActive ? 'up' : 'down',
    size: size,
    color: color
  })), React.createElement(Inline, {
    extend: (_ref5 = {}, _defineProperty(_ref5, theme.breakpoints.fromL, {
      display: 'none'
    }), _defineProperty(_ref5, "marginLeft", 8), _defineProperty(_ref5, "verticalAlign", 'middle'), _ref5)
  }, React.createElement(Arrow, {
    direction: 'right',
    size: size,
    color: color
  }))));
});
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
};