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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Page/components/PageHeader/PageHeader.js"],"names":["BackIcon","PageHeader","props","backLinkComponent","RelativeBackLinkComponent","Link","backLinkHref","backLinkText","className","collapsed","hasBottomBorder","linkProps","onClickBack","primaryAction","sidebarExpander","tabs","title","backLinkClass","anchor","backIcon","linkIsRelative","is","url","length","displayName","defaultProps"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport is from 'is_js'\nimport cx from 'classnames'\nimport Link from 'next/link'\nimport type { Props as LinkProps } from 'next/link'\nimport type { Props as ButtonProps } from '../../../Button/Button'\nimport type { Props as TabsProps } from '../../../Tabs/Tabs'\nimport Icon from '../../../Icon/Icon'\nimport Button from '../../../Button/Button'\nimport Tabs from '../../../Tabs/Tabs'\nimport BackIcon from '../../../../../static/assets/icons/ic_keyboard_arrow_left.svg'\n\nexport type PageHeaderProps = {\n\t/** Title of the Page */\n\ttitle?: string,\n\n\t/** Optional back link href. Outputs next Link if relative, otherwise outputs anchor */\n\tbackLinkHref?: string,\n\n\t/** Optional function to handle back click */\n\tonClickBack?: Function,\n\n\t/** Back link text */\n\tbackLinkText?: string,\n\n\t/** Props for Next router link: https://nextjs.org/docs/#routing. */\n\tlinkProps?: LinkProps,\n\n\t/** Is the header collapsed? */\n\tcollapsed?: boolean,\n\n\t/** Adds a button to the page header for its primary action. */\n\tprimaryAction?: ButtonProps,\n\n\t/** Adds tabbed navigation for subviews */\n\ttabs?: TabsProps,\n\n\t/** Set true to add a border to the page header */\n\thasBottomBorder?: boolean,\n\n\t/** Adds an element to expand the right sidebar */\n\tsidebarExpander: ButtonProps\n}\n\nconst PageHeader = (props: PageHeaderProps) => {\n\tconst {\n\t\tbackLinkComponent: RelativeBackLinkComponent = Link,\n\t\tbackLinkHref,\n\t\tbackLinkText,\n\t\tclassName,\n\t\tcollapsed = false,\n\t\thasBottomBorder,\n\t\tlinkProps,\n\t\tonClickBack,\n\t\tprimaryAction,\n\t\tsidebarExpander,\n\t\ttabs,\n\t\ttitle\n\t} = props\n\n\tconst backLinkClass = 'page__header-back-link'\n\tlet anchor\n\n\tif (onClickBack || backLinkHref) {\n\t\tconst backIcon = (\n\t\t\t<span className=\"page__header-back-link-icon\">\n\t\t\t\t<Icon customIcon={BackIcon} />\n\t\t\t</span>\n\t\t)\n\n\t\tif (onClickBack) {\n\t\t\tanchor = (\n\t\t\t\t<button\n\t\t\t\t\tclassName={cx(backLinkClass, 'btn')}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={onClickBack}\n\t\t\t\t>\n\t\t\t\t\t{backIcon}\n\t\t\t\t\t{backLinkText}\n\t\t\t\t</button>\n\t\t\t)\n\t\t} else if (backLinkHref) {\n\t\t\t// Check if the link is relative (client-side) or absolute\n\t\t\tlet linkIsRelative = true\n\t\t\tif (backLinkHref && is.url(backLinkHref)) {\n\t\t\t\tlinkIsRelative = false\n\t\t\t}\n\t\t\t// Only return a Next link if the href is relative\n\t\t\tanchor = linkIsRelative ? (\n\t\t\t\t<RelativeBackLinkComponent href={backLinkHref} {...linkProps}>\n\t\t\t\t\t<a className={backLinkClass}>\n\t\t\t\t\t\t{backIcon}\n\t\t\t\t\t\t{backLinkText}\n\t\t\t\t\t</a>\n\t\t\t\t</RelativeBackLinkComponent>\n\t\t\t) : (\n\t\t\t\t<a href={backLinkHref} className={backLinkClass}>\n\t\t\t\t\t{backIcon}\n\t\t\t\t\t{backLinkText}\n\t\t\t\t</a>\n\t\t\t)\n\t\t}\n\t}\n\n\treturn (\n\t\t<header\n\t\t\tclassName={cx(\n\t\t\t\t'page__header',\n\t\t\t\t{\n\t\t\t\t\t'page__header--is-collapsed': collapsed\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cx('page__header-inner', {\n\t\t\t\t\t'page__header-inner--is-collapsed': collapsed\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{anchor && anchor}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx('page__header-main', {\n\t\t\t\t\t\t'page__header-main--has-bottom-border': hasBottomBorder\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"page__header-title-wrapper\">\n\t\t\t\t\t\t<h1>{title}</h1>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{sidebarExpander && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t{...sidebarExpander}\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tclassName=\"page__header-sidebar-btn\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{primaryAction && <Button {...primaryAction} />}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{tabs && tabs.length > 0 && (\n\t\t\t\t<Tabs isPadded={false} className=\"page__header-tabs\" tabs={tabs} />\n\t\t\t)}\n\t\t</header>\n\t)\n}\n\nPageHeader.displayName = 'Page.Header'\nPageHeader.defaultProps = {\n\ttitle: '',\n\tbackLinkText: 'Back',\n\tbackLinkHref: '',\n\tprimaryAction: null,\n\thasBottomBorder: false,\n\ttabs: []\n}\n\nexport default PageHeader\n"],"file":"PageHeader.js"}

