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

package/lib/components/Core/components/ProfileSummary/ProfileSummary-story.js

@@ -0,0 +1,26 @@
+"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 _ProfileSummary = _interopRequireDefault(require("./ProfileSummary"));
+
+var _userPlaceholder96w = _interopRequireDefault(require("../../../../../static/assets/users/user-placeholder--96w.png"));
+
+var stories = (0, _react2.storiesOf)('Profile Summary', module);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Basic', function () {
+  return _react["default"].createElement(_ProfileSummary["default"], {
+    image: (0, _react3.text)('image', _userPlaceholder96w["default"]),
+    name: (0, _react3.text)('name', 'Dorian Feeney'),
+    onButtonClick: function onButtonClick() {
+      return console.log('onButtonClick');
+    }
+  });
+});
+//# sourceMappingURL=ProfileSummary-story.js.map

package/lib/components/Core/components/ProfileSummary/ProfileSummary-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/ProfileSummary/ProfileSummary-story.js"],"names":["stories","module","addDecorator","withKnobs","add","defaultImageLg","console","log"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,OAAO,GAAG,uBAAU,iBAAV,EAA6BC,MAA7B,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CAACI,GAAR,CAAY,OAAZ,EAAqB;AAAA,SACpB,gCAAC,0BAAD;AACC,IAAA,KAAK,EAAE,kBAAK,OAAL,EAAcC,8BAAd,CADR;AAEC,IAAA,IAAI,EAAE,kBAAK,MAAL,EAAa,eAAb,CAFP;AAGC,IAAA,aAAa,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,eAAZ,CAAN;AAAA;AAHhB,IADoB;AAAA,CAArB","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text } from '@storybook/addon-knobs/react'\nimport ProfileSummary from './ProfileSummary'\nimport defaultImageLg from '../../../../../static/assets/users/user-placeholder--96w.png'\n\nconst stories = storiesOf('Profile Summary', module)\n\nstories.addDecorator(withKnobs)\n\nstories.add('Basic', () => (\n\t<ProfileSummary\n\t\timage={text('image', defaultImageLg)}\n\t\tname={text('name', 'Dorian Feeney')}\n\t\tonButtonClick={() => console.log('onButtonClick')}\n\t/>\n))\n"],"file":"ProfileSummary-story.js"}

package/lib/components/Core/components/ProfileSummary/ProfileSummary.js

@@ -0,0 +1,46 @@
+"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 _Avatar = _interopRequireDefault(require("../../../Avatar/Avatar"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _Text = _interopRequireDefault(require("../../../Text/Text"));
+
+var ProfileSummary = function ProfileSummary(props) {
+  var image = props.image,
+      name = props.name,
+      onButtonClick = props.onButtonClick;
+  return _react["default"].createElement("div", {
+    className: "profile-summary"
+  }, _react["default"].createElement(_Avatar["default"], {
+    image: image,
+    alt: name,
+    className: "profile-summary__avatar"
+  }), _react["default"].createElement(_Text["default"], {
+    className: "profile-summary__name"
+  }, name), _react["default"].createElement(_Button["default"], {
+    onClick: onButtonClick,
+    className: "profile-summary__btn",
+    icon: {
+      name: 'more_vertical',
+      isLineIcon: true
+    },
+    text: "More options",
+    isIconOnly: true,
+    isSmall: true
+  }));
+};
+
+ProfileSummary.defaultProps = {};
+var _default = ProfileSummary;
+exports["default"] = _default;
+//# sourceMappingURL=ProfileSummary.js.map

package/lib/components/Core/components/ProfileSummary/ProfileSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/ProfileSummary/ProfileSummary.js"],"names":["ProfileSummary","props","image","name","onButtonClick","isLineIcon","defaultProps"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AAaA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAkB;AAAA,MAChCC,KADgC,GACDD,KADC,CAChCC,KADgC;AAAA,MACzBC,IADyB,GACDF,KADC,CACzBE,IADyB;AAAA,MACnBC,aADmB,GACDH,KADC,CACnBG,aADmB;AAExC,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,gCAAC,kBAAD;AAAQ,IAAA,KAAK,EAAEF,KAAf;AAAsB,IAAA,GAAG,EAAEC,IAA3B;AAAiC,IAAA,SAAS,EAAC;AAA3C,IADD,EAEC,gCAAC,gBAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAyCA,IAAzC,CAFD,EAGC,gCAAC,kBAAD;AACC,IAAA,OAAO,EAAEC,aADV;AAEC,IAAA,SAAS,EAAC,sBAFX;AAGC,IAAA,IAAI,EAAE;AAAED,MAAAA,IAAI,EAAE,eAAR;AAAyBE,MAAAA,UAAU,EAAE;AAArC,KAHP;AAIC,IAAA,IAAI,EAAC,cAJN;AAKC,IAAA,UAAU,MALX;AAMC,IAAA,OAAO;AANR,IAHD,CADD;AAcA,CAhBD;;AAkBAL,cAAc,CAACM,YAAf,GAA8B,EAA9B;eAEeN,c","sourcesContent":["// @flow\nimport React from 'react'\nimport Avatar from '../../../Avatar/Avatar'\nimport Button from '../../../Button/Button'\nimport Text from '../../../Text/Text'\n\ntype Props = {\n\t/** User profile image */\n\timage: string,\n\n\t/** Use name */\n\tname: string,\n\n\t/** Function for the button */\n\tonButtonClick: Function\n}\n\nconst ProfileSummary = (props: Props) => {\n\tconst { image, name, onButtonClick } = props\n\treturn (\n\t\t<div className=\"profile-summary\">\n\t\t\t<Avatar image={image} alt={name} className=\"profile-summary__avatar\" />\n\t\t\t<Text className=\"profile-summary__name\">{name}</Text>\n\t\t\t<Button\n\t\t\t\tonClick={onButtonClick}\n\t\t\t\tclassName=\"profile-summary__btn\"\n\t\t\t\ticon={{ name: 'more_vertical', isLineIcon: true }}\n\t\t\t\ttext=\"More options\"\n\t\t\t\tisIconOnly\n\t\t\t\tisSmall\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nProfileSummary.defaultProps = {}\n\nexport default ProfileSummary\n"],"file":"ProfileSummary.js"}

