UNPKG

@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
"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;