package/lib/components/Page/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Page["default"];
+  }
+});
+Object.defineProperty(exports, "PageHeader", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader2["default"];
+  }
+});
+Object.defineProperty(exports, "PageContent", {
+  enumerable: true,
+  get: function get() {
+    return _PageContent2["default"];
+  }
+});
+
+var _Page = _interopRequireDefault(require("./Page"));
+
+var _PageHeader2 = _interopRequireDefault(require("./components/PageHeader/PageHeader"));
+
+var _PageContent2 = _interopRequireDefault(require("./components/PageContent/PageContent"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"index.js"}

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _PagedModal = _interopRequireDefault(require("./PagedModal"));
+
+var _Forms = require("../Forms");
+
+var PageModalExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(PageModalExample, _Component);
+
+  function PageModalExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, PageModalExample);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(PageModalExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      currentPageIndex: 0
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBack", function () {
+      _this.setState(function (prevState) {
+        return {
+          currentPageIndex: prevState.currentPageIndex > 0 ? prevState.currentPageIndex - 1 : 0
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(PageModalExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var currentPageIndex = this.state.currentPageIndex;
+      return _react["default"].createElement(_PagedModal["default"], {
+        isOpen: (0, _react3["boolean"])('isOpen', true),
+        onAfterOpen: function onAfterOpen() {
+          return console.log('onAfterOpen');
+        },
+        onRequestClose: function onRequestClose() {
+          return console.log('onRequestClose');
+        },
+        onClickBack: this.handleBack,
+        canGoBack: currentPageIndex > 0,
+        isSmall: (0, _react3["boolean"])('isSmall', true),
+        pages: [{
+          title: 'Page 1',
+          isCurrent: currentPageIndex === 0,
+          body: _react["default"].createElement(_Forms.FormLayout, null, _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+            label: "Phone Number",
+            placeholder: "(555)-555-5555"
+          }))),
+          footerPrimaryAction: {
+            text: 'Next',
+            onClick: function onClick() {
+              return _this2.setState({
+                currentPageIndex: 1
+              });
+            }
+          }
+        }, {
+          title: 'Page 2',
+          isCurrent: currentPageIndex === 1,
+          body: _react["default"].createElement(_Forms.FormLayout, null, _react["default"].createElement(_Forms.FormLayoutItem, null, _react["default"].createElement(_Forms.TextInput, {
+            label: "First Name"
+          }))),
+          footerPrimaryAction: {
+            text: 'Submit',
+            onClick: function onClick() {
+              return console.log('Submit!');
+            }
+          }
+        }]
+      });
+    }
+  }]);
+  return PageModalExample;
+}(_react.Component);
+
+var stories = (0, _react2.storiesOf)('Paged Modal', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Page Modal', function () {
+  return _react["default"].createElement(PageModalExample, null);
+}, {
+  jsx: {
+    skip: 1
+  }
+});
+//# sourceMappingURL=PagedModal-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PagedModal/PagedModal-story.js"],"names":["PageModalExample","currentPageIndex","setState","prevState","state","console","log","handleBack","title","isCurrent","body","footerPrimaryAction","text","onClick","Component","stories","module","addDecorator","withKnobs","add","jsx","skip"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;IAQMA,gB;;;;;;;;;;;;;;;;;8FACG;AACPC,MAAAA,gBAAgB,EAAE;AADX,K;mGAIK,YAAM;AAClB,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BF,UAAAA,gBAAgB,EACfE,SAAS,CAACF,gBAAV,GAA6B,CAA7B,GAAiCE,SAAS,CAACF,gBAAV,GAA6B,CAA9D,GAAkE;AAFxC,SAAL;AAAA,OAAvB;AAIA,K;;;;;;6BAEQ;AAAA;;AAAA,UACAA,gBADA,GACqB,KAAKG,KAD1B,CACAH,gBADA;AAGR,aACC,gCAAC,sBAAD;AACC,QAAA,MAAM,EAAE,wBAAQ,QAAR,EAAkB,IAAlB,CADT;AAEC,QAAA,WAAW,EAAE;AAAA,iBAAMI,OAAO,CAACC,GAAR,CAAY,aAAZ,CAAN;AAAA,SAFd;AAGC,QAAA,cAAc,EAAE;AAAA,iBAAMD,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;AAAA,SAHjB;AAIC,QAAA,WAAW,EAAE,KAAKC,UAJnB;AAKC,QAAA,SAAS,EAAEN,gBAAgB,GAAG,CAL/B;AAMC,QAAA,OAAO,EAAE,wBAAQ,SAAR,EAAmB,IAAnB,CANV;AAOC,QAAA,KAAK,EAAE,CACN;AACCO,UAAAA,KAAK,EAAE,QADR;AAECC,UAAAA,SAAS,EAAER,gBAAgB,KAAK,CAFjC;AAGCS,UAAAA,IAAI,EACH,gCAAC,iBAAD,QACC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AACC,YAAA,KAAK,EAAC,cADP;AAEC,YAAA,WAAW,EAAC;AAFb,YADD,CADD,CAJF;AAaCC,UAAAA,mBAAmB,EAAE;AACpBC,YAAAA,IAAI,EAAE,MADc;AAEpBC,YAAAA,OAAO,EAAE;AAAA,qBAAM,MAAI,CAACX,QAAL,CAAc;AAAED,gBAAAA,gBAAgB,EAAE;AAApB,eAAd,CAAN;AAAA;AAFW;AAbtB,SADM,EAmBN;AACCO,UAAAA,KAAK,EAAE,QADR;AAECC,UAAAA,SAAS,EAAER,gBAAgB,KAAK,CAFjC;AAGCS,UAAAA,IAAI,EACH,gCAAC,iBAAD,QACC,gCAAC,qBAAD,QACC,gCAAC,gBAAD;AAAW,YAAA,KAAK,EAAC;AAAjB,YADD,CADD,CAJF;AAUCC,UAAAA,mBAAmB,EAAE;AACpBC,YAAAA,IAAI,EAAE,QADc;AAEpBC,YAAAA,OAAO,EAAE;AAAA,qBAAMR,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;AAAA;AAFW;AAVtB,SAnBM;AAPR,QADD;AA6CA;;;EA5D6BQ,gB;;AA+D/B,IAAMC,OAAO,GAAG,uBAAU,aAAV,EAAyBC,MAAzB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CAACI,GAAR,CAAY,YAAZ,EAA0B;AAAA,SAAM,gCAAC,gBAAD,OAAN;AAAA,CAA1B,EAAsD;AACrDC,EAAAA,GAAG,EAAE;AACJC,IAAAA,IAAI,EAAE;AADF;AADgD,CAAtD","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean } from '@storybook/addon-knobs/react'\nimport PagedModal from './PagedModal'\nimport { TextInput, FormLayout, FormLayoutItem } from '../Forms'\n\ntype Props = {}\n\ntype State = {\n\tcurrentPageIndex: number\n}\n\nclass PageModalExample extends Component<Props, State> {\n\tstate = {\n\t\tcurrentPageIndex: 0\n\t}\n\n\thandleBack = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tcurrentPageIndex:\n\t\t\t\tprevState.currentPageIndex > 0 ? prevState.currentPageIndex - 1 : 0\n\t\t}))\n\t}\n\n\trender() {\n\t\tconst { currentPageIndex } = this.state\n\n\t\treturn (\n\t\t\t<PagedModal\n\t\t\t\tisOpen={boolean('isOpen', true)}\n\t\t\t\tonAfterOpen={() => console.log('onAfterOpen')}\n\t\t\t\tonRequestClose={() => console.log('onRequestClose')}\n\t\t\t\tonClickBack={this.handleBack}\n\t\t\t\tcanGoBack={currentPageIndex > 0}\n\t\t\t\tisSmall={boolean('isSmall', true)}\n\t\t\t\tpages={[\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: 'Page 1',\n\t\t\t\t\t\tisCurrent: currentPageIndex === 0,\n\t\t\t\t\t\tbody: (\n\t\t\t\t\t\t\t<FormLayout>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\t\t\t\tlabel=\"Phone Number\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"(555)-555-5555\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t</FormLayout>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tfooterPrimaryAction: {\n\t\t\t\t\t\t\ttext: 'Next',\n\t\t\t\t\t\t\tonClick: () => this.setState({ currentPageIndex: 1 })\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: 'Page 2',\n\t\t\t\t\t\tisCurrent: currentPageIndex === 1,\n\t\t\t\t\t\tbody: (\n\t\t\t\t\t\t\t<FormLayout>\n\t\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t\t<TextInput label=\"First Name\" />\n\t\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t\t</FormLayout>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tfooterPrimaryAction: {\n\t\t\t\t\t\t\ttext: 'Submit',\n\t\t\t\t\t\t\tonClick: () => console.log('Submit!')\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t]}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nconst stories = storiesOf('Paged Modal', module)\n\nstories.addDecorator(withKnobs)\n\nstories.add('Page Modal', () => <PageModalExample />, {\n\tjsx: {\n\t\tskip: 1\n\t}\n})\n"],"file":"PagedModal-story.js"}

