@skyscanner/backpack-web 41.9.0 → 41.10.0

package/bpk-component-banner-alert/src/BpkBannerAlert.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBannerAlertInner from "./BpkBannerAlertInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultProps = {
@@ -40,6 +41,7 @@ const BpkBannerAlert = ({
   animateOnLeave: animateOnLeave,
   show: show,
   icon: icon,
+  ...getDataComponentAttribute('BannerAlert'),
   ...rest
 });
 export default BpkBannerAlert;

package/bpk-component-banner-alert/src/BpkBannerAlertDismissable.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBannerAlertInner, { CONFIGURATION } from "./BpkBannerAlertInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkBannerAlertDismissable = ({
@@ -24,6 +25,7 @@ const BpkBannerAlertDismissable = ({
 }) => /*#__PURE__*/_jsx(BpkBannerAlertInner, {
   configuration: CONFIGURATION.DISMISSABLE,
   onDismiss: onDismiss,
+  ...getDataComponentAttribute('BannerAlertDismissable'),
   ...rest
 });
 export default BpkBannerAlertDismissable;

package/bpk-component-banner-alert/src/BpkBannerAlertExpandable.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBannerAlertInner, { CONFIGURATION } from "./BpkBannerAlertInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkBannerAlertExpandable = ({
@@ -27,6 +28,7 @@ const BpkBannerAlertExpandable = ({
   configuration: CONFIGURATION.EXPANDABLE,
   expanded: expanded,
   onExpandToggle: onExpandToggle,
+  ...getDataComponentAttribute('BannerAlertExpandable'),
   ...rest,
   children: children
 });

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -23,7 +23,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
+import { BpkDialogWrapper, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBottomSheet.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -113,6 +113,7 @@ const BpkBottomSheet = ({
       appear: animationTimeout,
       exit: isAboveMobile ? 0 : animationTimeout
     },
+    ...getDataComponentAttribute('BottomSheet'),
     children: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("header", {
         className: getClassName('bpk-bottom-sheet--header-wrapper'),

package/bpk-component-breadcrumb/src/BpkBreadcrumb.js

@@ -17,7 +17,7 @@
  */
 
 import { Component, Fragment } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBreadcrumb.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -63,6 +63,7 @@ class BpkBreadcrumb extends Component {
         }
       }), /*#__PURE__*/_jsx("nav", {
         "aria-label": label,
+        ...getDataComponentAttribute('Breadcrumb'),
         ...rest,
         children: /*#__PURE__*/_jsx("ol", {
           className: getClassName('bpk-breadcrumb'),

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js

@@ -20,7 +20,7 @@ import { withRtlSupport } from "../../bpk-component-icon";
 import ArrowRight from "../../bpk-component-icon/sm/arrow-right";
 import BpkLink from "../../bpk-component-link";
 import BpkText from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBreadcrumbItem.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -36,6 +36,7 @@ const BpkBreadcrumbItem = props => {
   } = props;
   return /*#__PURE__*/_jsxs("li", {
     className: getClassName('bpk-breadcrumb-item', className),
+    ...getDataComponentAttribute('BreadcrumbItem'),
     ...rest,
     children: [active ? /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-breadcrumb-item__active-item'),

package/bpk-component-button/src/BpkButtonV2/BpkButton.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { BUTTON_TYPES, SIZE_TYPES } from "./common-types";
 import COMMON_STYLES from "./BpkButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -53,6 +53,7 @@ export const BpkButtonV2 = ({
     return /*#__PURE__*/_jsx("a", {
       href: href,
       className: classNames,
+      ...getDataComponentAttribute('Button'),
       onClick: onClick,
       target: target,
       rel: rel,
@@ -64,6 +65,7 @@ export const BpkButtonV2 = ({
     type: submit ? 'submit' : 'button',
     disabled: disabled,
     className: classNames,
+    ...getDataComponentAttribute('Button'),
     onClick: onClick,
     ...rest,
     children: content

package/bpk-component-card/src/BpkCard.js

@@ -17,7 +17,7 @@
  */
 
 import { useContext } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CardContext } from "./CardContext";
 import STYLES from "./BpkCard.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,6 +51,7 @@ const BpkCard = ({
     return /*#__PURE__*/_jsx("a", {
       href: href,
       className: classNames,
+      ...getDataComponentAttribute('Card'),
       ...atomicProps,
       ...blankProps,
       ...rest,
@@ -61,12 +62,14 @@ const BpkCard = ({
     return /*#__PURE__*/_jsx("button", {
       type: "button",
       className: classNames,
+      ...getDataComponentAttribute('Card'),
       ...rest,
       children: children
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: classNames,
+    ...getDataComponentAttribute('Card'),
     ...rest,
     children: children
   });

package/bpk-component-card/src/BpkCardWrapper.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CardContext } from "./CardContext";
 import STYLES from "./BpkCardWrapper.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,6 +38,7 @@ const BpkCardWrapper = ({
         // @ts-expect-error TS is reporting this incorrectly as --background-color is valid
         '--background-color': backgroundColor
       },
+      ...getDataComponentAttribute('CardWrapper'),
       children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-card-wrapper--header'),
         children: header

package/bpk-component-card/src/BpkDividedCard.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkCard from "./BpkCard";
 import { CardContext } from "./CardContext";
 import STYLES from "./BpkDividedCard.module.css";
@@ -44,6 +44,7 @@ const BpkDividedCard = ({
     },
     children: /*#__PURE__*/_jsx("div", {
       className: containerClassName,
+      ...getDataComponentAttribute('DividedCard'),
       children: /*#__PURE__*/_jsx(BpkCard, {
         href: href,
         padded: false,

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -22,7 +22,7 @@ import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
 import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
 import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
 import BpkHeartOutlineIconSm from "../../bpk-component-icon/sm/heart--outline";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSaveButton.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SIZE_TYPES = {
@@ -56,6 +56,7 @@ const BpkSaveButton = ({
     "aria-label": accessibilityLabel,
     "aria-pressed": checked,
     className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
+    ...getDataComponentAttribute('SaveButton'),
     onClick: e => {
       onCheckedChange(e);
       if (!checked) {

package/bpk-component-card-list/src/BpkCardList.js

@@ -18,7 +18,7 @@
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import BpkButton from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkCardListGridStack from "./BpkCardListGridStack";
 import BpkCardListRowRailContainer from "./BpkCardListRowRail";
 import { ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES, LAYOUTS } from "./common-types";
@@ -61,6 +61,7 @@ const BpkCardList = props => {
   });
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-card-list'),
+    ...getDataComponentAttribute('CardList'),
     "data-testid": "bpk-card-list",
     children: /*#__PURE__*/_jsx(BpkBreakpoint, {
       query: BREAKPOINTS.MOBILE,

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.js

@@ -18,7 +18,7 @@
 
 import { Children, useState } from 'react';
 import BpkButton from "../../../bpk-component-button";
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import ExpandAccessoryContent from "../BpkExpand/ExpandAccessoryContent";
 import { ACCESSORY_DESKTOP_TYPES } from "../common-types";
 import STYLES from "./BpkCardListGridStack.module.css";
@@ -67,6 +67,7 @@ const BpkCardListGridStack = props => {
   });
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-card-list-grid-stack'),
+    ...getDataComponentAttribute('CardListGridStack'),
     "data-testid": "bpk-card-list-grid-stack",
     children: [/*#__PURE__*/_jsx("div", {
       className: getClassName(`bpk-card-list-grid-stack__${layout}`),

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

@@ -18,7 +18,7 @@
 
 import { useRef, useState, useEffect, isValidElement, Children, useMemo } from 'react';
 import throttle from 'lodash/throttle';
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { RENDER_BUFFER_SIZE } from "./constants";
 import { lockScroll, setA11yTabIndex, useScrollToCard, useIntersectionObserver } from "./utils";
 import STYLES from "./BpkCardListCarousel.module.css";
@@ -131,6 +131,7 @@ const BpkCardListCarousel = props => {
   }, []);
   return /*#__PURE__*/_jsx("div", {
     className: getClassName(`bpk-card-list-row-rail__${layout}`),
+    ...getDataComponentAttribute('CardListCarousel'),
     "data-testid": "bpk-card-list-row-rail__carousel",
     "aria-label": carouselLabel(initiallyShownCards, childrenLength),
     "aria-roledescription": "carousel"

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

@@ -17,7 +17,7 @@
  */
 import { useState, Children } from 'react';
 import BpkPageIndicator from "../../../bpk-component-page-indicator";
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { ACCESSORY_DESKTOP_TYPES, LAYOUTS } from "../common-types";
 import BpkCardListCarousel from "./BpkCardListCarousel";
 import STYLES from "./BpkCardListRowRailContainer.module.css";
@@ -47,6 +47,7 @@ const BpkCardListRowRailContainer = props => {
   }) : null;
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-card-list-row-rail'),
+    ...getDataComponentAttribute('CardListRowRailContainer'),
     "data-testid": "bpk-card-list-row-rail",
     children: [/*#__PURE__*/_jsx(BpkCardListCarousel, {
       initiallyShownCards: initiallyShownCards,

package/bpk-component-carousel/src/BpkCarousel.js

@@ -19,7 +19,7 @@
 import { useRef, useState } from 'react';
 import { BREAKPOINTS, useMediaQuery } from "../../bpk-component-breakpoint";
 import BpkPageIndicator, { VARIANT } from "../../bpk-component-page-indicator";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkCarouselContainer from "./BpkCarouselContainer";
 import { scrollToIndex, useScrollToInitialImage } from "./utils";
 import STYLES from "./BpkCarousel.module.css";
@@ -44,6 +44,7 @@ const BpkCarousel = ({
   useScrollToInitialImage(initialImageIndex, imagesRef);
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-carousel'),
+    ...getDataComponentAttribute('Carousel'),
     children: [/*#__PURE__*/_jsx(BpkCarouselContainer, {
       images: images,
       onVisible: updateShownImageIndex,

package/bpk-component-carousel/src/BpkCarouselContainer.js

@@ -17,7 +17,7 @@
  */
 
 import { memo, useState } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkCarouselImage from "./BpkCarouselImage";
 import { useIntersectionObserver } from "./utils";
 import STYLES from "./BpkCarouselContainer.module.css";
@@ -58,6 +58,7 @@ const BpkScrollContainer = /*#__PURE__*/memo(({
   if (images.length === 1) {
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-carousel-container'),
+      ...getDataComponentAttribute('CarouselContainer'),
       role: "list",
       "data-testid": "image-gallery-scroll-container",
       children: /*#__PURE__*/_jsx(BpkCarouselImage, {
@@ -68,6 +69,7 @@ const BpkScrollContainer = /*#__PURE__*/memo(({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-carousel-container'),
+    ...getDataComponentAttribute('CarouselContainer'),
     ref: setRoot,
     "data-testid": "image-gallery-scroll-container",
     role: "list",

package/bpk-component-carousel/src/BpkCarouselImage.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 "./BpkCarouselImage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -26,6 +26,7 @@ const BpkCarouselImage = /*#__PURE__*/forwardRef(({
   index
 }, ref) => /*#__PURE__*/_jsx("div", {
   className: getClassName('bpk-carousel-image'),
+  ...getDataComponentAttribute('CarouselImage'),
   "data-index": index,
   ref: ref,
   role: "listitem",

package/bpk-component-checkbox/src/BpkCheckbox.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 "./BpkCheckbox.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -41,6 +41,7 @@ const BpkCheckbox = ({
   const inputClasses = getClassName('bpk-checkbox__input', white && 'bpk-checkbox__input-white', indeterminate && 'bpk-checkbox__input-indeterminate');
   return /*#__PURE__*/_jsxs("label", {
     className: classNames,
+    ...getDataComponentAttribute('Checkbox'),
     children: [/*#__PURE__*/_jsx("input", {
       type: "checkbox",
       className: inputClasses,

package/bpk-component-content-cards/src/BpkContentCard.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 "./BpkContentCard.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,6 +29,7 @@ const BpkContentCard = ({
   href: card.href,
   target: "_blank",
   rel: "noreferrer",
+  ...getDataComponentAttribute('ContentCard'),
   children: [/*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-content-card--image-container'),
     children: /*#__PURE__*/_jsx("img", {

package/bpk-component-content-cards/src/BpkContentCards.js

@@ -17,7 +17,7 @@
  */
 /* eslint react/no-array-index-key: 0 */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkContentCard from "./BpkContentCard";
 import STYLES from "./BpkContentCards.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,6 +30,7 @@ const BpkContentCards = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
+    ...getDataComponentAttribute('ContentCards'),
     children: [/*#__PURE__*/_jsx("h2", {
       className: getClassName('bpk-content-cards--header-text'),
       children: heading

package/bpk-component-datatable/src/BpkDataTable.js

@@ -20,7 +20,7 @@ import { useMemo, useState } from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkDataTableHeader from "./BpkDataTableHeader";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import { createColumnsSchema } from "./utils";
@@ -106,6 +106,7 @@ const BpkDataTable = props => {
       className: classNames
     }),
     ...restOfProps,
+    ...getDataComponentAttribute('DataTable'),
     children: [/*#__PURE__*/_jsx("div", {
       children: headerGroups.map(headerGroup => /*#__PURE__*/_jsx("div", {
         ...headerGroup.getHeaderGroupProps({

package/bpk-component-datatable/src/BpkDataTableHeader.js

@@ -19,7 +19,7 @@
 import { withRtlSupport } from "../../bpk-component-icon";
 import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import STYLES from "./BpkDataTableHeader.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -97,6 +97,7 @@ const BpkDataTableHeader = ({
       },
       className: headerClassNames
     }),
+    ...getDataComponentAttribute('DataTableHeader'),
     children: [/*#__PURE__*/_jsx("span", {
       onClick: onHeaderClick,
       onKeyDown: handleKeyboardEvent,

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -22,7 +22,7 @@ import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDat
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
 import BpkPopover from "../../bpk-component-popover";
-import { setNativeValue } from "../../bpk-react-utils";
+import { setNativeValue, getDataComponentAttribute } from "../../bpk-react-utils";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
@@ -252,6 +252,7 @@ class BpkDatepicker extends Component {
         isOpen: this.state.isOpen,
         label: title,
         closeButtonText: closeButtonText,
+        ...getDataComponentAttribute('Datepicker'),
         ...rest,
         children: /*#__PURE__*/_jsx(Calendar, {
           ...calendarProps,

package/bpk-component-description-list/src/BpkDescriptionDetails.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 "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ export default ({
 }) => /*#__PURE__*/_jsx("dd", {
   className: [getClassName('bpk-description-list__details'), className].filter(x => x) // inline drops the className if undefined
   .join(' '),
+  ...getDataComponentAttribute('DescriptionDetails'),
   ...rest,
   children: children
 });

package/bpk-component-description-list/src/BpkDescriptionList.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 "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ export default ({
 }) => /*#__PURE__*/_jsx("dl", {
   className: [getClassName('bpk-description-list'), className].filter(x => x) // inline drops the className if undefined
   .join(' '),
+  ...getDataComponentAttribute('DescriptionList'),
   ...rest,
   children: children
 });

package/bpk-component-description-list/src/BpkDescriptionTerm.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 "./BpkDescriptionList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,6 +27,7 @@ export default ({
 }) => /*#__PURE__*/_jsx("dt", {
   className: [getClassName('bpk-description-list__term'), className].filter(x => x) // inline drops the className if undefined
   .join(' '),
+  ...getDataComponentAttribute('DescriptionTerm'),
   ...rest,
   children: children
 });

package/bpk-component-dialog/src/BpkDialog.js

@@ -18,7 +18,7 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { cssModules, Portal } from "../../bpk-react-utils";
+import { cssModules, Portal, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkDialogInner from "./BpkDialogInner";
 import { HEADER_ICON_TYPES } from "./common-types";
 import STYLES from "./BpkDialog.module.css";
@@ -52,6 +52,7 @@ const BpkDialog = ({
       containerClassName: getClassName('bpk-dialog__container'),
       contentClassName: headerIcon ? getClassName('bpk-dialog--with-icon') : undefined,
       ...rest,
+      ...getDataComponentAttribute('Dialog'),
       children: [headerIcon && /*#__PURE__*/_jsx("div", {
         className: headerIconClassNames,
         children: headerIcon

package/bpk-component-drawer/src/BpkDrawer.js

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useState, useEffect } from 'react';
-import { Portal, isDeviceIpad, isDeviceIphone } from "../../bpk-react-utils";
+import { Portal, isDeviceIpad, isDeviceIphone, getDataComponentAttribute } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,6 +59,7 @@ const BpkDrawer = ({
     isOpen: isOpen,
     onClose: hide,
     renderTarget: renderTarget,
+    ...getDataComponentAttribute('Drawer'),
     children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
       id: id,
       title: title,

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -20,7 +20,7 @@ import { cloneElement } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
 import BpkLabel from "../../bpk-component-label";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -74,6 +74,7 @@ const BpkFieldset = ({
   }
   return /*#__PURE__*/_jsxs("fieldset", {
     className: classNames.join(' '),
+    ...getDataComponentAttribute('Fieldset'),
     ...rest,
     children: [!isCheckbox && /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-fieldset__label'),

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

@@ -21,7 +21,7 @@ import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+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);
@@ -62,6 +62,7 @@ const BpkFloatingNotification = props => {
     onExited: onExit,
     children: /*#__PURE__*/_jsxs("div", {
       className: classNames,
+      ...getDataComponentAttribute('FloatingNotification'),
       ...rest,
       children: [Icon && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__icon'),

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -17,7 +17,7 @@
  */
 
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkGraphicPromo.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -125,6 +125,7 @@ const BpkGraphicPromo = ({
       }),
       onClick: onClickWrapper,
       onKeyDown: onKeyWrapper,
+      ...getDataComponentAttribute('GraphicPromo'),
       children: /*#__PURE__*/_jsxs("div", {
         id: contentId && `${contentId}__content` || '',
         className: containerClasses,

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -20,7 +20,7 @@ import { Component } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBackgroundImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -102,6 +102,7 @@ class BpkBackgroundImage extends Component {
           paddingBottom: aspectRatioPc
         },
         className: classNames.join(' '),
+        ...getDataComponentAttribute('BackgroundImage'),
         children: [/*#__PURE__*/_jsx("div", {
           style: {
             backgroundImage: !inView || loading ? '' : `url(${src})`,

package/bpk-component-image/src/BpkImage.js

@@ -20,7 +20,7 @@ import { Component } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
 import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -110,6 +110,7 @@ class BpkImage extends Component {
     return /*#__PURE__*/_jsx("div", {
       style: style,
       className: className,
+      ...getDataComponentAttribute('Image'),
       children: /*#__PURE__*/_jsxs("div", {
         ref: div => {
           this.placeholder = div;