package/lib/components/Core/components/SaveBar/SaveBar-story.js

@@ -0,0 +1,68 @@
+"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 _StylesProvider = _interopRequireDefault(require("../../../../../.storybook/StylesProvider"));
+
+var _SaveBar = _interopRequireDefault(require("./SaveBar"));
+
+var ProvideStyles = function ProvideStyles(storyFn) {
+  return _react["default"].createElement(_StylesProvider["default"], null, storyFn());
+};
+
+var stories = (0, _react2.storiesOf)('Save Bar', module);
+stories.addDecorator(ProvideStyles);
+stories.addDecorator(_react3.withKnobs);
+stories.add('Default', function () {
+  return _react["default"].createElement(_SaveBar["default"], {
+    isVisible: (0, _react3["boolean"])('isVisible', true),
+    isSaving: (0, _react3["boolean"])('isSaving', false),
+    isDiscarding: (0, _react3["boolean"])('isDiscarding', false),
+    isSaveDisabled: (0, _react3["boolean"])('isSaveDisabled', false),
+    isDiscardDisabled: (0, _react3["boolean"])('isDiscardDisabled', false),
+    onDiscard: function onDiscard() {
+      return console.log('DISCARD');
+    },
+    onSave: function onSave() {
+      return console.log('SAVE');
+    },
+    STORYBOOKdoNotWrap: true
+  });
+}).add('Saving', function () {
+  return _react["default"].createElement(_SaveBar["default"], {
+    isVisible: (0, _react3["boolean"])('isVisible', true),
+    isSaving: (0, _react3["boolean"])('isSaving', false),
+    isDiscarding: (0, _react3["boolean"])('isDiscarding', false),
+    isSaveDisabled: (0, _react3["boolean"])('isSaveDisabled', false),
+    isDiscardDisabled: (0, _react3["boolean"])('isDiscardDisabled', false),
+    onDiscard: function onDiscard() {
+      return console.log('DISCARD');
+    },
+    onSave: function onSave() {
+      return console.log('SAVE');
+    },
+    STORYBOOKdoNotWrap: true
+  });
+}).add('Discarding', function () {
+  return _react["default"].createElement(_SaveBar["default"], {
+    isVisible: (0, _react3["boolean"])('isVisible', true),
+    isSaving: (0, _react3["boolean"])('isSaving', false),
+    isDiscarding: (0, _react3["boolean"])('isDiscarding', false),
+    isSaveDisabled: (0, _react3["boolean"])('isSaveDisabled', false),
+    isDiscardDisabled: (0, _react3["boolean"])('isDiscardDisabled', false),
+    onDiscard: function onDiscard() {
+      return console.log('DISCARD');
+    },
+    onSave: function onSave() {
+      return console.log('SAVE');
+    },
+    STORYBOOKdoNotWrap: true
+  });
+});
+//# sourceMappingURL=SaveBar-story.js.map

