@woosmap/ui 2.7.0 → 2.11.0

package/src/components/Demo/SkeletonDemo.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import cl from 'classnames';
 import PropTypes from 'prop-types';
 import copy from '../utils/CopyToClipoard';
+import Constants from '../../Constants';
 import { tr } from '../utils/locale';
 import Tab from '../Tab/Tab';
 import CodeSnippet from '../CodeSnippet/CodeSnippet';
@@ -37,8 +38,11 @@ export default class SkeletonDemo extends Component {
 
     copy = (text) => {
         const { copied } = this.state;
-
-        if (text !== null && copy(text) && !copied) {
+        let textToCopy = text;
+        if (textToCopy) {
+            textToCopy = textToCopy.replace(Constants.woosmapKey, tr('YOUR_KEY_HERE'));
+        }
+        if (textToCopy !== null && copy(textToCopy) && !copied) {
             this.setState({ copied: true });
             this.copyTimeout = setTimeout(() => this.setState({ copied: false }), 1000);
         }
@@ -119,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 = () => {
@@ -158,6 +165,7 @@ export default class SkeletonDemo extends Component {
             docLink,
             docLabel,
             renderCode,
+            subHeader,
         } = this.props;
         const { copied } = this.state;
         return (
@@ -188,6 +196,7 @@ export default class SkeletonDemo extends Component {
                                     {docLabel || tr('Go to documentation')}
                                 </a>
                             </p>
+                            <div className="demo__desc">{subHeader}</div>
                         </div>
                     )}
                 </div>
@@ -281,6 +290,7 @@ SkeletonDemo.defaultProps = {
     body: '',
     method: '',
     header: null,
+    subHeader: null,
 };
 SkeletonDemo.propTypes = {
     id: PropTypes.string,
@@ -301,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/Label/Label.js

@@ -5,8 +5,21 @@ import Button from '../Button/Button';
 
 export default class Label extends Component {
     render() {
-        const { size, round, label, color, privilege, product, closable, closeCb, className, isPill, noWrap, ...rest } =
-            this.props;
+        const {
+            size,
+            round,
+            label,
+            color,
+            privilege,
+            product,
+            closable,
+            closeCb,
+            className,
+            isPill,
+            noWrap,
+            plan,
+            ...rest
+        } = this.props;
         const classes = cl(
             'label',
             { 'label--round': round },
@@ -16,6 +29,7 @@ export default class Label extends Component {
             privilege ? `label--${privilege}` : null,
             isPill ? 'label--pill' : null,
             noWrap ? 'label--nowrap' : null,
+            plan ? `label--${plan}` : null,
             className
         );
         return (
@@ -39,6 +53,7 @@ Label.defaultProps = {
     closeCb: null,
     isPill: null,
     noWrap: null,
+    plan: undefined,
 };
 
 Label.propTypes = {
@@ -57,6 +72,7 @@ Label.propTypes = {
         'traffic',
         undefined,
     ]),
+    plan: PropTypes.oneOf(['free', 'standard', 'enterprise', undefined]),
     size: PropTypes.oneOf(['small', 'mini', 'nano', undefined]),
     privilege: PropTypes.oneOf(['superuser', 'staff', 'owner', 'co-owner', undefined]),
     round: PropTypes.bool,

package/src/components/Label/Label.styl

@@ -73,6 +73,12 @@
 		background-color $merchant
 	&--traffic
 		background-color $traffic
+	&--free
+		background-color $free
+	&--standard
+		background-color $standard
+	&--enterprise
+		background-color $enterprise
 	&--superuser
 		background-color $superuser
 	&--staff

package/src/components/Woosmap/AddressAutocomplete.js

@@ -167,7 +167,7 @@ AddressAutocomplete.defaultProps = {
     defaultValue: null,
     apiOrder: ['localities', 'address'],
     language: null,
-    componentsLocalities: { country: ['gb'] },
+    componentsLocalities: { country: ['fr', 'gb'] },
     componentsAddress: null,
     inputChangeCb: null,
 };

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",
@@ -26,7 +28,7 @@
   "Customized Solutions": "Customized Solutions",
   "Default": "Default",
   "Destination": "Destination",
-  "Display Map Pois": "Display Map Pois",
+  "Display Map POIs": "Display Map POIs",
   "Display Woosmap Stores overlay": "Display Woosmap Stores overlay",
   "Display your regional promotions and catchment area.": "Display your regional promotions and catchment area.",
   "Distance API": "Distance API",
@@ -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",
@@ -73,13 +74,15 @@
   "Response": "Response",
   "Results": "Results",
   "Schedule a Demo": "Schedule a Demo",
-  "Search API": "Search API",
   "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.": "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.",
   "Shopping centers": "Shopping centers",
   "Should be at least {{count}} chars long": "Should be at least {{count}} char long",
   "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",
   "There are some errors": "There are some errors",
@@ -93,10 +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é !",
@@ -26,7 +28,7 @@
   "Customized Solutions": "Solutions personnalisées",
   "Default": "Défaut",
   "Destination": "Destination",
-  "Display Map Pois": "Afficher les Pois de la carte",
+  "Display Map POIs": "Afficher les POIs de la carte",
   "Display Woosmap Stores overlay": "Afficher la couche de magasins Woosmap",
   "Display your regional promotions and catchment area.": "Affichez les offres promotionnelles de la région, et la zone de chalandise.",
   "Distance API": "Distance API",
@@ -60,11 +62,10 @@
   "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",
-  "Postal code": "Codes postal",
+  "Postal code": "Code postal",
   "Postal codes": "Codes postaux",
   "Region / State": "Région / Etat",
   "Request": "Requête",
@@ -73,13 +74,15 @@
   "Response": "Réponse",
   "Results": "Résultats",
   "Schedule a Demo": "Démo vendeur",
-  "Search API": "Search API",
   "Search among your own Points of Interest. Find stores by geography, by attributes or by autocomplete on store names.": "Un moteur de recherche dédié pour vos propres données. Trouvez des points de vente dans un rayon donné autour de coordonnées géographiques, par leurs attributs ou par autocomplétion sur les noms de magasins.",
   "Shopping centers": "Centres commerciaux",
   "Should be at least {{count}} chars long": "Ce champ doit être d'au moins {{count}} caractère",
   "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",
   "There are some errors": "Des erreurs se sont produites",
@@ -93,10 +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

@@ -98,11 +98,15 @@ $metricsLastCreatedProjects = rgba(233, 249, 242, 1) // #e9f9f2
 $apiKey = #595390
 
 // Privilege
-$superuser = #5d8cbd
+$superuser = #277ed7
 $staff = #ec4a8e
 $owner = #4e6d94
 $co-owner = #6fbb8a
 
+// Plans
+$free = #72b3a7
+$standard = #4b7bd3
+$enterprise = #c3417d
 
 // Alerts
 $success2 = rgba(14, 206, 170, 1)// #0eceaa
@@ -247,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

@@ -50,6 +50,7 @@ $mapHeight = 36rem
 				padding 1.6rem 2.6rem 3rem 2.6rem
 				mbib(2)
 	&--address
+	&--localitiesaddress
 		&__formcontainer
 			width 100%
 			height 100%
@@ -61,6 +62,7 @@ $mapHeight = 36rem
 			max-height 49.1rem!important
 		.demo__map
 			height 54rem
+			width 50rem
 	&--map
 		.demo__map
 			width 55rem
@@ -88,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
@@ -131,14 +139,19 @@ $mapHeight = 36rem
 			.demo--search &
 			.demo--distance &
 			.demo--address &
+			.demo--localitiesaddress &
 				margin-bottom 1rem
 				.demo__input-container
 					margin-bottom 2rem
 			.demo--address &
+			.demo--localitiesaddress &
 				mbi(4)
 				flex-wrap nowrap
 				> :nth-child(2)
 					width 100%
+			.demo--localitiesaddress &
+				.demo__input-container
+					width 100%
 		&-footer
 		&-header
 			mbi(2)
@@ -160,6 +173,7 @@ $mapHeight = 36rem
 				.demo__input-container
 					margin-bottom 0rem
 			.demo--address &
+			.demo--localitiesaddress &
 				mbi(4)
 				:nth-child(2)
 					.select
@@ -211,6 +225,7 @@ $mapHeight = 36rem
 			box-shadow none
 			zoom .8
 		.demo--address &
+		.demo--localitiesaddress &
 			width 34rem
 		&__header
 			mbi(2)
@@ -225,6 +240,7 @@ $mapHeight = 36rem
 			box-shadow 0 0 .6rem $dark15
 			.demo--localities--uk &
 			.demo--address &
+			.demo--localitiesaddress &
 				display none
 			.demo--distance &
 				background $distance
@@ -233,6 +249,7 @@ $mapHeight = 36rem
 				background $localities
 				background linear-gradient(90deg, $localities 70%, $localitiesDark 100%)
 			.demo--address &
+			.demo--localitiesaddress &
 				background $address
 				background linear-gradient(90deg, $address 70%, $addressDark 100%)
 			.demo--merchant &
@@ -262,11 +279,13 @@ $mapHeight = 36rem
 				mbib(1)
 			.demo--localities--uk &
 			.demo--address &
+			.demo--localitiesaddress &
 				padding 0
 				font-size 1.5rem
 				mbib(2)
 				background-color #f3f9fd
 			.demo--address &
+			.demo--localitiesaddress &
 				height auto
 		.localities-matched
 			background-color $resultMatch
@@ -295,6 +314,7 @@ $mapHeight = 36rem
 					background $localities
 					background linear-gradient(90deg, $localitiesDark 0%, $localities 20%)
 				.demo--address &
+				.demo--localitiesaddress &
 					background $address
 					background linear-gradient(90deg, $addressDark 0%, $address 20%)
 				.demo--merchant &
@@ -366,6 +386,7 @@ $mapHeight = 36rem
 			&-footer
 				.demo--distance &
 				.demo--address &
+				.demo--localitiesaddress &
 				.demo--map &
 					margin-bottom 0
 					.demo
@@ -387,6 +408,7 @@ $mapHeight = 36rem
 							margin-bottom 0
 			&-header
 				.demo--address &
+				.demo--localitiesaddress &
 					flex-wrap wrap
 				.demo--geolocation &
 					margin-bottom 2rem
@@ -402,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
@@ -445,6 +471,7 @@ $mapHeight = 36rem
 			&-footer
 				flex-direction column
 				.demo--address &
+				.demo--localitiesaddress &
 				.demo--map &
 				.demo--distance &
 					flex-direction row
@@ -479,10 +506,17 @@ $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
 		&.demo--address
+		.demo--localitiesaddress &
 		&.demo--map
 			.demo__input-container
 				&:nth-child(3)
@@ -495,6 +529,7 @@ $mapHeight = 36rem
 		&.demo--distance
 		&.demo--localities
 		&.demo--address
+		.demo--localitiesaddress &
 			.flag
 				width 2rem
 				height 1.4rem
@@ -514,9 +549,13 @@ $mapHeight = 36rem
 					justify-content flex-start
 					flex-direction column
 		&.demo--address
+		&.demo--localitiesaddress
 			.demo__input-container--inline
 				.input
 					margin 0 0 2rem 0
+		&.demo--localitiesaddress
+			.demo__input-container
+				width 100%
 		&.demo--merchant
 			.demo__results
 				padding 2rem 0
@@ -526,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