Merge pull request #37 from nilsga/add-data-attributes

feat(chessboard): add data attributes for board and squares
willb335 · Jan 30, 2019 · 098376f · 098376f
2 parents 2fff88a + ca0c773
commit 098376f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/Chessboard/Board.js b/src/Chessboard/Board.js
@@ -41,6 +41,7 @@ class Board extends Component {
               width={context.width}
               boardStyle={context.boardStyle}
               orientation={context.orientation}
+              boardId={context.id}
             >
               {({ square, squareColor, col, row, alpha }) => {
                 return (

diff --git a/src/Chessboard/Row.js b/src/Chessboard/Row.js
@@ -8,19 +8,23 @@ class Row extends Component {
     width: PropTypes.number,
     orientation: PropTypes.string,
     boardStyle: PropTypes.object,
-    children: PropTypes.func
+    children: PropTypes.func,
+    boardId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
 
   render() {
-    const { width, boardStyle, orientation, children } = this.props;
+    const { width, boardStyle, orientation, children, boardId } = this.props;
     let alpha = COLUMNS;
     let row = 8;
     let squareColor = 'white';
 
     if (orientation === 'black') row = 1;
 
     return (
-      <div style={{ ...boardStyles(width), ...boardStyle }}>
+      <div
+        style={{ ...boardStyles(width), ...boardStyle }}
+        data-boardid={boardId}
+      >
         {[...Array(8)].map((_, r) => {
           row = orientation === 'black' ? row + 1 : row - 1;
 

diff --git a/src/Chessboard/Square.js b/src/Chessboard/Square.js
@@ -77,6 +77,7 @@ class Square extends Component {
     return connectDropTarget(
       <div
         data-testid={`${squareColor}-square`}
+        data-squareid={square}
         ref={ref => (this[square] = ref)}
         style={defaultSquareStyle(this.props)}
         onMouseOver={() => onMouseOverSquare(square)}