@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Modal/Modal.js

@@ -0,0 +1,86 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactModal = _interopRequireDefault(require("react-modal"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader/ModalHeader"));
+
+var _ModalBody = _interopRequireDefault(require("./components/ModalBody/ModalBody"));
+
+var _ModalFooter = _interopRequireDefault(require("./components/ModalFooter/ModalFooter"));
+
+var Modal =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2["default"])(Modal, _React$PureComponent);
+
+  function Modal() {
+    (0, _classCallCheck2["default"])(this, Modal);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Modal).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(Modal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          isOpen = _this$props.isOpen,
+          size = _this$props.size,
+          isFullHeight = _this$props.isFullHeight,
+          className = _this$props.className,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["isOpen", "size", "isFullHeight", "className"]);
+      var modalClassName = (0, _classnames["default"])('modal', className, {
+        'modal-small': size === 'small',
+        'modal-medium': size === 'medium',
+        'modal-full-height': isFullHeight
+      });
+      return _react["default"].createElement(_reactModal["default"], (0, _extends2["default"])({
+        isOpen: isOpen,
+        overlayClassName: "modal-overlay",
+        className: modalClassName
+      }, rest));
+    }
+  }]);
+  return Modal;
+}(_react["default"].PureComponent);
+
+exports["default"] = Modal;
+(0, _defineProperty2["default"])(Modal, "defaultProps", {
+  isFullHeight: false
+});
+(0, _defineProperty2["default"])(Modal, "setAppElement", function (selector) {
+  _reactModal["default"].setAppElement(selector);
+});
+(0, _defineProperty2["default"])(Modal, "Header", _ModalHeader["default"]);
+(0, _defineProperty2["default"])(Modal, "Body", _ModalBody["default"]);
+(0, _defineProperty2["default"])(Modal, "Footer", _ModalFooter["default"]);
+(0, _defineProperty2["default"])(Modal, "defaultProps", {
+  size: 'small',
+  isOpen: false
+});
+//# sourceMappingURL=Modal.js.map

package/lib/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Modal/Modal.js"],"names":["Modal","props","isOpen","size","isFullHeight","className","rest","modalClassName","React","PureComponent","selector","ReactModal","setAppElement","ModalHeader","ModalBody","ModalFooter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;IAkBqBA,K;;;;;;;;;;;;6BAiBX;AAAA,wBACmD,KAAKC,KADxD;AAAA,UACAC,MADA,eACAA,MADA;AAAA,UACQC,IADR,eACQA,IADR;AAAA,UACcC,YADd,eACcA,YADd;AAAA,UAC4BC,SAD5B,eAC4BA,SAD5B;AAAA,UAC0CC,IAD1C;AAER,UAAMC,cAAc,GAAG,4BAAG,OAAH,EAAYF,SAAZ,EAAuB;AAC7C,uBAAeF,IAAI,KAAK,OADqB;AAE7C,wBAAgBA,IAAI,KAAK,QAFoB;AAG7C,6BAAqBC;AAHwB,OAAvB,CAAvB;AAKA,aACC,gCAAC,sBAAD;AACC,QAAA,MAAM,EAAEF,MADT;AAEC,QAAA,gBAAgB,EAAC,eAFlB;AAGC,QAAA,SAAS,EAAEK;AAHZ,SAIKD,IAJL,EADD;AAQA;;;EAhCiCE,kBAAMC,a;;;iCAApBT,K,kBACE;AACrBI,EAAAA,YAAY,EAAE;AADO,C;iCADFJ,K,mBAKG,UAACU,QAAD,EAAsB;AAC5CC,yBAAWC,aAAX,CAAyBF,QAAzB;AACA,C;iCAPmBV,K,YASJa,uB;iCATIb,K,UAUNc,qB;iCAVMd,K,YAWJe,uB;iCAXIf,K,kBAYE;AACrBG,EAAAA,IAAI,EAAE,OADe;AAErBD,EAAAA,MAAM,EAAE;AAFa,C","sourcesContent":["// @flow\nimport React from 'react'\nimport ReactModal from 'react-modal'\nimport cx from 'classnames'\nimport ModalHeader from './components/ModalHeader/ModalHeader'\nimport ModalBody from './components/ModalBody/ModalBody'\nimport ModalFooter from './components/ModalFooter/ModalFooter'\n\nexport type Props = {\n\t/** Set true to show the modal */\n\tisOpen: boolean,\n\n\t/** Should the modal stretch to its maximum height whatever the content? */\n\tisFullHeight?: boolean,\n\n\t/** Size of the modal */\n\tsize: 'small' | 'medium' | 'full-width',\n\n\t/** Optional class name */\n\tclassName?: string\n}\n\ntype State = {}\n\nexport default class Modal extends React.PureComponent<Props, State> {\n\tstatic defaultProps = {\n\t\tisFullHeight: false\n\t}\n\n\tstatic setAppElement = (selector: string) => {\n\t\tReactModal.setAppElement(selector)\n\t}\n\n\tstatic Header = ModalHeader\n\tstatic Body = ModalBody\n\tstatic Footer = ModalFooter\n\tstatic defaultProps = {\n\t\tsize: 'small',\n\t\tisOpen: false\n\t}\n\n\trender() {\n\t\tconst { isOpen, size, isFullHeight, className, ...rest } = this.props\n\t\tconst modalClassName = cx('modal', className, {\n\t\t\t'modal-small': size === 'small',\n\t\t\t'modal-medium': size === 'medium',\n\t\t\t'modal-full-height': isFullHeight\n\t\t})\n\t\treturn (\n\t\t\t<ReactModal\n\t\t\t\tisOpen={isOpen}\n\t\t\t\toverlayClassName=\"modal-overlay\"\n\t\t\t\tclassName={modalClassName}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t)\n\t}\n}\n"],"file":"Modal.js"}

