@atlaskit/page
Version:
A page layout organizes sections on a page using a grid and grid columns.
53 lines (52 loc) • 1.82 kB
JavaScript
/* 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';
const 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)
*/
const Page = ({
isBannerOpen = false,
bannerHeight = defaultBannerHeight,
banner,
navigation,
children,
testId
}) => {
return /*#__PURE__*/React.createElement("div", {
"data-testid": testId,
className: ax([styles.wrapper])
}, banner ? /*#__PURE__*/React.createElement("div", {
style: {
height: isBannerOpen ? `${bannerHeight}px` : '0'
},
"aria-hidden": !isBannerOpen,
"data-testid": testId ? `${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;