@skyscanner/backpack-web 3.0.0 → 3.2.0

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

@@ -19,9 +19,10 @@
 
 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 BpkLabel from '../../bpk-component-label';
+import BpkFormValidation from '../../bpk-component-form-validation';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkFieldset.module.scss';
 

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

@@ -18,7 +18,8 @@
 
 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,8 @@
 
 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/src/BpkFormValidation.js

@@ -18,15 +18,16 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-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 {
   lineHeightSm,
   iconSizeSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+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 STYLES from './BpkFormValidation.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -19,10 +19,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
-import BpkButton from 'bpk-component-button';
-import BpkCard from 'bpk-component-card';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText from '../../bpk-component-text';
+import BpkButton from '../../bpk-component-button';
+import BpkCard from '../../bpk-component-card';
 
 import STYLES from './BpkGraphicPromo.module.scss';
 

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -30,8 +30,6 @@
   box-shadow: none;
 
   @include breakpoint-landscape {
-    pointer-events: none;
-
     &__sponsor-label {
       margin-bottom: bpk-spacing-sm();
 
@@ -172,6 +170,11 @@
 
       @include bpk-margin-leading(bpk-spacing-xxxl(), false);
       @include bpk-margin-trailing(bpk-spacing-xxl(), false);
+
+      /* adjusting for 1.5rem different between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-lg());
+      }
     }
 
     @include breakpoint-landscape-tablet {
@@ -179,6 +182,11 @@
 
       @include bpk-margin-leading(bpk-spacing-xxl(), false);
       @include bpk-margin-trailing(bpk-spacing-xl(), false);
+
+      /* adjusting for 0.5rem different between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-md());
+      }
     }
 
     @include breakpoint-portrait-large {
@@ -237,8 +245,6 @@
   }
 
   &__cta {
-    pointer-events: auto;
-
     @include breakpoint-landscape {
       margin-top: bpk-spacing-xl();
     }

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

@@ -18,7 +18,8 @@
 
 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,8 @@
 
 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,8 @@
 
 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,8 +18,9 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import { BpkButtonLink } from 'bpk-component-link';
+
+import { cssModules } from '../../bpk-react-utils';
+import { BpkButtonLink } from '../../bpk-component-link';
 
 import STYLES from './BpkGridToggle.module.scss';
 

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

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

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

@@ -19,7 +19,8 @@
 
 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,8 @@
 
 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,7 +17,8 @@
  */
 
 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) => {

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

@@ -18,7 +18,8 @@
 /* @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,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,7 +18,8 @@
 /* @flow */
 
 import React, { type AbstractComponent } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 type InjectedProps = {|
   onLoad: () => mixed,

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

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

@@ -19,9 +19,10 @@
 
 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,8 @@
 /* @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,8 @@
 
 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,8 @@
 
 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,8 @@
 
 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,8 @@
 
 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,8 @@
 
 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,8 @@
 
 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/src/BpkLoadingButton.js

@@ -20,16 +20,17 @@
 
 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';
-import { cssModules } from 'bpk-react-utils';
+} from '../../bpk-component-icon';
+import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
+import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkLoadingButton.module.scss';
 

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

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

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

@@ -20,9 +20,10 @@
 
 import React, { type Node, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
 import { GoogleMap } from '@react-google-maps/api';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import { LatLongPropType, type LatLong } from './common-types';
 import STYLES from './BpkMap.module.scss';
 

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

@@ -20,8 +20,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text/src/BpkText';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText';
 
 import { LatLongPropType, type LatLong } from './common-types';
 import BpkBasicMapMarker from './BpkBasicMapMarker';

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

@@ -18,8 +18,9 @@
 /* @flow strict */
 
 import React from 'react';
-import { BpkLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
-import { cssModules } from 'bpk-react-utils';
+
+import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './DefaultLoadingElement.module.scss';
 

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -21,7 +21,8 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import React, { Component, type Node } from 'react';
-import { cssModules, isRTL } from 'bpk-react-utils';
+
+import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkMobileScrollContainer.module.scss';
 

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

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { withScrim } from 'bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from 'bpk-react-utils';
+
+import { withScrim } from '../../bpk-scrim-utils';
+import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {

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

@@ -18,12 +18,13 @@
 
 /* @flow strict */
 
-import { BpkButtonLink } from 'bpk-component-link';
 import PropTypes from 'prop-types';
 import React, { type Node, type Element } from 'react';
-import BpkCloseButton from 'bpk-component-close-button';
-import BpkNavigationBar from 'bpk-component-navigation-bar';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import { BpkButtonLink } from '../../bpk-component-link';
+import BpkCloseButton from '../../bpk-component-close-button';
+import BpkNavigationBar from '../../bpk-component-navigation-bar';
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkModalInner.module.scss';
 import { titlePropType, onClosePropType } from './customPropTypes';

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from 'bpk-component-link';
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
 
 export default [...linkAttributes];

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -20,8 +20,9 @@
 
 import React, { type Node, type Element } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkNavigationBar.module.scss';
 

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -20,9 +20,10 @@
 
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
-import { BpkButtonLink } from 'bpk-component-link';
-import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from '../../bpk-component-link';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarButtonLink.module.scss';
 

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -20,9 +20,10 @@
 
 import React, { type ComponentType } from 'react';
 import PropTypes from 'prop-types';
+
 // TODO: close button is not really only a close button, we should rename and update the import here
-import BpkIconButton from 'bpk-component-close-button';
-import { cssModules } from 'bpk-react-utils';
+import BpkIconButton from '../../bpk-component-close-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkNavigationBarIconButton.module.scss';
 

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

@@ -18,13 +18,14 @@
 
 /* @flow strict */
 
-import { cssModules, isRTL } from 'bpk-react-utils';
 import React, { Children, type Element } from 'react';
 import PropTypes from 'prop-types';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionGroup, Transition } from 'react-transition-group';
 import debounce from 'lodash/debounce';
 
+import { cssModules, isRTL } from '../../bpk-react-utils';
+
 import STYLES from './BpkNavigationStack.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -21,12 +21,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import BpkButtonSecondary from 'bpk-component-button/BpkButtonSecondary';
-import BpkButtonSecondaryOnDark from 'bpk-component-button/BpkButtonSecondaryOnDark';
-import { withButtonAlignment } from 'bpk-component-icon';
-import MinusIcon from 'bpk-component-icon/sm/minus';
-import PlusIcon from 'bpk-component-icon/sm/plus';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';
+import { withButtonAlignment } from '../../bpk-component-icon';
+import MinusIcon from '../../bpk-component-icon/sm/minus';
+import PlusIcon from '../../bpk-component-icon/sm/plus';
+import { cssModules } from '../../bpk-react-utils';
 
 import {
   type CommonProps,

package/bpk-component-nudger/src/BpkNudger.js

@@ -20,7 +20,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkConfigurableNudger from './BpkConfigurableNudger';
 import {