@atlaskit/page - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

CHANGELOG.md

@@ -1,6 +0,11 @@
-<a name="2.0.2"></a>
-## 2.0.2 (2017-02-10)
+<a name="3.0.0"></a>
+# 3.0.0 (2017-02-10)
 
 
 
+<a name="3.0.0"></a>
+# 3.0.0 (2017-02-10)
+
+
+
 <a name="2.0.2"></a>
@@ -12,6 +17,23 @@ ## 2.0.2 (2017-02-09)
 
+* **component:** Grids no longer have a min-height ([8491a1d](https://bitbucket.org/atlassian/atlaskit/commits/8491a1d))
 * **performance:** avoiding binding render to this ([40c9951](https://bitbucket.org/atlassian/atlaskit/commits/40c9951))
 
 
+### Features
 
+* **component:** Add [@atlaskit](https://github.com/atlaskit)/navigation support to Page ([fcb10f1](https://bitbucket.org/atlassian/atlaskit/commits/fcb10f1))
+* **component:** add isBannerOpen to Page, to allow integration with the Banner component ([9444506](https://bitbucket.org/atlassian/atlaskit/commits/9444506))
+* **component:** add support to Page for navigation width resizing ([9ffa440](https://bitbucket.org/atlassian/atlaskit/commits/9ffa440))
+* **component:** Page now has props for navigation and banner and positions them accordingly ([f7fc87a](https://bitbucket.org/atlassian/atlaskit/commits/f7fc87a))
+
+
+### BREAKING CHANGES
+
+* component: navigation no longer explicitly 100vh in height. It gets the height from the page
+
+slot instead.
+* component: grids no longer have a min-height
+
+
+
 <a name="2.0.1"></a>
@@ -18,0 +40,0 @@ ## 2.0.1 (2017-02-06)

dist/bundle-cjs.js

@@ -202,3 +202,3 @@ module.exports = /******/
     var _taggedTemplateLiteral2 = __webpack_require__(13), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  min-height: 100%;\n  padding: 0 ", ";\n  position: relative;\n" ], [ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  min-height: 100%;\n  padding: 0 ", ";\n  position: relative;\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _vars = __webpack_require__(11), getMargin = function(props) {
+    _taggedTemplateLiteral3.default)([ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  padding: 0 ", ";\n  position: relative;\n" ], [ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  padding: 0 ", ";\n  position: relative;\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _vars = __webpack_require__(11), getMargin = function(props) {
         return props.theme.isNestedGrid ? "-" + _vars.spacing[props.theme.spacing] + "px" : "auto";
@@ -312,3 +312,12 @@ }, getMaxWidth = function(props) {
     var _getPrototypeOf = __webpack_require__(4), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(5), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(6), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(7), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(8), _inherits3 = _interopRequireDefault(_inherits2), _taggedTemplateLiteral2 = __webpack_require__(13), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  min-height: 100%;\n  width: 100%;\n" ], [ "\n  min-height: 100%;\n  width: 100%;\n" ]), _react = __webpack_require__(9), _react2 = _interopRequireDefault(_react), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Wrapper = _styledComponents2.default.div(_templateObject), PageContent = _styledComponents2.default.div(_templateObject), Page = function(_PureComponent) {
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n" ]), _templateObject3 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ", "px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ", "px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n" ]), _templateObject4 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  position: fixed;\n  width: 100%;\n" ], [ "\n  position: fixed;\n  width: 100%;\n" ]), _templateObject5 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n" ]), _templateObject6 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ", "px);\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ", "px);\n" ]), _react = __webpack_require__(9), _react2 = _interopRequireDefault(_react), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Wrapper = _styledComponents2.default.div(_templateObject), NavigationAndContent = _styledComponents2.default.div(_templateObject2), BannerContainer = _styledComponents2.default.div(_templateObject3, function(props) {
+        return props.isBannerOpen ? 52 : 0;
+    }), Banner = _styledComponents2.default.div(_templateObject4), Navigation = _styledComponents2.default.div(_templateObject5), PageContent = _styledComponents2.default.div(_templateObject6, function(props) {
+        return props.navigationWidth;
+    }), Page = function(_PureComponent) {
         function Page() {
@@ -321,5 +330,10 @@ return (0, _classCallCheck3.default)(this, Page), (0, _possibleConstructorReturn3.default)(this, (Page.__proto__ || (0,
             value: function() {
-                return _react2.default.createElement(Wrapper, null, _react2.default.createElement(_styledComponents.ThemeProvider, {
+                return _react2.default.createElement(_styledComponents.ThemeProvider, {
                     theme: {}
-                }, _react2.default.createElement(PageContent, null, this.props.children)));
+                }, _react2.default.createElement(Wrapper, null, _react2.default.createElement(BannerContainer, {
+                    "aria-hidden": this.props.isBannerOpen,
+                    isBannerOpen: this.props.isBannerOpen
+                }, _react2.default.createElement(Banner, null, this.props.banner)), _react2.default.createElement(NavigationAndContent, null, _react2.default.createElement(Navigation, null, this.props.navigation), _react2.default.createElement(PageContent, {
+                    navigationWidth: this.props.navigationWidth
+                }, this.props.children))));
             }
@@ -329,4 +343,11 @@ } ]), Page;
     Page.displayName = "AkPage", Page.propTypes = {
-        children: _react.PropTypes.node
+        banner: _react.PropTypes.node,
+        children: _react.PropTypes.node,
+        isBannerOpen: _react.PropTypes.bool,
+        navigation: _react.PropTypes.node,
+        navigationWidth: _react.PropTypes.number
+    }, Page.defaultProps = {
+        isBannerOpen: !1,
+        navigationWidth: 0
     }, exports.default = Page;
 } ]);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.GridColumn=t.Grid=void 0;var i=n(2);Object.defineProperty(t,"Grid",{enumerable:!0,get:function(){return r(i).default}});var u=n(14);Object.defineProperty(t,"GridColumn",{enumerable:!0,get:function(){return r(u).default}});var a=n(16),o=r(a);t.default=o.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,u,a=n(3),o=r(a),l=n(4),d=r(l),s=n(5),c=r(s),f=n(6),p=r(f),m=n(7),h=r(m),g=n(8),x=r(g),y=n(9),v=r(y),_=n(10),b=n(11),P=n(12),w=r(P);t.default=(0,_.withTheme)((u=i=function(e){function t(){var e,n,r,i;(0,c.default)(this,t);for(var u=arguments.length,a=Array(u),o=0;o<u;o++)a[o]=arguments[o];return n=r=(0,h.default)(this,(e=t.__proto__||(0,d.default)(t)).call.apply(e,[this].concat(a))),r.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:b.defaultGridColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:e.spacing,isNestedGrid:!(!e.theme||!e.theme.isNestedGrid)&&e.theme.isNestedGrid}},i=n,(0,h.default)(r,i)}return(0,x.default)(t,e),(0,p.default)(t,[{key:"render",value:function(){return v.default.createElement(_.ThemeProvider,{theme:this.getTheme(this.props)},v.default.createElement(w.default,{spacing:this.props.spacing,layout:this.props.layout},this.props.children))}}]),t}(y.PureComponent),i.propTypes={children:y.PropTypes.node,spacing:y.PropTypes.oneOf((0,o.default)(b.spacing)),layout:y.PropTypes.oneOf(b.layout)},i.defaultProps={spacing:"cosy",layout:"fixed"},u))},function(e,t){e.exports=require("babel-runtime/core-js/object/keys")},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=t.defaultGridSize=8;t.defaultGridColumns=12,t.defaultGridColumnWidth=10*n,t.spacing={comfortable:5*n,cosy:2*n,compact:.5*n},t.layout=["fixed","fluid"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getPadding=t.getMaxWidth=t.getMargin=void 0;var i=n(13),u=r(i),a=(0,u.default)(["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  min-height: 100%;\n  padding: 0 ",";\n  position: relative;\n"],["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  min-height: 100%;\n  padding: 0 ",";\n  position: relative;\n"]),o=n(10),l=r(o),d=n(11),s=function(e){return e.theme.isNestedGrid?"-"+d.spacing[e.theme.spacing]+"px":"auto"},c=function(e){return"fixed"===e.layout?d.defaultGridColumnWidth*e.theme.columns+"px":"100%"},f=function(e){return d.spacing[e.theme.spacing]/2+"px"},p=l.default.div(a,s,c,f);t.default=p,t.getMargin=s,t.getMaxWidth=c,t.getPadding=f},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,u,a=n(4),o=r(a),l=n(5),d=r(l),s=n(6),c=r(s),f=n(7),p=r(f),m=n(8),h=r(m),g=n(9),x=r(g),y=n(10),v=n(11),_=n(15),b=r(_),P="cosy";t.default=(0,y.withTheme)((u=i=function(e){function t(){var e,n,r,i;(0,d.default)(this,t);for(var u=arguments.length,a=Array(u),l=0;l<u;l++)a[l]=arguments[l];return n=r=(0,p.default)(this,(e=t.__proto__||(0,o.default)(t)).call.apply(e,[this].concat(a))),r.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:v.defaultColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:P,isNestedGrid:!1}},r.getNestedTheme=function(e){return{columns:e.medium,spacing:e.theme&&e.theme.spacing?e.theme.spacing:P,isNestedGrid:!0}},i=n,(0,p.default)(r,i)}return(0,h.default)(t,e),(0,c.default)(t,[{key:"render",value:function(){return x.default.createElement(y.ThemeProvider,{theme:this.getTheme(this.props)},x.default.createElement(b.default,{medium:this.props.medium},x.default.createElement(y.ThemeProvider,{theme:this.getNestedTheme(this.props)},x.default.createElement("div",null,this.props.children))))}}]),t}(g.PureComponent),i.propTypes={medium:g.PropTypes.number,children:g.PropTypes.node},i.defaultProps={medium:0},u))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getColumnWidth=void 0;var i=n(13),u=r(i),a=(0,u.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"]),o=n(10),l=r(o),d=n(11),s=function(e){return e.medium===e.theme.columns?"100%":"99.9999% / "+e.theme.columns+" * "+e.medium},c=function(e){return e.medium>0?"calc("+s(e)+" - "+d.spacing[e.theme.spacing]+"px)":"auto"},f=function(e){return e.theme.columns},p=function(e){return e.medium?e.medium:f(e)},m=function(e){return Math.min(f(e),p(e))},h=function(e){return d.spacing[e.theme.spacing]},g=function(e){return m(e)>=f(e)?"100%":"99.9999% / "+f(e)+" * "+m(e)},x=l.default.div(a,c,function(e){return d.spacing[e.theme.spacing]/2},g,h,f,h);t.default=x,t.getColumnWidth=c},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(4),u=r(i),a=n(5),o=r(a),l=n(6),d=r(l),s=n(7),c=r(s),f=n(8),p=r(f),m=n(13),h=r(m),g=(0,h.default)(["\n  min-height: 100%;\n  width: 100%;\n"],["\n  min-height: 100%;\n  width: 100%;\n"]),x=n(9),y=r(x),v=n(10),_=r(v),b=_.default.div(g),P=_.default.div(g),w=function(e){function t(){return(0,o.default)(this,t),(0,c.default)(this,(t.__proto__||(0,u.default)(t)).apply(this,arguments))}return(0,p.default)(t,e),(0,d.default)(t,[{key:"render",value:function(){return y.default.createElement(b,null,y.default.createElement(v.ThemeProvider,{theme:{}},y.default.createElement(P,null,this.props.children)))}}]),t}(x.PureComponent);w.displayName="AkPage",w.propTypes={children:x.PropTypes.node},t.default=w}]);
+module.exports=function(e){function n(i){if(t[i])return t[i].exports;var r=t[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.GridColumn=n.Grid=void 0;var r=t(2);Object.defineProperty(n,"Grid",{enumerable:!0,get:function(){return i(r).default}});var a=t(14);Object.defineProperty(n,"GridColumn",{enumerable:!0,get:function(){return i(a).default}});var u=t(16),l=i(u);n.default=l.default},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r,a,u=t(3),l=i(u),o=t(4),s=i(o),d=t(5),f=i(d),p=t(6),c=i(p),h=t(7),m=i(h),x=t(8),g=i(x),v=t(9),y=i(v),b=t(10),_=t(11),w=t(12),P=i(w);n.default=(0,b.withTheme)((a=r=function(e){function n(){var e,t,i,r;(0,f.default)(this,n);for(var a=arguments.length,u=Array(a),l=0;l<a;l++)u[l]=arguments[l];return t=i=(0,m.default)(this,(e=n.__proto__||(0,s.default)(n)).call.apply(e,[this].concat(u))),i.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:_.defaultGridColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:e.spacing,isNestedGrid:!(!e.theme||!e.theme.isNestedGrid)&&e.theme.isNestedGrid}},r=t,(0,m.default)(i,r)}return(0,g.default)(n,e),(0,c.default)(n,[{key:"render",value:function(){return y.default.createElement(b.ThemeProvider,{theme:this.getTheme(this.props)},y.default.createElement(P.default,{spacing:this.props.spacing,layout:this.props.layout},this.props.children))}}]),n}(v.PureComponent),r.propTypes={children:v.PropTypes.node,spacing:v.PropTypes.oneOf((0,l.default)(_.spacing)),layout:v.PropTypes.oneOf(_.layout)},r.defaultProps={spacing:"cosy",layout:"fixed"},a))},function(e,n){e.exports=require("babel-runtime/core-js/object/keys")},function(e,n){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,n){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,n){e.exports=require("babel-runtime/helpers/createClass")},function(e,n){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,n){e.exports=require("babel-runtime/helpers/inherits")},function(e,n){e.exports=require("react")},function(e,n){e.exports=require("styled-components")},function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=n.defaultGridSize=8;n.defaultGridColumns=12,n.defaultGridColumnWidth=10*t,n.spacing={comfortable:5*t,cosy:2*t,compact:.5*t},n.layout=["fixed","fluid"]},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.getPadding=n.getMaxWidth=n.getMargin=void 0;var r=t(13),a=i(r),u=(0,a.default)(["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  padding: 0 ",";\n  position: relative;\n"],["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  padding: 0 ",";\n  position: relative;\n"]),l=t(10),o=i(l),s=t(11),d=function(e){return e.theme.isNestedGrid?"-"+s.spacing[e.theme.spacing]+"px":"auto"},f=function(e){return"fixed"===e.layout?s.defaultGridColumnWidth*e.theme.columns+"px":"100%"},p=function(e){return s.spacing[e.theme.spacing]/2+"px"},c=o.default.div(u,d,f,p);n.default=c,n.getMargin=d,n.getMaxWidth=f,n.getPadding=p},function(e,n){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r,a,u=t(4),l=i(u),o=t(5),s=i(o),d=t(6),f=i(d),p=t(7),c=i(p),h=t(8),m=i(h),x=t(9),g=i(x),v=t(10),y=t(11),b=t(15),_=i(b),w="cosy";n.default=(0,v.withTheme)((a=r=function(e){function n(){var e,t,i,r;(0,s.default)(this,n);for(var a=arguments.length,u=Array(a),o=0;o<a;o++)u[o]=arguments[o];return t=i=(0,c.default)(this,(e=n.__proto__||(0,l.default)(n)).call.apply(e,[this].concat(u))),i.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:y.defaultColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:w,isNestedGrid:!1}},i.getNestedTheme=function(e){return{columns:e.medium,spacing:e.theme&&e.theme.spacing?e.theme.spacing:w,isNestedGrid:!0}},r=t,(0,c.default)(i,r)}return(0,m.default)(n,e),(0,f.default)(n,[{key:"render",value:function(){return g.default.createElement(v.ThemeProvider,{theme:this.getTheme(this.props)},g.default.createElement(_.default,{medium:this.props.medium},g.default.createElement(v.ThemeProvider,{theme:this.getNestedTheme(this.props)},g.default.createElement("div",null,this.props.children))))}}]),n}(x.PureComponent),r.propTypes={medium:x.PropTypes.number,children:x.PropTypes.node},r.defaultProps={medium:0},a))},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.getColumnWidth=void 0;var r=t(13),a=i(r),u=(0,a.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"]),l=t(10),o=i(l),s=t(11),d=function(e){return e.medium===e.theme.columns?"100%":"99.9999% / "+e.theme.columns+" * "+e.medium},f=function(e){return e.medium>0?"calc("+d(e)+" - "+s.spacing[e.theme.spacing]+"px)":"auto"},p=function(e){return e.theme.columns},c=function(e){return e.medium?e.medium:p(e)},h=function(e){return Math.min(p(e),c(e))},m=function(e){return s.spacing[e.theme.spacing]},x=function(e){return h(e)>=p(e)?"100%":"99.9999% / "+p(e)+" * "+h(e)},g=o.default.div(u,f,function(e){return s.spacing[e.theme.spacing]/2},x,m,p,m);n.default=g,n.getColumnWidth=f},function(e,n,t){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(4),a=i(r),u=t(5),l=i(u),o=t(6),s=i(o),d=t(7),f=i(d),p=t(8),c=i(p),h=t(13),m=i(h),x=(0,m.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n"],["\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n"]),g=(0,m.default)(["\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n"],["\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n"]),v=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ","px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ","px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n"]),y=(0,m.default)(["\n  position: fixed;\n  width: 100%;\n"],["\n  position: fixed;\n  width: 100%;\n"]),b=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n"]),_=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ","px);\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ","px);\n"]),w=t(9),P=i(w),T=t(10),k=i(T),M=k.default.div(x),O=k.default.div(g),C=k.default.div(v,function(e){return e.isBannerOpen?52:0}),G=k.default.div(y),j=k.default.div(b),E=k.default.div(_,function(e){return e.navigationWidth}),W=function(e){function n(){return(0,l.default)(this,n),(0,f.default)(this,(n.__proto__||(0,a.default)(n)).apply(this,arguments))}return(0,c.default)(n,e),(0,s.default)(n,[{key:"render",value:function(){return P.default.createElement(T.ThemeProvider,{theme:{}},P.default.createElement(M,null,P.default.createElement(C,{"aria-hidden":this.props.isBannerOpen,isBannerOpen:this.props.isBannerOpen},P.default.createElement(G,null,this.props.banner)),P.default.createElement(O,null,P.default.createElement(j,null,this.props.navigation),P.default.createElement(E,{navigationWidth:this.props.navigationWidth},this.props.children))))}}]),n}(w.PureComponent);W.displayName="AkPage",W.propTypes={banner:w.PropTypes.node,children:w.PropTypes.node,isBannerOpen:w.PropTypes.bool,navigation:w.PropTypes.node,navigationWidth:w.PropTypes.number},W.defaultProps={isBannerOpen:!1,navigationWidth:0},n.default=W}]);

