@citygross/components 0.8.95 → 0.8.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/Nav/Nav.styles.d.ts +2 -2
- package/build/cjs/components/src/components/Button/Button.js +1 -1
- package/build/cjs/components/src/components/Button/IconButton.js +1 -1
- package/build/cjs/components/src/components/Button/NavButton.js +1 -1
- package/build/cjs/components/src/components/Button/PaginationButton.js +1 -1
- package/build/cjs/components/src/components/Button/SaveButton.js +1 -1
- package/build/cjs/components/src/components/Nav/Nav.styles.js +30 -11
- package/build/cjs/components/src/components/Nav/Nav.styles.js.map +1 -1
- package/build/es/components/src/components/Button/Button.js +1 -1
- package/build/es/components/src/components/Button/IconButton.js +1 -1
- package/build/es/components/src/components/Button/NavButton.js +1 -1
- package/build/es/components/src/components/Button/PaginationButton.js +1 -1
- package/build/es/components/src/components/Button/SaveButton.js +1 -1
- package/build/es/components/src/components/Nav/Nav.styles.js +30 -11
- package/build/es/components/src/components/Nav/Nav.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
declare type TNav = {
|
|
2
2
|
background?: string;
|
|
3
|
-
topPosition?: number;
|
|
4
3
|
height?: number;
|
|
4
|
+
topPosition?: number;
|
|
5
5
|
};
|
|
6
6
|
declare type TNavContainer = {
|
|
7
7
|
maxWidth?: number;
|
|
8
8
|
};
|
|
9
9
|
declare type TNavSearchOverlay = {
|
|
10
|
-
show?: boolean;
|
|
11
10
|
overlayTopPosition?: number;
|
|
11
|
+
show?: boolean;
|
|
12
12
|
};
|
|
13
13
|
declare type TSearchIsOpen = {
|
|
14
14
|
isOpen?: boolean;
|
|
@@ -35,7 +35,7 @@ function Button(_a) {
|
|
|
35
35
|
? selected
|
|
36
36
|
? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
37
37
|
: designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
|
|
38
|
-
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
38
|
+
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
39
39
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
40
40
|
React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
|
|
41
41
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
13
|
|
|
14
14
|
function IconButton(_a) {
|
|
15
15
|
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, opacity = _a.opacity, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex", "opacity"]);
|
|
16
|
-
return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
|
|
16
|
+
return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
|
|
17
17
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
18
18
|
React__default["default"].createElement(Button_styles.LoadingContainer, null,
|
|
19
19
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
13
|
|
|
14
14
|
function NavButton(_a) {
|
|
15
15
|
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, id = _a.id, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth", "id"]);
|
|
16
|
-
return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, id: id || 'nav-button' }, props),
|
|
16
|
+
return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, disabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, id: id || 'nav-button' }, props),
|
|
17
17
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
18
18
|
React__default["default"].createElement(Button_styles.LoadingContainer, null,
|
|
19
19
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
12
12
|
|
|
13
13
|
function PaginationButton(_a) {
|
|
14
14
|
var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
|
|
15
|
-
return (React__default["default"].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
|
|
15
|
+
return (React__default["default"].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
|
|
16
16
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
17
17
|
React__default["default"].createElement(Button_styles.LoadingContainer, null,
|
|
18
18
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -22,7 +22,7 @@ function SaveButton(_a) {
|
|
|
22
22
|
}, (_a = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.animations) === null || _a === void 0 ? void 0 : _a.saveButtonAnimationComplete);
|
|
23
23
|
}
|
|
24
24
|
}, [saved]);
|
|
25
|
-
return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { color: saved ? onSavedColor : color, isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
|
|
25
|
+
return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { color: saved ? onSavedColor : color, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
|
|
26
26
|
loading && (React__default["default"].createElement(Button_styles.Loading, null,
|
|
27
27
|
React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
|
|
28
28
|
React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _tslib = require('../../../../_virtual/_tslib.js');
|
|
6
|
+
var designTokens = require('@citygross/design-tokens');
|
|
6
7
|
var framerMotion = require('framer-motion');
|
|
7
8
|
var styled = require('styled-components');
|
|
8
9
|
|
|
@@ -10,18 +11,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
11
|
|
|
11
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
13
|
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
15
|
+
var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", "px;\n"], ["\n background: ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", "px;\n"])), function (_a) {
|
|
16
|
+
var _b;
|
|
17
|
+
var background = _a.background;
|
|
18
|
+
return background !== null && background !== void 0 ? background : (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
19
|
+
}, function (_a) {
|
|
20
|
+
var _b;
|
|
21
|
+
var height = _a.height;
|
|
22
|
+
return height !== null && height !== void 0 ? height : (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall;
|
|
23
|
+
});
|
|
24
|
+
var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n padding: ", "px;\n width: 100%;\n\n @media (min-width: ", "px) {\n padding: ", "px ", "px;\n }\n"], ["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n padding: ", "px;\n width: 100%;\n\n @media (min-width: ", "px) {\n padding: ", "px ", "px;\n }\n"])), function (_a) {
|
|
25
|
+
var maxWidth = _a.maxWidth;
|
|
26
|
+
return maxWidth;
|
|
27
|
+
}, (_a = designTokens.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint, (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm);
|
|
28
|
+
var NavChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1;\n z-index: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1;\n z-index: ", ";\n"])), (_e = designTokens.theme.attributes) === null || _e === void 0 ? void 0 : _e.zIndex.middle);
|
|
29
|
+
var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: none;\n\n @media (min-width: ", "px) {\n display: flex;\n align-items: center;\n gap: ", "px;\n margin-left: ", "px;\n width: auto;\n height: 100%;\n }\n"], ["\n display: none;\n\n @media (min-width: ", "px) {\n display: flex;\n align-items: center;\n gap: ", "px;\n margin-left: ", "px;\n width: auto;\n height: 100%;\n }\n"])), (_f = designTokens.theme.constants) === null || _f === void 0 ? void 0 : _f.headerBreakpoint, (_g = designTokens.theme.spacings) === null || _g === void 0 ? void 0 : _g.sm, (_h = designTokens.theme.spacings) === null || _h === void 0 ? void 0 : _h.sm);
|
|
30
|
+
var SearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n flex: 1;\n margin-left: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex: 1;\n margin-left: ", "px;\n"])), function (_a) {
|
|
31
|
+
var _b;
|
|
32
|
+
var isOpen = _a.isOpen;
|
|
33
|
+
return (isOpen ? 0 : (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm);
|
|
34
|
+
});
|
|
18
35
|
styled__default["default"](SearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19
|
-
var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n
|
|
20
|
-
var
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
36
|
+
var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n background: ", ";\n display: none;\n opacity: 0.5;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: ", "px;\n width: 100vw;\n height: 100%;\n z-index: ", ";\n\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"], ["\n background: ", ";\n display: none;\n opacity: 0.5;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: ", "px;\n width: 100vw;\n height: 100%;\n z-index: ", ";\n\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"])), (_j = designTokens.theme.palette) === null || _j === void 0 ? void 0 : _j.darkest, (_k = designTokens.theme.constants) === null || _k === void 0 ? void 0 : _k.navHeaderHeightSmall, (_l = designTokens.theme.attributes) === null || _l === void 0 ? void 0 : _l.zIndex.low, (_m = designTokens.theme.constants) === null || _m === void 0 ? void 0 : _m.headerBreakpoint, function (_a) {
|
|
37
|
+
var show = _a.show;
|
|
38
|
+
return (show ? 'block' : 'none');
|
|
39
|
+
}, function (_a) {
|
|
40
|
+
var _b;
|
|
41
|
+
var overlayTopPosition = _a.overlayTopPosition;
|
|
42
|
+
var baseTop = ((_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall) || 0;
|
|
43
|
+
return "".concat(overlayTopPosition ? overlayTopPosition + baseTop : baseTop, "px");
|
|
25
44
|
});
|
|
26
45
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
27
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -27,7 +27,7 @@ function Button(_a) {
|
|
|
27
27
|
? selected
|
|
28
28
|
? (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.white
|
|
29
29
|
: theme === null || theme === void 0 ? void 0 : theme.palette[color]
|
|
30
|
-
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
30
|
+
: 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); }, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow },
|
|
31
31
|
loading && (React.createElement(Loading, null,
|
|
32
32
|
React.createElement(LoadingContainer, { xsSize: xsSize, size: size },
|
|
33
33
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -5,7 +5,7 @@ import { BaseIconButton, Loading, LoadingContainer, LoadingSpinner, ButtonBadge
|
|
|
5
5
|
|
|
6
6
|
function IconButton(_a) {
|
|
7
7
|
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, opacity = _a.opacity, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex", "opacity"]);
|
|
8
|
-
return (React.createElement(BaseIconButton, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
|
|
8
|
+
return (React.createElement(BaseIconButton, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
|
|
9
9
|
loading && (React.createElement(Loading, null,
|
|
10
10
|
React.createElement(LoadingContainer, null,
|
|
11
11
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -5,7 +5,7 @@ import { theme } from '@citygross/design-tokens';
|
|
|
5
5
|
|
|
6
6
|
function NavButton(_a) {
|
|
7
7
|
var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, id = _a.id, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth", "id"]);
|
|
8
|
-
return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, id: id || 'nav-button' }, props),
|
|
8
|
+
return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, disabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, id: id || 'nav-button' }, props),
|
|
9
9
|
loading && (React.createElement(Loading, null,
|
|
10
10
|
React.createElement(LoadingContainer, null,
|
|
11
11
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -4,7 +4,7 @@ import { BasePaginationButton, Loading, LoadingContainer, LoadingSpinner } from
|
|
|
4
4
|
|
|
5
5
|
function PaginationButton(_a) {
|
|
6
6
|
var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
|
|
7
|
-
return (React.createElement(BasePaginationButton, { color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
|
|
7
|
+
return (React.createElement(BasePaginationButton, { color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : 'white', height: height, icon: icon, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
|
|
8
8
|
loading && (React.createElement(Loading, null,
|
|
9
9
|
React.createElement(LoadingContainer, null,
|
|
10
10
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -14,7 +14,7 @@ function SaveButton(_a) {
|
|
|
14
14
|
}, (_a = theme === null || theme === void 0 ? void 0 : theme.animations) === null || _a === void 0 ? void 0 : _a.saveButtonAnimationComplete);
|
|
15
15
|
}
|
|
16
16
|
}, [saved]);
|
|
17
|
-
return (React.createElement(BasePrimaryButton, { color: saved ? onSavedColor : color, isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
|
|
17
|
+
return (React.createElement(BasePrimaryButton, { color: saved ? onSavedColor : color, disabled: loading || isDisabled, isDisabled: loading || isDisabled, loading: loading || null, size: size, fullWidth: fullWidth, icon: icon, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); } },
|
|
18
18
|
loading && (React.createElement(Loading, null,
|
|
19
19
|
React.createElement(LoadingContainer, { xsSize: xsSize, size: size },
|
|
20
20
|
React.createElement(LoadingSpinner, null)))),
|
|
@@ -1,19 +1,38 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
|
+
import { theme } from '@citygross/design-tokens';
|
|
2
3
|
import { motion } from 'framer-motion';
|
|
3
4
|
import styled from 'styled-components';
|
|
4
5
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
7
|
+
var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", "px;\n"], ["\n background: ", ";\n display: flex;\n align-items: center;\n width: 100%;\n height: ", "px;\n"])), function (_a) {
|
|
8
|
+
var _b;
|
|
9
|
+
var background = _a.background;
|
|
10
|
+
return background !== null && background !== void 0 ? background : (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
11
|
+
}, function (_a) {
|
|
12
|
+
var _b;
|
|
13
|
+
var height = _a.height;
|
|
14
|
+
return height !== null && height !== void 0 ? height : (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall;
|
|
15
|
+
});
|
|
16
|
+
var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n padding: ", "px;\n width: 100%;\n\n @media (min-width: ", "px) {\n padding: ", "px ", "px;\n }\n"], ["\n display: flex;\n margin: 0 auto;\n max-width: ", "px;\n padding: ", "px;\n width: 100%;\n\n @media (min-width: ", "px) {\n padding: ", "px ", "px;\n }\n"])), function (_a) {
|
|
17
|
+
var maxWidth = _a.maxWidth;
|
|
18
|
+
return maxWidth;
|
|
19
|
+
}, (_a = theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint, (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm);
|
|
20
|
+
var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1;\n z-index: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex: 1;\n z-index: ", ";\n"])), (_e = theme.attributes) === null || _e === void 0 ? void 0 : _e.zIndex.middle);
|
|
21
|
+
var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: ", "px) {\n display: flex;\n align-items: center;\n gap: ", "px;\n margin-left: ", "px;\n width: auto;\n height: 100%;\n }\n"], ["\n display: none;\n\n @media (min-width: ", "px) {\n display: flex;\n align-items: center;\n gap: ", "px;\n margin-left: ", "px;\n width: auto;\n height: 100%;\n }\n"])), (_f = theme.constants) === null || _f === void 0 ? void 0 : _f.headerBreakpoint, (_g = theme.spacings) === null || _g === void 0 ? void 0 : _g.sm, (_h = theme.spacings) === null || _h === void 0 ? void 0 : _h.sm);
|
|
22
|
+
var SearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex: 1;\n margin-left: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex: 1;\n margin-left: ", "px;\n"])), function (_a) {
|
|
23
|
+
var _b;
|
|
24
|
+
var isOpen = _a.isOpen;
|
|
25
|
+
return (isOpen ? 0 : (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm);
|
|
26
|
+
});
|
|
10
27
|
styled(SearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
11
|
-
var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n
|
|
12
|
-
var
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
28
|
+
var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", ";\n display: none;\n opacity: 0.5;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: ", "px;\n width: 100vw;\n height: 100%;\n z-index: ", ";\n\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"], ["\n background: ", ";\n display: none;\n opacity: 0.5;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: ", "px;\n width: 100vw;\n height: 100%;\n z-index: ", ";\n\n @media (min-width: ", "px) {\n display: ", ";\n top: ", ";\n }\n"])), (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.darkest, (_k = theme.constants) === null || _k === void 0 ? void 0 : _k.navHeaderHeightSmall, (_l = theme.attributes) === null || _l === void 0 ? void 0 : _l.zIndex.low, (_m = theme.constants) === null || _m === void 0 ? void 0 : _m.headerBreakpoint, function (_a) {
|
|
29
|
+
var show = _a.show;
|
|
30
|
+
return (show ? 'block' : 'none');
|
|
31
|
+
}, function (_a) {
|
|
32
|
+
var _b;
|
|
33
|
+
var overlayTopPosition = _a.overlayTopPosition;
|
|
34
|
+
var baseTop = ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall) || 0;
|
|
35
|
+
return "".concat(overlayTopPosition ? overlayTopPosition + baseTop : baseTop, "px");
|
|
17
36
|
});
|
|
18
37
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
19
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.97",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"react-slick": "^0.30.1",
|
|
77
77
|
"slick-carousel": "^1.8.1"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "4644ac1270bec4117344df0e2c7e88d1bbf3b65d"
|
|
80
80
|
}
|