@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
81 lines (77 loc) • 3.65 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _constants = require("../../common/constants");
var _utils = require("../../common/utils");
var _controllers = require("../../controllers");
var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var bannerStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: _constants.BANNER_HEIGHT,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
gridArea: _constants.BANNER
});
var bannerFixedStyles = (0, _react2.css)({
position: 'fixed',
zIndex: 2,
insetBlockStart: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetInlineEnd: _constants.RIGHT_PANEL_WIDTH,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
insetInlineStart: _constants.LEFT_PANEL_WIDTH
});
/**
* __Banner__
*
* Provides a slot for a Banner within the PageLayout.
*
* - [Examples](https://atlassian.design/components/page-layout/examples)
* - [Code](https://atlassian.design/components/page-layout/code)
*/
var Banner = function Banner(props) {
var children = props.children,
_props$height = props.height,
height = _props$height === void 0 ? _constants.DEFAULT_BANNER_HEIGHT : _props$height,
_props$isFixed = props.isFixed,
isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
shouldPersistHeight = props.shouldPersistHeight,
testId = props.testId,
skipLinkTitle = props.skipLinkTitle,
id = props.id;
var bannerHeight = (0, _utils.resolveDimension)(_constants.VAR_BANNER_HEIGHT, height, shouldPersistHeight);
(0, _react.useEffect)(function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, bannerHeight));
return function () {
(0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_BANNER_HEIGHT, 0));
};
}, [bannerHeight]);
(0, _controllers.useSkipLink)(id, skipLinkTitle);
return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
var className = _ref.className;
return (0, _react2.jsx)("div", (0, _extends2.default)({
css: [bannerStyles, isFixed && bannerFixedStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className,
"data-testid": testId,
id: id
}, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _react2.jsx)(_slotDimensions.default, {
variableName: _constants.VAR_BANNER_HEIGHT,
value: bannerHeight
}), children);
});
};
var _default = exports.default = Banner;