luna-one 3.1.377 → 3.1.378

package/dist/luna/components/Login/Login.js

@@ -140,7 +140,7 @@ var Login = function Login(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loginPage && !isAuthenticated ? /*#__PURE__*/_react.default.createElement("a", {
     onClick: handleClickLogin,
-    className: "login-button",
+    className: "login__button",
     style: {
       display: isHidden ? "none" : ""
     }

package/dist/luna/components/Login/Login.scss

@@ -159,4 +159,18 @@
     margin-top: 13px;
     border-top: 4px solid $trimble-gold;
   }
+  @media screen and (max-width: $breakpoint-sm) {
+    padding: 0 !important;
+    width: 0px;
+    visibility: hidden;
+    margin: 0px;
+  }
+  &__button {
+    @media screen and (max-width: $breakpoint-sm) {
+      padding: 0 !important;
+      width: 0px;
+      visibility: hidden;
+      margin: 0px;
+    }
+  }
 }

package/dist/luna/components/MobileLogin/MobileLogin.js

@@ -30,17 +30,27 @@ var MobileLogin = function MobileLogin(props) {
   var _login$content3, _login$userInformatio, _login$userInformatio2, _login$userInformatio3, _login$userInformatio4;
 
   var login = props.login,
-      isHidden = props.isHidden;
+      isHidden = props.isHidden,
+      loginPage = props.loginPage,
+      Link = props.Link,
+      isAuthenticated = props.isAuthenticated,
+      userProfile = props.userProfile,
+      logout = props.logout;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       toggle = _useState2[0],
       setToggle = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(_downArrow.default),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      image = _useState4[0],
-      setImage = _useState4[1];
+      showSignout = _useState4[0],
+      setShowSignout = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(_downArrow.default),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      image = _useState6[0],
+      setImage = _useState6[1];
 
   var ref = (0, _react.useRef)(null);
 
@@ -113,7 +123,38 @@ var MobileLogin = function MobileLogin(props) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement("article", {
+  var toggleSignout = function toggleSignout() {
+    setShowSignout(!showSignout);
+  };
+
+  var handleClickLogout = function handleClickLogout() {
+    setShowSignout(false);
+    logout();
+  };
+
+  var handleClickLogin = function handleClickLogin() {
+    loginPage();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loginPage && !isAuthenticated ? /*#__PURE__*/_react.default.createElement("a", {
+    onClick: handleClickLogin,
+    className: "mobile-login__button",
+    style: {
+      display: isHidden ? "none" : ""
+    }
+  }, "Login") : loginPage && isAuthenticated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
+    className: "mobile-login"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    onClick: function onClick() {
+      return toggleSignout();
+    },
+    className: "mobile-login__text"
+  }, "Welcome, ".concat(userProfile.firstName)), /*#__PURE__*/_react.default.createElement("a", {
+    onClick: function onClick() {
+      return handleClickLogout();
+    },
+    className: "mobile-logout__button"
+  }, "Log Out"))) : /*#__PURE__*/_react.default.createElement("article", {
     className: mouse ? "sketchup-login--mobile" : "sketchup-login--mobile tagFocus",
     style: {
       display: isHidden ? "none" : ""
@@ -136,7 +177,7 @@ var MobileLogin = function MobileLogin(props) {
   }, login.content.text), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
     tagIndex: mouse ? "" : "0",
     className: mouse ? "sketchup-login__user" : "sketchup-login__user tagFocus",
-    src: _userProfile.default,
+    src: userProfile,
     onClick: hangleToggle
   }), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
     className: "sketchup-login__down-arrow",
@@ -158,7 +199,7 @@ var MobileLogin = function MobileLogin(props) {
     className: "sketchup-login__user-name"
   }, login.userInformation.name), login && login.userInformation && login.userInformation.email && /*#__PURE__*/_react.default.createElement("p", {
     className: "sketchup-login__user-email"
-  }, login.userInformation.email))), renderListItems()));
+  }, login.userInformation.email))), renderListItems())));
 };
 
 exports.MobileLogin = MobileLogin;

package/dist/luna/components/MobileLogin/MobileLogin.scss

