@skyscanner/backpack-web 0.1.0 → 0.4.0

package/bpk-component-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "3.1.4",
+  "version": "4.0.0",
   "description": "Backpack list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

package/bpk-component-list/src/BpkList.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';
 

package/bpk-component-list/src/BpkList.module.scss

@@ -27,5 +27,11 @@
 
   & & {
     @include bpk-list--nested;
+
+    /* stylelint-disable selector-max-compound-selectors */
+
+    > li {
+      margin-bottom: 0;
+    }
   }
 }

package/bpk-component-list/src/BpkListItem.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkList.module.scss';
 

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "6.0.0",
+  "version": "6.1.2",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-icon": "^9.2.5",
-    "bpk-component-spinner": "^5.1.4",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-button": "^6.2.2",
+    "bpk-component-icon": "^9.2.8",
+    "bpk-component-spinner": "^5.1.7",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-storybook-utils": "^1.1.6"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -20,16 +20,17 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkButton from 'bpk-component-button';
-import { BpkSpinner, BpkLargeSpinner } from 'bpk-component-spinner';
+
+import BpkButton from '../../bpk-component-button';
+import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';
 import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from 'bpk-component-icon';
-import ArrowIconSm from 'bpk-component-icon/sm/long-arrow-right';
-import ArrowIconLg from 'bpk-component-icon/lg/long-arrow-right';
-import { cssModules } from 'bpk-react-utils';
+} from '../../bpk-component-icon';
+import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkLoadingButton.module.scss';
 
