@skyscanner/backpack-web 33.4.0 → 33.6.0

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Component, Children, cloneElement } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkHorizontalNav.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -113,20 +113,22 @@ class BpkHorizontalNav extends Component {
     return (
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkMobileScrollContainer, {
-        ariaLabel: ariaLabel,
-        innerContainerTagName: "nav",
+      _jsx("div", {
         className: classNames,
-        leadingIndicatorClassName: leadingScrollIndicatorClassName,
-        trailingIndicatorClassName: trailingScrollIndicatorClassName,
-        scrollerRef: ref => {
-          this.scrollRef = ref;
-        },
-        ...rest,
-        children: /*#__PURE__*/_jsx("div", {
-          className: getClassName('bpk-horizontal-nav__list'),
-          role: "tablist",
-          children: children
+        children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+          ariaLabel: ariaLabel,
+          innerContainerTagName: "nav",
+          leadingIndicatorClassName: leadingScrollIndicatorClassName,
+          trailingIndicatorClassName: trailingScrollIndicatorClassName,
+          scrollerRef: ref => {
+            this.scrollRef = ref;
+          },
+          ...rest,
+          children: /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-horizontal-nav__list'),
+            role: "tablist",
+            children: children
+          })
         })
       })
     );

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none}
+.bpk-horizontal-nav{position:relative}.bpk-horizontal-nav--show-default-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav--show-light-underline{box-shadow:0 1px 0 0 #c1c7cf}.bpk-horizontal-nav__list{display:flex;margin:0;padding:0;align-items:stretch;list-style-type:none}

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

@@ -14,8 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { Component } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
 import STYLES from "./BpkHorizontalNavItem.module.css";

package/bpk-component-icon/index.js

@@ -20,8 +20,8 @@ import { iconSizeSm, iconSizeLg, privateButtonLineHeight
 // @ts-expect-error Untyped import. We will need to review how these files are handled
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import withAlignment from "./src/withAlignment";
-import withRtlSupport from "./src/withRtlSupport";
 import withDescription from "./src/withDescription";
+import withRtlSupport from "./src/withRtlSupport";
 
 // Wrapper functions to provide backwards compatibility
 function withButtonAlignment(WrappedComponent) {

package/bpk-component-icon/lg/ai.js

@@ -13,7 +13,6 @@ export default (({
   },
   ...props,
   children: /*#__PURE__*/_jsx("path", {
-    d: "M4.9 1.061c.025-.096.162-.096.187 0 .215.824.735 2.775.897 2.938.163.162 2.114.682 2.938.897.096.024.096.162 0 .187-.824.214-2.775.734-2.938.897-.162.162-.682 2.113-.897 2.937-.025.096-.162.096-.187 0-.214-.824-.734-2.775-.897-2.937-.162-.163-2.113-.683-2.938-.897-.095-.025-.095-.163 0-.187.825-.215 2.776-.735 2.938-.897.163-.163.683-2.114.897-2.938zm6.668 1.267c.116-.437.748-.437.863 0 .638 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.185.437.115.437.747 0 .862-2.42.638-6.668 1.797-7.056 2.185-.388.388-1.547 4.635-2.185 7.056-.115.437-.747.437-.862 0-.638-2.42-1.797-6.668-2.185-7.056-.388-.388-4.635-1.547-7.056-2.185-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.184-7.056zm-6.516 14.19c-.015-.06-.101-.06-.117 0-.134.516-.459 1.735-.56 1.836-.102.102-1.321.427-1.836.561-.06.015-.06.102 0 .117.515.134 1.734.459 1.836.56.101.102.426 1.321.56 1.837.016.06.102.06.117 0 .134-.516.46-1.735.56-1.836.102-.102 1.322-.427 1.837-.561.06-.015.06-.102 0-.117-.515-.134-1.735-.459-1.836-.56-.102-.102-.427-1.321-.56-1.837zM18.935 2.425c.016-.06.102-.06.117 0 .134.515.46 1.734.56 1.836.102.101 1.322.426 1.837.56.06.016.06.102 0 .117-.515.134-1.735.46-1.836.56-.102.102-.427 1.322-.56 1.837-.016.06-.102.06-.118 0-.134-.515-.459-1.735-.56-1.836-.102-.102-1.321-.427-1.836-.56-.06-.016-.06-.102 0-.118.515-.134 1.734-.459 1.836-.56.101-.102.426-1.321.56-1.836zm.152 12.657c-.025-.096-.162-.096-.187 0-.214.824-.734 2.775-.897 2.938-.162.162-2.113.682-2.938.896-.095.025-.095.163 0 .188.825.214 2.776.734 2.938.896.163.163.683 2.114.897 2.938.025.096.162.096.187 0 .215-.824.735-2.775.897-2.938.163-.162 2.113-.682 2.938-.896.096-.025.096-.163 0-.188-.825-.214-2.775-.734-2.938-.896-.163-.163-.682-2.114-.897-2.938z",
-    clipRule: "evenodd"
+    d: "M4.094 1.072c-.025-.096-.163-.096-.188 0-.214.824-.734 2.775-.896 2.938-.163.162-2.114.682-2.938.896-.096.025-.096.163 0 .188.824.214 2.775.734 2.938.896.162.163.682 2.114.896 2.938.025.096.163.096.188 0 .214-.824.734-2.775.896-2.938.163-.162 2.114-.682 2.938-.896.096-.025.096-.163 0-.188-.824-.214-2.775-.734-2.938-.896-.162-.163-.682-2.114-.896-2.938zm9.475 2.256c.115-.437.747-.437.862 0 .638 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.185.437.115.437.747 0 .862-2.42.638-6.668 1.797-7.056 2.185-.388.388-1.547 4.635-2.185 7.056-.115.437-.747.437-.862 0-.638-2.42-1.797-6.668-2.185-7.056-.388-.388-4.635-1.547-7.056-2.185-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.185-7.056zM6.953 18.036c.013-.048.081-.048.094 0 .107.412.367 1.387.448 1.469.082.081 1.057.341 1.47.448.047.013.047.081 0 .094-.413.107-1.388.367-1.47.448-.081.081-.341 1.057-.448 1.47-.013.047-.081.047-.094 0-.107-.413-.367-1.389-.448-1.47-.082-.081-1.057-.341-1.47-.448-.047-.013-.047-.081 0-.094.413-.107 1.388-.367 1.47-.448.081-.081.341-1.057.448-1.47z"
   })
 }));

package/bpk-component-icon/lg/dot.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  style: {
+    width: "1.5rem",
+    height: "1.5rem"
+  },
+  ...props,
+  children: /*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "8"
+  })
+}));

package/bpk-component-icon/sm/ai.js

@@ -13,7 +13,6 @@ export default (({
   },
   ...props,
   children: /*#__PURE__*/_jsx("path", {
-    d: "M4.9 1.061c.025-.096.162-.096.187 0 .215.824.735 2.775.897 2.938.163.162 2.114.682 2.938.897.096.024.096.162 0 .187-.824.214-2.775.734-2.938.897-.162.162-.682 2.113-.897 2.937-.025.096-.162.096-.187 0-.214-.824-.734-2.775-.897-2.937-.162-.163-2.113-.683-2.938-.897-.095-.025-.095-.163 0-.187.825-.215 2.776-.735 2.938-.897.163-.163.683-2.114.897-2.938zm6.669 1.267c.115-.438.747-.438.862 0 .638 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.184.438.116.438.748 0 .863-2.42.638-6.668 1.797-7.056 2.185-.388.388-1.547 4.635-2.184 7.056-.116.437-.748.437-.863 0-.638-2.42-1.797-6.668-2.185-7.056-.388-.388-4.635-1.547-7.056-2.185-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.185-7.056zm-6.517 14.19c-.015-.06-.101-.06-.117 0-.134.515-.459 1.735-.56 1.836-.102.102-1.321.427-1.836.56-.06.016-.06.102 0 .118.515.134 1.734.459 1.836.56.101.102.426 1.321.56 1.836.016.06.102.06.117 0 .134-.515.46-1.734.56-1.836.102-.101 1.322-.426 1.837-.56.06-.016.06-.102 0-.117-.515-.134-1.735-.46-1.836-.56-.102-.102-.427-1.322-.56-1.837zM18.935 2.425c.016-.06.102-.06.117 0 .134.515.46 1.734.56 1.836.102.101 1.322.426 1.837.56.06.016.06.102 0 .117-.515.134-1.735.46-1.836.56-.102.102-.427 1.322-.56 1.837-.016.06-.102.06-.118 0-.134-.515-.459-1.735-.56-1.836-.102-.102-1.321-.427-1.836-.56-.06-.016-.06-.102 0-.118.515-.134 1.734-.459 1.836-.56.101-.102.426-1.321.56-1.836zm.152 12.657c-.024-.096-.162-.096-.187 0-.214.824-.734 2.775-.897 2.937-.162.163-2.113.683-2.937.897-.096.025-.096.163 0 .188.824.214 2.775.734 2.937.896.163.163.683 2.114.897 2.938.025.096.163.096.187 0 .215-.824.735-2.775.897-2.938.163-.162 2.114-.682 2.938-.896.096-.025.096-.163 0-.188-.824-.214-2.775-.734-2.938-.897-.162-.162-.682-2.113-.897-2.937z",
-    clipRule: "evenodd"
+    d: "M4.605.08c-.028-.107-.182-.107-.21 0-.241.928-.826 3.123-1.01 3.306-.182.183-2.377.768-3.304 1.009-.108.028-.108.182 0 .21.927.241 3.122.826 3.305 1.01.183.182.768 2.377 1.009 3.304.028.108.182.108.21 0 .241-.927.826-3.122 1.01-3.305.182-.183 2.377-.768 3.304-1.009.108-.028.108-.182 0-.21-.927-.241-3.122-.826-3.305-1.01-.183-.182-.768-2.377-1.009-3.304zm8.113 2.248c.116-.437.748-.437.863 0 .637 2.42 1.797 6.668 2.185 7.056.388.388 4.635 1.547 7.056 2.185.437.115.437.747 0 .862-2.421.638-6.668 1.797-7.056 2.185-.388.388-1.548 4.635-2.185 7.056-.115.438-.747.438-.863 0-.637-2.42-1.796-6.668-2.184-7.056-.389-.388-4.635-1.547-7.056-2.184-.438-.116-.438-.748 0-.863 2.42-.638 6.668-1.797 7.056-2.185.388-.388 1.547-4.635 2.184-7.056zM5.93 16.554c.018-.072.122-.072.14 0 .16.618.55 2.081.673 2.203.122.122 1.585.512 2.203.673.072.018.072.122 0 .14-.618.16-2.081.55-2.203.673-.122.122-.512 1.585-.673 2.203-.018.072-.122.072-.14 0-.16-.618-.55-2.081-.673-2.203-.122-.122-1.585-.512-2.203-.673-.072-.018-.072-.122 0-.14.618-.16 2.081-.55 2.203-.673.122-.122.512-1.585.673-2.203z"
   })
 }));

