@citygross/components 0.7.115 → 0.7.116

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.
@@ -5,6 +5,7 @@ export declare type TMenuListItem = {
5
5
  dropdownHeader: string;
6
6
  paddingLeft?: number;
7
7
  backgroundColor?: string;
8
+ hoverBackground?: string;
8
9
  children: React.ReactNode;
9
10
  };
10
11
  export declare const MenuListItem: React.FunctionComponent<TMenuListItem>;
@@ -3,6 +3,7 @@ declare type TTextAndWrapperStyling = {
3
3
  paddingLeft?: number;
4
4
  backgroundColor?: string;
5
5
  nested?: boolean;
6
+ hoverBackground?: string;
6
7
  };
7
8
  export declare const MenuListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
9
  export declare const MainCategoryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TTextAndWrapperStyling, never>;
@@ -14,9 +14,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  var MenuListItem = function (_a) {
16
16
  var _b, _c, _d, _e;
17
- var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, backgroundColor = _a.backgroundColor, children = _a.children;
17
+ var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, hoverBackground = _a.hoverBackground, backgroundColor = _a.backgroundColor, children = _a.children;
18
18
  return (React__default["default"].createElement(MenuListItem_styles.MenuListItemWrapper, null,
19
- React__default["default"].createElement(Dropdown.Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React__default["default"].createElement(MenuListItem_styles.HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen },
19
+ React__default["default"].createElement(Dropdown.Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React__default["default"].createElement(MenuListItem_styles.HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen, hoverBackground: hoverBackground },
20
20
  React__default["default"].createElement(MenuListItem_styles.BodyText, { isOpen: isOpen }, dropdownHeader),
21
21
  isOpen ? (React__default["default"].createElement(Icon.Icons.Minus, { width: (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: (_c = designTokens.theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React__default["default"].createElement(Icon.Icons.Plus, { width: (_d = designTokens.theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, height: (_e = designTokens.theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))) },
22
22
  React__default["default"].createElement(MenuListItem_styles.NestedWrapper, { nested: true, paddingLeft: paddingLeft }, children))));
@@ -10,9 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
12
  var MenuListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
13
- var MainCategoryWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
13
+ var MainCategoryWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n &:hover {\n ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n &:hover {\n ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { return props.hoverBackground && "background:".concat(props.hoverBackground); });
14
14
  var NestedWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n"], ["\n padding: ", ";\n display: flex;\n flex-direction: column;\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); });
15
- var HeaderWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n padding-left: ", "px;\n"], ["\n padding-left: ", "px;\n"])), function (props) { return props.paddingLeft; });
15
+ var HeaderWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n"], ["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n"])), function (props) { return props.paddingLeft; });
16
16
  styled__default["default"](MainCategoryWrapper)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n padding-left: ", "px;\n align-self: flex-start;\n"], ["\n padding-left: ", "px;\n align-self: flex-start;\n"])), function (props) { return props.paddingLeft; });
17
17
  var HeaderText = styled__default["default"].h2(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n"], ["\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m2; });
18
18
  var BodyText = styled__default["default"].p(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: flex;\n gap: ", "px;\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n color: ", ";\n"], ["\n display: flex;\n gap: ", "px;\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
@@ -18,16 +18,12 @@ var SearchBar = function (_a) {
18
18
  var width = utils.useWindowSize().width;
19
19
  var theme = styled.useTheme();
20
20
  React.useEffect(function () {
21
- var _a, _b, _c, _d;
21
+ var _a, _b;
22
22
  if (theme && theme.constants) {
23
23
  if ((searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) &&
24
24
  width < ((_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint)) {
25
25
  (_b = searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) === null || _b === void 0 ? void 0 : _b.focus();
26
26
  }
27
- else if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) &&
28
- width >= ((_c = theme === null || theme === void 0 ? void 0 : theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)) {
29
- (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
30
- }
31
27
  }
32
28
  }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
33
29
  var resultVariants = {
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -35,7 +35,7 @@ var SideModal = function (_a) {
35
35
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
36
36
  type: 'just'
37
37
  } })),
38
- React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide' }, children)), document.querySelector(querySelector) || document.body)
38
+ React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide', initial: 'hide' }, children)), document.querySelector(querySelector) || document.body)
39
39
  : null;
40
40
  };
41
41
 
@@ -6,9 +6,9 @@ import { MenuListItemWrapper, HeaderWrapper, BodyText, NestedWrapper } from './M
6
6
 
7
7
  var MenuListItem = function (_a) {
8
8
  var _b, _c, _d, _e;
9
- var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, backgroundColor = _a.backgroundColor, children = _a.children;
9
+ var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, hoverBackground = _a.hoverBackground, backgroundColor = _a.backgroundColor, children = _a.children;
10
10
  return (React.createElement(MenuListItemWrapper, null,
11
- React.createElement(Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React.createElement(HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen },
11
+ React.createElement(Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React.createElement(HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen, hoverBackground: hoverBackground },
12
12
  React.createElement(BodyText, { isOpen: isOpen }, dropdownHeader),
13
13
  isOpen ? (React.createElement(Icons.Minus, { width: (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: (_c = theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React.createElement(Icons.Plus, { width: (_d = theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, height: (_e = theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))) },
14
14
  React.createElement(NestedWrapper, { nested: true, paddingLeft: paddingLeft }, children))));
@@ -2,9 +2,9 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
4
  var MenuListItemWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
5
- var MainCategoryWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
5
+ var MainCategoryWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n &:hover {\n ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding: ", "px;\n cursor: pointer;\n background-color: ", ";\n min-height: ", "px;\n align-items: center;\n &:hover {\n ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { return props.hoverBackground && "background:".concat(props.hoverBackground); });
6
6
  var NestedWrapper = styled(MainCategoryWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n"], ["\n padding: ", ";\n display: flex;\n flex-direction: column;\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); });
7
- var HeaderWrapper = styled(MainCategoryWrapper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-left: ", "px;\n"], ["\n padding-left: ", "px;\n"])), function (props) { return props.paddingLeft; });
7
+ var HeaderWrapper = styled(MainCategoryWrapper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n"], ["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n"])), function (props) { return props.paddingLeft; });
8
8
  styled(MainCategoryWrapper)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding-left: ", "px;\n align-self: flex-start;\n"], ["\n padding-left: ", "px;\n align-self: flex-start;\n"])), function (props) { return props.paddingLeft; });
9
9
  var HeaderText = styled.h2(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n"], ["\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m2; });
10
10
  var BodyText = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n gap: ", "px;\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n color: ", ";\n"], ["\n display: flex;\n gap: ", "px;\n font-size: ", "px;\n font-weight: ", ";\n line-height: ", "px;\n color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
@@ -10,16 +10,12 @@ var SearchBar = function (_a) {
10
10
  var width = useWindowSize().width;
11
11
  var theme = useTheme();
12
12
  useEffect(function () {
13
- var _a, _b, _c, _d;
13
+ var _a, _b;
14
14
  if (theme && theme.constants) {
15
15
  if ((searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) &&
16
16
  width < ((_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint)) {
17
17
  (_b = searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current) === null || _b === void 0 ? void 0 : _b.focus();
18
18
  }
19
- else if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) &&
20
- width >= ((_c = theme === null || theme === void 0 ? void 0 : theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)) {
21
- (_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
22
- }
23
19
  }
24
20
  }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
25
21
  var resultVariants = {
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -27,7 +27,7 @@ var SideModal = function (_a) {
27
27
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
28
28
  type: 'just'
29
29
  } })),
30
- React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide' }, children)), document.querySelector(querySelector) || document.body)
30
+ React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide', initial: 'hide' }, children)), document.querySelector(querySelector) || document.body)
31
31
  : null;
32
32
  };
33
33
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.115",
3
+ "version": "0.7.116",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "410b15c9ebb2e7874d723f81e412f43f97d45db6"
74
+ "gitHead": "6604ca045e2d893adcceb574e24b5e769fa78717"
75
75
  }