@atlaskit/page/dist/esm/page.js

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

/* page.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./page.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { defaultBannerHeight } from './constants';
var styles = {
  banner: "_1bsb1osq _kqsw1n9t",
  bannerContainer: "_16jlkb7n _1o9zidpf _i0dl1wug _v564evma _1bsb1osq _kqswh2mm _1pby11wp",
  pageContent: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _kqswh2mm _1pbykb7n",
  wrapper: "_1e0c1txw _1bsb1osq _1tke1osq _2lx21bp4",
  mainContainer: "_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw",
  navigation: "_kqswh2mm _1pbycs5v"
};

/**
 * __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 ? defaultBannerHeight : _ref$bannerHeight,
    banner = _ref.banner,
    navigation = _ref.navigation,
    children = _ref.children,
    testId = _ref.testId;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId,
    className: ax([styles.wrapper])
  }, banner ? /*#__PURE__*/React.createElement("div", {
    style: {
      height: isBannerOpen ? "".concat(bannerHeight, "px") : '0'
    },
    "aria-hidden": !isBannerOpen,
    "data-testid": testId ? "".concat(testId, "--banner-container") : undefined,
    className: ax([styles.bannerContainer])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.banner])
  }, banner)) : null, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.mainContainer])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.navigation])
  }, navigation), /*#__PURE__*/React.createElement("div", {
    className: ax([styles.pageContent])
  }, children)));
};
export default Page;