@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-icon/src/withAlignment.js

@@ -17,14 +17,16 @@
  */
 
 import React from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default function withAlignment(Component, objectHeight, subjectHeight) {
   const WithAlignment = (props) => {
     const objectHeightDecimal = `${objectHeight}`.replace('rem', '');
     const subjectHeightDecimal = `${subjectHeight}`.replace('rem', '');
-    const marginTopCalculated = `${Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
-      }rem`;
+    const marginTopCalculated = `${
+      Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
+    }rem`;
 
     return (
       <span

package/bpk-component-icon/src/withDescription.js

@@ -18,6 +18,7 @@
 /* @flow strict */
 
 import React, { type AbstractComponent } from 'react';
+
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './withDescription.module.scss';

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.1",
+  "version": "5.1.7",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-spinner": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -24,8 +24,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-component-text": "^6.1.1"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-mobile-scroll-container": "^3.1.6",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,11 +19,12 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import { BpkSpinner } from '../../bpk-component-spinner';
+
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';
 

package/bpk-component-image/src/BpkImage.js

@@ -19,11 +19,12 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import { BpkSpinner } from '../../bpk-component-spinner';
+
 import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';
 import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';

package/bpk-component-image/src/withLazyLoading.js

@@ -19,9 +19,10 @@
 
 import React, { type Node, type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from '../../bpk-react-utils';
 import throttle from 'lodash/throttle';
 
+import { wrapDisplayName } from '../../bpk-react-utils';
+
 type WithLazyLoadingProps = {
   className: ?string,
   style: ?{},

package/bpk-component-image/src/withLoadingBehavior.js

@@ -18,48 +18,49 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 type InjectedProps = {|
   onLoad: () => mixed,
-    loading: boolean,
+  loading: boolean,
 |};
 
 export default function withLoadingBehavior<Config>(
   Component: AbstractComponent<{| ...Config, ...InjectedProps |}>,
-): AbstractComponent < Config > {
-  class WithLoadingBehavior < C: Config> extends React.Component <
+): AbstractComponent<Config> {
+  class WithLoadingBehavior<C: Config> extends React.Component<
     C,
     {| loading: boolean |},
   > {
-  constructor() {
-    super();
+    constructor() {
+      super();
 
-    this.state = {
-      loading: true,
-    };
-  }
+      this.state = {
+        loading: true,
+      };
+    }
 
     onLoad = () => {
-    this.setState(() => ({
-      loading: false,
-    }));
-  };
+      this.setState(() => ({
+        loading: false,
+      }));
+    };
 
-  render() {
-    return (
-      <Component
-        onLoad={this.onLoad}
-        loading={this.state.loading}
-        {...this.props}
-      />
-    );
+    render() {
+      return (
+        <Component
+          onLoad={this.onLoad}
+          loading={this.state.loading}
+          {...this.props}
+        />
+      );
+    }
   }
-}
-WithLoadingBehavior.displayName = wrapDisplayName(
-  Component,
-  'withLoadingBehavior',
-);
+  WithLoadingBehavior.displayName = wrapDisplayName(
+    Component,
+    'withLoadingBehavior',
+  );
 
-return WithLoadingBehavior;
+  return WithLoadingBehavior;
 }

package/bpk-component-infinite-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "4.1.0",
+  "version": "4.1.6",
   "description": "Backpack infinite scroll 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",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
   },
@@ -23,9 +23,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-list": "^3.1.0",
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-list": "^3.1.6",
+    "bpk-component-spinner": "^5.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js

@@ -25,10 +25,11 @@ import React, {
   type AbstractComponent,
 } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
 import omit from 'lodash/omit';
 import extend from 'lodash/extend';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import './intersection-observer';
 import DataSource from './DataSource';
 import STYLES from './withInfiniteScroll.module.scss';
@@ -95,133 +96,133 @@ type PropsWithDefault = Config<Props, typeof defaultProps>;
 
 const withInfiniteScroll = <T: ExtendedProps>(
   ComponentToExtend: AbstractComponent<T>,
-    ): AbstractComponent<PropsWithDefault & $Diff<T, ExtendedProps>> =>
-    class WithInfiniteScroll extends Component<Props, State> {
-      handleIntersection: IntersectionObserverCallback;
+): AbstractComponent<PropsWithDefault & $Diff<T, ExtendedProps>> =>
+  class WithInfiniteScroll extends Component<Props, State> {
+    handleIntersection: IntersectionObserverCallback;
 
     handleKeyPress: (e: SyntheticKeyboardEvent<HTMLButtonElement>) => void;
 
-      handleSeeMoreClick: (e: SyntheticEvent<HTMLButtonElement>) => void;
+    handleSeeMoreClick: (e: SyntheticEvent<HTMLButtonElement>) => void;
 
-        observer: IntersectionObserver;
+    observer: IntersectionObserver;
 
-        sentinel: ?HTMLElement;
+    sentinel: ?HTMLElement;
 
-        static propTypes = {...propTypes};
+    static propTypes = { ...propTypes };
 
-        static defaultProps = {...defaultProps};
+    static defaultProps = { ...defaultProps };
 
-        constructor(props: Props) {
-          super(props);
+    constructor(props: Props) {
+      super(props);
 
-        this.state = {
-          index: 0,
+      this.state = {
+        index: 0,
         elementsToRender: [],
         isListFinished: false,
         showSeeMore: false,
       };
 
-        this.props.dataSource.onDataChange(this.updateData);
+      this.props.dataSource.onDataChange(this.updateData);
 
-        const thresholds = {
-          small: 0.01,
+      const thresholds = {
+        small: 0.01,
         half: 0.5,
         full: 0.99, // using 0.99 instead of 1 to avoid problems with float precision in IE11
       };
-        const displaySize = this.props.loaderIntersectionTrigger || 'full';
-        this.observer = new IntersectionObserver(this.handleIntersection, {
-          threshold: thresholds[displaySize] || thresholds.full,
+      const displaySize = this.props.loaderIntersectionTrigger || 'full';
+      this.observer = new IntersectionObserver(this.handleIntersection, {
+        threshold: thresholds[displaySize] || thresholds.full,
       });
     }
 
-        componentDidMount() {
-          this.fetchItems({
-            elementsPerScroll: this.props.initiallyLoadedElements,
-          }).then((newState) => {
-            this.setState(newState);
-          });
+    componentDidMount() {
+      this.fetchItems({
+        elementsPerScroll: this.props.initiallyLoadedElements,
+      }).then((newState) => {
+        this.setState(newState);
+      });
     }
 
-        componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps) {
       if (this.sentinel && this.state.index > 0) {
-          this.observer.observe(this.sentinel);
+        this.observer.observe(this.sentinel);
       }
 
-        if (this.props.dataSource !== prevProps.dataSource) {
-          prevProps.dataSource.removeListener(this.updateData);
+      if (this.props.dataSource !== prevProps.dataSource) {
+        prevProps.dataSource.removeListener(this.updateData);
         this.props.dataSource.onDataChange(this.updateData);
         this.fetchItems({
           index: 0,
-        elementsPerScroll: this.props.elementsPerScroll,
-        elementsToRender: [],
+          elementsPerScroll: this.props.elementsPerScroll,
+          elementsToRender: [],
         }).then((newState) => this.setStateAfterDsUpdate(newState));
       }
     }
 
-        componentWillUnmount() {
-          this.props.dataSource.removeListener(this.updateData);
-        if (this.sentinel) {
-          this.observer.unobserve(this.sentinel);
+    componentWillUnmount() {
+      this.props.dataSource.removeListener(this.updateData);
+      if (this.sentinel) {
+        this.observer.unobserve(this.sentinel);
       }
     }
 
-        setStateAfterDsUpdate(newState: State) {
+    setStateAfterDsUpdate(newState: State) {
       // After a data source update (calling updateData in the data source or changing the dataSource prop)
       // all visible data is fetched again (from 0 to current index) to update the list with the new data.
       // If after this call there is no elementsToRender or index present in state
       // it means the new data source has no items and we need to
       // reset the list, which we do by setting `elementsToRender` to `[]` and `index` to `0`
-      const {elementsToRender, index} = newState;
-        this.setState({
-          ...newState,
-          elementsToRender: elementsToRender || [],
+      const { elementsToRender, index } = newState;
+      this.setState({
+        ...newState,
+        elementsToRender: elementsToRender || [],
         index: index || 0,
       });
     }
 
     updateData = () => {
-      const {index} = this.state;
-        // This means updateData was called before any data was loaded, e.g.
-        // An ArrayDataSource initialized empty and then changed latter on via `updateData`
-        // In this case we want to load new data and not just replace the old one.
-        // "See More After" should also be computed again in this case.
-        const isFirstLoad = index < this.props.elementsPerScroll;
-        this.fetchItems({
-          index: 0,
+      const { index } = this.state;
+      // This means updateData was called before any data was loaded, e.g.
+      // An ArrayDataSource initialized empty and then changed latter on via `updateData`
+      // In this case we want to load new data and not just replace the old one.
+      // "See More After" should also be computed again in this case.
+      const isFirstLoad = index < this.props.elementsPerScroll;
+      this.fetchItems({
+        index: 0,
         elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
         elementsToRender: [],
         computeShowSeeMore: isFirstLoad,
       }).then((newState) => this.setStateAfterDsUpdate(newState));
     };
 
-        fetchItems(config): Promise<$Shape<State>> {
-      const {onScrollFinished, seeMoreAfter} = this.props;
-          const {computeShowSeeMore, elementsPerScroll, elementsToRender, index} =
-          extend(
+    fetchItems(config): Promise<$Shape<State>> {
+      const { onScrollFinished, seeMoreAfter } = this.props;
+      const { computeShowSeeMore, elementsPerScroll, elementsToRender, index } =
+        extend(
           {
             index: this.state.index,
-          elementsPerScroll: this.props.elementsPerScroll,
-          elementsToRender: this.state.elementsToRender,
-          computeShowSeeMore: true,
+            elementsPerScroll: this.props.elementsPerScroll,
+            elementsToRender: this.state.elementsToRender,
+            computeShowSeeMore: true,
           },
           config,
-          );
+        );
 
-          return this.props.dataSource
-          .fetchItems(index, elementsPerScroll)
+      return this.props.dataSource
+        .fetchItems(index, elementsPerScroll)
         .then((nextElements) => {
-            let result = {
+          let result = {
             isListFinished: true,
           };
           if (nextElements && nextElements.length > 0) {
             const nextIndex = index + elementsPerScroll;
-          result = {
-            index: nextIndex,
-          elementsToRender: (elementsToRender || []).concat(nextElements),
-          showSeeMore: computeShowSeeMore
-          ? seeMoreAfter === index / elementsPerScroll
-          : this.state.showSeeMore,
-          isListFinished: nextElements.length < elementsPerScroll,
+            result = {
+              index: nextIndex,
+              elementsToRender: (elementsToRender || []).concat(nextElements),
+              showSeeMore: computeShowSeeMore
+                ? seeMoreAfter === index / elementsPerScroll
+                : this.state.showSeeMore,
+              isListFinished: nextElements.length < elementsPerScroll,
             };
           }
           if (onScrollFinished && result.isListFinished) {
@@ -233,65 +234,65 @@ const withInfiniteScroll = <T: ExtendedProps>(
         });
     }
 
-          handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
-      const {onScroll} = this.props;
-            const entry = entries[0];
-            if (entry.isIntersecting) {
+    handleIntersection = (entries: Array<IntersectionObserverEntry>) => {
+      const { onScroll } = this.props;
+      const entry = entries[0];
+      if (entry.isIntersecting) {
         if (this.sentinel) {
-              this.observer.unobserve(this.sentinel);
+          this.observer.unobserve(this.sentinel);
         }
-            if (onScroll) {
-              onScroll({ currentIndex: this.state.index });
+        if (onScroll) {
+          onScroll({ currentIndex: this.state.index });
         }
         return this.fetchItems().then((newState) => {
-              this.setState(newState);
+          this.setState(newState);
         });
       }
-            return Promise.resolve();
+      return Promise.resolve();
     };
 
     handleSeeMoreClick = () => {
-              this.fetchItems().then((newState) => {
-                this.setState(newState);
-              });
+      this.fetchItems().then((newState) => {
+        this.setState(newState);
+      });
     };
 
-            render() {
-      const {elementsToRender, isListFinished, showSeeMore} = this.state;
-            const {renderLoadingComponent, renderSeeMoreComponent} = this.props;
+    render() {
+      const { elementsToRender, isListFinished, showSeeMore } = this.state;
+      const { renderLoadingComponent, renderSeeMoreComponent } = this.props;
 
-            const rest = omit(this.props, Object.keys(propTypes));
+      const rest = omit(this.props, Object.keys(propTypes));
 
-            let loadingOrButton = null;
+      let loadingOrButton = null;
 
-            if (!isListFinished) {
+      if (!isListFinished) {
         if (showSeeMore && renderSeeMoreComponent) {
-              loadingOrButton = renderSeeMoreComponent({
-                onSeeMoreClick: this.handleSeeMoreClick,
-              });
+          loadingOrButton = renderSeeMoreComponent({
+            onSeeMoreClick: this.handleSeeMoreClick,
+          });
         } else {
-              loadingOrButton = (
-                <div
-                  ref={(spinner) => {
-                    this.sentinel = spinner;
-                  }}
-                  className={
-                    renderLoadingComponent ? null : getClassNames('bpk-sentinel')
-                  }
-                >
-                  {renderLoadingComponent && renderLoadingComponent()}
-                </div>
-              );
+          loadingOrButton = (
+            <div
+              ref={(spinner) => {
+                this.sentinel = spinner;
+              }}
+              className={
+                renderLoadingComponent ? null : getClassNames('bpk-sentinel')
+              }
+            >
+              {renderLoadingComponent && renderLoadingComponent()}
+            </div>
+          );
         }
       }
 
-            return (
-            <div>
-              <ComponentToExtend {...rest} elements={elementsToRender} />
-              {loadingOrButton}
-            </div>
-            );
+      return (
+        <div>
+          <ComponentToExtend {...rest} elements={elementsToRender} />
+          {loadingOrButton}
+        </div>
+      );
     }
   };
 
-            export default withInfiniteScroll;
+export default withInfiniteScroll;

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.1",
+  "version": "6.1.9",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-icon": "^9.2.7",
+    "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": {
-    "bpk-component-banner-alert": "^6.1.1",
-    "bpk-component-label": "^5.1.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-component-banner-alert": "^6.1.9",
+    "bpk-component-label": "^5.1.6",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

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"
   }
 }