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

package/bpk-component-layout/src/types.d.ts

@@ -0,0 +1,236 @@
+import type { ReactNode } from 'react';
+import type StackOptionKeys from './BpkStack.constant';
+import type { BpkCommonLayoutProps } from './commonProps';
+import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
+import type { BoxProps, FlexProps, GridProps, GridItemProps, StackProps } from '@chakra-ui/react';
+/**
+ * Layout-level event props that should not be exposed on layout components
+ * by default. BpkBox will reintroduce a minimal subset (onClick, onFocus,
+ * onBlur) explicitly on its own props type.
+ */
+type LayoutEventProps = 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
+/**
+ * Shorthand props from the underlying layout system that we do NOT expose on
+ * Backpack layout components. These mostly mirror longer-form spacing,
+ * sizing and visual props that we already model explicitly via
+ * BpkCommonLayoutProps and BpkFlexGridProps.
+ */
+type DisallowedShorthandProps = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'w' | 'h' | 'minW' | 'maxW' | 'minH' | 'maxH' | 'bg' | 'rounded' | 'shadow';
+/**
+ * Flexbox & grid layout props that we explicitly support on Backpack layout
+ * components. These are a curated subset of the underlying Box flex/grid API
+ * that are useful for structural layout.
+ */
+export interface BpkFlexGridProps {
+    display?: BoxProps['display'];
+    flexDirection?: BoxProps['flexDirection'];
+    flexWrap?: BoxProps['flexWrap'];
+    justifyContent?: BoxProps['justifyContent'];
+    alignItems?: BoxProps['alignItems'];
+    alignContent?: BoxProps['alignContent'];
+    flex?: BoxProps['flex'];
+    flexGrow?: BoxProps['flexGrow'];
+    flexShrink?: BoxProps['flexShrink'];
+    flexBasis?: BoxProps['flexBasis'];
+    order?: BoxProps['order'];
+    alignSelf?: BoxProps['alignSelf'];
+    justifySelf?: BoxProps['justifySelf'];
+    gridTemplateColumns?: BoxProps['gridTemplateColumns'];
+    gridTemplateRows?: BoxProps['gridTemplateRows'];
+    gridTemplateAreas?: BoxProps['gridTemplateAreas'];
+    gridAutoFlow?: BoxProps['gridAutoFlow'];
+    gridAutoRows?: BoxProps['gridAutoRows'];
+    gridAutoColumns?: BoxProps['gridAutoColumns'];
+    rowGap?: BoxProps['rowGap'];
+    columnGap?: BoxProps['columnGap'];
+}
+export type FlexGridPropKeys = keyof BpkFlexGridProps;
+/**
+ * Curated subset of Box layout props that support Backpack responsive values.
+ *
+ * NOTE:
+ * - These are structural layout props (flex/grid/display) that we want to allow
+ *   on `BpkBox`, but using Backpack breakpoint keys rather than Chakra's
+ *   array syntax or Chakra breakpoint keys.
+ * - Spacing/size/position props are handled separately via `BpkCommonLayoutProps`.
+ */
+type BpkBoxResponsiveLayoutProps = {
+    display?: BpkResponsiveValue<BoxProps['display']>;
+    flexDirection?: BpkResponsiveValue<BoxProps['flexDirection']>;
+    flexWrap?: BpkResponsiveValue<BoxProps['flexWrap']>;
+    justifyContent?: BpkResponsiveValue<BoxProps['justifyContent']>;
+    alignItems?: BpkResponsiveValue<BoxProps['alignItems']>;
+    alignContent?: BpkResponsiveValue<BoxProps['alignContent']>;
+    flex?: BpkResponsiveValue<BoxProps['flex']>;
+    flexGrow?: BpkResponsiveValue<BoxProps['flexGrow']>;
+    flexShrink?: BpkResponsiveValue<BoxProps['flexShrink']>;
+    flexBasis?: BpkResponsiveValue<BoxProps['flexBasis']>;
+    order?: BpkResponsiveValue<BoxProps['order']>;
+    alignSelf?: BpkResponsiveValue<BoxProps['alignSelf']>;
+    justifySelf?: BpkResponsiveValue<BoxProps['justifySelf']>;
+    gridTemplateColumns?: BpkResponsiveValue<BoxProps['gridTemplateColumns']>;
+    gridTemplateRows?: BpkResponsiveValue<BoxProps['gridTemplateRows']>;
+    gridTemplateAreas?: BpkResponsiveValue<BoxProps['gridTemplateAreas']>;
+    gridAutoFlow?: BpkResponsiveValue<BoxProps['gridAutoFlow']>;
+    gridAutoRows?: BpkResponsiveValue<BoxProps['gridAutoRows']>;
+    gridAutoColumns?: BpkResponsiveValue<BoxProps['gridAutoColumns']>;
+    gridColumn?: BpkResponsiveValue<BoxProps['gridColumn']>;
+    gridRow?: BpkResponsiveValue<BoxProps['gridRow']>;
+};
+type BpkBoxResponsiveLayoutPropKeys = keyof BpkBoxResponsiveLayoutProps;
+/**
+ * Base type that removes common layout props, reserved props (className,
+ * children) and all layout-level event props from Chakra UI props.
+ *
+ * These will be replaced with Backpack-specific types.
+ */
+export type RemoveCommonProps<T> = Omit<T, keyof BpkCommonLayoutProps | 'className' | 'children' | LayoutEventProps | FlexGridPropKeys | DisallowedShorthandProps>;
+/**
+ * Component-specific props for BpkBox
+ * Includes all Box props except those in BpkCommonLayoutProps
+ */
+export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, BpkBoxResponsiveLayoutPropKeys>, BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
+}
+/**
+ * Props for BpkBox component
+ * Combines Box-specific props with Backpack common layout props
+ * and reintroduces a minimal set of interaction props.
+ */
+type BoxEventProps = Pick<BoxProps, 'onClick' | 'onFocus' | 'onBlur'>;
+export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
+    children?: ReactNode;
+    onClick?: BoxEventProps['onClick'];
+    onFocus?: BoxEventProps['onFocus'];
+    onBlur?: BoxEventProps['onBlur'];
+}
+/**
+ * Valid HTML elements that can be used with BpkVessel
+ */
+export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'main' | 'aside' | 'header' | 'footer';
+/**
+ * Props for BpkVessel component.
+ *
+ * BpkVessel is a "migration hatch" that renders an HTML element
+ * and accepts all standard HTML attributes for maximum migration flexibility.
+ *
+ * Accepts all React.HTMLAttributes including:
+ * - Styling: className, style
+ * - Testing: data-testid, data-cy, data-*
+ * - Accessibility: aria-*, role, tabIndex
+ * - Basic HTML: id, title, dir, lang, hidden, etc.
+ * - All standard DOM events: onClick, onChange, onFocus, etc.
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-wrapper"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ */
+export type BpkVesselProps = {
+    as?: VesselElement;
+} & React.HTMLAttributes<HTMLElement>;
+/**
+ * Component-specific props for BpkFlex
+ * Includes all Flex props except those in BpkCommonLayoutProps
+ */
+export interface BpkFlexSpecificProps extends RemoveCommonProps<FlexProps> {
+    direction?: BpkResponsiveValue<FlexProps['flexDirection']>;
+    justify?: BpkResponsiveValue<FlexProps['justifyContent']>;
+    align?: BpkResponsiveValue<FlexProps['alignItems']>;
+    wrap?: BpkResponsiveValue<FlexProps['flexWrap']>;
+    grow?: BpkResponsiveValue<FlexProps['flexGrow']>;
+    shrink?: BpkResponsiveValue<FlexProps['flexShrink']>;
+    basis?: BpkResponsiveValue<BpkBasisValue>;
+    inline?: boolean;
+}
+/**
+ * Props for BpkFlex component
+ * Combines Flex-specific props with Backpack common layout props
+ */
+export interface BpkFlexProps extends BpkCommonLayoutProps, BpkFlexSpecificProps {
+    children?: ReactNode;
+}
+/**
+ * Component-specific props for BpkGrid
+ * Includes all Grid props except those in BpkCommonLayoutProps
+ */
+export interface BpkGridSpecificProps extends RemoveCommonProps<GridProps> {
+    justify?: BpkResponsiveValue<GridProps['justifyContent']>;
+    align?: BpkResponsiveValue<GridProps['alignItems']>;
+    templateColumns?: BpkResponsiveValue<GridProps['gridTemplateColumns']>;
+    templateRows?: BpkResponsiveValue<GridProps['gridTemplateRows']>;
+    templateAreas?: BpkResponsiveValue<GridProps['gridTemplateAreas']>;
+    autoFlow?: BpkResponsiveValue<GridProps['gridAutoFlow']>;
+    autoRows?: BpkResponsiveValue<GridProps['gridAutoRows']>;
+    autoColumns?: BpkResponsiveValue<GridProps['gridAutoColumns']>;
+    rowGap?: BpkResponsiveValue<BpkSpacingValue>;
+    columnGap?: BpkResponsiveValue<BpkSpacingValue>;
+    column?: BpkResponsiveValue<GridProps['gridColumn']>;
+    row?: BpkResponsiveValue<GridProps['gridRow']>;
+    inline?: boolean;
+}
+/**
+ * Props for BpkGrid component
+ * Combines Grid-specific props with Backpack common layout props
+ */
+export interface BpkGridProps extends BpkCommonLayoutProps, BpkGridSpecificProps {
+    children?: ReactNode;
+}
+/**
+ * Component-specific props for BpkGridItem
+ * Includes all GridItem props except those in BpkCommonLayoutProps
+ */
+export interface BpkGridItemSpecificProps extends RemoveCommonProps<GridItemProps> {
+    area?: GridItemProps['area'];
+    colEnd?: GridItemProps['colEnd'];
+    colStart?: GridItemProps['colStart'];
+    colSpan?: GridItemProps['colSpan'];
+    rowEnd?: GridItemProps['rowEnd'];
+    rowStart?: GridItemProps['rowStart'];
+    rowSpan?: GridItemProps['rowSpan'];
+}
+/**
+ * Props for BpkGridItem component
+ * Combines GridItem-specific props with Backpack common layout props
+ */
+export interface BpkGridItemProps extends BpkCommonLayoutProps, BpkGridItemSpecificProps {
+    children?: ReactNode;
+}
+type StackOptionKeysType = typeof StackOptionKeys[number];
+/**
+ * Overrides StackOptions to support BpkResponsiveValue
+ */
+type BpkStackOptions = {
+    [K in StackOptionKeysType]?: K extends keyof StackProps ? BpkResponsiveValue<StackProps[K]> | StackProps[K] : never;
+};
+/**
+ * Component-specific props for BpkStack
+ * Includes all Stack props except those in BpkCommonLayoutProps
+ * Overrides StackOptions to support BpkResponsiveValue
+ */
+export interface BpkStackSpecificProps extends Omit<RemoveCommonProps<StackProps>, StackOptionKeysType>, BpkStackOptions, BpkFlexGridProps {
+}
+/**
+ * Props for BpkStack component
+ * Combines Stack-specific props with Backpack common layout props
+ */
+export interface BpkStackProps extends BpkCommonLayoutProps, BpkStackSpecificProps {
+    children?: ReactNode;
+}
+export type { BpkCommonLayoutProps };

