@woosmap/ui 2.9.0 → 2.13.0

package/.eslintrc

@@ -26,6 +26,7 @@
     ],
     "react/forbid-prop-types": 0,
     "react/jsx-props-no-spreading": 0,
+    "react/jsx-no-bind": 0,
     "react/prefer-stateless-function": 0,
     "react/jsx-filename-extension": [
       1,

package/package.json

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

package/src/components/Demo/AddressDemo.js

@@ -186,7 +186,7 @@ export default class AddressDemo extends Component {
 
         const useCaseChoice = {
             key: 'usecase',
-            label: tr('Usecase'),
+            label: tr('Use case'),
             component: (
                 <ButtonGroup isLight key="usecase">
                     <Button

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -1,40 +1,25 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Component } from 'react';
 import axios from 'axios';
-import cl from 'classnames';
+import PropTypes from 'prop-types';
 import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
 import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
 import Marker from '../Map/Marker';
 import Constants from '../../Constants';
 import { viewpoint } from '../Map/drawOnMap';
-import Button from '../Button/Button';
-import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
 
-const languages = [
-    { value: 'fr', label: 'French' },
-    { value: 'gb', label: 'English' },
-    { value: 'es', label: 'Spanish' },
-    { value: 'it', label: 'Italian' },
-    { value: 'de', label: 'German' },
-    { value: 'nl', label: 'Dutch' },
-];
-
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
         super(props);
-        const lang = navigator.language || navigator.userLanguage;
-        const defaultLang = languages.find((item) => lang.startsWith(item.value));
-
         this.state = {
             response: null,
             error: null,
             input: '',
             countries: [],
-            language: (defaultLang || languages[1]).value,
             geometry: false,
             showDetails: false,
         };
@@ -84,11 +69,10 @@ export default class LocalitiesAddressDemo extends Component {
     };
 
     requestAddressDetails = (result) => {
-        const { language, geometry } = this.state;
+        const { geometry } = this.state;
         const params = {
             public_id: result.id,
             key: Constants.woosmapKey,
-            language,
         };
         if (geometry) {
             params.fields = 'geometry';
@@ -114,7 +98,7 @@ export default class LocalitiesAddressDemo extends Component {
     };
 
     getRequestparams = () => {
-        const { input, selectedLocality, language, countries, showDetails, geometry } = this.state;
+        const { input, selectedLocality, countries, showDetails, geometry } = this.state;
         if (showDetails) {
             const detailsParam = {
                 key: Constants.woosmapKey,
@@ -127,7 +111,6 @@ export default class LocalitiesAddressDemo extends Component {
         }
         const params = {
             key: Constants.woosmapKey,
-            language,
         };
         if (countries && countries.length > 0) {
             params.components = countries.map((item) => `country:${item.value}`).join('|');
@@ -166,7 +149,8 @@ export default class LocalitiesAddressDemo extends Component {
     };
 
     renderHeaderFilters = () => {
-        const { language, countries } = this.state;
+        const { countries } = this.state;
+        const { usecaseFilter } = this.props;
         let components = null;
         if (countries && countries.length > 0) {
             components = countries.map((item) => `country:${item.value}`).join('|');
@@ -182,18 +166,17 @@ export default class LocalitiesAddressDemo extends Component {
                     woosmapKey={Constants.woosmapKey}
                     placeholder="Start to type in an address"
                     defaultLocality={this.defaultOrigin}
-                    language={language}
                     componentsLocalities={components}
                     callback={this.requestAddressDetails}
                     inputChangeCb={this.onAutocompleteInputChangeCb}
                 />
             ),
         };
-        return [inputFilter];
+        return [usecaseFilter, inputFilter];
     };
 
     renderFooterFilters = () => {
-        const { language, geometry } = this.state;
+        const { geometry } = this.state;
         const filterTypes = {
             label: tr('Filter by'),
             component: (
@@ -220,27 +203,7 @@ export default class LocalitiesAddressDemo extends Component {
                 />
             ),
         };
-
-        const filterCountries = {
-            label: tr('Language'),
-            component: (
-                <ButtonGroup isLight key="language">
-                    {languages.map((item) => (
-                        <Button
-                            type="group"
-                            key={item.value}
-                            active={language === item.value}
-                            onClick={() => {
-                                this.setState({ language: item.value }, this.requestAddress);
-                            }}
-                        >
-                            <span className={cl('flag', `flag-${item.value}`)} title={item.label} />
-                        </Button>
-                    ))}
-                </ButtonGroup>
-            ),
-        };
-        return [filterGeometry, filterTypes, filterCountries];
+        return [filterGeometry, filterTypes];
     };
 
     renderAddress = () => {
@@ -368,14 +331,17 @@ export default class LocalitiesAddressDemo extends Component {
 
     render() {
         const { response, error, showDetails } = this.state;
+        const { noheader, headerLabels, subHeader } = this.props;
         let request = this.requestUrl;
         if (showDetails) {
             request = this.requestDetailsUrl;
         }
         return (
             <Demo
-                noheader
-                id="localitiesaddress-demo"
+                noheader={noheader}
+                header={headerLabels}
+                subHeader={subHeader}
+                id="localities-demo"
                 className="demo--localitiesaddress"
                 footerFilters={this.renderFooterFilters()}
                 headerFilters={this.renderHeaderFilters()}
@@ -389,3 +355,16 @@ export default class LocalitiesAddressDemo extends Component {
         );
     }
 }
+
+LocalitiesAddressDemo.defaultProps = {
+    noheader: false,
+    headerLabels: {},
+    usecaseFilter: null,
+    subHeader: null,
+};
+LocalitiesAddressDemo.propTypes = {
+    noheader: PropTypes.bool,
+    headerLabels: PropTypes.object,
+    usecaseFilter: PropTypes.object,
+    subHeader: PropTypes.object,
+};

package/src/components/Demo/LocalitiesAllDemo.js

@@ -0,0 +1,83 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { Component } from 'react';
+import LocalitiesDemo from './LocalitiesDemo';
+import Button from '../Button/Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import LocalitiesAddressDemo from './LocalitiesAddressDemo';
+import { tr } from '../utils/locale';
+
+export default class LocalitiesAllDemo extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { usecase: 'localities' };
+    }
+
+    renderSubHeader = () => (
+        <p>
+            {tr('You can select bewteen 2 use cases:')}
+            <ul className="demo__desc__list">
+                <li>{tr('Store Locator integration: autocomplete on city names, suburb names, postcodes...')}</li>
+                <li>
+                    {tr(
+                        'Checkout integration: on full addresses, renders the right part of the address in the right form fields'
+                    )}
+                </li>
+            </ul>
+        </p>
+    );
+
+    renderUsecaseFilter = () => {
+        const { usecase } = this.state;
+        return {
+            key: 'usecase',
+            label: tr('Use case'),
+            component: (
+                <ButtonGroup isLight key="usecase">
+                    <Button
+                        type="group"
+                        key="localities"
+                        active={usecase === 'localities'}
+                        onClick={() => {
+                            this.setState({ usecase: 'localities' });
+                        }}
+                        label={tr('Store Locator')}
+                    />
+                    <Button
+                        type="group"
+                        key="addresses"
+                        active={usecase === 'addresses'}
+                        onClick={() => {
+                            this.setState({ usecase: 'addresses' });
+                        }}
+                        label={tr('Checkout')}
+                    />
+                </ButtonGroup>
+            ),
+        };
+    };
+
+    render() {
+        const { usecase } = this.state;
+        const headerLabels = {
+            title: tr('Localities API'),
+            desc: tr(
+                'Woosmap Localities sorts and displays the 5 most relevant results, with priority to the most likely results, recognises common abbreviations and apostrophes, with high tolerance for typos.'
+            ),
+        };
+        return usecase === 'localities' ? (
+            <LocalitiesDemo
+                noheader={false}
+                headerLabels={headerLabels}
+                usecaseFilter={this.renderUsecaseFilter()}
+                subHeader={this.renderSubHeader()}
+            />
+        ) : (
+            <LocalitiesAddressDemo
+                noheader={false}
+                headerLabels={headerLabels}
+                usecaseFilter={this.renderUsecaseFilter()}
+                subHeader={this.renderSubHeader()}
+            />
+        );
+    }
+}

package/src/components/Demo/LocalitiesAllDemo.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import LocalitiesAllDemo from './LocalitiesAllDemo';
+
+const Story = {
+    title: 'demo/LocalitiesAll',
+    component: LocalitiesAllDemo,
+};
+
+export default Story;
+
+const TemplateLocalitiesAll = () => <LocalitiesAllDemo />;
+export const Localities = TemplateLocalitiesAll.bind({});

package/src/components/Demo/LocalitiesDemo.js

@@ -194,6 +194,7 @@ export default class LocalitiesDemo extends Component {
 
     renderHeaderFilters = () => {
         const { input } = this.state;
+        const { usecaseFilter } = this.props;
         const inputFilter = {
             label: tr('Type in '),
             component: (
@@ -205,7 +206,7 @@ export default class LocalitiesDemo extends Component {
                 />
             ),
         };
-        return [inputFilter];
+        return [usecaseFilter, inputFilter];
     };
 
     renderFooterFilters = () => {
@@ -256,17 +257,12 @@ export default class LocalitiesDemo extends Component {
 
     render() {
         const { localities, error } = this.state;
-        const { noheader } = this.props;
-        const headerLabels = {
-            title: tr('Localities API'),
-            desc: tr(
-                'Offer autocomplete on city names, suburb names, postcodes and full addresses in some countries. Accelerate customer journey by searching on full words as well as substrings, with high flexibility on typos.'
-            ),
-        };
+        const { noheader, headerLabels, subHeader } = this.props;
         return (
             <Demo
                 id="localities-demo"
                 header={headerLabels}
+                subHeader={subHeader}
                 docLink="https://developers.woosmap.com/products/localities/get-started/"
                 className="demo--localities"
                 footerFilters={this.renderFooterFilters()}
@@ -285,7 +281,13 @@ export default class LocalitiesDemo extends Component {
 
 LocalitiesDemo.defaultProps = {
     noheader: false,
+    headerLabels: {},
+    usecaseFilter: null,
+    subHeader: null,
 };
 LocalitiesDemo.propTypes = {
     noheader: PropTypes.bool,
+    headerLabels: PropTypes.object,
+    usecaseFilter: PropTypes.object,
+    subHeader: PropTypes.object,
 };

package/src/components/Demo/MerchantDemo.js

@@ -234,12 +234,10 @@ export default class MerchantDemo extends Component {
         if (!transaction) {
             return JSON.stringify(
                 {
-                    merchants: [
-                        request.merchants.map((item) => ({
-                            dirty_name: item.dirty_name,
-                            country: item.country,
-                        })),
-                    ],
+                    merchants: request.merchants.map((item) => ({
+                        dirty_name: item.dirty_name,
+                        country: item.country,
+                    })),
                 },
                 null,
                 2

package/src/components/Demo/Showcase.stories.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import DistanceDemo from './DistanceDemo';
 import GeolocationDemo from './GeolocationDemo';
-import LocalitiesDemo from './LocalitiesDemo';
+import LocalitiesDemo from './LocalitiesAllDemo';
 import MerchantDemo from './MerchantDemo';
 import MapDemo from './MapDemo';
 import SearchDemo from './SearchDemo';

package/src/components/Demo/SkeletonDemo.js

@@ -123,12 +123,15 @@ export default class SkeletonDemo extends Component {
         if (!headerFilters) {
             return null;
         }
-        return headerFilters.map((filter) => (
-            <div key={filter.label || filter.key} className="demo__input-container">
-                {filter.label ? <p className="demo__label">{filter.label}</p> : false}
-                {filter.component}
-            </div>
-        ));
+        return headerFilters.map(
+            (filter) =>
+                filter && (
+                    <div key={filter.label || filter.key} className={cl('demo__input-container', filter.className)}>
+                        {filter.label ? <p className="demo__label">{filter.label}</p> : false}
+                        {filter.component}
+                    </div>
+                )
+        );
     };
 
     renderFooterFilters = () => {
@@ -162,6 +165,7 @@ export default class SkeletonDemo extends Component {
             docLink,
             docLabel,
             renderCode,
+            subHeader,
         } = this.props;
         const { copied } = this.state;
         return (
@@ -192,6 +196,7 @@ export default class SkeletonDemo extends Component {
                                     {docLabel || tr('Go to documentation')}
                                 </a>
                             </p>
+                            <div className="demo__desc">{subHeader}</div>
                         </div>
                     )}
                 </div>
@@ -285,6 +290,7 @@ SkeletonDemo.defaultProps = {
     body: '',
     method: '',
     header: null,
+    subHeader: null,
 };
 SkeletonDemo.propTypes = {
     id: PropTypes.string,
@@ -305,5 +311,6 @@ SkeletonDemo.propTypes = {
     referer: PropTypes.string,
     body: PropTypes.string,
     method: PropTypes.string,
+    subHeader: PropTypes.object,
     response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };

package/src/components/withClickOutside/withClickOutside.js

@@ -7,13 +7,17 @@ export default function withClickOutside(WrappedComponent, ignoreQuerySelector)
             super(props);
             const { forwardedRef } = this.props;
             this.ref = forwardedRef || React.createRef();
-            document.addEventListener('mousedown', this.listener);
-            document.addEventListener('touchstart', this.listener);
+            if (typeof window === 'object') {
+                document.addEventListener('mousedown', this.listener);
+                document.addEventListener('touchstart', this.listener);
+            }
         }
 
         componentWillUnmount() {
-            document.removeEventListener('mousedown', this.listener);
-            document.removeEventListener('touchstart', this.listener);
+            if (typeof window === 'object') {
+                document.removeEventListener('mousedown', this.listener);
+                document.removeEventListener('touchstart', this.listener);
+            }
         }
 
         listener = (event) => {
@@ -65,7 +69,7 @@ export default function withClickOutside(WrappedComponent, ignoreQuerySelector)
         disableCloseOutside: false,
     };
     WithClickOutside.propTypes = {
-        forwardedRef: PropTypes.object,
+        forwardedRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
         disableCloseOutside: PropTypes.bool,
     };
 

package/src/locales/en/translation.json

@@ -15,6 +15,8 @@
   "Bose Reseller Store": "Bose Reseller Store",
   "Bose Store": "Bose Store",
   "Cancel": "Cancel",
+  "Checkout": "Checkout",
+  "Checkout integration: on full addresses, renders the right part of the address in the right form fields": "Checkout integration: on full addresses, renders the right part of the address in the right form fields",
   "Choose your style": "Choose your style",
   "Code": "Code",
   "Coming step": "Coming step",
@@ -60,7 +62,6 @@
   "New": "New",
   "No locality found": "No locality found",
   "No route found": "No route found",
-  "Offer autocomplete on city names, suburb names, postcodes and full addresses in some countries. Accelerate customer journey by searching on full words as well as substrings, with high flexibility on typos.": "Offer autocomplete on city names, suburb names, postcodes and full addresses in some countries. Accelerate customer journey by searching on full words as well as substrings, with high flexibility on typos.",
   "Origin": "Origin",
   "Parking": "Parking",
   "Point of interest": "Point of interest",
@@ -79,6 +80,8 @@
   "Should be at least {{count}} chars long__plural": "Should be at least {{count}} chars long",
   "Should be at most {{count}} chars long": "Should be at most {{count}} char long",
   "Should be at most {{count}} chars long__plural": "Should be at most {{count}} chars long",
+  "Store Locator": "Store Locator",
+  "Store Locator integration: autocomplete on city names, suburb names, postcodes...": "Store Locator integration: autocomplete on city names, suburb names, postcodes...",
   "Store Search API": "Store Search API",
   "The Woosmap Distance API delivers road distance and travel time between origins and destinations, to plan a simple journey (up to 25 waypoints) or for matrix computations (up to 200 elements).": "The Woosmap Distance API delivers road distance and travel time between origins and destinations, to plan a simple journey (up to 25 waypoints) or for matrix computations (up to 200 elements).",
   "The value you’ve entered is already in the list": "The value you’ve entered is already in the list",
@@ -93,11 +96,13 @@
   "Type in an address": "Type in an address",
   "Type in an address ": "Type in an address ",
   "Types": "Types",
-  "Usecase": "Usecase",
+  "Use case": "Use case",
   "Validate": "Validate",
   "Wheelchair Access": "Wheelchair Access",
+  "Woosmap Localities sorts and displays the 5 most relevant results, with priority to the most likely results, recognises common abbreviations and apostrophes, with high tolerance for typos.": "Woosmap Localities sorts and displays the 5 most relevant results, with priority to the most likely results, recognises common abbreviations and apostrophes, with high tolerance for typos.",
   "Woosmap Map is a vector tiles map based, which guarantees smooth zooming and panning transitions, a mobile-optimised loading and clear rendering at every scale. It provides a worldwide cover, cutting edge details and ability to display 3D buildings at closest/street zoom levels.": "Woosmap Map is a vector tiles map based, which guarantees smooth zooming and panning transitions, a mobile-optimised loading and clear rendering at every scale. It provides a worldwide cover, cutting edge details and ability to display 3D buildings at closest/street zoom levels.",
   "YOUR_KEY_HERE": "YOUR_KEY_HERE",
+  "You can select bewteen 2 use cases:": "You can select bewteen 2 use cases:",
   "Zoos": "Zoos",
   "http://developers.woosmap.com": "http://developers.woosmap.com",
   "near ... ": "near ... ",

package/src/locales/fr/translation.json

@@ -15,9 +15,11 @@
   "Bose Reseller Store": "Revendeur Bose",
   "Bose Store": "Magasin Bose",
   "Cancel": "Annuler",
+  "Checkout": "Checkout",
+  "Checkout integration: on full addresses, renders the right part of the address in the right form fields": "Cas d’usage type Checkout :  autocompletion sur une adresse complète pour pré-remplir les champs d’un formulaire",
   "Choose your style": "Choisir le style",
   "Code": "Code",
-  "Coming step": "",
+  "Coming step": "Prochaine étape",
   "Confirm": "Confirmer",
   "Continent": "Continent",
   "Copied!": "Copié !",
@@ -60,7 +62,6 @@
   "New": "Nouveau",
   "No locality found": "Aucune localité correspondante",
   "No route found": "Aucune route correspondante",
-  "Offer autocomplete on city names, suburb names, postcodes and full addresses in some countries. Accelerate customer journey by searching on full words as well as substrings, with high flexibility on typos.": "Woosmap Localities API permet de proposer de l’autocomplétion sur les noms de ville, les codes postaux, aéroports, stations de métro, centres commerciaux et les adresses postales complètes dans certains pays.",
   "Origin": "Départ",
   "Parking": "Parking",
   "Point of interest": "Points d'intérêt",
@@ -79,6 +80,8 @@
   "Should be at least {{count}} chars long__plural": "Ce champ doit être d'au moins {{count}} caractères",
   "Should be at most {{count}} chars long": "Ce champ doit être d'au plus {{count}} caractère",
   "Should be at most {{count}} chars long__plural": "Ce champ doit être d'au plus {{count}} caractères",
+  "Store Locator": "Store Locator",
+  "Store Locator integration: autocomplete on city names, suburb names, postcodes...": "Cas d’usage type Store Locator : autocomplétion sur les noms de ville, les codes postaux, les aéroports, les stations de métro, les centres commerciaux...",
   "Store Search API": "Store Search API",
   "The Woosmap Distance API delivers road distance and travel time between origins and destinations, to plan a simple journey (up to 25 waypoints) or for matrix computations (up to 200 elements).": "L'API Woosmap Distance fournit la distance et le temps de parcours entre 2 coordonnées géographiques pour un trajet simple (avec jusqu’à 25 points de passage) ou pour des calculs matriciels (jusqu’à 200 éléments).",
   "The value you’ve entered is already in the list": "La valeur saisie est déjà dans la liste",
@@ -93,11 +96,13 @@
   "Type in an address": "Adresse",
   "Type in an address ": "Saisir une adresse",
   "Types": "Types",
-  "Usecase": "Cas d'utilisation",
+  "Use case": "Cas d'usage",
   "Validate": "Valider",
   "Wheelchair Access": "Accès handicapés",
+  "Woosmap Localities sorts and displays the 5 most relevant results, with priority to the most likely results, recognises common abbreviations and apostrophes, with high tolerance for typos.": "Woosmap Localities trie et affiche les 5 résultats les plus pertinents, avec en priorité les résultats les plus probables, sait reconnaître les abréviations courantes et les apostrophes en intégrant une grande tolérance aux fautes de frappe.",
   "Woosmap Map is a vector tiles map based, which guarantees smooth zooming and panning transitions, a mobile-optimised loading and clear rendering at every scale. It provides a worldwide cover, cutting edge details and ability to display 3D buildings at closest/street zoom levels.": "Woosmap Map est une carte vectorielle qui garantit une navigation fluide, sans impact sur les performances du navigateur et un téléchargement plus rapide et optimisé pour mobile.",
   "YOUR_KEY_HERE": "VOTRE_CLE_ICI",
+  "You can select bewteen 2 use cases:": "Vous pouvez selectionner l'un des deux cas d'usage suivants :",
   "Zoos": "Zoos",
   "http://developers.woosmap.com": "http://developers.woosmap.com",
   "near ... ": "à proximité de ... ",

package/src/styles/console/colors.styl

@@ -251,178 +251,25 @@ $light1 = rgba(255, 255, 255, .01)
 
 $localitiesDark = rgba(0, 152, 220, 1) // #00b0ff
 $localities = rgba(0, 176, 255, 1) // #00B0FF
-$localities95 = rgba(0, 176, 255, .95)
-$localities90 = rgba(0, 176, 255, .9)
-$localities85 = rgba(0, 176, 255, .85)
-$localities80 = rgba(0, 176, 255, .8)
-$localities75 = rgba(0, 176, 255, .75)
-$localities70 = rgba(0, 176, 255, .7)
-$localities65 = rgba(0, 176, 255, .65)
-$localities60 = rgba(0, 176, 255, .6)
-$localities55 = rgba(0, 176, 255, .55)
-$localities50 = rgba(0, 176, 255, .5)
-$localities45 = rgba(0, 176, 255, .45)
-$localities40 = rgba(0, 176, 255, .4)
-$localities35 = rgba(0, 176, 255, .35)
-$localities30 = rgba(0, 176, 255, .3)
-$localities25 = rgba(0, 176, 255, .25)
-$localities20 = rgba(0, 176, 255, .2)
-$localities15 = rgba(0, 176, 255, .15)
-$localities10 = rgba(0, 176, 255, .1)
-$localities5 = rgba(0, 176, 255, .05)
 
 $geolocationDark = rgba(1, 175, 73, 1) // #01af49
-$geolocation = rgba(0, 200, 83, 1) // #81C784
-$geolocation95 = rgba(0, 200, 83, .95)
-$geolocation90 = rgba(0, 200, 83, .9)
-$geolocation85 = rgba(0, 200, 83, .85)
-$geolocation80 = rgba(0, 200, 83, .8)
-$geolocation75 = rgba(0, 200, 83, .75)
-$geolocation70 = rgba(0, 200, 83, .7)
-$geolocation65 = rgba(0, 200, 83, .65)
-$geolocation60 = rgba(0, 200, 83, .6)
-$geolocation55 = rgba(0, 200, 83, .55)
-$geolocation50 = rgba(0, 200, 83, .5)
-$geolocation45 = rgba(0, 200, 83, .45)
-$geolocation40 = rgba(0, 200, 83, .4)
-$geolocation35 = rgba(0, 200, 83, .35)
-$geolocation30 = rgba(0, 200, 83, .3)
-$geolocation25 = rgba(0, 200, 83, .25)
-$geolocation20 = rgba(0, 200, 83, .2)
-$geolocation15 = rgba(0, 200, 83, .15)
-$geolocation10 = rgba(0, 200, 83, .1)
-$geolocation5 = rgba(0, 200, 83, .05)
+$geolocation = rgba(0, 200, 83, 1) // #00c853
 
 $distanceDark = rgba(255, 115, 0, 1) // #FF7300
 $distance = rgba(255, 145, 0, 1) // #FF9100
-$distance95 = rgba(255, 145, 0, .95)
-$distance90 = rgba(255, 145, 0, .9)
-$distance85 = rgba(255, 145, 0, .85)
-$distance80 = rgba(255, 145, 0, .8)
-$distance75 = rgba(255, 145, 0, .75)
-$distance70 = rgba(255, 145, 0, .7)
-$distance65 = rgba(255, 145, 0, .65)
-$distance60 = rgba(255, 145, 0, .6)
-$distance55 = rgba(255, 145, 0, .55)
-$distance50 = rgba(255, 145, 0, .5)
-$distance45 = rgba(255, 145, 0, .45)
-$distance40 = rgba(255, 145, 0, .4)
-$distance35 = rgba(255, 145, 0, .35)
-$distance30 = rgba(255, 145, 0, .3)
-$distance25 = rgba(255, 145, 0, .25)
-$distance20 = rgba(255, 145, 0, .2)
-$distance15 = rgba(255, 145, 0, .15)
-$distance10 = rgba(255, 145, 0, .1)
-$distance5 = rgba(255, 145, 0, .05)
 
 $storesDark = rgba(37, 109, 212, 1) // #256dd4
-$stores = rgba(56, 138, 255, 1) // #448AFF
-$stores95 = rgba(56, 138, 255, .95)
-$stores90 = rgba(56, 138, 255, .9)
-$stores85 = rgba(56, 138, 255, .85)
-$stores80 = rgba(56, 138, 255, .8)
-$stores75 = rgba(56, 138, 255, .75)
-$stores70 = rgba(56, 138, 255, .7)
-$stores65 = rgba(56, 138, 255, .65)
-$stores60 = rgba(56, 138, 255, .6)
-$stores55 = rgba(56, 138, 255, .55)
-$stores50 = rgba(56, 138, 255, .5)
-$stores45 = rgba(56, 138, 255, .45)
-$stores40 = rgba(56, 138, 255, .4)
-$stores35 = rgba(56, 138, 255, .35)
-$stores30 = rgba(56, 138, 255, .3)
-$stores25 = rgba(56, 138, 255, .25)
-$stores20 = rgba(56, 138, 255, .2)
-$stores15 = rgba(56, 138, 255, .15)
-$stores10 = rgba(56, 138, 255, .1)
-$stores5 = rgba(56, 138, 255, .05)
+$stores = rgba(56, 138, 255, 1) // #388aff
 
 $addressDark = rgba(59, 179, 195, 1) // #38b3c3
-$address = rgba(77, 208, 255, 1) //  #4DD0E1
-$address95 = rgba(77, 208, 255, .95)
-$address90 = rgba(77, 208, 255, .9)
-$address85 = rgba(77, 208, 255, .85)
-$address80 = rgba(77, 208, 255, .8)
-$address75 = rgba(77, 208, 255, .75)
-$address70 = rgba(77, 208, 255, .7)
-$address65 = rgba(77, 208, 255, .65)
-$address60 = rgba(77, 208, 255, .6)
-$address55 = rgba(77, 208, 255, .55)
-$address50 = rgba(77, 208, 255, .5)
-$address45 = rgba(77, 208, 255, .45)
-$address40 = rgba(77, 208, 255, .4)
-$address35 = rgba(77, 208, 255, .35)
-$address30 = rgba(77, 208, 255, .3)
-$address25 = rgba(77, 208, 255, .25)
-$address20 = rgba(77, 208, 255, .2)
-$address15 = rgba(77, 208, 255, .15)
-$address10 = rgba(77, 208, 255, .1)
-$address5 = rgba(77, 208, 255, .05)
+$address = rgba(77, 208, 255, 1) //  #4dd0ff
 
 $mapDark = rgba(134,  106, 96, 1) // #866a60
 $map = rgba(161, 136, 127, 1) // #A1887F
-$map95 = rgba(161, 136, 127, .95)
-$map90 = rgba(161, 136, 127, .9)
-$map85 = rgba(161, 136, 127, .85)
-$map80 = rgba(161, 136, 127, .8)
-$map75 = rgba(161, 136, 127, .75)
-$map70 = rgba(161, 136, 127, .7)
-$map65 = rgba(161, 136, 127, .65)
-$map60 = rgba(161, 136, 127, .6)
-$map55 = rgba(161, 136, 127, .55)
-$map50 = rgba(161, 136, 127, .5)
-$map45 = rgba(161, 136, 127, .45)
-$map40 = rgba(161, 136, 127, .4)
-$map35 = rgba(161, 136, 127, .35)
-$map30 = rgba(161, 136, 127, .3)
-$map25 = rgba(161, 136, 127, .25)
-$map20 = rgba(161, 136, 127, .2)
-$map15 = rgba(161, 136, 127, .15)
-$map10 = rgba(161, 136, 127, .1)
-$map5 = rgba(161, 136, 127, .05)
-
 
 
 $merchantDark = rgba(81, 107, 119, 1) // #516b77
 $merchant = rgba(120, 144, 156, 1) // #78909C
-$merchant95 = rgba(120, 144, 156, .95)
-$merchant90 = rgba(120, 144, 156, .9)
-$merchant85 = rgba(120, 144, 156, .85)
-$merchant80 = rgba(120, 144, 156, .8)
-$merchant75 = rgba(120, 144, 156, .75)
-$merchant70 = rgba(120, 144, 156, .7)
-$merchant65 = rgba(120, 144, 156, .65)
-$merchant60 = rgba(120, 144, 156, .6)
-$merchant55 = rgba(120, 144, 156, .55)
-$merchant50 = rgba(120, 144, 156, .5)
-$merchant45 = rgba(120, 144, 156, .45)
-$merchant40 = rgba(120, 144, 156, .4)
-$merchant35 = rgba(120, 144, 156, .35)
-$merchant30 = rgba(120, 144, 156, .3)
-$merchant25 = rgba(120, 144, 156, .25)
-$merchant20 = rgba(120, 144, 156, .2)
-$merchant15 = rgba(120, 144, 156, .15)
-$merchant10 = rgba(120, 144, 156, .1)
-$merchant5 = rgba(120, 144, 156, .05)
 
 $trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
-$traffic = rgba(255, 124, 129, 1) //  #FF4081
-$traffic95 = rgba(255, 124, 129, .95)
-$traffic90 = rgba(255, 124, 129, .9)
-$traffic85 = rgba(255, 124, 129, .85)
-$traffic80 = rgba(255, 124, 129, .8)
-$traffic75 = rgba(255, 124, 129, .75)
-$traffic70 = rgba(255, 124, 129, .7)
-$traffic65 = rgba(255, 124, 129, .65)
-$traffic60 = rgba(255, 124, 129, .6)
-$traffic55 = rgba(255, 124, 129, .55)
-$traffic50 = rgba(255, 124, 129, .5)
-$traffic45 = rgba(255, 124, 129, .45)
-$traffic40 = rgba(255, 124, 129, .4)
-$traffic35 = rgba(255, 124, 129, .35)
-$traffic30 = rgba(255, 124, 129, .3)
-$traffic25 = rgba(255, 124, 129, .25)
-$traffic20 = rgba(255, 124, 129, .2)
-$traffic15 = rgba(255, 124, 129, .15)
-$traffic10 = rgba(255, 124, 129, .1)
-$traffic5 = rgba(255, 124, 129, .05)
+$traffic = rgba(255, 124, 129, 1) // #ff7c81

package/src/styles/console/skeletondemo.styl

@@ -62,6 +62,7 @@ $mapHeight = 36rem
 			max-height 49.1rem!important
 		.demo__map
 			height 54rem
+			width 50rem
 	&--map
 		.demo__map
 			width 55rem
@@ -89,7 +90,13 @@ $mapHeight = 36rem
 		a
 			color $primary
 			font-weight 600
-			cursor pointer 
+			cursor pointer
+		&__list
+			margin-left 6rem
+			li
+				list-style disc
+				list-style-position inside
+				margin-bottom 1rem
 	&__cost
 		display block
 		margin-bottom 1rem
@@ -417,6 +424,10 @@ $mapHeight = 36rem
 					.demo
 						&__input-container
 							margin-right 0
+				.demo--localities &
+					.demo__input-container
+						&:first-child
+							margin-bottom 3rem
 		&__input-container
 			align-items flex-start
 			flex-direction column
@@ -495,6 +506,12 @@ $mapHeight = 36rem
 			font-size 80% !important
 			.demo--merchant &
 				justify-content center
+		&.demo--localities
+			.demo
+				&__content-header
+					flex-direction column
+				&__input-container
+					margin-right 0
 @media screen and (max-width 440px)
 	.demo
 		&.demo--distance
@@ -548,6 +565,9 @@ $mapHeight = 36rem
 					font-size 1.4rem
 					height 3.6rem
 					padding 0 .8rem
+		&__desc
+			&__list
+				margin-left 2rem
 			
 @media screen and (max-width 370px)
 	.demo

package/src/styles/website/skeletondemo.styl

@@ -2,6 +2,7 @@
 $mapWidth = 40rem
 $mapWidthSmall = 40rem
 $mapHeight = 36rem
+$bigMapHeight = 59.5rem
 
 // Overall style
 .demo
@@ -27,6 +28,10 @@ $mapHeight = 36rem
 			max-height 57rem
 		.demo__label
 			white-space normal
+	&--localities
+		.tab__content
+			height 55rem
+			max-height 55rem
 	&--map
 		.tab__content
 			height 49.6rem
@@ -95,10 +100,18 @@ $mapHeight = 36rem
 		font-weight 400
 		line-height 3.2rem
 		margin-bottom 3rem
+		&__list
+			margin-left 60px
+			li
+				list-style disc
+				list-style-position inside
+				margin 5px 0 5px 0
 		a
 			color $primary
 			font-weight 600
-			cursor pointer 
+			cursor pointer
+		p
+			margin-bottom 20px
 	&__cost
 		display block
 		margin-bottom 1rem
@@ -147,14 +160,13 @@ $mapHeight = 36rem
 			.demo--distance &
 			.demo--address &
 			.demo--localitiesaddress &
+			.demo--localities &
 				margin-bottom 1rem
 				.demo__input-container
 					margin-bottom 2rem
-			.demo--localitiesaddress &
-				.demo__input-container
-					width 100%
 			.demo--address &
 			.demo--localitiesaddress &
+			.demo--localities &
 				mbi(4)
 				flex-wrap nowrap
 				> :nth-child(2)
@@ -215,6 +227,8 @@ $mapHeight = 36rem
 		button
 			&:focus
 				box-shadow 0 0 0 .1rem $focus
+		.demo--localities &
+			height $bigMapHeight
 	&__results
 		background $result
 		width 30rem
@@ -222,6 +236,8 @@ $mapHeight = 36rem
 		max-height $mapHeight
 		box-shadow 0 0 1rem $dark15
 		z-index 2
+		.demo--localities &
+			max-height unset
 		.demo--localities--uk &
 			width 50rem
 			max-height unset
@@ -280,6 +296,7 @@ $mapHeight = 36rem
 				background-color #f3f9fd
 			.demo--address &
 			.demo--localitiesaddress &
+			.demo--localities &
 				height auto
 		.localities-matched
 			background-color $resultMatch
@@ -402,9 +419,6 @@ $mapHeight = 36rem
 					width 100%
 					flexAxis()
 @media screen and (max-width 960px)
-	.demo.demo--localities
-		.demo__input-container
-			margin-right 0
 	.demo
 		&__results
 			&__content
@@ -446,6 +460,12 @@ $mapHeight = 36rem
 			font-size $inputFontSize - .2
 			.demo--merchant &
 				justify-content center
+		&.demo--localities
+			.demo
+				&__content-header
+					flex-direction column
+				&__input-container
+					margin-right 0
 @media screen and (max-width 440px)
 	.demo
 		&.demo--distance
@@ -498,7 +518,9 @@ $mapHeight = 36rem
 					font-size 1.4rem
 					height 3.6rem
 					padding 0 .8rem
-			
+		&__desc
+			&__list
+				margin-left 20px
 @media screen and (max-width 370px)
 	.demo
 		&.demo--merchant