@woosmap/ui 3.26.0 → 3.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.26.0",
+  "version": "3.30.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Demo/DistanceDemo.js

@@ -210,6 +210,7 @@ export default class DistanceDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestDistance();
         } else {
@@ -218,6 +219,9 @@ export default class DistanceDemo extends Component {
     };
 
     localitiesOnChangeCallBack = (type) => (item) => {
+        if (!item) {
+            return;
+        }
         const newState = {};
         newState[`${type}Location`] = item ? item.location : {};
         this.setState(newState, this.requestDistance);
@@ -346,7 +350,7 @@ export default class DistanceDemo extends Component {
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="distance-demo"
                     className="demo--distance"

package/src/components/Demo/GeolocationDemo.js

@@ -180,6 +180,7 @@ export default class GeolocationDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.geolocationWoosmapSearchKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestGeolocation();
         } else {
@@ -211,7 +212,7 @@ export default class GeolocationDemo extends Component {
         }
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.geolocationWoosmapSearchKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     className="demo--geolocation"
                     docLink="https://developers.woosmap.com/products/geolocation-api/location/"

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -328,6 +328,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestAddress();
         } else {
@@ -344,7 +345,7 @@ export default class LocalitiesAddressDemo extends Component {
         }
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     noheader={noheader}
                     header={headerLabels}

package/src/components/Demo/LocalitiesDemo.js

@@ -195,6 +195,7 @@ export default class LocalitiesDemo extends Component {
         }
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestLocalities();
         } else {
@@ -268,7 +269,7 @@ export default class LocalitiesDemo extends Component {
         const { noheader, headerLabels, subHeader } = this.props;
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="localities-demo"
                     header={headerLabels}

package/src/components/Demo/MapDemo.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';
-import Constants from '../../Constants';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import marker from '../../images/marker.png';
@@ -253,7 +252,7 @@ storesOverlay.setMap(map);
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     ref={this.demoRef}
                     header={headerLabels}

package/src/components/Demo/SearchDemo.js

@@ -73,7 +73,7 @@ export default class SearchDemo extends Component {
             key: Constants.woosmapKey,
             lat: location.lat,
             lng: location.lng,
-            stores_by_page: maxStore,
+            stores_by_page: maxStore || '5',
             query,
         };
     };
@@ -190,6 +190,7 @@ export default class SearchDemo extends Component {
         if (this.timeoutMap) clearTimeout(this.timeoutMap);
 
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+            window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
             this.requestSearch();
         } else {
@@ -310,7 +311,7 @@ export default class SearchDemo extends Component {
         };
         return (
             <>
-                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Script url="https://sdk.woosmap.com/map/map.js" />
                 <Demo
                     id="search-demo"
                     className="demo--search"

package/src/components/Dropdown/Dropdown.js

@@ -6,14 +6,14 @@ import Button from '../Button/Button';
 import ConfirmationPopover from '../Popover/ConfirmationPopover';
 import withClickOutside from '../withClickOutside/withClickOutside';
 
-function mapChildrenWithProps(children, childrenRefs, closeCb) {
+function mapChildrenWithProps(children, childrenRefs, props) {
     if (children) {
         return React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
                 // only add ref to non functional components
                 return React.cloneElement(child, {
                     ...child.props,
-                    closeCb,
+                    ...props,
                     ref:
                         !child.type.prototype || (child.type.prototype && child.type.prototype.render)
                             ? (elem) => {
@@ -49,8 +49,8 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, testId, isSection, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const { direction, children, closeCb, onMouseEnter, onMouseLeave, testId, isSection, ...rest } = this.props;
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         if (isSection) {
             return (
                 <div className="dropdown__container">
@@ -58,6 +58,9 @@ class DropdownMenu extends Component {
                         role="menu"
                         className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
                         data-testid={testId}
+                        tabIndex="-1"
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
                         {...rest}
                     >
                         {childrenWithProps}
@@ -66,7 +69,14 @@ class DropdownMenu extends Component {
             );
         }
         return (
-            <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
+            <ul
+                role="menu"
+                className={cl('dropdown__menu', direction)}
+                data-testid={testId}
+                {...rest}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
                 {childrenWithProps}
             </ul>
         );
@@ -76,6 +86,8 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    onMouseEnter: null,
+    onMouseLeave: null,
     testId: 'dropdown-menu',
     isSection: false,
 };
@@ -83,6 +95,8 @@ DropdownMenu.defaultProps = {
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     testId: PropTypes.string,
     isSection: PropTypes.bool,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
@@ -100,7 +114,7 @@ class DropdownMenuSection extends Component {
 
     render() {
         const { title, children, closeCb, ...rest } = this.props;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, { closeCb });
         return (
             <div className="dropdown__menu__section">
                 {title && <div className="dropdown__menu__item dropdown__menu__item__title">{title}</div>}
@@ -313,7 +327,7 @@ class Dropdown extends Component {
             }
             this.mouseLeaveTimeout = setTimeout(() => {
                 this.setOpen(false);
-            }, 500);
+            }, 300);
         }
     };
 
@@ -351,15 +365,17 @@ class Dropdown extends Component {
             ...rest
         } = this.props;
         const { open } = this.state;
-        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, this.handleClickOutside);
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, {
+            closeCb: this.handleClickOutside,
+            onMouseEnter: this.onMouseEnter,
+            onMouseLeave: this.onMouseLeave,
+        });
 
         return (
             <div
                 ref={openOnMouseEnter ? null : this.clickOutsideRef}
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
             >
                 <Button
                     disabled={disabled}
@@ -371,6 +387,8 @@ class Dropdown extends Component {
                     iconSize={btnFaceIconSize}
                     label={label}
                     testId={testId}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}
                 />
                 {childrenWithProps}
             </div>

package/src/components/Icon/Icon.js

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
 import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Battery } from '../../icons/battery.svg';
+import { ReactComponent as Care } from '../../icons/care.svg';
 import { ReactComponent as Cars } from '../../icons/cars.svg';
+import { ReactComponent as Elephant } from '../../icons/elephant.svg';
 import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Green } from '../../icons/green.svg';
 import { ReactComponent as Integrations } from '../../icons/integrations.svg';
@@ -18,6 +20,7 @@ import { ReactComponent as PuzzleStar } from '../../icons/puzzle-star.svg';
 import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Schedule } from '../../icons/schedule.svg';
 import { ReactComponent as Security } from '../../icons/security.svg';
+import { ReactComponent as Speed } from '../../icons/speed.svg';
 import { ReactComponent as World } from '../../icons/world.svg';
 import { ReactComponent as Zoom } from '../../icons/zoom.svg';
 
@@ -151,6 +154,8 @@ const Icons = {
     battery: Battery,
     buildings: Buildings,
     cars: Cars,
+    care: Care,
+    elephant: Elephant,
     github: Github,
     green: Green,
     integrations: Integrations,
@@ -164,6 +169,7 @@ const Icons = {
     'save-money': SaveMoney,
     schedule: Schedule,
     security: Security,
+    speed: Speed,
     world: World,
     zoom: Zoom,
 

package/src/components/Map/drawOnMap.js

@@ -126,6 +126,7 @@ export const createWoosmapMap = (node) => {
             ],
         });
     } catch (e) {
+        console.error('Cound not instantiate a Map');
         console.error(e);
         return null;
     }

package/src/icons/care.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 6.565A43.435 43.435 0 1 0 93.435 50 43.484 43.484 0 0 0 50 6.565ZM69.719 59.7a21.92 21.92 0 0 0 0-19.4l16.556-8.14a40.333 40.333 0 0 1 0 35.68Zm-38.7-9.7A18.981 18.981 0 1 1 50 68.981 19 19 0 0 1 31.019 50ZM69.8 14.763l-9.039 16.081a21.906 21.906 0 0 0-21.523 0L30.2 14.763a40.294 40.294 0 0 1 39.592 0ZM13.725 32.16l16.556 8.14a21.92 21.92 0 0 0 0 19.4l-16.556 8.14a40.333 40.333 0 0 1 0-35.68ZM30.2 85.237l9.035-16.082a21.9 21.9 0 0 0 21.524 0L69.8 85.237a40.3 40.3 0 0 1-39.594 0Z"/></svg>

package/src/icons/elephant.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m95.025 68.21-2.86-16.245a30.086 30.086 0 0 0-29.322-29.9 17.218 17.218 0 0 0-21.149-4.613 21.861 21.861 0 0 0-21.348 21.824v20.262a14.162 14.162 0 0 1-3.162-1.96 1.5 1.5 0 1 0-1.908 2.315 17.148 17.148 0 0 0 5.07 2.9v6.3a2.086 2.086 0 1 1-4.171 0 1.5 1.5 0 0 0-1.732-1.482L6.219 68.9c-.011 0-.022.006-.033.008a1.429 1.429 0 0 0-.159.042c-.043.013-.087.023-.129.04s-.092.044-.137.067-.084.042-.123.067a1.426 1.426 0 0 0-.116.089 1.349 1.349 0 0 0-.11.09c-.035.034-.065.073-.1.11s-.062.069-.089.107-.051.085-.076.129a1.3 1.3 0 0 0-.066.122 1.357 1.357 0 0 0-.048.135 1.5 1.5 0 0 0-.045.144c-.01.043-.013.089-.019.134a1.265 1.265 0 0 0-.017.164v.033A12.844 12.844 0 0 0 17.8 83.2a14.776 14.776 0 0 0 14.54-14.721v-5.85a16.935 16.935 0 0 0 4.02-2.229v22.48a1.5 1.5 0 0 0 1.5 1.5h13.152a1.5 1.5 0 0 0 1.464-1.18h3.917a1.5 1.5 0 0 0 1.5-1.5v-9.764a25.678 25.678 0 0 0 6.49-.07V81.7a1.5 1.5 0 0 0 1.5 1.5h3.3a1.5 1.5 0 0 0 1.463 1.177h14.522a1.5 1.5 0 0 0 1.477-1.236l4.01-22.456 1.416 8.043a1.5 1.5 0 0 0 1.475 1.24 1.567 1.567 0 0 0 .263-.023 1.5 1.5 0 0 0 1.216-1.735Zm-65.69.272A11.76 11.76 0 0 1 17.777 80.2a9.834 9.834 0 0 1-9.734-8.557l5.427-.843a5.086 5.086 0 0 0 9.876-1.708v-5.52a17.018 17.018 0 0 0 5.989-.077ZM39.36 80.321h10.152v1.059H39.36Zm15.533-.121h-2.381v-9.469c.783.272 1.579.491 2.381.683Zm12.49-8.929c.591-.156 1.18-.323 1.759-.522V80.2h-1.759Zm4.759 10.109v-1.059H84.1l-.189 1.059Zm12.49-4.026a1.531 1.531 0 0 0-.313-.033H72.142V68.55a1.5 1.5 0 0 0-2.113-1.369 22.57 22.57 0 0 1-17.43.384l-1.035-.409a1.5 1.5 0 0 0-2.052 1.394v8.771H39.36V56.969a1.5 1.5 0 0 0-2.617-1l-.123.136a14.036 14.036 0 0 1-13.274 4.415V39.276A18.87 18.87 0 0 1 36.69 21.258a17.33 17.33 0 0 0-3.271 5.288 1.5 1.5 0 0 0 2.793 1.095 14.147 14.147 0 0 1 6.361-7.262 1.492 1.492 0 0 0 .586-.31 14.21 14.21 0 1 1 6.282 26.959 1.5 1.5 0 0 0 0 3 17.167 17.167 0 0 0 15.39-24.849 27.092 27.092 0 0 1 24.331 26.8Z"/><path d="M31.875 42.808a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z"/></svg>

package/src/icons/speed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M63.031 16.37A33.518 33.518 0 0 0 34.7 31.87a1.5 1.5 0 0 0 2.526 1.619 30.63 30.63 0 1 1 .4 33.636 1.5 1.5 0 1 0-2.48 1.675 33.632 33.632 0 1 0 27.885-52.43ZM26.686 31.182h-7a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 0-3ZM12.26 42.841h9.477a1.5 1.5 0 1 0 0-3H12.26a1.5 1.5 0 1 0 0 3ZM19.526 50a1.5 1.5 0 0 0-1.5-1.5H4.838a1.5 1.5 0 0 0 0 3h13.188a1.5 1.5 0 0 0 1.5-1.5Zm3.711 8.659a1.5 1.5 0 0 0-1.5-1.5H12.26a1.5 1.5 0 1 0 0 3h9.477a1.5 1.5 0 0 0 1.5-1.5Zm3.449 7.159h-7a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 0-3Z"/><path d="M65.194 60.851a1.5 1.5 0 0 0 2.121 2.121l11.912-11.911a1.5 1.5 0 0 0 0-2.122L67.315 37.028a1.5 1.5 0 0 0-2.121 2.121l9.351 9.351H30.9a1.5 1.5 0 1 0 0 3h43.645Z"/></svg>

package/src/index.js

@@ -46,6 +46,8 @@ export { default as withClickOutside } from './components/withClickOutside/withC
 export { default as withFormValidation } from './components/withFormValidation/withFormValidation';
 export { default as Marker } from './components/Map/Marker';
 export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
+export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
 export { default as MerchantDemo } from './components/Demo/MerchantDemo';
 export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
 export { default as DistanceDemo } from './components/Demo/DistanceDemo';

package/src/styles/console/variables.styl

@@ -1,66 +1,24 @@
-$fontFamily = "Poppins", arial, sans-serif
-$fontSize = 1.8rem
-$lineHeight = $fontSize * 2 - .8
+$fontFamily = "Lato", arial, sans-serif
+$fontSize = 1.4rem
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
-$fontSizeNano  = $fontSize - .6
 $fontWeight = 400
-$fontSizeHeader = 1.3rem
-$fontSizeFooter = 1.6rem
 
 
-$title = 4.6rem
-$title2 = 4rem
-$title3 = 3.6rem
-$title4 = 3rem
-$title5 = 2.6rem
-$title6 = 2rem
+$title = $fontSize + .6
+$title2 = $fontSize + .4
+$title3 = $fontSize + .3
+$title4 = $fontSize + .2
+$title5 = $fontSize + .1
+$title6 = $fontSize
 
 $borderRadius = .6rem
 
-
-// Layout
-$wrapperWidth = 125rem
-$wrapperReducedWidth = 96rem
-$headerHeight = 6.7rem
-$headerBannerHeight = 5.2rem
-$sectionPadding = 18.5rem
-$topRainbowHeight = 3.8rem
-$gutter2c = 3rem
-$quoteIcon = 44rem
-$quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding + 1 )
-
-$col2 = 58rem
-$col3 = 31.5rem
-$col4 = 22rem
-
-// card articles
-$cardHeaderHeight = 21rem
-$cardFontSize = 1.6rem
-$cardTitle = 1.8rem
-$cardTitleLineHeight = 2.6rem
-$cardLineHeight = $cardFontSize * 2 - 1
-$cardPadding = 2rem
-
-// card pricing
-$pricingCardWidth = 30.2rem
-$pricingCardpadding = 3.4rem
-$pricingCardHeaderHeight = 6.2rem
-$pricingCardCtaHeight = 5.2rem
-$pricingCardTitleSize = $title6
-$pricingCardAmountSize = $title2 * 2
-$pricingCardUnitSize = $title6
-$pricingCardPeriodSize = $fontSizeSmall
-$pricingCardPriceSize = $title2
-$pricingCardPriceUnitSize = $fontSizeSmall
-
 // Buttons & Inputs
 
-$padding = 2rem
+$padding = 1.2rem
 $contentPadding = 2.8rem
 
-
-
 $sidebarButtonSize = 5rem
 
 $buttonHeight = 3.8rem
@@ -83,9 +41,9 @@ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
 $buttonFontSizeNano = $fontSize  - .3
 $buttonLineHeightNano = $buttonFontSizeNano * 2
 
-$buttonHeightLarge = $buttonHeight  + 1.2
-$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
-$buttonFontSizeLarge = $fontSize - .2
+$buttonHeightLarge = $buttonHeight  + .8
+$buttonPaddingLarge = 0 $padding + .4 0 $padding + .4
+$buttonFontSizeLarge = $fontSize + .1
 $buttonLineHeightLarge = $buttonFontSizeLarge * 2