package/bpk-component-icon/sm/dot.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  style: {
+    width: "1rem",
+    height: "1rem"
+  },
+  ...props,
+  children: /*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9"
+  })
+}));

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

@@ -29,6 +29,9 @@ export default ((displayName, classNamesToAdd = []) => ComposedComponent => {
       classNames.push(className);
     }
     classNames = classNamesToAdd.length ? classNames.concat(classNamesToAdd) : classNames;
+
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     return /*#__PURE__*/_jsx(ComposedComponent, {
       className: classNames.join(' '),
       ...rest

package/bpk-component-image/index.js

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import BpkImage from "./src/BpkImage";
 import BpkBackgroundImage from "./src/BpkBackgroundImage";
+import BpkImage from "./src/BpkImage";
+import BORDER_RADIUS_STYLES from "./src/BpkImageBorderRadiusStyles";
 import withLazyLoading from "./src/withLazyLoading";
 import withLoadingBehavior from "./src/withLoadingBehavior";
-import BORDER_RADIUS_STYLES from "./src/BpkImageBorderRadiusStyles";
 export default BpkImage;
 export { BpkBackgroundImage, withLazyLoading, withLoadingBehavior, BORDER_RADIUS_STYLES };

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

@@ -22,9 +22,10 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkSpinner } from "../../bpk-component-spinner";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBackgroundImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -23,9 +23,10 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkSpinner } from "../../bpk-component-spinner";
+import { cssModules } from "../../bpk-react-utils";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
 import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -14,10 +14,10 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { Component } from 'react';