package/lib/components/Modal/components/ModalBody/ModalBody.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var ModalBody = function ModalBody(props) {
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('modal-body', {
+      'modal-body--full-bleed': props.fullBleed
+    }, props.className),
+    style: (0, _objectSpread2["default"])({}, props.height ? {
+      height: props.height
+    } : {})
+  }, props.children);
+};
+
+ModalBody.displayName = 'Modal.Body';
+var _default = ModalBody;
+exports["default"] = _default;
+//# sourceMappingURL=ModalBody.js.map

package/lib/components/Modal/components/ModalBody/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/components/ModalBody/ModalBody.js"],"names":["ModalBody","props","fullBleed","className","height","children","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AAgBA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD;AAAA,SACjB;AACC,IAAA,SAAS,EAAE,4BACV,YADU,EAEV;AACC,gCAA0BA,KAAK,CAACC;AADjC,KAFU,EAKVD,KAAK,CAACE,SALI,CADZ;AAQC,IAAA,KAAK,qCAAQF,KAAK,CAACG,MAAN,GAAe;AAAEA,MAAAA,MAAM,EAAEH,KAAK,CAACG;AAAhB,KAAf,GAA0C,EAAlD;AARN,KAUEH,KAAK,CAACI,QAVR,CADiB;AAAA,CAAlB;;AAeAL,SAAS,CAACM,WAAV,GAAwB,YAAxB;eACeN,S","sourcesContent":["// @flow\nimport React from 'react'\nimport type { Node } from 'react'\nimport cx from 'classnames'\n\ntype Props = {\n\t/** Modal children */\n\tchildren: Node,\n\n\t/** Optional class name */\n\tclassName?: string,\n\n\t/** Should the content go to the edge of the modal body? */\n\tfullBleed?: boolean,\n\n\t/** Optional height of body */\n\theight?: string\n}\n\nconst ModalBody = (props: Props) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t'modal-body',\n\t\t\t{\n\t\t\t\t'modal-body--full-bleed': props.fullBleed\n\t\t\t},\n\t\t\tprops.className\n\t\t)}\n\t\tstyle={{ ...(props.height ? { height: props.height } : {}) }}\n\t>\n\t\t{props.children}\n\t</div>\n)\n\nModalBody.displayName = 'Modal.Body'\nexport default ModalBody\n"],"file":"ModalBody.js"}

package/lib/components/Modal/components/ModalFooter/ModalFooter.js

@@ -0,0 +1,31 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var ModalFooter = function ModalFooter(props) {
+  var primaryAction = props.primaryAction,
+      secondaryAction = props.secondaryAction;
+  return _react["default"].createElement("div", {
+    className: "modal-footer"
+  }, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    kind: "primary"
+  }, primaryAction)), secondaryAction && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    kind: "secondary"
+  }, secondaryAction)));
+};
+
+ModalFooter.displayName = 'Modal.Footer';
+var _default = ModalFooter;
+exports["default"] = _default;
+//# sourceMappingURL=ModalFooter.js.map

package/lib/components/Modal/components/ModalFooter/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/components/ModalFooter/ModalFooter.js"],"names":["ModalFooter","props","primaryAction","secondaryAction","displayName"],"mappings":";;;;;;;;;;;AACA;;AACA;;AAWA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkB;AAAA,MAC7BC,aAD6B,GACMD,KADN,CAC7BC,aAD6B;AAAA,MACdC,eADc,GACMF,KADN,CACdE,eADc;AAErC,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,KAA2BD,aAA3B,EADD,EAEEC,eAAe,IAAI,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAC;AAAb,KAA6BA,eAA7B,EAFrB,CADD;AAMA,CARD;;AAUAH,WAAW,CAACI,WAAZ,GAA0B,cAA1B;eACeJ,W","sourcesContent":["// @flow\nimport React from 'react'\nimport Button from '../../../Button/Button'\nimport type { Props as ButtonProps } from '../../../Button/Button'\n\nexport type Props = {\n\t/** The primary action in the footer */\n\tprimaryAction: ButtonProps,\n\n\t/** Optional secondary action */\n\tsecondaryAction?: ButtonProps\n}\n\nconst ModalFooter = (props: Props) => {\n\tconst { primaryAction, secondaryAction } = props\n\treturn (\n\t\t<div className=\"modal-footer\">\n\t\t\t<Button kind=\"primary\" {...primaryAction} />\n\t\t\t{secondaryAction && <Button kind=\"secondary\" {...secondaryAction} />}\n\t\t</div>\n\t)\n}\n\nModalFooter.displayName = 'Modal.Footer'\nexport default ModalFooter\n"],"file":"ModalFooter.js"}