package/lib/components/PagedModal/PagedModal.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+
+var PagedModal =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2["default"])(PagedModal, _React$PureComponent);
+
+  function PagedModal() {
+    (0, _classCallCheck2["default"])(this, PagedModal);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(PagedModal).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(PagedModal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          isOpen = _this$props.isOpen,
+          isFullHeight = _this$props.isFullHeight,
+          size = _this$props.size,
+          pages = _this$props.pages,
+          onRequestClose = _this$props.onRequestClose,
+          canGoBack = _this$props.canGoBack,
+          onClickBack = _this$props.onClickBack;
+      var currentPage = pages.find(function (page) {
+        return page.isCurrent;
+      });
+      return React.createElement(_Modal["default"], {
+        isOpen: isOpen,
+        size: size,
+        isFullHeight: isFullHeight,
+        className: "paged-modal"
+      }, React.createElement(_Modal["default"].Header, {
+        title: currentPage && currentPage.title || '',
+        onRequestClose: onRequestClose,
+        onClickBack: canGoBack && onClickBack,
+        isPaginated: true
+      }), pages.map(function (page, idx) {
+        return React.createElement(_Modal["default"].Body, {
+          key: "".concat(idx),
+          className: (0, _classnames["default"])('paged-modal__page', {
+            'paged-modal__page--is-current': page.isCurrent
+          })
+        }, page.body);
+      }), currentPage && currentPage.footerPrimaryAction && React.createElement(_Modal["default"].Footer, {
+        primaryAction: currentPage.footerPrimaryAction,
+        secondaryAction: currentPage.footerSecondaryAction
+      }));
+    }
+  }]);
+  return PagedModal;
+}(React.PureComponent);
+
+exports["default"] = PagedModal;
+(0, _defineProperty2["default"])(PagedModal, "defaultProps", {
+  size: 'medium'
+});
+//# sourceMappingURL=PagedModal.js.map

