@skyscanner/backpack-web 0.0.6 → 0.3.0

package/bpk-component-map/src/BpkMap.js

@@ -18,11 +18,16 @@
 
 /* @flow strict */
 
-import React, { type Node } from 'react';
+import React, { type Node, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { withGoogleMap, GoogleMap } from 'react-google-maps';
+import { GoogleMap } from '@react-google-maps/api';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import { LatLongPropType, type LatLong } from './common-types';
+import STYLES from './BpkMap.module.scss';
+
+const getClassName = cssModules(STYLES);
 
 export type Bounds = {
   south: number,
@@ -38,6 +43,14 @@ export type MapRef = ?{
   fitBounds: (Bounds) => void,
 };
 
+type MapOptionStyle = {
+  featureType: ?string,
+  elementType: ?string,
+  stylers: Array<{
+    [string]: string,
+  }>,
+};
+
 type Props = {
   greedyGestureHandling: boolean,
   panEnabled: boolean,
@@ -46,20 +59,22 @@ type Props = {
   bounds: ?Bounds,
   center: ?LatLong,
   children: ?Node,
-  containerElement: ?Node,
-  mapElement: ?Node,
   mapRef: ?(MapRef) => mixed,
   onRegionChange: ?(Bounds, LatLong) => mixed,
   onZoom: ?(number) => mixed,
   onTilesLoaded: ?() => void,
+  className: ?string,
+  mapOptionStyles: ?Array<MapOptionStyle>,
 };
 
-const BpkMap = withGoogleMap((props: Props) => {
+const BpkMap = (props: Props) => {
   const {
     bounds,
     center,
     children,
+    className,
     greedyGestureHandling,
+    mapOptionStyles,
     mapRef,
     onRegionChange,
     onTilesLoaded,
@@ -68,7 +83,6 @@ const BpkMap = withGoogleMap((props: Props) => {
     showControls,
     zoom,
   } = props;
-  let ref: MapRef = null;
 
   if (!bounds && !center) {
     throw new Error('BpkMap: Provide either `bounds` or `center` props.');
@@ -82,29 +96,37 @@ const BpkMap = withGoogleMap((props: Props) => {
     gestureHandling = 'greedy';
   }
 
+  const ref = useRef(null);
+  const mapContainerClassName = getClassName('bpk-map', className);
+
+  const onLoad = useCallback(
+    (map) => {
+      ref.current = map;
+      if (map && bounds) {
+        map.fitBounds({
+          south: bounds.south,
+          west: bounds.west,
+          north: bounds.north,
+          east: bounds.east,
+        });
+      }
+      if (mapRef) {
+        mapRef(map);
+      }
+    },
+    [bounds, mapRef],
+  );
+
   return (
     <GoogleMap
-      ref={(map: MapRef) => {
-        ref = map;
-        if (map && bounds) {
-          map.fitBounds({
-            south: bounds.south,
-            west: bounds.west,
-            north: bounds.north,
-            east: bounds.east,
-          });
-        }
-        if (mapRef) {
-          mapRef(map);
-        }
-      }}
+      onLoad={onLoad}
       center={
         center
           ? {
               lat: center.latitude,
               lng: center.longitude,
             }
-          : null
+          : undefined
       }
       zoom={zoom}
       options={{
@@ -114,15 +136,18 @@ const BpkMap = withGoogleMap((props: Props) => {
         streetViewControl: false,
         fullscreenControl: false,
         rotateControl: false,
+        clickableIcons: false,
+        // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
+        styles: mapOptionStyles,
       }}
       onDragEnd={() => {
-        if (ref && onRegionChange) {
-          onRegionChange(ref.getBounds(), ref.getCenter());
+        if (ref && ref.current && onRegionChange) {
+          onRegionChange(ref.current.getBounds(), ref.current.getCenter());
         }
       }}
       onZoomChanged={() => {
-        if (ref && onZoom) {
-          onZoom(ref.getZoom());
+        if (ref && ref.current && onZoom) {
+          onZoom(ref.current.getZoom());
         }
       }}
       onTilesLoaded={() => {
@@ -130,11 +155,12 @@ const BpkMap = withGoogleMap((props: Props) => {
           onTilesLoaded();
         }
       }}
+      mapContainerClassName={mapContainerClassName}
     >
       {children}
     </GoogleMap>
   );
-});
+};
 
 BpkMap.propTypes = {
   bounds: PropTypes.shape({
@@ -145,30 +171,38 @@ BpkMap.propTypes = {
   }),
   center: LatLongPropType,
   children: PropTypes.node,
-  containerElement: PropTypes.node,
   greedyGestureHandling: PropTypes.bool,
-  mapElement: PropTypes.node,
   mapRef: PropTypes.func,
+  className: PropTypes.string,
   onRegionChange: PropTypes.func,
   onZoom: PropTypes.func,
   panEnabled: PropTypes.bool,
   showControls: PropTypes.bool,
+  onTilesLoaded: PropTypes.func,
   zoom: PropTypes.number,
+  mapOptionStyles: PropTypes.arrayOf(
+    PropTypes.shape({
+      featureType: PropTypes.string,
+      elementType: PropTypes.string,
+      stylers: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }),
+  ),
 };
 
 BpkMap.defaultProps = {
   bounds: null,
-  center: null,
+  center: undefined,
   children: null,
-  containerElement: <div style={{ height: '100%' }} />,
   greedyGestureHandling: false,
-  mapElement: <div style={{ height: '100%' }} />,
   mapRef: null,
   onRegionChange: null,
   onZoom: null,
+  onTilesLoaded: null,
   panEnabled: true,
   showControls: true,
   zoom: 15,
+  className: null,
+  mapOptionStyles: null,
 };
 
 export default BpkMap;

package/{bpk-component-rating/examples.module.scss → bpk-component-map/src/BpkMap.module.scss}

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
-
-.bpk-rating-story {
-  width: 10rem;
+.bpk-map {
+  height: 100%;
 }

package/bpk-component-map/src/BpkOverlayView.js

@@ -20,7 +20,7 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-import { OverlayView } from 'react-google-maps';
+import { OverlayView } from '@react-google-maps/api';
 
 import { LatLongPropType, type LatLong } from './common-types';
 

package/bpk-component-map/src/BpkPriceMarker.js

@@ -20,6 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 

package/bpk-component-map/src/DefaultLoadingElement.js

@@ -18,6 +18,7 @@
 /* @flow strict */
 
 import React from 'react';
+
 import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
 import { cssModules } from '../../bpk-react-utils';
 

package/bpk-component-map/src/withGoogleMapsScript.js

@@ -19,23 +19,59 @@
 
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { withScriptjs } from 'react-google-maps';
+import { useJsApiLoader } from '@react-google-maps/api';
 
 import DefaultLoadingElement from './DefaultLoadingElement';
 
+export const LibraryShapeType = PropTypes.arrayOf(
+  PropTypes.oneOf([
+    'drawing',
+    'geometry',
+    'localContext',
+    'places',
+    'visualization',
+  ]),
+);
+
 function withGoogleMapsScript(Component: ComponentType<any>) {
-  const ScriptedComponent = withScriptjs(Component);
+  const WithGoogleMapsScript = ({
+    googleMapsApiKey,
+    libraries,
+    loadingElement,
+    preventGoogleFontsLoading,
+    ...rest
+  }: {
+    [string]: any,
+  }) => {
+    const { isLoaded, loadError } = useJsApiLoader({
+      googleMapsApiKey,
+      libraries,
+      preventGoogleFontsLoading,
+      version: '3.46',
+    });
+
+    if (!isLoaded) {
+      return loadingElement;
+    }
 
-  const WithGoogleMapsScript = ({ ...rest }: { [string]: any }) => (
-    <ScriptedComponent {...rest} />
-  );
+    if (loadError) {
+      throw new Error('Google maps cannot be loaded!');
+    }
+
+    return <Component {...rest} />;
+  };
 
   WithGoogleMapsScript.propTypes = {
     loadingElement: PropTypes.node,
+    googleMapsApiKey: PropTypes.string.isRequired,
+    libraries: LibraryShapeType,
+    preventGoogleFontsLoading: PropTypes.bool,
   };
 
   WithGoogleMapsScript.defaultProps = {
     loadingElement: <DefaultLoadingElement />,
+    preventGoogleFontsLoading: false,
+    libraries: ['geometry', 'drawing', 'places'],
   };
 
   return WithGoogleMapsScript;

package/bpk-component-mobile-scroll-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack mobile scroll container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0"
   }
 }

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -21,6 +21,7 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import React, { Component, type Node } from 'react';
+
 import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.1",
+  "version": "3.1.8",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-component-navigation-bar": "^3.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "bpk-scrim-utils": "^5.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-navigation-bar": "^3.1.8",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
+    "bpk-scrim-utils": "^5.1.5",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-modal/src/BpkModal.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
+
 import { withScrim } from '../../bpk-scrim-utils';
 import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 

package/bpk-component-modal/src/BpkModalInner.js

@@ -18,9 +18,10 @@
 
 /* @flow strict */
 
-import { BpkButtonLink } from '../../bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
+
+import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';
 import BpkNavigationBar from '../../bpk-component-navigation-bar';
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';

package/bpk-component-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.1",
+  "version": "3.1.8",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -20,6 +20,7 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
@@ -73,7 +74,7 @@ const BpkNavigationBar = (props: Props) => {
       {typeof title === 'string' ? (
         <BpkText
           id={titleId}
-          textStyle={TEXT_STYLES.label1}
+          textStyle={TEXT_STYLES.heading5}
           className={getClassNames('bpk-navigation-bar__title')}
         >
           {title}

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss

@@ -47,6 +47,8 @@ $bpk-spacing-v2: true;
   &__leading-item,
   &__trailing-item {
     position: absolute;
+
+    @include bpk-label-2;
   }
 
   &__leading-item {

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -20,6 +20,7 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
 import { BpkButtonLink } from '../../bpk-component-link';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -20,6 +20,7 @@
 
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
 import BpkIconButton from '../../bpk-component-close-button';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-navigation-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.1",
+  "version": "3.1.8",
   "description": "Backpack navigation stack component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -24,9 +24,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-navigation-bar": "^3.1.1",
-    "bpk-component-rtl-toggle": "^3.1.0"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-navigation-bar": "^3.1.8",
+    "bpk-component-rtl-toggle": "^3.1.6"
   }
 }

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -18,13 +18,14 @@
 
 /* @flow strict */
 
-import { cssModules, isRTL } from '../../bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import debounce from 'lodash/debounce';
 
+import { cssModules, isRTL } from '../../bpk-react-utils';
+
 import STYLES from './BpkNavigationStack.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-nudger/README.md

@@ -125,7 +125,7 @@ class App extends Component {
 | onChange            | func                          | true     | -             |
 | value               | number                        | true     | -             |
 | className           | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'outline') | false    | secondary     |
+| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
 
 ### BpkConfigurableNudger
 
@@ -144,7 +144,7 @@ class App extends Component {
 | formatValue         | func                          | true     | -             |
 | className           | string                        | false    | null          |
 | inputClassName      | string                        | false    | null          |
-| buttonType          | oneOf('secondary', 'outline') | false    | secondary     |
+| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |
 
 ### `compareValues`
 

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "5.1.1",
+  "version": "7.0.0",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -26,7 +26,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-label": "^5.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }