@citygross/components 0.7.81 → 0.7.83

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 (25) hide show
  1. package/build/@types/components/Nav/Nav.d.ts +3 -4
  2. package/build/@types/components/Nav/Nav.stories.d.ts +1 -1
  3. package/build/@types/components/NavMainLink/NavMainLink.d.ts +2 -0
  4. package/build/@types/components/SearchBar/SearchBar.d.ts +2 -1
  5. package/build/@types/components/SearchBar/SearchBar.stories.d.ts +1 -1
  6. package/build/@types/components/SearchBar/SearchBar.styles.d.ts +1 -0
  7. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +1 -1
  8. package/build/cjs/components/src/components/Button/Button.js +1 -1
  9. package/build/cjs/components/src/components/Nav/Nav.js +9 -10
  10. package/build/cjs/components/src/components/Nav/Nav.js.map +1 -1
  11. package/build/cjs/components/src/components/SearchBar/SearchBar.js +6 -3
  12. package/build/cjs/components/src/components/SearchBar/SearchBar.js.map +1 -1
  13. package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js +6 -4
  14. package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
  15. package/build/cjs/components/src/components/WarningLabel/WarningLabel.js +1 -1
  16. package/build/es/components/src/components/AddressBlock/AddressBlock.js +1 -1
  17. package/build/es/components/src/components/Button/Button.js +1 -1
  18. package/build/es/components/src/components/Nav/Nav.js +9 -10
  19. package/build/es/components/src/components/Nav/Nav.js.map +1 -1
  20. package/build/es/components/src/components/SearchBar/SearchBar.js +7 -4
  21. package/build/es/components/src/components/SearchBar/SearchBar.js.map +1 -1
  22. package/build/es/components/src/components/SearchBar/SearchBar.styles.js +6 -5
  23. package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map +1 -1
  24. package/build/es/components/src/components/WarningLabel/WarningLabel.js +1 -1
  25. package/package.json +2 -2
package/build/@types/components/Nav/Nav.d.ts CHANGED
@@ -1,12 +1,10 @@
1
1
  import React, { ChangeEventHandler } from 'react';
2
- import { TNavMainLink } from '../NavMainLink/NavMainLink';
3
2
  export declare type TNav = {
4
3
  logo: React.ReactNode;
5
4
  maxWidth?: number;
6
5
  height?: number;
7
6
  topPosition?: number;
8
- mainLinks?: TNavMainLink[];
9
- mainLinksBorderColor?: string;
7
+ mainLinks?: React.ReactNode[];
10
8
  rightContent?: React.ReactNode;
11
9
  searchResultElement?: React.ReactNode;
12
10
  searchPlaceHolder?: string;
@@ -14,6 +12,7 @@ export declare type TNav = {
14
12
  searchIcon?: React.ReactNode;
15
13
  searchOnChange?: ChangeEventHandler<HTMLInputElement>;
16
14
  searchValue?: string;
15
+ searchOnSubmit?: () => void;
17
16
  onSearchClick?: () => void;
18
17
  };
19
- export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, mainLinksBorderColor, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, onSearchClick }: TNav) => JSX.Element;
18
+ export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit }: TNav) => JSX.Element;
package/build/@types/components/Nav/Nav.stories.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Story } from '@storybook/react';
2
2
  import { TNav } from './Nav';
3
3
  declare const _default: {
4
- component: ({ logo, maxWidth, height, topPosition, mainLinks, mainLinksBorderColor, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, onSearchClick }: TNav) => JSX.Element;
4
+ component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit }: TNav) => JSX.Element;
5
5
  title: string;
