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

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

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

@@ -18,7 +18,7 @@
 
 import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -203,6 +203,7 @@ class BpkSplitInput extends Component {
   render() {
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-split-input'),
+      ...getDataComponentAttribute('SplitInput'),
       children: this.renderInputs()
     });
   }

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -18,7 +18,7 @@
 
 import { useState } from 'react';
 import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwapButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -43,6 +43,7 @@ const BpkSwapButton = props => {
   };
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-swap-button'),
+    ...getDataComponentAttribute('SwapButton'),
     children: /*#__PURE__*/_jsx("button", {
       type: "button",
       className: getClassName('bpk-swap-button__button', `bpk-swap-button__button--${swapButtonStyle}`),

package/bpk-component-switch/src/BpkSwitch.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 "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,6 +29,7 @@ const BpkSwitch = ({
   const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
+    ...getDataComponentAttribute('Switch'),
     children: [/*#__PURE__*/_jsx("input", {
       type: "checkbox",
       className: getClassName('bpk-switch__checkbox'),

package/bpk-component-textarea/src/BpkTextarea.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 "./BpkTextarea.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -31,6 +31,7 @@ const BpkTextarea = ({
   const isInvalid = valid === false;
   return /*#__PURE__*/_jsx("textarea", {
     className: getClassName('bpk-textarea', isInvalid && 'bpk-textarea--invalid', large && 'bpk-textarea--large', className),
+    ...getDataComponentAttribute('Textarea'),
     "aria-invalid": isInvalid,
     ...rest
   });

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -21,6 +21,7 @@ import BpkLabel from "../../bpk-component-label";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -81,6 +82,7 @@ class BpkThemeToggle extends Component {
       ...rest
     } = this.props;
     return /*#__PURE__*/_jsxs("div", {
+      ...getDataComponentAttribute('ThemeToggle'),
       ...rest,
       children: [/*#__PURE__*/_jsx(BpkVisuallyHidden, {
         children: /*#__PURE__*/_jsx(BpkLabel, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.9.0",
+  "version": "41.10.0-beta-v1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.30.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",