dist/bundle.js

@@ -205,3 +205,3 @@ !function(root, factory) {
         var _taggedTemplateLiteral2 = __webpack_require__(13), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  min-height: 100%;\n  padding: 0 ", ";\n  position: relative;\n" ], [ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  min-height: 100%;\n  padding: 0 ", ";\n  position: relative;\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _vars = __webpack_require__(11), getMargin = function(props) {
+        _taggedTemplateLiteral3.default)([ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  padding: 0 ", ";\n  position: relative;\n" ], [ "\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ", ";\n  max-width: ", ";\n  padding: 0 ", ";\n  position: relative;\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _vars = __webpack_require__(11), getMargin = function(props) {
             return props.theme.isNestedGrid ? "-" + _vars.spacing[props.theme.spacing] + "px" : "auto";
@@ -315,3 +315,12 @@ }, getMaxWidth = function(props) {
         var _getPrototypeOf = __webpack_require__(4), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(5), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(6), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(7), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(8), _inherits3 = _interopRequireDefault(_inherits2), _taggedTemplateLiteral2 = __webpack_require__(13), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  min-height: 100%;\n  width: 100%;\n" ], [ "\n  min-height: 100%;\n  width: 100%;\n" ]), _react = __webpack_require__(9), _react2 = _interopRequireDefault(_react), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Wrapper = _styledComponents2.default.div(_templateObject), PageContent = _styledComponents2.default.div(_templateObject), Page = function(_PureComponent) {
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n" ], [ "\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n" ]), _templateObject3 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ", "px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ", "px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n" ]), _templateObject4 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  position: fixed;\n  width: 100%;\n" ], [ "\n  position: fixed;\n  width: 100%;\n" ]), _templateObject5 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n" ]), _templateObject6 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ", "px);\n" ], [ "\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ", "px);\n" ]), _react = __webpack_require__(9), _react2 = _interopRequireDefault(_react), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Wrapper = _styledComponents2.default.div(_templateObject), NavigationAndContent = _styledComponents2.default.div(_templateObject2), BannerContainer = _styledComponents2.default.div(_templateObject3, function(props) {
+            return props.isBannerOpen ? 52 : 0;
+        }), Banner = _styledComponents2.default.div(_templateObject4), Navigation = _styledComponents2.default.div(_templateObject5), PageContent = _styledComponents2.default.div(_templateObject6, function(props) {
+            return props.navigationWidth;
+        }), Page = function(_PureComponent) {
             function Page() {
@@ -324,5 +333,10 @@ return (0, _classCallCheck3.default)(this, Page), (0, _possibleConstructorReturn3.default)(this, (Page.__proto__ || (0,
                 value: function() {
-                    return _react2.default.createElement(Wrapper, null, _react2.default.createElement(_styledComponents.ThemeProvider, {
+                    return _react2.default.createElement(_styledComponents.ThemeProvider, {
                         theme: {}
-                    }, _react2.default.createElement(PageContent, null, this.props.children)));
+                    }, _react2.default.createElement(Wrapper, null, _react2.default.createElement(BannerContainer, {
+                        "aria-hidden": this.props.isBannerOpen,
+                        isBannerOpen: this.props.isBannerOpen
+                    }, _react2.default.createElement(Banner, null, this.props.banner)), _react2.default.createElement(NavigationAndContent, null, _react2.default.createElement(Navigation, null, this.props.navigation), _react2.default.createElement(PageContent, {
+                        navigationWidth: this.props.navigationWidth
+                    }, this.props.children))));
                 }
@@ -332,5 +346,12 @@ } ]), Page;
         Page.displayName = "AkPage", Page.propTypes = {
-            children: _react.PropTypes.node
+            banner: _react.PropTypes.node,
+            children: _react.PropTypes.node,
+            isBannerOpen: _react.PropTypes.bool,
+            navigation: _react.PropTypes.node,
+            navigationWidth: _react.PropTypes.number
+        }, Page.defaultProps = {
+            isBannerOpen: !1,
+            navigationWidth: 0
         }, exports.default = Page;
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/keys"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("styled-components"),require("babel-runtime/helpers/taggedTemplateLiteral")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/keys","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","styled-components","babel-runtime/helpers/taggedTemplateLiteral"],t):"object"==typeof exports?exports["@atlaskit/page"]=t(require("babel-runtime/core-js/object/keys"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("styled-components"),require("babel-runtime/helpers/taggedTemplateLiteral")):e["@atlaskit/page"]=t(e["babel-runtime/core-js/object/keys"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["styled-components"],e["babel-runtime/helpers/taggedTemplateLiteral"])}(this,function(e,t,r,n,i,u,l,a,o){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.GridColumn=t.Grid=void 0;var i=r(2);Object.defineProperty(t,"Grid",{enumerable:!0,get:function(){return n(i).default}});var u=r(14);Object.defineProperty(t,"GridColumn",{enumerable:!0,get:function(){return n(u).default}});var l=r(16),a=n(l);t.default=a.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,u,l=r(3),a=n(l),o=r(4),s=n(o),d=r(5),c=n(d),p=r(6),m=n(p),f=r(7),h=n(f),b=r(8),g=n(b),y=r(9),x=n(y),v=r(10),_=r(11),j=r(12),C=n(j);t.default=(0,v.withTheme)((u=i=function(e){function t(){var e,r,n,i;(0,c.default)(this,t);for(var u=arguments.length,l=Array(u),a=0;a<u;a++)l[a]=arguments[a];return r=n=(0,h.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(l))),n.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:_.defaultGridColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:e.spacing,isNestedGrid:!(!e.theme||!e.theme.isNestedGrid)&&e.theme.isNestedGrid}},i=r,(0,h.default)(n,i)}return(0,g.default)(t,e),(0,m.default)(t,[{key:"render",value:function(){return x.default.createElement(v.ThemeProvider,{theme:this.getTheme(this.props)},x.default.createElement(C.default,{spacing:this.props.spacing,layout:this.props.layout},this.props.children))}}]),t}(y.PureComponent),i.propTypes={children:y.PropTypes.node,spacing:y.PropTypes.oneOf((0,a.default)(_.spacing)),layout:y.PropTypes.oneOf(_.layout)},i.defaultProps={spacing:"cosy",layout:"fixed"},u))},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=i},function(e,t){e.exports=u},function(e,t){e.exports=l},function(e,t){e.exports=a},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=t.defaultGridSize=8;t.defaultGridColumns=12,t.defaultGridColumnWidth=10*r,t.spacing={comfortable:5*r,cosy:2*r,compact:.5*r},t.layout=["fixed","fluid"]},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getPadding=t.getMaxWidth=t.getMargin=void 0;var i=r(13),u=n(i),l=(0,u.default)(["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  min-height: 100%;\n  padding: 0 ",";\n  position: relative;\n"],["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  min-height: 100%;\n  padding: 0 ",";\n  position: relative;\n"]),a=r(10),o=n(a),s=r(11),d=function(e){return e.theme.isNestedGrid?"-"+s.spacing[e.theme.spacing]+"px":"auto"},c=function(e){return"fixed"===e.layout?s.defaultGridColumnWidth*e.theme.columns+"px":"100%"},p=function(e){return s.spacing[e.theme.spacing]/2+"px"},m=o.default.div(l,d,c,p);t.default=m,t.getMargin=d,t.getMaxWidth=c,t.getPadding=p},function(e,t){e.exports=o},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,u,l=r(4),a=n(l),o=r(5),s=n(o),d=r(6),c=n(d),p=r(7),m=n(p),f=r(8),h=n(f),b=r(9),g=n(b),y=r(10),x=r(11),v=r(15),_=n(v),j="cosy";t.default=(0,y.withTheme)((u=i=function(e){function t(){var e,r,n,i;(0,s.default)(this,t);for(var u=arguments.length,l=Array(u),o=0;o<u;o++)l[o]=arguments[o];return r=n=(0,m.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(l))),n.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:x.defaultColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:j,isNestedGrid:!1}},n.getNestedTheme=function(e){return{columns:e.medium,spacing:e.theme&&e.theme.spacing?e.theme.spacing:j,isNestedGrid:!0}},i=r,(0,m.default)(n,i)}return(0,h.default)(t,e),(0,c.default)(t,[{key:"render",value:function(){return g.default.createElement(y.ThemeProvider,{theme:this.getTheme(this.props)},g.default.createElement(_.default,{medium:this.props.medium},g.default.createElement(y.ThemeProvider,{theme:this.getNestedTheme(this.props)},g.default.createElement("div",null,this.props.children))))}}]),t}(b.PureComponent),i.propTypes={medium:b.PropTypes.number,children:b.PropTypes.node},i.defaultProps={medium:0},u))},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getColumnWidth=void 0;var i=r(13),u=n(i),l=(0,u.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"]),a=r(10),o=n(a),s=r(11),d=function(e){return e.medium===e.theme.columns?"100%":"99.9999% / "+e.theme.columns+" * "+e.medium},c=function(e){return e.medium>0?"calc("+d(e)+" - "+s.spacing[e.theme.spacing]+"px)":"auto"},p=function(e){return e.theme.columns},m=function(e){return e.medium?e.medium:p(e)},f=function(e){return Math.min(p(e),m(e))},h=function(e){return s.spacing[e.theme.spacing]},b=function(e){return f(e)>=p(e)?"100%":"99.9999% / "+p(e)+" * "+f(e)},g=o.default.div(l,c,function(e){return s.spacing[e.theme.spacing]/2},b,h,p,h);t.default=g,t.getColumnWidth=c},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(4),u=n(i),l=r(5),a=n(l),o=r(6),s=n(o),d=r(7),c=n(d),p=r(8),m=n(p),f=r(13),h=n(f),b=(0,h.default)(["\n  min-height: 100%;\n  width: 100%;\n"],["\n  min-height: 100%;\n  width: 100%;\n"]),g=r(9),y=n(g),x=r(10),v=n(x),_=v.default.div(b),j=v.default.div(b),C=function(e){function t(){return(0,a.default)(this,t),(0,c.default)(this,(t.__proto__||(0,u.default)(t)).apply(this,arguments))}return(0,m.default)(t,e),(0,s.default)(t,[{key:"render",value:function(){return y.default.createElement(_,null,y.default.createElement(x.ThemeProvider,{theme:{}},y.default.createElement(j,null,this.props.children)))}}]),t}(g.PureComponent);C.displayName="AkPage",C.propTypes={children:g.PropTypes.node},t.default=C}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/keys"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("styled-components"),require("babel-runtime/helpers/taggedTemplateLiteral")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/keys","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","styled-components","babel-runtime/helpers/taggedTemplateLiteral"],t):"object"==typeof exports?exports["@atlaskit/page"]=t(require("babel-runtime/core-js/object/keys"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("styled-components"),require("babel-runtime/helpers/taggedTemplateLiteral")):e["@atlaskit/page"]=t(e["babel-runtime/core-js/object/keys"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["styled-components"],e["babel-runtime/helpers/taggedTemplateLiteral"])}(this,function(e,t,n,r,i,a,l,u,o){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.GridColumn=t.Grid=void 0;var i=n(2);Object.defineProperty(t,"Grid",{enumerable:!0,get:function(){return r(i).default}});var a=n(14);Object.defineProperty(t,"GridColumn",{enumerable:!0,get:function(){return r(a).default}});var l=n(16),u=r(l);t.default=u.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,a,l=n(3),u=r(l),o=n(4),s=r(o),d=n(5),p=r(d),c=n(6),f=r(c),h=n(7),m=r(h),b=n(8),g=r(b),x=n(9),y=r(x),v=n(10),_=n(11),w=n(12),P=r(w);t.default=(0,v.withTheme)((a=i=function(e){function t(){var e,n,r,i;(0,p.default)(this,t);for(var a=arguments.length,l=Array(a),u=0;u<a;u++)l[u]=arguments[u];return n=r=(0,m.default)(this,(e=t.__proto__||(0,s.default)(t)).call.apply(e,[this].concat(l))),r.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:_.defaultGridColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:e.spacing,isNestedGrid:!(!e.theme||!e.theme.isNestedGrid)&&e.theme.isNestedGrid}},i=n,(0,m.default)(r,i)}return(0,g.default)(t,e),(0,f.default)(t,[{key:"render",value:function(){return y.default.createElement(v.ThemeProvider,{theme:this.getTheme(this.props)},y.default.createElement(P.default,{spacing:this.props.spacing,layout:this.props.layout},this.props.children))}}]),t}(x.PureComponent),i.propTypes={children:x.PropTypes.node,spacing:x.PropTypes.oneOf((0,u.default)(_.spacing)),layout:x.PropTypes.oneOf(_.layout)},i.defaultProps={spacing:"cosy",layout:"fixed"},a))},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t){e.exports=l},function(e,t){e.exports=u},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=t.defaultGridSize=8;t.defaultGridColumns=12,t.defaultGridColumnWidth=10*n,t.spacing={comfortable:5*n,cosy:2*n,compact:.5*n},t.layout=["fixed","fluid"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getPadding=t.getMaxWidth=t.getMargin=void 0;var i=n(13),a=r(i),l=(0,a.default)(["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  padding: 0 ",";\n  position: relative;\n"],["\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 ",";\n  max-width: ",";\n  padding: 0 ",";\n  position: relative;\n"]),u=n(10),o=r(u),s=n(11),d=function(e){return e.theme.isNestedGrid?"-"+s.spacing[e.theme.spacing]+"px":"auto"},p=function(e){return"fixed"===e.layout?s.defaultGridColumnWidth*e.theme.columns+"px":"100%"},c=function(e){return s.spacing[e.theme.spacing]/2+"px"},f=o.default.div(l,d,p,c);t.default=f,t.getMargin=d,t.getMaxWidth=p,t.getPadding=c},function(e,t){e.exports=o},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i,a,l=n(4),u=r(l),o=n(5),s=r(o),d=n(6),p=r(d),c=n(7),f=r(c),h=n(8),m=r(h),b=n(9),g=r(b),x=n(10),y=n(11),v=n(15),_=r(v),w="cosy";t.default=(0,x.withTheme)((a=i=function(e){function t(){var e,n,r,i;(0,s.default)(this,t);for(var a=arguments.length,l=Array(a),o=0;o<a;o++)l[o]=arguments[o];return n=r=(0,f.default)(this,(e=t.__proto__||(0,u.default)(t)).call.apply(e,[this].concat(l))),r.getTheme=function(e){return{columns:e.theme&&e.theme.columns?e.theme.columns:y.defaultColumns,spacing:e.theme&&e.theme.spacing?e.theme.spacing:w,isNestedGrid:!1}},r.getNestedTheme=function(e){return{columns:e.medium,spacing:e.theme&&e.theme.spacing?e.theme.spacing:w,isNestedGrid:!0}},i=n,(0,f.default)(r,i)}return(0,m.default)(t,e),(0,p.default)(t,[{key:"render",value:function(){return g.default.createElement(x.ThemeProvider,{theme:this.getTheme(this.props)},g.default.createElement(_.default,{medium:this.props.medium},g.default.createElement(x.ThemeProvider,{theme:this.getNestedTheme(this.props)},g.default.createElement("div",null,this.props.children))))}}]),t}(b.PureComponent),i.propTypes={medium:b.PropTypes.number,children:b.PropTypes.node},i.defaultProps={medium:0},a))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.getColumnWidth=void 0;var i=n(13),a=r(i),l=(0,a.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: ",";\n  margin: 0 ","px;\n  max-width: calc("," - ","px);\n  min-width: calc(99.9999% / "," - ","px);\n  word-wrap: break-word;\n"]),u=n(10),o=r(u),s=n(11),d=function(e){return e.medium===e.theme.columns?"100%":"99.9999% / "+e.theme.columns+" * "+e.medium},p=function(e){return e.medium>0?"calc("+d(e)+" - "+s.spacing[e.theme.spacing]+"px)":"auto"},c=function(e){return e.theme.columns},f=function(e){return e.medium?e.medium:c(e)},h=function(e){return Math.min(c(e),f(e))},m=function(e){return s.spacing[e.theme.spacing]},b=function(e){return h(e)>=c(e)?"100%":"99.9999% / "+c(e)+" * "+h(e)},g=o.default.div(l,p,function(e){return s.spacing[e.theme.spacing]/2},b,m,c,m);t.default=g,t.getColumnWidth=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(4),a=r(i),l=n(5),u=r(l),o=n(6),s=r(o),d=n(7),p=r(d),c=n(8),f=r(c),h=n(13),m=r(h),b=(0,m.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n"],["\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  width: 100%;\n"]),g=(0,m.default)(["\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n"],["\n  display: flex;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n"]),x=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ","px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  transition: height .25s ease-in-out;\n  height: ","px; /* 52 is line height (20) + 4*grid */\n  position: relative;\n  width: 100%;\n  z-index: 3;\n"]),y=(0,m.default)(["\n  position: fixed;\n  width: 100%;\n"],["\n  position: fixed;\n  width: 100%;\n"]),v=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  max-height: 100%;\n  z-index: 2;\n"]),_=(0,m.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ","px);\n"],["\n  flex-grow: 1;\n  flex-shrink: 0;\n  flex-basis: auto;\n  position: relative;\n  z-index: 1;\n  width: calc(100% - ","px);\n"]),w=n(9),P=r(w),T=n(10),j=r(T),C=j.default.div(b),k=j.default.div(g),q=j.default.div(x,function(e){return e.isBannerOpen?52:0}),M=j.default.div(y),O=j.default.div(v),G=j.default.div(_,function(e){return e.navigationWidth}),E=function(e){function t(){return(0,u.default)(this,t),(0,p.default)(this,(t.__proto__||(0,a.default)(t)).apply(this,arguments))}return(0,f.default)(t,e),(0,s.default)(t,[{key:"render",value:function(){return P.default.createElement(T.ThemeProvider,{theme:{}},P.default.createElement(C,null,P.default.createElement(q,{"aria-hidden":this.props.isBannerOpen,isBannerOpen:this.props.isBannerOpen},P.default.createElement(M,null,this.props.banner)),P.default.createElement(k,null,P.default.createElement(O,null,this.props.navigation),P.default.createElement(G,{navigationWidth:this.props.navigationWidth},this.props.children))))}}]),t}(w.PureComponent);E.displayName="AkPage",E.propTypes={banner:w.PropTypes.node,children:w.PropTypes.node,isBannerOpen:w.PropTypes.bool,navigation:w.PropTypes.node,navigationWidth:w.PropTypes.number},E.defaultProps={isBannerOpen:!1,navigationWidth:0},t.default=E}])});

