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.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
  }, _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: 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
      }
    }
  }), _ref2;
};

export function NavItem(_ref3) {
  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.colors.primary : _getThemeStyle$color;

  return React.createElement(Click, _extends({}, 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.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
};