package/lib/components/Core/components/SaveBar/SaveBar-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/SaveBar/SaveBar-story.js"],"names":["ProvideStyles","storyFn","stories","module","addDecorator","withKnobs","add","console","log"],"mappings":";;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,OAAO;AAAA,SAAI,gCAAC,0BAAD,QAAiBA,OAAO,EAAxB,CAAJ;AAAA,CAA7B;;AAEA,IAAMC,OAAO,GAAG,uBAAU,UAAV,EAAsBC,MAAtB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBJ,aAArB;AACAE,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEAH,OAAO,CACLI,GADF,CACM,SADN,EACiB;AAAA,SACf,gCAAC,mBAAD;AACC,IAAA,SAAS,EAAE,wBAAQ,WAAR,EAAqB,IAArB,CADZ;AAEC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAFX;AAGC,IAAA,YAAY,EAAE,wBAAQ,cAAR,EAAwB,KAAxB,CAHf;AAIC,IAAA,cAAc,EAAE,wBAAQ,gBAAR,EAA0B,KAA1B,CAJjB;AAKC,IAAA,iBAAiB,EAAE,wBAAQ,mBAAR,EAA6B,KAA7B,CALpB;AAMC,IAAA,SAAS,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;AAAA,KANZ;AAOC,IAAA,MAAM,EAAE;AAAA,aAAMD,OAAO,CAACC,GAAR,CAAY,MAAZ,CAAN;AAAA,KAPT;AAQC,IAAA,kBAAkB;AARnB,IADe;AAAA,CADjB,EAaEF,GAbF,CAaM,QAbN,EAagB;AAAA,SACd,gCAAC,mBAAD;AACC,IAAA,SAAS,EAAE,wBAAQ,WAAR,EAAqB,IAArB,CADZ;AAEC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAFX;AAGC,IAAA,YAAY,EAAE,wBAAQ,cAAR,EAAwB,KAAxB,CAHf;AAIC,IAAA,cAAc,EAAE,wBAAQ,gBAAR,EAA0B,KAA1B,CAJjB;AAKC,IAAA,iBAAiB,EAAE,wBAAQ,mBAAR,EAA6B,KAA7B,CALpB;AAMC,IAAA,SAAS,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;AAAA,KANZ;AAOC,IAAA,MAAM,EAAE;AAAA,aAAMD,OAAO,CAACC,GAAR,CAAY,MAAZ,CAAN;AAAA,KAPT;AAQC,IAAA,kBAAkB;AARnB,IADc;AAAA,CAbhB,EAyBEF,GAzBF,CAyBM,YAzBN,EAyBoB;AAAA,SAClB,gCAAC,mBAAD;AACC,IAAA,SAAS,EAAE,wBAAQ,WAAR,EAAqB,IAArB,CADZ;AAEC,IAAA,QAAQ,EAAE,wBAAQ,UAAR,EAAoB,KAApB,CAFX;AAGC,IAAA,YAAY,EAAE,wBAAQ,cAAR,EAAwB,KAAxB,CAHf;AAIC,IAAA,cAAc,EAAE,wBAAQ,gBAAR,EAA0B,KAA1B,CAJjB;AAKC,IAAA,iBAAiB,EAAE,wBAAQ,mBAAR,EAA6B,KAA7B,CALpB;AAMC,IAAA,SAAS,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;AAAA,KANZ;AAOC,IAAA,MAAM,EAAE;AAAA,aAAMD,OAAO,CAACC,GAAR,CAAY,MAAZ,CAAN;AAAA,KAPT;AAQC,IAAA,kBAAkB;AARnB,IADkB;AAAA,CAzBpB","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean } from '@storybook/addon-knobs/react'\nimport StylesProvider from '../../../../../.storybook/StylesProvider'\nimport SaveBar from './SaveBar'\n\nconst ProvideStyles = storyFn => <StylesProvider>{storyFn()}</StylesProvider>\n\nconst stories = storiesOf('Save Bar', module)\n\nstories.addDecorator(ProvideStyles)\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Default', () => (\n\t\t<SaveBar\n\t\t\tisVisible={boolean('isVisible', true)}\n\t\t\tisSaving={boolean('isSaving', false)}\n\t\t\tisDiscarding={boolean('isDiscarding', false)}\n\t\t\tisSaveDisabled={boolean('isSaveDisabled', false)}\n\t\t\tisDiscardDisabled={boolean('isDiscardDisabled', false)}\n\t\t\tonDiscard={() => console.log('DISCARD')}\n\t\t\tonSave={() => console.log('SAVE')}\n\t\t\tSTORYBOOKdoNotWrap\n\t\t/>\n\t))\n\t.add('Saving', () => (\n\t\t<SaveBar\n\t\t\tisVisible={boolean('isVisible', true)}\n\t\t\tisSaving={boolean('isSaving', false)}\n\t\t\tisDiscarding={boolean('isDiscarding', false)}\n\t\t\tisSaveDisabled={boolean('isSaveDisabled', false)}\n\t\t\tisDiscardDisabled={boolean('isDiscardDisabled', false)}\n\t\t\tonDiscard={() => console.log('DISCARD')}\n\t\t\tonSave={() => console.log('SAVE')}\n\t\t\tSTORYBOOKdoNotWrap\n\t\t/>\n\t))\n\t.add('Discarding', () => (\n\t\t<SaveBar\n\t\t\tisVisible={boolean('isVisible', true)}\n\t\t\tisSaving={boolean('isSaving', false)}\n\t\t\tisDiscarding={boolean('isDiscarding', false)}\n\t\t\tisSaveDisabled={boolean('isSaveDisabled', false)}\n\t\t\tisDiscardDisabled={boolean('isDiscardDisabled', false)}\n\t\t\tonDiscard={() => console.log('DISCARD')}\n\t\t\tonSave={() => console.log('SAVE')}\n\t\t\tSTORYBOOKdoNotWrap\n\t\t/>\n\t))\n"],"file":"SaveBar-story.js"}

package/lib/components/Core/components/SaveBar/SaveBar.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 _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 = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var SaveBar =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2["default"])(SaveBar, _React$PureComponent);
+
+  function SaveBar() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, SaveBar);
+
+    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"])(SaveBar)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_element", null);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(SaveBar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this._element = document.body;
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          location = _this$props.location,
+          message = _this$props.message,
+          isVisible = _this$props.isVisible,
+          isDiscarding = _this$props.isDiscarding,
+          isSaving = _this$props.isSaving,
+          isDiscardDisabled = _this$props.isDiscardDisabled,
+          isSaveDisabled = _this$props.isSaveDisabled,
+          onDiscard = _this$props.onDiscard,
+          onSave = _this$props.onSave;
+
+      if (!this._element) {
+        return null;
+      }
+
+      return _reactDom["default"].createPortal(_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+        "in": isVisible,
+        appear: true,
+        classNames: "save-bar",
+        timeout: 100
+      }, _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('save-bar', {
+          'save-bar--visible': isVisible
+        })
+      }, _react["default"].createElement("div", {
+        className: "save-bar__left"
+      }, location && location.name ? _react["default"].createElement("p", {
+        className: "save-bar__text"
+      }, location.name) : _react["default"].createElement("p", {
+        className: "save-bar__text"
+      }, "Spruce")), _react["default"].createElement("div", {
+        className: "save-bar__right"
+      }, _react["default"].createElement("p", {
+        className: "save-bar__title"
+      }, message), onDiscard && _react["default"].createElement(_Button["default"], {
+        kind: "simple",
+        text: "Discard",
+        onClick: onDiscard,
+        disabled: isDiscardDisabled || isDiscarding || isSaving,
+        isLoading: isDiscarding,
+        isSmall: true
+      }), _react["default"].createElement(_Button["default"], {
+        kind: "primary",
+        text: "Save",
+        onClick: onSave,
+        disabled: isSaveDisabled || isDiscarding || isSaving,
+        isLoading: isSaving,
+        isSmall: true
+      })))), this._element);
+    }
+  }]);
+  return SaveBar;
+}(_react["default"].PureComponent);
+
+exports["default"] = SaveBar;
+(0, _defineProperty2["default"])(SaveBar, "defaultProps", {
+  message: 'Unsaved changes',
+  isVisible: false,
+  isDiscarding: false,
+  isSaving: false,
+  isDiscardDisabled: false,
+  isSaveDisabled: false
+});
+//# sourceMappingURL=SaveBar.js.map

