@skyscanner/backpack-web 0.0.5 → 0.0.6

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -79,8 +79,8 @@ const BpkAccordionItem = (props: Props) => {
   const contentId = `${id}_content`;
   const clonedIcon = icon
     ? React.cloneElement(icon, {
-      className: getClassName('bpk-accordion__leading-icon'),
-    })
+        className: getClassName('bpk-accordion__leading-icon'),
+      })
     : null;
 
   return (

package/bpk-component-accordion/src/withAccordionItemState.js

@@ -59,7 +59,7 @@ const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
         (prevState) => ({
           expanded: !prevState.expanded,
         }),
-        this.props.onClick || (() => { }),
+        this.props.onClick || (() => {}),
       );
     };
 

package/bpk-component-aria-live/examples.js

@@ -187,7 +187,8 @@ class ChipsExample extends React.Component<
       const nextState = prevState;
       nextState.categories[category] = !prevState.categories[category];
       nextState.updates.push(
-        `${category} became ${nextState.categories[category] ? 'enabled' : 'disabled'
+        `${category} became ${
+          nextState.categories[category] ? 'enabled' : 'disabled'
         }.`,
       );
       return nextState;

package/bpk-component-autosuggest/examples.js

@@ -108,8 +108,8 @@ const getSuggestions = (value, hanzi) => {
   return inputLength === 0
     ? []
     : data.filter(
-      (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
-    );
+        (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
+      );
 };
 
 const getSuggestionValue = (suggestion) =>

package/bpk-component-badge/examples.js

@@ -24,7 +24,7 @@ import BpkSmallFlightIcon from '../bpk-component-icon/sm/flight';
 import BpkSmallWeatherIcon from '../bpk-component-icon/sm/weather';
 import BpkSmallTickIcon from '../bpk-component-icon/sm/tick-circle';
 import BpkSmallCloseIcon from '../bpk-component-icon/sm/close-circle';
-import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 import BadgeLayout from './BadgeLayout';
 

package/bpk-component-banner-alert/examples.js

@@ -18,7 +18,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import CurrencyIcon from '../bpk-component-icon/sm/currency';
 import { AriaLiveDemo } from '../bpk-component-aria-live/examples';

package/bpk-component-barchart/src/BpkChartGridLines.js

@@ -66,15 +66,15 @@ const BpkChartGridLines = (props: Props) => {
     const value = position(tick);
     return orientation === ORIENTATION_X
       ? {
-        x1: value,
-        x2: value,
-        y2: height - margin.top - margin.bottom,
-      }
+          x1: value,
+          x2: value,
+          y2: height - margin.top - margin.bottom,
+        }
       : {
-        x2: width - margin.left - margin.right,
-        y1: value,
-        y2: value,
-      };
+          x2: width - margin.left - margin.right,
+          y1: value,
+          y2: value,
+        };
   };
 
   const toLine = (tick, i) => (

package/bpk-component-button/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 import {
   withButtonAlignment,

package/bpk-component-calendar/coloured-calendar-example.js

@@ -20,7 +20,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import {
   BpkCalendarGrid,

package/bpk-component-calendar/examples-components.js

@@ -29,7 +29,7 @@ import {
   colorSkyGrayTint04,
   colorMonteverde,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import { withButtonAlignment, withRtlSupport } from '../bpk-component-icon';
 import SmallLongArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';

package/bpk-component-calendar/examples.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import addMonths from 'date-fns/addMonths';
 import BpkText from '../bpk-component-text';
 import startOfDay from 'date-fns/startOfDay';

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -172,11 +172,11 @@ class BpkCalendarGridTransition extends Component {
                   index === 1
                     ? focusedDate
                     : getFocusedDateForMonth(
-                      m,
-                      focusedDate,
-                      rest.minDate,
-                      rest.maxDate,
-                    )
+                        m,
+                        focusedDate,
+                        rest.minDate,
+                        rest.maxDate,
+                      )
                 }
                 aria-hidden={index !== 1}
                 className={getClassName('bpk-calendar-grid-transition__grid')}
@@ -208,12 +208,12 @@ BpkCalendarGridTransition.defaultProps = {
 };
 
 const addCalendarGridTransition = (TransitionComponent) => (props) =>
-(
-  <BpkCalendarGridTransition
-    TransitionComponent={TransitionComponent}
-    {...props}
-  />
-);
+  (
+    <BpkCalendarGridTransition
+      TransitionComponent={TransitionComponent}
+      {...props}
+    />
+  );
 
 export default BpkCalendarGridTransition;
 export { addCalendarGridTransition };

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -39,14 +39,14 @@ const getClassName = cssModules(STYLES);
 
 const changeMonth =
   ({ callback, max, min, month, source }) =>
-    (event) => {
-      // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
-      // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
-      if (isWithinRange(month, { start: min, end: max })) {
-        event.persist();
-        callback(event, { month, source });
-      }
-    };
+  (event) => {
+    // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
+    // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
+    if (isWithinRange(month, { start: min, end: max })) {
+      event.persist();
+      callback(event, { month, source });
+    }
+  };
 
 const BpkCalendarNav = (props) => {
   const {

package/bpk-component-calendar/src/Week.js

@@ -249,7 +249,7 @@ class Week extends Component {
     // render, component should update.
     if (
       this.props.selectionConfiguration.type ===
-      CALENDAR_SELECTION_TYPE.single &&
+        CALENDAR_SELECTION_TYPE.single &&
       this.props.selectionConfiguration.date
     ) {
       return singleDateHandler(this.props, nextProps);

package/bpk-component-checkbox/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 import {
   spacingXs,
   spacingSm,

package/bpk-component-chip/examples.js

@@ -47,7 +47,7 @@ type StatefulSelectableChipProps = $Diff<
     accessibilityLabel: string,
     onClick: (event: SyntheticEvent<>) => mixed,
   },
-  >;
+>;
 /* eslint-enable */
 
 class StatefulSelectableChip extends React.Component<

package/bpk-component-close-button/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import BpkCloseButton from './index';
 

package/bpk-component-datepicker/examples.js

@@ -19,7 +19,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { memoize } from 'lodash';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import {
   colorSagano,
   colorBagan,

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
-import { withScrim } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 import { BpkContentBubble } from '../../bpk-component-flare';
 
 import {

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

@@ -21,7 +21,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Portal, cssModules } from '../../bpk-react-utils';
-import { withScrim } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 
 import BpkDrawerContent from './BpkDrawerContent';
 import STYLES from './BpkDrawer.module.scss';

package/bpk-component-fieldset/examples.js

@@ -109,8 +109,8 @@ const getSuggestions = (value) => {
   return inputLength === 0
     ? []
     : offices.filter(
-      (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
-    );
+        (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
+      );
 };
 
 const getSuggestionValue = (suggestion) =>

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

@@ -25,7 +25,7 @@ import {
   colorSkyGrayTint06,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkText from '../bpk-component-text';
-import { BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 import STYLES from './examples.module.scss';
 

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

@@ -23,8 +23,9 @@ 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-image/src/withLoadingBehavior.js

@@ -22,44 +22,44 @@ 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

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
+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';

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

@@ -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

@@ -20,7 +20,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../bpk-react-utils';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import BpkLabel from '../bpk-component-label';
 import BpkBannerAlert, { ALERT_TYPES } from '../bpk-component-banner-alert';
 

package/bpk-component-link/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 import {
   colorWhite,
   colorSkyGrayTint04,

package/bpk-component-loading-button/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import {
   withButtonAlignment,
   withLargeButtonAlignment,

package/bpk-component-map/examples.js

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

package/bpk-component-modal/examples.js

@@ -272,7 +272,7 @@ const WithAccessoryViewExample = () => (
     accessoryView={
       <BpkNavigationBarButtonLink
         label="Close"
-        onClick={() => { }}
+        onClick={() => {}}
         className={getClassName('bpk-modal__leading-button')}
       >
         <div>

package/bpk-component-modal/src/BpkModal.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { withScrim } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
@@ -45,12 +45,12 @@ export type Props = {
   // diff will suffice for now.
   ...$Exact<$Diff<ModalDialogProps, ScrimProps>>,
   isOpen: boolean,
-    isIphone: boolean,
-      closeOnScrimClick: boolean,
-        closeOnEscPressed: boolean,
-          renderTarget: ?() => ? HTMLElement,
-            target: ?((() => ? HTMLElement) | Element < any >),
-              onClose: (event: SyntheticEvent<>) => void | null,
+  isIphone: boolean,
+  closeOnScrimClick: boolean,
+  closeOnEscPressed: boolean,
+  renderTarget: ?() => ?HTMLElement,
+  target: ?((() => ?HTMLElement) | Element<any>),
+  onClose: (event: SyntheticEvent<>) => void | null,
 };
 
 const BpkModal = (props: Props) => {

package/bpk-component-navigation-bar/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import { withRtlSupport } from '../bpk-component-icon';
 import ArrowIcon from '../bpk-component-icon/sm/long-arrow-left';
 import CloseIcon from '../bpk-component-icon/sm/close';

package/bpk-component-navigation-stack/src/BpkNavigationStack.js

@@ -87,11 +87,12 @@ class BpkNavigationStack extends React.Component<Props, State> {
           className={getClassName(
             'bpk-navigation-stack__view-track',
             transition &&
-            `bpk-navigation-stack__view-track--view-${transition}`,
+              `bpk-navigation-stack__view-track--view-${transition}`,
           )}
           style={{
-            transform: `translateX(${lastIndex === 0 ? '0%' : `${isRTL() ? '' : '-'}${lastIndex}00%`
-              })`,
+            transform: `translateX(${
+              lastIndex === 0 ? '0%' : `${isRTL() ? '' : '-'}${lastIndex}00%`
+            })`,
           }}
         >
           {Children.map(views, (view, idx) => (

package/bpk-component-navigation-stack/stories-components.js

@@ -53,15 +53,15 @@ export const View = ({
 }: {
   children: ({
     index: number,
-    pushView: ? (Element < any >) => mixed,
-    popView: ? () => mixed,
-  }) => ?Element < any >,
-    index: number,
-      pushView: ?(Element < any >) => mixed,
-        popView: ?() => mixed,
-          className: ?string,
-            noNavBar: boolean,
-              centered: boolean,
+    pushView: ?(Element<any>) => mixed,
+    popView: ?() => mixed,
+  }) => ?Element<any>,
+  index: number,
+  pushView: ?(Element<any>) => mixed,
+  popView: ?() => mixed,
+  className: ?string,
+  noNavBar: boolean,
+  centered: boolean,
 }) => (
   // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
   <section
@@ -93,8 +93,8 @@ export const SimpleNav = ({
   pushView,
 }: {
   index: number,
-  pushView: ?(Element < any >) => mixed,
-    popView: ?() => mixed,
+  pushView: ?(Element<any>) => mixed,
+  popView: ?() => mixed,
 }) => (
   <div>
     <BpkButton
@@ -124,9 +124,9 @@ export const NavigationBar = ({
   pushView,
 }: {
   index: number,
-  pushView: ?(Element < any >) => mixed,
-    popView: ?() => mixed,
-      nextView: ?() => ? Element < any >,
+  pushView: ?(Element<any>) => mixed,
+  popView: ?() => mixed,
+  nextView: ?() => ?Element<any>,
 }) => (
   <BpkNavigationBar
     id={`my-navigation-bar-${index}`}

package/bpk-component-nudger/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React, { Component } from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 import BpkLabel from '../bpk-component-label';
 import { cssModules } from '../bpk-react-utils';
 

package/bpk-component-overlay/src/BpkOverlay.js

@@ -57,7 +57,7 @@ const BpkOverlay = (props: Props) => {
   const overlayClassNames = getClassName(
     'bpk-overlay__overlay',
     borderRadiusStyle === BORDER_RADIUS_STYLES.sm &&
-    'bpk-overlay__overlay--border-radius-sm',
+      'bpk-overlay__overlay--border-radius-sm',
     overlayType === OVERLAY_TYPES.tint && 'bpk-overlay__overlay--tint',
   );
 

package/bpk-component-radio/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
 
 import BpkRadio from './index';
 

package/bpk-component-scrollable-calendar/examples.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import startOfMonth from 'date-fns/startOfMonth';
 import endOfMonth from 'date-fns/endOfMonth';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import {
   DateUtils,
   CustomPropTypes,

package/bpk-component-section-list/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import BpkSectionList, {
   BpkSectionListSection,

package/bpk-component-select/examples.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 
 import BpkSelect from './index';
 

package/bpk-component-slider/examples.js

@@ -51,15 +51,15 @@ class SliderContainer extends Component {
       <div>
         {this.state.value.length
           ? this.valueComponent(
-            this.state.value[0],
-            this.state.value[1],
-            time && this.valueTimeFormatter,
-          )
+              this.state.value[0],
+              this.state.value[1],
+              time && this.valueTimeFormatter,
+            )
           : this.valueComponent(
-            min,
-            this.state.value,
-            time && this.valueTimeFormatter,
-          )}
+              min,
+              this.state.value,
+              time && this.valueTimeFormatter,
+            )}
         <BpkSlider
           min={min}
           max={time ? 59 : 100}

package/bpk-component-star-rating/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import {
   BpkTable,
   BpkTableBody,

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -53,9 +53,9 @@ type Props = {
   maxRating: number,
   rating: number,
   rounding:
-  | typeof ROUNDING_TYPES.down
-  | typeof ROUNDING_TYPES.up
-  | typeof ROUNDING_TYPES.nearest,
+    | typeof ROUNDING_TYPES.down
+    | typeof ROUNDING_TYPES.up
+    | typeof ROUNDING_TYPES.nearest,
 };
 
 const BpkStarRating = (props: Props) => {

package/bpk-component-textarea/examples.js

@@ -19,7 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
-import { action } from 'bpk-storybook-utils';
+import { action } from '../bpk-storybook-utils';
 import BpkLabel from '../bpk-component-label';
 
 import BpkTextarea from './index';

package/bpk-component-ticket/src/BpkTicket.js

@@ -93,13 +93,13 @@ const BpkTicket = (props: Props) => {
   const punchlineClassNames = getClassName(
     'bpk-ticket__punchline',
     vertical &&
-    (withNotches
-      ? 'bpk-ticket__punchline--horizontal-with-notches'
-      : 'bpk-ticket__punchline--horizontal'),
+      (withNotches
+        ? 'bpk-ticket__punchline--horizontal-with-notches'
+        : 'bpk-ticket__punchline--horizontal'),
     !vertical &&
-    (withNotches
-      ? 'bpk-ticket__punchline--vertical-with-notches'
-      : 'bpk-ticket__punchline--vertical'),
+      (withNotches
+        ? 'bpk-ticket__punchline--vertical-with-notches'
+        : 'bpk-ticket__punchline--vertical'),
   );
 
   const startNotchClassNames = getClassName(

package/bpk-component-tooltip/examples.js

@@ -157,7 +157,7 @@ const FocusExample = () => (
     >
       Should be focused on third
     </BpkTooltip>
-    <button type="button" onClick={() => { }}>
+    <button type="button" onClick={() => {}}>
       Four
     </button>
     <BpkTooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",