6
6
  argTypes: {
7
7
  onScroll: {
package/build/@types/components/NavMainLink/NavMainLink.d.ts CHANGED
@@ -1,8 +1,10 @@
1
+ import React from 'react';
1
2
  export declare type TNavMainLink = {
2
3
  text: string;
3
4
  href?: string;
4
5
  active?: boolean;
5
6
  target?: '_blank' | '_self';
6
7
  borderColor?: string;
8
+ component?: React.ReactNode;
7
9
  };
8
10
  export declare const NavMainLink: ({ text, href, target, active, borderColor }: TNavMainLink) => JSX.Element;
package/build/@types/components/SearchBar/SearchBar.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare type TSearchBar = styles.SearchInputProps & {
7
7
  inputRef?: React.RefObject<HTMLInputElement>;
8
8
  onCancelClick?: () => void;
9
9
  isOpen?: boolean;
10
+ searchOnSubmit?: () => void;
10
11
  children?: React.ReactNode;
11
12
  };
12
- export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: TSearchBar) => JSX.Element;
13
+ export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, searchOnSubmit, ...props }: TSearchBar) => JSX.Element;
package/build/@types/components/SearchBar/SearchBar.stories.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Story } from '@storybook/react';
2
2
  declare const _default: {
3
- component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
3
+ component: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, searchOnSubmit, ...props }: import("./SearchBar").TSearchBar) => JSX.Element;
4
4
  title: string;
5
5
  args: {
6
6
  placeholder: string;
package/build/@types/components/SearchBar/SearchBar.styles.d.ts CHANGED
@@ -14,6 +14,7 @@ declare type SearchResultContainerProps = {
14
14
  export declare const SearchResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
15
15
  export declare const SearchRightLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SearchResultContainerProps, "isOpen">, never>;
16
16
  export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchInputProps, never>;
17
+ export declare const SearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
17
18
  export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SearchInputProps, never>;
18
19
  export declare const SearchLeftIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
19
20
  export {};
package/build/cjs/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -73,9 +73,9 @@ require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js'
73
73
  require('../UnorderedList/UnorderedList.styles.js');
74
74
  require('../WarningLabel/WarningLabel.styles.js');
75
75
  require('../MobileTable/MobileTable.styles.js');
76
- require('../NavMainLink/NavMainLink.styled.js');
77
76
  require('../SearchBar/SearchBar.styles.js');
78
77
  require('../Nav/Nav.styles.js');
78
+ require('../NavMainLink/NavMainLink.styled.js');
79
79
  require('framer-motion');
80
80
  require('../SideModal/SideModal.styles.js');
81
81
  require('../IconText/IconText.styles.js');
package/build/cjs/components/src/components/Button/Button.js CHANGED
@@ -39,7 +39,7 @@ function Button(_a) {
39
39
  icon,
40
40
  children)) : (children),
41
41
  React__default["default"].createElement("span", { className: "ripple" }),
42
- buttonBadge && React__default["default"].createElement(Button_styles.ButtonBadge, null, buttonBadge)));
42
+ buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, null, buttonBadge)) : null));
43
43
  }
44
44
 
45
45
  exports.Button = Button;
package/build/cjs/components/src/components/Nav/Nav.js CHANGED
@@ -2,10 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var designTokens = require('@citygross/design-tokens');
6
5
  var utils = require('@citygross/utils');
7
6
  var React = require('react');
8
- var NavMainLink = require('../NavMainLink/NavMainLink.js');
9
7
  var SearchBar = require('../SearchBar/SearchBar.js');
10
8
  var Nav_styles = require('./Nav.styles.js');
11
9
 
@@ -14,13 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
13
 
16
14
  var Nav = function (_a) {
17
- var _b, _c;
18
- var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, _d = _a.mainLinksBorderColor, mainLinksBorderColor = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, onSearchClick = _a.onSearchClick;
15
+ var _b;
16
+ var logo = _a.logo, maxWidth = _a.maxWidth, 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;
19
17
  var searchContainerRef = React.useRef(null);
20
18
  var searchInputRef = React.useRef(null);
21
19
  var navRef = React.useRef(null);
22
20
  var width = utils.useWindowSize().width;
23
- var _e = React.useState(0), elToRemove = _e[0], setElToRemove = _e[1];
21
+ var _c = React.useState(0), elToRemove = _c[0], setElToRemove = _c[1];
24
22
  var widthRef = React.useRef(null);
25
23
  var checkWidth = function () {
26
24
  var _a, _b;
@@ -41,15 +39,16 @@ var Nav = function (_a) {
41
39
  clearTimeout(debounce);
42
40
  };
43
41
  }, [width]);
