@woosmap/ui 3.122.0 → 3.125.0

package/.eslintrc

@@ -38,12 +38,23 @@
       }
     ],
     "no-plusplus": 0,
-    "no-console": ["warn", { "allow": ["warn", "error"]}],
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
     "semi": 1,
-    "prefer-destructuring": ["warn", {
-      "array": true,
-      "object": true
-    }],
+    "prefer-destructuring": [
+      "warn",
+      {
+        "array": true,
+        "object": true
+      }
+    ],
     "prettier/prettier": [
       "error",
       {
@@ -53,5 +64,15 @@
         "printWidth": 120
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*stories.js"
+      ],
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ]
 }

package/package.json

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

package/src/Constants.js

@@ -1,5 +1,6 @@
-export default {
+export default Object.freeze({
     woosmapKey: 'woos-5ec4eecd-d907-3da0-90f0-f2f3b7e4e672',
     geolocationWoosmapSearchKey: 'woos-81a699ca-5082-3ffd-9f54-a684a4b82853',
     gmapKey: 'AIzaSyAogtvSQJ8e1LO6WH6GzSI-QtwaRPCV5C8',
-};
+    woosmapMapSdkUrl: 'https://sdk.woosmap.com/map/map.js',
+});

package/src/components/Button/Button.js

@@ -26,6 +26,7 @@ export default class Button extends Component {
             children,
             testId,
             iconRight,
+            isNotification,
             ...rest
         } = this.props;
         const classes = cl(
@@ -36,6 +37,7 @@ export default class Button extends Component {
             size ? `btn--${size}` : null,
             type ? `btn--${type}` : null,
             { active },
+            isNotification ? 'btn--notification' : null,
             { 'btn--loading': isLoading },
             { 'btn--no-label': !label },
             { 'btn--custom-icon-size': iconSize && iconSize !== 24 },
@@ -80,6 +82,7 @@ Button.defaultProps = {
     active: false,
     onClick: null,
     iconRight: false,
+    isNotification: false,
 };
 
 Button.propTypes = {
@@ -115,4 +118,5 @@ Button.propTypes = {
     onClick: PropTypes.func,
     children: PropTypes.node,
     iconRight: PropTypes.bool,
+    isNotification: PropTypes.bool,
 };

package/src/components/Button/Button.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
                 <Button label={label} disabled />
             </div>
             <div className="flex mbi">
-                <Button icon="add" type="secondary" />
+                <Button icon="puzzle" isNotification label="4" type="secondary" />
                 <Button label={label} type="secondary" />
                 <Button label={label} type="secondary" icon="marker" />
                 <Button label={label} type="secondary" isLoading />

package/src/components/Card/Card.js

@@ -190,6 +190,7 @@ Card.propTypes = {
         'MAP',
         'TRAFFIC',
         'MERCHANTS',
+        'LOCALITIES',
     ]),
     iconSize: PropTypes.number,
     isClickable: PropTypes.bool,

package/src/components/Card/Card.styl

@@ -155,6 +155,12 @@
 			-webkit-line-clamp 3
 			-webkit-box-orient vertical
 			margin-bottom 0
+	&__footer
+		.card--normal &
+			width 100%
+			display flex
+			align-items center
+			justify-content space-between
 	&__new-label
 		flexAxis()
 		br()

package/src/components/Demo/AddressDemo.js

@@ -10,7 +10,6 @@ import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
-import Script from '../utils/Script';
 import markerIcon from '../../images/marker.png';
 import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
 
@@ -289,11 +288,11 @@ export default class AddressDemo extends Component {
         };
         const filterGeometry = {
             label: false,
+            key: 'geometry',
             component: (
                 <Input
                     label={tr('Geometry only')}
                     type="checkbox"
-                    key="geometry"
                     checked={geometry}
                     onChange={(e) => {
                         this.setState({ geometry: e.target.checked });
@@ -446,23 +445,20 @@ export default class AddressDemo extends Component {
             }
         }
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    noheader
-                    id="address-demo"
-                    className="demo--address"
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    request={request}
-                    params={this.getRequestparams()}
-                    referer="http://localhost/"
-                    response={error || response}
-                    result={this.renderAddress()}
-                    ref={this.demoRef}
-                    withMap
-                />
-            </>
+            <Demo
+                noheader
+                id="address-demo"
+                className="demo--address"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={request}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || response}
+                result={this.renderAddress()}
+                ref={this.demoRef}
+                withMap
+            />
         );
     }
 }

package/src/components/Demo/DistanceDemo.js

@@ -15,7 +15,6 @@ import CyclingImg from '../../images/cycle.png';
 import WalkingImg from '../../images/walk.png';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
-import Script from '../utils/Script';
 import { createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
@@ -382,25 +381,22 @@ export default class DistanceDemo extends Component {
             ),
         };
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    id="distance-demo"
-                    className="demo--distance"
-                    docLink="https://developers.woosmap.com/products/distance-api/get-started/"
-                    header={headerLabels}
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    request={this.requestUrl}
-                    noheader={noheader}
-                    params={this.getRequestparams()}
-                    referer="http://localhost/"
-                    response={error || routes}
-                    result={this.renderRoutesSummary()}
-                    withMap
-                    ref={this.demoRef}
-                />
-            </>
+            <Demo
+                id="distance-demo"
+                className="demo--distance"
+                docLink="https://developers.woosmap.com/products/distance-api/get-started/"
+                header={headerLabels}
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={this.requestUrl}
+                noheader={noheader}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || routes}
+                result={this.renderRoutesSummary()}
+                withMap
+                ref={this.demoRef}
+            />
         );
     }
 }