package.json

 {
   "name": "@atlaskit/page",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "config": {
@@ -37,2 +37,3 @@ "access": "public"
     "@atlaskit/avatar": "^1.0.0",
+    "@atlaskit/banner": "^1.0.1",
     "@atlaskit/breadcrumbs": "^1.0.0",
@@ -42,6 +43,9 @@ "@atlaskit/button": "^1.0.0",
     "@atlaskit/comment": "^1.0.0",
+    "@atlaskit/navigation": "^1.2.2",
     "@atlaskit/page": "*",
+    "@atlaskit/toggle": "^1.0.1",
     "@atlaskit/util-readme": "^1.0.0",
+    "react-lorem-component": "^0.11.0",
     "react-syntax-highlighter": "^4.0.1"
   }
 }

README.md

@@ -5,3 +5,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
 [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
-[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/page,@atlaskit/page@2.0.2)
+[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/page,@atlaskit/page@3.0.0)
 
@@ -12,7 +12,7 @@ # Page
 
-![Example @atlaskit/page](https://bytebucket.org/atlassian/atlaskit/raw/a758d5b722943541f19ccc09fa1a7c44ed8f85e8/packages/@atlaskit/page/docs/screencast.gif)
+![Example @atlaskit/page](https://bytebucket.org/atlassian/atlaskit/raw/25550b296f152e9e85f938429b7590e30f26d0e9/packages/@atlaskit/page/docs/screencast.gif)
 
 ## Try it out
 
-Interact with a [live demo of the @atlaskit/page component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/page/2.0.2/).
+Interact with a [live demo of the @atlaskit/page component](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/page/3.0.0/).
 
@@ -44,3 +44,3 @@ ## Installation
 
-Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/page,@atlaskit/page@2.0.2).
+Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/page,@atlaskit/page@3.0.0).
 
@@ -47,0 +47,0 @@ Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).

No alert changes

Improved metrics

Total package byte prevSize

67043

increased by18.46%

Lines of code

737

increased by6.97%

Number of versions

116

increased by0.87%

Published versions last months

2

increased by100%

Published versions last two months

2

increased by100%

Published versions last week

1

increased byInfinity%

Published versions last year

8

increased by14.29%

Worsened metrics

Dev dependency count

12

increased by50%

No dependency changes