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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavItem = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactFela = require("react-fela");

var _click = require("../click");

var _arrow = require("../arrow");

var _inline = require("../inline");

var _getThemeStyle2 = require("../../get-theme-style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

var NavItem = _react.default.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 = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

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

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

exports.NavItem = NavItem;
NavItem.displayName = 'NavItem';
NavItem.propTypes = {
  children: _propTypes.default.node,

  /** Indicate if the NavItem will open a dropdown menu */
  isDropdown: _propTypes.default.bool,

  /** Indicate if the NavItem is in an active state */
  isActive: _propTypes.default.bool
};