@atlaskit/page-layout/dist/cjs/components/slots/page-layout.js

A collection of components which let you compose an application's page layout.

"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 _responsive = require("@atlaskit/primitives/responsive");
var _constants = require("../../common/constants");
var _controllers = require("../../controllers");
var _skipLinks = require("../skip-links");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
var gridTemplateAreasMobile = "\n".concat("\n  \"", _constants.LEFT_PANEL, " ").concat(_constants.BANNER, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, "\"\n ");
var gridTemplateAreas = "\n".concat("\n  \"", _constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  ", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n", "\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
var gridStyles = (0, _react2.css)({
  display: 'grid',
  height: '100%',
  gridTemplateAreas: gridTemplateAreas,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(_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
  gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
  outline: 'none'
});
var gridStylesMobileStyles = (0, _react2.css)((0, _defineProperty2.default)({}, _responsive.UNSAFE_media.below.sm, {
  gridTemplateAreas: gridTemplateAreasMobile,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr)")
}));

/**
 * __Page layout__
 *
 * A collection of components which let you compose an application's page layout.
 *
 * - [Examples](https://atlassian.design/components/page-layout/examples)
 * - [Code](https://atlassian.design/components/page-layout/code)
 */
var PageLayout = function PageLayout(_ref) {
  var _ref$skipLinksLabel = _ref.skipLinksLabel,
    skipLinksLabel = _ref$skipLinksLabel === void 0 ? _constants.DEFAULT_I18N_PROPS_SKIP_LINKS : _ref$skipLinksLabel,
    children = _ref.children,
    testId = _ref.testId,
    onLeftSidebarExpand = _ref.onLeftSidebarExpand,
    onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_controllers.SkipLinksController, null, (0, _react2.jsx)(_skipLinks.SkipLinkWrapper, {
    skipLinksLabel: skipLinksLabel
  }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
    "data-testid": testId,
    css: [gridStyles, gridStylesMobileStyles],
    tabIndex: -1,
    "data-vc": "page-layout"
  }), (0, _react2.jsx)(_controllers.SidebarResizeController, {
    onLeftSidebarCollapse: onLeftSidebarCollapse,
    onLeftSidebarExpand: onLeftSidebarExpand
  }, children))));
};
var _default = exports.default = PageLayout;