@skyscanner/backpack-web 33.4.0 → 33.6.0

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:" ";display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, white, rgba(255, 255, 255, 0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:" ";display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, white, rgba(255, 255, 255, 0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}
+.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}

package/bpk-component-modal/index.js

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
-import themeAttributes from "./src/themeAttributes";
 import BpkModal from "./src/BpkModal";
+import { MODAL_STYLING } from "./src/BpkModalInner";
+import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { propTypes, defaultProps } from "./src/legacy-prop-types";
+import themeAttributes from "./src/themeAttributes";
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2 };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, MODAL_STYLING };

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

@@ -17,7 +17,7 @@
  */
 
 import type { ReactNode } from 'react';
-import type { Props as ModalDialogProps } from './BpkModalInner';
+import type { Props as ModalDialogProps, ModalStyle } from './BpkModalInner';
 export type Props = Partial<ModalDialogProps> & {
     id: string;
     children: ReactNode;
@@ -25,6 +25,7 @@ export type Props = Partial<ModalDialogProps> & {
     isOpen: boolean;
     closeOnScrimClick?: boolean;
     closeOnEscPressed?: boolean;
+    modalStyle?: ModalStyle;
     renderTarget?: null | HTMLElement | (() => null | HTMLElement);
     onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';

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

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { withScrim } from "../../bpk-scrim-utils";
 import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
-import BpkModalInner from "./BpkModalInner";
+import { withScrim } from "../../bpk-scrim-utils";
+import BpkModalInner, { MODAL_STYLING } from "./BpkModalInner";
 import STYLES from "./BpkModal.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -36,6 +36,7 @@ const BpkModal = ({
   fullScreenOnMobile = true,
   isIphone = isDeviceIphone(),
   isOpen,
+  modalStyle = MODAL_STYLING.default,
   onClose = () => null,
   padded = true,
   renderTarget = null,
@@ -72,6 +73,7 @@ const BpkModal = ({
       padded: padded,
       accessoryView: accessoryView,
       dialogRef: dialogRef,
+      modalStyle: modalStyle,
       ...rest
     })
   });

package/bpk-component-modal/src/BpkModalInner.d.ts

@@ -17,6 +17,7 @@
  */
 
 import type { ReactNode } from 'react';
