@skyscanner/backpack-web 0.0.3 → 0.0.4

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';
 

package/bpk-component-fieldset/examples.js

@@ -34,7 +34,7 @@ import {
   formatDateFull,
 } from '../../bpk-component-calendar/test-utils';
 import { format } from '../../bpk-component-calendar/src/date-utils';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import React, { cloneElement, type Element } from 'react';
 import BpkLabel from '../../bpk-component-label';
 import BpkFormValidation from '../../bpk-component-form-validation';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkFieldset.module.scss';
 

package/bpk-component-flare/examples.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 
 import { BpkFlareBar, BpkContentBubble } from './index';
 

package/bpk-component-flare/src/BpkContentBubble.js

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

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './bpk-flare-bar.module.scss';
 import Pointer from './__generated__/js/pointer';

package/bpk-component-form-validation/examples.js

@@ -23,7 +23,7 @@ import BpkSelect from '../../bpk-component-select';
 import BpkCheckbox from '../../bpk-component-checkbox';
 import BpkTextarea from '../../bpk-component-textarea';
 import BpkInput from '../../bpk-component-input';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 
 import STYLES from './examples.module.scss';
 

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -18,8 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AnimateHeight from 'bpk-animate-height';
-import { cssModules } from 'bpk-react-utils';
+import AnimateHeight from '../../bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
 import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
 import { withAlignment } from '../../bpk-component-icon';
 import {

package/bpk-component-grid/src/BpkGridColumn.js

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

package/bpk-component-grid/src/BpkGridContainer.js

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

package/bpk-component-grid/src/BpkGridRow.js

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

package/bpk-component-grid-toggle/src/BpkGridToggle.js

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

package/bpk-component-horizontal-nav/examples.js

@@ -17,7 +17,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../bpk-react-utils';
 import {
   spacingXs,
   spacingSm,

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -19,7 +19,7 @@
 
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import React, { Component, type Node } from 'react';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

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

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default (displayName, classNamesToAdd = []) =>
   (ComposedComponent) => {

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

@@ -17,15 +17,14 @@
  */
 
 import React from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+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,7 +18,7 @@
 /* @flow strict */
 
 import React, { type AbstractComponent } from 'react';
-import { cssModules, wrapDisplayName } from 'bpk-react-utils';
+import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
 
 import STYLES from './withDescription.module.scss';
 

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/src/BpkBackgroundImage.js

@@ -19,7 +19,7 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from 'bpk-react-utils';
+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,7 +19,7 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from 'bpk-react-utils';
+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

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