@skyscanner/backpack-web 41.8.0 → 41.10.0-beta-v1

package/bpk-component-price-range/src/BpkPriceRange.d.ts

@@ -1,16 +1,24 @@
-type Marker = {
+import type { MarkerDisplayType } from './common-types';
+type PriceRangePosition = {
     price: string;
     percentage: number;
 };
-export type Props = {
+type MarkerPriceRangePosition = PriceRangePosition & {
+    type?: MarkerDisplayType;
+};
+export type BpkPriceRangeProps = {
     min?: number;
     max?: number;
+    /**
+     * @deprecated Use `marker.type` with `MARKER_DISPLAY_TYPES.DOT` instead to hide boundary prices.
+     * This prop will be removed in a future major release.
+     */
     showPriceIndicator?: boolean;
-    marker: Marker;
+    marker?: MarkerPriceRangePosition;
     segments: {
-        low: Marker;
-        high: Marker;
+        low: PriceRangePosition;
+        high: PriceRangePosition;
     };
 };
-declare const BpkPriceRange: ({ marker, max, min, segments, showPriceIndicator, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkPriceRange: ({ marker, max, min, segments, showPriceIndicator, }: BpkPriceRangeProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkPriceRange;

package/bpk-component-price-range/src/BpkPriceRange.js

@@ -21,27 +21,39 @@ import clamp from 'lodash/clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
 import BpkPriceMarker from "./BpkPriceMarker";
-import { MARKER_TYPES } from "./common-types";
+import { MARKER_DISPLAY_TYPES, MARKER_TYPES } from "./common-types";
 import STYLES from "./BpkPriceRange.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const getShouldShowPriceOnBoundaries = (markerType, showPriceIndicator) => {
+  switch (markerType) {
+    case MARKER_DISPLAY_TYPES.DOT:
+      return false;
+    case MARKER_DISPLAY_TYPES.BUBBLE:
+      return true;
+    case undefined:
+    default:
+      // TODO: LUNA-3184 return `true` when deprecating `showPriceIndicator`
+      return showPriceIndicator ?? true;
+  }
+};
 const BpkPriceRange = ({
   marker,
   max = 100,
   min = 0,
   segments,
-  showPriceIndicator = true
+  showPriceIndicator
 }) => {
+  const shouldShowPriceOnBoundaries = getShouldShowPriceOnBoundaries(marker?.type, showPriceIndicator);
   const linesRef = useRef(null);
   const indicatorRef = useRef(null);
   const [linesWidth, setLinesWidth] = useState(0);
   const [prefilledWidth, setPrefilledWidth] = useState(0);
   const calcPercentage = current => (clamp(current, min, max) - min) / (max - min);
-  const indicatorPercent = calcPercentage(marker.percentage);
   let type;
-  if (marker.percentage < segments.low.percentage) {
+  if (marker && marker.percentage < segments.low.percentage) {
     type = MARKER_TYPES.LOW;
-  } else if (marker.percentage > segments.high.percentage) {
+  } else if (marker && marker.percentage > segments.high.percentage) {
     type = MARKER_TYPES.HIGH;
   } else {
     type = MARKER_TYPES.MEDIUM;
@@ -62,17 +74,25 @@ const BpkPriceRange = ({
   }, []);
   useEffect(() => {
     // to calculate the spacing ahead of the price indicator
-    if (indicatorRef.current && linesWidth) {
+    if (marker && indicatorRef.current && linesWidth) {
+      const indicatorPercent = calcPercentage(marker.percentage);
       const estimatedWidth = indicatorPercent * linesWidth - indicatorRef.current.scrollWidth / 2;
       const maxPrefilledWidth = linesWidth - indicatorRef.current.scrollWidth;
       const actualPrefilledWidth = clamp(estimatedWidth, 0, maxPrefilledWidth);
       setPrefilledWidth(actualPrefilledWidth);
     }
-  }, [indicatorPercent, linesWidth]);
-  const linesClassName = getClassName('bpk-price-range__lines', showPriceIndicator && 'bpk-price-range__lines--large');
-  const lowClassName = getClassName('bpk-price-range__line--low', showPriceIndicator && 'bpk-price-range__line--lowLarge');
-  const highClassName = getClassName('bpk-price-range__line--high', showPriceIndicator && 'bpk-price-range__line--highLarge');
+  }, [marker?.percentage, linesWidth]);
+  const linesClassName = getClassName('bpk-price-range__lines', shouldShowPriceOnBoundaries && 'bpk-price-range__lines--large');
+  const lowClassName = getClassName('bpk-price-range__line--low', shouldShowPriceOnBoundaries && 'bpk-price-range__line--lowLarge');
+  const highClassName = getClassName('bpk-price-range__line--high', shouldShowPriceOnBoundaries && 'bpk-price-range__line--highLarge');
   const mediumClassName = getClassName('bpk-price-range__line--medium');
+
+  // TODO: LUNA-3184 set default to BUBBLE when deprecating `showPriceIndicator`
+  const defaultMarkerType = showPriceIndicator ?? true ? MARKER_DISPLAY_TYPES.BUBBLE : MARKER_DISPLAY_TYPES.DOT;
+  const markerType = marker?.type || defaultMarkerType;
+  const shouldShowMarker = !!marker;
+  const shouldShowBubble = shouldShowMarker && markerType === MARKER_DISPLAY_TYPES.BUBBLE;
+  const shouldShowDot = shouldShowMarker && markerType === MARKER_DISPLAY_TYPES.DOT;
   const dotClassName = getClassName(`bpk-price-range__line--${type}`, 'bpk-price-range__line--dot');
   return /*#__PURE__*/_jsxs("div", {
     style: {
@@ -80,9 +100,9 @@ const BpkPriceRange = ({
       '--high': calcPercentage(segments.high.percentage),
       '--prefilled-width': `${prefilledWidth}px`
     },
-    className: getClassName('bpk-price-range', showPriceIndicator && 'bpk-price-range--large'),
+    className: getClassName('bpk-price-range', shouldShowPriceOnBoundaries && 'bpk-price-range--large'),
     ref: linesRef,
-    children: [showPriceIndicator && /*#__PURE__*/_jsx("div", {
+    children: [shouldShowBubble && /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-price-range__marker'),
       children: /*#__PURE__*/_jsx(BpkPriceMarker, {
         ref: indicatorRef,
@@ -97,11 +117,11 @@ const BpkPriceRange = ({
         className: mediumClassName
       }), /*#__PURE__*/_jsx("div", {
         className: highClassName
-      }), !showPriceIndicator && /*#__PURE__*/_jsx("div", {
+      }), shouldShowDot && /*#__PURE__*/_jsx("div", {
         className: dotClassName,
         ref: indicatorRef
       })]
-    }), showPriceIndicator && /*#__PURE__*/_jsxs("div", {
+    }), shouldShowPriceOnBoundaries && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-price-range__ranges'),
       children: [/*#__PURE__*/_jsx(BpkText, {
         textStyle: TEXT_STYLES.footnote,

package/bpk-component-price-range/src/common-types.d.ts

@@ -4,3 +4,8 @@ export declare const MARKER_TYPES: {
     readonly HIGH: "high";
 };
 export type MarkerType = (typeof MARKER_TYPES)[keyof typeof MARKER_TYPES];
+export declare const MARKER_DISPLAY_TYPES: {
+    readonly BUBBLE: "bubble";
+    readonly DOT: "dot";
+};
+export type MarkerDisplayType = (typeof MARKER_DISPLAY_TYPES)[keyof typeof MARKER_DISPLAY_TYPES];

package/bpk-component-price-range/src/common-types.js

@@ -20,4 +20,8 @@ export const MARKER_TYPES = {
   LOW: 'low',
   MEDIUM: 'medium',
   HIGH: 'high'
+};
+export const MARKER_DISPLAY_TYPES = {
+  BUBBLE: 'bubble',
+  DOT: 'dot'
 };

package/bpk-component-rating/src/BpkRating.js

@@ -18,7 +18,7 @@
 
 import clamp from 'lodash.clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import STYLES from "./BpkRating.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -73,6 +73,7 @@ const BpkRating = ({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
+    ...getDataComponentAttribute('Rating'),
     "aria-label": ariaLabel,
     role: "figure",
     ...rest,

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -18,6 +18,7 @@
 
 import { Component } from 'react';
 import BpkLink from "../../bpk-component-link";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from "./utils";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getDirection = () => {
@@ -63,6 +64,7 @@ class BpkRtlToggle extends Component {
       as: "button",
       title: "Keyboard Shortcut: ctrl + cmd + r",
       onClick: this.toggleRtl,
+      ...getDataComponentAttribute('RtlToggle'),
       children: ["RTL ", onOrOff]
     });
   }

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -17,7 +17,7 @@
  */
 
 import BpkText from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSectionHeader.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,6 +32,7 @@ const BpkSectionHeader = ({
   type = SECTION_TYPES.default
 }) => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-section-header'),
+  ...getDataComponentAttribute('SectionHeader'),
   children: [/*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-section-header__title-description', `bpk-section-header__title-description--${type}`),
     children: [/*#__PURE__*/_jsx("h2", {

package/bpk-component-segmented-control/src/BpkSegmentedControl.js

@@ -17,7 +17,7 @@
  */
 
 import { useId, useMemo, useRef, useState } from 'react';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { cssModules, isRTL, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSegmentedControl.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -166,6 +166,7 @@ const BpkSegmentedControl = ({
   const containerStyling = getClassName('bpk-segmented-control-group', shadow && 'bpk-segmented-control-group-shadow');
   return /*#__PURE__*/_jsx("div", {
     className: containerStyling,
+    ...getDataComponentAttribute('SegmentedControl'),
     ...getContainerAriaProps(providedId, label),
     children: buttonContents.map((content, index) => {
       const isSelected = index === selectedButton;

package/bpk-component-skeleton/src/BpkBaseSkeleton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBaseSkeleton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -25,6 +25,7 @@ const BpkBaseSkeleton = ({
   styleObj = undefined
 }) => /*#__PURE__*/_jsx("div", {
   className: getClassName('bpk-skeleton', skeletonStyle),
+  ...getDataComponentAttribute('BaseSkeleton'),
   style: styleObj
 });
 export default BpkBaseSkeleton;

package/bpk-component-slider/src/BpkSlider.js

@@ -18,7 +18,7 @@
 import { forwardRef, useRef, useEffect, useCallback } from 'react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
-import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
+import { cssModules, isRTL, setNativeValue, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -114,6 +114,7 @@ const BpkSlider = ({
   }, []);
   return /*#__PURE__*/_jsxs(Slider.Root, {
     className: getClassName('bpk-slider'),
+    ...getDataComponentAttribute('Slider'),
     defaultValue: currentValue,
     min: min,
     max: max,

package/bpk-component-snippet/src/BpkSnippet.js

@@ -20,7 +20,7 @@ import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkImage, { BORDER_RADIUS_STYLES, withLazyLoading } from "../../bpk-component-image";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSnippet.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -92,6 +92,7 @@ const BpkSnippet = ({
   query: BREAKPOINTS.MOBILE,
   children: isMobile => /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-snippet', desktopLayout === 'imageRight' && 'bpk-snippet--row-reverse', desktopLayout === 'vertical' && 'bpk-snippet--vertical'),
+    ...getDataComponentAttribute('Snippet'),
     children: [/*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-snippet--image', desktopLayout === 'vertical' ? 'bpk-snippet--vertical--container' : 'bpk-snippet--container'),
       children: /*#__PURE__*/_jsx(LazyLoadedImage, {

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
 import XlSpinner from "./spinners/xl";
 import STYLES from "./BpkSpinner.module.css";
@@ -30,6 +30,7 @@ const BpkExtraLargeSpinner = ({
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
+    ...getDataComponentAttribute('ExtraLargeSpinner'),
     children: /*#__PURE__*/_jsx(XlSpinner, {
       ...rest
     })

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
 import LgSpinner from "./spinners/lg";
 import STYLES from "./BpkSpinner.module.css";
@@ -31,6 +31,7 @@ const BpkLargeSpinner = ({
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
+    ...getDataComponentAttribute('LargeSpinner'),
     children: /*#__PURE__*/_jsx(LgSpinner, {
       ...rest
     })

package/bpk-component-spinner/src/BpkSpinner.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
 import SmSpinner from "./spinners/sm";
 import STYLES from "./BpkSpinner.module.css";
@@ -31,6 +31,7 @@ const BpkSpinner = ({
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
+    ...getDataComponentAttribute('Spinner'),
     children: /*#__PURE__*/_jsx(SmSpinner, {
       ...rest
     })

package/bpk-component-split-input/src/BpkInputField.js

@@ -18,7 +18,7 @@
 
 import { PureComponent } from 'react';
 import BpkInput from "../../bpk-component-input";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -49,6 +49,7 @@ class BpkInputField extends PureComponent {
     } = this.props;
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-input-field'),
+      ...getDataComponentAttribute('InputField'),
       children: /*#__PURE__*/_jsx(BpkInput, {
         id: id,
         autoComplete: "off",

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -18,7 +18,7 @@
 
 import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -203,6 +203,7 @@ class BpkSplitInput extends Component {
   render() {
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-split-input'),
+      ...getDataComponentAttribute('SplitInput'),
       children: this.renderInputs()
     });
   }

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -18,7 +18,7 @@
 
 import { useState } from 'react';
 import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwapButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -43,6 +43,7 @@ const BpkSwapButton = props => {
   };
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-swap-button'),
+    ...getDataComponentAttribute('SwapButton'),
     children: /*#__PURE__*/_jsx("button", {
       type: "button",
       className: getClassName('bpk-swap-button__button', `bpk-swap-button__button--${swapButtonStyle}`),

package/bpk-component-switch/src/BpkSwitch.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,6 +29,7 @@ const BpkSwitch = ({
   const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
+    ...getDataComponentAttribute('Switch'),
     children: [/*#__PURE__*/_jsx("input", {
       type: "checkbox",
       className: getClassName('bpk-switch__checkbox'),

package/bpk-component-text/src/BpkText.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkText.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -81,6 +81,7 @@ const BpkText = ({
     // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     _jsx(TagName, {
       className: classNames,
+      ...getDataComponentAttribute('Text'),
       ...rest,
       children: children
     })

package/bpk-component-textarea/src/BpkTextarea.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkTextarea.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -31,6 +31,7 @@ const BpkTextarea = ({
   const isInvalid = valid === false;
   return /*#__PURE__*/_jsx("textarea", {
     className: getClassName('bpk-textarea', isInvalid && 'bpk-textarea--invalid', large && 'bpk-textarea--large', className),
+    ...getDataComponentAttribute('Textarea'),
     "aria-invalid": isInvalid,
     ...rest
   });

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -21,6 +21,7 @@ import BpkLabel from "../../bpk-component-label";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -81,6 +82,7 @@ class BpkThemeToggle extends Component {
       ...rest
     } = this.props;
     return /*#__PURE__*/_jsxs("div", {
+      ...getDataComponentAttribute('ThemeToggle'),
       ...rest,
       children: [/*#__PURE__*/_jsx(BpkVisuallyHidden, {
         children: /*#__PURE__*/_jsx(BpkLabel, {

package/bpk-component-visually-hidden/src/BpkVisuallyHidden.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkVisuallyHidden.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -31,6 +31,7 @@ const BpkVisuallyHidden = ({
     // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     _jsx(Element, {
       className: classNames,
+      ...getDataComponentAttribute('VisuallyHidden'),
       children: children
     })
   );

package/bpk-react-utils/index.d.ts

@@ -4,11 +4,12 @@ import TransitionInitialMount from './src/TransitionInitialMount';
 import cssModules from './src/cssModules';
 import deprecated from './src/deprecated';
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection';
+import { getDataComponentAttribute } from './src/getDataComponentAttribute';
 import isRTL from './src/isRTL';
 import { setNativeValue } from './src/nativeEventHandler';
 import withDefaultProps from './src/withDefaultProps';
 import wrapDisplayName from './src/wrapDisplayName';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute, };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -39,5 +40,8 @@ declare const _default: {
     isRTL: () => boolean;
     BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => import("react/jsx-runtime").JSX.Element | null;
     setNativeValue: typeof setNativeValue;
+    getDataComponentAttribute: (componentName: string) => {
+        "data-backpack-ds-component": string;
+    };
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -23,11 +23,12 @@ import cssModules from "./src/cssModules";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
+import { getDataComponentAttribute } from "./src/getDataComponentAttribute";
 import isRTL from "./src/isRTL";
 import { setNativeValue } from "./src/nativeEventHandler";
 import withDefaultProps from "./src/withDefaultProps";
 import wrapDisplayName from "./src/wrapDisplayName";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue };
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper, setNativeValue, getDataComponentAttribute };
 export default {
   Portal,
   TransitionInitialMount,
@@ -40,5 +41,6 @@ export default {
   isDeviceIos,
   isRTL,
   BpkDialogWrapper,
-  setNativeValue
+  setNativeValue,
+  getDataComponentAttribute
 };

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -19,6 +19,7 @@
 import { useEffect, useRef, useState } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import cssModules from "../cssModules";
+import { getDataComponentAttribute } from "../getDataComponentAttribute";
 import STYLES from "./BpkDialogWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -121,6 +122,7 @@ export const BpkDialogWrapper = ({
   };
   return isOpen ? /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-dialog-wrapper', !dialogSupported && 'bpk-dialog-wrapper--polyfill'),
+    ...getDataComponentAttribute('DialogWrapper'),
     children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
       id: `${id}-polyfill`,
       className: getClassName('bpk-dialog-wrapper--backdrop'),

package/bpk-react-utils/src/getDataComponentAttribute.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns an object containing the data-backpack-ds-component attribute.
+ * Use this to ensure consistent naming and placement across all components.
+ *
+ * @param {string} componentName - The component name without the "Bpk" prefix (e.g., "Button", "Card")
+ * @returns {{Object}} An object with the data-backpack-ds-component attribute
+ *
+ * @example
+ * // In a component:
+ * <button {...getDataComponentAttribute('Button')} {...rest}>
+ *   Click me
+ * </button>
+ *
+ * // Renders:
+ * // <button data-backpack-ds-component="Button" ...>Click me</button>
+ */
+export declare const getDataComponentAttribute: (componentName: string) => {
+    "data-backpack-ds-component": string;
+};
+export default getDataComponentAttribute;

package/bpk-react-utils/src/getDataComponentAttribute.js

@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+/**
+ * Returns an object containing the data-backpack-ds-component attribute.
+ * Use this to ensure consistent naming and placement across all components.
+ *
+ * @param {string} componentName - The component name without the "Bpk" prefix (e.g., "Button", "Card")
+ * @returns {{Object}} An object with the data-backpack-ds-component attribute
+ *
+ * @example
+ * // In a component:
+ * <button {...getDataComponentAttribute('Button')} {...rest}>
+ *   Click me
+ * </button>
+ *
+ * // Renders:
+ * // <button data-backpack-ds-component="Button" ...>Click me</button>
+ */
+export const getDataComponentAttribute = componentName => ({
+  'data-backpack-ds-component': componentName
+});
+export default getDataComponentAttribute;

package/bpk-scrim-utils/src/BpkScrim.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { TransitionInitialMount, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./bpk-scrim.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,6 +29,7 @@ const BpkScrim = ({
   children: /*#__PURE__*/_jsx("div", {
     role: "presentation",
     className: getClassName('bpk-scrim'),
+    ...getDataComponentAttribute('Scrim'),
     onMouseDown: onClose,
     onTouchStart: onClose
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.8.0",
+  "version": "41.10.0-beta-v1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.30.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",