package/lib/components/Modal/components/ModalHeader/ModalHeader.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var ArrowBack = function ArrowBack(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+  }));
+};
+
+ArrowBack.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var CloseIcon = function CloseIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+  }));
+};
+
+CloseIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ModalHeader = function ModalHeader(props) {
+  var title = props.title,
+      onRequestClose = props.onRequestClose,
+      isPaginated = props.isPaginated,
+      onClickBack = props.onClickBack;
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('modal-header', {
+      'modal-header--is-paginated': isPaginated
+    })
+  }, _react["default"].createElement("div", {
+    className: "modal-header__title-wrapper"
+  }, isPaginated && _react["default"].createElement(_Button["default"], {
+    isSmall: true,
+    className: (0, _classnames["default"])('modal-header__back-btn', {
+      'modal-header__back-btn--is-hidden': !onClickBack
+    }),
+    icon: {
+      customIcon: ArrowBack
+    },
+    disabled: !onClickBack,
+    onClick: onClickBack
+  }), _react["default"].createElement("h2", {
+    className: "modal-header__title"
+  }, title)), _react["default"].createElement(_Button["default"], {
+    isSmall: true,
+    icon: {
+      customIcon: CloseIcon
+    },
+    onClick: onRequestClose
+  }));
+};
+
+ModalHeader.displayName = 'Modal.Header';
+ModalHeader.defaultProps = {
+  isPaginated: false
+};
+var _default = ModalHeader;
+exports["default"] = _default;
+//# sourceMappingURL=ModalHeader.js.map

package/lib/components/Modal/components/ModalHeader/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/components/ModalHeader/ModalHeader.js"],"names":["ArrowBack","CloseIcon","ModalHeader","props","title","onRequestClose","isPaginated","onClickBack","customIcon","displayName","defaultProps"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;IACOA,S,YAAAA,S;;;;;;;;AAAAA,S;;;;;;;IACAC,S,YAAAA,S;;;;;;;;AAAAA,S;;;;;;;AAgBP,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkB;AAAA,MAC7BC,KAD6B,GACuBD,KADvB,CAC7BC,KAD6B;AAAA,MACtBC,cADsB,GACuBF,KADvB,CACtBE,cADsB;AAAA,MACNC,WADM,GACuBH,KADvB,CACNG,WADM;AAAA,MACOC,WADP,GACuBJ,KADvB,CACOI,WADP;AAGrC,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,cAAH,EAAmB;AAC7B,oCAA8BD;AADD,KAAnB;AADZ,KAKC;AAAK,IAAA,SAAS,EAAC;AAAf,KACEA,WAAW,IACX,gCAAC,kBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,SAAS,EAAE,4BAAG,wBAAH,EAA6B;AACvC,2CAAqC,CAACC;AADC,KAA7B,CAFZ;AAKC,IAAA,IAAI,EAAE;AAAEC,MAAAA,UAAU,EAAER;AAAd,KALP;AAMC,IAAA,QAAQ,EAAE,CAACO,WANZ;AAOC,IAAA,OAAO,EAAEA;AAPV,IAFF,EAYC;AAAI,IAAA,SAAS,EAAC;AAAd,KAAqCH,KAArC,CAZD,CALD,EAmBC,gCAAC,kBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,IAAI,EAAE;AAAEI,MAAAA,UAAU,EAAEP;AAAd,KAFP;AAGC,IAAA,OAAO,EAAEI;AAHV,IAnBD,CADD;AA2BA,CA9BD;;AAgCAH,WAAW,CAACO,WAAZ,GAA0B,cAA1B;AACAP,WAAW,CAACQ,YAAZ,GAA2B;AAC1BJ,EAAAA,WAAW,EAAE;AADa,CAA3B;eAIeJ,W","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\nimport Button from '../../../Button/Button'\nimport ArrowBack from '../../../../../static/assets/icons/ic_arrow_back.svg'\nimport CloseIcon from '../../../../../static/assets/icons/ic_close.svg'\n\nexport type Props = {\n\t/** Title text */\n\ttitle: string,\n\n\t/** Whether this is a paged modal. Title will center on pages */\n\tisPaginated: boolean,\n\n\t/** Callback to close the modal */\n\tonRequestClose: Function,\n\n\t/** Function to handle navigating backwards in a modal */\n\tonClickBack?: Function\n}\n\nconst ModalHeader = (props: Props) => {\n\tconst { title, onRequestClose, isPaginated, onClickBack } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('modal-header', {\n\t\t\t\t'modal-header--is-paginated': isPaginated\n\t\t\t})}\n\t\t>\n\t\t\t<div className=\"modal-header__title-wrapper\">\n\t\t\t\t{isPaginated && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tclassName={cx('modal-header__back-btn', {\n\t\t\t\t\t\t\t'modal-header__back-btn--is-hidden': !onClickBack\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ticon={{ customIcon: ArrowBack }}\n\t\t\t\t\t\tdisabled={!onClickBack}\n\t\t\t\t\t\tonClick={onClickBack}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<h2 className=\"modal-header__title\">{title}</h2>\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tisSmall\n\t\t\t\ticon={{ customIcon: CloseIcon }}\n\t\t\t\tonClick={onRequestClose}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nModalHeader.displayName = 'Modal.Header'\nModalHeader.defaultProps = {\n\tisPaginated: false\n}\n\nexport default ModalHeader\n"],"file":"ModalHeader.js"}

