@citygross/components 0.7.38 → 0.7.42
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/DeliverySlotItem/DeliverySlotItem.d.ts +4 -3
- package/build/@types/components/DeliverySlotItem/DeliverySlotItem.styles.d.ts +0 -2
- 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/DeliverySlotItem/DeliverySlotItem.js +6 -11
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +1 -5
- package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +1 -1
- 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/DeliverySlotItem/DeliverySlotItem.js +8 -13
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js +2 -4
- package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.styles.js.map +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 +4 -4
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export declare type TDeliverySlotItem = {
|
|
2
3
|
date: string;
|
|
3
4
|
selected: boolean;
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
children: React.ReactNode;
|
|
6
7
|
onSelect: () => void;
|
|
7
8
|
};
|
|
8
|
-
export declare function DeliverySlotItem({ date,
|
|
9
|
+
export declare function DeliverySlotItem({ date, selected, disabled, children, onSelect }: TDeliverySlotItem): JSX.Element;
|
|
@@ -8,6 +8,4 @@ export declare const DeliverySlotHeaderContainer: import("styled-components").St
|
|
|
8
8
|
export declare const DeliverySlotHeaderText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
9
9
|
export declare const DeliverySlotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
10
10
|
export declare const DeliverySlotBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;
|
|
11
|
-
export declare const DisabledLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
-
export declare const DotContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
11
|
export {};
|
|
@@ -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 {};
|
|
@@ -7,23 +7,21 @@ var designTokens = require('@citygross/design-tokens');
|
|
|
7
7
|
var utils = require('@citygross/utils');
|
|
8
8
|
var typography = require('@citygross/typography');
|
|
9
9
|
var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
|
|
10
|
-
var DotIndicator = require('../DotIndicator/DotIndicator.js');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
14
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
14
|
|
|
16
15
|
function DeliverySlotItem(_a) {
|
|
17
|
-
var _b
|
|
18
|
-
var date = _a.date,
|
|
16
|
+
var _b;
|
|
17
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
19
18
|
var momentDate = utils.moment(date);
|
|
20
19
|
var width = utils.useWindowSize().width;
|
|
21
|
-
var
|
|
20
|
+
var _c = React.useState(momentDate
|
|
22
21
|
.format(width < (((_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
23
|
-
.toLocaleLowerCase()), weekDay =
|
|
22
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
24
23
|
var dayNumber = momentDate.format('D');
|
|
25
24
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
26
|
-
var disabled = disabledLabel !== undefined;
|
|
27
25
|
React.useEffect(function () {
|
|
28
26
|
var _a;
|
|
29
27
|
setWeekDay(momentDate
|
|
@@ -31,7 +29,7 @@ function DeliverySlotItem(_a) {
|
|
|
31
29
|
.toLocaleLowerCase());
|
|
32
30
|
}, [width]);
|
|
33
31
|
var slotRef = React.useRef(null);
|
|
34
|
-
var
|
|
32
|
+
var _d = React.useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
35
33
|
var callbackFn = function (entries) {
|
|
36
34
|
var entry = entries[0];
|
|
37
35
|
// gets zoom level
|
|
@@ -83,10 +81,7 @@ function DeliverySlotItem(_a) {
|
|
|
83
81
|
React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
|
|
84
82
|
React__default['default'].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
85
83
|
React__default['default'].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
|
|
86
|
-
|
|
87
|
-
React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
88
|
-
!disabledLabel && showWarningIndicator && (React__default['default'].createElement(DeliverySlotItem_styles.DotContainer, null,
|
|
89
|
-
React__default['default'].createElement(DotIndicator.Dot, { color: (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
84
|
+
children)));
|
|
90
85
|
}
|
|
91
86
|
|
|
92
87
|
exports.DeliverySlotItem = DeliverySlotItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -29,15 +29,11 @@ var DeliverySlotContainer = styled__default['default'].div(templateObject_4 || (
|
|
|
29
29
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
30
30
|
});
|
|
31
31
|
var DeliverySlotBody = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
32
|
-
var
|
|
33
|
-
var DotContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
34
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
32
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
35
33
|
|
|
36
34
|
exports.DeliverySlotBody = DeliverySlotBody;
|
|
37
35
|
exports.DeliverySlotContainer = DeliverySlotContainer;
|
|
38
36
|
exports.DeliverySlotHeaderContainer = DeliverySlotHeaderContainer;
|
|
39
37
|
exports.DeliverySlotHeaderText = DeliverySlotHeaderText;
|
|
40
38
|
exports.DeliverySlotItemContainer = DeliverySlotItemContainer;
|
|
41
|
-
exports.DisabledLabel = DisabledLabel;
|
|
42
|
-
exports.DotContainer = DotContainer;
|
|
43
39
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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,21 +1,19 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
2
|
import { theme } from '@citygross/design-tokens';
|
|
3
3
|
import { moment, useWindowSize, capitalizeFirstLetter } from '@citygross/utils';
|
|
4
|
-
import { BodyText, H2
|
|
5
|
-
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody
|
|
6
|
-
import { Dot } from '../DotIndicator/DotIndicator.js';
|
|
4
|
+
import { BodyText, H2 } from '@citygross/typography';
|
|
5
|
+
import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody } from './DeliverySlotItem.styles.js';
|
|
7
6
|
|
|
8
7
|
function DeliverySlotItem(_a) {
|
|
9
|
-
var _b
|
|
10
|
-
var date = _a.date,
|
|
8
|
+
var _b;
|
|
9
|
+
var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
|
|
11
10
|
var momentDate = moment(date);
|
|
12
11
|
var width = useWindowSize().width;
|
|
13
|
-
var
|
|
12
|
+
var _c = useState(momentDate
|
|
14
13
|
.format(width < (((_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
|
|
15
|
-
.toLocaleLowerCase()), weekDay =
|
|
14
|
+
.toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
|
|
16
15
|
var dayNumber = momentDate.format('D');
|
|
17
16
|
var month = momentDate.format('MMM').toLocaleLowerCase();
|
|
18
|
-
var disabled = disabledLabel !== undefined;
|
|
19
17
|
useEffect(function () {
|
|
20
18
|
var _a;
|
|
21
19
|
setWeekDay(momentDate
|
|
@@ -23,7 +21,7 @@ function DeliverySlotItem(_a) {
|
|
|
23
21
|
.toLocaleLowerCase());
|
|
24
22
|
}, [width]);
|
|
25
23
|
var slotRef = useRef(null);
|
|
26
|
-
var
|
|
24
|
+
var _d = useState(true), isVisible = _d[0], setIsVisible = _d[1];
|
|
27
25
|
var callbackFn = function (entries) {
|
|
28
26
|
var entry = entries[0];
|
|
29
27
|
// gets zoom level
|
|
@@ -75,10 +73,7 @@ function DeliverySlotItem(_a) {
|
|
|
75
73
|
React.createElement(DeliverySlotBody, { disabled: disabled },
|
|
76
74
|
React.createElement(H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
|
|
77
75
|
React.createElement(BodyText, { color: 'darker' }, capitalizeFirstLetter(month))),
|
|
78
|
-
|
|
79
|
-
React.createElement(BodyText, { size: TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
|
|
80
|
-
!disabledLabel && showWarningIndicator && (React.createElement(DotContainer, null,
|
|
81
|
-
React.createElement(Dot, { color: (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
|
|
76
|
+
children)));
|
|
82
77
|
}
|
|
83
78
|
|
|
84
79
|
export { DeliverySlotItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -21,9 +21,7 @@ var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = _
|
|
|
21
21
|
: (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
|
|
22
22
|
});
|
|
23
23
|
var DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
|
|
24
|
-
var
|
|
25
|
-
var DotContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"], ["\n justify-content: center;\n display: flex;\n padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
|
|
26
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
27
25
|
|
|
28
|
-
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer
|
|
26
|
+
export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer };
|
|
29
27
|
//# sourceMappingURL=DeliverySlotItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeliverySlotItem.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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.42",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@citygross/design-tokens": "^0.2.15",
|
|
66
|
-
"@citygross/icons": "^0.1.
|
|
67
|
-
"@citygross/react-use-bg-wizard": "^0.0.
|
|
66
|
+
"@citygross/icons": "^0.1.2",
|
|
67
|
+
"@citygross/react-use-bg-wizard": "^0.0.8",
|
|
68
68
|
"@citygross/typography": "^0.0.42",
|
|
69
69
|
"@citygross/utils": "^0.0.19",
|
|
70
70
|
"framer-motion": "^4.1.17",
|
|
71
71
|
"moment": "^2.29.1",
|
|
72
72
|
"react-loading-skeleton": "^2.2.0"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "c798a4e09ec67571f1d42c3fb6aaec4c9c2b8198"
|
|
75
75
|
}
|