@citygross/components 0.7.38 → 0.7.39
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/Header/Header.styles.d.ts +0 -6
- package/build/@types/components/LayoutBox/LayoutBox.d.ts +1 -0
- package/build/@types/components/LayoutBox/LayoutBox.styles.d.ts +1 -0
- package/build/@types/components/ListItem/ListItem.stories.d.ts +1 -0
- package/build/cjs/components/src/components/Header/Header.js +2 -17
- package/build/cjs/components/src/components/Header/Header.js.map +1 -1
- package/build/cjs/components/src/components/Header/Header.styles.js +2 -6
- package/build/cjs/components/src/components/Header/Header.styles.js.map +1 -1
- package/build/cjs/components/src/components/IconToolTip/IconToolTip.styles.js +1 -1
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.js +2 -2
- package/build/cjs/components/src/components/LayoutBox/LayoutBox.styles.js +2 -2
- package/build/cjs/components/src/components/Menu/Menu.styles.js +1 -1
- package/build/es/components/src/components/Header/Header.js +4 -19
- package/build/es/components/src/components/Header/Header.js.map +1 -1
- package/build/es/components/src/components/Header/Header.styles.js +3 -5
- package/build/es/components/src/components/Header/Header.styles.js.map +1 -1
- package/build/es/components/src/components/IconToolTip/IconToolTip.styles.js +1 -1
- package/build/es/components/src/components/LayoutBox/LayoutBox.js +2 -2
- package/build/es/components/src/components/LayoutBox/LayoutBox.styles.js +2 -2
- package/build/es/components/src/components/Menu/Menu.styles.js +1 -1
- package/package.json +2 -2
|
@@ -5,9 +5,3 @@ export declare type THeaderContainer = {
|
|
|
5
5
|
export declare const HeaderWrapper: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
6
6
|
export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, THeaderContainer, never>;
|
|
7
7
|
export declare const MenuContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
-
export declare const Relative: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
-
interface FadeProps {
|
|
10
|
-
readonly isVisible?: boolean;
|
|
11
|
-
}
|
|
12
|
-
export declare const Fade: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FadeProps, never>;
|
|
13
|
-
export {};
|
|
@@ -3,6 +3,7 @@ declare type TLayoutBoxContainer = {
|
|
|
3
3
|
rounded?: boolean;
|
|
4
4
|
borderRadius?: number;
|
|
5
5
|
shadowInset?: boolean;
|
|
6
|
+
showOverflow?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export declare const LayoutBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TLayoutBoxContainer, never>;
|
|
8
9
|
export {};
|
|
@@ -18,29 +18,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
18
18
|
function Header(_a) {
|
|
19
19
|
var _b, _c;
|
|
20
20
|
var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
|
|
21
|
-
var _f = React.useState(true), showFade = _f[0], setShowFade = _f[1];
|
|
22
21
|
var device = utils.useDetectDevice();
|
|
23
|
-
var onScroll = function (e) {
|
|
24
|
-
var _a, _b;
|
|
25
|
-
if (e.scrollWidth - e.scrollLeft >=
|
|
26
|
-
e.clientWidth + ((_b = (_a = designTokens.theme.constants) === null || _a === void 0 ? void 0 : _a.headerScrollFadeRange) !== null && _b !== void 0 ? _b : 0)) {
|
|
27
|
-
setShowFade(true);
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
setShowFade(false);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
22
|
return (React__default['default'].createElement(Header_styles.Wrapper, null,
|
|
34
23
|
topLinkLabel && topLinkHref && (React__default['default'].createElement(HeaderLink.HeaderLink, { linkHref: topLinkHref, icon: React__default['default'].createElement(Icon.Icons.ChevronLeft, { width: 20, height: 20, color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
|
|
35
24
|
React__default['default'].createElement(Header_styles.HeaderWrapper, null,
|
|
36
25
|
React__default['default'].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
|
|
37
26
|
React__default['default'].createElement(Logo.Logo, { logoImage: logoImage }),
|
|
38
|
-
logOut && (React__default['default'].createElement(Button.Button, { onClick: function () { return logOut && logOut(); } }, logOutLabel)))),
|
|
39
|
-
children &&
|
|
40
|
-
React__default['default'].createElement(Header_styles.MenuContainer, { onScroll: function (e) {
|
|
41
|
-
onScroll(e.currentTarget);
|
|
42
|
-
} }, children),
|
|
43
|
-
device.isMobile && React__default['default'].createElement(Header_styles.Fade, { isVisible: showFade })))));
|
|
27
|
+
logOut && (React__default['default'].createElement(Button.Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel)))),
|
|
28
|
+
children && React__default['default'].createElement(Header_styles.MenuContainer, null, children)));
|
|
44
29
|
}
|
|
45
30
|
|
|
46
31
|
exports.Header = Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -12,15 +12,11 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
12
12
|
var Wrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
|
|
13
13
|
var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\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.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 (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
14
14
|
var HeaderContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"])), function (props) { return props.maxWidth; });
|
|
15
|
-
var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: relative;\n width:
|
|
16
|
-
var
|
|
17
|
-
var Fade = styled__default['default'].div(templateObject_6 || (templateObject_6 = _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 500ms;\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 500ms;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
|
|
18
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
15
|
+
var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: relative;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"], ["\n position: relative;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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 (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
|
|
16
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
19
17
|
|
|
20
|
-
exports.Fade = Fade;
|
|
21
18
|
exports.HeaderContainer = HeaderContainer;
|
|
22
19
|
exports.HeaderWrapper = HeaderWrapper;
|
|
23
20
|
exports.MenuContainer = MenuContainer;
|
|
24
|
-
exports.Relative = Relative;
|
|
25
21
|
exports.Wrapper = Wrapper;
|
|
26
22
|
//# sourceMappingURL=Header.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,7 +11,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
11
11
|
|
|
12
12
|
var IconToolTipContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"], ["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"])));
|
|
13
13
|
var ArrowUp = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
|
|
14
|
-
var ToolTipBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
14
|
+
var ToolTipBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n z-index: 99;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
15
15
|
return props.right
|
|
16
16
|
? "right: " + props.right + "px"
|
|
17
17
|
: props.left
|
|
@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
|
|
12
12
|
var LayoutBox = function (_a) {
|
|
13
|
-
var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
|
|
14
|
-
return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
|
|
13
|
+
var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
|
|
14
|
+
return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
exports.LayoutBox = LayoutBox;
|
|
@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow:
|
|
12
|
+
var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow: ", ";\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"], ["\n background: ", ";\n box-shadow: ", ";\n overflow: ", ";\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"])), function (props) { return props.background; }, function (props) {
|
|
13
13
|
var _a, _b, _c, _d;
|
|
14
14
|
return props.shadowInset
|
|
15
15
|
? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
|
|
16
16
|
: (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
|
|
17
|
-
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
17
|
+
}, function (props) { return (props.showOverflow ? 'visible' : 'hidden'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
18
18
|
var templateObject_1;
|
|
19
19
|
|
|
20
20
|
exports.LayoutBoxContainer = LayoutBoxContainer;
|
|
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n
|
|
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 gap: ", "px;\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 gap: ", "px;\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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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
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\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\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) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, 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) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, 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 (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
14
14
|
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
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,38 +1,23 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { useDetectDevice } from '@citygross/utils';
|
|
3
3
|
import { theme } from '@citygross/design-tokens';
|
|
4
4
|
import { Icons } from '@citygross/icons';
|
|
5
5
|
import { Button } from '../Button/Button.js';
|
|
6
6
|
import { Logo } from '../Logo/Logo.js';
|
|
7
|
-
import { Wrapper, HeaderWrapper, HeaderContainer,
|
|
7
|
+
import { Wrapper, HeaderWrapper, HeaderContainer, MenuContainer } from './Header.styles.js';
|
|
8
8
|
import { HeaderLink } from '../HeaderLink/HeaderLink.js';
|
|
9
9
|
|
|
10
10
|
function Header(_a) {
|
|
11
11
|
var _b, _c;
|
|
12
12
|
var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
|
|
13
|
-
var _f = useState(true), showFade = _f[0], setShowFade = _f[1];
|
|
14
13
|
var device = useDetectDevice();
|
|
15
|
-
var onScroll = function (e) {
|
|
16
|
-
var _a, _b;
|
|
17
|
-
if (e.scrollWidth - e.scrollLeft >=
|
|
18
|
-
e.clientWidth + ((_b = (_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerScrollFadeRange) !== null && _b !== void 0 ? _b : 0)) {
|
|
19
|
-
setShowFade(true);
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
setShowFade(false);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
14
|
return (React.createElement(Wrapper, null,
|
|
26
15
|
topLinkLabel && topLinkHref && (React.createElement(HeaderLink, { linkHref: topLinkHref, icon: React.createElement(Icons.ChevronLeft, { width: 20, height: 20, color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
|
|
27
16
|
React.createElement(HeaderWrapper, null,
|
|
28
17
|
React.createElement(HeaderContainer, { maxWidth: lowerContainerMaxWidth },
|
|
29
18
|
React.createElement(Logo, { logoImage: logoImage }),
|
|
30
|
-
logOut && (React.createElement(Button, { onClick: function () { return logOut && logOut(); } }, logOutLabel)))),
|
|
31
|
-
children &&
|
|
32
|
-
React.createElement(MenuContainer, { onScroll: function (e) {
|
|
33
|
-
onScroll(e.currentTarget);
|
|
34
|
-
} }, children),
|
|
35
|
-
device.isMobile && React.createElement(Fade, { isVisible: showFade })))));
|
|
19
|
+
logOut && (React.createElement(Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel)))),
|
|
20
|
+
children && React.createElement(MenuContainer, null, children)));
|
|
36
21
|
}
|
|
37
22
|
|
|
38
23
|
export { Header };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,10 +4,8 @@ import styled from 'styled-components';
|
|
|
4
4
|
var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n position: relative;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
|
|
5
5
|
var HeaderWrapper = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\n }\n"], ["\n background: ", ";\n padding: ", "px;\n\n @media (min-width: ", "px) {\n padding: ", "px\n ", "px;\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.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 (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
6
6
|
var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: ", "px;\n margin-left: auto;\n margin-right: auto;\n"])), function (props) { return props.maxWidth; });
|
|
7
|
-
var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n width:
|
|
8
|
-
var
|
|
9
|
-
var Fade = styled.div(templateObject_6 || (templateObject_6 = __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 500ms;\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 500ms;\n opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
|
|
10
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
7
|
+
var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"], ["\n position: relative;\n max-width: ", "px;\n padding-left: ", "px;\n margin-left: auto;\n margin-right: auto;\n\n @media (min-width: ", "px) {\n padding-left: ", "px;\n }\n @media (min-width: ", "px) {\n padding-left: 0;\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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 (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
|
|
8
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
11
9
|
|
|
12
|
-
export {
|
|
10
|
+
export { HeaderContainer, HeaderWrapper, MenuContainer, Wrapper };
|
|
13
11
|
//# sourceMappingURL=Header.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
|
@@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|
|
3
3
|
|
|
4
4
|
var IconToolTipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"], ["\n display: inline-flex;\n cursor: pointer;\n position: relative;\n"])));
|
|
5
5
|
var ArrowUp = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"], ["\n position: absolute;\n top: ", "px;\n width: 0;\n left: ", "px;\n height: 0;\n border-left: ", "px solid\n transparent;\n border-right: ", "px solid\n transparent;\n border-bottom: ", "px solid\n ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
|
|
6
|
-
var ToolTipBox = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
6
|
+
var ToolTipBox = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n z-index: 99;\n"], ["\n position: absolute;\n top: ", "px;\n ", ";\n width: ", "px;\n background-color: ", ";\n border-radius: ", "px;\n padding: ", "px;\n z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
|
|
7
7
|
return props.right
|
|
8
8
|
? "right: " + props.right + "px"
|
|
9
9
|
: props.left
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { LayoutBoxContainer } from './LayoutBox.styles.js';
|
|
3
3
|
|
|
4
4
|
var LayoutBox = function (_a) {
|
|
5
|
-
var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
|
|
6
|
-
return (React.createElement(LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
|
|
5
|
+
var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
|
|
6
|
+
return (React.createElement(LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export { LayoutBox };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow:
|
|
4
|
+
var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n box-shadow: ", ";\n overflow: ", ";\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"], ["\n background: ", ";\n box-shadow: ", ";\n overflow: ", ";\n @media (min-width: ", "px) {\n border-radius: ", "px;\n }\n"])), function (props) { return props.background; }, function (props) {
|
|
5
5
|
var _a, _b, _c, _d;
|
|
6
6
|
return props.shadowInset
|
|
7
7
|
? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
|
|
8
8
|
: (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
|
|
9
|
-
}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
9
|
+
}, function (props) { return (props.showOverflow ? 'visible' : 'hidden'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
|
|
10
10
|
var templateObject_1;
|
|
11
11
|
|
|
12
12
|
export { LayoutBoxContainer };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n
|
|
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 gap: ", "px;\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 gap: ", "px;\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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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
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\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\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) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, 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) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, 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 (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
6
6
|
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
7
|
var templateObject_1, templateObject_2, templateObject_3;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.39",
|
|
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": "33bdc32d15bcacaaa914dd3a0c1befd5c90de964"
|
|
75
75
|
}
|