package/lib/components/Core/components/SaveBar/SaveBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/SaveBar/SaveBar.js"],"names":["SaveBar","_element","document","body","forceUpdate","props","location","message","isVisible","isDiscarding","isSaving","isDiscardDisabled","isSaveDisabled","onDiscard","onSave","ReactDOM","createPortal","name","React","PureComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;IAiCqBA,O;;;;;;;;;;;;;;;;;iGACT,I;;;;;;wCAWS;AACnB,WAAKC,QAAL,GAAgBC,QAAQ,CAACC,IAAzB;AACA,WAAKC,WAAL;AACA;;;6BAEQ;AAAA,wBAWJ,KAAKC,KAXD;AAAA,UAEPC,QAFO,eAEPA,QAFO;AAAA,UAGPC,OAHO,eAGPA,OAHO;AAAA,UAIPC,SAJO,eAIPA,SAJO;AAAA,UAKPC,YALO,eAKPA,YALO;AAAA,UAMPC,QANO,eAMPA,QANO;AAAA,UAOPC,iBAPO,eAOPA,iBAPO;AAAA,UAQPC,cARO,eAQPA,cARO;AAAA,UASPC,SATO,eASPA,SATO;AAAA,UAUPC,MAVO,eAUPA,MAVO;;AAaR,UAAI,CAAC,KAAKb,QAAV,EAAoB;AACnB,eAAO,IAAP;AACA;;AAED,aAAOc,qBAASC,YAAT,CACN,gCAAC,mCAAD;AACC,cAAIR,SADL;AAEC,QAAA,MAAM,EAAE,IAFT;AAGC,QAAA,UAAU,EAAC,UAHZ;AAIC,QAAA,OAAO,EAAE;AAJV,SAMC;AAAK,QAAA,SAAS,EAAE,4BAAG,UAAH,EAAe;AAAE,+BAAqBA;AAAvB,SAAf;AAAhB,SACC;AAAK,QAAA,SAAS,EAAC;AAAf,SACEF,QAAQ,IAAIA,QAAQ,CAACW,IAArB,GACA;AAAG,QAAA,SAAS,EAAC;AAAb,SAA+BX,QAAQ,CAACW,IAAxC,CADA,GAGA;AAAG,QAAA,SAAS,EAAC;AAAb,kBAJF,CADD,EASC;AAAK,QAAA,SAAS,EAAC;AAAf,SACC;AAAG,QAAA,SAAS,EAAC;AAAb,SAAgCV,OAAhC,CADD,EAEEM,SAAS,IACT,gCAAC,kBAAD;AACC,QAAA,IAAI,EAAC,QADN;AAEC,QAAA,IAAI,EAAC,SAFN;AAGC,QAAA,OAAO,EAAEA,SAHV;AAIC,QAAA,QAAQ,EAAEF,iBAAiB,IAAKF,YAAY,IAAIC,QAJjD;AAKC,QAAA,SAAS,EAAED,YALZ;AAMC,QAAA,OAAO;AANR,QAHF,EAYC,gCAAC,kBAAD;AACC,QAAA,IAAI,EAAC,SADN;AAEC,QAAA,IAAI,EAAC,MAFN;AAGC,QAAA,OAAO,EAAEK,MAHV;AAIC,QAAA,QAAQ,EAAEF,cAAc,IAAKH,YAAY,IAAIC,QAJ9C;AAKC,QAAA,SAAS,EAAEA,QALZ;AAMC,QAAA,OAAO;AANR,QAZD,CATD,CAND,CADM,EAuCN,KAAKT,QAvCC,CAAP;AAyCA;;;EA3EmCiB,kBAAMC,a;;;iCAAtBnB,O,kBAGE;AACrBO,EAAAA,OAAO,EAAE,iBADY;AAErBC,EAAAA,SAAS,EAAE,KAFU;AAGrBC,EAAAA,YAAY,EAAE,KAHO;AAIrBC,EAAAA,QAAQ,EAAE,KAJW;AAKrBC,EAAAA,iBAAiB,EAAE,KALE;AAMrBC,EAAAA,cAAc,EAAE;AANK,C","sourcesContent":["// @flow\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport cx from 'classnames'\nimport Button from '../../../Button/Button'\nimport { CSSTransition } from 'react-transition-group'\n\nexport type Props = {\n\t/** The current location */\n\tlocation?: Object,\n\n\t/** The message to display in the Save Bar */\n\tmessage?: string,\n\n\t/** Set to true to show the save bar */\n\tisVisible: boolean,\n\n\t/** Set to true to disable the discard button */\n\tisDiscardDisabled: Boolean,\n\n\t/** Set to true to disable the save button */\n\tisSaveDisabled: boolean,\n\n\t/** Set to true while the discard action is being executed */\n\tisDiscarding: boolean,\n\n\t/** Set to true while the save action is being executed */\n\tisSaving: boolean,\n\n\t/** The function to execute when user selects discard */\n\tonDiscard?: Function,\n\n\t/** The function to execute when user selects save */\n\tonSave: Function\n}\n\ntype State = {}\n\nexport default class SaveBar extends React.PureComponent<Props, State> {\n\t_element = null\n\n\tstatic defaultProps = {\n\t\tmessage: 'Unsaved changes',\n\t\tisVisible: false,\n\t\tisDiscarding: false,\n\t\tisSaving: false,\n\t\tisDiscardDisabled: false,\n\t\tisSaveDisabled: false\n\t}\n\n\tcomponentDidMount() {\n\t\tthis._element = document.body\n\t\tthis.forceUpdate()\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tlocation,\n\t\t\tmessage,\n\t\t\tisVisible,\n\t\t\tisDiscarding,\n\t\t\tisSaving,\n\t\t\tisDiscardDisabled,\n\t\t\tisSaveDisabled,\n\t\t\tonDiscard,\n\t\t\tonSave\n\t\t} = this.props\n\n\t\tif (!this._element) {\n\t\t\treturn null\n\t\t}\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<CSSTransition\n\t\t\t\tin={isVisible}\n\t\t\t\tappear={true}\n\t\t\t\tclassNames=\"save-bar\"\n\t\t\t\ttimeout={100}\n\t\t\t>\n\t\t\t\t<div className={cx('save-bar', { 'save-bar--visible': isVisible })}>\n\t\t\t\t\t<div className=\"save-bar__left\">\n\t\t\t\t\t\t{location && location.name ? (\n\t\t\t\t\t\t\t<p className=\"save-bar__text\">{location.name}</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<p className=\"save-bar__text\">Spruce</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"save-bar__right\">\n\t\t\t\t\t\t<p className=\"save-bar__title\">{message}</p>\n\t\t\t\t\t\t{onDiscard && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\t\ttext=\"Discard\"\n\t\t\t\t\t\t\t\tonClick={onDiscard}\n\t\t\t\t\t\t\t\tdisabled={isDiscardDisabled || (isDiscarding || isSaving)}\n\t\t\t\t\t\t\t\tisLoading={isDiscarding}\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\t\ttext=\"Save\"\n\t\t\t\t\t\t\tonClick={onSave}\n\t\t\t\t\t\t\tdisabled={isSaveDisabled || (isDiscarding || isSaving)}\n\t\t\t\t\t\t\tisLoading={isSaving}\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CSSTransition>,\n\t\t\tthis._element\n\t\t)\n\t}\n}\n"],"file":"SaveBar.js"}

