@skyscanner/backpack-web 33.4.0 → 34.0.0-premajor

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

@@ -33,7 +33,10 @@ const BpkList = props => {
   return /*#__PURE__*/_jsx(TagName, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    title: title,
+    title: title
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: classNames,
     children: children
   });

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

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

@@ -162,7 +162,10 @@ class BpkMobileScrollContainer extends Component {
           "aria-label": ariaLabel,
           ref: el => {
             this.innerEl = el;
-          },
+          }
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: getClassName('bpk-mobile-scroll-container__inner'),
           children: children
         })

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,
@@ -62,7 +63,10 @@ const BpkModal = ({
       closeOnScrimClick: closeOnScrimClick,
       containerClassName: containerClass.join(' '),
       isIphone: isIphone,
-      title: title,
+      title: title
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: className,
       contentClassName: contentClassName,
       closeLabel: closeLabel,
@@ -72,6 +76,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;