@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
38 lines (37 loc) • 1.53 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["badge", "tooltip"];
import React, { forwardRef } from 'react';
import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
import { useTheme } from '../../theme';
import { BadgeContainer } from '../BadgeContainer';
import { IconButton } from '../IconButton';
var HELP_NOTIFICATION_BADGE_ID = 'atlassian-navigation-help-notification-count';
/**
* __Help__
*
* A help button that can be passed into `AtlassianNavigation`'s `renderHelp` prop.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#help)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
export var Help = /*#__PURE__*/forwardRef(function (props, ref) {
var badge = props.badge,
tooltip = props.tooltip,
iconButtonProps = _objectWithoutProperties(props, _excluded);
var _useTheme = useTheme(),
navigation = _useTheme.mode.navigation;
var button = /*#__PURE__*/React.createElement(IconButton, _extends({
icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
label: typeof tooltip === 'string' ? tooltip : 'Help Icon',
secondaryColor: navigation.backgroundColor
}),
ref: ref,
tooltip: tooltip
}, iconButtonProps));
return badge ? /*#__PURE__*/React.createElement(BadgeContainer, {
id: HELP_NOTIFICATION_BADGE_ID,
badge: badge
}, button) : button;
});
export default Help;