package/lib/components/PagedModal/PagedModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PagedModal/PagedModal.js"],"names":["PagedModal","props","isOpen","isFullHeight","size","pages","onRequestClose","canGoBack","onClickBack","currentPage","find","page","isCurrent","title","map","idx","body","footerPrimaryAction","footerSecondaryAction","React","PureComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;IAsCqBA,U;;;;;;;;;;;;6BAKX;AAAA,wBASJ,KAAKC,KATD;AAAA,UAEPC,MAFO,eAEPA,MAFO;AAAA,UAGPC,YAHO,eAGPA,YAHO;AAAA,UAIPC,IAJO,eAIPA,IAJO;AAAA,UAKPC,KALO,eAKPA,KALO;AAAA,UAMPC,cANO,eAMPA,cANO;AAAA,UAOPC,SAPO,eAOPA,SAPO;AAAA,UAQPC,WARO,eAQPA,WARO;AAWR,UAAMC,WAAW,GAAGJ,KAAK,CAACK,IAAN,CAAW,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAACC,SAAT;AAAA,OAAf,CAApB;AAEA,aACC,oBAAC,iBAAD;AACC,QAAA,MAAM,EAAEV,MADT;AAEC,QAAA,IAAI,EAAEE,IAFP;AAGC,QAAA,YAAY,EAAED,YAHf;AAIC,QAAA,SAAS,EAAC;AAJX,SAMC,oBAAC,iBAAD,CAAO,MAAP;AACC,QAAA,KAAK,EAAGM,WAAW,IAAIA,WAAW,CAACI,KAA5B,IAAsC,EAD9C;AAEC,QAAA,cAAc,EAAEP,cAFjB;AAGC,QAAA,WAAW,EAAEC,SAAS,IAAIC,WAH3B;AAIC,QAAA,WAAW;AAJZ,QAND,EAYEH,KAAK,CAACS,GAAN,CAAU,UAACH,IAAD,EAAOI,GAAP;AAAA,eACV,oBAAC,iBAAD,CAAO,IAAP;AACC,UAAA,GAAG,YAAKA,GAAL,CADJ;AAEC,UAAA,SAAS,EAAE,4BAAG,mBAAH,EAAwB;AAClC,6CAAiCJ,IAAI,CAACC;AADJ,WAAxB;AAFZ,WAMED,IAAI,CAACK,IANP,CADU;AAAA,OAAV,CAZF,EAsBEP,WAAW,IAAIA,WAAW,CAACQ,mBAA3B,IACA,oBAAC,iBAAD,CAAO,MAAP;AACC,QAAA,aAAa,EAAER,WAAW,CAACQ,mBAD5B;AAEC,QAAA,eAAe,EAAER,WAAW,CAACS;AAF9B,QAvBF,CADD;AA+BA;;;EAjDsCC,KAAK,CAACC,a;;;iCAAzBpB,U,kBACE;AACrBI,EAAAA,IAAI,EAAE;AADe,C","sourcesContent":["// @flow\nimport * as React from 'react'\nimport cx from 'classnames'\nimport Modal from '../Modal/Modal'\n\nimport type { Props as ModalProps } from '../Modal/Modal'\nimport type { Props as ButtonProps } from '../Button/Button'\n\ntype ModalPageProps = {\n\t/** The title for this page */\n\ttitle: string,\n\n\t/** The modal body for this page */\n\tbody: React.Node,\n\n\t/** The modal footer primary action for this page */\n\tfooterPrimaryAction?: ButtonProps,\n\n\t/** The modal footer secondary action for this page */\n\tfooterSecondaryAction?: ButtonProps,\n\n\t/** Whether this page is currently visible */\n\tisCurrent: boolean\n}\n\ntype Props = {\n\t...ModalProps,\n\n\t/** Callback to close the modal */\n\tonRequestClose: Function,\n\n\t/** Whether the back button should be displayed */\n\tcanGoBack: boolean,\n\n\t/** Function to handle navigating backwards in the modal */\n\tonClickBack?: Function,\n\n\t/** Set true to show the modal */\n\tpages: Array<ModalPageProps>\n}\n\nexport default class PagedModal extends React.PureComponent<Props> {\n\tstatic defaultProps = {\n\t\tsize: 'medium'\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tisOpen,\n\t\t\tisFullHeight,\n\t\t\tsize,\n\t\t\tpages,\n\t\t\tonRequestClose,\n\t\t\tcanGoBack,\n\t\t\tonClickBack\n\t\t} = this.props\n\n\t\tconst currentPage = pages.find(page => page.isCurrent)\n\n\t\treturn (\n\t\t\t<Modal\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tsize={size}\n\t\t\t\tisFullHeight={isFullHeight}\n\t\t\t\tclassName=\"paged-modal\"\n\t\t\t>\n\t\t\t\t<Modal.Header\n\t\t\t\t\ttitle={(currentPage && currentPage.title) || ''}\n\t\t\t\t\tonRequestClose={onRequestClose}\n\t\t\t\t\tonClickBack={canGoBack && onClickBack}\n\t\t\t\t\tisPaginated\n\t\t\t\t/>\n\t\t\t\t{pages.map((page, idx) => (\n\t\t\t\t\t<Modal.Body\n\t\t\t\t\t\tkey={`${idx}`}\n\t\t\t\t\t\tclassName={cx('paged-modal__page', {\n\t\t\t\t\t\t\t'paged-modal__page--is-current': page.isCurrent\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{page.body}\n\t\t\t\t\t</Modal.Body>\n\t\t\t\t))}\n\t\t\t\t{currentPage && currentPage.footerPrimaryAction && (\n\t\t\t\t\t<Modal.Footer\n\t\t\t\t\t\tprimaryAction={currentPage.footerPrimaryAction}\n\t\t\t\t\t\tsecondaryAction={currentPage.footerSecondaryAction}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Modal>\n\t\t)\n\t}\n}\n"],"file":"PagedModal.js"}

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

