@citygross/components 0.7.182 → 0.7.183
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/build/@types/components/MenuListItem/MenuListItem.d.ts +1 -0
- package/build/@types/components/MenuListItem/MenuListItem.styles.d.ts +1 -0
- package/build/cjs/components/src/components/MenuListItem/MenuListItem.js +3 -3
- package/build/cjs/components/src/components/MenuListItem/MenuListItem.styles.js +8 -2
- package/build/cjs/components/src/components/MenuListItem/MenuListItem.styles.js.map +1 -1
- package/build/es/components/src/components/MenuListItem/MenuListItem.js +3 -3
- package/build/es/components/src/components/MenuListItem/MenuListItem.styles.js +8 -2
- package/build/es/components/src/components/MenuListItem/MenuListItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -4,6 +4,7 @@ declare type TTextAndWrapperStyling = {
|
|
|
4
4
|
backgroundColor?: string;
|
|
5
5
|
nested?: boolean;
|
|
6
6
|
hoverBackground?: string;
|
|
7
|
+
iconWidth?: number;
|
|
7
8
|
};
|
|
8
9
|
export declare const MenuListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
10
|
export declare const MainCategoryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TTextAndWrapperStyling, never>;
|
|
@@ -14,11 +14,11 @@ 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, hoverBackground = _a.hoverBackground, 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, iconWidth = _a.iconWidth, 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, hoverBackground: hoverBackground },
|
|
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, iconWidth: iconWidth },
|
|
20
20
|
React__default["default"].createElement(MenuListItem_styles.BodyText, { isOpen: isOpen }, dropdownHeader),
|
|
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 }))) },
|
|
21
|
+
isOpen ? (React__default["default"].createElement(Icon.Icons.Minus, { width: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_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))));
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -11,8 +11,14 @@ 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
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
|
-
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
|
-
|
|
14
|
+
var NestedWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n padding: ", ";\n display: flex;\n flex-direction: column;\n ", "\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); }, function (props) {
|
|
15
|
+
return props.iconWidth &&
|
|
16
|
+
"* {\n min-width: ".concat(props.iconWidth, ";\n }");
|
|
17
|
+
});
|
|
18
|
+
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"], ["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n ", "\n"])), function (props) { return props.paddingLeft; }, function (props) {
|
|
19
|
+
return props.iconWidth &&
|
|
20
|
+
"* {\n min-width: ".concat(props.iconWidth, ";\n }");
|
|
21
|
+
});
|
|
16
22
|
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
23
|
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
24
|
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) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,11 +6,11 @@ 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, hoverBackground = _a.hoverBackground, 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, iconWidth = _a.iconWidth, 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, hoverBackground: hoverBackground },
|
|
11
|
+
React.createElement(Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React.createElement(HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen, hoverBackground: hoverBackground, iconWidth: iconWidth },
|
|
12
12
|
React.createElement(BodyText, { isOpen: isOpen }, dropdownHeader),
|
|
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 }))) },
|
|
13
|
+
isOpen ? (React.createElement(Icons.Minus, { width: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: iconWidth !== null && iconWidth !== void 0 ? iconWidth : (_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))));
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -3,8 +3,14 @@ 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
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
|
-
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
|
-
|
|
6
|
+
var NestedWrapper = styled(MainCategoryWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n display: flex;\n flex-direction: column;\n ", "\n"], ["\n padding: ", ";\n display: flex;\n flex-direction: column;\n ", "\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); }, function (props) {
|
|
7
|
+
return props.iconWidth &&
|
|
8
|
+
"* {\n min-width: ".concat(props.iconWidth, ";\n }");
|
|
9
|
+
});
|
|
10
|
+
var HeaderWrapper = styled(MainCategoryWrapper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n ", "\n"], ["\n padding-left: ", "px;\n &:hover {\n text-decoration: underline;\n }\n ", "\n"])), function (props) { return props.paddingLeft; }, function (props) {
|
|
11
|
+
return props.iconWidth &&
|
|
12
|
+
"* {\n min-width: ".concat(props.iconWidth, ";\n }");
|
|
13
|
+
});
|
|
8
14
|
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
15
|
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
16
|
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) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuListItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.183",
|
|
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": "
|
|
74
|
+
"gitHead": "4f18b0ed8fd887ef9799ffb2c431dd25398736af"
|
|
75
75
|
}
|