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

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

@@ -0,0 +1,485 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _faker = _interopRequireDefault(require("faker"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _StylesProvider = _interopRequireDefault(require("../../../.storybook/StylesProvider"));
+
+var _user0196w = _interopRequireDefault(require("../../../static/assets/users/user-01--96w.png"));
+
+var _Core = require("../Core");
+
+var _Card = _interopRequireWildcard(require("../Card"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
+
+var _ContextMenu = _interopRequireDefault(require("../ContextMenu/ContextMenu"));
+
+var _Page = _interopRequireDefault(require("../Page/Page"));
+
+var _TextStyle = _interopRequireDefault(require("../TextStyle/TextStyle"));
+
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _TextContainer = _interopRequireDefault(require("../TextContainer/TextContainer"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+
+var _SaveBar = _interopRequireDefault(require("../Core/components/SaveBar/SaveBar"));
+
+var _FeedBuilder = _interopRequireDefault(require("../Core/components/FeedBuilder/FeedBuilder"));
+
+var _feed = require("../../../.storybook/data/feed");
+
+var _View = _interopRequireDefault(require("./View"));
+
+var ProvideStyles = function ProvideStyles(storyFn) {
+  return _react["default"].createElement(_StylesProvider["default"], null, storyFn());
+};
+
+var stories = (0, _react2.storiesOf)('View', module);
+stories.addDecorator(ProvideStyles);
+stories.addDecorator(_react3.withKnobs);
+var personalItems = [{
+  text: 'Home',
+  icon: {
+    icon: 'home',
+    className: 'sidebar-item__line-icon'
+  },
+  isCurrent: true,
+  href: '#'
+}, {
+  text: 'Teams',
+  icon: {
+    icon: 'team',
+    className: 'sidebar-item__line-icon'
+  },
+  isCurrent: false,
+  href: '#'
+}, {
+  text: 'Notification Preferences',
+  icon: {
+    icon: 'messages',
+    className: 'sidebar-item__line-icon'
+  },
+  isCurrent: false,
+  href: '#'
+}];
+var orgItems = [{
+  text: 'Organization Dashboard',
+  icon: {
+    icon: 'dashboard'
+  },
+  isCurrent: false,
+  href: '#'
+}, {
+  text: 'Locations',
+  icon: {
+    icon: 'location'
+  },
+  isCurrent: true,
+  href: '#'
+}, {
+  text: 'Team',
+  icon: {
+    icon: 'team'
+  },
+  href: '#'
+}, {
+  text: 'Skills',
+  icon: {
+    icon: 'skill'
+  },
+  href: '#',
+  action: {
+    text: 'Get Skills',
+    href: '#',
+    isSmall: true
+  }
+}, {
+  text: 'Settings',
+  icon: {
+    icon: 'settings'
+  },
+  href: '#'
+}];
+var bizItems = [{
+  text: 'Dashboard',
+  icon: {
+    icon: 'dashboard'
+  }
+}, {
+  text: 'Guests',
+  icon: {
+    icon: 'guests'
+  },
+  isCurrent: true
+}, {
+  text: 'Team',
+  icon: {
+    icon: 'team'
+  }
+}, {
+  text: 'Calendar',
+  icon: {
+    icon: 'calendar'
+  }
+}];
+var user = {
+  name: 'Madaline Gibson',
+  image: _user0196w["default"],
+  tel: '(605) 230-5253'
+};
+var organization = {
+  name: 'Chimera Hair Salon',
+  image: 'https://www.logoground.com/uploads/2018130762018-04-113965123chimera%20logo%20chimera%20logo.jpg'
+};
+var skillViewTabs = [{
+  text: 'Info',
+  isCurrent: true
+}, {
+  text: 'Scheduling'
+}];
+
+var generateTonsOfContent = function generateTonsOfContent() {
+  return _react["default"].createElement(_TextContainer["default"], null, (0, _toConsumableArray2["default"])(Array(100)).map(function (o, idx) {
+    return _react["default"].createElement(_Text["default"], {
+      key: idx
+    }, _faker["default"].lorem.paragraph());
+  }));
+};
+
+var SkillViewExample =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SkillViewExample, _Component);
+
+  function SkillViewExample() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, SkillViewExample);
+
+    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"])(SkillViewExample)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      sidebarsExpanded: {
+        right: true,
+        left: true
+      },
+      sidebarsMobileExpanded: {
+        right: false,
+        left: false
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentDidMount", function () {
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', _this.onResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillUnmount", function () {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', _this.onResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResize", function () {
+      var sidebarsMobileExpanded = _this.state.sidebarsMobileExpanded;
+
+      if (typeof window !== 'undefined') {
+        if (window.innerWidth > 990 && sidebarsMobileExpanded.right) {
+          _this.hideRightSidebar();
+        }
+
+        if (window.innerWidth > 750 && sidebarsMobileExpanded.left) {
+          _this.hideLeftSidebar();
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSidebarToggle", function (side) {
+      _this.setState(function (prevState) {
+        return {
+          sidebarsExpanded: (0, _objectSpread5["default"])({}, prevState.sidebarsExpanded, (0, _defineProperty2["default"])({}, side, !prevState.sidebarsExpanded[side]))
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMobileSidebarToggle", function (side) {
+      _this.setState(function (prevState) {
+        return {
+          sidebarsMobileExpanded: (0, _objectSpread5["default"])({}, prevState.sidebarsMobileExpanded, (0, _defineProperty2["default"])({}, side, !prevState.sidebarsMobileExpanded[side])),
+          sidebarsExpanded: (0, _objectSpread5["default"])({}, prevState.sidebarsExpanded, (0, _defineProperty2["default"])({}, side, true))
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "hideRightSidebar", function () {
+      _this.setState(function (prevState) {
+        return {
+          sidebarsMobileExpanded: (0, _objectSpread5["default"])({}, prevState.sidebarsMobileExpanded, {
+            right: false
+          })
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "hideLeftSidebar", function () {
+      _this.setState(function (prevState) {
+        return {
+          sidebarsMobileExpanded: (0, _objectSpread5["default"])({}, prevState.sidebarsMobileExpanded, {
+            left: false
+          })
+        };
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(SkillViewExample, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          sidebarsExpanded = _this$state.sidebarsExpanded,
+          sidebarsMobileExpanded = _this$state.sidebarsMobileExpanded;
+      return _react["default"].createElement(_View["default"], {
+        STORYBOOKdoNotWrap: true,
+        sidebarItems: orgItems,
+        user: user,
+        organization: organization,
+        isSidebarExpanded: sidebarsExpanded.left,
+        isSidebarMobileExpanded: sidebarsMobileExpanded.left,
+        toggleSidebarExpanded: function toggleSidebarExpanded() {
+          return _this2.handleSidebarToggle('left');
+        },
+        toggleSidebarVisibility: function toggleSidebarVisibility() {
+          return _this2.handleMobileSidebarToggle('left');
+        }
+      }, _react["default"].createElement(_Page["default"], {
+        header: {
+          title: 'Chimera Hair Salon at the Point',
+          primaryAction: {
+            text: 'Go to location dashboard',
+            icon: {
+              name: 'new_tab'
+            },
+            kind: 'simple',
+            isSmall: true
+          },
+          backLinkHref: '#',
+          backLinkText: 'Locations',
+          sidebarExpander: {
+            icon: {
+              name: 'more_vertical',
+              isLineIcon: true
+            },
+            onClick: function onClick() {
+              return _this2.handleMobileSidebarToggle('right');
+            }
+          },
+          tabs: skillViewTabs
+        },
+        sidebarIsCollapsed: !sidebarsExpanded.right,
+        sidebar: _react["default"].createElement(_Core.Sidebar, {
+          side: "right",
+          isCollapsible: false,
+          isLarge: true,
+          isExpanded: sidebarsExpanded.right,
+          isMobileExpanded: sidebarsMobileExpanded.right,
+          toggleExpanded: function toggleExpanded() {
+            return _this2.handleSidebarToggle('right');
+          },
+          mobileHeader: {
+            title: 'Chimera Salon at the Point',
+            action: {
+              icon: {
+                name: 'close'
+              },
+              isSmall: true,
+              onClick: function onClick() {
+                return _this2.handleMobileSidebarToggle('right');
+              }
+            }
+          }
+        }, _react["default"].createElement(_Core.SidebarSection, null, _react["default"].createElement(_Card["default"], {
+          isSmall: true
+        }, _react["default"].createElement(_Card.CardHeader, {
+          labelText: "Location Status",
+          labelIcon: {
+            name: 'hide',
+            isLineIcon: true
+          },
+          title: "This location is hidden"
+        }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement("p", null, "This location is currently hidden from guests, but is visible to you and your teammates.")), _react["default"].createElement(_Card.CardFooter, null, _react["default"].createElement(_ButtonGroup["default"], {
+          actions: [{
+            text: 'Preview as guest',
+            kind: 'simple',
+            isSmall: true
+          }, {
+            text: 'Make location live',
+            kind: 'primary',
+            isSmall: true
+          }]
+        })))))
+      }, generateTonsOfContent()));
+    }
+  }]);
+  return SkillViewExample;
+}(_react.Component);
+
+stories.add('Default', function () {
+  return _react["default"].createElement("div", {
+    STORYBOOKdoNotWrap: true,
+    style: {
+      height: '100vh'
+    }
+  }, _react["default"].createElement(_View["default"], {
+    STORYBOOKdoNotWrap: true,
+    sidebarItems: personalItems,
+    user: user,
+    organization: organization,
+    isSidebarExpanded: true,
+    isChromeless: (0, _react3["boolean"])('isChromeless', false)
+  }, _react["default"].createElement(_Page["default"], {
+    header: {
+      title: 'Hello Human'
+    }
+  }, generateTonsOfContent())));
+}).add('Save Bar', function () {
+  return _react["default"].createElement("div", {
+    STORYBOOKdoNotWrap: true,
+    style: {
+      height: '100vh'
+    }
+  }, _react["default"].createElement(_View["default"], {
+    STORYBOOKdoNotWrap: true,
+    sidebarItems: personalItems,
+    user: user,
+    organization: organization,
+    isSidebarExpanded: true
+  }, _react["default"].createElement(_Page["default"], {
+    header: {
+      title: 'Hello Human'
+    }
+  }, generateTonsOfContent()), _react["default"].createElement(_SaveBar["default"], {
+    isVisible: (0, _react3["boolean"])('isVisible', true)
+  })));
+}).add('Skill View', function () {
+  return _react["default"].createElement("div", {
+    STORYBOOKdoNotWrap: true,
+    style: {
+      height: '100vh'
+    }
+  }, _react["default"].createElement(SkillViewExample, null));
+}).add('Guest Profile', function () {
+  var messages = (0, _feed.generateMessages)({
+    count: 50,
+    interval: 31
+  });
+  return _react["default"].createElement("div", {
+    STORYBOOKdoNotWrap: true,
+    style: {
+      height: '100vh'
+    }
+  }, _react["default"].createElement(_View["default"], {
+    STORYBOOKdoNotWrap: true,
+    sidebarItems: bizItems,
+    user: user,
+    business: organization,
+    isSidebarExpanded: true
+  }, _react["default"].createElement(_Page["default"], {
+    sidebar: _react["default"].createElement(_Core.Sidebar, {
+      isLarge: true,
+      isCollapsible: false,
+      side: "right"
+    }, _react["default"].createElement(_Core.SidebarSection, {
+      isCentered: true,
+      verticalSpacing: "loose",
+      horizontalSpacing: "loose"
+    }, _react["default"].createElement(_Avatar["default"], {
+      isLarge: true,
+      isCentered: true,
+      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&h=200&q=80"
+    }), _react["default"].createElement(_Heading["default"], null, _react["default"].createElement(_TextStyle["default"], {
+      type: "strong"
+    }, "Dorian Feeney"))), _react["default"].createElement(_Core.SidebarSection, {
+      horizontalSpacing: "loose",
+      className: "u-flex-row"
+    }, _react["default"].createElement(_Button["default"], {
+      isSmall: true,
+      kind: "secondary",
+      className: "u-flex-child-grow",
+      text: "Call Dorian",
+      icon: {
+        name: 'phone',
+        isLineIcon: true
+      }
+    }), _react["default"].createElement(_ContextMenu["default"], {
+      isSmall: true,
+      className: "u-ml-tight",
+      actions: [{
+        text: 'One action'
+      }, {
+        text: 'two action'
+      }, {
+        text: 'red action'
+      }, {
+        text: 'blue action'
+      }],
+      isSimple: true
+    })))
+  }, _react["default"].createElement(_FeedBuilder["default"], {
+    messages: messages,
+    messageCount: 50,
+    onRowsRequested: function onRowsRequested() {
+      return null;
+    }
+  }))));
+}).add('No Left Sidebar Items', function () {
+  return _react["default"].createElement("div", {
+    STORYBOOKdoNotWrap: true,
+    style: {
+      height: '100vh'
+    }
+  }, _react["default"].createElement(_View["default"], {
+    sidebarItems: [],
+    user: user,
+    business: organization,
+    isSidebarExpanded: true,
+    termsLink: "#",
+    privacyLink: "#"
+  }, _react["default"].createElement(_Page["default"], null, generateTonsOfContent())));
+});
+//# sourceMappingURL=View-story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/View/View-story.js"],"names":["ProvideStyles","storyFn","stories","module","addDecorator","withKnobs","personalItems","text","icon","className","isCurrent","href","orgItems","action","isSmall","bizItems","user","name","image","user01image","tel","organization","skillViewTabs","generateTonsOfContent","Array","map","o","idx","faker","lorem","paragraph","SkillViewExample","sidebarsExpanded","right","left","sidebarsMobileExpanded","window","addEventListener","onResize","removeEventListener","state","innerWidth","hideRightSidebar","hideLeftSidebar","side","setState","prevState","handleSidebarToggle","handleMobileSidebarToggle","title","primaryAction","kind","backLinkHref","backLinkText","sidebarExpander","isLineIcon","onClick","tabs","Component","add","height","messages","count","interval"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,OAAO;AAAA,SAAI,gCAAC,0BAAD,QAAiBA,OAAO,EAAxB,CAAJ;AAAA,CAA7B;;AAEA,IAAMC,OAAO,GAAG,uBAAU,MAAV,EAAkBC,MAAlB,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;AAAEA,IAAAA,IAAI,EAAE,MAAR;AAAgBC,IAAAA,SAAS,EAAE;AAA3B,GAFP;AAGCC,EAAAA,SAAS,EAAE,IAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CADqB,EAOrB;AACCJ,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE,MAAR;AAAgBC,IAAAA,SAAS,EAAE;AAA3B,GAFP;AAGCC,EAAAA,SAAS,EAAE,KAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CAPqB,EAarB;AACCJ,EAAAA,IAAI,EAAE,0BADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE,UAAR;AAAoBC,IAAAA,SAAS,EAAE;AAA/B,GAFP;AAGCC,EAAAA,SAAS,EAAE,KAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CAbqB,CAAtB;AAqBA,IAAMC,QAAQ,GAAG,CAChB;AACCL,EAAAA,IAAI,EAAE,wBADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCE,EAAAA,SAAS,EAAE,KAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CADgB,EAOhB;AACCJ,EAAAA,IAAI,EAAE,WADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCE,EAAAA,SAAS,EAAE,IAHZ;AAICC,EAAAA,IAAI,EAAE;AAJP,CAPgB,EAahB;AACCJ,EAAAA,IAAI,EAAE,MADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCG,EAAAA,IAAI,EAAE;AAHP,CAbgB,EAkBhB;AACCJ,EAAAA,IAAI,EAAE,QADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCG,EAAAA,IAAI,EAAE,GAHP;AAICE,EAAAA,MAAM,EAAE;AACPN,IAAAA,IAAI,EAAE,YADC;AAEPI,IAAAA,IAAI,EAAE,GAFC;AAGPG,IAAAA,OAAO,EAAE;AAHF;AAJT,CAlBgB,EA4BhB;AACCP,EAAAA,IAAI,EAAE,UADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCG,EAAAA,IAAI,EAAE;AAHP,CA5BgB,CAAjB;AAmCA,IAAMI,QAAQ,GAAG,CAChB;AACCR,EAAAA,IAAI,EAAE,WADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR;AAFP,CADgB,EAKhB;AACCD,EAAAA,IAAI,EAAE,QADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR,GAFP;AAGCE,EAAAA,SAAS,EAAE;AAHZ,CALgB,EAUhB;AACCH,EAAAA,IAAI,EAAE,MADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR;AAFP,CAVgB,EAchB;AACCD,EAAAA,IAAI,EAAE,UADP;AAECC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR;AAFP,CAdgB,CAAjB;AAoBA,IAAMQ,IAAI,GAAG;AACZC,EAAAA,IAAI,EAAE,iBADM;AAEZC,EAAAA,KAAK,EAAEC,qBAFK;AAGZC,EAAAA,GAAG,EAAE;AAHO,CAAb;AAMA,IAAMC,YAAY,GAAG;AACpBJ,EAAAA,IAAI,EAAE,oBADc;AAEpBC,EAAAA,KAAK,EACJ;AAHmB,CAArB;AAMA,IAAMI,aAAa,GAAG,CACrB;AACCf,EAAAA,IAAI,EAAE,MADP;AAECG,EAAAA,SAAS,EAAE;AAFZ,CADqB,EAKrB;AACCH,EAAAA,IAAI,EAAE;AADP,CALqB,CAAtB;;AAgBA,IAAMgB,qBAAqB,GAAG,SAAxBA,qBAAwB;AAAA,SAC7B,gCAAC,yBAAD,QACE,oCAAIC,KAAK,CAAC,GAAD,CAAT,EAAgBC,GAAhB,CAAoB,UAACC,CAAD,EAAIC,GAAJ;AAAA,WACpB,gCAAC,gBAAD;AAAM,MAAA,GAAG,EAAEA;AAAX,OAAiBC,kBAAMC,KAAN,CAAYC,SAAZ,EAAjB,CADoB;AAAA,GAApB,CADF,CAD6B;AAAA,CAA9B;;IAQMC,gB;;;;;;;;;;;;;;;;;8FACG;AACPC,MAAAA,gBAAgB,EAAE;AACjBC,QAAAA,KAAK,EAAE,IADU;AAEjBC,QAAAA,IAAI,EAAE;AAFW,OADX;AAKPC,MAAAA,sBAAsB,EAAE;AACvBF,QAAAA,KAAK,EAAE,KADgB;AAEvBC,QAAAA,IAAI,EAAE;AAFiB;AALjB,K;0GAWY,YAAM;AACzB,UAAI,OAAOE,MAAP,KAAkB,WAAtB,EAAmC;AAClCA,QAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,QAAvC,EAAiD,KAAjD;AACA;AACD,K;6GAEsB,YAAM;AAC5B,UAAI,OAAOF,MAAP,KAAkB,WAAtB,EAAmC;AAClCA,QAAAA,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqC,MAAKD,QAA1C,EAAoD,KAApD;AACA;AACD,K;iGAEU,YAAM;AAAA,UACRH,sBADQ,GACmB,MAAKK,KADxB,CACRL,sBADQ;;AAEhB,UAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AAClC,YAAIA,MAAM,CAACK,UAAP,GAAoB,GAApB,IAA2BN,sBAAsB,CAACF,KAAtD,EAA6D;AAC5D,gBAAKS,gBAAL;AACA;;AACD,YAAIN,MAAM,CAACK,UAAP,GAAoB,GAApB,IAA2BN,sBAAsB,CAACD,IAAtD,EAA4D;AAC3D,gBAAKS,eAAL;AACA;AACD;AACD,K;4GAEqB,UAACC,IAAD,EAAkB;AACvC,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3Bd,UAAAA,gBAAgB,qCACZc,SAAS,CAACd,gBADE,uCAEdY,IAFc,EAEP,CAACE,SAAS,CAACd,gBAAV,CAA2BY,IAA3B,CAFM;AADW,SAAL;AAAA,OAAvB;AAMA,K;kHAE2B,UAACA,IAAD,EAAkB;AAC7C,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BX,UAAAA,sBAAsB,qCAClBW,SAAS,CAACX,sBADQ,uCAEpBS,IAFoB,EAEb,CAACE,SAAS,CAACX,sBAAV,CAAiCS,IAAjC,CAFY,EADK;AAK3BZ,UAAAA,gBAAgB,qCACZc,SAAS,CAACd,gBADE,uCAEdY,IAFc,EAEP,IAFO;AALW,SAAL;AAAA,OAAvB;AAUA,K;yGAEkB,YAAM;AACxB,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BX,UAAAA,sBAAsB,qCAClBW,SAAS,CAACX,sBADQ;AAErBF,YAAAA,KAAK,EAAE;AAFc;AADK,SAAL;AAAA,OAAvB;AAMA,K;wGAEiB,YAAM;AACvB,YAAKY,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BX,UAAAA,sBAAsB,qCAClBW,SAAS,CAACX,sBADQ;AAErBD,YAAAA,IAAI,EAAE;AAFe;AADK,SAAL;AAAA,OAAvB;AAMA,K;;;;;;6BAEQ;AAAA;;AAAA,wBAC6C,KAAKM,KADlD;AAAA,UACAR,gBADA,eACAA,gBADA;AAAA,UACkBG,sBADlB,eACkBA,sBADlB;AAER,aACC,gCAAC,gBAAD;AACC,QAAA,kBAAkB,MADnB;AAEC,QAAA,YAAY,EAAEvB,QAFf;AAGC,QAAA,IAAI,EAAEI,IAHP;AAIC,QAAA,YAAY,EAAEK,YAJf;AAKC,QAAA,iBAAiB,EAAEW,gBAAgB,CAACE,IALrC;AAMC,QAAA,uBAAuB,EAAEC,sBAAsB,CAACD,IANjD;AAOC,QAAA,qBAAqB,EAAE;AAAA,iBAAM,MAAI,CAACa,mBAAL,CAAyB,MAAzB,CAAN;AAAA,SAPxB;AAQC,QAAA,uBAAuB,EAAE;AAAA,iBAAM,MAAI,CAACC,yBAAL,CAA+B,MAA/B,CAAN;AAAA;AAR1B,SAUC,gCAAC,gBAAD;AACC,QAAA,MAAM,EAAE;AACPC,UAAAA,KAAK,EAAE,iCADA;AAEPC,UAAAA,aAAa,EAAE;AACd3C,YAAAA,IAAI,EAAE,0BADQ;AAEdC,YAAAA,IAAI,EAAE;AAAES,cAAAA,IAAI,EAAE;AAAR,aAFQ;AAGdkC,YAAAA,IAAI,EAAE,QAHQ;AAIdrC,YAAAA,OAAO,EAAE;AAJK,WAFR;AAQPsC,UAAAA,YAAY,EAAE,GARP;AASPC,UAAAA,YAAY,EAAE,WATP;AAUPC,UAAAA,eAAe,EAAE;AAChB9C,YAAAA,IAAI,EAAE;AAAES,cAAAA,IAAI,EAAE,eAAR;AAAyBsC,cAAAA,UAAU,EAAE;AAArC,aADU;AAEhBC,YAAAA,OAAO,EAAE;AAAA,qBAAM,MAAI,CAACR,yBAAL,CAA+B,OAA/B,CAAN;AAAA;AAFO,WAVV;AAcPS,UAAAA,IAAI,EAAEnC;AAdC,SADT;AAiBC,QAAA,kBAAkB,EAAE,CAACU,gBAAgB,CAACC,KAjBvC;AAkBC,QAAA,OAAO,EACN,gCAAC,aAAD;AACC,UAAA,IAAI,EAAC,OADN;AAEC,UAAA,aAAa,EAAE,KAFhB;AAGC,UAAA,OAAO,MAHR;AAIC,UAAA,UAAU,EAAED,gBAAgB,CAACC,KAJ9B;AAKC,UAAA,gBAAgB,EAAEE,sBAAsB,CAACF,KAL1C;AAMC,UAAA,cAAc,EAAE;AAAA,mBAAM,MAAI,CAACc,mBAAL,CAAyB,OAAzB,CAAN;AAAA,WANjB;AAOC,UAAA,YAAY,EAAE;AACbE,YAAAA,KAAK,EAAE,4BADM;AAEbpC,YAAAA,MAAM,EAAE;AACPL,cAAAA,IAAI,EAAE;AAAES,gBAAAA,IAAI,EAAE;AAAR,eADC;AAEPH,cAAAA,OAAO,EAAE,IAFF;AAGP0C,cAAAA,OAAO,EAAE;AAAA,uBAAM,MAAI,CAACR,yBAAL,CAA+B,OAA/B,CAAN;AAAA;AAHF;AAFK;AAPf,WAgBC,gCAAC,oBAAD,QACC,gCAAC,gBAAD;AAAM,UAAA,OAAO;AAAb,WACC,gCAAC,gBAAD;AACC,UAAA,SAAS,EAAC,iBADX;AAEC,UAAA,SAAS,EAAE;AAAE/B,YAAAA,IAAI,EAAE,MAAR;AAAgBsC,YAAAA,UAAU,EAAE;AAA5B,WAFZ;AAGC,UAAA,KAAK,EAAC;AAHP,UADD,EAMC,gCAAC,cAAD,QACC,sIADD,CAND,EAYC,gCAAC,gBAAD,QACC,gCAAC,uBAAD;AACC,UAAA,OAAO,EAAE,CACR;AACChD,YAAAA,IAAI,EAAE,kBADP;AAEC4C,YAAAA,IAAI,EAAE,QAFP;AAGCrC,YAAAA,OAAO,EAAE;AAHV,WADQ,EAMR;AACCP,YAAAA,IAAI,EAAE,oBADP;AAEC4C,YAAAA,IAAI,EAAE,SAFP;AAGCrC,YAAAA,OAAO,EAAE;AAHV,WANQ;AADV,UADD,CAZD,CADD,CAhBD;AAnBF,SAqEES,qBAAqB,EArEvB,CAVD,CADD;AAoFA;;;EAlK6BmC,gB;;AAqK/BxD,OAAO,CACLyD,GADF,CACM,SADN,EACiB;AAAA,SACf;AAAK,IAAA,kBAAkB,MAAvB;AAAwB,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AAA/B,KACC,gCAAC,gBAAD;AACC,IAAA,kBAAkB,MADnB;AAEC,IAAA,YAAY,EAAEtD,aAFf;AAGC,IAAA,IAAI,EAAEU,IAHP;AAIC,IAAA,YAAY,EAAEK,YAJf;AAKC,IAAA,iBAAiB,MALlB;AAMC,IAAA,YAAY,EAAE,wBAAQ,cAAR,EAAwB,KAAxB;AANf,KAQC,gCAAC,gBAAD;AACC,IAAA,MAAM,EAAE;AACP4B,MAAAA,KAAK,EAAE;AADA;AADT,KAKE1B,qBAAqB,EALvB,CARD,CADD,CADe;AAAA,CADjB,EAqBEoC,GArBF,CAqBM,UArBN,EAqBkB;AAAA,SAChB;AAAK,IAAA,kBAAkB,MAAvB;AAAwB,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AAA/B,KACC,gCAAC,gBAAD;AACC,IAAA,kBAAkB,MADnB;AAEC,IAAA,YAAY,EAAEtD,aAFf;AAGC,IAAA,IAAI,EAAEU,IAHP;AAIC,IAAA,YAAY,EAAEK,YAJf;AAKC,IAAA,iBAAiB;AALlB,KAOC,gCAAC,gBAAD;AACC,IAAA,MAAM,EAAE;AACP4B,MAAAA,KAAK,EAAE;AADA;AADT,KAKE1B,qBAAqB,EALvB,CAPD,EAcC,gCAAC,mBAAD;AAAS,IAAA,SAAS,EAAE,wBAAQ,WAAR,EAAqB,IAArB;AAApB,IAdD,CADD,CADgB;AAAA,CArBlB,EAyCEoC,GAzCF,CAyCM,YAzCN,EAyCoB;AAAA,SAClB;AAAK,IAAA,kBAAkB,MAAvB;AAAwB,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AAA/B,KACC,gCAAC,gBAAD,OADD,CADkB;AAAA,CAzCpB,EA8CED,GA9CF,CA8CM,eA9CN,EA8CuB,YAAM;AAC3B,MAAIE,QAAQ,GAAG,4BAAiB;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,QAAQ,EAAE;AAAvB,GAAjB,CAAf;AACA,SACC;AAAK,IAAA,kBAAkB,MAAvB;AAAwB,IAAA,KAAK,EAAE;AAAEH,MAAAA,MAAM,EAAE;AAAV;AAA/B,KACC,gCAAC,gBAAD;AACC,IAAA,kBAAkB,MADnB;AAEC,IAAA,YAAY,EAAE7C,QAFf;AAGC,IAAA,IAAI,EAAEC,IAHP;AAIC,IAAA,QAAQ,EAAEK,YAJX;AAKC,IAAA,iBAAiB;AALlB,KAOC,gCAAC,gBAAD;AACC,IAAA,OAAO,EACN,gCAAC,aAAD;AAAS,MAAA,OAAO,MAAhB;AAAiB,MAAA,aAAa,EAAE,KAAhC;AAAuC,MAAA,IAAI,EAAC;AAA5C,OACC,gCAAC,oBAAD;AACC,MAAA,UAAU,MADX;AAEC,MAAA,eAAe,EAAC,OAFjB;AAGC,MAAA,iBAAiB,EAAC;AAHnB,OAKC,gCAAC,kBAAD;AACC,MAAA,OAAO,MADR;AAEC,MAAA,UAAU,MAFX;AAGC,MAAA,KAAK,EAAC;AAHP,MALD,EAUC,gCAAC,mBAAD,QACC,gCAAC,qBAAD;AAAW,MAAA,IAAI,EAAC;AAAhB,uBADD,CAVD,CADD,EAeC,gCAAC,oBAAD;AACC,MAAA,iBAAiB,EAAC,OADnB;AAEC,MAAA,SAAS,EAAC;AAFX,OAIC,gCAAC,kBAAD;AACC,MAAA,OAAO,MADR;AAEC,MAAA,IAAI,EAAC,WAFN;AAGC,MAAA,SAAS,EAAC,mBAHX;AAIC,MAAA,IAAI,EAAC,aAJN;AAKC,MAAA,IAAI,EAAE;AACLJ,QAAAA,IAAI,EAAE,OADD;AAELsC,QAAAA,UAAU,EAAE;AAFP;AALP,MAJD,EAcC,gCAAC,uBAAD;AACC,MAAA,OAAO,MADR;AAEC,MAAA,SAAS,EAAC,YAFX;AAGC,MAAA,OAAO,EAAE,CACR;AACChD,QAAAA,IAAI,EAAE;AADP,OADQ,EAIR;AACCA,QAAAA,IAAI,EAAE;AADP,OAJQ,EAOR;AACCA,QAAAA,IAAI,EAAE;AADP,OAPQ,EAUR;AACCA,QAAAA,IAAI,EAAE;AADP,OAVQ,CAHV;AAiBC,MAAA,QAAQ;AAjBT,MAdD,CAfD;AAFF,KAsDC,gCAAC,uBAAD;AACC,IAAA,QAAQ,EAAEsD,QADX;AAEC,IAAA,YAAY,EAAE,EAFf;AAGC,IAAA,eAAe,EAAE;AAAA,aAAM,IAAN;AAAA;AAHlB,IAtDD,CAPD,CADD,CADD;AAwEA,CAxHF,EAyHEF,GAzHF,CAyHM,uBAzHN,EAyH+B,YAAM;AACnC,SACC;AAAK,IAAA,kBAAkB,MAAvB;AAAwB,IAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAE;AAAV;AAA/B,KACC,gCAAC,gBAAD;AACC,IAAA,YAAY,EAAE,EADf;AAEC,IAAA,IAAI,EAAE5C,IAFP;AAGC,IAAA,QAAQ,EAAEK,YAHX;AAIC,IAAA,iBAAiB,MAJlB;AAKC,IAAA,SAAS,EAAC,GALX;AAMC,IAAA,WAAW,EAAC;AANb,KAQC,gCAAC,gBAAD,QAAOE,qBAAqB,EAA5B,CARD,CADD,CADD;AAcA,CAxIF","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport faker from 'faker'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, boolean } from '@storybook/addon-knobs/react'\nimport StylesProvider from '../../../.storybook/StylesProvider'\nimport user01image from '../../../static/assets/users/user-01--96w.png'\nimport { Sidebar, SidebarSection } from '../Core'\nimport Card, { CardHeader, CardBody, CardFooter } from '../Card'\nimport Button from '../Button/Button'\nimport ButtonGroup from '../ButtonGroup/ButtonGroup'\nimport ContextMenu from '../ContextMenu/ContextMenu'\nimport Page from '../Page/Page'\nimport TextStyle from '../TextStyle/TextStyle'\nimport Heading from '../Heading/Heading'\nimport Text from '../Text/Text'\nimport TextContainer from '../TextContainer/TextContainer'\nimport Avatar from '../Avatar/Avatar'\nimport SaveBar from '../Core/components/SaveBar/SaveBar'\nimport FeedBuilder from '../Core/components/FeedBuilder/FeedBuilder'\nimport { generateMessages } from '../../../.storybook/data/feed'\n\nimport View from './View'\n\nconst ProvideStyles = storyFn => <StylesProvider>{storyFn()}</StylesProvider>\n\nconst stories = storiesOf('View', module)\n\nstories.addDecorator(ProvideStyles)\nstories.addDecorator(withKnobs)\n\nconst personalItems = [\n\t{\n\t\ttext: 'Home',\n\t\ticon: { icon: 'home', className: 'sidebar-item__line-icon' },\n\t\tisCurrent: true,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Teams',\n\t\ticon: { icon: 'team', className: 'sidebar-item__line-icon' },\n\t\tisCurrent: false,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Notification Preferences',\n\t\ticon: { icon: 'messages', className: 'sidebar-item__line-icon' },\n\t\tisCurrent: false,\n\t\thref: '#'\n\t}\n]\n\nconst orgItems = [\n\t{\n\t\ttext: 'Organization Dashboard',\n\t\ticon: { icon: 'dashboard' },\n\t\tisCurrent: false,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Locations',\n\t\ticon: { icon: 'location' },\n\t\tisCurrent: true,\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Team',\n\t\ticon: { icon: 'team' },\n\t\thref: '#'\n\t},\n\t{\n\t\ttext: 'Skills',\n\t\ticon: { icon: 'skill' },\n\t\thref: '#',\n\t\taction: {\n\t\t\ttext: 'Get Skills',\n\t\t\thref: '#',\n\t\t\tisSmall: true\n\t\t}\n\t},\n\t{\n\t\ttext: 'Settings',\n\t\ticon: { icon: 'settings' },\n\t\thref: '#'\n\t}\n]\n\nconst bizItems = [\n\t{\n\t\ttext: 'Dashboard',\n\t\ticon: { icon: 'dashboard' }\n\t},\n\t{\n\t\ttext: 'Guests',\n\t\ticon: { icon: 'guests' },\n\t\tisCurrent: true\n\t},\n\t{\n\t\ttext: 'Team',\n\t\ticon: { icon: 'team' }\n\t},\n\t{\n\t\ttext: 'Calendar',\n\t\ticon: { icon: 'calendar' }\n\t}\n]\n\nconst user = {\n\tname: 'Madaline Gibson',\n\timage: user01image,\n\ttel: '(605) 230-5253'\n}\n\nconst organization = {\n\tname: 'Chimera Hair Salon',\n\timage:\n\t\t'https://www.logoground.com/uploads/2018130762018-04-113965123chimera%20logo%20chimera%20logo.jpg'\n}\n\nconst skillViewTabs = [\n\t{\n\t\ttext: 'Info',\n\t\tisCurrent: true\n\t},\n\t{\n\t\ttext: 'Scheduling'\n\t}\n]\n\ntype SkillViewProps = {}\ntype SkillViewState = {\n\tsidebarsExpanded: Object,\n\tsidebarsMobileExpanded: Object\n}\n\nconst generateTonsOfContent = () => (\n\t<TextContainer>\n\t\t{[...Array(100)].map((o, idx) => (\n\t\t\t<Text key={idx}>{faker.lorem.paragraph()}</Text>\n\t\t))}\n\t</TextContainer>\n)\n\nclass SkillViewExample extends Component<SkillViewProps, SkillViewState> {\n\tstate = {\n\t\tsidebarsExpanded: {\n\t\t\tright: true,\n\t\t\tleft: true\n\t\t},\n\t\tsidebarsMobileExpanded: {\n\t\t\tright: false,\n\t\t\tleft: false\n\t\t}\n\t}\n\n\tcomponentDidMount = () => {\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.addEventListener('resize', this.onResize, false)\n\t\t}\n\t}\n\n\tcomponentWillUnmount = () => {\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.removeEventListener('resize', this.onResize, false)\n\t\t}\n\t}\n\n\tonResize = () => {\n\t\tconst { sidebarsMobileExpanded } = this.state\n\t\tif (typeof window !== 'undefined') {\n\t\t\tif (window.innerWidth > 990 && sidebarsMobileExpanded.right) {\n\t\t\t\tthis.hideRightSidebar()\n\t\t\t}\n\t\t\tif (window.innerWidth > 750 && sidebarsMobileExpanded.left) {\n\t\t\t\tthis.hideLeftSidebar()\n\t\t\t}\n\t\t}\n\t}\n\n\thandleSidebarToggle = (side: string) => {\n\t\tthis.setState(prevState => ({\n\t\t\tsidebarsExpanded: {\n\t\t\t\t...prevState.sidebarsExpanded,\n\t\t\t\t[side]: !prevState.sidebarsExpanded[side]\n\t\t\t}\n\t\t}))\n\t}\n\n\thandleMobileSidebarToggle = (side: string) => {\n\t\tthis.setState(prevState => ({\n\t\t\tsidebarsMobileExpanded: {\n\t\t\t\t...prevState.sidebarsMobileExpanded,\n\t\t\t\t[side]: !prevState.sidebarsMobileExpanded[side]\n\t\t\t},\n\t\t\tsidebarsExpanded: {\n\t\t\t\t...prevState.sidebarsExpanded,\n\t\t\t\t[side]: true\n\t\t\t}\n\t\t}))\n\t}\n\n\thideRightSidebar = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tsidebarsMobileExpanded: {\n\t\t\t\t...prevState.sidebarsMobileExpanded,\n\t\t\t\tright: false\n\t\t\t}\n\t\t}))\n\t}\n\n\thideLeftSidebar = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tsidebarsMobileExpanded: {\n\t\t\t\t...prevState.sidebarsMobileExpanded,\n\t\t\t\tleft: false\n\t\t\t}\n\t\t}))\n\t}\n\n\trender() {\n\t\tconst { sidebarsExpanded, sidebarsMobileExpanded } = this.state\n\t\treturn (\n\t\t\t<View\n\t\t\t\tSTORYBOOKdoNotWrap\n\t\t\t\tsidebarItems={orgItems}\n\t\t\t\tuser={user}\n\t\t\t\torganization={organization}\n\t\t\t\tisSidebarExpanded={sidebarsExpanded.left}\n\t\t\t\tisSidebarMobileExpanded={sidebarsMobileExpanded.left}\n\t\t\t\ttoggleSidebarExpanded={() => this.handleSidebarToggle('left')}\n\t\t\t\ttoggleSidebarVisibility={() => this.handleMobileSidebarToggle('left')}\n\t\t\t>\n\t\t\t\t<Page\n\t\t\t\t\theader={{\n\t\t\t\t\t\ttitle: 'Chimera Hair Salon at the Point',\n\t\t\t\t\t\tprimaryAction: {\n\t\t\t\t\t\t\ttext: 'Go to location dashboard',\n\t\t\t\t\t\t\ticon: { name: 'new_tab' },\n\t\t\t\t\t\t\tkind: 'simple',\n\t\t\t\t\t\t\tisSmall: true\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbackLinkHref: '#',\n\t\t\t\t\t\tbackLinkText: 'Locations',\n\t\t\t\t\t\tsidebarExpander: {\n\t\t\t\t\t\t\ticon: { name: 'more_vertical', isLineIcon: true },\n\t\t\t\t\t\t\tonClick: () => this.handleMobileSidebarToggle('right')\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttabs: skillViewTabs\n\t\t\t\t\t}}\n\t\t\t\t\tsidebarIsCollapsed={!sidebarsExpanded.right}\n\t\t\t\t\tsidebar={\n\t\t\t\t\t\t<Sidebar\n\t\t\t\t\t\t\tside=\"right\"\n\t\t\t\t\t\t\tisCollapsible={false}\n\t\t\t\t\t\t\tisLarge\n\t\t\t\t\t\t\tisExpanded={sidebarsExpanded.right}\n\t\t\t\t\t\t\tisMobileExpanded={sidebarsMobileExpanded.right}\n\t\t\t\t\t\t\ttoggleExpanded={() => this.handleSidebarToggle('right')}\n\t\t\t\t\t\t\tmobileHeader={{\n\t\t\t\t\t\t\t\ttitle: 'Chimera Salon at the Point',\n\t\t\t\t\t\t\t\taction: {\n\t\t\t\t\t\t\t\t\ticon: { name: 'close' },\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t\tonClick: () => this.handleMobileSidebarToggle('right')\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\t\t<SidebarSection>\n\t\t\t\t\t\t\t\t<Card isSmall>\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tlabelText=\"Location Status\"\n\t\t\t\t\t\t\t\t\t\tlabelIcon={{ name: 'hide', isLineIcon: true }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"This location is hidden\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\tThis location is currently hidden from guests, but is\n\t\t\t\t\t\t\t\t\t\t\tvisible to you and your teammates.\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\t\t\t\t\tactions={[\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttext: 'Preview as guest',\n\t\t\t\t\t\t\t\t\t\t\t\t\tkind: 'simple',\n\t\t\t\t\t\t\t\t\t\t\t\t\tisSmall: true\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttext: 'Make location live',\n\t\t\t\t\t\t\t\t\t\t\t\t\tkind: 'primary',\n\t\t\t\t\t\t\t\t\t\t\t\t\tisSmall: true\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</SidebarSection>\n\t\t\t\t\t\t</Sidebar>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{generateTonsOfContent()}\n\t\t\t\t</Page>\n\t\t\t</View>\n\t\t)\n\t}\n}\n\nstories\n\t.add('Default', () => (\n\t\t<div STORYBOOKdoNotWrap style={{ height: '100vh' }}>\n\t\t\t<View\n\t\t\t\tSTORYBOOKdoNotWrap\n\t\t\t\tsidebarItems={personalItems}\n\t\t\t\tuser={user}\n\t\t\t\torganization={organization}\n\t\t\t\tisSidebarExpanded\n\t\t\t\tisChromeless={boolean('isChromeless', false)}\n\t\t\t>\n\t\t\t\t<Page\n\t\t\t\t\theader={{\n\t\t\t\t\t\ttitle: 'Hello Human'\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{generateTonsOfContent()}\n\t\t\t\t</Page>\n\t\t\t</View>\n\t\t</div>\n\t))\n\t.add('Save Bar', () => (\n\t\t<div STORYBOOKdoNotWrap style={{ height: '100vh' }}>\n\t\t\t<View\n\t\t\t\tSTORYBOOKdoNotWrap\n\t\t\t\tsidebarItems={personalItems}\n\t\t\t\tuser={user}\n\t\t\t\torganization={organization}\n\t\t\t\tisSidebarExpanded\n\t\t\t>\n\t\t\t\t<Page\n\t\t\t\t\theader={{\n\t\t\t\t\t\ttitle: 'Hello Human'\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{generateTonsOfContent()}\n\t\t\t\t</Page>\n\t\t\t\t<SaveBar isVisible={boolean('isVisible', true)} />\n\t\t\t</View>\n\t\t</div>\n\t))\n\t.add('Skill View', () => (\n\t\t<div STORYBOOKdoNotWrap style={{ height: '100vh' }}>\n\t\t\t<SkillViewExample />\n\t\t</div>\n\t))\n\t.add('Guest Profile', () => {\n\t\tlet messages = generateMessages({ count: 50, interval: 31 })\n\t\treturn (\n\t\t\t<div STORYBOOKdoNotWrap style={{ height: '100vh' }}>\n\t\t\t\t<View\n\t\t\t\t\tSTORYBOOKdoNotWrap\n\t\t\t\t\tsidebarItems={bizItems}\n\t\t\t\t\tuser={user}\n\t\t\t\t\tbusiness={organization}\n\t\t\t\t\tisSidebarExpanded\n\t\t\t\t>\n\t\t\t\t\t<Page\n\t\t\t\t\t\tsidebar={\n\t\t\t\t\t\t\t<Sidebar isLarge isCollapsible={false} side=\"right\">\n\t\t\t\t\t\t\t\t<SidebarSection\n\t\t\t\t\t\t\t\t\tisCentered\n\t\t\t\t\t\t\t\t\tverticalSpacing=\"loose\"\n\t\t\t\t\t\t\t\t\thorizontalSpacing=\"loose\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\t\tisLarge\n\t\t\t\t\t\t\t\t\t\tisCentered\n\t\t\t\t\t\t\t\t\t\timage=\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&h=200&q=80\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<Heading>\n\t\t\t\t\t\t\t\t\t\t<TextStyle type=\"strong\">Dorian Feeney</TextStyle>\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t</SidebarSection>\n\t\t\t\t\t\t\t\t<SidebarSection\n\t\t\t\t\t\t\t\t\thorizontalSpacing=\"loose\"\n\t\t\t\t\t\t\t\t\tclassName=\"u-flex-row\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tkind=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"u-flex-child-grow\"\n\t\t\t\t\t\t\t\t\t\ttext=\"Call Dorian\"\n\t\t\t\t\t\t\t\t\t\ticon={{\n\t\t\t\t\t\t\t\t\t\t\tname: 'phone',\n\t\t\t\t\t\t\t\t\t\t\tisLineIcon: true\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<ContextMenu\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tclassName=\"u-ml-tight\"\n\t\t\t\t\t\t\t\t\t\tactions={[\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttext: 'One action'\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttext: 'two action'\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttext: 'red action'\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttext: 'blue action'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t\tisSimple\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</SidebarSection>\n\t\t\t\t\t\t\t</Sidebar>\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FeedBuilder\n\t\t\t\t\t\t\tmessages={messages}\n\t\t\t\t\t\t\tmessageCount={50}\n\t\t\t\t\t\t\tonRowsRequested={() => null}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Page>\n\t\t\t\t</View>\n\t\t\t</div>\n\t\t)\n\t})\n\t.add('No Left Sidebar Items', () => {\n\t\treturn (\n\t\t\t<div STORYBOOKdoNotWrap style={{ height: '100vh' }}>\n\t\t\t\t<View\n\t\t\t\t\tsidebarItems={[]}\n\t\t\t\t\tuser={user}\n\t\t\t\t\tbusiness={organization}\n\t\t\t\t\tisSidebarExpanded\n\t\t\t\t\ttermsLink=\"#\"\n\t\t\t\t\tprivacyLink=\"#\"\n\t\t\t\t>\n\t\t\t\t\t<Page>{generateTonsOfContent()}</Page>\n\t\t\t\t</View>\n\t\t\t</div>\n\t\t)\n\t})\n"],"file":"View-story.js"}

package/lib/components/View/View.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+interface IViewProps {
+    children: ReactNode;
+    forceCloseSidebar?: Function;
+    /** Should view chrome be shown? (Header, left sidebar) */
+    isChromeless?: boolean;
+    isSidebarExpanded?: boolean;
+    isSidebarMobileExpanded?: boolean;
+    isSidebarVisible?: boolean;
+    location?: Record<string, any>;
+    onClickSearch?: Function;
+    organization?: Record<string, any>;
+    privacyLink?: string;
+    searchPlaceholder?: string;
+    sidebarBackLink?: Record<string, any>;
+    sidebarItems?: Record<string, any>[];
+    termsLink?: string;
+    toggleSidebarExpanded?: Function;
+    toggleSidebarVisibility?: Function;
+    user?: Record<string, any>;
+    /** Menu children (<ListItem> or <li>) */
+    userMenuItems: ReactNode;
+}
+declare const View: (props: IViewProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export default View;
+//# sourceMappingURL=View.d.ts.map

package/lib/components/View/View.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAA;AAMtD,UAAU,UAAU;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,iBAAiB,CAAC,EAAE,QAAQ,CAAA;IAE5B,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC9B,aAAa,CAAC,EAAE,QAAQ,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,QAAQ,CAAA;IAChC,uBAAuB,CAAC,EAAE,QAAQ,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE1B,yCAAyC;IACzC,aAAa,EAAE,SAAS,CAAA;CACxB;AAED,QAAA,MAAM,IAAI,uOAwFT,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/components/View/View.js

@@ -0,0 +1,91 @@
+"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 _HeaderPrimary = _interopRequireDefault(require("../Core/components/HeaderPrimary/HeaderPrimary"));
+
+var _Core = require("../Core");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var View = function View(props) {
+  var children = props.children,
+      forceCloseSidebar = props.forceCloseSidebar,
+      isChromeless = props.isChromeless,
+      isSidebarExpanded = props.isSidebarExpanded,
+      isSidebarMobileExpanded = props.isSidebarMobileExpanded,
+      isSidebarVisible = props.isSidebarVisible,
+      location = props.location,
+      onClickSearch = props.onClickSearch,
+      organization = props.organization,
+      privacyLink = props.privacyLink,
+      searchPlaceholder = props.searchPlaceholder,
+      sidebarBackLink = props.sidebarBackLink,
+      sidebarItems = props.sidebarItems,
+      termsLink = props.termsLink,
+      toggleSidebarExpanded = props.toggleSidebarExpanded,
+      toggleSidebarVisibility = props.toggleSidebarVisibility,
+      user = props.user,
+      userMenuItems = props.userMenuItems;
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('main-wrapper', {
+      'menu--is-visible': isSidebarVisible,
+      'sidebar--is-collapsed': !isSidebarExpanded,
+      'sidebar--is-missing': !sidebarItems || sidebarItems.length === 0
+    })
+  }, !isChromeless && _react["default"].createElement(_HeaderPrimary["default"], {
+    user: user,
+    organization: organization,
+    location: location,
+    enableHamburgerMenu: sidebarItems && sidebarItems.length > 0 ? true : false,
+    toggleSidebarVisibility: toggleSidebarVisibility,
+    isSidebarVisible: isSidebarMobileExpanded,
+    searchPlaceholder: searchPlaceholder,
+    onClickSearch: onClickSearch,
+    userMenuItems: userMenuItems
+  }), _react["default"].createElement("div", {
+    className: "main-content-outer"
+  }, !isChromeless && sidebarItems && sidebarItems.length > 0 && _react["default"].createElement("div", {
+    className: "main-content__sidebar"
+  }, _react["default"].createElement(_Core.Sidebar, {
+    style: {
+      zIndex: 1
+    },
+    items: sidebarItems,
+    backLink: sidebarBackLink,
+    footer: _react["default"].createElement(_Core.SidebarFooter, null),
+    isSidebarVisible: isSidebarVisible,
+    isExpanded: isSidebarExpanded,
+    isMobileExpanded: isSidebarMobileExpanded,
+    toggleExpanded: toggleSidebarExpanded,
+    forceCloseSidebar: forceCloseSidebar,
+    side: "left"
+  })), _react["default"].createElement("main", {
+    className: "main-content"
+  }, children)), !isChromeless && (!sidebarItems || sidebarItems.length === 0) && _react["default"].createElement("footer", {
+    className: "footer"
+  }, _react["default"].createElement("p", {
+    className: "footer-text"
+  }, termsLink && _react["default"].createElement("a", {
+    href: termsLink,
+    className: "footer-link"
+  }, "Terms of Service"), privacyLink && _react["default"].createElement("a", {
+    href: privacyLink,
+    className: "footer-link"
+  }, "Privacy Policy")), _react["default"].createElement("p", {
+    className: "footer-text"
+  }, "\xA9 Spruce Labs ".concat((0, _moment["default"])().format('YYYY')))));
+};
+
+var _default = View;
+exports["default"] = _default;
+//# sourceMappingURL=View.js.map