package/lib/components/Core/components/Sidebar/Sidebar-story.js

@@ -0,0 +1,204 @@
+"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 _StylesProvider = _interopRequireDefault(require("../../../../../.storybook/StylesProvider"));
+
+var _Sidebar = _interopRequireDefault(require("./Sidebar"));
+
+var HomeIcon = function HomeIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    d: "M3.502 9.297v5.5h4v-4a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v4h4v-5.5M1.502 8.297l6.793-6.793a1 1 0 0 1 1.414 0l6.793 6.793",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+HomeIcon.defaultProps = {
+  width: "18",
+  height: "16",
+  viewBox: "0 0 18 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var TeamsIcon = function TeamsIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    d: "M4.133 6.854a4.567 4.567 0 0 0 5.095 1.024",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M6.5 11a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M9 16.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M10.991 16.232a4.5 4.5 0 0 0-7.924-2.643",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M12.75 11.5a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M15.183 13.246a3 3 0 0 0-5.146.472",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+TeamsIcon.defaultProps = {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var NotificationsIcon = function NotificationsIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    d: "M14.138 5.497a6.067 6.067 0 1 0-10.857 5.261L1.5 14.5l3.741-1.782c.69.43 1.457.716 2.259.842M5.5 5.5h5M5.5 8.5h2",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M12.921 8a3.563 3.563 0 0 1 2.684 5.924l.448 2.576-2.334-1.439A3.576 3.576 0 1 1 12.92 8h.002z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M14 10.5h-2M14 12.5h-2",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+NotificationsIcon.defaultProps = {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ProvideStyles = function ProvideStyles(storyFn) {
+  return _react["default"].createElement(_StylesProvider["default"], null, storyFn());
+};
+
+var stories = (0, _react2.storiesOf)('Sidebar', module);
+stories.addDecorator(ProvideStyles);
+stories.addDecorator(_react3.withKnobs);
+var personalItems = [{
+  text: 'Home',
+  icon: _react["default"].createElement(HomeIcon, {
+    className: "sidebar-item__line-icon"
+  }),
+  isCurrent: true,
+  href: '#'
+}, {
+  text: 'Teams',
+  icon: _react["default"].createElement(TeamsIcon, {
+    className: "sidebar-item__line-icon"
+  }),
+  isCurrent: false,
+  href: '#'
+}, {
+  text: 'Notification Preferences',
+  icon: _react["default"].createElement(NotificationsIcon, {
+    className: "sidebar-item__line-icon"
+  }),
+  isCurrent: false,
+  href: '#'
+}];
+var backLink = {
+  text: 'Organization Dashboard',
+  href: '#'
+};
+
+var Example =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Example, _Component);
+
+  function Example() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Example);
+
+    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"])(Example)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      showSidebar: true
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleToggleSidebar", function () {
+      _this.setState(function (prevState) {
+        return {
+          showSidebar: !prevState.showSidebar
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Example, [{
+    key: "render",
+    value: function render() {
+      var showSidebar = this.state.showSidebar;
+      return _react["default"].createElement(_Sidebar["default"], {
+        items: personalItems,
+        backLink: backLink,
+        isExpanded: showSidebar,
+        toggleExpanded: this.handleToggleSidebar,
+        forceCloseSidebar: function forceCloseSidebar() {
+          return null;
+        },
+        STORYBOOKdoNotWrap: true
+      });
+    }
+  }]);
+  return Example;
+}(_react.Component);
+
+stories.add('Default', function () {
+  return _react["default"].createElement(Example, null);
+});
+//# sourceMappingURL=Sidebar-story.js.map

package/lib/components/Core/components/Sidebar/Sidebar-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/Sidebar/Sidebar-story.js"],"names":["HomeIcon","TeamsIcon","NotificationsIcon","ProvideStyles","storyFn","stories","module","addDecorator","withKnobs","personalItems","text","icon","isCurrent","href","backLink","Example","showSidebar","setState","prevState","state","handleToggleSidebar","Component","add"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;IACOA,Q,YAAAA,Q;;;;;;;;;AAAAA,Q;;;;;;;IACAC,S,YAAAA,S;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAAA,S;;;;;;;IACAC,iB,YAAAA,iB;;;;;;;;;;;;;;;;;;;;AAAAA,iB;;;;;;;AAEP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,OAAO;AAAA,SAAI,gCAAC,0BAAD,QAAiBA,OAAO,EAAxB,CAAJ;AAAA,CAA7B;;AAEA,IAAMC,OAAO,GAAG,uBAAU,SAAV,EAAqBC,MAArB,CAAhB;AAEAD,OAAO,CAACE,YAAR,CAAqBJ,aAArB;AACAE,OAAO,CAACE,YAAR,CAAqBC,iBAArB;AAEA,IAAMC,aAAa,GAAG,CACrB;AACCC,EAAAA,IAAI,EAAE,MADP;AAECC,EAAAA,IAAI,EAAE,gCAAC,QAAD;AAAU,IAAA,SAAS,EAAC;AAApB,IAFP;AAGCC,EAAAA,SAAS,EAAE,IAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CADqB,EAOrB;AACCH,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,IAAI,EAAE,gCAAC,SAAD;AAAW,IAAA,SAAS,EAAC;AAArB,IAFP;AAGCC,EAAAA,SAAS,EAAE,KAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CAPqB,EAarB;AACCH,EAAAA,IAAI,EAAE,0BADP;AAECC,EAAAA,IAAI,EAAE,gCAAC,iBAAD;AAAmB,IAAA,SAAS,EAAC;AAA7B,IAFP;AAGCC,EAAAA,SAAS,EAAE,KAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CAbqB,CAAtB;AAqBA,IAAMC,QAAQ,GAAG;AAChBJ,EAAAA,IAAI,EAAE,wBADU;AAEhBG,EAAAA,IAAI,EAAE;AAFU,CAAjB;;IAKME,O;;;;;;;;;;;;;;;;;8FACG;AACPC,MAAAA,WAAW,EAAE;AADN,K;4GAIc,YAAM;AAC3B,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BF,UAAAA,WAAW,EAAE,CAACE,SAAS,CAACF;AADG,SAAL;AAAA,OAAvB;AAGA,K;;;;;;6BAEQ;AAAA,UACAA,WADA,GACgB,KAAKG,KADrB,CACAH,WADA;AAGR,aACC,gCAAC,mBAAD;AACC,QAAA,KAAK,EAAEP,aADR;AAEC,QAAA,QAAQ,EAAEK,QAFX;AAGC,QAAA,UAAU,EAAEE,WAHb;AAIC,QAAA,cAAc,EAAE,KAAKI,mBAJtB;AAKC,QAAA,iBAAiB,EAAE;AAAA,iBAAM,IAAN;AAAA,SALpB;AAMC,QAAA,kBAAkB;AANnB,QADD;AAUA;;;EAxBoBC,gB;;AA2BtBhB,OAAO,CAACiB,GAAR,CAAY,SAAZ,EAAuB;AAAA,SAAM,gCAAC,OAAD,OAAN;AAAA,CAAvB","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs } from '@storybook/addon-knobs/react'\nimport StylesProvider from '../../../../../.storybook/StylesProvider'\nimport Sidebar from './Sidebar'\nimport HomeIcon from '../../../../../static/assets/icons/Interface-Essential/Home/house-1--16w.svg'\nimport TeamsIcon from '../../../../../static/assets/icons/Work-Office-Companies/Human-Resources/human-resources-search-team--16w.svg'\nimport NotificationsIcon from '../../../../../static/assets/icons/Messages-Chat-Smileys/Conversation/conversation-text--16w.svg'\n\nconst ProvideStyles = storyFn => <StylesProvider>{storyFn()}</StylesProvider>\n\nconst stories = storiesOf('Sidebar', module)\n\nstories.addDecorator(ProvideStyles)\nstories.addDecorator(withKnobs)\n\nconst personalItems = [\n\t{\n\t\ttext: 'Home',\n\t\ticon: <HomeIcon className=\"sidebar-item__line-icon\" />,\n\t\tisCurrent: true,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Teams',\n\t\ticon: <TeamsIcon className=\"sidebar-item__line-icon\" />,\n\t\tisCurrent: false,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Notification Preferences',\n\t\ticon: <NotificationsIcon className=\"sidebar-item__line-icon\" />,\n\t\tisCurrent: false,\n\t\thref: '#'\n\t}\n]\n\nconst backLink = {\n\ttext: 'Organization Dashboard',\n\thref: '#'\n}\n\nclass Example extends Component {\n\tstate = {\n\t\tshowSidebar: true\n\t}\n\n\thandleToggleSidebar = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tshowSidebar: !prevState.showSidebar\n\t\t}))\n\t}\n\n\trender() {\n\t\tconst { showSidebar } = this.state\n\n\t\treturn (\n\t\t\t<Sidebar\n\t\t\t\titems={personalItems}\n\t\t\t\tbackLink={backLink}\n\t\t\t\tisExpanded={showSidebar}\n\t\t\t\ttoggleExpanded={this.handleToggleSidebar}\n\t\t\t\tforceCloseSidebar={() => null}\n\t\t\t\tSTORYBOOKdoNotWrap\n\t\t\t/>\n\t\t)\n\t}\n}\n\nstories.add('Default', () => <Example />)\n"],"file":"Sidebar-story.js"}