@@ -1 +1,38 @@
-//Todo mobile login styles
+@import "../../../global-styles/terra.scss";
+
+.mobile-login {
+  position:relative;
+  display: flex;
+  flex-direction: column;
+
+  &__text {
+    @include benton-medium();
+    font-size: $body-font-size;
+    color: #585C65;
+    margin: 19px 0;
+  }
+
+  &__user {
+    @include benton-bold();
+  }
+  
+  .mobile-logout {
+    &__button{
+      cursor: pointer;
+      font-size: $body-font-size;
+      color: $trimble-blue !important;
+      @include benton-medium();
+      text-decoration: none !important;
+    }
+  }
+  &__button {
+    @media screen and (max-width: $breakpoint-sm) {
+      padding-top: 21px;
+      cursor: pointer;
+      font-size: $body-font-size;
+      color: $trimble-blue !important;
+      @include benton-medium();
+      text-decoration: none !important;
+    }
+  }
+}

package/dist/luna/components/MobileNav/MobileNav.js

@@ -37,10 +37,8 @@ var _LanguageSelector = _interopRequireDefault(require("../../other-organisms/La
 
 var MobileNav = function MobileNav(props) {
   var navOptions = props.navOptions,
-      Link = props.Link,
       rightLinks = props.rightLinks,
       disableLogin = props.disableLogin,
-      login = props.login,
       disableLanguageRegion = props.disableLanguageRegion,
       disableSectorFlyOut = props.disableSectorFlyOut,
       handleSectorFlyoutDeployed = props.handleSectorFlyoutDeployed,
@@ -49,7 +47,14 @@ var MobileNav = function MobileNav(props) {
       languageSelectorDeployed = props.languageSelectorDeployed,
       handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed,
       _props$saveLanguage = props.saveLanguage,
-      saveLanguage = _props$saveLanguage === void 0 ? function () {} : _props$saveLanguage;
+      saveLanguage = _props$saveLanguage === void 0 ? function () {} : _props$saveLanguage,
+      loginPage = props.loginPage,
+      isHidden = props.isHidden,
+      isAuthenticated = props.isAuthenticated,
+      userProfile = props.userProfile,
+      logout = props.logout,
+      login = props.login,
+      Link = props.Link;
 
   var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
       mouse = _useContext.mouse,
@@ -163,18 +168,23 @@ var MobileNav = function MobileNav(props) {
     handleSearchFieldChange: handleSearchFieldChange,
     searchFieldValue: searchFieldValue,
     handleSearchSubmit: handleSearchSubmit,
-    Link: Link,
     closeAll: closeAll,
     currentOpenMenu: isOpen,
     disableLogin: disableLogin,
-    login: login,
     mouse: mouse,
     hamburgerIsOpen: hamburgerIsOpen,
     disableLanguageRegion: disableLanguageRegion,
     languageSelectorData: languageSelectorData,
     languageSelectorDeployed: languageSelectorDeployed,
     handleLanguageSelectorDeployed: handleLanguageSelectorDeployed,
-    languageSettings: languageSettings
+    languageSettings: languageSettings,
+    loginPage: loginPage,
+    login: login,
+    isHidden: isHidden,
+    Link: Link,
+    isAuthenticated: isAuthenticated,
+    userProfile: userProfile,
+    logout: logout
   })), !disableSectorFlyOut && /*#__PURE__*/_react.default.createElement("section", {
     className: "ter-mobile-nav__flyout-wrapper ".concat(isOpen !== null ? "ter-mobile-nav__flyout-wrapper--inactive" : ""),
     onClick: function onClick() {

package/dist/luna/components/MobileNav/MobileNav.scss

@@ -168,6 +168,26 @@
     }
   }
 
+  &__login-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    transform: translateX(0%);
+    transition: 0.3s;
+    visibility: visible;
+    overflow: hidden;
+    background: $white;
+    &--inactive {
+      visibility: hidden;
+      transform: translateX(-100%);
+    }
+
+    &--hidden {
+      visibility: hidden;
+      transform: translateX(0%);
+    }
+  }
+
   &__location {
     font-size: $body-font-size;
     padding-right: 9px;

package/dist/luna/components/MobileNav/TopMobileNav.js

@@ -27,17 +27,22 @@ var TopMobileNav = function TopMobileNav(props) {
   var mouse = props.mouse,
       links = props.links,
       hamburgerIsOpen = props.hamburgerIsOpen,
-      Link = props.Link,
       closeAll = props.closeAll,
       disableLogin = props.disableLogin,
-      login = props.login,
       disableLanguageRegion = props.disableLanguageRegion,
       currentOpenMenu = props.currentOpenMenu,
       searchFieldValue = props.searchFieldValue,
       handleSearchSubmit = props.handleSearchSubmit,
       languageSettings = props.languageSettings,
       languageSelectorDeployed = props.languageSelectorDeployed,
-      handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed;
+      handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed,
+      loginPage = props.loginPage,
+      isHidden = props.isHidden,
+      isAuthenticated = props.isAuthenticated,
+      userProfile = props.userProfile,
+      logout = props.logout,
+      login = props.login,
+      Link = props.Link;
 
   var toggleWithEnter = function toggleWithEnter(event, text) {
     if (!mouse) {
@@ -109,10 +114,15 @@ var TopMobileNav = function TopMobileNav(props) {
     src: _downCaretDarkBlue.default,
     alt: "caret icon"
   })), !disableLogin && /*#__PURE__*/_react.default.createElement("section", {
-    className: "ter-top-mobile-nav__location-wrapper  ".concat(currentOpenMenu !== null ? "ter-top-mobile-nav__location-wrapper--inactive" : "", " ").concat(!hamburgerIsOpen ? "ter-top-mobile-nav__location-wrapper--hidden" : "")
+    className: "ter-top-mobile-nav__login-wrapper  ".concat(currentOpenMenu !== null ? "ter-top-mobile-nav__login-wrapper--inactive" : "", " ").concat(!hamburgerIsOpen ? "ter-top-mobile-nav__login-wrapper--hidden" : "")
   }, /*#__PURE__*/_react.default.createElement(_MobileLogin.MobileLogin, {
+    loginPage: loginPage,
     login: login,
-    isHidden: disableLogin
+    isHidden: isHidden,
+    Link: Link,
+    isAuthenticated: isAuthenticated,
+    userProfile: userProfile,
+    logout: logout
   })));
 };
 

package/dist/luna/components/NavBarTop/NavBarTop.js

@@ -305,11 +305,11 @@ var NavBarTop = function NavBarTop(props) {
     id: _lodash.default.uniqueId("id-"),
     className: "ter-navbar-top__right--mobile-hamburger ".concat(hamburgerIsOpen ? "ter-navbar-top__right--mobile-hamburger--is-open" : "")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-navbar-top__right--mobile-hamburger-top"
+    className: "ter-navbar-top__right--mobile-hamburger-top ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-top--".concat(theme) : "")
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-navbar-top__right--mobile-hamburger-middle"
+    className: "ter-navbar-top__right--mobile-hamburger-middle ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-middle--".concat(theme) : "")
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "ter-navbar-top__right--mobile-hamburger-bottom"
+    className: "ter-navbar-top__right--mobile-hamburger-bottom ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-bottom--".concat(theme) : "")
   })))))))));
 };
 

package/dist/luna/components/NavBarTop/NavBarTop.scss

@@ -188,6 +188,9 @@
           position: absolute;
           transition: 0.4s;
           border-radius: 3px;
+          &--blue {
+            background: $white;
+          }
         }
 
         &-middle {

package/dist/luna/other-organisms/NavBar/NavBar.js

@@ -414,7 +414,14 @@ var NavBar = function NavBar(props) {
     sectorFlyoutLabel: sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.mobileLabel,
     languageSelectorData: languageSelectorData,
     languageSelectorDeployed: languageSelectorDeployed,
-    handleLanguageSelectorDeployed: handleLanguageSelectorDeployed
+    handleLanguageSelectorDeployed: handleLanguageSelectorDeployed,
+    loginPage: loginPage,
+    login: login,
+    isHidden: disableLogin,
+    Link: Link,
+    isAuthenticated: isAuthenticated,
+    userProfile: userProfile,
+    logout: logout
   }), subNavDisplay ? /*#__PURE__*/_react.default.createElement(_SubNav.default, {
     Link: Link,
     breadcrumbs: subNavData === null || subNavData === void 0 ? void 0 : subNavData.breadcrumbs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.377",
+  "version": "3.1.378",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",