@skyscanner/backpack-web 0.0.6 → 0.3.0

package/bpk-component-input/src/BpkClearButton.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import ClearIcon from '../../bpk-component-icon/sm/close-circle';
 import { withButtonAlignment } from '../../bpk-component-icon';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-input/src/BpkInput.js

@@ -19,6 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkClearButton from './BpkClearButton';

package/bpk-component-input/src/withOpenEvents.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './BpkInput.module.scss';

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "5.1.0",
+  "version": "5.1.6",
   "description": "Backpack label 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-label/src/BpkLabel.js

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

package/bpk-component-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "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": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

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';