@citygross/components 0.7.96 → 0.7.97
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/Menu/Menu.stories.d.ts +1 -0
- package/build/@types/components/Menu/Menu.styles.d.ts +4 -0
- package/build/@types/components/Menu/MenuItem.d.ts +5 -1
- package/build/cjs/components/src/components/Menu/Menu.styles.js +13 -1
- package/build/cjs/components/src/components/Menu/Menu.styles.js.map +1 -1
- package/build/cjs/components/src/components/Menu/MenuItem.js +2 -2
- package/build/es/components/src/components/Menu/Menu.styles.js +13 -1
- package/build/es/components/src/components/Menu/Menu.styles.js.map +1 -1
- package/build/es/components/src/components/Menu/MenuItem.js +2 -2
- package/package.json +2 -2
|
@@ -3,6 +3,10 @@ export declare type TMenuItem = {
|
|
|
3
3
|
active?: boolean;
|
|
4
4
|
isFirstChild?: boolean;
|
|
5
5
|
isLastChild?: boolean;
|
|
6
|
+
borderColor?: string;
|
|
7
|
+
fontWeight?: string;
|
|
8
|
+
minWidth?: number;
|
|
9
|
+
textAlign?: string;
|
|
6
10
|
};
|
|
7
11
|
export declare type FadeProps = {
|
|
8
12
|
readonly isVisible?: boolean;
|
|
@@ -4,5 +4,9 @@ export declare type TMenuItem = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
4
4
|
active?: boolean;
|
|
5
5
|
isFirstChild?: boolean;
|
|
6
6
|
isLastChild?: boolean;
|
|
7
|
+
borderColor?: string;
|
|
8
|
+
fontWeight?: string;
|
|
9
|
+
minWidth?: number;
|
|
10
|
+
textAlign?: string;
|
|
7
11
|
};
|
|
8
|
-
export declare function MenuItem({ active, isFirstChild, isLastChild, children, ...props }: TMenuItem): JSX.Element;
|
|
12
|
+
export declare function MenuItem({ active, isFirstChild, isLastChild, borderColor, fontWeight, minWidth, textAlign, children, ...props }: TMenuItem): JSX.Element;
|
|
@@ -10,7 +10,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var MenuContainer = styled__default["default"].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
13
|
-
var MenuItem = styled__default["default"].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) {
|
|
13
|
+
var MenuItem = styled__default["default"].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { return props.minWidth && props.minWidth; }, function (props) { return props.textAlign && props.textAlign; }, function (props) {
|
|
14
|
+
var _a;
|
|
15
|
+
return props.fontWeight
|
|
16
|
+
? props.fontWeight
|
|
17
|
+
: (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold;
|
|
18
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
19
|
+
var _a;
|
|
20
|
+
return props.active
|
|
21
|
+
? props.borderColor
|
|
22
|
+
? "".concat(props.borderColor)
|
|
23
|
+
: "".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary)
|
|
24
|
+
: 'transparent';
|
|
25
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.borderColor ? props.borderColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
14
26
|
var Fade = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
15
27
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
|
|
13
13
|
function MenuItem(_a) {
|
|
14
|
-
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, children = _a.children, props = _tslib.__rest(_a, ["active", "isFirstChild", "isLastChild", "children"]);
|
|
15
|
-
return (React__default["default"].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
|
|
14
|
+
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, borderColor = _a.borderColor, fontWeight = _a.fontWeight, minWidth = _a.minWidth, textAlign = _a.textAlign, children = _a.children, props = _tslib.__rest(_a, ["active", "isFirstChild", "isLastChild", "borderColor", "fontWeight", "minWidth", "textAlign", "children"]);
|
|
15
|
+
return (React__default["default"].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active, borderColor: borderColor, fontWeight: fontWeight, minWidth: minWidth, textAlign: textAlign }), children));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
exports.MenuItem = MenuItem;
|
|
@@ -2,7 +2,19 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
4
|
var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"], ["\n position: relative;\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n\n ::-webkit-scrollbar {\n background: ", ";\n height: 2px;\n }\n\n ::-webkit-scrollbar-thumb {\n border-radius: ", "px;\n background-color: ", ";\n }\n /* for mozilla */\n scrollbar-width: thin;\n scrollbar-color: ", ";\n\n @media (min-width: ", "px) {\n /* for mozila scroll bar */\n width: calc(100% - 40px);\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
5
|
-
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) {
|
|
5
|
+
var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"], ["\n min-width: ", "px;\n text-align: ", ";\n flex: 0 0 auto;\n font-weight: ", ";\n padding: ", "px 0;\n display: block;\n border-bottom: ", "px solid;\n border-bottom-color: ", ";\n cursor: pointer;\n font-size: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n &:last-child {\n position: relative;\n &::after {\n position: absolute;\n content: '';\n right: -", "px;\n width: ", "px;\n height: 100%;\n }\n }\n @media (min-width: ", "px) {\n &:hover {\n border-bottom-color: ", ";\n }\n }\n"])), function (props) { return props.minWidth && props.minWidth; }, function (props) { return props.textAlign && props.textAlign; }, function (props) {
|
|
6
|
+
var _a;
|
|
7
|
+
return props.fontWeight
|
|
8
|
+
? props.fontWeight
|
|
9
|
+
: (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold;
|
|
10
|
+
}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
|
|
11
|
+
var _a;
|
|
12
|
+
return props.active
|
|
13
|
+
? props.borderColor
|
|
14
|
+
? "".concat(props.borderColor)
|
|
15
|
+
: "".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary)
|
|
16
|
+
: 'transparent';
|
|
17
|
+
}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.borderColor ? props.borderColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
6
18
|
var Fade = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"], ["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 80%,\n rgba(255, 255, 255, 1)\n );\n transition: all 0.5s;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
|
|
7
19
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menu.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,8 +3,8 @@ import React from 'react';
|
|
|
3
3
|
import { MenuItem as MenuItem$1 } from './Menu.styles.js';
|
|
4
4
|
|
|
5
5
|
function MenuItem(_a) {
|
|
6
|
-
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, children = _a.children, props = __rest(_a, ["active", "isFirstChild", "isLastChild", "children"]);
|
|
7
|
-
return (React.createElement(MenuItem$1, __assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
|
|
6
|
+
var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, borderColor = _a.borderColor, fontWeight = _a.fontWeight, minWidth = _a.minWidth, textAlign = _a.textAlign, children = _a.children, props = __rest(_a, ["active", "isFirstChild", "isLastChild", "borderColor", "fontWeight", "minWidth", "textAlign", "children"]);
|
|
7
|
+
return (React.createElement(MenuItem$1, __assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active, borderColor: borderColor, fontWeight: fontWeight, minWidth: minWidth, textAlign: textAlign }), children));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export { MenuItem };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.97",
|
|
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": "5d3438e2c9972e0318a6db8266f7691ec650df6b"
|
|
75
75
|
}
|