@atlaskit/page-header
Version:
A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.
53 lines (51 loc) • 2.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _actionsWrapper = _interopRequireDefault(require("./actions-wrapper"));
var _bottomBar = _interopRequireDefault(require("./bottom-bar"));
var _outerWrapper = _interopRequireDefault(require("./outer-wrapper"));
var _title = _interopRequireDefault(require("./title"));
var _titleContainer = _interopRequireDefault(require("./title-container"));
var _titleWrapper = _interopRequireDefault(require("./title-wrapper"));
// TODO: Remove this eslint-disable when prop names have been renamed.
// This rule is here as prop name changes are a major as they are used
// by our consumers. This can be done in the next lite-mode conversion.
/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
/**
* __Page header__
*
* A page header defines the top of a page. It contains a title and can be optionally combined with
* breadcrumbs buttons, search, and filters.
*
* - [Examples](https://atlassian.design/components/page-header/examples)
* - [Code](https://atlassian.design/components/page-header/code)
* - [Usage](https://atlassian.design/components/page-header/usage)
*/
var PageHeader = function PageHeader(_ref) {
var innerRef = _ref.innerRef,
breadcrumbs = _ref.breadcrumbs,
actions = _ref.actions,
bottomBar = _ref.bottomBar,
children = _ref.children,
id = _ref.id,
_ref$disableTitleStyl = _ref.disableTitleStyles,
disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
_ref$truncateTitle = _ref.truncateTitle,
truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle,
testId = _ref.testId;
return /*#__PURE__*/_react.default.createElement(_outerWrapper.default, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_titleWrapper.default, {
truncateTitle: truncateTitle
}, /*#__PURE__*/_react.default.createElement(_titleContainer.default, {
truncateTitle: truncateTitle
}, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_title.default, {
ref: innerRef,
truncateTitle: truncateTitle,
id: id,
testId: testId
}, children)), actions && /*#__PURE__*/_react.default.createElement(_actionsWrapper.default, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_bottomBar.default, null, " ", bottomBar, " "));
};
var _default = exports.default = PageHeader;