@stokr/components-library 2.3.23 → 2.3.24
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.
- package/dist/components/Footer/FooterLayout.js +6 -3
- package/dist/components/Footer/FooterLayout.stories.js +4 -2
- package/dist/components/Footer/FooterMenu.js +3 -2
- package/dist/components/Footer/FooterMenu.styles.js +1 -1
- package/dist/components/Header/Header.js +4 -4
- package/dist/components/Header/Header.styles.js +19 -9
- package/dist/components/TabsNav/TabNav.js +4 -2
- package/dist/components/TabsNav/TabsNav.styles.js +3 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
|
|
|
10
10
|
var _Newsletter = _interopRequireDefault(require("../Newsletter/Newsletter"));
|
|
11
11
|
var _Footer = _interopRequireDefault(require("./Footer"));
|
|
12
12
|
var _globalVariables = require("../../constants/globalVariables");
|
|
13
|
-
var _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo"];
|
|
13
|
+
var _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
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); }
|
|
16
16
|
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) {
|
|
|
25
25
|
_ref$jobOpeningsNumbe = _ref.jobOpeningsNumber,
|
|
26
26
|
jobOpeningsNumber = _ref$jobOpeningsNumbe === void 0 ? 0 : _ref$jobOpeningsNumbe,
|
|
27
27
|
lemonWayLogo = _ref.lemonWayLogo,
|
|
28
|
+
dropdownCollapsed = _ref.dropdownCollapsed,
|
|
28
29
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
29
30
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withFooterMenu && /*#__PURE__*/_react.default.createElement(_FooterMenu.default, {
|
|
30
31
|
groups: footerGroups,
|
|
31
|
-
jobOpeningsNumber: jobOpeningsNumber
|
|
32
|
+
jobOpeningsNumber: jobOpeningsNumber,
|
|
33
|
+
dropdownCollapsed: dropdownCollapsed
|
|
32
34
|
}), withNewsLetter && /*#__PURE__*/_react.default.createElement(_Newsletter.default, null), /*#__PURE__*/_react.default.createElement(_Footer.default, _extends({
|
|
33
35
|
color: color,
|
|
34
36
|
lemonwayLogo: lemonWayLogo
|
|
@@ -39,7 +41,8 @@ FooterLayout.propTypes = {
|
|
|
39
41
|
withFooterMenu: _propTypes.default.bool,
|
|
40
42
|
color: _propTypes.default.oneOf(['primary', 'red']),
|
|
41
43
|
jobOpeningsNumber: _propTypes.default.number,
|
|
42
|
-
lemonwayLogo: _propTypes.default.string
|
|
44
|
+
lemonwayLogo: _propTypes.default.string,
|
|
45
|
+
dropdownCollapsed: _propTypes.default.bool
|
|
43
46
|
};
|
|
44
47
|
var _default = FooterLayout;
|
|
45
48
|
exports.default = _default;
|
|
@@ -16,6 +16,9 @@ var _default = {
|
|
|
16
16
|
// options: ['primary', 'red'],
|
|
17
17
|
// control: { type: '' },
|
|
18
18
|
// },
|
|
19
|
+
dropdownCollapsed: {
|
|
20
|
+
control: 'boolean'
|
|
21
|
+
}
|
|
19
22
|
}
|
|
20
23
|
};
|
|
21
24
|
exports.default = _default;
|
|
@@ -28,5 +31,4 @@ FooterLayoutfirst.args = {};
|
|
|
28
31
|
|
|
29
32
|
// export const FooterRed = Template.bind({})
|
|
30
33
|
// FooterRed.args = {
|
|
31
|
-
// color: 'red',
|
|
32
|
-
// }
|
|
34
|
+
// color: 'red',
|
|
@@ -82,9 +82,10 @@ exports.socialSvg = socialSvg;
|
|
|
82
82
|
var FooterMenu = function FooterMenu(_ref2) {
|
|
83
83
|
var groups = _ref2.groups,
|
|
84
84
|
_ref2$jobOpeningsNumb = _ref2.jobOpeningsNumber,
|
|
85
|
-
jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb
|
|
85
|
+
jobOpeningsNumber = _ref2$jobOpeningsNumb === void 0 ? 0 : _ref2$jobOpeningsNumb,
|
|
86
|
+
dropdownCollapsed = _ref2.dropdownCollapsed;
|
|
86
87
|
var _React$useState = _react.default.useState(groups.map(function () {
|
|
87
|
-
return
|
|
88
|
+
return !dropdownCollapsed;
|
|
88
89
|
})),
|
|
89
90
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
90
91
|
activeGroups = _React$useState2[0],
|
|
@@ -50,7 +50,7 @@ exports.Item = Item;
|
|
|
50
50
|
var Link = _styledComponents.default.a.withConfig({
|
|
51
51
|
displayName: "FooterMenustyles__Link",
|
|
52
52
|
componentId: "sc-40ddqf-6"
|
|
53
|
-
})(["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
|
|
53
|
+
})(["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);
|
|
54
54
|
exports.Link = Link;
|
|
55
55
|
var SocialLink = _styledComponents.default.a.withConfig({
|
|
56
56
|
displayName: "FooterMenustyles__SocialLink",
|
|
@@ -122,9 +122,9 @@ var RenderSubMenu = function RenderSubMenu(_ref2) {
|
|
|
122
122
|
onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
|
|
123
123
|
_ref2$platformURL = _ref2.platformURL,
|
|
124
124
|
platformURL = _ref2$platformURL === void 0 ? '' : _ref2$platformURL;
|
|
125
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_Header.MobileMenuWrapper, {
|
|
126
126
|
onClick: onClick
|
|
127
|
-
}, /*#__PURE__*/_react.default.createElement(_Header.StyledSubMenu, null, /*#__PURE__*/_react.default.createElement("a", null, title), /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
|
|
127
|
+
}, /*#__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, {
|
|
128
128
|
displayAlways: true,
|
|
129
129
|
isOpened: isActive,
|
|
130
130
|
style: {
|
|
@@ -137,7 +137,7 @@ var RenderSubMenu = function RenderSubMenu(_ref2) {
|
|
|
137
137
|
return /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, {
|
|
138
138
|
key: item.name,
|
|
139
139
|
red: true
|
|
140
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuLink, {
|
|
141
141
|
href: platformURL + item.link
|
|
142
142
|
}, item.name));
|
|
143
143
|
})));
|
|
@@ -320,7 +320,7 @@ var Header = function Header(_ref3) {
|
|
|
320
320
|
withPadding: true
|
|
321
321
|
}, /*#__PURE__*/_react.default.createElement(_MenuNav.default, {
|
|
322
322
|
mobile: true
|
|
323
|
-
}, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(
|
|
323
|
+
}, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuItem, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuLink, {
|
|
324
324
|
href: newPlatformUrl + '/featured-assets',
|
|
325
325
|
"data-cy": "invest-nav-link"
|
|
326
326
|
}, "Invest")), /*#__PURE__*/_react.default.createElement(RenderSubMenu, {
|
|
@@ -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.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;
|
|
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;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
|
|
10
10
|
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
@@ -128,9 +128,19 @@ var MobileMenuItem = _styledComponents.default.li.withConfig({
|
|
|
128
128
|
return props.red && "\n background: #D2200D;\n color:white;\n border-bottom: 1px solid #979797;\n ";
|
|
129
129
|
});
|
|
130
130
|
exports.MobileMenuItem = MobileMenuItem;
|
|
131
|
+
var MobileMenuWrapper = _styledComponents.default.div.withConfig({
|
|
132
|
+
displayName: "Headerstyles__MobileMenuWrapper",
|
|
133
|
+
componentId: "sc-hifrdy-14"
|
|
134
|
+
})(["cursor:pointer;"]);
|
|
135
|
+
exports.MobileMenuWrapper = MobileMenuWrapper;
|
|
136
|
+
var MobileMenuLink = _styledComponents.default.a.withConfig({
|
|
137
|
+
displayName: "Headerstyles__MobileMenuLink",
|
|
138
|
+
componentId: "sc-hifrdy-15"
|
|
139
|
+
})(["width:100%;"]);
|
|
140
|
+
exports.MobileMenuLink = MobileMenuLink;
|
|
131
141
|
var MobileMenuPart = _styledComponents.default.div.withConfig({
|
|
132
142
|
displayName: "Headerstyles__MobileMenuPart",
|
|
133
|
-
componentId: "sc-hifrdy-
|
|
143
|
+
componentId: "sc-hifrdy-16"
|
|
134
144
|
})(["", " ", " ", " ", " ", " ", ""], function (props) {
|
|
135
145
|
return props.withPadding && "\n padding: 30px 0;\n \n\n @media screen and (max-width: 320px) {\n padding: 15px 0;\n }\n ";
|
|
136
146
|
}, function (props) {
|
|
@@ -147,38 +157,38 @@ var MobileMenuPart = _styledComponents.default.div.withConfig({
|
|
|
147
157
|
exports.MobileMenuPart = MobileMenuPart;
|
|
148
158
|
var UserAccount = _styledComponents.default.div.withConfig({
|
|
149
159
|
displayName: "Headerstyles__UserAccount",
|
|
150
|
-
componentId: "sc-hifrdy-
|
|
160
|
+
componentId: "sc-hifrdy-17"
|
|
151
161
|
})(["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 "]))));
|
|
152
162
|
exports.UserAccount = UserAccount;
|
|
153
163
|
var UserButton = _styledComponents.default.button.withConfig({
|
|
154
164
|
displayName: "Headerstyles__UserButton",
|
|
155
|
-
componentId: "sc-hifrdy-
|
|
165
|
+
componentId: "sc-hifrdy-18"
|
|
156
166
|
})(["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);
|
|
157
167
|
exports.UserButton = UserButton;
|
|
158
168
|
var UserAvatar = _styledComponents.default.img.withConfig({
|
|
159
169
|
displayName: "Headerstyles__UserAvatar",
|
|
160
|
-
componentId: "sc-hifrdy-
|
|
170
|
+
componentId: "sc-hifrdy-19"
|
|
161
171
|
})(["display:block;width:100%;height:100%;object-fit:cover;object-position:center center;"]);
|
|
162
172
|
exports.UserAvatar = UserAvatar;
|
|
163
173
|
var UserName = _styledComponents.default.div.withConfig({
|
|
164
174
|
displayName: "Headerstyles__UserName",
|
|
165
|
-
componentId: "sc-hifrdy-
|
|
175
|
+
componentId: "sc-hifrdy-20"
|
|
166
176
|
})(["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);
|
|
167
177
|
exports.UserName = UserName;
|
|
168
178
|
var LoginButton = _styledComponents.default.span.withConfig({
|
|
169
179
|
displayName: "Headerstyles__LoginButton",
|
|
170
|
-
componentId: "sc-hifrdy-
|
|
180
|
+
componentId: "sc-hifrdy-21"
|
|
171
181
|
})(["cursor:pointer;margin-right:24px;display:none;&:hover{opacity:0.6;}@media screen and (min-width:992px){display:block;}"]);
|
|
172
182
|
exports.LoginButton = LoginButton;
|
|
173
183
|
var SignupButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
|
174
184
|
displayName: "Headerstyles__SignupButton",
|
|
175
|
-
componentId: "sc-hifrdy-
|
|
185
|
+
componentId: "sc-hifrdy-22"
|
|
176
186
|
})(["padding-right:32px !important;color:", " !important;&:hover{background:", ";}", ""], sc.WHITE_HEX, sc.BLUE_BASE_RELEASED_HEX, function (props) {
|
|
177
187
|
return props.isMobile && "\n margin: 0;\n width: 163.94px;\n ";
|
|
178
188
|
});
|
|
179
189
|
exports.SignupButton = SignupButton;
|
|
180
190
|
var CTAContainer = _styledComponents.default.div.withConfig({
|
|
181
191
|
displayName: "Headerstyles__CTAContainer",
|
|
182
|
-
componentId: "sc-hifrdy-
|
|
192
|
+
componentId: "sc-hifrdy-23"
|
|
183
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);
|
|
184
194
|
exports.CTAContainer = CTAContainer;
|
|
@@ -7,7 +7,7 @@ exports.default = exports.TabNav = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _TabsNav = require("./TabsNav.styles");
|
|
10
|
-
var _excluded = ["children", "isActive", "onClick"];
|
|
10
|
+
var _excluded = ["children", "isActive", "onClick", "customStyles"];
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
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); }
|
|
13
13
|
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) {
|
|
|
16
16
|
var children = _ref.children,
|
|
17
17
|
isActive = _ref.isActive,
|
|
18
18
|
onClick = _ref.onClick,
|
|
19
|
+
customStyles = _ref.customStyles,
|
|
19
20
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
21
|
return /*#__PURE__*/_react.default.createElement(_TabsNav.StyledTab, _extends({
|
|
21
22
|
onClick: onClick,
|
|
22
|
-
isActive: isActive
|
|
23
|
+
isActive: isActive,
|
|
24
|
+
customStyles: customStyles
|
|
23
25
|
}, props), /*#__PURE__*/_react.default.createElement(_TabsNav.LinkText, null, children));
|
|
24
26
|
};
|
|
25
27
|
exports.TabNav = TabNav;
|
|
@@ -37,9 +37,11 @@ exports.LinkText = LinkText;
|
|
|
37
37
|
var StyledTab = _styledComponents.default.button.withConfig({
|
|
38
38
|
displayName: "TabsNavstyles__StyledTab",
|
|
39
39
|
componentId: "sc-opeopg-4"
|
|
40
|
-
})(["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) {
|
|
40
|
+
})(["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) {
|
|
41
41
|
return _theme.default.cBlack;
|
|
42
42
|
}, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 24px;\n "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 32px 40px;\n "]))), function (props) {
|
|
43
43
|
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 ");
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.customStyles;
|
|
44
46
|
});
|
|
45
47
|
exports.StyledTab = StyledTab;
|