vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
120 lines • 3.15 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React, { forwardRef } from 'react';
import { useTheme } from '../../styling/use-theme';
import { Click } from '../click';
import { Icon } from '../icon';
import { Inline } from '../inline';
import { useKeyboardNavigation } from '../nav';
const navItemStyle = _ref => {
let {
isActive,
isDropdown,
theme
} = _ref;
return {
color: theme.color.foreground.primary,
fontSize: 20,
lineHeight: 1.3,
padding: '18px 0',
minHeight: 20,
alignItems: 'center',
textAlign: 'left',
boxSizing: 'content-box',
fontWeight: 300,
fontFamily: theme.fontTypes.NOVUM,
letterSpacing: 0.3,
borderBottomWidth: 1,
borderBottomStyle: 'solid',
borderBottomColor: theme.color.ornament.divider,
[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-visible': {
borderBottomColor: 'transparent'
},
':hover': {
borderBottomColor: theme.color.ornament.highlight
},
extend: {
condition: isActive,
style: {
borderBottomColor: theme.color.ornament.highlight
}
}
}
};
};
/**
* @deprecated
*/
export const NavItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
let {
children,
isDropdown = false,
isActive = false,
...props
} = _ref2;
const theme = useTheme();
const keyboardNavigationProps = useKeyboardNavigation({
ref,
onKeyDown: props.onKeyDown
});
const styleProps = {
isActive,
isDropdown,
theme
};
return /*#__PURE__*/React.createElement(Click, _extends({}, props, keyboardNavigationProps, {
extend: navItemStyle(styleProps)
}), children, isDropdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Inline, {
extend: {
[theme.breakpoints.untilL]: {
display: 'none'
},
marginLeft: 8,
verticalAlign: 'middle'
}
}, /*#__PURE__*/React.createElement(Icon, {
type: isActive ? 'navigation-chevronup-12' : 'navigation-chevrondown-12',
color: "action"
})), /*#__PURE__*/React.createElement(Inline, {
extend: {
[theme.breakpoints.fromL]: {
display: 'none'
},
marginLeft: 8,
verticalAlign: 'middle'
}
}, /*#__PURE__*/React.createElement(Icon, {
type: "navigation-chevronforward-16",
color: "action"
}))));
});
NavItem.displayName = 'NavItem';
NavItem.propTypes = {
// @ts-ignore
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
};