@skyscanner/backpack-web 41.8.0 → 41.9.0

package/bpk-component-badge/src/BpkBadge.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 "./BpkBadge.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BADGE_TYPES = {
@@ -50,6 +50,7 @@ const BpkBadge = ({
   const classNames = getClassName('bpk-badge', badgeTypeClassNames[type], docked === 'right' && 'bpk-badge--docked-right', docked === 'left' && 'bpk-badge--docked-left', centered && 'bpk-badge--centered', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
+    ...getDataComponentAttribute('Badge'),
     ...rest
   });
 };

package/bpk-component-blockquote/src/BpkBlockquote.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 "./BpkBlockquote.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -30,6 +30,7 @@ const BpkBlockquote = ({
   }
   return /*#__PURE__*/_jsx("blockquote", {
     className: classNames.join(' '),
+    ...getDataComponentAttribute('Blockquote'),
     children: children
   });
 };

package/bpk-component-boilerplate/src/BpkBoilerplate.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 "./BpkBoilerplate.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ const BpkBoilerplate = ({
   delete rest.className;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-boilerplate'),
+    ...getDataComponentAttribute('Boilerplate'),
     ...rest,
     children: "I am an example component."
   });

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -150,12 +150,9 @@ const BpkCardListCarousel = props => {
       }
       const commonProps = {
         className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
-        style: {
-          ...shownNumberStyle,
-          ...cardDimensionStyle
-        },
+        style: shownNumberStyle,
         key: `carousel-card-${index.toString()}`,
-        role: "group"
+        role: 'group'
       };
 
       // Only render cards that are within the renderList range or have been visible before
@@ -165,18 +162,25 @@ const BpkCardListCarousel = props => {
           ...commonProps,
           style: {
             ...commonProps.style,
+            ...cardDimensionStyle,
             contain: 'paint'
           },
           "data-testid": "bpk-card-list-carousel--placeholder",
           "aria-hidden": "true",
-          children: card
+          children: /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-card-list-row-rail__card-slot'),
+            children: card
+          })
         });
       }
       return /*#__PURE__*/_jsx("div", {
         ...commonProps,
         ref: cardRefFns[index],
         "aria-label": slideLabel(index, childrenLength),
-        children: card
+        children: /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-card-list-row-rail__card-slot'),
+          children: card
+        })
       });
     })
   });

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:hidden;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:hidden;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}.bpk-card-list-row-rail__card-slot{display:grid;height:100%}

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -17,7 +17,7 @@
  */
 
 import CloseIcon from "../../bpk-component-icon/sm/close";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkCloseButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -40,6 +40,7 @@ const BpkCloseButton = ({
     onClick: onClick,
     "aria-label": label,
     className: classNames.join(' '),
+    ...getDataComponentAttribute('CloseButton'),
     ...rest,
     children: /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-close-button-icon'),

package/bpk-component-code/src/BpkCode.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 "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,6 +29,7 @@ const BpkCode = ({
   const classNames = getClassName('bpk-code', alternate && 'bpk-code--alternate', className);
   return /*#__PURE__*/_jsx("code", {
     className: classNames,
+    ...getDataComponentAttribute('Code'),
     ...rest,
     children: children
   });

package/bpk-component-code/src/BpkCodeBlock.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 "./BpkCodeBlock.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -30,6 +30,7 @@ const BpkCodeBlock = ({
   const codeClassNames = getClassName('bpk-code', 'bpk-code--block');
   return /*#__PURE__*/_jsx("pre", {
     className: preClassNames,
+    ...getDataComponentAttribute('CodeBlock'),
     ...rest,
     children: /*#__PURE__*/_jsx("code", {
       className: codeClassNames,

package/bpk-component-journey-arrow/src/BpkJourneyArrow.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 "./BpkJourneyArrow.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -28,6 +28,7 @@ const BpkJourneyArrow = ({
   const dotCount = Math.min(3, Math.max(0, stops));
   return /*#__PURE__*/_jsx("div", {
     className: getClassName("bpk-journey-arrow"),
+    ...getDataComponentAttribute('JourneyArrow'),
     ...rest,
     children: Array.from({
       length: dotCount

package/bpk-component-label/src/BpkLabel.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 "./BpkLabel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,6 +33,7 @@ const BpkLabel = ({
   const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
   return /*#__PURE__*/_jsxs("label", {
     className: classNames,
+    ...getDataComponentAttribute('Label'),
     ...rest,
     children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-label__asterisk'),

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

@@ -17,7 +17,7 @@
  */
 
 import { BUTTON_TYPES } from "../../bpk-component-button";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
 import STYLES from "./BpkPageIndicator.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -55,6 +55,7 @@ const BpkPageIndicator = ({
     "data-testid": "indicator-container",
     children: /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
+      ...getDataComponentAttribute('PageIndicator'),
       children: [showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,

package/bpk-component-price-range/index.d.ts

@@ -1,3 +1,2 @@
-import BpkPriceRange, { type Props as BpkPriceRangeProps } from './src/BpkPriceRange';
-export type { BpkPriceRangeProps };
-export default BpkPriceRange;
+export { default, type BpkPriceRangeProps } from './src/BpkPriceRange';
+export { MARKER_DISPLAY_TYPES, type MarkerDisplayType, } from './src/common-types';

package/bpk-component-price-range/index.js

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-import BpkPriceRange from "./src/BpkPriceRange";
-export default BpkPriceRange;
+export { default } from "./src/BpkPriceRange";
+export { MARKER_DISPLAY_TYPES } from "./src/common-types";

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-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-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-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.9.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",