package/lib/components/Page/Page-story.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _tabs = require("../../../.storybook/data/tabs");
+
+var _Layout = _interopRequireDefault(require("../Layout/Layout"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var buttonKinds = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Simple: 'simple'
+};
+var stories = (0, _react2.storiesOf)('Page', module).addParameters({
+  readme: {
+    sidebar: _README["default"]
+  }
+});
+stories.addDecorator(_react3.withKnobs);
+stories.add('Page', function () {
+  return _react["default"].createElement(_index["default"], {
+    header: {
+      className: 'custom-classname',
+      title: (0, _react3.text)('title', 'Page Title'),
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts."))));
+}).add('With Back Link', function () {
+  return _react["default"].createElement(_index["default"], {
+    header: {
+      title: (0, _react3.text)('title', 'Page Title'),
+      backLinkHref: '#',
+      backLinkText: (0, _react3.text)('backLinkText', 'Back'),
+      hasBottomBorder: (0, _react3["boolean"])('hasBottomBorder', false),
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts."))));
+}).add('With Primary Action', function () {
+  return _react["default"].createElement(_index["default"], {
+    header: {
+      title: (0, _react3.text)('title', 'Page Title'),
+      primaryAction: {
+        text: (0, _react3["boolean"])('text', 'Do something'),
+        kind: (0, _react3.select)('kind', buttonKinds, 'primary'),
+        icon: (0, _react3.text)('icon', ''),
+        isSmall: (0, _react3["boolean"])('isSmall', true)
+      },
+      hasBottomBorder: (0, _react3["boolean"])('hasBottomBorder', false),
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts."))));
+}).add('With Back Link & Primary Action', function () {
+  return _react["default"].createElement(_index["default"], {
+    header: {
+      title: (0, _react3.text)('title', 'Page Title'),
+      backLinkHref: '#',
+      backLinkText: (0, _react3.text)('backLinkText', 'Back'),
+      primaryAction: {
+        text: (0, _react3["boolean"])('text', 'Do something'),
+        kind: (0, _react3.select)('kind', buttonKinds, 'primary'),
+        icon: (0, _react3.text)('icon', ''),
+        isSmall: (0, _react3["boolean"])('isSmall', true)
+      },
+      hasBottomBorder: (0, _react3["boolean"])('hasBottomBorder', false),
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts."))));
+}).add('Within flexible container', function () {
+  return _react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      flex: 1,
+      overflow: 'hidden',
+      height: '50vh'
+    }
+  }, _react["default"].createElement(_index["default"], {
+    header: {
+      title: (0, _react3.text)('title', 'Page Title'),
+      backLinkHref: '#',
+      backLinkText: (0, _react3.text)('backLinkText', 'Back'),
+      primaryAction: {
+        text: (0, _react3["boolean"])('text', 'Do something'),
+        kind: (0, _react3.select)('kind', buttonKinds, 'primary'),
+        icon: (0, _react3.text)('icon', ''),
+        isSmall: (0, _react3["boolean"])('isSmall', true)
+      },
+      hasBottomBorder: (0, _react3["boolean"])('hasBottomBorder', false),
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], {
+    width: "full-width"
+  }, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus dapibus risus vel aliquet. Nam interdum lectus a massa aliquam, rutrum venenatis odio volutpat. Ut aliquet tellus consequat suscipit blandit. Praesent tempor nulla eget odio consequat scelerisque. Donec tellus massa, lacinia in neque non, vehicula accumsan tortor. Praesent a ipsum in elit tempus cursus in ut velit. Nullam pellentesque interdum metus, nec condimentum justo bibendum porta. Nullam id erat non dolor fringilla auctor. Nulla at orci at nunc facilisis fermentum. Mauris nunc lectus, tempor id feugiat id, malesuada sit amet augue. Vestibulum sollicitudin nisl finibus, maximus ex ac, suscipit ex. In elementum magna eu lacinia tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam enim sapien, placerat ut dapibus quis, auctor eget metus. Vivamus convallis metus in malesuada fermentum. Donec et orci nulla. Phasellus hendrerit odio mi, non eleifend est pretium a. Aliquam sapien urna, sodales pulvinar tristique a, mattis sit amet sapien. Aliquam eget nunc eget tortor iaculis laoreet sit amet at urna. Morbi eu mollis risus. Phasellus nibh purus, fermentum tempor lacus quis, molestie molestie quam. Donec id risus sem. Mauris sit amet enim sapien. Sed orci orci, eleifend feugiat mauris eget, rhoncus egestas leo. Fusce sit amet turpis egestas, aliquam augue ac, laoreet nunc. Fusce malesuada mi odio, sit amet blandit odio vulputate ac. Duis a odio ut lectus ullamcorper fringilla vitae eu urna. Duis et dolor porttitor, auctor urna vitae, bibendum orci. Mauris vitae arcu placerat, tristique massa nec, euismod augue. Suspendisse maximus finibus cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed dui ac urna ultricies fermentum eget vel ipsum. Nam non ullamcorper risus. Curabitur vulputate ante at facilisis venenatis. Suspendisse nulla risus, tincidunt aliquam nisl ut, porttitor tempor nibh. Maecenas at urna vel enim euismod fringilla ac vel purus. Praesent ut tempus erat. Cras viverra porta nisi, in lacinia justo tincidunt ac. Fusce bibendum sit amet mi vitae volutpat. Fusce fringilla id elit non sollicitudin. Phasellus mollis placerat dapibus. Integer scelerisque pharetra massa vel ultrices. Integer velit ex, semper eget auctor in, sodales id diam. Suspendisse eu dui dui. In sodales semper risus, eu euismod quam venenatis sit amet. Cras lobortis urna elementum dapibus dapibus. In mattis facilisis malesuada.")))));
+}).add('With many tabs', function () {
+  return _react["default"].createElement(_index["default"], {
+    header: {
+      title: (0, _react3.text)('title', 'Page Title'),
+      backLinkHref: '#',
+      backLinkText: (0, _react3.text)('backLinkText', 'Back'),
+      tabs: _tabs.manyTabs,
+      collapsed: (0, _react3["boolean"])('isCollapsed', false)
+    }
+  }, _react["default"].createElement(_index["default"].Content, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout["default"].Section, null, "See Layout for examples of page layouts."))));
+});
+//# sourceMappingURL=Page-story.js.map

package/lib/components/Page/Page-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Page/Page-story.js"],"names":["buttonKinds","Primary","Secondary","Simple","stories","module","addParameters","readme","sidebar","README","addDecorator","withKnobs","add","className","title","collapsed","backLinkHref","backLinkText","hasBottomBorder","primaryAction","text","kind","icon","isSmall","display","flexDirection","flex","overflow","height","tabs","manyTabs"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\n\nimport { withKnobs, text, boolean, select } from '@storybook/addon-knobs/react'\nimport Page from './index'\nimport { manyTabs } from '../../../.storybook/data/tabs'\nimport Layout from '../Layout/Layout'\n\nimport README from './README.md'\n\nconst buttonKinds = {\n\tPrimary: 'primary',\n\tSecondary: 'secondary',\n\tSimple: 'simple'\n}\n\nconst stories = storiesOf('Page', module).addParameters({\n\treadme: {\n\t\tsidebar: README\n\t}\n})\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Page', () => (\n\t\t<Page\n\t\t\theader={{\n\t\t\t\tclassName: 'custom-classname',\n\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t}}\n\t\t>\n\t\t\t<Page.Content>\n\t\t\t\t<Layout>\n\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\tSee Layout for examples of page layouts.\n\t\t\t\t\t</Layout.Section>\n\t\t\t\t</Layout>\n\t\t\t</Page.Content>\n\t\t</Page>\n\t))\n\t.add('With Back Link', () => (\n\t\t<Page\n\t\t\theader={{\n\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\tbackLinkHref: '#',\n\t\t\t\tbackLinkText: text('backLinkText', 'Back'),\n\t\t\t\thasBottomBorder: boolean('hasBottomBorder', false),\n\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t}}\n\t\t>\n\t\t\t<Page.Content>\n\t\t\t\t<Layout>\n\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\tSee Layout for examples of page layouts.\n\t\t\t\t\t</Layout.Section>\n\t\t\t\t</Layout>\n\t\t\t</Page.Content>\n\t\t</Page>\n\t))\n\t.add('With Primary Action', () => (\n\t\t<Page\n\t\t\theader={{\n\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\tprimaryAction: {\n\t\t\t\t\ttext: boolean('text', 'Do something'),\n\t\t\t\t\tkind: select('kind', buttonKinds, 'primary'),\n\t\t\t\t\ticon: text('icon', ''),\n\t\t\t\t\tisSmall: boolean('isSmall', true)\n\t\t\t\t},\n\t\t\t\thasBottomBorder: boolean('hasBottomBorder', false),\n\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t}}\n\t\t>\n\t\t\t<Page.Content>\n\t\t\t\t<Layout>\n\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\tSee Layout for examples of page layouts.\n\t\t\t\t\t</Layout.Section>\n\t\t\t\t</Layout>\n\t\t\t</Page.Content>\n\t\t</Page>\n\t))\n\t.add('With Back Link & Primary Action', () => (\n\t\t<Page\n\t\t\theader={{\n\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\tbackLinkHref: '#',\n\t\t\t\tbackLinkText: text('backLinkText', 'Back'),\n\t\t\t\tprimaryAction: {\n\t\t\t\t\ttext: boolean('text', 'Do something'),\n\t\t\t\t\tkind: select('kind', buttonKinds, 'primary'),\n\t\t\t\t\ticon: text('icon', ''),\n\t\t\t\t\tisSmall: boolean('isSmall', true)\n\t\t\t\t},\n\t\t\t\thasBottomBorder: boolean('hasBottomBorder', false),\n\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t}}\n\t\t>\n\t\t\t<Page.Content>\n\t\t\t\t<Layout>\n\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\tSee Layout for examples of page layouts.\n\t\t\t\t\t</Layout.Section>\n\t\t\t\t</Layout>\n\t\t\t</Page.Content>\n\t\t</Page>\n\t))\n\t.add('Within flexible container', () => (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflex: 1,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\theight: '50vh'\n\t\t\t}}\n\t\t>\n\t\t\t<Page\n\t\t\t\theader={{\n\t\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\t\tbackLinkHref: '#',\n\t\t\t\t\tbackLinkText: text('backLinkText', 'Back'),\n\t\t\t\t\tprimaryAction: {\n\t\t\t\t\t\ttext: boolean('text', 'Do something'),\n\t\t\t\t\t\tkind: select('kind', buttonKinds, 'primary'),\n\t\t\t\t\t\ticon: text('icon', ''),\n\t\t\t\t\t\tisSmall: boolean('isSmall', true)\n\t\t\t\t\t},\n\t\t\t\t\thasBottomBorder: boolean('hasBottomBorder', false),\n\t\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Page.Content>\n\t\t\t\t\t<Layout width=\"full-width\">\n\t\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\t\tSee Layout for examples of page layouts. Lorem ipsum dolor sit\n\t\t\t\t\t\t\tamet, consectetur adipiscing elit. Vestibulum dapibus dapibus\n\t\t\t\t\t\t\trisus vel aliquet. Nam interdum lectus a massa aliquam, rutrum\n\t\t\t\t\t\t\tvenenatis odio volutpat. Ut aliquet tellus consequat suscipit\n\t\t\t\t\t\t\tblandit. Praesent tempor nulla eget odio consequat scelerisque.\n\t\t\t\t\t\t\tDonec tellus massa, lacinia in neque non, vehicula accumsan\n\t\t\t\t\t\t\ttortor. Praesent a ipsum in elit tempus cursus in ut velit. Nullam\n\t\t\t\t\t\t\tpellentesque interdum metus, nec condimentum justo bibendum porta.\n\t\t\t\t\t\t\tNullam id erat non dolor fringilla auctor. Nulla at orci at nunc\n\t\t\t\t\t\t\tfacilisis fermentum. Mauris nunc lectus, tempor id feugiat id,\n\t\t\t\t\t\t\tmalesuada sit amet augue. Vestibulum sollicitudin nisl finibus,\n\t\t\t\t\t\t\tmaximus ex ac, suscipit ex. In elementum magna eu lacinia\n\t\t\t\t\t\t\ttincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing\n\t\t\t\t\t\t\telit. Vestibulum ante ipsum primis in faucibus orci luctus et\n\t\t\t\t\t\t\tultrices posuere cubilia Curae; Aliquam enim sapien, placerat ut\n\t\t\t\t\t\t\tdapibus quis, auctor eget metus. Vivamus convallis metus in\n\t\t\t\t\t\t\tmalesuada fermentum. Donec et orci nulla. Phasellus hendrerit odio\n\t\t\t\t\t\t\tmi, non eleifend est pretium a. Aliquam sapien urna, sodales\n\t\t\t\t\t\t\tpulvinar tristique a, mattis sit amet sapien. Aliquam eget nunc\n\t\t\t\t\t\t\teget tortor iaculis laoreet sit amet at urna. Morbi eu mollis\n\t\t\t\t\t\t\trisus. Phasellus nibh purus, fermentum tempor lacus quis, molestie\n\t\t\t\t\t\t\tmolestie quam. Donec id risus sem. Mauris sit amet enim sapien.\n\t\t\t\t\t\t\tSed orci orci, eleifend feugiat mauris eget, rhoncus egestas leo.\n\t\t\t\t\t\t\tFusce sit amet turpis egestas, aliquam augue ac, laoreet nunc.\n\t\t\t\t\t\t\tFusce malesuada mi odio, sit amet blandit odio vulputate ac. Duis\n\t\t\t\t\t\t\ta odio ut lectus ullamcorper fringilla vitae eu urna. Duis et\n\t\t\t\t\t\t\tdolor porttitor, auctor urna vitae, bibendum orci. Mauris vitae\n\t\t\t\t\t\t\tarcu placerat, tristique massa nec, euismod augue. Suspendisse\n\t\t\t\t\t\t\tmaximus finibus cursus. Vestibulum ante ipsum primis in faucibus\n\t\t\t\t\t\t\torci luctus et ultrices posuere cubilia Curae; Morbi sed dui ac\n\t\t\t\t\t\t\turna ultricies fermentum eget vel ipsum. Nam non ullamcorper\n\t\t\t\t\t\t\trisus. Curabitur vulputate ante at facilisis venenatis.\n\t\t\t\t\t\t\tSuspendisse nulla risus, tincidunt aliquam nisl ut, porttitor\n\t\t\t\t\t\t\ttempor nibh. Maecenas at urna vel enim euismod fringilla ac vel\n\t\t\t\t\t\t\tpurus. Praesent ut tempus erat. Cras viverra porta nisi, in\n\t\t\t\t\t\t\tlacinia justo tincidunt ac. Fusce bibendum sit amet mi vitae\n\t\t\t\t\t\t\tvolutpat. Fusce fringilla id elit non sollicitudin. Phasellus\n\t\t\t\t\t\t\tmollis placerat dapibus. Integer scelerisque pharetra massa vel\n\t\t\t\t\t\t\tultrices. Integer velit ex, semper eget auctor in, sodales id\n\t\t\t\t\t\t\tdiam. Suspendisse eu dui dui. In sodales semper risus, eu euismod\n\t\t\t\t\t\t\tquam venenatis sit amet. Cras lobortis urna elementum dapibus\n\t\t\t\t\t\t\tdapibus. In mattis facilisis malesuada.\n\t\t\t\t\t\t</Layout.Section>\n\t\t\t\t\t</Layout>\n\t\t\t\t</Page.Content>\n\t\t\t</Page>\n\t\t</div>\n\t))\n\t.add('With many tabs', () => (\n\t\t<Page\n\t\t\theader={{\n\t\t\t\ttitle: text('title', 'Page Title'),\n\t\t\t\tbackLinkHref: '#',\n\t\t\t\tbackLinkText: text('backLinkText', 'Back'),\n\t\t\t\ttabs: manyTabs,\n\t\t\t\tcollapsed: boolean('isCollapsed', false)\n\t\t\t}}\n\t\t>\n\t\t\t<Page.Content>\n\t\t\t\t<Layout>\n\t\t\t\t\t<Layout.Section>\n\t\t\t\t\t\tSee Layout for examples of page layouts.\n\t\t\t\t\t</Layout.Section>\n\t\t\t\t</Layout>\n\t\t\t</Page.Content>\n\t\t</Page>\n\t))\n"],"file":"Page-story.js"}

package/lib/components/Page/Page.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Page = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _PageHeader = _interopRequireDefault(require("./components/PageHeader/PageHeader"));
+
+var _PageContent = _interopRequireDefault(require("./components/PageContent/PageContent"));
+
+var Page = function Page(props) {
+  var children = props.children,
+      isCentered = props.isCentered,
+      hasHeader = props.hasHeader,
+      className = props.className,
+      header = props.header,
+      sidebarIsCollapsed = props.sidebarIsCollapsed,
+      sidebar = props.sidebar,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "isCentered", "hasHeader", "className", "header", "sidebarIsCollapsed", "sidebar"]);
+  return _react["default"].createElement("div", (0, _extends2["default"])({}, rest, {
+    className: (0, _classnames["default"])('page', className, {
+      'page--centered': isCentered,
+      'page--no-header': !hasHeader,
+      'page--sidebar-is-collapsed': sidebarIsCollapsed
+    })
+  }), _react["default"].createElement("div", {
+    className: 'page__content-container'
+  }, header && _react["default"].createElement(_PageHeader["default"], header), children), sidebar && _react["default"].createElement("div", {
+    className: 'page__sidebar'
+  }, sidebar));
+};
+
+exports.Page = Page;
+Page.Header = _PageHeader["default"];
+Page.Content = _PageContent["default"];
+Page.defaultProps = {
+  isCentered: false,
+  hasHeader: true,
+  header: null,
+  sidebarIsCollapsed: false
+};
+var _default = Page;
+exports["default"] = _default;
+//# sourceMappingURL=Page.js.map

package/lib/components/Page/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Page/Page.js"],"names":["Page","props","children","isCentered","hasHeader","className","header","sidebarIsCollapsed","sidebar","rest","Header","PageHeader","Content","PageContent","defaultProps"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AAwBO,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAsB;AAAA,MAExCC,QAFwC,GAUrCD,KAVqC,CAExCC,QAFwC;AAAA,MAGxCC,UAHwC,GAUrCF,KAVqC,CAGxCE,UAHwC;AAAA,MAIxCC,SAJwC,GAUrCH,KAVqC,CAIxCG,SAJwC;AAAA,MAKxCC,SALwC,GAUrCJ,KAVqC,CAKxCI,SALwC;AAAA,MAMxCC,MANwC,GAUrCL,KAVqC,CAMxCK,MANwC;AAAA,MAOxCC,kBAPwC,GAUrCN,KAVqC,CAOxCM,kBAPwC;AAAA,MAQxCC,OARwC,GAUrCP,KAVqC,CAQxCO,OARwC;AAAA,MASrCC,IATqC,6CAUrCR,KAVqC;AAWzC,SACC,qEACKQ,IADL;AAEC,IAAA,SAAS,EAAE,4BAAG,MAAH,EAAWJ,SAAX,EAAsB;AAChC,wBAAkBF,UADc;AAEhC,yBAAmB,CAACC,SAFY;AAGhC,oCAA8BG;AAHE,KAAtB;AAFZ,MAQC;AAAK,IAAA,SAAS,EAAE;AAAhB,KACED,MAAM,IAAI,gCAAC,sBAAD,EAAgBA,MAAhB,CADZ,EAEEJ,QAFF,CARD,EAYEM,OAAO,IAAI;AAAK,IAAA,SAAS,EAAE;AAAhB,KAAkCA,OAAlC,CAZb,CADD;AAgBA,CA3BM;;;AA6BPR,IAAI,CAACU,MAAL,GAAcC,sBAAd;AACAX,IAAI,CAACY,OAAL,GAAeC,uBAAf;AAEAb,IAAI,CAACc,YAAL,GAAoB;AACnBX,EAAAA,UAAU,EAAE,KADO;AAEnBC,EAAAA,SAAS,EAAE,IAFQ;AAGnBE,EAAAA,MAAM,EAAE,IAHW;AAInBC,EAAAA,kBAAkB,EAAE;AAJD,CAApB;eAOeP,I","sourcesContent":["// @flow\nimport React from 'react'\nimport type { Node } from 'react'\nimport cx from 'classnames'\nimport PageHeader from './components/PageHeader/PageHeader'\nimport PageContent from './components/PageContent/PageContent'\nimport type { PageHeaderProps } from './components/PageHeader/PageHeader'\n\n// Card\ntype PageProps = {\n\t/** Should be Card Header, Card Body, and Card Footer, unless using the card background for styling only. */\n\tchildren: Node,\n\n\t/** Set true to make page content center aligned. */\n\tisCentered?: boolean,\n\n\t/** Set false to add extra spacing to top of page when there is no PageHeader. */\n\thasHeader?: boolean,\n\n\t/** Optional classname */\n\tclassName?: string,\n\n\t/** Page header props */\n\theader?: PageHeaderProps,\n\n\t/** Set true if the page has a sidebar that is collapsed. Defaults to false. */\n\tsidebarIsCollapsed?: boolean\n}\n\nexport const Page = (props: PageProps) => {\n\tconst {\n\t\tchildren,\n\t\tisCentered,\n\t\thasHeader,\n\t\tclassName,\n\t\theader,\n\t\tsidebarIsCollapsed,\n\t\tsidebar,\n\t\t...rest\n\t} = props\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={cx('page', className, {\n\t\t\t\t'page--centered': isCentered,\n\t\t\t\t'page--no-header': !hasHeader,\n\t\t\t\t'page--sidebar-is-collapsed': sidebarIsCollapsed\n\t\t\t})}\n\t\t>\n\t\t\t<div className={'page__content-container'}>\n\t\t\t\t{header && <PageHeader {...header} />}\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{sidebar && <div className={'page__sidebar'}>{sidebar}</div>}\n\t\t</div>\n\t)\n}\n\nPage.Header = PageHeader\nPage.Content = PageContent\n\nPage.defaultProps = {\n\tisCentered: false,\n\thasHeader: true,\n\theader: null,\n\tsidebarIsCollapsed: false\n}\n\nexport default Page\n"],"file":"Page.js"}

package/lib/components/Page/components/PageContent/PageContent.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var PageContent = function PageContent(props) {
+  var children = props.children;
+  return _react["default"].createElement("div", {
+    className: "page__content"
+  }, children);
+};
+
+PageContent.displayName = 'Page.Content';
+var _default = PageContent;
+exports["default"] = _default;
+//# sourceMappingURL=PageContent.js.map

package/lib/components/Page/components/PageContent/PageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Page/components/PageContent/PageContent.js"],"names":["PageContent","props","children","displayName"],"mappings":";;;;;;;;;AACA;;AAOA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkB;AAAA,MAC7BC,QAD6B,GAChBD,KADgB,CAC7BC,QAD6B;AAGrC,SAAO;AAAK,IAAA,SAAS,EAAC;AAAf,KAAgCA,QAAhC,CAAP;AACA,CAJD;;AAMAF,WAAW,CAACG,WAAZ,GAA0B,cAA1B;eACeH,W","sourcesContent":["// @flow\nimport React from 'react'\n\nexport type Props = {\n\t/** Contents of the Page */\n\tchildren: Node\n}\n\nconst PageContent = (props: Props) => {\n\tconst { children } = props\n\n\treturn <div className=\"page__content\">{children}</div>\n}\n\nPageContent.displayName = 'Page.Content'\nexport default PageContent\n"],"file":"PageContent.js"}

package/lib/components/Page/components/PageHeader/PageHeader.js

@@ -0,0 +1,127 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _is_js = _interopRequireDefault(require("is_js"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _link = _interopRequireDefault(require("next/link"));
+
+var _Icon = _interopRequireDefault(require("../../../Icon/Icon"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _Tabs = _interopRequireDefault(require("../../../Tabs/Tabs"));
+
+var BackIcon = function BackIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+  }));
+};
+
+BackIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var PageHeader = function PageHeader(props) {
+  var _props$backLinkCompon = props.backLinkComponent,
+      RelativeBackLinkComponent = _props$backLinkCompon === void 0 ? _link["default"] : _props$backLinkCompon,
+      backLinkHref = props.backLinkHref,
+      backLinkText = props.backLinkText,
+      className = props.className,
+      _props$collapsed = props.collapsed,
+      collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
+      hasBottomBorder = props.hasBottomBorder,
+      linkProps = props.linkProps,
+      onClickBack = props.onClickBack,
+      primaryAction = props.primaryAction,
+      sidebarExpander = props.sidebarExpander,
+      tabs = props.tabs,
+      title = props.title;
+  var backLinkClass = 'page__header-back-link';
+  var anchor;
+
+  if (onClickBack || backLinkHref) {
+    var backIcon = _react["default"].createElement("span", {
+      className: "page__header-back-link-icon"
+    }, _react["default"].createElement(_Icon["default"], {
+      customIcon: BackIcon
+    }));
+
+    if (onClickBack) {
+      anchor = _react["default"].createElement("button", {
+        className: (0, _classnames["default"])(backLinkClass, 'btn'),
+        type: "button",
+        onClick: onClickBack
+      }, backIcon, backLinkText);
+    } else if (backLinkHref) {
+      // Check if the link is relative (client-side) or absolute
+      var linkIsRelative = true;
+
+      if (backLinkHref && _is_js["default"].url(backLinkHref)) {
+        linkIsRelative = false;
+      } // Only return a Next link if the href is relative
+
+
+      anchor = linkIsRelative ? _react["default"].createElement(RelativeBackLinkComponent, (0, _extends2["default"])({
+        href: backLinkHref
+      }, linkProps), _react["default"].createElement("a", {
+        className: backLinkClass
+      }, backIcon, backLinkText)) : _react["default"].createElement("a", {
+        href: backLinkHref,
+        className: backLinkClass
+      }, backIcon, backLinkText);
+    }
+  }
+
+  return _react["default"].createElement("header", {
+    className: (0, _classnames["default"])('page__header', {
+      'page__header--is-collapsed': collapsed
+    }, className)
+  }, _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('page__header-inner', {
+      'page__header-inner--is-collapsed': collapsed
+    })
+  }, anchor && anchor, _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('page__header-main', {
+      'page__header-main--has-bottom-border': hasBottomBorder
+    })
+  }, _react["default"].createElement("div", {
+    className: "page__header-title-wrapper"
+  }, _react["default"].createElement("h1", null, title), _react["default"].createElement("div", null, sidebarExpander && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, sidebarExpander, {
+    isSmall: true,
+    className: "page__header-sidebar-btn"
+  })), primaryAction && _react["default"].createElement(_Button["default"], primaryAction))))), tabs && tabs.length > 0 && _react["default"].createElement(_Tabs["default"], {
+    isPadded: false,
+    className: "page__header-tabs",
+    tabs: tabs
+  }));
+};
+
+PageHeader.displayName = 'Page.Header';
+PageHeader.defaultProps = {
+  title: '',
+  backLinkText: 'Back',
+  backLinkHref: '',
+  primaryAction: null,
+  hasBottomBorder: false,
+  tabs: []
+};
+var _default = PageHeader;
+exports["default"] = _default;
+//# sourceMappingURL=PageHeader.js.map