@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-link/src/BpkButtonLink.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes from './themeAttributes';

package/bpk-component-link/src/BpkLink.js

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import themeAttributes, {

package/bpk-component-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack list 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",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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

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

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

@@ -20,6 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
+
 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": "4.1.1",
+  "version": "6.1.1",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-spinner": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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

@@ -20,6 +20,7 @@
 
 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 {
@@ -29,6 +30,11 @@ import {
 } 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';
+
+const getClassName = cssModules(STYLES);
 
 export const ICON_POSITION = {
   LEADING: 'leading',
@@ -36,11 +42,8 @@ export const ICON_POSITION = {
 };
 
 const getPropsIcon = (props) => {
-  const { disabled, icon, iconDisabled, iconLoading, loading } = props;
+  const { disabled, icon, iconDisabled } = props;
 
-  if (loading) {
-    return iconLoading;
-  }
   if (disabled) {
     return iconDisabled;
   }
@@ -57,15 +60,10 @@ const getEnabledIcon = (large: boolean) => {
   return <AlignedIcon />;
 };
 
-type IconProps = { loading: boolean, large: boolean };
-
-const getDefaultIcon = (props: IconProps) => {
-  const { large, loading } = props;
+const getLoadingIcon = (props) => {
+  const { iconLoading, large } = props;
 
-  if (loading) {
-    return getSpinner(large);
-  }
-  return getEnabledIcon(large);
+  return iconLoading || getSpinner(large);
 };
 
 type LoadingProps = {
@@ -76,6 +74,7 @@ type LoadingProps = {
   destructive: boolean,
   large: boolean,
   link: boolean,
+  linkOnDark: boolean,
   loading: boolean,
   iconOnly: boolean,
   icon: ?Element<any>,
@@ -87,12 +86,16 @@ type LoadingProps = {
 const BpkLoadingButton = (props: LoadingProps) => {
   const {
     children,
+    className,
     disabled,
     icon,
     iconDisabled,
     iconLoading,
     iconOnly,
     iconPosition,
+    large,
+    link,
+    linkOnDark,
     loading,
     ...rest
   } = props;
@@ -100,16 +103,43 @@ const BpkLoadingButton = (props: LoadingProps) => {
   const showBtnDisabled = disabled || loading;
 
   const spacer = iconOnly ? '' : '\u00A0';
-  const buttonIcon = getPropsIcon(props) || getDefaultIcon(props);
+  const buttonIcon = getPropsIcon(props) || getEnabledIcon(large);
 
   const [child0, child1, child2] =
     iconPosition === ICON_POSITION.LEADING
       ? [buttonIcon, spacer, children]
       : [children, spacer, buttonIcon];
 
+  const loadingIcon = getLoadingIcon(props);
+
+  const classNames = getClassName(
+    loading && 'bpk-loading-button',
+    loading && (link || linkOnDark) && 'bpk-loading-button--link',
+    className,
+  );
+
+  const iconClassNames = getClassName(
+    'bpk-loading-button__icon',
+    large && 'bpk-loading-button__icon--large',
+    iconOnly &&
+      (large
+        ? 'bpk-loading-button__icon--large-icon-only'
+        : 'bpk-loading-button__icon--icon-only'),
+    (link || linkOnDark) && 'bpk-loading-button__icon--link',
+  );
+
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkButton iconOnly={iconOnly} disabled={showBtnDisabled} {...rest}>
+    <BpkButton
+      iconOnly={iconOnly}
+      disabled={showBtnDisabled}
+      large={large}
+      className={classNames}
+      link={link}
+      linkOnDark={linkOnDark}
+      {...rest}
+    >
+      {loading && <span className={iconClassNames}>{loadingIcon}</span>}
       {child0}
       {child1}
       {child2}
@@ -124,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,
@@ -142,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

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+@import '~bpk-mixins/index';
+
+$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;
+  overflow: hidden;
+
+  &--link {
+    visibility: hidden;
+  }
+
+  &__icon {
+    position: absolute;
+    display: inline-flex;
+    visibility: visible;
+    z-index: 1;
+    width: calc(100% - #{$button-padding-x});
+    height: calc(100% - #{$button-padding-y});
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+
+    &--large {
+      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.1",
+  "version": "6.0.1",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "prop-types": "^15.5.8",
-    "react-google-maps": "^9.4.5"
+    "@react-google-maps/api": "^2.8.1",
+    "bpk-component-spinner": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
+    "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.1",
-    "bpk-component-text": "^6.1.1",
-    "bpk-storybook-utils": "^1.1.0",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-text": "^7.0.0",
+    "bpk-storybook-utils": "^1.1.5",
     "prop-types": "^15.5.8"
   }
 }

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

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

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

@@ -19,6 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
+
 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-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';