@@ -0,0 +1,35 @@
+"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 _Pagination = _interopRequireDefault(require("./Pagination"));
+
+var stories = (0, _react2.storiesOf)('Pagination', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Pagination', function () {
+  return _react["default"].createElement(_Pagination["default"], {
+    currentPage: (0, _react3.number)('currentPage', 0),
+    totalPages: (0, _react3.number)('totalPages', 100),
+    showPages: (0, _react3["boolean"])('showPages', false),
+    showJump: (0, _react3["boolean"])('showJump', false),
+    onClickNext: function onClickNext() {
+      return console.log('You clicked next');
+    },
+    onClickBack: function onClickBack() {
+      return console.log('You clicked back');
+    },
+    onPageButtonClick: function onPageButtonClick(page) {
+      return console.log('You clicked ', page);
+    },
+    onJump: function onJump(value) {
+      return console.log('Use jump: ', value);
+    }
+  });
+});
+//# sourceMappingURL=Pagination-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Pagination/Pagination-story.js"],"names":["stories","module","addDecorator","withKnobs","add","console","log","page","value"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG,uBAAU,YAAV,EAAwBC,MAAxB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CAACI,GAAR,CAAY,YAAZ,EAA0B;AAAA,SACzB,gCAAC,sBAAD;AACC,IAAA,WAAW,EAAE,oBAAO,aAAP,EAAsB,CAAtB,CADd;AAEC,IAAA,UAAU,EAAE,oBAAO,YAAP,EAAqB,GAArB,CAFb;AAGC,IAAA,SAAS,EAAE,wBAAQ,WAAR,EAAqB,KAArB,CAHZ;AAIC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAJX;AAKC,IAAA,WAAW,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,kBAAZ,CAAN;AAAA,KALd;AAMC,IAAA,WAAW,EAAE;AAAA,aAAMD,OAAO,CAACC,GAAR,CAAY,kBAAZ,CAAN;AAAA,KANd;AAOC,IAAA,iBAAiB,EAAE,2BAAAC,IAAI;AAAA,aAAIF,OAAO,CAACC,GAAR,CAAY,cAAZ,EAA4BC,IAA5B,CAAJ;AAAA,KAPxB;AAQC,IAAA,MAAM,EAAE,gBAAAC,KAAK;AAAA,aAAIH,OAAO,CAACC,GAAR,CAAY,YAAZ,EAA0BE,KAA1B,CAAJ;AAAA;AARd,IADyB;AAAA,CAA1B","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean, number } from '@storybook/addon-knobs/react'\nimport Pagination from './Pagination'\n\nconst stories = storiesOf('Pagination', module)\n\nstories.addDecorator(withKnobs)\n\nstories.add('Pagination', () => (\n\t<Pagination\n\t\tcurrentPage={number('currentPage', 0)}\n\t\ttotalPages={number('totalPages', 100)}\n\t\tshowPages={boolean('showPages', false)}\n\t\tshowJump={boolean('showJump', false)}\n\t\tonClickNext={() => console.log('You clicked next')}\n\t\tonClickBack={() => console.log('You clicked back')}\n\t\tonPageButtonClick={page => console.log('You clicked ', page)}\n\t\tonJump={value => console.log('Use jump: ', value)}\n\t/>\n))\n"],"file":"Pagination-story.js"}

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _Text = _interopRequireWildcard(require("../Text/Text"));
+
+var _FormPartials = require("../Forms/FormPartials");
+
+var ArrowNext = function ArrowNext(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+  }));
+};
+
+ArrowNext.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+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 Pagination = function Pagination(props) {
+  var currentPage = props.currentPage,
+      totalPages = props.totalPages,
+      showPages = props.showPages,
+      showJump = props.showJump,
+      onClickNext = props.onClickNext,
+      onClickBack = props.onClickBack,
+      onPageButtonClick = props.onPageButtonClick,
+      onJump = props.onJump,
+      isSimple = props.isSimple;
+  var pagesArray = [];
+  var displayPages = [];
+
+  for (var i = 0; i < totalPages; i++) {
+    pagesArray.push(i);
+  }
+
+  if (currentPage <= 2 || totalPages - currentPage <= 2) {
+    displayPages = pagesArray.filter(function (page) {
+      return page === 0 || page === 1 || page === 2 || page === totalPages - 1 || page === totalPages - 2 || page === totalPages - 3 || page === currentPage;
+    });
+
+    if (totalPages > 6) {
+      displayPages.splice(3, 0, {
+        text: '…'
+      });
+    }
+  } else {
+    displayPages = pagesArray.filter(function (page) {
+      return page === 0 || page === totalPages - 1 || page === currentPage || page === currentPage + 1 || page === currentPage - 1;
+    });
+    displayPages.splice(1, 0, {
+      text: '…'
+    });
+    displayPages.splice(displayPages.length - 1, 0, {
+      text: '…'
+    });
+  }
+
+  var kind = isSimple ? 'simple' : 'secondary';
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('pagination-wrapper', {
+      'pagination-wrapper-minimal': !showPages
+    })
+  }, _react["default"].createElement(_Button["default"], {
+    kind: kind,
+    onClick: onClickBack,
+    isSmall: true,
+    className: "pagination__btn",
+    icon: {
+      customIcon: ArrowBack
+    },
+    disabled: currentPage === 0
+  }), showPages && onPageButtonClick && displayPages.map(function (page, idx) {
+    if (page.text === '…') {
+      return _react["default"].createElement(_Text["default"], {
+        key: idx,
+        className: "pagination__page-ellipse"
+      }, _react["default"].createElement(_Text.Span, null, "\u2026"));
+    }
+
+    return _react["default"].createElement(_Button["default"], {
+      key: idx,
+      onClick: function onClick() {
+        return onPageButtonClick(page);
+      },
+      kind: currentPage === page ? 'simple' : '',
+      text: (page + 1).toString(),
+      isSmall: true,
+      className: "pagination__page-btn"
+    });
+  }), _react["default"].createElement(_Button["default"], {
+    kind: kind,
+    onClick: onClickNext,
+    isSmall: true,
+    className: "pagination__btn",
+    icon: {
+      customIcon: ArrowNext
+    },
+    disabled: currentPage >= totalPages - 1
+  }), showJump && onJump && _react["default"].createElement("form", {
+    className: "pagination__jump-wrapper",
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+
+      for (var _i = 0; _i < e.currentTarget.elements.length; _i++) {
+        if (e.currentTarget.elements[_i].name === 'jump') {
+          onJump(e.currentTarget.elements[_i].value || e.currentTarget.elements[_i].placeholder);
+        }
+      }
+    }
+  }, _react["default"].createElement(_Text.Span, {
+    className: "pagination__jump-text"
+  }, "Jump:\xA0"), _react["default"].createElement(_FormPartials.InputInner, {
+    name: "jump",
+    autoComplete: "off",
+    placeholder: currentPage,
+    onBlur: function onBlur(e) {
+      onJump(e.currentTarget.value || e.currentTarget.placeholder);
+    }
+  })));
+};
+
+var _default = Pagination;
+exports["default"] = _default;
+//# sourceMappingURL=Pagination.js.map

