luna-one 3.1.375 → 3.1.378

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -115,7 +115,8 @@ var NavBarHandler = function NavBarHandler(_ref) {
115
115
  displayIcons: data === null || data === void 0 ? void 0 : data.displayIcons,
116
116
  displaySectorName: data === null || data === void 0 ? void 0 : data.displaySectorName,
117
117
  menuBarTheme: data === null || data === void 0 ? void 0 : data.menuBarTheme,
118
- topNavTheme: data === null || data === void 0 ? void 0 : data.topNavTheme
118
+ topNavTheme: data === null || data === void 0 ? void 0 : data.topNavTheme,
119
+ authLabels: data === null || data === void 0 ? void 0 : data.authLabels
119
120
  });
120
121
  };
121
122
 
@@ -34,7 +34,8 @@ var Login = function Login(_ref) {
34
34
  Link = _ref.Link,
35
35
  isAuthenticated = _ref.isAuthenticated,
36
36
  userProfile = _ref.userProfile,
37
- logout = _ref.logout;
37
+ logout = _ref.logout,
38
+ authLabels = _ref.authLabels;
38
39
 
39
40
  var _useState = (0, _react.useState)(false),
40
41
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -60,6 +61,10 @@ var Login = function Login(_ref) {
60
61
  setToggle(!toggle);
61
62
  };
62
63
 
64
+ var welcomeText = authLabels.welcome,
65
+ loginText = authLabels.login,
66
+ logoutText = authLabels.logout;
67
+
63
68
  var activateSignOutOnKeyDown = function activateSignOutOnKeyDown(event) {
64
69
  if (!mouse) {
65
70
  // checks that a user hits the enter key to open the modal
@@ -135,18 +140,18 @@ var Login = function Login(_ref) {
135
140
 
136
141
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loginPage && !isAuthenticated ? /*#__PURE__*/_react.default.createElement("a", {
137
142
  onClick: handleClickLogin,
138
- className: "login-button",
143
+ className: "login__button",
139
144
  style: {
140
145
  display: isHidden ? "none" : ""
141
146
  }
142
- }, "Login") : loginPage && isAuthenticated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
147
+ }, loginText) : loginPage && isAuthenticated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
143
148
  className: "login"
144
149
  }, /*#__PURE__*/_react.default.createElement("p", {
145
150
  onClick: function onClick() {
146
151
  return toggleSignout();
147
152
  },
148
153
  className: "login__text"
149
- }, "Welcome,", /*#__PURE__*/_react.default.createElement("span", {
154
+ }, "".concat(welcomeText, ", "), /*#__PURE__*/_react.default.createElement("span", {
150
155
  className: "login__user"
151
156
  }, " ".concat(userProfile.firstName))), /*#__PURE__*/_react.default.createElement("section", {
152
157
  className: "logout",
@@ -158,7 +163,7 @@ var Login = function Login(_ref) {
158
163
  return handleClickLogout();
159
164
  },
160
165
  className: "logout__button"
161
- }, "Log Out")))) : /*#__PURE__*/_react.default.createElement("article", {
166
+ }, logoutText)))) : /*#__PURE__*/_react.default.createElement("article", {
162
167
  className: mouse ? "sketchup-login" : "sketchup-login tagFocus",
163
168
  id: _lodash.default.uniqueId("id-"),
164
169
  style: {
@@ -159,4 +159,18 @@
159
159
  margin-top: 13px;
160
160
  border-top: 4px solid $trimble-gold;
161
161
  }
162
+ @media screen and (max-width: $breakpoint-sm) {
163
+ padding: 0 !important;
164
+ width: 0px;
165
+ visibility: hidden;
166
+ margin: 0px;
167
+ }
168
+ &__button {
169
+ @media screen and (max-width: $breakpoint-sm) {
170
+ padding: 0 !important;
171
+ width: 0px;
172
+ visibility: hidden;
173
+ margin: 0px;
174
+ }
175
+ }
162
176
  }
@@ -30,17 +30,27 @@ var MobileLogin = function MobileLogin(props) {
30
30
  var _login$content3, _login$userInformatio, _login$userInformatio2, _login$userInformatio3, _login$userInformatio4;
31
31
 
32
32
  var login = props.login,
33
- isHidden = props.isHidden;
33
+ isHidden = props.isHidden,
34
+ loginPage = props.loginPage,
35
+ Link = props.Link,
36
+ isAuthenticated = props.isAuthenticated,
37
+ userProfile = props.userProfile,
38
+ logout = props.logout;
34
39
 
35
40
  var _useState = (0, _react.useState)(false),
36
41
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
37
42
  toggle = _useState2[0],
38
43
  setToggle = _useState2[1];
39
44
 
40
- var _useState3 = (0, _react.useState)(_downArrow.default),
45
+ var _useState3 = (0, _react.useState)(false),
41
46
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
42
- image = _useState4[0],
43
- setImage = _useState4[1];
47
+ showSignout = _useState4[0],
48
+ setShowSignout = _useState4[1];
49
+
50
+ var _useState5 = (0, _react.useState)(_downArrow.default),
51
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
52
+ image = _useState6[0],
53
+ setImage = _useState6[1];
44
54
 
45
55
  var ref = (0, _react.useRef)(null);
46
56
 
@@ -113,7 +123,38 @@ var MobileLogin = function MobileLogin(props) {
113
123
  }
114
124
  };
115
125
 
116
- return /*#__PURE__*/_react.default.createElement("article", {
126
+ var toggleSignout = function toggleSignout() {
127
+ setShowSignout(!showSignout);
128
+ };
129
+
130
+ var handleClickLogout = function handleClickLogout() {
131
+ setShowSignout(false);
132
+ logout();
133
+ };
134
+
135
+ var handleClickLogin = function handleClickLogin() {
136
+ loginPage();
137
+ };
138
+
139
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loginPage && !isAuthenticated ? /*#__PURE__*/_react.default.createElement("a", {
140
+ onClick: handleClickLogin,
141
+ className: "mobile-login__button",
142
+ style: {
143
+ display: isHidden ? "none" : ""
144
+ }
145
+ }, "Login") : loginPage && isAuthenticated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
146
+ className: "mobile-login"
147
+ }, /*#__PURE__*/_react.default.createElement("p", {
148
+ onClick: function onClick() {
149
+ return toggleSignout();
150
+ },
151
+ className: "mobile-login__text"
152
+ }, "Welcome, ".concat(userProfile.firstName)), /*#__PURE__*/_react.default.createElement("a", {
153
+ onClick: function onClick() {
154
+ return handleClickLogout();
155
+ },
156
+ className: "mobile-logout__button"
157
+ }, "Log Out"))) : /*#__PURE__*/_react.default.createElement("article", {
117
158
  className: mouse ? "sketchup-login--mobile" : "sketchup-login--mobile tagFocus",
118
159
  style: {
119
160
  display: isHidden ? "none" : ""
@@ -136,7 +177,7 @@ var MobileLogin = function MobileLogin(props) {
136
177
  }, login.content.text), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
137
178
  tagIndex: mouse ? "" : "0",
138
179
  className: mouse ? "sketchup-login__user" : "sketchup-login__user tagFocus",
139
- src: _userProfile.default,
180
+ src: userProfile,
140
181
  onClick: hangleToggle
141
182
  }), login && login.loggedIn && /*#__PURE__*/_react.default.createElement("img", {
142
183
  className: "sketchup-login__down-arrow",
@@ -158,7 +199,7 @@ var MobileLogin = function MobileLogin(props) {
158
199
  className: "sketchup-login__user-name"
159
200
  }, login.userInformation.name), login && login.userInformation && login.userInformation.email && /*#__PURE__*/_react.default.createElement("p", {
160
201
  className: "sketchup-login__user-email"
161
- }, login.userInformation.email))), renderListItems()));
202
+ }, login.userInformation.email))), renderListItems())));
162
203
  };
