@citygross/components 0.7.142 → 0.7.143

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.
Files changed (16) hide show
  1. package/build/@types/components/Nav/Nav.d.ts +2 -1
  2. package/build/@types/components/Nav/Nav.stories.d.ts +1 -1
  3. package/build/@types/components/SearchBar/SearchBar.d.ts +2 -1
  4. package/build/@types/components/SearchBar/SearchBar.stories.d.ts +1 -1
  5. package/build/@types/components/SearchBar/SearchBar.styles.d.ts +1 -0
  6. package/build/cjs/components/src/components/Nav/Nav.js +2 -2
  7. package/build/cjs/components/src/components/Nav/Nav.styles.js +7 -1
  8. package/build/cjs/components/src/components/Nav/Nav.styles.js.map +1 -1
  9. package/build/cjs/components/src/components/SearchBar/SearchBar.js +2 -2
  10. package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +1 -1
  11. package/build/es/components/src/components/Nav/Nav.js +2 -2
  12. package/build/es/components/src/components/Nav/Nav.styles.js +7 -1
  13. package/build/es/components/src/components/Nav/Nav.styles.js.map +1 -1
  14. package/build/es/components/src/components/SearchBar/SearchBar.js +2 -2
  15. package/build/es/components/src/components/SearchBar/SearchBar.styles.js +1 -1
  16. package/package.json +4 -4
package/build/@types/components/Nav/Nav.d.ts CHANGED
@@ -17,5 +17,6 @@ export declare type TNav = {
17
17
  closeSearch?: () => void;
18
18
  searchIsOpen?: boolean;
19
19
  overlayTopPosition?: number;
20
+ mobileTopPosition?: number;
20
21
  };
21
- export declare const Nav: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
22
+ export declare const Nav: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, mobileTopPosition, searchIsOpen }: TNav) => JSX.Element;
package/build/@types/components/Nav/Nav.stories.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Story } from '@storybook/react';
3
3
  import { TNav } from './Nav';
4
4
  declare const _default: {
5
- component: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
5
+ component: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, mobileTopPosition, searchIsOpen }: TNav) => JSX.Element;
6
6
  title: string;
7
7
  argTypes: {
8
8
  onScroll: {
package/build/@types/components/SearchBar/SearchBar.d.ts CHANGED
@@ -9,5 +9,6 @@ export declare type TSearchBar = styles.SearchInputProps & {
9
9
  isOpen?: boolean;
10
10
  searchOnSubmit?: () => void;
11
11
  children?: React.ReactNode;
12
+ mobileTopPosition?: number;
12
13
  };
13
- export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, ...props }: TSearchBar) => JSX.Element;
14
+ export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, mobileTopPosition, ...props }: TSearchBar) => JSX.Element;
package/build/@types/components/SearchBar/SearchBar.stories.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { Story } from '@storybook/react';
3
3
  declare const _default: {
4
- component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
4
+ component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, searchOnSubmit, searchInputMobileRef, mobileTopPosition, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
5
5
  title: string;
6
6
  args: {
7
7
  placeholder: string;
package/build/@types/components/SearchBar/SearchBar.styles.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement>
10
10
  declare type SearchResultContainerProps = {
11
11
  background?: string;
12
12
  topPosition?: string;
13
+ mobileTopPosition?: number;
13
14
  isOpen?: boolean;
14
15
  };
15
16
  export declare const SearchResultContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
package/build/cjs/components/src/components/Nav/Nav.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  var Nav = function (_a) {
16
16
  var _b, _c, _d, _e;
17
- var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
17
+ var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, mobileTopPosition = _a.mobileTopPosition, searchIsOpen = _a.searchIsOpen;
18
18
  var navContainerRef = React.useRef(null);
19
19
  var navChildContainerRef = React.useRef(null);
20
20
  var searchInputRef = React.useRef(null);
@@ -102,7 +102,7 @@ var Nav = function (_a) {
102
102
  ? 'closed'
103
103
  : 'open', initial: 'open' }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
104
104
  React__default["default"].createElement(Nav_styles.SearchContainer, { isOpen: searchIsOpen },
105
- React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
105
+ React__default["default"].createElement(SearchBar.SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
106
106
  onSearchClick && onSearchClick();
107
107
  }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
108
108
  rightContent)),
package/build/cjs/components/src/components/Nav/Nav.styles.js CHANGED
@@ -19,7 +19,13 @@ styled__default["default"](SearchContainer)(templateObject_6 || (templateObject_
19
19
  var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n display: ", ";\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", ";\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n top: ", ";\n }\n"], ["\n display: ", ";\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", ";\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n top: ", ";\n }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
20
20
  var _a, _b, _c;
21
21
  return "calc(".concat((_a = props === null || props === void 0 ? void 0 : props.overlayTopPosition) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall, "px - ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px)");
22
- }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
22
+ }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) {
23
+ var _a, _b, _c;
24
+ return "".concat((props === null || props === void 0 ? void 0 : props.overlayTopPosition) && ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall)
25
+ ? (props === null || props === void 0 ? void 0 : props.overlayTopPosition) +
26
+ ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall)
27
+ : (_c = props.theme.constants) === null || _c === void 0 ? void 0 : _c.navHeaderHeightSmall, "px");
28
+ });
23
29
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
24
30
 
25
31
  exports.Nav = Nav;
