@skyscanner/backpack-web 42.2.0 → 42.3.0

package/bpk-component-chat-bubble/index.d.ts

@@ -0,0 +1,4 @@
+import BpkChatBubble from './src/BpkChatBubble';
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from './src/common-types';
+export type { BpkChatBubbleProps, ChatBubbleType, BubblePosition } from './src/common-types';
+export default BpkChatBubble;

package/bpk-component-chat-bubble/index.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkChatBubble from "./src/BpkChatBubble";
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from "./src/common-types";
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatBubbleProps } from './common-types';
+declare const BpkChatBubble: (props: BpkChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.js

@@ -0,0 +1,107 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
+import RedoSmIcon from "../../bpk-component-icon/sm/redo";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import BpkThumbButton from "../../bpk-component-thumb-button";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { CHAT_BUBBLE_TYPE } from "./common-types";
+import STYLES from "./BpkChatBubble.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const clampAndSnap = (ms, maxDelay = 300) => {
+  const v = Math.min(ms, maxDelay);
+  return Math.round(v / 50) * 50;
+};
+const BpkChatBubble = props => {
+  const {
+    animationDelay = 0,
+    children,
+    type
+  } = props;
+  const userPosition = 'userPosition' in props ? props.userPosition : undefined;
+  const systemPosition = 'systemPosition' in props ? props.systemPosition : undefined;
+  const showFeedback = 'showFeedback' in props ? props.showFeedback ?? false : false;
+  const selectedFeedback = 'selectedFeedback' in props ? props.selectedFeedback ?? null : null;
+  const onFeedbackClick = 'onFeedbackClick' in props ? props.onFeedbackClick : undefined;
+  const onRetry = 'onRetry' in props ? props.onRetry : undefined;
+  const retryDisabled = 'retryDisabled' in props ? props.retryDisabled ?? false : false;
+  const retryLabel = 'retryLabel' in props ? props.retryLabel : '';
+  const onSuggestionClick = 'onSuggestionClick' in props ? props.onSuggestionClick : undefined;
+  const thumbsUpLabel = 'thumbsUpLabel' in props ? props.thumbsUpLabel ?? 'Rate as useful' : 'Rate as useful';
+  const thumbsDownLabel = 'thumbsDownLabel' in props ? props.thumbsDownLabel ?? 'Rate as not useful' : 'Rate as not useful';
+  const isUser = type === CHAT_BUBBLE_TYPE.user;
+  const isSuggestion = type === CHAT_BUBBLE_TYPE.button;
+  const isRetry = type === CHAT_BUBBLE_TYPE.retry;
+  const isBot = type === CHAT_BUBBLE_TYPE.bot;
+  const isSystem = isBot || isRetry;
+  const snapped = clampAndSnap(animationDelay);
+  const inlineStyle = {
+    '--anim-delay': `${snapped}ms`
+  };
+  const containerClassName = getClassName('bpk-chat-bubble', 'bpk-chat-bubble--animated', isUser && 'bpk-chat-bubble--user', isBot && 'bpk-chat-bubble--bot', isRetry && 'bpk-chat-bubble--retry', isSuggestion && 'bpk-chat-bubble--button', isUser && userPosition === 'first' && 'bpk-chat-bubble--user-first', isUser && userPosition === 'middle' && 'bpk-chat-bubble--user-middle', isUser && userPosition === 'last' && 'bpk-chat-bubble--user-last', isSystem && systemPosition === 'first' && 'bpk-chat-bubble--system-first', isSystem && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle', isSystem && systemPosition === 'last' && 'bpk-chat-bubble--system-last');
+  if (isSuggestion) {
+    return /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: containerClassName,
+      style: inlineStyle,
+      onClick: onSuggestionClick,
+      "data-testid": "bpk-chat-bubble-suggestion",
+      ...getDataComponentAttribute('ChatBubble'),
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    style: inlineStyle,
+    "data-testid": "bpk-chat-bubble",
+    ...getDataComponentAttribute('ChatBubble'),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__content'),
+      children: [children, isRetry && onRetry && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-chat-bubble__retry'),
+        children: /*#__PURE__*/_jsx(BpkButton, {
+          type: BUTTON_TYPES.primary,
+          size: SIZE_TYPES.small,
+          onClick: onRetry,
+          disabled: retryDisabled,
+          leadingIcon: /*#__PURE__*/_jsx(RedoSmIcon, {}),
+          children: /*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.label1,
+            children: retryLabel
+          })
+        })
+      })]
+    }), showFeedback && isBot && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__thumbs'),
+      children: [/*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "up",
+        selected: selectedFeedback === 'up',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsUpLabel
+      }), /*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "down",
+        selected: selectedFeedback === 'down',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsDownLabel
+      })]
+    })]
+  });
+};
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+@keyframes bpk-chat-bubble-entrance{from{transform:translateY(0.625rem) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes bpk-chat-bubble-entrance-reduced{from{opacity:0}to{opacity:1}}.bpk-chat-bubble{width:fit-content;max-width:17.5rem;padding:1rem;background:#fff;color:#161616;overflow-wrap:break-word;word-wrap:break-word}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{align-self:flex-start}.bpk-chat-bubble--button,.bpk-chat-bubble--user{align-self:flex-end}.bpk-chat-bubble--button,.bpk-chat-bubble--user,.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{border-radius:1.5rem}html[dir=rtl] .bpk-chat-bubble{direction:rtl}.bpk-chat-bubble--animated{transform:translateY(0.625rem) scale(0.98);opacity:0;animation:bpk-chat-bubble-entrance 200ms cubic-bezier(0.2, 0, 0, 1) forwards;animation-delay:var(--anim-delay, 0ms)}@media(prefers-reduced-motion: reduce){.bpk-chat-bubble--animated{transform:translateY(0) scale(1);animation:bpk-chat-bubble-entrance-reduced 200ms ease-out forwards}}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{text-align:start}.bpk-chat-bubble--user{background:#0062e3;color:#fff;text-align:start}.bpk-chat-bubble--button{width:fit-content;transition:transform 200ms ease-in-out,box-shadow 200ms ease-in-out;border:1px solid #0062e3;background:rgba(0,0,0,0);color:#0062e3;text-align:start;cursor:pointer;border-end-end-radius:.25rem}.bpk-no-touch-support .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}:global(.bpk-no-touch-support) .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chat-bubble--button:active{transform:translateY(0);box-shadow:none}.bpk-chat-bubble--system-first{border-end-start-radius:.25rem}.bpk-chat-bubble--system-middle{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.bpk-chat-bubble--system-last{border-start-start-radius:.25rem}.bpk-chat-bubble--user-first{border-end-end-radius:.25rem}.bpk-chat-bubble--user-middle{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.bpk-chat-bubble--user-last{border-start-end-radius:.25rem}.bpk-chat-bubble__content p+p{margin-top:1rem}.bpk-chat-bubble__retry{margin-top:1rem}.bpk-chat-bubble__retry button{padding:0 1rem}.bpk-chat-bubble__thumbs{display:flex;margin-top:.5rem;align-items:center;gap:1rem}

package/bpk-component-chat-bubble/src/common-types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { ThumbsButtonType } from '../../bpk-component-thumb-button';
+export declare const CHAT_BUBBLE_TYPE: {
+    readonly user: "user";
+    readonly bot: "bot";
+    readonly retry: "retry";
+    readonly button: "button";
+};
+export declare const CHAT_BUBBLE_POSITION: {
+    readonly first: "first";
+    readonly middle: "middle";
+    readonly last: "last";
+};
+export type ChatBubbleType = (typeof CHAT_BUBBLE_TYPE)[keyof typeof CHAT_BUBBLE_TYPE];
+export type BubblePosition = (typeof CHAT_BUBBLE_POSITION)[keyof typeof CHAT_BUBBLE_POSITION];
+type BaseBubbleProps = {
+    /** Content to render inside the bubble */
+    children?: ReactNode;
+    /** Animation entrance delay in milliseconds (0–300, snapped to nearest 50ms) */
+    animationDelay?: number;
+};
+export type BpkChatBubbleProps = (BaseBubbleProps & {
+    type: 'user';
+    /** Position within a sequence of user bubbles, affects border-radius */
+    userPosition?: BubblePosition;
+}) | (BaseBubbleProps & {
+    type: 'bot';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Show thumbs up/down feedback buttons */
+    showFeedback?: boolean;
+    /** Currently selected feedback type */
+    selectedFeedback?: ThumbsButtonType | null;
+    /** Called when a feedback thumb button is clicked */
+    onFeedbackClick?: (type: ThumbsButtonType) => void;
+    /** Accessibility label for the thumbs up button (defaults to "Rate as useful") */
+    thumbsUpLabel?: string;
+    /** Accessibility label for the thumbs down button (defaults to "Rate as not useful") */
+    thumbsDownLabel?: string;
+}) | (BaseBubbleProps & {
+    type: 'retry';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Label for the retry button */
+    retryLabel: string;
+    /** Called when retry button is clicked */
+    onRetry?: () => void;
+    /** Whether the retry button is disabled */
+    retryDisabled?: boolean;
+}) | (BaseBubbleProps & {
+    type: 'button';
+    /** Called when the suggestion is clicked */
+    onSuggestionClick?: () => void;
+});
+export {};

package/bpk-component-chat-bubble/src/common-types.js

@@ -0,0 +1,29 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export const CHAT_BUBBLE_TYPE = {
+  user: 'user',
+  bot: 'bot',
+  retry: 'retry',
+  button: 'button'
+};
+export const CHAT_BUBBLE_POSITION = {
+  first: 'first',
+  middle: 'middle',
+  last: 'last'
+};

package/bpk-component-floating-notification/index.d.ts

@@ -1,3 +1,4 @@
-import BpkFloatingNotification, { type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
+import BpkFloatingNotification, { NOTIFICATION_TYPES, type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
 export type { BpkFloatingNotificationProps };
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/index.js

@@ -14,5 +14,6 @@
  * 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 BpkFloatingNotification from "./src/BpkFloatingNotification";
+ */import BpkFloatingNotification, { NOTIFICATION_TYPES } from "./src/BpkFloatingNotification";
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts

@@ -1,4 +1,8 @@
 import type { MouseEvent, FunctionComponent } from 'react';
+export declare const NOTIFICATION_TYPES: {
+    readonly default: "default";
+    readonly critical: "critical";
+};
 export type Props = {
     animateOnEnter?: boolean;
     animateOnExit?: boolean;
@@ -16,6 +20,7 @@ export type Props = {
      */
     onExit?: () => void;
     text: string;
+    type?: (typeof NOTIFICATION_TYPES)[keyof typeof NOTIFICATION_TYPES];
     [rest: string]: any;
 };
 declare const BpkFloatingNotification: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -18,13 +18,17 @@
 
 import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import BpkAriaLive from "../../bpk-component-aria-live";
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+export const NOTIFICATION_TYPES = {
+  default: 'default',
+  critical: 'critical'
+};
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
   const {
@@ -37,9 +41,10 @@ const BpkFloatingNotification = props => {
     onClick,
     onExit,
     text,
+    type = NOTIFICATION_TYPES.default,
     ...rest
   } = props;
-  const classNames = getClassName('bpk-floating-notification', className);
+  const classNames = getClassName('bpk-floating-notification', type === NOTIFICATION_TYPES.critical && 'bpk-floating-notification--critical', className);
   useEffect(() => {
     let timer;
     if (hideAfter) {
@@ -78,6 +83,7 @@ const BpkFloatingNotification = props => {
         })
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
         "aria-hidden": true,
+        politenessSetting: type === NOTIFICATION_TYPES.critical ? ARIA_LIVE_POLITENESS_SETTINGS.assertive : ARIA_LIVE_POLITENESS_SETTINGS.polite,
         children: text
       }), ctaText && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__cta'),

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
+.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--critical{background-color:#e70866}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

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{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;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;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}
+.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{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;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__critical-icon{fill:#fff}.bpk-info-banner--critical{background-color:#e70866;color:#fff}.bpk-info-banner--critical .bpk-info-banner__message{color:#fff}.bpk-info-banner--critical .bpk-info-banner__toggle-button{fill:#fff}.bpk-info-banner--critical .bpk-info-banner__children-container,.bpk-info-banner--critical .bpk-info-banner__children-container--with-action,.bpk-info-banner--critical .bpk-info-banner__children-container--no-action{color:#fff}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;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

@@ -27,6 +27,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
+import ExclamationCircleIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import BpkLink from "../../bpk-component-link";
@@ -49,14 +50,16 @@ const getIconForType = (type, CustomIcon) => {
     [ALERT_TYPES.SUCCESS]: getClassName('bpk-info-banner__success-icon'),
     [ALERT_TYPES.WARNING]: getClassName('bpk-info-banner__warning-icon'),
     [ALERT_TYPES.ERROR]: getClassName('bpk-info-banner__error-icon'),
-    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon')
+    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon'),
+    [ALERT_TYPES.CRITICAL]: getClassName('bpk-info-banner__critical-icon')
   };
   const className = classMap[type];
   const componentMap = {
     [ALERT_TYPES.SUCCESS]: TickCircleIcon,
     [ALERT_TYPES.WARNING]: InfoCircleIcon,
     [ALERT_TYPES.ERROR]: InfoCircleIcon,
-    [ALERT_TYPES.INFO]: InfoCircleIcon
+    [ALERT_TYPES.INFO]: InfoCircleIcon,
+    [ALERT_TYPES.CRITICAL]: ExclamationCircleIcon
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
@@ -139,7 +142,8 @@ const BpkInfoBannerInner = ({
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
-            label: dismissButtonLabel
+            label: dismissButtonLabel,
+            onDark: type === ALERT_TYPES.CRITICAL
           })
         })]
       }), /*#__PURE__*/_jsxs(BpkAnimateHeight, {
@@ -149,6 +153,7 @@ const BpkInfoBannerInner = ({
           className: childrenContainerClassName,
           children: children
         }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
+          alternate: type === ALERT_TYPES.CRITICAL,
           onClick: action.callback,
           href: "#",
           children: action.title

package/bpk-component-info-banner/src/common-types.d.ts

@@ -4,6 +4,7 @@ export declare const ALERT_TYPES: {
     readonly WARNING: "warning";
     readonly ERROR: "error";
     readonly INFO: "info";
+    readonly CRITICAL: "critical";
 };
 export declare const STYLE_TYPES: {
     DEFAULT: string;

package/bpk-component-info-banner/src/common-types.js

@@ -20,7 +20,8 @@ export const ALERT_TYPES = {
   SUCCESS: 'success',
   WARNING: 'warning',
   ERROR: 'error',
-  INFO: 'info'
+  INFO: 'info',
+  CRITICAL: 'critical'
 };
 export const STYLE_TYPES = {
   DEFAULT: 'default',

package/bpk-component-modal/index.d.ts

@@ -2,9 +2,10 @@ import BpkModal from './src/BpkModal';
 import { MODAL_STYLING } from './src/BpkModalInner';
 import { BpkModalV2 } from './src/BpkModalV2/BpkModal';
 import BpkModalV3 from './src/BpkModalV3/BpkModalV3';
+import { MODAL_V3_TYPES } from './src/BpkModalV3/common-types';
 import { propTypes, defaultProps } from './src/legacy-prop-types';
 import themeAttributes from './src/themeAttributes';
 import type { Props } from './src/BpkModal';
 export type BpkModalProps = Props;
 export default BpkModal;
-export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_STYLING, };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING, };

package/bpk-component-modal/index.js

@@ -20,8 +20,9 @@ import BpkModal from "./src/BpkModal";
 import { MODAL_STYLING } from "./src/BpkModalInner";
 import { BpkModalV2 } from "./src/BpkModalV2/BpkModal";
 import BpkModalV3 from "./src/BpkModalV3/BpkModalV3";
+import { MODAL_V3_TYPES } from "./src/BpkModalV3/common-types";
 // @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, BpkModalV3, MODAL_STYLING };
+export { propTypes, defaultProps, themeAttributes, BpkModalV2, BpkModalV3, MODAL_V3_TYPES, MODAL_STYLING };

package/bpk-component-modal/src/BpkModalV3/{BpkModalV3Body.module.css → BpkModalV3Body/BpkModalV3Body.module.css}

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-modal-v3__body{flex:1;overflow-y:auto}
+.bpk-modal-v3__body{flex:1;overflow-y:auto;overscroll-behavior:contain}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+.bpk-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__positioner--chatbot{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--chatbot{width:100%;height:100%;transform:translateX(100%);transition:transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;background-color:#eff3f8}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(-100%)}.bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}.bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(100%)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}.bpk-modal-v3__content--chatbot{transform:translateX(0);transition:none;opacity:1}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(0)}}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { BpkModalV3Type } from '../common-types';
+import { type ReactNode } from 'react';
+import { type BpkModalV3Type } from '../common-types';
 type BpkModalV3RootProps = {
     children: ReactNode;
     open?: boolean;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/BpkModalV3Root.js

@@ -16,29 +16,52 @@
  * limitations under the License.
  */
 
+import { useEffect, useState } from 'react';
 import { Dialog } from '@ark-ui/react';
+import { durationBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { getDataComponentAttribute } from "../../../../bpk-react-utils";
 import { ModalTypeProvider } from "../BpkModalV3Context";
+import { MODAL_V3_TYPES } from "../common-types";
+import useBodyLock from "./useBodyLock";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkModalV3Root = ({
   children,
   onOpenChange,
   open,
-  type = 'default'
-}) => /*#__PURE__*/_jsx(Dialog.Root, {
-  ...(open !== undefined && {
-    open
-  }),
-  ...(onOpenChange !== undefined && {
-    onOpenChange
-  }),
-  children: /*#__PURE__*/_jsx(ModalTypeProvider, {
-    value: type,
-    children: /*#__PURE__*/_jsx("div", {
-      "data-type": type,
-      ...getDataComponentAttribute('ModalV3'),
-      children: children
+  type = MODAL_V3_TYPES.default
+}) => {
+  const [internalOpen, setInternalOpen] = useState(open ?? false);
+  const isOpen = open ?? internalOpen;
+  const [bodyLockOpen, setBodyLockOpen] = useState(isOpen);
+  useEffect(() => {
+    if (isOpen) {
+      setBodyLockOpen(true);
+    } else {
+      const timer = setTimeout(() => setBodyLockOpen(false), parseInt(durationBase, 10));
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isOpen]);
+  useBodyLock(type === MODAL_V3_TYPES.chatbot && bodyLockOpen);
+  const handleOpenChange = details => {
+    if (open === undefined) {
+      setInternalOpen(details.open);
+    }
+    onOpenChange?.(details);
+  };
+  return /*#__PURE__*/_jsx(Dialog.Root, {
+    ...(open !== undefined && {
+      open
+    }),
+    onOpenChange: handleOpenChange,
+    children: /*#__PURE__*/_jsx(ModalTypeProvider, {
+      value: type,
+      children: /*#__PURE__*/_jsx("div", {
+        "data-type": type,
+        ...getDataComponentAttribute('ModalV3'),
+        children: children
+      })
     })
-  })
-});
+  });
+};
 export default BpkModalV3Root;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/useBodyLock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Locks body scroll when the modal is open, preventing background scroll and
+ * iOS Safari bounce effects. Restores all body styles and scroll position on
+ * cleanup.
+ * @param {boolean} isLocked - Whether the body scroll should be locked.
+ * @returns {void}
+ */
+declare const useBodyLock: (isLocked: boolean) => void;
+export default useBodyLock;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Root/useBodyLock.js

@@ -0,0 +1,69 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 { useEffect, useRef } from 'react';
+
+/**
+ * Locks body scroll when the modal is open, preventing background scroll and
+ * iOS Safari bounce effects. Restores all body styles and scroll position on
+ * cleanup.
+ * @param {boolean} isLocked - Whether the body scroll should be locked.
+ * @returns {void}
+ */
+const useBodyLock = isLocked => {
+  const savedScrollYRef = useRef(0);
+  const savedBodyStylesRef = useRef(null);
+  useEffect(() => {
+    if (!isLocked) {
+      return undefined;
+    }
+    const {
+      body
+    } = document;
+    const currentScrollY = window.scrollY;
+    savedScrollYRef.current = currentScrollY;
+    savedBodyStylesRef.current = {
+      overflow: body.style.overflow || '',
+      position: body.style.position || '',
+      top: body.style.top || '',
+      width: body.style.width || '',
+      touchAction: body.style.touchAction || '',
+      overscrollBehavior: body.style.overscrollBehavior || ''
+    };
+    body.style.overflow = 'hidden';
+    body.style.position = 'fixed';
+    body.style.top = `-${currentScrollY}px`;
+    body.style.width = '100%';
+    body.style.touchAction = 'none';
+    body.style.overscrollBehavior = 'contain';
+    return () => {
+      if (savedBodyStylesRef.current) {
+        const saved = savedBodyStylesRef.current;
+        body.style.overflow = saved.overflow;
+        body.style.position = saved.position;
+        body.style.top = saved.top;
+        body.style.width = saved.width;
+        body.style.touchAction = saved.touchAction;
+        body.style.overscrollBehavior = saved.overscrollBehavior;
+        savedBodyStylesRef.current = null;
+        window.scrollTo(0, savedScrollYRef.current);
+      }
+    };
+  }, [isLocked]);
+};
+export default useBodyLock;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Scrim/BpkModalV3Scrim.js

@@ -25,7 +25,7 @@ const getClassName = cssModules(STYLES);
 const BpkModalV3Scrim = () => {
   const type = useModalType();
   return /*#__PURE__*/_jsx(Dialog.Backdrop, {
-    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full'),
+    className: getClassName('bpk-modal-v3__scrim', type === 'full' && 'bpk-modal-v3__scrim--full', type === 'chatbot' && 'bpk-modal-v3__scrim--chatbot'),
     ...getDataComponentAttribute('ModalV3Scrim')
   });
 };

package/bpk-component-modal/src/BpkModalV3/{BpkModalV3Scrim.module.css → BpkModalV3Scrim/BpkModalV3Scrim.module.css}

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-modal-v3__scrim{position:fixed;z-index:1100;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,.7);opacity:0;inset:0;pointer-events:none}.bpk-modal-v3__scrim[data-state=open]{opacity:1;pointer-events:auto}.bpk-modal-v3__scrim[data-state=closed]{opacity:0}.bpk-modal-v3__scrim--full{display:none}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__scrim{transition:none}}
+.bpk-modal-v3__scrim{position:fixed;z-index:1100;transition:opacity 200ms ease-in-out;background-color:rgba(0,0,0,.7);opacity:0;inset:0;pointer-events:none}.bpk-modal-v3__scrim[data-state=open]{opacity:1;pointer-events:auto}.bpk-modal-v3__scrim[data-state=closed]{opacity:0}.bpk-modal-v3__scrim--full{display:none}.bpk-modal-v3__scrim--chatbot{transition:none}.bpk-modal-v3__scrim--chatbot[data-state=open]{animation:bpk-scrim-fade-in 200ms ease-in-out forwards}.bpk-modal-v3__scrim--chatbot[data-state=closed]{animation:bpk-scrim-fade-out 400ms ease-in-out both}@keyframes bpk-scrim-fade-in{from{opacity:0}to{opacity:1}}@keyframes bpk-scrim-fade-out{from{opacity:1}to{opacity:0}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__scrim{transition:none;animation:none}}

package/bpk-component-modal/src/BpkModalV3/common-types.d.ts

@@ -1 +1,7 @@
-export type BpkModalV3Type = 'default' | 'full' | 'sheet';
+export declare const MODAL_V3_TYPES: {
+    readonly default: "default";
+    readonly full: "full";
+    readonly sheet: "sheet";
+    readonly chatbot: "chatbot";
+};
+export type BpkModalV3Type = (typeof MODAL_V3_TYPES)[keyof typeof MODAL_V3_TYPES];

package/bpk-component-modal/src/BpkModalV3/common-types.js

@@ -1 +1,24 @@
-export {};
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export const MODAL_V3_TYPES = {
+  default: 'default',
+  full: 'full',
+  sheet: 'sheet',
+  chatbot: 'chatbot'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.2.0",
+  "version": "42.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 Skyscanner Ltd
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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.
- */
-.bpk-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}}