@atlaskit/page/dist/cjs/page.js

A page layout organizes sections on a page using a grid and grid columns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("@emotion/react");
var _constants = require("./constants");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var bannerStyles = (0, _react.css)({
  width: '100%',
  position: 'fixed'
});
var bannerContainerStyles = (0, _react.css)({
  width: '100%',
  position: 'relative',
  zIndex: 3,
  flex: '1 0 auto',
  transition: 'height 0.25s ease-in-out'
});
var pageContentStyles = (0, _react.css)({
  minWidth: 0,
  position: 'relative',
  zIndex: 1,
  flex: '1 1 auto'
});
var wrapperStyles = (0, _react.css)({
  display: 'flex',
  width: '100%',
  minHeight: '100%',
  flexDirection: 'column'
});
var mainContainerStyles = (0, _react.css)({
  display: 'flex',
  flex: '1 1 auto'
});
var navigationStyles = (0, _react.css)({
  position: 'relative',
  zIndex: 2
});

/**
 * __Page__
 *
 * Used to build page layouts.
 *
 * Has built in support for positioning [banners](https://atlassian.design/components/banner/examples)
 * and the deprecated `@atlaskit/navigation`.
 *
 * - [Examples](https://atlaskit.atlassian.com/packages/design-system/page)
 */
var Page = function Page(_ref) {
  var _ref$isBannerOpen = _ref.isBannerOpen,
    isBannerOpen = _ref$isBannerOpen === void 0 ? false : _ref$isBannerOpen,
    _ref$bannerHeight = _ref.bannerHeight,
    bannerHeight = _ref$bannerHeight === void 0 ? _constants.defaultBannerHeight : _ref$bannerHeight,
    banner = _ref.banner,
    navigation = _ref.navigation,
    children = _ref.children,
    testId = _ref.testId;
  return (0, _react.jsx)("div", {
    css: wrapperStyles,
    "data-testid": testId
  }, banner ? (0, _react.jsx)("div", {
    css: bannerContainerStyles,
    style: {
      height: isBannerOpen ? "".concat(bannerHeight, "px") : '0'
    },
    "aria-hidden": !isBannerOpen,
    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined
  }, (0, _react.jsx)("div", {
    css: bannerStyles
  }, banner)) : null, (0, _react.jsx)("div", {
    css: mainContainerStyles
  }, (0, _react.jsx)("div", {
    css: navigationStyles
  }, navigation), (0, _react.jsx)("div", {
    css: pageContentStyles
  }, children)));
};
var _default = exports.default = Page;