44
- var _f = React.useState(false), openSearch = _f[0], setOpenSearch = _f[1];
42
+ var _d = React.useState(false), openSearch = _d[0], setOpenSearch = _d[1];
45
43
  React__default["default"].useEffect(function () {
46
44
  var handleClick = function (event) {
47
- var _a;
45
+ var _a, _b;
48
46
  if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
49
47
  !((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
50
48
  event.stopPropagation();
51
49
  setOpenSearch(false);
52
50
  }
51
+ console.log(event === null || event === void 0 ? void 0 : event.target, (_b = searchContainerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
53
52
  };
54
53
  document.addEventListener('click', function (e) { return handleClick(e); }, true);
55
54
  return function () {
@@ -61,12 +60,12 @@ var Nav = function (_a) {
61
60
  logo,
62
61
  React__default["default"].createElement(Nav_styles.NavChildContainer, null,
63
62
  openSearch ? (React__default["default"].createElement(Nav_styles.NavSearchContainer, { ref: searchContainerRef },
64
- React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
63
+ React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchOnSubmit: searchOnSubmit, onCancelClick: function () {
65
64
  setOpenSearch(false);
66
65
  }, isOpen: openSearch }, searchResultElement))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
67
- React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return (React__default["default"].createElement(NavMainLink.NavMainLink, { text: link.text, active: link.active, borderColor: mainLinksBorderColor, href: link.href, key: link.text, target: link.target })); })),
66
+ React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
68
67
  React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
69
- onSearchClick ? onSearchClick() : setOpenSearch(true);
68
+ setOpenSearch(true);
70
69
  } },
71
70
  React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
72
71
  rightContent)),
package/build/cjs/components/src/components/Nav/Nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/SearchBar/SearchBar.js CHANGED
@@ -11,18 +11,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
 
13
13
  var SearchBar = function (_a) {
14
- var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
14
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, searchOnSubmit = _a.searchOnSubmit, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick", "searchOnSubmit"]);
15
15
  React.useEffect(function () {
16
16
  var _a;
17
17
  if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
18
18
  (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
19
19
  }
20
20
  }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
21
- console.log(isOpen, '__________OPEN');
22
21
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
23
22
  React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
24
23
  React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon),
25
- React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
24
+ React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
25
+ e.preventDefault();
26
+ searchOnSubmit && searchOnSubmit();
27
+ } },
28
+ React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value }))),
26
29
  cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
27
30
  e.stopPropagation();
28
31
  onCancelClick && onCancelClick();
package/build/cjs/components/src/components/SearchBar/SearchBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js CHANGED
@@ -15,7 +15,8 @@ var SearchBarContainer = styled__default["default"].div(templateObject_3 || (tem
15
15
  return props.isOpen &&
16
16
  "\n flex-direction: row;\n box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n ";
17
17
  });
18
- var SearchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n display: none;\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 @media (min-width: ", "px) {\n font-size: ", "px;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"], ["\n display: none;\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 @media (min-width: ", "px) {\n font-size: ", "px;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
18
+ var SearchForm = styled__default["default"].form(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"], ["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
19
+ var SearchInput = styled__default["default"].input(templateObject_5 || (templateObject_5 = _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 @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 @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) {
19
20
  var _a, _b;
20
21
  return props.inputSize === 'small'
21
22
  ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
@@ -25,11 +26,12 @@ var SearchInput = styled__default["default"].input(templateObject_4 || (template
25
26
  return props.inputSize === 'small'
26
27
  ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
27
28
  : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
28
- }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
29
- var SearchLeftIcon = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
30
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
29
+ });
30
+ var SearchLeftIcon = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
31
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
31
32
 
32
33
  exports.SearchBarContainer = SearchBarContainer;
34
+ exports.SearchForm = SearchForm;
33
35
  exports.SearchInput = SearchInput;
34
36
  exports.SearchLeftIcon = SearchLeftIcon;
35
37
  exports.SearchResultContainer = SearchResultContainer;
package/build/cjs/components/src/components/SearchBar/SearchBar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -73,9 +73,9 @@ require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js'
73
73
  require('../UnorderedList/UnorderedList.styles.js');
74
74
  var WarningLabel_styles = require('./WarningLabel.styles.js');
75
75
  require('../MobileTable/MobileTable.styles.js');
76
- require('../NavMainLink/NavMainLink.styled.js');
77
76
  require('../SearchBar/SearchBar.styles.js');
78
77
  require('../Nav/Nav.styles.js');
78
+ require('../NavMainLink/NavMainLink.styled.js');
79
79
  require('framer-motion');
80
80
  require('../SideModal/SideModal.styles.js');
81
81
  require('../IconText/IconText.styles.js');
package/build/es/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -69,9 +69,9 @@ import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
69
69
  import '../UnorderedList/UnorderedList.styles.js';
70
70
  import '../WarningLabel/WarningLabel.styles.js';
71
71
  import '../MobileTable/MobileTable.styles.js';
72
- import '../NavMainLink/NavMainLink.styled.js';
73
72
  import '../SearchBar/SearchBar.styles.js';
74
73
  import '../Nav/Nav.styles.js';
74
+ import '../NavMainLink/NavMainLink.styled.js';
75
75
  import 'framer-motion';
76
76
  import '../SideModal/SideModal.styles.js';
77
77
  import '../IconText/IconText.styles.js';
package/build/es/components/src/components/Button/Button.js CHANGED
@@ -31,7 +31,7 @@ function Button(_a) {
31
31
  icon,
32
32
  children)) : (children),
33
33
  React.createElement("span", { className: "ripple" }),
34
- buttonBadge && React.createElement(ButtonBadge, null, buttonBadge)));
34
+ buttonBadge ? (React.createElement(ButtonBadge, null, buttonBadge)) : null));
35
35
  }