163
204
 
164
205
  exports.MobileLogin = MobileLogin;
@@ -1 +1,38 @@
1
- //Todo mobile login styles
1
+ @import "../../../global-styles/terra.scss";
2
+
3
+ .mobile-login {
4
+ position:relative;
5
+ display: flex;
6
+ flex-direction: column;
7
+
8
+ &__text {
9
+ @include benton-medium();
10
+ font-size: $body-font-size;
11
+ color: #585C65;
12
+ margin: 19px 0;
13
+ }
14
+
15
+ &__user {
16
+ @include benton-bold();
17
+ }
18
+
19
+ .mobile-logout {
20
+ &__button{
21
+ cursor: pointer;
22
+ font-size: $body-font-size;
23
+ color: $trimble-blue !important;
24
+ @include benton-medium();
25
+ text-decoration: none !important;
26
+ }
27
+ }
28
+ &__button {
29
+ @media screen and (max-width: $breakpoint-sm) {
30
+ padding-top: 21px;
31
+ cursor: pointer;
32
+ font-size: $body-font-size;
33
+ color: $trimble-blue !important;
34
+ @include benton-medium();
35
+ text-decoration: none !important;
36
+ }
37
+ }
38
+ }
@@ -37,10 +37,8 @@ var _LanguageSelector = _interopRequireDefault(require("../../other-organisms/La
37
37
 
38
38
  var MobileNav = function MobileNav(props) {
39
39
  var navOptions = props.navOptions,
40
- Link = props.Link,
41
40
  rightLinks = props.rightLinks,
42
41
  disableLogin = props.disableLogin,
43
- login = props.login,
44
42
  disableLanguageRegion = props.disableLanguageRegion,
45
43
  disableSectorFlyOut = props.disableSectorFlyOut,
46
44
  handleSectorFlyoutDeployed = props.handleSectorFlyoutDeployed,
@@ -49,7 +47,14 @@ var MobileNav = function MobileNav(props) {
49
47
  languageSelectorDeployed = props.languageSelectorDeployed,
50
48
  handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed,
51
49
  _props$saveLanguage = props.saveLanguage,
52
- saveLanguage = _props$saveLanguage === void 0 ? function () {} : _props$saveLanguage;
50
+ saveLanguage = _props$saveLanguage === void 0 ? function () {} : _props$saveLanguage,
51
+ loginPage = props.loginPage,
52
+ isHidden = props.isHidden,
53
+ isAuthenticated = props.isAuthenticated,
54
+ userProfile = props.userProfile,
55
+ logout = props.logout,
56
+ login = props.login,
57
+ Link = props.Link;
53
58
 
54
59
  var _useContext = (0, _react.useContext)(_NavBar.NavBarContext),
55
60
  mouse = _useContext.mouse,
@@ -163,18 +168,23 @@ var MobileNav = function MobileNav(props) {
163
168
  handleSearchFieldChange: handleSearchFieldChange,
164
169
  searchFieldValue: searchFieldValue,
165
170
  handleSearchSubmit: handleSearchSubmit,
166
- Link: Link,
167
171
  closeAll: closeAll,
168
172
  currentOpenMenu: isOpen,
169
173
  disableLogin: disableLogin,
170
- login: login,
171
174
  mouse: mouse,
172
175
  hamburgerIsOpen: hamburgerIsOpen,
173
176
  disableLanguageRegion: disableLanguageRegion,
174
177
  languageSelectorData: languageSelectorData,
175
178
  languageSelectorDeployed: languageSelectorDeployed,
176
179
  handleLanguageSelectorDeployed: handleLanguageSelectorDeployed,
177
- languageSettings: languageSettings
180
+ languageSettings: languageSettings,
181
+ loginPage: loginPage,
182
+ login: login,
183
+ isHidden: isHidden,
184
+ Link: Link,
185
+ isAuthenticated: isAuthenticated,
186
+ userProfile: userProfile,
187
+ logout: logout
178
188
  })), !disableSectorFlyOut && /*#__PURE__*/_react.default.createElement("section", {
179
189
  className: "ter-mobile-nav__flyout-wrapper ".concat(isOpen !== null ? "ter-mobile-nav__flyout-wrapper--inactive" : ""),
180
190
  onClick: function onClick() {
@@ -168,6 +168,26 @@
168
168
  }
169
169
  }
170
170
 
171
+ &__login-wrapper {
172
+ display: flex;
173
+ align-items: center;
174
+ padding: 0 16px;
175
+ transform: translateX(0%);
176
+ transition: 0.3s;
177
+ visibility: visible;
178
+ overflow: hidden;
179
+ background: $white;
180
+ &--inactive {
181
+ visibility: hidden;
182
+ transform: translateX(-100%);
183
+ }
184
+
185
+ &--hidden {
186
+ visibility: hidden;
187
+ transform: translateX(0%);
188
+ }
189
+ }
190
+
171
191
  &__location {
172
192
  font-size: $body-font-size;
173
193
  padding-right: 9px;
@@ -27,17 +27,22 @@ var TopMobileNav = function TopMobileNav(props) {
27
27
  var mouse = props.mouse,
28
28
  links = props.links,
29
29
  hamburgerIsOpen = props.hamburgerIsOpen,
30
- Link = props.Link,
31
30
  closeAll = props.closeAll,
32
31
  disableLogin = props.disableLogin,
33
- login = props.login,
34
32
  disableLanguageRegion = props.disableLanguageRegion,
35
33
  currentOpenMenu = props.currentOpenMenu,
36
34
  searchFieldValue = props.searchFieldValue,
37
35
  handleSearchSubmit = props.handleSearchSubmit,
38
36
  languageSettings = props.languageSettings,
39
37
  languageSelectorDeployed = props.languageSelectorDeployed,
40
- handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed;
38
+ handleLanguageSelectorDeployed = props.handleLanguageSelectorDeployed,
39
+ loginPage = props.loginPage,
40
+ isHidden = props.isHidden,
41
+ isAuthenticated = props.isAuthenticated,
42
+ userProfile = props.userProfile,
43
+ logout = props.logout,
44
+ login = props.login,
45
+ Link = props.Link;
41
46
 
42
47
  var toggleWithEnter = function toggleWithEnter(event, text) {
43
48
  if (!mouse) {
@@ -109,10 +114,15 @@ var TopMobileNav = function TopMobileNav(props) {
109
114
  src: _downCaretDarkBlue.default,
110
115
  alt: "caret icon"
111
116
  })), !disableLogin && /*#__PURE__*/_react.default.createElement("section", {
112
- 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" : "")
117
+ 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" : "")
113
118
  }, /*#__PURE__*/_react.default.createElement(_MobileLogin.MobileLogin, {
119
+ loginPage: loginPage,
114
120
  login: login,
115
- isHidden: disableLogin
121
+ isHidden: isHidden,
122
+ Link: Link,
123
+ isAuthenticated: isAuthenticated,
124
+ userProfile: userProfile,
125
+ logout: logout
116
126
  })));
117
127
  };
118
128
 
@@ -305,11 +305,11 @@ var NavBarTop = function NavBarTop(props) {
305
305
  id: _lodash.default.uniqueId("id-"),
306
306
  className: "ter-navbar-top__right--mobile-hamburger ".concat(hamburgerIsOpen ? "ter-navbar-top__right--mobile-hamburger--is-open" : "")
307
307
  }, /*#__PURE__*/_react.default.createElement("div", {
308
- className: "ter-navbar-top__right--mobile-hamburger-top"
308
+ className: "ter-navbar-top__right--mobile-hamburger-top ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-top--".concat(theme) : "")
309
309
  }), /*#__PURE__*/_react.default.createElement("div", {
310
- className: "ter-navbar-top__right--mobile-hamburger-middle"
310
+ className: "ter-navbar-top__right--mobile-hamburger-middle ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-middle--".concat(theme) : "")
311
311
  }), /*#__PURE__*/_react.default.createElement("div", {
312
- className: "ter-navbar-top__right--mobile-hamburger-bottom"
312
+ className: "ter-navbar-top__right--mobile-hamburger-bottom ".concat(theme ? "ter-navbar-top__right--mobile-hamburger-bottom--".concat(theme) : "")
313
313
  })))))))));
