@stokr/components-library 2.3.23 → 2.3.25

package/dist/components/Footer/FooterLayout.js

@@ -10,7 +10,7 @@ var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
 var _Newsletter = _interopRequireDefault(require("../Newsletter/Newsletter"));
 var _Footer = _interopRequireDefault(require("./Footer"));
 var _globalVariables = require("../../constants/globalVariables");
-var _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo"];
+var _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -25,10 +25,12 @@ function FooterLayout(_ref) {
     _ref$jobOpeningsNumbe = _ref.jobOpeningsNumber,
     jobOpeningsNumber = _ref$jobOpeningsNumbe === void 0 ? 0 : _ref$jobOpeningsNumbe,
     lemonWayLogo = _ref.lemonWayLogo,
+    dropdownCollapsed = _ref.dropdownCollapsed,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withFooterMenu && /*#__PURE__*/_react.default.createElement(_FooterMenu.default, {
     groups: footerGroups,
-    jobOpeningsNumber: jobOpeningsNumber
+    jobOpeningsNumber: jobOpeningsNumber,
+    dropdownCollapsed: dropdownCollapsed
   }), withNewsLetter && /*#__PURE__*/_react.default.createElement(_Newsletter.default, null), /*#__PURE__*/_react.default.createElement(_Footer.default, _extends({
     color: color,
     lemonwayLogo: lemonWayLogo
@@ -39,7 +41,8 @@ FooterLayout.propTypes = {
   withFooterMenu: _propTypes.default.bool,
   color: _propTypes.default.oneOf(['primary', 'red']),
   jobOpeningsNumber: _propTypes.default.number,
-  lemonwayLogo: _propTypes.default.string
+  lemonwayLogo: _propTypes.default.string,
+  dropdownCollapsed: _propTypes.default.bool
 };
 var _default = FooterLayout;
 exports.default = _default;

package/dist/components/Footer/FooterLayout.stories.js

@@ -16,6 +16,9 @@ var _default = {
     //   options: ['primary', 'red'],
     //   control: { type: '' },
     // },
+    dropdownCollapsed: {
+      control: 'boolean'
+    }
   }
 };
 exports.default = _default;
@@ -24,9 +27,4 @@ var Template = function Template(args) {
 };
 var FooterLayoutfirst = Template.bind({});
 exports.FooterLayoutfirst = FooterLayoutfirst;
-FooterLayoutfirst.args = {};
-
-// export const FooterRed = Template.bind({})
-// FooterRed.args = {
-//   color: 'red',
-// }
+FooterLayoutfirst.args = {};

package/dist/components/Footer/FooterMenu.js

@@ -82,9 +82,10 @@ exports.socialSvg = socialSvg;
 var FooterMenu = function FooterMenu(_ref2) {
   var groups = _ref2.groups,
     _ref2$jobOpeningsNumb = _ref2.jobOpeningsNumber,
-    jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb;
+    jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb,
+    dropdownCollapsed = _ref2.dropdownCollapsed;
   var _React$useState = _react.default.useState(groups.map(function () {
-      return true;
+      return !dropdownCollapsed;
     })),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeGroups = _React$useState2[0],
@@ -127,11 +128,11 @@ var FooterMenu = function FooterMenu(_ref2) {
         target: item.external ? '_blank' : '',
         href: item.url,
         rel: "noopener noreferrer"
-      }, item.name), item.showNumber && jobOpeningsNumber > 0 && /*#__PURE__*/_react.default.createElement(_FooterMenu.HiringTotalNumber, {
+      }, item.name, item.showNumber && jobOpeningsNumber > 0 && /*#__PURE__*/_react.default.createElement(_FooterMenu.HiringTotalNumber, {
         style: {
           marginLeft: '4px'
         }
-      }, jobOpeningsNumber));
+      }, jobOpeningsNumber)));
     }))));
   })));
 };

package/dist/components/Footer/FooterMenu.stories.js

@@ -39,9 +39,9 @@ FooterMenu1.args = {
       name: '101s',
       url: 'https://stokr.info/101'
     },
