@skyscanner/backpack-web 0.1.0 → 0.4.0

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "1.0.3",
+  "version": "3.0.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-card": "^4.1.5",
-    "bpk-component-text": "^6.1.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-button": "^6.2.2",
+    "bpk-component-card": "^4.1.8",
+    "bpk-component-text": "^7.0.1",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.5.8"
   },

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';
 
@@ -33,17 +34,12 @@ export const TEXT_ALIGN = {
   center: 'center',
   end: 'end',
 };
-export const TEXT_COLORS = {
-  black: 'black',
-  white: 'white',
-};
 
 export type Props = {
   className: ?string,
   tagline: ?string,
   headline: string,
   subheading: ?string,
-  image: string,
   sponsor: ?{
     label: string,
     logo: string,
@@ -53,7 +49,7 @@ export type Props = {
   onClick: () => void,
   invertVertically: boolean,
   textAlign: TEXT_ALIGN,
-  textColor: TEXT_COLORS,
+  style: ?{},
 };
 
 const constructAriaLabel = ({
@@ -84,14 +80,13 @@ const BpkGraphicPromo = (props: Props) => {
     buttonText,
     className,
     headline,
-    image,
     invertVertically,
     onClick,
     sponsor,
+    style,
     subheading,
     tagline,
     textAlign,
-    textColor,
   } = props;
 
   // FIXME: Use useCallback() here when React is updated.
@@ -109,11 +104,10 @@ const BpkGraphicPromo = (props: Props) => {
 
   const getTextClasses = (baseClass: string) =>
     getClassName(baseClass, `${baseClass}--${textAlign}`);
-
   return (
     <BpkCard
       className={cardClasses}
-      style={{ backgroundImage: `url(${image})`, color: textColor }}
+      style={style}
       onClick={onClickWrapper}
       aria-label={constructAriaLabel(props)}
       padded={false}
@@ -160,6 +154,7 @@ const BpkGraphicPromo = (props: Props) => {
             </BpkText>
           )}
           <BpkButton
+            primaryOnDark
             className={getClassName('bpk-graphic-promo__cta')}
             onClick={onClickWrapper}
             tabIndex={-1} /* button is not focusable for accessibility */
@@ -177,7 +172,6 @@ BpkGraphicPromo.propTypes = {
   tagline: PropTypes.string,
   headline: PropTypes.string.isRequired,
   subheading: PropTypes.string,
-  image: PropTypes.string.isRequired,
   sponsor: PropTypes.shape({
     label: PropTypes.string,
     logo: PropTypes.string,
@@ -187,7 +181,7 @@ BpkGraphicPromo.propTypes = {
   onClick: PropTypes.func.isRequired,
   invertVertically: PropTypes.bool,
   textAlign: PropTypes.oneOf(Object.values(TEXT_ALIGN)).isRequired,
-  textColor: PropTypes.oneOf(Object.values(TEXT_COLORS)),
+  style: PropTypes.shape({ [PropTypes.string]: PropTypes.string }),
 };
 
 BpkGraphicPromo.defaultProps = {
@@ -196,7 +190,7 @@ BpkGraphicPromo.defaultProps = {
   subheading: null,
   sponsor: null,
   invertVertically: false,
-  textColor: TEXT_COLORS.white,
+  style: {},
 };
 
 export default BpkGraphicPromo;

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

@@ -26,6 +26,7 @@
   background-color: $bpk-color-sky-blue;
   background-position: center;
   background-size: cover;
+  color: $bpk-color-white;
   box-shadow: none;
 
   @include breakpoint-landscape {
@@ -236,14 +237,8 @@
   }
 
   &__cta {
-    // Remove the following 2 lines once the new Button style is reasdy in Backpack. (ST-4135)
-    background: $bpk-color-white;
-    color: black; /* stylelint-disable-line */
     pointer-events: auto;
 
-    // Remove the following line once the new Button style is reasdy in Backpack. (ST-4135)
-    @include bpk-label-1;
-
     @include breakpoint-landscape {
       margin-top: bpk-spacing-xl();
     }

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.4",
+  "version": "3.1.7",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.4",
+  "version": "3.1.7",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.4",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-link": "^3.1.7",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.5",
+  "version": "5.1.8",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.4",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-mobile-scroll-container": "^3.1.7",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-text": "^6.1.5",
-    "bpk-storybook-utils": "^1.1.3"
+    "@skyscanner/bpk-foundations-web": "^7.0.0",
+    "bpk-component-text": "^7.0.1",
+    "bpk-storybook-utils": "^1.1.6"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.5",
+  "version": "9.2.8",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "@skyscanner/bpk-svgs": "^14.1.5",
-    "bpk-mixins": "^28.1.0",
+    "@skyscanner/bpk-foundations-web": "^7.0.0",
+    "@skyscanner/bpk-svgs": "^14.1.8",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-list": "^3.1.4",
-    "bpk-component-text": "^6.1.5"
+    "bpk-component-button": "^6.2.2",
+    "bpk-component-list": "^4.0.0",
+    "bpk-component-text": "^7.0.1"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.5",
+  "version": "5.1.8",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.4",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-spinner": "^5.1.7",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -24,8 +24,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-component-mobile-scroll-container": "^3.1.4",
-    "bpk-component-text": "^6.1.5"
+    "@skyscanner/bpk-foundations-web": "^7.0.0",
+    "bpk-component-mobile-scroll-container": "^3.1.7",
+    "bpk-component-text": "^7.0.1"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "4.1.4",
+  "version": "4.1.7",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
@@ -23,9 +23,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.1.0",
-    "bpk-component-list": "^3.1.4",
-    "bpk-component-spinner": "^5.1.4",
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-component-button": "^6.2.2",
+    "bpk-component-list": "^4.0.0",
+    "bpk-component-spinner": "^5.1.7",
+    "bpk-storybook-utils": "^1.1.6"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.5",
+  "version": "6.1.10",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.5",
-    "bpk-mixins": "^28.1.0",
+    "bpk-component-icon": "^9.2.8",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.5",
-    "bpk-component-label": "^5.1.4",
-    "bpk-storybook-utils": "^1.1.3"
+    "bpk-component-banner-alert": "^6.1.10",
+    "bpk-component-label": "^5.1.7",
+    "bpk-storybook-utils": "^1.1.6"
   }
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "5.1.4",
+  "version": "5.1.7",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "3.1.4",
+  "version": "3.1.7",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^28.1.0",
+    "bpk-mixins": "^30.0.0",
     "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^6.1.0",
-    "bpk-storybook-utils": "^1.1.3"
+    "@skyscanner/bpk-foundations-web": "^7.0.0",
+    "bpk-storybook-utils": "^1.1.6"
   }
 }

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,