@citygross/components 0.8.32 → 0.8.34

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.
@@ -6,6 +6,7 @@ export declare type TNav = {
6
6
  topPosition?: number;
7
7
  mainLinks?: React.ReactNode[];
8
8
  rightContent?: React.ReactNode;
9
+ inputIcon?: React.ReactNode;
9
10
  searchResultElement?: React.ReactNode;
10
11
  searchPlaceHolder?: string;
11
12
  searchCancelLabel?: React.ReactNode;
@@ -22,4 +23,4 @@ export declare type TNav = {
22
23
  searchInputRef: React.RefObject<HTMLInputElement>;
23
24
  searchInputMobileRef: React.RefObject<HTMLInputElement>;
24
25
  };
25
- export declare const Nav: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, mobileTopPosition, searchIsOpen, searchInputRef, searchInputMobileRef, onSearchBlur }: TNav) => JSX.Element;
26
+ export declare const Nav: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, inputIcon, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, mobileTopPosition, searchIsOpen, searchInputRef, searchInputMobileRef, onSearchBlur }: TNav) => JSX.Element;
@@ -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, mobileTopPosition = _a.mobileTopPosition, searchIsOpen = _a.searchIsOpen, searchInputRef = _a.searchInputRef, searchInputMobileRef = _a.searchInputMobileRef, onSearchBlur = _a.onSearchBlur;
17
+ var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, inputIcon = _a.inputIcon, 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, searchInputRef = _a.searchInputRef, searchInputMobileRef = _a.searchInputMobileRef, onSearchBlur = _a.onSearchBlur;
18
18
  var navContainerRef = React.useRef(null);
19
19
  var navChildContainerRef = React.useRef(null);
20
20
  var navRef = React.useRef(null);
@@ -100,7 +100,7 @@ var Nav = function (_a) {
100
100
  ? 'closed'
101
101
  : '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; })),
102
102
  React__default["default"].createElement(Nav_styles.SearchContainer, { isOpen: searchIsOpen },
103
- React__default["default"].createElement(SearchBar.SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
103
+ React__default["default"].createElement(SearchBar.SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, inputIcon: inputIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
104
104
  onSearchClick && onSearchClick();
105
105
  }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen, onBlur: onSearchBlur }, searchResultElement))),
106
106
  rightContent)),
@@ -25,7 +25,7 @@ var SearchInput = styled__default["default"].input(templateObject_4 || (template
25
25
  : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
26
26
  }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.m1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
27
27
  var MobileSearchFormContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px 10px"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
28
- var SearchForm = styled__default["default"].form(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, 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.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, 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.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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) {
28
+ var SearchForm = styled__default["default"].form(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, 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.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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) {
29
29
  return props.isOpen &&
30
30
  "\n flex-direction: row;\n ";
31
31
  });
@@ -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, mobileTopPosition = _a.mobileTopPosition, searchIsOpen = _a.searchIsOpen, searchInputRef = _a.searchInputRef, searchInputMobileRef = _a.searchInputMobileRef, onSearchBlur = _a.onSearchBlur;
9
+ var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, inputIcon = _a.inputIcon, 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, searchInputRef = _a.searchInputRef, searchInputMobileRef = _a.searchInputMobileRef, onSearchBlur = _a.onSearchBlur;
10
10
  var navContainerRef = useRef(null);
11
11
  var navChildContainerRef = useRef(null);
12
12
  var navRef = useRef(null);
@@ -92,7 +92,7 @@ var Nav = function (_a) {
92
92
  ? 'closed'
93
93
  : '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; })),
94
94
  React.createElement(SearchContainer, { isOpen: searchIsOpen },
95
- React.createElement(SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
95
+ React.createElement(SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, inputIcon: inputIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
96
96
  onSearchClick && onSearchClick();
97
97
  }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen, onBlur: onSearchBlur }, searchResultElement))),
98
98
  rightContent)),
@@ -17,7 +17,7 @@ var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTem
17
17
  : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
18
18
  }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.m1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; });
19
19
  var MobileSearchFormContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"], ["\n background: ", ";\n padding: ", ";\n @media (min-width: ", "px) {\n display: none;\n }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px 10px"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; });
20
- var SearchForm = styled.form(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n &:hover {\n background: ", ";\n }\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, 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.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, 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.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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) {
20
+ var SearchForm = styled.form(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"], ["\n flex: 1;\n display: ", ";\n padding: ", ";\n background: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 1px ", ";\n\n &:focus-within {\n box-shadow: inset 0 0 0 1px ", ";\n background: ", ";\n }\n > div[data-lastpass-icon-root] {\n display: none;\n }\n @media (min-width: ", ") {\n &:hover {\n background: ", ";\n }\n }\n @media (min-width: ", "px) {\n display: flex;\n\n flex-direction: row;\n padding-left: ", "px;\n padding-right: ", "px;\n ", "\n }\n"])), function (props) { return (props.hideInMobile ? 'none' : 'flex'); }, function (props) { var _a; return "0px ".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchBarHorizontalPadding, "px"); }, 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.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, 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) {
21
21
  return props.isOpen &&
22
22
  "\n flex-direction: row;\n ";
23
23
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.32",
3
+ "version": "0.8.34",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "7a5b76f64f5091393950854fc799f999703a919a"
79
+ "gitHead": "7363607f8df2bc2a030952dadaefd4fa2e587f6a"
80
80
  }