+import { ModalStyle } from './BpkModalInner';
 export type Props = {
     id: string;
     children: ReactNode;
@@ -33,6 +34,7 @@ export type Props = {
     title?: string | null;
     closeLabel?: string;
     closeText?: string | null;
+    modalStyle?: ModalStyle;
     /**
      * The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with `BpkNavigationBarButtonLink`
      */

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

@@ -16,15 +16,19 @@
  * limitations under the License.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from "../../bpk-component-link";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import BpkNavigationBar from "../../bpk-component-navigation-bar";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkNavigationBar, { BAR_STYLES } from "../../bpk-component-navigation-bar";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkModalInner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+export const MODAL_STYLING = {
+  default: 'default',
+  surfaceContrast: 'surface-contrast'
+};
 const BpkModalInner = ({
   accessoryView = null,
   children,
@@ -37,6 +41,7 @@ const BpkModalInner = ({
   fullScreenOnMobile = true,
   id,
   isIphone,
+  modalStyle = MODAL_STYLING.default,
   onClose = () => null,
   padded = true,
   showHeader = true,
@@ -46,6 +51,7 @@ const BpkModalInner = ({
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];
   const navigationStyles = [getClassName('bpk-modal__navigation')];
+  classNames.push(getClassName(`bpk-modal__modal-style--${modalStyle}`));
   if (wide) {
     classNames.push(getClassName('bpk-modal--wide'));
   }
@@ -82,7 +88,11 @@ const BpkModalInner = ({
       children: [showHeader && /*#__PURE__*/_jsx("header", {
         className: getClassName('bpk-modal__header'),
         children: /*#__PURE__*/_jsx(BpkNavigationBar, {
-          id: headingId,
+          barStyle: modalStyle === MODAL_STYLING.surfaceContrast ? BAR_STYLES.onDark : BAR_STYLES.default,
+          id: headingId
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: navigationStyles.join(' '),
           title: /*#__PURE__*/_jsx("h2", {
             id: headingId,
@@ -90,12 +100,18 @@ const BpkModalInner = ({
             children: title
           }),
           leadingButton: accessoryViewFinal,
-          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
-            className: getClassName('bpk-modal__close-button'),
+          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          , {
+            className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
             onClick: onClose,
             children: closeText
-          }) : /*#__PURE__*/_jsx(BpkCloseButton, {
-            className: getClassName('bpk-modal__close-button'),
+          }) : /*#__PURE__*/_jsx(BpkCloseButton
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          , {
+            className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
             label: closeLabel,
             onClick: onClose
           })

package/bpk-component-modal/src/BpkModalInner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-modal{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir=rtl] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir=rtl] .bpk-modal__close-button{left:auto}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir=rtl] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}
+.bpk-modal{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__modal-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto;margin-left:1rem;margin-right:0}html[dir=rtl] .bpk-modal__close-button{margin-left:0;margin-right:1rem}html[dir=rtl] .bpk-modal__close-button{left:auto}.bpk-modal__close-button-style--surface-contrast{background-color:#05203c;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__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir=rtl] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}

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,33 +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, 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
     })
@@ -56,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';
@@ -78,6 +87,7 @@ export const BpkModalV2 = props => {
     fullScreenOnDesktop,
     id,
     isOpen,
+    modalStyle = MODAL_STYLING.default,
     noFullScreenOnMobile,
     onClose,
     padded,
@@ -130,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", {
@@ -148,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,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 STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
@@ -47,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

@@ -18,19 +18,19 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
-import { cssModules } from "../../bpk-react-utils";
 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 = ({
   barStyle = BAR_STYLES.default,
   children,
   className,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkButtonLink, {
-  className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
-  ...rest,
-  children: children
+}) => /*#__PURE__*/_jsx("span", {
+  className: className,
+  children: /*#__PURE__*/_jsx(BpkButtonLink, {
+    alternate: barStyle === BAR_STYLES.onDark,
+    ...rest,
+    children: children
+  })
 });
 export default BpkNavigationBarButtonLink;

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

@@ -17,20 +17,20 @@
  */
 
 // @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 BpkCloseButton from "../../bpk-component-close-button";
 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 = ({
   barStyle = BAR_STYLES.default,
   className,
   icon,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkIconButton, {
-  customIcon: icon,
-  className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
-  ...rest
+}) => /*#__PURE__*/_jsx("span", {
+  className: className,
+  children: /*#__PURE__*/_jsx(BpkCloseButton, {
+    customIcon: icon,
+    onDark: barStyle === BAR_STYLES.onDark,
+    ...rest
+  })
 });
 export default BpkNavigationBarIconButton;

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

@@ -59,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", {
@@ -79,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,10 +16,10 @@
  * 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, jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,10 +40,12 @@ const BpkNudger = ({
   const classNames = getClassName(title && 'bpk-nudger__container');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [title && /*#__PURE__*/_jsxs(BpkLabel, {
-      htmlFor: id,
+    children: [title && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-nudger__label'),
-      children: [icon, /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx(BpkLabel, {
+        htmlFor: id,
+        children: icon
+      }), /*#__PURE__*/_jsxs("span", {
         // For a11y on IOS, role='text' forces label to be read in full. More info: https://axesslab.com/text-splitting/
         // eslint-disable-next-line jsx-a11y/aria-role
         role: "text",
@@ -51,9 +53,11 @@ const BpkNudger = ({
         children: [/*#__PURE__*/_jsx(BpkText, {
           textStyle: TEXT_STYLES.heading5,
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle && /*#__PURE__*/_jsx("span", {
           className: getClassName('bpk-nudger__label--subtitle'),
-          children: subtitle
+          children: /*#__PURE__*/_jsx(BpkText, {
+            children: subtitle
+          })
         })]
       })]
     }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {
@@ -61,7 +65,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-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}
+html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}

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/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,19 +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, 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 => {
@@ -42,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,