@skyscanner/backpack-web 41.9.0 → 41.10.0

package/bpk-component-info-banner/src/BpkInfoBanner.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkInfoBannerInner from "./BpkInfoBannerInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkInfoBanner = ({
@@ -29,6 +30,7 @@ const BpkInfoBanner = ({
   animateOnLeave: animateOnLeave,
   show: show,
   icon: icon,
+  ...getDataComponentAttribute('InfoBanner'),
   ...rest
 });
 export default BpkInfoBanner;

package/bpk-component-info-banner/src/BpkInfoBannerDismissable.js

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

package/bpk-component-info-banner/src/BpkInfoBannerExpandable.js

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

package/bpk-component-input/src/BpkInput.js

@@ -19,7 +19,7 @@
 import { Component } from 'react';
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ClearIcon from "../../bpk-component-icon/sm/close-circle";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
 import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -107,6 +107,7 @@ class BpkInput extends Component {
       "aria-invalid": isInvalid,
       value: value,
       name: name,
+      ...getDataComponentAttribute('Input'),
       ...rest
     });
 

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -19,7 +19,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 import InfoIcon from "../../bpk-component-icon/sm/information-circle";
 import BpkPopover from "../../bpk-component-popover/src/BpkPopover";
 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 "./BpkInsetBanner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -42,6 +42,7 @@ const BpkInsetBanner = ({
   const popoverMarginStart = callToAction?.popoverMarginStart || 'auto';
   const popoverMarginEnd = callToAction?.popoverMarginEnd || 'auto';
   return /*#__PURE__*/_jsxs("div", {
+    ...getDataComponentAttribute('InsetBanner'),
     children: [/*#__PURE__*/_jsxs("div", {
       "aria-label": accessibilityLabel,
       className: classNames,

package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js

@@ -23,7 +23,7 @@ import ViewIcon from "../../../bpk-component-icon/lg/view";
 import InfoIcon from "../../../bpk-component-icon/sm/information-circle";
 import BpkImage 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 { VARIANT } from "./common-types";
 import STYLES from "./BpkInsetBannerSponsored.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,6 +43,7 @@ const BpkInsetBannerSponsored = ({
   const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, image && 'bpk-inset-banner--with-image');
   const [sheetOpen, setSheetOpen] = useState(false);
   return /*#__PURE__*/_jsxs("div", {
+    ...getDataComponentAttribute('InsetBannerSponsored'),
     children: [/*#__PURE__*/_jsxs("div", {
       "aria-label": accessibilityLabel,
       className: classNames,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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