36
36
 
37
37
  export { Button, ButtonColor, ButtonSize };
package/build/es/components/src/components/Nav/Nav.js CHANGED
@@ -1,18 +1,16 @@
1
- import { theme } from '@citygross/design-tokens';
2
1
  import { useWindowSize } from '@citygross/utils';
3
2
  import React, { useRef, useState, useEffect } from 'react';
4
- import { NavMainLink } from '../NavMainLink/NavMainLink.js';
5
3
  import { SearchBar } from '../SearchBar/SearchBar.js';
6
4
  import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
7
5
 
8
6
  var Nav = function (_a) {
9
- var _b, _c;
10
- var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, _d = _a.mainLinksBorderColor, mainLinksBorderColor = _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, onSearchClick = _a.onSearchClick;
7
+ var _b;
8
+ var logo = _a.logo, maxWidth = _a.maxWidth, 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;
11
9
  var searchContainerRef = useRef(null);
12
10
  var searchInputRef = useRef(null);
13
11
  var navRef = useRef(null);
14
12
  var width = useWindowSize().width;
15
- var _e = useState(0), elToRemove = _e[0], setElToRemove = _e[1];
13
+ var _c = useState(0), elToRemove = _c[0], setElToRemove = _c[1];
16
14
  var widthRef = useRef(null);
17
15
  var checkWidth = function () {
18
16
  var _a, _b;
@@ -33,15 +31,16 @@ var Nav = function (_a) {
33
31
  clearTimeout(debounce);
34
32
  };
35
33
  }, [width]);