314
314
  };
315
315
 
@@ -188,6 +188,9 @@
188
188
  position: absolute;
189
189
  transition: 0.4s;
190
190
  border-radius: 3px;
191
+ &--blue {
192
+ background: $white;
193
+ }
191
194
  }
192
195
 
193
196
  &-middle {
@@ -110,7 +110,8 @@ var NavBar = function NavBar(props) {
110
110
  displayIcons = props.displayIcons,
111
111
  displaySectorName = props.displaySectorName,
112
112
  topNavTheme = props.topNavTheme,
113
- menuBarTheme = props.menuBarTheme;
113
+ menuBarTheme = props.menuBarTheme,
114
+ authLabels = props.authLabels;
114
115
 
115
116
  var _useState = (0, _react.useState)(null),
116
117
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -394,7 +395,8 @@ var NavBar = function NavBar(props) {
394
395
  Link: Link,
395
396
  isAuthenticated: isAuthenticated,
396
397
  userProfile: userProfile,
397
- logout: logout
398
+ logout: logout,
399
+ authLabels: authLabels
398
400
  })), /*#__PURE__*/_react.default.createElement("div", {
399
401
  className: "luna-layout__navigation-padding ".concat(menuBarTheme ? "luna-layout__navigation-padding--".concat(menuBarTheme) : "")
400
402
  }, !disableMenus && /*#__PURE__*/_react.default.createElement("div", {
@@ -412,7 +414,14 @@ var NavBar = function NavBar(props) {
412
414
  sectorFlyoutLabel: sectorFlyoutData === null || sectorFlyoutData === void 0 ? void 0 : sectorFlyoutData.mobileLabel,
413
415
  languageSelectorData: languageSelectorData,
414
416
  languageSelectorDeployed: languageSelectorDeployed,
415
- handleLanguageSelectorDeployed: handleLanguageSelectorDeployed
417
+ handleLanguageSelectorDeployed: handleLanguageSelectorDeployed,
418
+ loginPage: loginPage,
419
+ login: login,
420
+ isHidden: disableLogin,
421
+ Link: Link,
422
+ isAuthenticated: isAuthenticated,
423
+ userProfile: userProfile,
424
+ logout: logout
416
425
  }), subNavDisplay ? /*#__PURE__*/_react.default.createElement(_SubNav.default, {
417
426
  Link: Link,
418
427
  breadcrumbs: subNavData === null || subNavData === void 0 ? void 0 : subNavData.breadcrumbs,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luna-one",
3
- "version": "3.1.375",
3
+ "version": "3.1.378",
4
4
  "dependencies": {
5
5
  "@storybook/addon-knobs": "^6.3.1",
6
6
  "@testing-library/jest-dom": "^5.11.9",
@@ -24,7 +24,7 @@
24
24
  "react-scroll": "^1.7.14",
25
25
  "react-slidedown": "^2.4.5",
26
26
  "smoothscroll-polyfill": "^0.4.4",
27
- "terra-one": "^3.0.125"
27
+ "terra-one": "^3.0.126"
28
28
  },
29
29
  "peerDependencies": {
30
30
  "node-sass": "^4.12.0",