add checkbox attributes

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- The option to place data attributes in the `Checkbox` component.
+
 ## [9.146.13] - 2024-08-20
 
 ## [9.146.12] - 2024-08-20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/styleguide",
-  "version": "9.146.13",
+  "version": "9.146.14",
   "scripts": {
     "lint": "eslint react --ext js,jsx,ts,tsx",
     "test": "node config/test.js",

react/components/Checkbox/index.js

@@ -41,8 +41,16 @@ class Checkbox extends PureComponent {
       value,
       partial,
       forwardedRef,
+      ...remainingProps
     } = this.props
 
+    const dataAttributes = Object.keys(remainingProps)
+      .filter(key => key.startsWith('data-'))
+      .reduce((obj, key) => {
+        obj[key] = remainingProps[key]
+        return obj
+      }, {})
+
     return (
       <div
         className={classNames(
@@ -115,6 +123,7 @@ class Checkbox extends PureComponent {
             onChange={this.handleChange}
             type="checkbox"
             value={value}
+            {...dataAttributes}
             tabIndex={0}
           />
         </div>
@@ -162,6 +171,14 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   /** Partial state */
   partial: PropTypes.bool,
+
+  /** (Input spec attributes) */
+  initialQuery: PropTypes.string,
+  initialMap: PropTypes.string,
+  fullText: PropTypes.string,
+  facetKey: PropTypes.string,
+  facetValue: PropTypes.string,
+  isClicked: PropTypes.string,
 }
 
 export default withForwardedRef(Checkbox)