-import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import extend from 'lodash/extend';
+import omit from 'lodash/omit';
 import { cssModules } from "../../bpk-react-utils";
 import "./intersection-observer";
 import DataSource from "./DataSource";

package/bpk-component-info-banner/src/AnimateAndFade.js

@@ -22,9 +22,10 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAnimateAndFade.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,8 +33,7 @@ const ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {
   static defaultProps = {
     animateOnEnter: false,
-    animateOnLeave: false,
-    className: null
+    animateOnLeave: false
   };
   constructor(props) {
     super(props);
@@ -110,37 +110,39 @@ class AnimateAndFade extends Component {
     // While the expanding animation takes place, we render the child element
     // close to invisible. If we don't do this, the animate-height container
     // will take on height 0, and will never expand to allow the children to fade in
-    return this.state.inDom ? /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+    return this.state.inDom ? /*#__PURE__*/_jsx("div", {
       className: className,
-      onAnimationComplete: this.onAnimateHeightComplete,
-      duration: ANIMATION_DURATION,
-      height: this.state.isExpanded ? 'auto' : 0,
-      children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
-        style: {
-          opacity: 0.35
-        },
-        children: children
-      }), /*#__PURE__*/_jsx(TransitionGroup, {
-        exit: animateOnLeave,
-        enter: animateOnEnter,
-        appear: animateOnEnter,
-        onTransitionEnd: this.onFadeComplete,
-        children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
-          classNames: {
-            exit: getClassName('bpk-animate-and-fade--leave'),
-            exitActive: getClassName('bpk-animate-and-fade--leave-active'),
-            enter: getClassName('bpk-animate-and-fade--enter'),
-            enterActive: getClassName('bpk-animate-and-fade--enter-active'),
-            appear: getClassName('bpk-animate-and-fade--appear'),
-            appearActive: getClassName('bpk-animate-and-fade--appear-active')
-          },
-          timeout: {
-            enter: ANIMATION_DURATION * 2,
-            exit: ANIMATION_DURATION * 2
+      children: /*#__PURE__*/_jsxs(BpkAnimateHeight, {
+        onAnimationComplete: this.onAnimateHeightComplete,
+        duration: ANIMATION_DURATION,
+        height: this.state.isExpanded ? 'auto' : 0,
+        children: [showPlaceholder && /*#__PURE__*/_jsx("div", {
+          style: {
+            opacity: 0.35
           },
           children: children
-        })
-      })]
+        }), /*#__PURE__*/_jsx(TransitionGroup, {
+          exit: animateOnLeave,
+          enter: animateOnEnter,
+          appear: animateOnEnter,
+          onTransitionEnd: this.onFadeComplete,
+          children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
+            classNames: {
+              exit: getClassName('bpk-animate-and-fade--leave'),
+              exitActive: getClassName('bpk-animate-and-fade--leave-active'),
+              enter: getClassName('bpk-animate-and-fade--enter'),
+              enterActive: getClassName('bpk-animate-and-fade--enter-active'),
+              appear: getClassName('bpk-animate-and-fade--appear'),
+              appearActive: getClassName('bpk-animate-and-fade--appear-active')
+            },
+            timeout: {
+              enter: ANIMATION_DURATION * 2,
+              exit: ANIMATION_DURATION * 2
+            },
+            children: children
+          })
+        })]
+      })
     }) : null;
   }
 }

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#626971}.bpk-info-banner__expand-icon--flipped{transform:scaleY(-1)}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}.bpk-info-banner__expandable-action{padding-bottom:.25rem}
+.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none}.bpk-info-banner__expand-icon{fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -22,19 +22,22 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { withButtonAlignment } from "../../bpk-component-icon";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkLink from "../../bpk-component-link";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+import { withButtonAlignment } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkLink from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import AnimateAndFade from "./AnimateAndFade";
 import { ALERT_TYPES, STYLE_TYPES } from "./common-types";
@@ -42,6 +45,7 @@ import STYLES from "./BpkInfoBanner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
+const CollapseIcon = withButtonAlignment(ChevronUpIcon);
 export const CONFIGURATION = {
   NONE: 'none',
   DISMISSABLE: 'dismissable',
@@ -63,20 +67,22 @@ const getIconForType = (type, CustomIcon) => {
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
-  return /*#__PURE__*/_jsx(AlignedIcon, {
-    className: className
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: /*#__PURE__*/_jsx(AlignedIcon, {})
   });
 };
 const ToggleButton = props => {
-  const classNames = getClassName('bpk-info-banner__expand-icon', props.expanded && 'bpk-info-banner__expand-icon--flipped');
+  const classNames = getClassName('bpk-info-banner__expand-icon');
   return /*#__PURE__*/_jsx("button", {
     type: "button",
     className: getClassName('bpk-info-banner__toggle-button'),
     "aria-label": props.label,
     "aria-expanded": props.expanded,
     title: props.label,
-    children: /*#__PURE__*/_jsx(ExpandIcon, {
-      className: classNames
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames,
+      children: props.expanded ? /*#__PURE__*/_jsx(CollapseIcon, {}) : /*#__PURE__*/_jsx(ExpandIcon, {})
     })
   });
 };
@@ -149,7 +155,6 @@ const BpkInfoBannerInner = ({
         }), dismissable && /*#__PURE__*/_jsx("span", {
           className: getClassName('bpk-info-banner__toggle'),
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
-            className: getClassName('bpk-info-banner__toggle-button'),
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
             label: dismissButtonLabel
@@ -162,7 +167,6 @@ const BpkInfoBannerInner = ({
           className: childrenContainerClassName,
           children: children
         }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
-          className: getClassName('bpk-info-banner__expandable-action'),
           onClick: action.callback,
           children: action.title
         })]

package/bpk-component-input/index.js

@@ -17,8 +17,8 @@
  */
 
 import BpkInput from "./src/BpkInput";
-import withOpenEvents from "./src/withOpenEvents";
 import { propTypes, defaultProps, CLEAR_BUTTON_MODES, INPUT_TYPES } from "./src/common-types";
 import themeAttributes from "./src/themeAttributes";
+import withOpenEvents from "./src/withOpenEvents";
 export default BpkInput;
 export { propTypes, defaultProps, withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes };

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

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
+import { withButtonAlignment } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 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.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,8 @@ const BpkClearButton = ({
     ...rest,
     children: /*#__PURE__*/_jsx(ClearButtonIcon, {
       focusable: "false" // prevents focus on IE11
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
       ,
       className: getClassName('bpk-clear-button__icon')
     })

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

@@ -138,7 +138,10 @@ class BpkInput extends Component {
               persistClearButton: false
             });
           }
-        },
+        }
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: clearButtonClassNames.join(' ')
       })]
     }) : renderedInput;

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