package/lib/components/Core/components/Sidebar/Sidebar.js

@@ -0,0 +1,87 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _SidebarExpander = _interopRequireDefault(require("./components/SidebarExpander/SidebarExpander"));
+
+var _SidebarItem = _interopRequireDefault(require("./components/SidebarItem/SidebarItem"));
+
+var _SidebarSection = _interopRequireDefault(require("./components/SidebarSection/SidebarSection"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _Text = _interopRequireDefault(require("../../../Text/Text"));
+
+var Sidebar = function Sidebar(props) {
+  var items = props.items,
+      backLink = props.backLink,
+      children = props.children,
+      footer = props.footer,
+      forceCloseSidebar = props.forceCloseSidebar,
+      toggleExpanded = props.toggleExpanded,
+      isExpanded = props.isExpanded,
+      isLarge = props.isLarge,
+      isCollapsible = props.isCollapsible,
+      isMobileExpanded = props.isMobileExpanded,
+      side = props.side,
+      mobileHeader = props.mobileHeader;
+  return _react["default"].createElement("aside", {
+    className: (0, _classnames["default"])('sidebar', {
+      'sidebar--left': side === 'left',
+      'sidebar--right': side === 'right',
+      'sidebar--large': isLarge,
+      'sidebar--is-collapsed': !isExpanded,
+      'sidebar--is-mobile-expanded': isMobileExpanded
+    })
+  }, mobileHeader && _react["default"].createElement(_SidebarSection["default"], {
+    className: "sidebar-header sidebar-header--mobile"
+  }, _react["default"].createElement(_Text["default"], {
+    className: "sidebar-header__title"
+  }, mobileHeader.title), mobileHeader.action && _react["default"].createElement(_Button["default"], mobileHeader.action)), _react["default"].createElement("div", {
+    className: "sidebar__inner"
+  }, items && items.length > 0 && _react["default"].createElement("ul", {
+    className: "sidebar__items"
+  }, items.map(function (item, idx) {
+    return _react["default"].createElement(_SidebarItem["default"], (0, _extends2["default"])({
+      key: idx
+    }, item));
+  }), backLink && _react["default"].createElement(_SidebarItem["default"], (0, _extends2["default"])({
+    key: "sidebar-back-link",
+    className: "sidebar-item__back-link",
+    icon: backLink.icon || {
+      name: 'arrow_back',
+      className: 'sidebar-item__icon--fill'
+    }
+  }, backLink))), _react["default"].createElement("div", {
+    className: "sidebar__content"
+  }, children && children)), footer && footer, isCollapsible && _react["default"].createElement(_SidebarExpander["default"], {
+    toggleExpanded: toggleExpanded,
+    isExpanded: isExpanded,
+    forceCloseSidebar: forceCloseSidebar
+  }));
+};
+
+Sidebar.defaultProps = {
+  isExpanded: true,
+  isLarge: false,
+  isCollapsible: true,
+  items: [],
+  children: null,
+  footer: null,
+  isMobileExpanded: false,
+  mobileHeader: null
+};
+var _default = Sidebar;
+exports["default"] = _default;
+//# sourceMappingURL=Sidebar.js.map

package/lib/components/Core/components/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Core/components/Sidebar/Sidebar.js"],"names":["Sidebar","props","items","backLink","children","footer","forceCloseSidebar","toggleExpanded","isExpanded","isLarge","isCollapsible","isMobileExpanded","side","mobileHeader","title","action","length","map","item","idx","icon","name","className","defaultProps"],"mappings":";;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA;;AA6CA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAkB;AAAA,MAEhCC,KAFgC,GAc7BD,KAd6B,CAEhCC,KAFgC;AAAA,MAGhCC,QAHgC,GAc7BF,KAd6B,CAGhCE,QAHgC;AAAA,MAIhCC,QAJgC,GAc7BH,KAd6B,CAIhCG,QAJgC;AAAA,MAKhCC,MALgC,GAc7BJ,KAd6B,CAKhCI,MALgC;AAAA,MAMhCC,iBANgC,GAc7BL,KAd6B,CAMhCK,iBANgC;AAAA,MAOhCC,cAPgC,GAc7BN,KAd6B,CAOhCM,cAPgC;AAAA,MAQhCC,UARgC,GAc7BP,KAd6B,CAQhCO,UARgC;AAAA,MAShCC,OATgC,GAc7BR,KAd6B,CAShCQ,OATgC;AAAA,MAUhCC,aAVgC,GAc7BT,KAd6B,CAUhCS,aAVgC;AAAA,MAWhCC,gBAXgC,GAc7BV,KAd6B,CAWhCU,gBAXgC;AAAA,MAYhCC,IAZgC,GAc7BX,KAd6B,CAYhCW,IAZgC;AAAA,MAahCC,YAbgC,GAc7BZ,KAd6B,CAahCY,YAbgC;AAgBjC,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,SAAH,EAAc;AACxB,uBAAiBD,IAAI,KAAK,MADF;AAExB,wBAAkBA,IAAI,KAAK,OAFH;AAGxB,wBAAkBH,OAHM;AAIxB,+BAAyB,CAACD,UAJF;AAKxB,qCAA+BG;AALP,KAAd;AADZ,KASEE,YAAY,IACZ,gCAAC,0BAAD;AAAgB,IAAA,SAAS,EAAC;AAA1B,KACC,gCAAC,gBAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAyCA,YAAY,CAACC,KAAtD,CADD,EAEED,YAAY,CAACE,MAAb,IAAuB,gCAAC,kBAAD,EAAYF,YAAY,CAACE,MAAzB,CAFzB,CAVF,EAeC;AAAK,IAAA,SAAS,EAAC;AAAf,KACEb,KAAK,IAAIA,KAAK,CAACc,MAAN,GAAe,CAAxB,IACA;AAAI,IAAA,SAAS,EAAC;AAAd,KACEd,KAAK,CAACe,GAAN,CAAU,UAACC,IAAD,EAAOC,GAAP;AAAA,WACV,gCAAC,uBAAD;AAAa,MAAA,GAAG,EAAEA;AAAlB,OAA2BD,IAA3B,EADU;AAAA,GAAV,CADF,EAIEf,QAAQ,IACR,gCAAC,uBAAD;AACC,IAAA,GAAG,EAAC,mBADL;AAEC,IAAA,SAAS,EAAC,yBAFX;AAGC,IAAA,IAAI,EACHA,QAAQ,CAACiB,IAAT,IAAiB;AAChBC,MAAAA,IAAI,EAAE,YADU;AAEhBC,MAAAA,SAAS,EAAE;AAFK;AAJnB,KASKnB,QATL,EALF,CAFF,EAqBC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCC,QAAQ,IAAIA,QAA/C,CArBD,CAfD,EAsCEC,MAAM,IAAIA,MAtCZ,EAuCEK,aAAa,IACb,gCAAC,2BAAD;AACC,IAAA,cAAc,EAAEH,cADjB;AAEC,IAAA,UAAU,EAAEC,UAFb;AAGC,IAAA,iBAAiB,EAAEF;AAHpB,IAxCF,CADD;AAiDA,CAjED;;AAmEAN,OAAO,CAACuB,YAAR,GAAuB;AACtBf,EAAAA,UAAU,EAAE,IADU;AAEtBC,EAAAA,OAAO,EAAE,KAFa;AAGtBC,EAAAA,aAAa,EAAE,IAHO;AAItBR,EAAAA,KAAK,EAAE,EAJe;AAKtBE,EAAAA,QAAQ,EAAE,IALY;AAMtBC,EAAAA,MAAM,EAAE,IANc;AAOtBM,EAAAA,gBAAgB,EAAE,KAPI;AAQtBE,EAAAA,YAAY,EAAE;AARQ,CAAvB;eAWeb,O","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\nimport SidebarExpander from './components/SidebarExpander/SidebarExpander'\nimport SidebarItem from './components/SidebarItem/SidebarItem'\nimport SidebarSection from './components/SidebarSection/SidebarSection'\nimport type { Props as ItemProps } from './components/SidebarItem/SidebarItem'\nimport Button from '../../../Button/Button'\nimport type { Props as ButtonProps } from '../../../Button/Button'\nimport Text from '../../../Text/Text'\n\ntype SidebarHeader = {\n\ttitle: string,\n\taction: ButtonProps\n}\n\ntype Props = {\n\t/** Optional header that will only appear on mobile */\n\tmobileHeader?: SidebarHeader,\n\n\t/** Items to display in the sidebar */\n\titems?: Array<ItemProps>,\n\n\t/** Back link item to handle navigation back to previous location */\n\tbackLink?: ItemProps,\n\n\t/** Children to add to the sidebar */\n\tchildren?: Node,\n\n\t/** Include a footer in the sidebar */\n\tfooter?: Node,\n\n\t/** Set which side the sidebar is on. Must be either 'left' or 'right */\n\tside: 'left' | 'right',\n\n\t/** Set true to make the sidebar larger. Defaults to false. */\n\tisLarge?: boolean,\n\n\t/** Enables the user to collapse the sidebar on desktop. Defaults to true. */\n\tisCollapsible?: boolean,\n\n\t/** Set true to expand the sidebar (large screens only) */\n\tisExpanded?: boolean,\n\n\t/** Set true to expand the sidebar on small screens */\n\tisMobileExpanded?: boolean,\n\n\t/** Handler to force the sidebar to collapse */\n\tforceCloseSidebar: Function,\n\n\t/** Handler to toggle the visibility of the sidebar */\n\ttoggleExpanded: Function\n}\n\nconst Sidebar = (props: Props) => {\n\tconst {\n\t\titems,\n\t\tbackLink,\n\t\tchildren,\n\t\tfooter,\n\t\tforceCloseSidebar,\n\t\ttoggleExpanded,\n\t\tisExpanded,\n\t\tisLarge,\n\t\tisCollapsible,\n\t\tisMobileExpanded,\n\t\tside,\n\t\tmobileHeader\n\t} = props\n\n\treturn (\n\t\t<aside\n\t\t\tclassName={cx('sidebar', {\n\t\t\t\t'sidebar--left': side === 'left',\n\t\t\t\t'sidebar--right': side === 'right',\n\t\t\t\t'sidebar--large': isLarge,\n\t\t\t\t'sidebar--is-collapsed': !isExpanded,\n\t\t\t\t'sidebar--is-mobile-expanded': isMobileExpanded\n\t\t\t})}\n\t\t>\n\t\t\t{mobileHeader && (\n\t\t\t\t<SidebarSection className=\"sidebar-header sidebar-header--mobile\">\n\t\t\t\t\t<Text className=\"sidebar-header__title\">{mobileHeader.title}</Text>\n\t\t\t\t\t{mobileHeader.action && <Button {...mobileHeader.action} />}\n\t\t\t\t</SidebarSection>\n\t\t\t)}\n\t\t\t<div className=\"sidebar__inner\">\n\t\t\t\t{items && items.length > 0 && (\n\t\t\t\t\t<ul className=\"sidebar__items\">\n\t\t\t\t\t\t{items.map((item, idx) => (\n\t\t\t\t\t\t\t<SidebarItem key={idx} {...item} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{backLink && (\n\t\t\t\t\t\t\t<SidebarItem\n\t\t\t\t\t\t\t\tkey=\"sidebar-back-link\"\n\t\t\t\t\t\t\t\tclassName=\"sidebar-item__back-link\"\n\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\tbackLink.icon || {\n\t\t\t\t\t\t\t\t\t\tname: 'arrow_back',\n\t\t\t\t\t\t\t\t\t\tclassName: 'sidebar-item__icon--fill'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{...backLink}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t\t<div className=\"sidebar__content\">{children && children}</div>\n\t\t\t</div>\n\t\t\t{footer && footer}\n\t\t\t{isCollapsible && (\n\t\t\t\t<SidebarExpander\n\t\t\t\t\ttoggleExpanded={toggleExpanded}\n\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\tforceCloseSidebar={forceCloseSidebar}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</aside>\n\t)\n}\n\nSidebar.defaultProps = {\n\tisExpanded: true,\n\tisLarge: false,\n\tisCollapsible: true,\n\titems: [],\n\tchildren: null,\n\tfooter: null,\n\tisMobileExpanded: false,\n\tmobileHeader: null\n}\n\nexport default Sidebar\n"],"file":"Sidebar.js"}