-    /* {
-              name: 'Subscribe',
-              url: 'https://stokr.info/subscribe',
+    /* {
+              name: 'Subscribe',
+              url: 'https://stokr.info/subscribe',
             }, */
     {
       name: 'Support',

package/dist/components/Footer/FooterMenu.styles.js

@@ -50,7 +50,7 @@ exports.Item = Item;
 var Link = _styledComponents.default.a.withConfig({
   displayName: "FooterMenustyles__Link",
   componentId: "sc-40ddqf-6"
-})(["display:inline-block;font-family:'Open Sans';font-weight:bold;font-size:11px;line-height:2.18;letter-spacing:2.1px;text-transform:uppercase;color:", ";transition:color 0.2s;&:focus,&:hover{opacity:0.6;}"], _theme.default.cBlack);
+})(["display:inline-block;font-family:'Open Sans';font-weight:bold;font-size:11px;line-height:2.18;letter-spacing:2.1px;text-transform:uppercase;color:", ";transition:color 0.2s;width:100%;&:focus,&:hover{opacity:0.6;}"], _theme.default.cBlack);
 exports.Link = Link;
 var SocialLink = _styledComponents.default.a.withConfig({
   displayName: "FooterMenustyles__SocialLink",

package/dist/components/Header/Header.js

@@ -122,9 +122,9 @@ var RenderSubMenu = function RenderSubMenu(_ref2) {
     onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
     _ref2$platformURL = _ref2.platformURL,
     platformURL = _ref2$platformURL === void 0 ? '' : _ref2$platformURL;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, {
+  return /*#__PURE__*/_react.default.createElement(_Header.MobileMenuWrapper, {
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(_Header.StyledSubMenu, null, /*#__PURE__*/_react.default.createElement("a", null, title), /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
+  }, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_Header.StyledSubMenu, null, /*#__PURE__*/_react.default.createElement("a", null, title), /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
     displayAlways: true,
     isOpened: isActive,
     style: {
@@ -137,7 +137,7 @@ var RenderSubMenu = function RenderSubMenu(_ref2) {
     return /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, {
       key: item.name,
       red: true
-    }, /*#__PURE__*/_react.default.createElement("a", {
+    }, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuLink, {
       href: platformURL + item.link
     }, item.name));
   })));
@@ -320,7 +320,7 @@ var Header = function Header(_ref3) {
     withPadding: true
   }, /*#__PURE__*/_react.default.createElement(_MenuNav.default, {
     mobile: true
-  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuLink, {
     href: newPlatformUrl + '/featured-assets',
     "data-cy": "invest-nav-link"
   }, "Invest")), /*#__PURE__*/_react.default.createElement(RenderSubMenu, {
@@ -339,7 +339,7 @@ var Header = function Header(_ref3) {
     onClick: function onClick() {
       toggleMenu('media', true);
     }
-  }), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement("a", {
+  }), /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuLink, {
     href: newPlatformUrl + '/team'
   }, "Team")))))), user !== null && user !== void 0 && user._id || user !== null && user !== void 0 && user.uid ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !signupFlow && /*#__PURE__*/_react.default.createElement(_Header.MobileMenuPart, {
     withPadding: true,

package/dist/components/Header/Header.styles.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
+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;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
@@ -128,9 +128,19 @@ var MobileMenuItem = _styledComponents.default.li.withConfig({
   return props.red && "\n    background: #D2200D;\n    color:white;\n        border-bottom: 1px solid #979797;\n  ";
 });
 exports.MobileMenuItem = MobileMenuItem;
+var MobileMenuWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__MobileMenuWrapper",
+  componentId: "sc-hifrdy-14"
+})(["cursor:pointer;"]);
+exports.MobileMenuWrapper = MobileMenuWrapper;
+var MobileMenuLink = _styledComponents.default.a.withConfig({
+  displayName: "Headerstyles__MobileMenuLink",
+  componentId: "sc-hifrdy-15"
+})(["width:100%;"]);
+exports.MobileMenuLink = MobileMenuLink;
 var MobileMenuPart = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__MobileMenuPart",