package/src/components/Demo/GeolocationDemo.js

@@ -8,7 +8,6 @@ import Constants from '../../Constants';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker-dot.svg';
 import markerGeolocationIcon from '../../images/marker-alt.png';
-import Script from '../utils/Script';
 import Input from '../Input/Input';
 
 import { WoosmapMapBoundingBox, woosmapBoundsFromViewport, createWoosmapMap } from '../Map/drawOnMap';
@@ -117,11 +116,11 @@ export default class GeolocationDemo extends Component {
 
         const filterStores = {
             label: '',
+            key: 'stores',
             component: (
                 <Input
                     label={tr('Display Geolocation POIs')}
                     type="checkbox"
-                    key="stores"
                     checked={showStores}
                     onChange={(e) => {
                         this.setState({ showStores: e.target.checked }, this.displayMap);
@@ -211,25 +210,22 @@ export default class GeolocationDemo extends Component {
             }
         }
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    className="demo--geolocation"
-                    docLink="https://developers.woosmap.com/products/geolocation-api/location/"
-                    id="geolocation-demo"
-                    header={headerLabels}
-                    headerTagline={precisionInfo}
-                    request={this.requestUrl}
-                    params={this.getRequestparams()}
-                    referer="http://localhost/"
-                    noheader={noheader}
-                    response={error || geolocation}
-                    result={this.renderGeolocationInfo()}
-                    withMap
-                    footerFilters={this.renderFooterFilters()}
-                    ref={this.demoRef}
-                />
-            </>
+            <Demo
+                className="demo--geolocation"
+                docLink="https://developers.woosmap.com/products/geolocation-api/location/"
+                id="geolocation-demo"
+                header={headerLabels}
+                headerTagline={precisionInfo}
+                request={this.requestUrl}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                noheader={noheader}
+                response={error || geolocation}
+                result={this.renderGeolocationInfo()}
+                withMap
+                footerFilters={this.renderFooterFilters()}
+                ref={this.demoRef}
+            />
         );
     }
 }

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -9,7 +9,6 @@ import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
 import markerIcon from '../../images/marker.png';
-import Script from '../utils/Script';
 import { createWoosmapMap } from '../Map/drawOnMap';
 
 export default class LocalitiesAddressDemo extends Component {
@@ -209,11 +208,11 @@ export default class LocalitiesAddressDemo extends Component {
         };
         const filterGeometry = {
             label: '',
+            key: 'geometry',
             component: (
                 <Input
                     label={tr('Geometry only')}
                     type="checkbox"
-                    key="geometry"
                     checked={geometry}
                     onChange={(e) => {
                         this.setState({ geometry: e.target.checked });
@@ -344,25 +343,22 @@ export default class LocalitiesAddressDemo extends Component {
             request = this.requestDetailsUrl;
         }
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    noheader={noheader}
-                    header={headerLabels}
-                    subHeader={subHeader}
-                    id="localities-demo"
-                    className="demo--localitiesaddress"
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    request={request}
-                    params={this.getRequestparams()}
-                    referer="http://localhost/"
-                    response={error || response}
-                    result={this.renderAddress()}
-                    withMap
-                    ref={this.demoRef}
-                />
-            </>
+            <Demo
+                noheader={noheader}
+                header={headerLabels}
+                subHeader={subHeader}
+                id="localities-demo"
+                className="demo--localitiesaddress"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={request}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || response}
+                result={this.renderAddress()}
+                withMap
+                ref={this.demoRef}
+            />
         );
     }
 }

package/src/components/Demo/LocalitiesDemo.js

@@ -12,7 +12,6 @@ import CountrySelect from '../Select/CountrySelect';
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
-import Script from '../utils/Script';
 import { WoosmapMapBoundingBox, createWoosmapMap } from '../Map/drawOnMap';
 
 const languages = [
@@ -268,26 +267,23 @@ export default class LocalitiesDemo extends Component {
         const { localities, error } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    id="localities-demo"
-                    header={headerLabels}
-                    subHeader={subHeader}
-                    docLink="https://developers.woosmap.com/products/localities/get-started/"
-                    className="demo--localities"
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    request={this.requestUrl}
-                    noheader={noheader}
-                    params={this.getRequestparams()}
-                    referer="http://localhost/"
-                    response={error || localities}
-                    result={this.renderAutocompleteList()}
-                    withMap
-                    ref={this.demoRef}
-                />
-            </>
+            <Demo
+                id="localities-demo"
+                header={headerLabels}
+                subHeader={subHeader}
+                docLink="https://developers.woosmap.com/products/localities/get-started/"
+                className="demo--localities"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={this.requestUrl}
+                noheader={noheader}
+                params={this.getRequestparams()}
+                referer="http://localhost/"
+                response={error || localities}
+                result={this.renderAutocompleteList()}
+                withMap
+                ref={this.demoRef}
+            />
         );
     }
 }

package/src/components/Demo/MapDemo.js

@@ -8,7 +8,6 @@ import marker from '../../images/marker.png';
 import markerAlt from '../../images/marker-alt.png';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
-import Script from '../utils/Script';
 
 export default class MapDemo extends Component {
     constructor(props) {
@@ -145,11 +144,11 @@ storesOverlay.setMap(map);
         const { hasStores, hasPois } = this.state;
         const filterPois = {
             label: '',
+            key: 'pois',
             component: (
                 <Input
                     label={tr('Display Map POIs')}
                     type="checkbox"
-                    key="pois"
                     checked={hasPois}
                     onChange={(e) => {
                         this.setState({ hasPois: e.target.checked }, this.displayMap);
@@ -160,11 +159,11 @@ storesOverlay.setMap(map);
 
         const filterStores = {
             label: '',
+            key: 'stores',
             component: (
                 <Input
                     label={tr('Display Woosmap Stores overlay')}
                     type="checkbox"
-                    key="stores"
                     checked={hasStores}
                     onChange={(e) => {
                         this.setState({ hasStores: e.target.checked }, this.displayMap);
@@ -177,11 +176,16 @@ storesOverlay.setMap(map);
 
     displayMap = () => {
         const { style, hasStores, hasPois } = this.state;
+
         if (this.timeoutMap) {
             clearTimeout(this.timeoutMap);
         }
-        if (window.woosmap && window.woosmap.map && this.demoRef.current) {
+
+        const MapHTMLElement = this.demoRef?.current?.getMap();
+
+        if (window?.woosmap?.map && MapHTMLElement) {
             window.woosmap.map.config.setApiKey('woos-48c80350-88aa-333e-835a-07f4b658a9a4');
+
             if (!this.storeOverlay) {
                 this.storesOverlay = new window.woosmap.map.StoresOverlay({
                     breakPoint: 14,
@@ -207,12 +211,15 @@ storesOverlay.setMap(map);
                     },
                 });
             }
+
             const styles = [{ featureType: 'poi', stylers: [{ visibility: hasPois ? 'on' : 'off' }] }];
             const colorStyle = this.applyStyle(style);
+
             if (colorStyle) {
                 styles.push(colorStyle);
             }
-            this.map = new window.woosmap.map.Map(this.demoRef.current.getMap(), {
+
+            this.map = new window.woosmap.map.Map(MapHTMLElement, {
                 styles,
                 center: {
                     lat: 51.51,
@@ -220,9 +227,11 @@ storesOverlay.setMap(map);
                 },
                 zoom: 14,
             });
+
             if (hasStores) {
                 this.storesOverlay.setMap(this.map);
             }
+
             this.forceUpdate();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
@@ -244,29 +253,28 @@ storesOverlay.setMap(map);
 
     render() {
         const { noheader } = this.props;
+
         const headerLabels = {
             title: tr('Map API'),
             desc: tr(
                 '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.'
             ),
         };
+
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    ref={this.demoRef}
-                    header={headerLabels}
-                    id="map-demo"
-                    className="demo--map"
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    renderCode={this.renderCode}
-                    noheader={noheader}
-                    referer="http://localhost/"
-                    withMap
-                    response={null}
-                />
-            </>
+            <Demo
+                ref={this.demoRef}
+                header={headerLabels}
+                id="map-demo"
+                className="demo--map"
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                renderCode={this.renderCode}
+                noheader={noheader}
+                referer="http://localhost/"
+                withMap
+                response={null}
+            />
         );
     }
 }
@@ -274,6 +282,7 @@ storesOverlay.setMap(map);
 MapDemo.defaultProps = {
     noheader: false,
 };
+
 MapDemo.propTypes = {
     noheader: PropTypes.bool,
 };

package/src/components/Demo/SearchDemo.js

@@ -10,7 +10,6 @@ import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
 import { tr } from '../utils/locale';
 import markerIcon from '../../images/marker.png';
 import markerIconAlt from '../../images/marker-alt.png';
-import Script from '../utils/Script';
 import { createWoosmapMap } from '../Map/drawOnMap';
 import 'resize-observer-polyfill/dist/ResizeObserver.global';
 
@@ -310,25 +309,22 @@ export default class SearchDemo extends Component {
             ),
         };
         return (
-            <>
-                <Script url="https://sdk.woosmap.com/map/map.js" />
-                <Demo
-                    id="search-demo"
-                    className="demo--search"
-                    docLink="https://developers.woosmap.com/products/search-api/get-started/"
-                    header={headerLabels}
-                    footerFilters={this.renderFooterFilters()}
-                    headerFilters={this.renderHeaderFilters()}
-                    request={this.requestUrl}
-                    params={this.getRequestparams(true)}
-                    referer="http://localhost/"
-                    response={error || data}
-                    noheader={noheader}
-                    result={this.renderStoreList()}
-                    withMap
-                    ref={this.demoRef}
-                />
-            </>
+            <Demo
+                id="search-demo"
+                className="demo--search"
+                docLink="https://developers.woosmap.com/products/search-api/get-started/"
+                header={headerLabels}
+                footerFilters={this.renderFooterFilters()}
+                headerFilters={this.renderHeaderFilters()}
+                request={this.requestUrl}
+                params={this.getRequestparams(true)}
+                referer="http://localhost/"
+                response={error || data}
+                noheader={noheader}
+                result={this.renderStoreList()}
+                withMap
+                ref={this.demoRef}
+            />
         );
     }
 }

package/src/components/Demo/SkeletonDemo.js

@@ -9,16 +9,20 @@ import Tab from '../Tab/Tab';
 import CodeSnippet from '../CodeSnippet/CodeSnippet';
 import uniqueid from '../uniqueid';
 import TrackEventContext from '../utils/TrackEventContext';
+import Script from '../utils/Script';
+
+const MAP_CLASSNAME = 'map';
 
 export default class SkeletonDemo extends Component {
     constructor(props) {
         super(props);
+
         this.state = {
             copied: false,
         };
+
         this.copyActionIdRequest = uniqueid();
         this.copyActionIdResponse = uniqueid();
-        this.mapDivRef = React.createRef();
     }
 
     componentWillUnmount() {
@@ -29,9 +33,11 @@ export default class SkeletonDemo extends Component {
 
     serializedParams = () => {
         const { params } = this.props;
+
         if (!params) {
             return '';
         }
+
         return Object.entries({ ...params })
             .map(([key, value]) => `${key}=${value}`)
             .join('&\\\n');
@@ -40,9 +46,11 @@ export default class SkeletonDemo extends Component {
     copy = (text) => {
         const { copied } = this.state;
         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);
@@ -59,10 +67,8 @@ export default class SkeletonDemo extends Component {
     };
 
     getMap = () => {
-        if (this.mapDivRef) {
-            return this.mapDivRef.current;
-        }
-        return null;
+        const { id } = this.props;
+        return document.querySelector(`#${id} .${MAP_CLASSNAME}`);
     };
 
     renderJsCode = () => {
@@ -93,17 +99,23 @@ export default class SkeletonDemo extends Component {
     renderCurlCode = (removeLineBreak) => {
         const { request, referer, body, method } = this.props;
         let xMethod = '';
+
         if (method) {
             xMethod = `-X ${method} `;
         }
+
         let serializedParams = '';
+
         if (this.serializedParams()) {
             serializedParams = `?\\\n${this.serializedParams()}`;
         }
+
         let curl = `curl ${xMethod}"${request}${serializedParams}" `;
+
         if (referer) {
             curl += `\\\n  -H 'referer: ${referer}'`;
         }
+
         if (body) {
             curl += `\\\n  -d '${body}'`;
         }
@@ -111,14 +123,17 @@ export default class SkeletonDemo extends Component {
         if (removeLineBreak) {
             curl = curl.replaceAll('\\\n', '');
         }
+
         return curl;
     };
 
     renderHeaderTagline = () => {
         const { headerTagline } = this.props;
+
         if (!headerTagline) {
             return null;
         }
+
         return (
             <div className="demo__input-container">
                 <p className="demo__label demo__label--wide">{headerTagline}</p>
@@ -128,9 +143,11 @@ export default class SkeletonDemo extends Component {
 
     renderHeaderFilters = () => {
         const { headerFilters } = this.props;
+
         if (!headerFilters) {
             return null;
         }
+
         return headerFilters.map(
             (filter) =>
                 filter && (
@@ -144,9 +161,11 @@ export default class SkeletonDemo extends Component {
 
     renderFooterFilters = () => {
         const { footerFilters } = this.props;
+
         if (!footerFilters || footerFilters.length === 0) {
             return null;
         }
+
         return footerFilters.map((filter) => (
             <div className="demo__input-container" key={filter.label || filter.key}>
                 {filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
@@ -156,77 +175,91 @@ export default class SkeletonDemo extends Component {
     };
 
     render() {
-        const { result, request, response, renderCode, withMap, mainContent, className } = this.props;
+        const { result, request, response, renderCode, withMap, mainContent, className, id } = this.props;
         const { copied } = this.state;
+
         const filters = this.renderHeaderFilters();
         const filters2 = this.renderFooterFilters();
         const tagLine = this.renderHeaderTagline();
+
         return (
-            <article className={cl('demo', className)}>
-                <div className="demo__content">
-                    <div className="demo__showcase">
-                        {(tagLine || filters || filters2) && (
-                            <div className="demo__filters">
-                                {tagLine}
-                                {filters}
-                                {filters2}
-                            </div>
-                        )}
-                        {withMap && (
-                            <div className="demo__map">
-                                <div className="map" ref={this.mapDivRef} />
-                            </div>
-                        )}
-                        {mainContent && <div className="demo__content">{mainContent}</div>}
-                    </div>
-                    <div className="demo__data">
-                        {result && (
-                            <div className="demo__results">
-                                <div className="demo__results__header">{tr('Results')}</div>
-                                <div className="demo__results__content">{result}</div>
+            <>
+                {withMap && <Script url={Constants.woosmapMapSdkUrl} />}
+                <article className={cl('demo', className)} id={id}>
+                    <div className="demo__content">
+                        <div className="demo__showcase">
+                            {(tagLine || filters || filters2) && (
+                                <div className="demo__filters">
+                                    {tagLine}
+                                    {filters}
+                                    {filters2}
+                                </div>
+                            )}
+
+                            {withMap && (
+                                <div className="demo__map">
+                                    <div className={MAP_CLASSNAME} />
+                                </div>
+                            )}
+
+                            {mainContent && <div className="demo__content">{mainContent}</div>}
+                        </div>
+
+                        <div className="demo__data">
+                            {result && (
+                                <div className="demo__results">
+                                    <div className="demo__results__header">{tr('Results')}</div>
+                                    <div className="demo__results__content">{result}</div>
+                                </div>
+                            )}
+
+                            <div className="demo__code">
+                                <Tab
+                                    actions={[
+                                        {
+                                            title: tr('Request'),
+                                            callback: this.copyRequest,
+                                            label: copied ? tr('Copied!') : tr('Copy'),
+                                            'data-clipboard-text': tr('Copied!'),
+                                            id: this.copyActionIdRequest,
+                                            className: copied ? 'copied' : '',
+                                        },
+                                        {
+                                            title: tr('Response'),
+                                            callback: this.copyResponse,
+                                            label: copied ? tr('Copied!') : tr('Copy'),
+                                            'data-clipboard-text': tr('Copied!'),
+                                            id: this.copyActionIdResponse,
+                                            className: copied ? 'copied' : '',
+                                        },
+                                    ]}
+                                >
+                                    {request ? (
+                                        <div title={tr('Request')} className="demo-api-request">
+                                            <CodeSnippet language="bash" codeString={this.renderCurlCode()} />
+                                        </div>
+                                    ) : null}
+
+                                    {response ? (
+                                        <div title={tr('Response')} className="demo-api-response">
+                                            <CodeSnippet
+                                                language="json"
+                                                codeString={JSON.stringify(response, null, 2)}
+                                            />
+                                        </div>
+                                    ) : null}
+
+                                    {renderCode && (
+                                        <div title={tr('Code')} className="demo-api-code">
+                                            <CodeSnippet language="javascript" codeString={renderCode()} />
+                                        </div>
+                                    )}
+                                </Tab>
                             </div>
-                        )}
-                        <div className="demo__code">
-                            <Tab
-                                actions={[
-                                    {
-                                        title: tr('Request'),
-                                        callback: this.copyRequest,
-                                        label: copied ? tr('Copied!') : tr('Copy'),
-                                        'data-clipboard-text': tr('Copied!'),
-                                        id: this.copyActionIdRequest,
-                                        className: copied ? 'copied' : '',
-                                    },
-                                    {
-                                        title: tr('Response'),
-                                        callback: this.copyResponse,
-                                        label: copied ? tr('Copied!') : tr('Copy'),
-                                        'data-clipboard-text': tr('Copied!'),
-                                        id: this.copyActionIdResponse,
-                                        className: copied ? 'copied' : '',
-                                    },
-                                ]}
-                            >
-                                {request ? (
-                                    <div title={tr('Request')} className="demo-api-request">
-                                        <CodeSnippet language="bash" codeString={this.renderCurlCode()} />
-                                    </div>
-                                ) : null}
-                                {response ? (
-                                    <div title={tr('Response')} className="demo-api-response">
-                                        <CodeSnippet language="json" codeString={JSON.stringify(response, null, 2)} />
-                                    </div>
-                                ) : null}
-                                {renderCode && (
-                                    <div title={tr('Code')} className="demo-api-code">
-                                        <CodeSnippet language="javascript" codeString={renderCode()} />
-                                    </div>
-                                )}
-                            </Tab>
                         </div>
                     </div>
-                </div>
-            </article>
+                </article>
+            </>
         );
     }
 }
@@ -248,7 +281,9 @@ SkeletonDemo.defaultProps = {
     method: '',
     withMap: false,
     className: '',
+    id: '',
 };
+
 SkeletonDemo.propTypes = {
     renderCode: PropTypes.func,
     params: PropTypes.object,
@@ -264,4 +299,5 @@ SkeletonDemo.propTypes = {
     method: PropTypes.string,
     response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     className: PropTypes.string,
+    id: PropTypes.string,
 };

package/src/components/Demo/SkeletonDemo.test.js

@@ -3,6 +3,13 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import SkeletonDemo from './SkeletonDemo';
+import Constants from '../../Constants';
+
+const mockScript = jest.fn();
+jest.mock('../utils/Script', () => (props) => {
+    mockScript(props);
+    return <mock-script />;
+});
 
 it('renders a SkeletonDemo component ', () => {
     const { container } = render(<SkeletonDemo noheader id="skeleton-test" />);
@@ -15,3 +22,13 @@ it('calls copy exec command when click on copy button', () => {
     fireEvent.click(screen.getByLabelText('Copy'));
     expect(document.execCommand).toHaveBeenCalledWith('copy');
 });
+
+it("doesn't load woosmap sdk when withMap is falsy", () => {
+    render(<SkeletonDemo noheader id="skeleton-test" />);
+    expect(mockScript).not.toHaveBeenCalled();
+});
+
+it('loads woosmap sdk when withMap is truthy', () => {
+    render(<SkeletonDemo noheader id="skeleton-test" withMap />);
+    expect(mockScript).toHaveBeenCalledWith({ url: Constants.woosmapMapSdkUrl });
+});

package/src/styles/console/button.styl

@@ -600,6 +600,25 @@
 				background-color $dark20
 				.icon
 					fill $light
+	&--notification
+		position relative
+		padding 0 .6rem !important
+		.icon
+			margin 0 !important
+		.btn__label
+			sq(1.7)
+			br(50)
+			textShadow()
+			border .1rem solid darken($success2, 20%)
+			display flex
+			align-items center
+			justify-content center
+			background-color $success2
+			font-size $fontSizeSmall
+			position absolute
+			color $light
+			top -.85rem
+			right -.85rem
 	&--small
 		buttonSmall()
 		&.btn--group