@@ -73,6 +74,7 @@ type LoadingProps = {
   destructive: boolean,
   large: boolean,
   link: boolean,
+  linkOnDark: boolean,
   loading: boolean,
   iconOnly: boolean,
   icon: ?Element<any>,
@@ -93,6 +95,7 @@ const BpkLoadingButton = (props: LoadingProps) => {
     iconPosition,
     large,
     link,
+    linkOnDark,
     loading,
     ...rest
   } = props;
@@ -111,14 +114,18 @@ const BpkLoadingButton = (props: LoadingProps) => {
 
   const classNames = getClassName(
     loading && 'bpk-loading-button',
-    loading && link && 'bpk-loading-button--link',
+    loading && (link || linkOnDark) && 'bpk-loading-button--link',
     className,
   );
 
   const iconClassNames = getClassName(
     'bpk-loading-button__icon',
     large && 'bpk-loading-button__icon--large',
-    link && 'bpk-loading-button__icon--link',
+    iconOnly &&
+      (large
+        ? 'bpk-loading-button__icon--large-icon-only'
+        : 'bpk-loading-button__icon--icon-only'),
+    (link || linkOnDark) && 'bpk-loading-button__icon--link',
   );
 
   return (
@@ -129,11 +136,10 @@ const BpkLoadingButton = (props: LoadingProps) => {
       large={large}
       className={classNames}
       link={link}
+      linkOnDark={linkOnDark}
       {...rest}
     >
-      {loading && !iconOnly && (
-        <span className={iconClassNames}>{loadingIcon}</span>
-      )}
+      {loading && <span className={iconClassNames}>{loadingIcon}</span>}
       {child0}
       {child1}
       {child2}
@@ -148,6 +154,7 @@ BpkLoadingButton.propTypes = {
   secondary: PropTypes.bool,
   destructive: PropTypes.bool,
   link: PropTypes.bool,
+  linkOnDark: PropTypes.bool,
   loading: PropTypes.bool,
   iconOnly: PropTypes.bool,
   icon: PropTypes.element,
@@ -166,6 +173,7 @@ BpkLoadingButton.defaultProps = {
   destructive: false,
   large: false,
   link: false,
+  linkOnDark: false,
   loading: false,
   iconOnly: false,
   icon: null,

package/bpk-component-loading-button/src/BpkLoadingButton.module.scss

@@ -23,6 +23,8 @@ $bpk-spacing-v2: true;
 .bpk-loading-button {
   $button-padding-x: bpk-spacing-base() * 2;
   $button-padding-y: bpk-spacing-lg() / 2;
+  $button-icon-only-padding-x: $bpk-one-pixel-rem * 9 * 2;
+  $button-large-icon-only-padding-x: $bpk-one-pixel-rem * 12 * 2;
   $button-large-padding-y: bpk-spacing-lg();
 
   position: relative;
@@ -47,6 +49,14 @@ $bpk-spacing-v2: true;
       height: calc(100% - #{$button-large-padding-y});
     }
 
+    &--icon-only {
+      width: calc(100% - #{$button-icon-only-padding-x});
+    }
+
+    &--large-icon-only {
+      width: calc(100% - #{$button-large-icon-only-padding-x});
+    }
+
     &--link {
       width: 100%;
       background: unset;

package/bpk-component-map/README.md

@@ -2,6 +2,8 @@
 
 > Backpack map component.
 
+Requires **React 16.8+**
+
 ## Installation
 
 ```sh
@@ -100,20 +102,17 @@ export default () => (
 
 `withGoogleMapsScript` is a HOC that loads the Google Maps JavaScript, then loads the map. This is useful for when you don't already have the Google Maps JavaScript loaded.
 
-If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript elsewhere and not use this HOC, as it downloads the script every time it's used.
+If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript in this HOC, as it ensures that script will not be re-downloaded every time it's used.
 
 ```js
 import React from 'react';
 import BpkMap, { withGoogleMapsScript } from 'bpk-component-map';
 
-const MAP_URL =
-  'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places';
-
 const BpkMapWithScript = withGoogleMapsScript(BpkMap);
 
 export default () => (
   <BpkMapWithScript
-    googleMapURL={MAP_URL}
+    googleMapsApiKey='YOUR_API_KEY'
     zoom={15}
     center={{
       latitude: 27.9881,
@@ -129,13 +128,13 @@ export default () => (
 
 ### BpkMap
 
-| Property              | PropType                                                          | Required | Default Value                    |
+| Property              | PropType                                                                                        | Required | Default Value                    |
 | --------------------- | ----------------------------------------------------------------- | -------- | -------------------------------- |
 | bounds                | shape({north: number, east: number, south: number, west: number}) | false    | null                             |
 | center                | shape({latitude: number, longitude: number})                      | false    | null                             |
-| containerElement      | node                                                              | false    | <div style={{height: '100%'}} /> |
+| className             | string                                                            | false    | null                             |
 | greedyGestureHandling | bool                                                              | false    | false                            |
-| mapElement            | node                                                              | false    | <div style={{height: '100%'}} /> |
+| mapOptionStyles       | array                                                             | false    | null                             |
 | mapRef                | func                                                              | false    | null                             |
 | onRegionChange        | func                                                              | false    | null                             |
 | onZoom                | func                                                              | false    | null                             |
@@ -150,10 +149,12 @@ Note: One of `bounds` and `center` must be provided.
 
 When using `withGoogleMapsScript`, some additional props are available:
 
-| Property       | PropType | Required | Default Value |
-| -------------- | -------- | -------- | ------------- |
-| googleMapURL   | string   | true     | -             |
-| loadingElement | node     | false    | BpkSpinner    |
+| Property                  | PropType | Required | Default Value                     |
+| ------------------------- | -------- | -------- | --------------------------------- |
+| googleMapsApiKey          | string   | true     | -                                 |
+| libraries                 | array    | false    | ['geometry', 'drawing', 'places'] |
+| loadingElement            | node     | false    | BpkSpinner                        |
+| preventGoogleFontsLoading | bool     | false    | false                             |
 
 ### BpkIconMarker
 
@@ -171,7 +172,6 @@ When using `withGoogleMapsScript`, some additional props are available:
 
 `BpkIconMarker` only supports small icons from the Backpack icon set. Large icons should not be used with `BpkIconMarker`.
 
-
 ### BpkPriceMarker
 
 | Property       | PropType                                     | Required | Default Value |

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "5.2.5",
+  "version": "6.0.2",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.4",
-    "bpk-mixins": "^28.1.0",
+    "@react-google-maps/api": "^2.8.1",
+    "bpk-component-spinner": "^5.1.7",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
-    "prop-types": "^15.5.8",
-    "react-google-maps": "^9.4.5"
+    "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
+    "react": "^16.8.3 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.5",
-    "bpk-component-text": "^6.1.5",
-    "bpk-storybook-utils": "^1.1.3",
+    "bpk-component-icon": "^9.2.8",
+    "bpk-component-text": "^7.0.1",
+    "bpk-storybook-utils": "^1.1.6",
     "prop-types": "^15.5.8"
   }
 }

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

@@ -20,7 +20,8 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkIconMarkerBackground from './BpkIconMarkerBackground';
 import { LatLongPropType, type LatLong } from './common-types';

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

@@ -19,7 +19,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';
 

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-map/src/BpkMap.module.scss

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.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,8 +20,9 @@
 
 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';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';

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

@@ -18,8 +18,9 @@
 /* @flow strict */
 
 import React from 'react';
-import { BpkLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
-import { cssModules } from 'bpk-react-utils';
+
+import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './DefaultLoadingElement.module.scss';
 

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.4",
+  "version": "3.1.7",
   "description": "Backpack mobile scroll container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.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": "^6.1.0"
+    "@skyscanner/bpk-foundations-web": "^7.0.0"
   }
 }