@skyscanner/backpack-web 0.0.2 → 0.0.5

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIcon.module.scss';
 import classNameModifierHOCFactory from './classNameModifierHOCFactory';

package/bpk-component-image/examples.js

@@ -17,8 +17,8 @@
  */
 
 import React from 'react';
-import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkMobileScrollContainer from '../bpk-component-mobile-scroll-container';
+import BpkText, { TEXT_STYLES } from '../bpk-component-text';
 import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import BpkImage, {

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

@@ -19,8 +19,8 @@
 
 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 { 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';
 

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

@@ -19,8 +19,8 @@
 
 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 { 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';
 

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

@@ -19,7 +19,7 @@
 
 import React, { type Node, type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 import throttle from 'lodash/throttle';
 
 type WithLazyLoadingProps = {

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

@@ -18,48 +18,48 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+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/examples.js

@@ -21,10 +21,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { action } from 'bpk-storybook-utils';
-import BpkButton from 'bpk-component-button';
-import { BpkList, BpkListItem } from 'bpk-component-list';
-import { BpkSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
-import { cssModules } from 'bpk-react-utils';
+import BpkButton from '../bpk-component-button';
+import { BpkList, BpkListItem } from '../bpk-component-list';
+import { BpkSpinner, SPINNER_TYPES } from '../bpk-component-spinner';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

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

@@ -25,7 +25,7 @@ import React, {
   type AbstractComponent,
 } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import omit from 'lodash/omit';
 import extend from 'lodash/extend';
 
@@ -95,133 +95,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 +233,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/examples.js

@@ -19,10 +19,10 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 import { action } from 'bpk-storybook-utils';
-import BpkLabel from 'bpk-component-label';
-import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';
+import BpkLabel from '../bpk-component-label';
+import BpkBannerAlert, { ALERT_TYPES } from '../bpk-component-banner-alert';
 
 import STYLES from './examples.module.scss';
 

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

@@ -19,9 +19,9 @@
 
 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';
+import ClearIcon from '../../bpk-component-icon/sm/close-circle';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkClearButton.module.scss';
 

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

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

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

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

package/bpk-component-label/src/BpkLabel.js

@@ -19,7 +19,7 @@
 
 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 './BpkLabel.module.scss';
 

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

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

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

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

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

@@ -20,7 +20,7 @@
 
 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/BpkListItem.js

@@ -20,7 +20,7 @@
 
 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/examples.js

@@ -24,9 +24,9 @@ import {
   withButtonAlignment,
   withLargeButtonAlignment,
   withRtlSupport,
-} from 'bpk-component-icon';
-import BaggageIconSm from 'bpk-component-icon/sm/baggage';
-import BaggageIconLg from 'bpk-component-icon/lg/baggage';
+} from '../bpk-component-icon';
+import BaggageIconSm from '../bpk-component-icon/sm/baggage';
+import BaggageIconLg from '../bpk-component-icon/lg/baggage';
 
 import BpkLoadingButton, { ICON_POSITION } from './index';
 

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

@@ -20,15 +20,15 @@
 
 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';
+} from '../../bpk-component-icon';
+import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
 
 export const ICON_POSITION = {
   LEADING: 'leading',

package/bpk-component-map/examples.js

@@ -20,12 +20,12 @@
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
 import { action } from 'bpk-storybook-utils';
-import BpkText from 'bpk-component-text';
-import { withRtlSupport } from 'bpk-component-icon';
-import LandmarkIconSm from 'bpk-component-icon/sm/landmark';
-import FoodIconSm from 'bpk-component-icon/sm/food';
-import ParkingIconSm from 'bpk-component-icon/sm/parking';
-import HotelIconSm from 'bpk-component-icon/sm/hotels';
+import BpkText from '../bpk-component-text';
+import { withRtlSupport } from '../bpk-component-icon';
+import LandmarkIconSm from '../bpk-component-icon/sm/landmark';
+import FoodIconSm from '../bpk-component-icon/sm/food';
+import ParkingIconSm from '../bpk-component-icon/sm/parking';
+import HotelIconSm from '../bpk-component-icon/sm/hotels';
 
 import BpkMap, {
   BpkOverlayView,

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

@@ -20,7 +20,7 @@
 
 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,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkIconMarkerBackground.module.scss';