package/build/cjs/components/src/components/Nav/Nav.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/SearchBar/SearchBar.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  var SearchBar = function (_a) {
16
16
  var _b, _c;
17
- var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
17
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
18
18
  var width = utils.useWindowSize().width;
19
19
  var theme = styled.useTheme();
20
20
  React.useEffect(function () {
@@ -70,7 +70,7 @@ var SearchBar = function (_a) {
70
70
  }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
71
71
  React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
72
72
  React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
73
- React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
73
+ React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed', mobileTopPosition: mobileTopPosition },
74
74
  React__default["default"].createElement(SearchBar_styles.MobileSearchFormContainer, null,
75
75
  React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
76
76
  e.preventDefault();
package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var SearchResultContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
13
+ var SearchResultContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.mobileTopPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
14
14
  var SearchRightLabel = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", "px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", "px;\n cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
15
15
  var SearchBarContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"], ["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
16
16
  var SearchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
package/build/es/components/src/components/Nav/Nav.js CHANGED
@@ -6,7 +6,7 @@ import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, SearchCont
6
6
 
7
7
  var Nav = function (_a) {
8
8
  var _b, _c, _d, _e;
9
- var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
9
+ var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, mobileTopPosition = _a.mobileTopPosition, searchIsOpen = _a.searchIsOpen;
10
10
  var navContainerRef = useRef(null);
11
11
  var navChildContainerRef = useRef(null);
12
12
  var searchInputRef = useRef(null);
@@ -94,7 +94,7 @@ var Nav = function (_a) {
94
94
  ? 'closed'
95
95
  : 'open', initial: 'open' }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
96
96
  React.createElement(SearchContainer, { isOpen: searchIsOpen },
97
- React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
97
+ React.createElement(SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
98
98
  onSearchClick && onSearchClick();
99
99
  }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
100
100
  rightContent)),
package/build/es/components/src/components/Nav/Nav.styles.js CHANGED
@@ -11,7 +11,13 @@ styled(SearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateOb
11
11
  var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: ", ";\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", ";\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n top: ", ";\n }\n"], ["\n display: ", ";\n background: #333;\n opacity: 0.5;\n width: 100vw;\n height: 100%;\n position: fixed;\n top: ", ";\n left: 0;\n overflow: hidden;\n z-index: 10;\n @media (min-width: ", "px) {\n top: ", ";\n }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
12
12
  var _a, _b, _c;
13
13
  return "calc(".concat((_a = props === null || props === void 0 ? void 0 : props.overlayTopPosition) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall, "px - ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px)");
14
- }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
14
+ }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) {
15
+ var _a, _b, _c;
16
+ return "".concat((props === null || props === void 0 ? void 0 : props.overlayTopPosition) && ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall)
17
+ ? (props === null || props === void 0 ? void 0 : props.overlayTopPosition) +
18
+ ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall)
19
+ : (_c = props.theme.constants) === null || _c === void 0 ? void 0 : _c.navHeaderHeightSmall, "px");
20
+ });
15
21
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
16
22
 
17
23
  export { Nav, NavChildContainer, NavContainer, NavMainLinks, SearchContainer, SearchResultOverlay };
package/build/es/components/src/components/Nav/Nav.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/SearchBar/SearchBar.js CHANGED
@@ -6,7 +6,7 @@ import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRigh
6
6
 
7
7
  var SearchBar = function (_a) {
8
8
  var _b, _c;
9
- var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
9
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, mobileTopPosition = _a.mobileTopPosition, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef", "mobileTopPosition"]);
10
10
  var width = useWindowSize().width;
11
11
  var theme = useTheme();
12
12
  useEffect(function () {
@@ -62,7 +62,7 @@ var SearchBar = function (_a) {
62
62
  }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
63
63
  React.createElement(MobileSearchIconContainer, null,
64
64
  React.createElement(SearchLeftIcon, null, icon)),
65
- React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
65
+ React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed', mobileTopPosition: mobileTopPosition },
66
66
  React.createElement(MobileSearchFormContainer, null,
67
67
  React.createElement(SearchForm, { onSubmit: function (e) {
68
68
  e.preventDefault();
package/build/es/components/src/components/SearchBar/SearchBar.styles.js CHANGED
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import { motion } from 'framer-motion';
3
3
  import styled from 'styled-components';
4
4
 
5
- var SearchResultContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
5
+ var SearchResultContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"], ["\n position: fixed;\n top: ", "px;\n left: 0;\n width: 100%;\n z-index: ", ";\n overflow: hidden;\n @media (min-width: ", "px) {\n position: absolute;\n top: ", ";\n }\n"])), function (props) { var _a; return (_a = props.mobileTopPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
6
6
  var SearchRightLabel = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", "px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", "px;\n cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
7
7
  var SearchBarContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"], ["\n ", ";\n\n position: relative;\n display: flex;\n justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
8
8
  var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n outline: none;\n font-size: ", "px;\n padding: ", "px;\n\n ::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: ", ";\n opacity: 1; /* Firefox */\n }\n\n :-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: ", ";\n }\n\n ::-ms-input-placeholder {\n /* Microsoft Edge */\n color: ", ";\n }\n\n @media (min-width: ", "px) {\n font-size: ", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.142",
3
+ "version": "0.7.143",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
62
62
  "styled-components": "^5.2.1"
63
63
  },
64
64
  "dependencies": {
65
- "@citygross/design-tokens": "^0.2.41",
65
+ "@citygross/design-tokens": "^0.2.42",
66
66
  "@citygross/icons": "^0.1.8",
67
67
  "@citygross/react-use-bg-wizard": "^0.0.8",
68
- "@citygross/typography": "^0.0.71",
68
+ "@citygross/typography": "^0.0.72",
69
69
  "@citygross/utils": "^0.0.22",
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": "0d8480df9b1e72774676b8161732a2fcbbcb4b53"
74
+ "gitHead": "71cdfc7dc1ff5e034de9437c9c3917459c36d3ef"
75
75
  }