@@ -122,7 +122,10 @@ const withOpenEvents = InputComponent => {
       // Needed on mobile as some Android devices do not trigger onClick or onTouch when TalkBack is active but do trigger onFocus
       eventHandlers.onFocus = withEventHandler(this.handleFocus, onFocus);
       eventHandlers.onBlur = withEventHandler(this.handleBlur, onBlur);
-      return /*#__PURE__*/_jsx(InputComponent, {
+      return /*#__PURE__*/_jsx(InputComponent
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: classNames.join(' '),
         ...eventHandlers,
         ...rest

package/bpk-component-link/index.js

@@ -14,8 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkLink from "./src/BpkLink";
-import BpkButtonLink from "./src/BpkButtonLink";
+ */import BpkButtonLink from "./src/BpkButtonLink";
+import BpkLink from "./src/BpkLink";
 import themeAttributes, { linkAlternateThemeAttributes } from "./src/themeAttributes";
 export default BpkLink;
 export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };

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

@@ -28,9 +28,9 @@ const BpkList = props => {
     ordered,
     title
   } = props;
-  const TagName = ordered ? 'ol' : 'ul';
+  const ListElements = ordered ? 'ol' : 'ul';
   const classNames = getClassName('bpk-list', className);
-  return /*#__PURE__*/_jsx(TagName, {
+  return /*#__PURE__*/_jsx(ListElements, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     title: title,

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

@@ -16,10 +16,10 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 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 ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
+import { BpkSpinner, BpkLargeSpinner } from "../../bpk-component-spinner";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkLoadingButton.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -84,7 +84,10 @@ const BpkLoadingButton = props => {
     _jsxs(BpkButton, {
       iconOnly: iconOnly,
       disabled: showBtnDisabled,
-      large: large,
+      large: large
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: classNames,
       link: link,
       linkOnDark: linkOnDark,

package/bpk-component-map/index.js

@@ -14,12 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkMap from "./src/BpkMap";
-import BpkIconMarker from "./src/BpkIconMarker";
+ */import BpkIconMarker from "./src/BpkIconMarker";
+import BpkMap from "./src/BpkMap";
+import BpkOverlayView from "./src/BpkOverlayView";
 import BpkPriceMarker, { PRICE_MARKER_STATUSES } from "./src/BpkPriceMarker";
 import { BpkPriceMarkerV2, MARKER_STATUSES } from "./src/BpkPriceMarkerV2/BpkPriceMarker";
-import BpkOverlayView from "./src/BpkOverlayView";
-import withGoogleMapsScript from "./src/withGoogleMapsScript";
 import { defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes } from "./src/themeAttributes";
+import withGoogleMapsScript from "./src/withGoogleMapsScript";
 export default BpkMap;
 export { BpkIconMarker, BpkPriceMarker, BpkPriceMarkerV2, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES, MARKER_STATUSES };

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

@@ -16,9 +16,9 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
+import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import BpkIconMarkerBackground from "./BpkIconMarkerBackground";
 import { LatLongPropType } from "./common-types";
-import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import STYLES from "./BpkIconMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -14,8 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { useCallback, useRef } from 'react';
 import { GoogleMap } from '@react-google-maps/api';
 import { cssModules } from "../../bpk-react-utils";
 import { LatLongPropType } from "./common-types";
@@ -84,7 +84,8 @@ const BpkMap = props => {
       rotateControl: false,
       clickableIcons: false,
       // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
-      styles: mapOptionStyles
+      styles: mapOptionStyles,
+      scaleControl: true
     },
     onDragEnd: () => {
       if (ref && ref.current && onRegionChange) {

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

@@ -15,10 +15,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { LatLongPropType } from "./common-types";
+import { cssModules } from "../../bpk-react-utils";
 import BpkBasicMapMarker from "./BpkBasicMapMarker";
+import { LatLongPropType } from "./common-types";
 import STYLES from "./BpkPriceMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -54,10 +54,12 @@ const BpkPriceMarker = props => {
         onClick: onClick,
         disabled: disabled,
         ...buttonProps,
-        children: [/*#__PURE__*/_jsx(BpkText, {
+        children: [/*#__PURE__*/_jsx("span", {
           className: classNames,
-          textStyle: status === PRICE_MARKER_STATUSES.focused ? TEXT_STYLES.label1 : TEXT_STYLES.label2,
-          children: label
+          children: /*#__PURE__*/_jsx(BpkText, {
+            textStyle: status === PRICE_MARKER_STATUSES.focused ? TEXT_STYLES.label1 : TEXT_STYLES.label2,
+            children: label
+          })
         }), /*#__PURE__*/_jsx("div", {
           className: arrowClassNames
         })]

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules } from "../../../bpk-react-utils";
 import BpkBasicMapMarker from "../BpkBasicMapMarker";
 import STYLES from "./BpkPriceMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -42,14 +42,6 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
   const showLeadingIndicator = scrollValue > 0;
   const showTrailingIndicator = scrollValue < scrollWidth - offsetWidth;
-  const showLeftIndicator = rtl ? showTrailingIndicator : showLeadingIndicator;
-  const showRightIndicator = rtl ? showLeadingIndicator : showTrailingIndicator;
-  if (showLeftIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--left-indicator'));
-  }
-  if (showRightIndicator) {
-    classNames.push(getClassName('bpk-mobile-scroll-container--right-indicator'));
-  }
   if (showLeadingIndicator && leadingIndicatorClassName) {
     classNames.push(leadingIndicatorClassName);
   }