package/bpk-component-layout/src/types.js

@@ -0,0 +1 @@
+export {};

package/bpk-component-link/src/BpkButtonLink.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import themeAttributes from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -60,6 +60,7 @@ const BpkButtonLink = ({
   return /*#__PURE__*/_jsx("button", {
     type: "button",
     className: classNames.join(' '),
+    ...getDataComponentAttribute('ButtonLink'),
     onClick: onClick,
     ...rest,
     children: /*#__PURE__*/_jsx("span", {

package/bpk-component-link/src/BpkLink.js

@@ -17,7 +17,7 @@
  */
 
 import { forwardRef } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -103,6 +103,7 @@ const BpkLinkInner = ({
       className: linkClassName,
       ref: ref,
       ...elementProps,
+      ...getDataComponentAttribute('Link'),
       children: /*#__PURE__*/_jsx("span", {
         className: underlinedClassName,
         children: children

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

@@ -0,0 +1,5 @@
+import BpkList from './src/BpkList';
+import BpkListItem from './src/BpkListItem';
+export type { Props as BpkListProps } from './src/BpkList';
+export type { Props as BpkListItemProps } from './src/BpkListItem';
+export { BpkList, BpkListItem };

package/bpk-component-list/index.js

@@ -14,6 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkList from "./src/BpkList";
+ */
+
+import BpkList from "./src/BpkList";
 import BpkListItem from "./src/BpkListItem";
 export { BpkList, BpkListItem };

package/bpk-component-list/src/BpkList.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    ordered?: boolean;
+    className?: string | null;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    title?: string;
+};
+declare const BpkList: ({ ariaLabel, ariaLabelledby, children, className, ordered, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkList;

package/bpk-component-list/src/BpkList.js

@@ -14,35 +14,30 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkList = ({
-  ariaLabel = null,
-  ariaLabelledby = null,
+  ariaLabel,
+  ariaLabelledby,
   children,
   className = null,
   ordered = false,
-  title = null
+  title
 }) => {
-  const ListElements = ordered ? 'ol' : 'ul';
+  const ListElement = ordered ? 'ol' : 'ul';
   const classNames = getClassName('bpk-list', className);
-  return /*#__PURE__*/_jsx(ListElements, {
+  return /*#__PURE__*/_jsx(ListElement, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
-    title: title,
+    title: title
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props -- className is required to apply Bpk list styles and allow optional consumer-supplied classes
+    ,
     className: classNames,
     children: children
   });
 };
-BpkList.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  ordered: PropTypes.bool,
-  className: PropTypes.string,
-  ariaLabel: PropTypes.string,
-  ariaLabelledby: PropTypes.string,
-  title: PropTypes.string
-};
 export default BpkList;

package/bpk-component-list/src/BpkListItem.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    className?: string | null;
+};
+declare const BpkListItem: ({ children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkListItem;

package/bpk-component-list/src/BpkListItem.js

@@ -14,7 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,8 +30,4 @@ const BpkListItem = ({
     children: children
   });
 };
-BpkListItem.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  className: PropTypes.string
-};
 export default BpkListItem;

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -21,7 +21,7 @@ import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from ".
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
 import ArrowIconSm from "../../bpk-component-icon/sm/long-arrow-right";
 import { BpkSpinner, BpkLargeSpinner } from "../../bpk-component-spinner";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkLoadingButton.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -113,6 +113,7 @@ const BpkLoadingButton = props => {
     disabled: showBtnDisabled,
     size: large ? SIZE_TYPES.large : SIZE_TYPES.small,
     type: type,
+    ...getDataComponentAttribute('LoadingButton'),
     ...rest,
     children: /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-loading-button__container'),

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -18,7 +18,7 @@
 
 import { Component } from 'react';
 import debounce from 'lodash/debounce';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { cssModules, isRTL, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkMobileScrollContainer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -131,6 +131,7 @@ class BpkMobileScrollContainer extends Component {
         ...style,
         height: this.state.computedHeight
       },
+      ...getDataComponentAttribute('MobileScrollContainer'),
       children: /*#__PURE__*/_jsx("div", {
         ref: el => {
           if (scrollerRef) {

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
+import { Portal, cssModules, isDeviceIphone, getDataComponentAttribute } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkModalInner, { MODAL_STYLING } from "./BpkModalInner";
 import STYLES from "./BpkModal.module.css";
@@ -74,6 +74,7 @@ const BpkModal = ({
       accessoryView: accessoryView,
       dialogRef: dialogRef,
       modalStyle: modalStyle,
+      ...getDataComponentAttribute('Modal'),
       ...rest
     })
   });

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

@@ -21,7 +21,7 @@ import { useEffect, useRef } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../../bpk-component-close-button";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
-import { cssModules, withDefaultProps } from "../../../bpk-react-utils";
+import { cssModules, withDefaultProps, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { MODAL_STYLING } from "../BpkModalInner";
 import STYLES from "./BpKModal.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -137,6 +137,7 @@ export const BpkModalV2 = props => {
   const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded', modalStyle === MODAL_STYLING.surfaceContrast && 'bpk-modal__container--surface-contrast');
   return isOpen ? /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
+    ...getDataComponentAttribute('ModalV2'),
     children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
       id: `${id}-polyfill`,
       className: getClassName('bpk-modal-backdrop'),

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

@@ -17,7 +17,7 @@
  */
 
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
@@ -45,6 +45,7 @@ const BpkNavigationBar = props => {
   return /*#__PURE__*/_jsxs("nav", {
     "aria-labelledby": titleId,
     className: getClassNames('bpk-navigation-bar', `bpk-navigation-bar--${barStyle}`, sticky && 'bpk-navigation-bar__sticky', className),
+    ...getDataComponentAttribute('NavigationBar'),
     ...rest,
     children: [leadingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),

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

@@ -17,6 +17,7 @@
  */
 
 import BpkLink from "../../bpk-component-link";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkNavigationBarButtonLink = ({
@@ -26,6 +27,7 @@ const BpkNavigationBarButtonLink = ({
   ...rest
 }) => /*#__PURE__*/_jsx("span", {
   className: className,
+  ...getDataComponentAttribute('NavigationBarButtonLink'),
   children: /*#__PURE__*/_jsx(BpkLink, {
     as: "button",
     alternate: barStyle === BAR_STYLES.onDark,

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

@@ -18,6 +18,7 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkNavigationBarIconButton = ({
@@ -27,6 +28,7 @@ const BpkNavigationBarIconButton = ({
   ...rest
 }) => /*#__PURE__*/_jsx("span", {
   className: className,
+  ...getDataComponentAttribute('NavigationBarIconButton'),
   children: /*#__PURE__*/_jsx(BpkCloseButton, {
     customIcon: icon,
     onDark: barStyle === BAR_STYLES.onDark,

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -19,7 +19,7 @@
 import { useState } from 'react';
 import BpkBubble from "../../bpk-component-bubble/src/BpkBubble";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationTabGroup.module.css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -76,6 +76,7 @@ const BpkNavigationTabGroup = ({
     className: containerStyling,
     role: "navigation",
     "aria-label": ariaLabel,
+    ...getDataComponentAttribute('NavigationTabGroup'),
     children: /*#__PURE__*/_jsx("div", {
       role: "tablist",
       className: getClassName('bpk-navigation-tab-list'),

package/bpk-component-nudger/src/BpkNudger.js

@@ -23,7 +23,7 @@ import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules, setNativeValue } from "../../bpk-react-utils";
+import { cssModules, setNativeValue, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -133,6 +133,7 @@ const BpkNudger = ({
           valueLimitter(inputElement);
         },
         className: inputClassNames,
+        ...getDataComponentAttribute('Nudger'),
         ...rest
       }), /*#__PURE__*/_jsx(BpkButton, {
         type: BUTTON_TYPES[buttonType],

package/bpk-component-overlay/src/BpkOverlay.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 "./BpkOverlay.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -74,6 +74,7 @@ const BpkOverlay = props => {
   const overlayClassNames = getClassName('bpk-overlay__overlay', overlayType !== undefined && overlayType !== null && overlayType !== OVERLAY_TYPES.off && `bpk-overlay__overlay--${overlayTypeClassSuffixes[overlayType]}`);
   return /*#__PURE__*/_jsxs("div", {
     className: wrapperClassNames,
+    ...getDataComponentAttribute('Overlay'),
     ...rest,
     children: [children, /*#__PURE__*/_jsx("div", {
       className: overlayClassNames,

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

package/bpk-component-popover/src/BpkPopover.js

@@ -24,7 +24,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 import BpkCloseButton from "../../bpk-component-close-button";
 import BpkLink from "../../bpk-component-link";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { TransitionInitialMount, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { ARROW_ID } from "./constants";
 import STYLES from "./BpkPopover.module.css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -156,6 +156,7 @@ const BpkPopover = ({
               role: "dialog",
               "aria-labelledby": labelId,
               className: classNames,
+              ...getDataComponentAttribute('Popover'),
               ...rest,
               children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
                 ref: arrowRef,

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", {