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

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-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-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-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"
@@ -150,12 +151,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 +163,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-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-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-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
 });