-  componentId: "sc-hifrdy-14"
+  componentId: "sc-hifrdy-16"
 })(["", " ", " ", " ", " ", " ", ""], function (props) {
   return props.withPadding && "\n    padding: 30px 0;\n   \n\n    @media screen and (max-width: 320px) {\n      padding: 15px 0;\n    }\n  ";
 }, function (props) {
@@ -147,38 +157,38 @@ var MobileMenuPart = _styledComponents.default.div.withConfig({
 exports.MobileMenuPart = MobileMenuPart;
 var UserAccount = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__UserAccount",
-  componentId: "sc-hifrdy-15"
+  componentId: "sc-hifrdy-17"
 })(["z-index:1;position:relative;display:inline-block;vertical-align:middle;", ""], _rwd.default.MLarge(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin: -4px 0;\n    margin-left: 32px;\n  "]))));
 exports.UserAccount = UserAccount;
 var UserButton = _styledComponents.default.button.withConfig({
   displayName: "Headerstyles__UserButton",
-  componentId: "sc-hifrdy-16"
+  componentId: "sc-hifrdy-18"
 })(["display:inline-block;vertical-align:middle;width:48px;height:48px;border-radius:24px;overflow:hidden;background-color:", ";opacity:1;transition:opacity 0.2s;outline:none;cursor:pointer;box-shadow:none;border:none;background-color:buttonface;background-color:transparent;padding:0;"], _colors.default.grey2);
 exports.UserButton = UserButton;
 var UserAvatar = _styledComponents.default.img.withConfig({
   displayName: "Headerstyles__UserAvatar",
-  componentId: "sc-hifrdy-17"
+  componentId: "sc-hifrdy-19"
 })(["display:block;width:100%;height:100%;object-fit:cover;object-position:center center;"]);
 exports.UserAvatar = UserAvatar;
 var UserName = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__UserName",
-  componentId: "sc-hifrdy-18"
+  componentId: "sc-hifrdy-20"
 })(["z-index:0;position:relative;display:block;padding-top:36px;padding-bottom:20px;font-weight:600;font-size:16px;line-height:24px;background-color:", ";color:", ";margin-top:-24px;"], _colors.default.orangishRed, _colors.default.white);
 exports.UserName = UserName;
 var LoginButton = _styledComponents.default.span.withConfig({
   displayName: "Headerstyles__LoginButton",
-  componentId: "sc-hifrdy-19"
+  componentId: "sc-hifrdy-21"
 })(["cursor:pointer;margin-right:24px;display:none;&:hover{opacity:0.6;}@media screen and (min-width:992px){display:block;}"]);
 exports.LoginButton = LoginButton;
 var SignupButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "Headerstyles__SignupButton",
-  componentId: "sc-hifrdy-20"
+  componentId: "sc-hifrdy-22"
 })(["padding-right:32px !important;color:", " !important;&:hover{background:", ";}", ""], sc.WHITE_HEX, sc.BLUE_BASE_RELEASED_HEX, function (props) {
   return props.isMobile && "\n   margin: 0;\n  width: 163.94px;\n  ";
 });
 exports.SignupButton = SignupButton;
 var CTAContainer = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__CTAContainer",
-  componentId: "sc-hifrdy-21"
+  componentId: "sc-hifrdy-23"
 })(["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);
 exports.CTAContainer = CTAContainer;

package/dist/components/TabsNav/TabNav.js

@@ -7,7 +7,7 @@ exports.default = exports.TabNav = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TabsNav = require("./TabsNav.styles");
-var _excluded = ["children", "isActive", "onClick"];
+var _excluded = ["children", "isActive", "onClick", "customStyles"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -16,10 +16,12 @@ var TabNav = function TabNav(_ref) {
   var children = _ref.children,
     isActive = _ref.isActive,
     onClick = _ref.onClick,
+    customStyles = _ref.customStyles,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTab, _extends({
     onClick: onClick,
-    isActive: isActive
+    isActive: isActive,
+    customStyles: customStyles
   }, props), /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
 };
 exports.TabNav = TabNav;

package/dist/components/TabsNav/TabsNav.styles.js

@@ -37,9 +37,11 @@ exports.LinkText = LinkText;
 var StyledTab = _styledComponents.default.button.withConfig({
   displayName: "TabsNavstyles__StyledTab",
   componentId: "sc-opeopg-4"
-})(["display:inline-block;position:relative;cursor:pointer;outline:none;visibility:visible;padding:12px;color:", ";transition:opacity 0.2s;", " ", " &:focus,&:hover{opacity:0.6;}", ""], function (props) {
+})(["display:inline-block;position:relative;cursor:pointer;outline:none;visibility:visible;padding:12px;color:", ";transition:opacity 0.2s;", " ", " &:focus,&:hover{opacity:0.6;}", " ", ""], function (props) {
   return _theme.default.cBlack;
 }, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 24px;\n  "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 32px 40px;\n  "]))), function (props) {
   return props.isActive && "\n    &:focus ,\n    &:hover {\n      opacity: 1;\n    }\n\n    ".concat(LinkText, " {\n      font-weight: bold;\n\n      &:before {\n        background-color: ").concat(_theme.default.cPrimary, "!important;\n      }\n    }\n  ");
+}, function (props) {
+  return props.customStyles;
 });
 exports.StyledTab = StyledTab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.23",
+  "version": "2.3.25",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -83,18 +83,19 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addon-viewport": "^7.4.0",
-    "@storybook/preset-create-react-app": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-viewport": "^8.6.7",
+    "@storybook/preset-create-react-app": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
+    "@storybook/test": "^8.6.7",
     "babel-plugin-styled-components": "^2.1.4",
     "prettier": "^3.0.3",
-    "storybook": "^7.4.0",
+    "storybook": "^8.6.7",
     "styled-components.macro": "^1.0.0"
   },
   "eslintConfig": {