36
- var _f = useState(false), openSearch = _f[0], setOpenSearch = _f[1];
34
+ var _d = useState(false), openSearch = _d[0], setOpenSearch = _d[1];
37
35
  React.useEffect(function () {
38
36
  var handleClick = function (event) {
39
- var _a;
37
+ var _a, _b;
40
38
  if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
41
39
  !((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
42
40
  event.stopPropagation();
43
41
  setOpenSearch(false);
44
42
  }
43
+ console.log(event === null || event === void 0 ? void 0 : event.target, (_b = searchContainerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
45
44
  };
46
45
  document.addEventListener('click', function (e) { return handleClick(e); }, true);
47
46
  return function () {
@@ -53,12 +52,12 @@ var Nav = function (_a) {
53
52
  logo,
54
53
  React.createElement(NavChildContainer, null,
55
54
  openSearch ? (React.createElement(NavSearchContainer, { ref: searchContainerRef },
56
- React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
55
+ React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchOnSubmit: searchOnSubmit, onCancelClick: function () {
57
56
  setOpenSearch(false);
58
57
  }, isOpen: openSearch }, searchResultElement))) : (React.createElement(React.Fragment, null,
59
- React.createElement(NavMainLinks, null, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return (React.createElement(NavMainLink, { text: link.text, active: link.active, borderColor: mainLinksBorderColor, href: link.href, key: link.text, target: link.target })); })),
58
+ React.createElement(NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
60
59
  React.createElement(NavDummySearchContainer, { onClick: function () {
61
- onSearchClick ? onSearchClick() : setOpenSearch(true);
60
+ setOpenSearch(true);
62
61
  } },
63
62
  React.createElement(SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
64
63
  rightContent)),
package/build/es/components/src/components/Nav/Nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/SearchBar/SearchBar.js CHANGED
@@ -1,20 +1,23 @@
1
1
  import { __rest, __assign } from '../../../../_virtual/_tslib.js';
2
2
  import React, { useEffect } from 'react';
3
- import { SearchBarContainer, SearchLeftIcon, SearchInput, SearchRightLabel, SearchResultContainer } from './SearchBar.styles.js';
3
+ import { SearchBarContainer, SearchLeftIcon, SearchForm, SearchInput, SearchRightLabel, SearchResultContainer } from './SearchBar.styles.js';
4
4
 
5
5
  var SearchBar = function (_a) {
6
- var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
6
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, onCancelClick = _a.onCancelClick, searchOnSubmit = _a.searchOnSubmit, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick", "searchOnSubmit"]);
7
7
  useEffect(function () {
8
8
  var _a;
9
9
  if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
10
10
  (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
11
11
  }
12
12
  }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
13
- console.log(isOpen, '__________OPEN');
14
13
  return (React.createElement(React.Fragment, null,
15
14
  React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
16
15
  React.createElement(SearchLeftIcon, null, icon),
17
- React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
16
+ React.createElement(SearchForm, { onSubmit: function (e) {
17
+ e.preventDefault();
18
+ searchOnSubmit && searchOnSubmit();
19
+ } },
20
+ React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value }))),
18
21
  cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
19
22
  e.stopPropagation();
20
23
  onCancelClick && onCancelClick();
package/build/es/components/src/components/SearchBar/SearchBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/SearchBar/SearchBar.styles.js CHANGED
@@ -7,7 +7,8 @@ var SearchBarContainer = styled.div(templateObject_3 || (templateObject_3 = __ma
7
7
  return props.isOpen &&
8
8
  "\n flex-direction: row;\n box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n ";
9
9
  });
10
- var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\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 @media (min-width: ", "px) {\n font-size: ", "px;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"], ["\n display: none;\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 @media (min-width: ", "px) {\n font-size: ", "px;\n }\n @media (min-width: ", "px) {\n display: block;\n }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
10
+ var SearchForm = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"], ["\n flex: 1;\n display: none;\n @media (min-width: ", "px) {\n display: flex;\n }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
11
+ var SearchInput = styled.input(templateObject_5 || (templateObject_5 = __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 @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 @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) {
11
12
  var _a, _b;
12
13
  return props.inputSize === 'small'
13
14
  ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
@@ -17,9 +18,9 @@ var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTem
17
18
  return props.inputSize === 'small'
18
19
  ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
19
20
  : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
20
- }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
21
- var SearchLeftIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
22
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
21
+ });
22
+ var SearchLeftIcon = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"], ["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
23
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
23
24
 
24
- export { SearchBarContainer, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
25
+ export { SearchBarContainer, SearchForm, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
25
26
  //# sourceMappingURL=SearchBar.styles.js.map
package/build/es/components/src/components/SearchBar/SearchBar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SearchBar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/WarningLabel/WarningLabel.js CHANGED
@@ -69,9 +69,9 @@ import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
69
69
  import '../UnorderedList/UnorderedList.styles.js';
70
70
  import { WarningIndicator } from './WarningLabel.styles.js';
71
71
  import '../MobileTable/MobileTable.styles.js';
72
- import '../NavMainLink/NavMainLink.styled.js';
73
72
  import '../SearchBar/SearchBar.styles.js';
74
73
  import '../Nav/Nav.styles.js';
74
+ import '../NavMainLink/NavMainLink.styled.js';
75
75
  import 'framer-motion';
76
76
  import '../SideModal/SideModal.styles.js';
77
77
  import '../IconText/IconText.styles.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.81",
3
+ "version": "0.7.83",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "4434a3936ebb5616e0e59b7950267884f0789d63"
74
+ "gitHead": "80949efc8a19aa343ebcf56ae327f29521be7346"
75
75
  }