package/lib/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.js"],"names":["ArrowNext","ArrowBack","Pagination","props","currentPage","totalPages","showPages","showJump","onClickNext","onClickBack","onPageButtonClick","onJump","isSimple","pagesArray","displayPages","i","push","filter","page","splice","text","length","kind","customIcon","map","idx","toString","e","preventDefault","currentTarget","elements","name","value","placeholder"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\nimport Button from '../Button/Button'\nimport Text, { Span } from '../Text/Text'\nimport { InputInner } from '../Forms/FormPartials'\nimport ArrowNext from '../../../static/assets/icons/ic_arrow_forward.svg'\nimport ArrowBack from '../../../static/assets/icons/ic_arrow_back.svg'\n\nexport type Props = {\n\t/** The current page */\n\tcurrentPage: number,\n\n\t/** Total pages */\n\ttotalPages: number,\n\n\t/** Go forward one page */\n\tonClickNext: Function,\n\n\t/** Go back one page */\n\tonClickBack: Function,\n\n\t/** Navigate to the clicked/tapped page */\n\tonPageButtonClick?: Function,\n\n\t/** Navigate throught the jump input */\n\tonJump?: Function,\n\n\t/** Set true to display pages between arrows */\n\tshowPages?: boolean,\n\n\t/** Set true to show the jump input */\n\tshowJump?: boolean,\n\n\t/** Set true to use simple buttons */\n\tisSimple?: boolean\n}\n\nconst Pagination = (props: Props) => {\n\tconst {\n\t\tcurrentPage,\n\t\ttotalPages,\n\t\tshowPages,\n\t\tshowJump,\n\t\tonClickNext,\n\t\tonClickBack,\n\t\tonPageButtonClick,\n\t\tonJump,\n\t\tisSimple\n\t} = props\n\tconst pagesArray = []\n\tlet displayPages = []\n\tfor (let i = 0; i < totalPages; i++) {\n\t\tpagesArray.push(i)\n\t}\n\tif (currentPage <= 2 || totalPages - currentPage <= 2) {\n\t\tdisplayPages = pagesArray.filter(\n\t\t\tpage =>\n\t\t\t\tpage === 0 ||\n\t\t\t\tpage === 1 ||\n\t\t\t\tpage === 2 ||\n\t\t\t\tpage === totalPages - 1 ||\n\t\t\t\tpage === totalPages - 2 ||\n\t\t\t\tpage === totalPages - 3 ||\n\t\t\t\tpage === currentPage\n\t\t)\n\t\tif (totalPages > 6) {\n\t\t\tdisplayPages.splice(3, 0, { text: '…' })\n\t\t}\n\t} else {\n\t\tdisplayPages = pagesArray.filter(\n\t\t\tpage =>\n\t\t\t\tpage === 0 ||\n\t\t\t\tpage === totalPages - 1 ||\n\t\t\t\tpage === currentPage ||\n\t\t\t\tpage === currentPage + 1 ||\n\t\t\t\tpage === currentPage - 1\n\t\t)\n\t\tdisplayPages.splice(1, 0, { text: '…' })\n\t\tdisplayPages.splice(displayPages.length - 1, 0, { text: '…' })\n\t}\n\n\tconst kind = isSimple ? 'simple' : 'secondary'\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('pagination-wrapper', {\n\t\t\t\t'pagination-wrapper-minimal': !showPages\n\t\t\t})}\n\t\t>\n\t\t\t<Button\n\t\t\t\tkind={kind}\n\t\t\t\tonClick={onClickBack}\n\t\t\t\tisSmall\n\t\t\t\tclassName=\"pagination__btn\"\n\t\t\t\ticon={{ customIcon: ArrowBack }}\n\t\t\t\tdisabled={currentPage === 0}\n\t\t\t/>\n\t\t\t{showPages &&\n\t\t\t\tonPageButtonClick &&\n\t\t\t\tdisplayPages.map((page, idx) => {\n\t\t\t\t\tif (page.text === '…') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Text key={idx} className=\"pagination__page-ellipse\">\n\t\t\t\t\t\t\t\t<Span>…</Span>\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\tonClick={() => onPageButtonClick(page)}\n\t\t\t\t\t\t\tkind={currentPage === page ? 'simple' : ''}\n\t\t\t\t\t\t\ttext={(page + 1).toString()}\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tclassName=\"pagination__page-btn\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t<Button\n\t\t\t\tkind={kind}\n\t\t\t\tonClick={onClickNext}\n\t\t\t\tisSmall\n\t\t\t\tclassName=\"pagination__btn\"\n\t\t\t\ticon={{ customIcon: ArrowNext }}\n\t\t\t\tdisabled={currentPage >= totalPages - 1}\n\t\t\t/>\n\t\t\t{showJump && onJump && (\n\t\t\t\t<form\n\t\t\t\t\tclassName=\"pagination__jump-wrapper\"\n\t\t\t\t\tonSubmit={e => {\n\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\tfor (let i = 0; i < e.currentTarget.elements.length; i++) {\n\t\t\t\t\t\t\tif (e.currentTarget.elements[i].name === 'jump') {\n\t\t\t\t\t\t\t\tonJump(\n\t\t\t\t\t\t\t\t\te.currentTarget.elements[i].value ||\n\t\t\t\t\t\t\t\t\t\te.currentTarget.elements[i].placeholder\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Span className=\"pagination__jump-text\">Jump:&nbsp;</Span>\n\t\t\t\t\t<InputInner\n\t\t\t\t\t\tname=\"jump\"\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tplaceholder={currentPage}\n\t\t\t\t\t\tonBlur={e => {\n\t\t\t\t\t\t\tonJump(e.currentTarget.value || e.currentTarget.placeholder)\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</form>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport default Pagination\n"],"file":"Pagination.js"}