From ca0c773c8c7f9254d85a31e7e5af3adcd6b4b905 Mon Sep 17 00:00:00 2001
From: Nils-Helge Garli Hegvik <nilsga@gmail.com>
Date: Tue, 29 Jan 2019 22:17:53 +0100
Subject: [PATCH] feat(chessboard): add data attributes for board and squares

Add data attributes for board and squares for easier selection and styling. Useful for adding
certain styles or annotations to squares based on moves, for instance from an analysis engine.
---
 src/Chessboard/Board.js  |  1 +
 src/Chessboard/Row.js    | 10 +++++++---
 src/Chessboard/Square.js |  1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Chessboard/Board.js b/src/Chessboard/Board.js
index e2a2685..269fa55 100644
--- 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
index e64de91..33aaaef 100644
--- a/src/Chessboard/Row.js
+++ b/src/Chessboard/Row.js
@@ -8,11 +8,12 @@ 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';
@@ -20,7 +21,10 @@ class Row extends Component {
     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
index 14ddc09..f3b9bb9 100644
--- 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)}