@skyscanner/backpack-web 33.3.1 → 34.0.0-premajor

package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open=true]),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open=true]){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media(min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
+@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open=true]),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open=true]){display:none}.bpk-modal{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media(min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__close-button-style--surface-contrast{color:#fff}.bpk-no-touch-support .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__button-container-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}.bpk-modal__container--surface-contrast{background-color:#05203c;color:#fff}

package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts

@@ -18,6 +18,7 @@
 
 /// <reference types="react" />
 import type { ReactNode } from 'react';
+import { ModalStyle } from '../BpkModalInner';
 
 export type Props = {
   id: string | undefined;
@@ -32,5 +33,6 @@ export type Props = {
   showHeader?: boolean;
   title?: string | null;
   wide?: boolean;
+  modalStyle?: ModalStyle;
 };
 export declare const BpkModalV2: (props: Props) => JSX.Element | null;

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

@@ -22,34 +22,43 @@ import { useEffect, useRef } from 'react';
 import BpkCloseButton from "../../../bpk-component-close-button";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
 import { cssModules, withDefaultProps } from "../../../bpk-react-utils";
+import { MODAL_STYLING } from "../BpkModalInner";
 import STYLES from "./BpKModal.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const Header = ({
   closeLabel,
   id,
+  modalStyle,
   onClose,
   title
 }) => {
   if (title) {
     return /*#__PURE__*/_jsxs("div", {
       id: id,
-      className: getClassName('bpk-modal__header-title'),
+      className: [getClassName('bpk-modal__header-title'), getClassName(`bpk-modal__header-title-style--${modalStyle}`)].join(' '),
       children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-modal__header-title-container'),
         children: /*#__PURE__*/_jsx(Heading, {
           children: title
         })
-      }), /*#__PURE__*/_jsx(BpkCloseButton, {
+      }), /*#__PURE__*/_jsx(BpkCloseButton
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
+        className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
         label: closeLabel,
         onClick: onClose
       })]
     });
   }
   return /*#__PURE__*/_jsx("div", {
-    className: getClassName('bpk-modal__button-container'),
-    children: /*#__PURE__*/_jsx(BpkCloseButton, {
+    className: [getClassName('bpk-modal__button-container'), getClassName(`bpk-modal__button-container-style--${modalStyle}`)].join(' '),
+    children: /*#__PURE__*/_jsx(BpkCloseButton
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
+      className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
       label: closeLabel,
       onClick: onClose
     })
@@ -57,8 +66,7 @@ const Header = ({
 };
 const Heading = withDefaultProps(BpkText, {
   textStyle: TEXT_STYLES.label1,
-  tagName: 'h2',
-  className: getClassName('bpk-modal__title')
+  tagName: 'h2'
 });
 // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
 const dialogSupported = typeof HTMLDialogElement === 'function';
@@ -79,6 +87,7 @@ export const BpkModalV2 = props => {
     fullScreenOnDesktop,
     id,
     isOpen,
+    modalStyle = MODAL_STYLING.default,
     noFullScreenOnMobile,
     onClose,
     padded,
@@ -131,7 +140,7 @@ export const BpkModalV2 = props => {
     };
   }, [id, isOpen, onClose]);
   const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
-  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
+  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded', modalStyle === MODAL_STYLING.surfaceContrast && 'bpk-modal__container--surface-contrast');
   return isOpen ? /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
     children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
@@ -149,7 +158,8 @@ export const BpkModalV2 = props => {
         id: `${id}-title`,
         title: title,
         closeLabel: closeLabel,
-        onClose: onClose
+        onClose: onClose,
+        modalStyle: modalStyle
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames,
         children: children

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

@@ -17,8 +17,8 @@
  */
 
 import BpkNavigationBar, { BAR_STYLES } from "./src/BpkNavigationBar";
-import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import BpkNavigationBarButtonLink from "./src/BpkNavigationBarButtonLink";
+import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import themeAttributes from "./src/themeAttributes";
 export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes, BAR_STYLES };
 export default BpkNavigationBar;

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

@@ -16,11 +16,10 @@
  * 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 STYLES from "./BpkNavigationBar.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
 export const BAR_STYLES = {
   default: 'default',
@@ -48,11 +47,13 @@ const BpkNavigationBar = props => {
     children: [leadingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),
       children: leadingButton
-    }), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
-      id: titleId,
-      textStyle: TEXT_STYLES.heading5,
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx("span", {
       className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
-      children: title
+      children: /*#__PURE__*/_jsx(BpkText, {
+        id: titleId,
+        textStyle: TEXT_STYLES.heading5,
+        children: title
+      })
     }) : title, trailingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item-${barStyle}`),
       children: trailingButton

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

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({
@@ -28,7 +28,10 @@ const BpkNavigationBarButtonLink = ({
   children,
   className,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkButtonLink, {
+}) => /*#__PURE__*/_jsx(BpkButtonLink
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
   ...rest,
   children: children

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

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({
@@ -29,7 +29,10 @@ const BpkNavigationBarIconButton = ({
   icon,
   ...rest
 }) => /*#__PURE__*/_jsx(BpkIconButton, {
-  customIcon: icon,
+  customIcon: icon
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  ,
   className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
   ...rest
 });

package/bpk-component-nudger/index.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import BpkNudger from "./src/BpkNudger";
 import BpkConfigurableNudger from "./src/BpkConfigurableNudger";
+import BpkNudger from "./src/BpkNudger";
 import themeAttributes from "./src/themeAttributes";
 export default BpkNudger;
 export { themeAttributes, BpkConfigurableNudger };

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

@@ -24,8 +24,7 @@ import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedMinusIcon = withButtonAlignment(MinusIcon);
 const AlignedPlusIcon = withButtonAlignment(PlusIcon);
@@ -60,9 +59,15 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(decrementValue(value)),
       disabled: minButtonDisabled,
       title: decreaseButtonLabel,
-      "aria-controls": id,
+      "aria-controls": id
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedMinusIcon, {
+      children: /*#__PURE__*/_jsx(AlignedMinusIcon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: minusIconClassNames
       })
     }), /*#__PURE__*/_jsx("input", {
@@ -80,9 +85,15 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(incrementValue(value)),
       disabled: maxButtonDisabled,
       title: increaseButtonLabel,
-      "aria-controls": id,
+      "aria-controls": id
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedPlusIcon, {
+      children: /*#__PURE__*/_jsx(AlignedPlusIcon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: plusIconClassNames
       })
     })]

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

@@ -16,14 +16,13 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import BpkConfigurableNudger from "./BpkConfigurableNudger";
 import STYLES from "./BpkNudger.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;
 const incrementValue = currentValue => currentValue + 1;
@@ -41,7 +40,11 @@ const BpkNudger = ({
   const classNames = getClassName(title && 'bpk-nudger__container');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [title && /*#__PURE__*/_jsxs(BpkLabel, {
+    children: [title &&
+    /*#__PURE__*/
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsxs(BpkLabel, {
       htmlFor: id,
       className: getClassName('bpk-nudger__label'),
       children: [icon, /*#__PURE__*/_jsxs("span", {
@@ -52,7 +55,11 @@ const BpkNudger = ({
         children: [/*#__PURE__*/_jsx(BpkText, {
           textStyle: TEXT_STYLES.heading5,
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle &&
+        /*#__PURE__*/
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        _jsx(BpkText, {
           className: getClassName('bpk-nudger__label--subtitle'),
           children: subtitle
         })]
@@ -62,7 +69,10 @@ const BpkNudger = ({
       compareValues: compareValues,
       incrementValue: incrementValue,
       decrementValue: decrementValue,
-      formatValue: formatValue,
+      formatValue: formatValue
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: className,
       buttonType: buttonType,
       id: id,

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

@@ -18,8 +18,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkOverlay.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const OVERLAY_TYPES = {
   solidLow: 'solidLow',

package/bpk-component-page-indicator/src/BpkPageIndicator.js

@@ -18,8 +18,7 @@
 import { cssModules } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
 import STYLES from "./BpkPageIndicator.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const DISPLAYED_TOTAL = 5;
 const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971}.bpk-page-indicator__indicator--active-overImage{background-color:#fff}
+.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage{background-color:#fff;pointer-events:none}

package/bpk-component-page-indicator/src/NavButton.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-pagination/src/BpkPagination.js

@@ -21,8 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
 import BpkPaginationList from "./BpkPaginationList";
 import BpkPaginationNudger from "./BpkPaginationNudger";
 import STYLES from "./BpkPagination.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
   if (onPageChange && nextPageIndex < pageCount && nextPageIndex >= 0) {

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,8 +18,8 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import BpkPaginationPage from "./BpkPaginationPage";
 import BpkPaginationBreak from "./BpkPaginationBreak";
+import BpkPaginationPage from "./BpkPaginationPage";
 import STYLES from "./BpkPaginationList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,20 +17,25 @@
  */
 
 import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPaginationNudger.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedArrowLeftIcon = withRtlSupport(ArrowLeftIcon);
 const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon);
-const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon, {
+const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-pagination-nudger__icon')
-}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon, {
+}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-pagination-nudger__icon')
 });
 const BpkPaginationNudger = props => {
@@ -43,7 +48,10 @@ const BpkPaginationNudger = props => {
   return /*#__PURE__*/_jsxs(BpkButtonV2, {
     type: BUTTON_TYPES.link,
     onClick: onNudge,
-    disabled: disabled,
+    disabled: disabled
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: getClassName('bpk-pagination-nudger'),
     children: [nudgerIcon(forward), /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-pagination-nudger__text--hidden'),

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -35,7 +35,10 @@ const BpkPaginationPage = props => {
   }
   return /*#__PURE__*/_jsx(BpkButtonV2, {
     type: !isSelected ? BUTTON_TYPES.primaryOnDark : BUTTON_TYPES.primary,
-    onClick: onSelect,
+    onClick: onSelect
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: classNames.join(' '),
     "aria-label": pageLabel(page, isSelected),
     "aria-current": isSelected,

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -15,13 +15,12 @@
  * 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 BpkInput, { INPUT_TYPES } from "../../bpk-component-input";
 import BpkLabel from "../../bpk-component-label";
 import BpkSelect from "../../bpk-component-select";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPhoneInput.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkPhoneInput = props => {
   const {
@@ -87,12 +86,17 @@ const BpkPhoneInput = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx(BpkLabel, {
         htmlFor: dialingCodeProps.id,
-        disabled: disabled,
+        disabled: disabled
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-phone-input__label'),
         children: dialingCodeProps.label
       }), /*#__PURE__*/_jsx(BpkSelect, {
         ...commonProps,
         ...dialingCodeProps,
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
         className: getClassName(dialingCodeProps.className),
         wrapperClassName: getClassName(dialingCodeProps.wrapperClassName),
         value: dialingCode,
@@ -114,7 +118,10 @@ const BpkPhoneInput = props => {
       className: getClassName('bpk-phone-input__phone-number'),
       children: [/*#__PURE__*/_jsx(BpkLabel, {
         htmlFor: id,
-        disabled: disabled,
+        disabled: disabled
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-phone-input__label'),
         children: label
       }), /*#__PURE__*/_jsx(BpkInput, {
@@ -124,7 +131,10 @@ const BpkPhoneInput = props => {
         name: name,
         value: displayValue,
         type: INPUT_TYPES.tel,
-        onChange: handleChange,
+        onChange: handleChange
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName(className)
       })]
     })]