@stokr/components-library 2.3.41 → 2.3.42-beta

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.
Files changed (5) hide show
  1. package/dist/components/Footer/FooterMenu.js +25 -6
  2. package/dist/components/Footer/FooterMenu.styles.js +2 -2
  3. package/dist/components/Header/Header.js +3 -1
  4. package/dist/components/Header/Header.styles.js +10 -3
  5. package/package.json +1 -1
package/dist/components/Footer/FooterMenu.js CHANGED
@@ -17,6 +17,7 @@ var _LIInBug = _interopRequireDefault(require("../../static/images/social/LI-In-
17
17
  var _XLogoBlack = _interopRequireDefault(require("../../static/images/social/X-logo-black.png"));
18
18
  var _youtube_social_circle_red = _interopRequireDefault(require("../../static/images/social/youtube_social_circle_red.png"));
19
19
  var _TelegramLogo = _interopRequireDefault(require("../../static/images/social/Telegram-Logo.png"));
20
+ var _Header = require("components/Header/Header.styles");
20
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
22
23
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -89,18 +90,36 @@ var FooterMenu = function FooterMenu(_ref2) {
89
90
  _ref2$jobOpeningsNumb = _ref2.jobOpeningsNumber,
90
91
  jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb,
91
92
  dropdownCollapsed = _ref2.dropdownCollapsed;
92
- var _React$useState = _react.default.useState(groups.map(function () {
93
- return !dropdownCollapsed;
94
- })),
93
+ var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
94
+
95
+ // "New to STOKR" needs to be open by default
96
+ var _React$useState = _react.default.useState(function () {
97
+ return groups.map(function (group, index) {
98
+ if (isMobile) {
99
+ return group.name === 'New to STOKR';
100
+ }
101
+ // for desktop, use the dropdownCollapsed prop
102
+ return !dropdownCollapsed;
103
+ });
104
+ }),
95
105
  _React$useState2 = _slicedToArray(_React$useState, 2),
96
106
  activeGroups = _React$useState2[0],
97
107
  setactiveGroups = _React$useState2[1];
98
- var isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
99
108
  var toggleGroup = function toggleGroup(key) {
100
109
  var activeGroupsCopy = _toConsumableArray(activeGroups);
101
110
  activeGroupsCopy[key] = !activeGroupsCopy[key];
102
111
  setactiveGroups(activeGroupsCopy);
103
112
  };
113
+
114
+ // persist on screen size changes
115
+ (0, _react.useEffect)(function () {
116
+ setactiveGroups(groups.map(function (group, index) {
117
+ if (isMobile) {
118
+ return group.name === 'New to STOKR';
119
+ }
120
+ return !dropdownCollapsed;
121
+ }));
122
+ }, [isMobile, groups, dropdownCollapsed]);
104
123
  return /*#__PURE__*/_react.default.createElement(_FooterMenu.Container, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Groups, null, groups.map(function (group, groupKey) {
105
124
  return /*#__PURE__*/_react.default.createElement(_FooterMenu.Group, {
106
125
  key: group.name,
@@ -116,7 +135,7 @@ var FooterMenu = function FooterMenu(_ref2) {
116
135
  isOpened: activeGroups[groupKey]
117
136
  }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Items, {
118
137
  social: group.social
119
- }, group.social ? group.items.map(function (item) {
138
+ }, group.social ? /*#__PURE__*/_react.default.createElement(_Header.SocialLinksContainer, null, group.items.map(function (item) {
120
139
  return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
121
140
  key: item.name,
122
141
  social: true
@@ -126,7 +145,7 @@ var FooterMenu = function FooterMenu(_ref2) {
126
145
  target: "_blank",
127
146
  rel: "noopener noreferrer"
128
147
  }, socialSvg[item.name]));
129
- }) : group.items.map(function (item) {
148
+ })) : group.items.map(function (item) {
130
149
  return /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
131
150
  key: item.name
132
151
  }, /*#__PURE__*/_react.default.createElement(_FooterMenu.Link, {
package/dist/components/Footer/FooterMenu.styles.js CHANGED
@@ -36,7 +36,7 @@ exports.Title = Title;
36
36
  var Items = _styledComponents.default.ul.withConfig({
37
37
  displayName: "FooterMenustyles__Items",
38
38
  componentId: "sc-40ddqf-4"
39
- })(["display:flex;list-style:none;padding:0 24px;padding-bottom:24px;@media screen and (min-width:768px){justify-content:flex-start;}@media screen and (min-width:992px){display:block;padding:0;margin-top:22px;margin:0 -8px;width:224px;", "}@media screen and (max-width:992px){padding-top:15px;padding-left:0;padding-bottom:0;}"], function (props) {
39
+ })(["display:block;list-style:none;padding:0 24px;padding-bottom:24px;@media screen and (min-width:992px){display:block;padding:0;margin-top:22px;margin:0 -8px;width:224px;", "}@media screen and (max-width:992px){padding-top:15px;padding-left:0;padding-bottom:0;}"], function (props) {
40
40
  return props.social && "\n margin-top: 14px;\n ";
41
41
  });
42
42
  exports.Items = Items;
@@ -55,7 +55,7 @@ exports.Link = Link;
55
55
  var SocialLink = _styledComponents.default.a.withConfig({
56
56
  displayName: "FooterMenustyles__SocialLink",
57
57
  componentId: "sc-40ddqf-7"
58
- })(["position:relative;display:inline-block;width:40px;height:40px;border-radius:20px;transition:background-color 0.2s;& > svg,img{height:40px;width:40px;}&:focus,&:hover{opacity:0.8;}@media (max-width:1024px){flex-shrink:0;}"]);
58
+ })(["position:relative;display:inline-block;width:40px;height:40px;border-radius:20px;transition:background-color 0.2s;& > svg,img{height:40px;width:40px;}&:focus,&:hover{opacity:0.8;}"]);
59
59
  exports.SocialLink = SocialLink;
60
60
  var HiringTotalNumber = _styledComponents.default.span.withConfig({
61
61
  displayName: "FooterMenustyles__HiringTotalNumber",
package/dist/components/Header/Header.js CHANGED
@@ -391,7 +391,9 @@ var Header = function Header(_ref3) {
391
391
  }, /*#__PURE__*/_react.default.createElement(_Header.SignupButton, {
392
392
  onClick: onSignUpClick,
393
393
  isMobile: true
394
- }, "Sign Up"))), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement("div", null, socialLinks.map(function (item) {
394
+ }, "Sign Up"))), socialLinks.length > 0 && /*#__PURE__*/_react.default.createElement(_Header.CTAContainer, null, /*#__PURE__*/_react.default.createElement("span", null, "FOLLOW US"), /*#__PURE__*/_react.default.createElement(_Header.SocialLinksContainer, {
395
+ isHeader: true
396
+ }, socialLinks.map(function (item) {
395
397
  return /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
396
398
  key: item.name,
397
399
  href: item.url,
package/dist/components/Header/Header.styles.js CHANGED
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuWrapper = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuLink = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
7
+ exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SocialLinksContainer = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuWrapper = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuLink = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
  var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
10
10
  var _colors = _interopRequireDefault(require("../../styles/colors"));
@@ -190,5 +190,12 @@ exports.SignupButton = SignupButton;
190
190
  var CTAContainer = _styledComponents.default.div.withConfig({
191
191
  displayName: "Headerstyles__CTAContainer",
192
192
  componentId: "sc-hifrdy-23"
193
- })(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;justify-content:center;}", " ", "{display:flex;justify-content:center;background:transparent;margin:12px;svg{fill:rgb(32,32,32);height:18px !important;width:18px !important;}}"], sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX, _rwd.rwdMax.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n div{\n width: 192px; /* Fit exactly 3 icons */\n }\n "]))), _FooterMenu.SocialLink);
194
- exports.CTAContainer = CTAContainer;
193
+ })(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;flex-wrap:wrap;}", " ", "{display:flex;justify-content:center;background:transparent;margin:12px;svg{fill:rgb(32,32,32);height:18px !important;width:18px !important;}}"], sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX, _rwd.rwdMax.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n div{\n width: 192px; /* Fit exactly 3 icons */\n }\n "]))), _FooterMenu.SocialLink);
194
+ exports.CTAContainer = CTAContainer;
195
+ var SocialLinksContainer = _styledComponents.default.div.withConfig({
196
+ displayName: "Headerstyles__SocialLinksContainer",
197
+ componentId: "sc-hifrdy-24"
198
+ })(["display:flex !important;flex-wrap:nowrap !important;justify-content:", ";"], function (props) {
199
+ return props.isHeader ? 'center' : null;
200
+ });
201
+ exports.SocialLinksContainer = SocialLinksContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.41",
3
+ "version": "2.3.42-beta",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",