From da190036df865f2cc2c4ed0d06d35ff759258361 Mon Sep 17 00:00:00 2001
From: Benjamin Dehli <superelg@gmail.com>
Date: Mon, 4 Dec 2023 15:20:25 +0100
Subject: [PATCH] Add support for data-transaction-name attribute

---
 src/stories/Accordion.jsx            | 5 +++--
 src/stories/CheckBoxInput.jsx        | 6 ++++--
 src/stories/CheckBoxListItem.jsx     | 4 +++-
 src/stories/DragAndDropFileInput.jsx | 4 ++++
 src/stories/InputField.jsx           | 4 +++-
 src/stories/RadioButtonInput.jsx     | 6 ++++--
 src/stories/RadioButtonListItem.jsx  | 4 +++-
 src/stories/Select.jsx               | 2 ++
 8 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/stories/Accordion.jsx b/src/stories/Accordion.jsx
index c3cbf880..5b414fe0 100644
--- a/src/stories/Accordion.jsx
+++ b/src/stories/Accordion.jsx
@@ -23,7 +23,7 @@ const Accordion = (props) => {
 
     const renderPanel = () => {
         return (
-            <button className={style.panel} onClick={handleToggleExpand} aria-expanded={expanded ? "true" : "false"}>
+            <button {...props.buttonProps} className={style.panel} onClick={handleToggleExpand} aria-expanded={expanded ? "true" : "false"}>
                 <span className={style.panelText}>{props.title}</span>
                 <span className={`${style.panelChevron} ${expanded ? style.expanded : ""}`}></span>
             </button>
@@ -62,7 +62,8 @@ Accordion.propTypes = {
         "lightLime"
     ]),
     expanded: PropTypes.bool,
-    onToggleExpand: PropTypes.func
+    onToggleExpand: PropTypes.func,
+    buttonProps: PropTypes.object
 };
 
 Accordion.defaultProps = {
diff --git a/src/stories/CheckBoxInput.jsx b/src/stories/CheckBoxInput.jsx
index 4e9df064..7fbf9196 100644
--- a/src/stories/CheckBoxInput.jsx
+++ b/src/stories/CheckBoxInput.jsx
@@ -39,7 +39,8 @@ const CheckBoxInput = (props) => {
         tabIndex: props.tabIndex || null,
         "aria-controls": props["aria-controls"],
         "aria-invalid": props.hasErrors ? "true" : null,
-        "aria-describedby": props["aria-describedby"]
+        "aria-describedby": props["aria-describedby"],
+        "data-transaction-name": props["data-transaction-name"]
     };
 
     return (
@@ -73,7 +74,8 @@ CheckBoxInput.propTypes = {
     theme: PropTypes.object,
     checkmarkCharacter: PropTypes.string,
     "aria-controls": PropTypes.string,
-    "aria-describedby": PropTypes.string
+    "aria-describedby": PropTypes.string,
+    "data-transaction-name": PropTypes.string
 };
 CheckBoxInput.defaultProps = {
     checked: false,
diff --git a/src/stories/CheckBoxListItem.jsx b/src/stories/CheckBoxListItem.jsx
index 868a780d..b07d52d0 100644
--- a/src/stories/CheckBoxListItem.jsx
+++ b/src/stories/CheckBoxListItem.jsx
@@ -31,6 +31,7 @@ const CheckBoxListItem = (props) => {
         hasErrors: props.hasErrors,
         "aria-controls": props["aria-controls"],
         "aria-describedby": props["aria-describedby"],
+        "data-transaction-name": props["data-transaction-name"],
         id: props.id,
         theme: props.theme,
         checkmarkCharacter: props.checkmarkCharacter
@@ -56,7 +57,8 @@ CheckBoxListItem.propTypes = {
     hasErrors: PropTypes.bool,
     checkmarkCharacter: PropTypes.string,
     "aria-controls": PropTypes.string,
-    "aria-describedby": PropTypes.string
+    "aria-describedby": PropTypes.string,
+    "data-transaction-name": PropTypes.string
 };
 CheckBoxListItem.defaultProps = {
     checked: false,
diff --git a/src/stories/DragAndDropFileInput.jsx b/src/stories/DragAndDropFileInput.jsx
index 704a0b2f..18eb4d22 100644
--- a/src/stories/DragAndDropFileInput.jsx
+++ b/src/stories/DragAndDropFileInput.jsx
@@ -46,6 +46,7 @@ const DragAndDropFileInput = (props) => {
                 ? props["aria-describedby"]
                 : null,
         "aria-invalid": props.hasErrors ? "true" : null,
+        "data-transaction-name": props["data-transaction-name-for-input"],
         required: props.required
     };
 
@@ -147,6 +148,7 @@ const DragAndDropFileInput = (props) => {
                                 onClick={() => handleAddButtonOnClick()}
                                 content={buttonContent}
                                 hasErrors={props.hasErrors}
+                                data-transaction-name={props["data-transaction-name-for-button"]}
                             />
                         </React.Fragment>
                     ) : null}
@@ -180,6 +182,8 @@ DragAndDropFileInput.propTypes = {
         PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
     ]),
     required: PropTypes.bool,
+    "data-transaction-name-for-button": PropTypes.string,
+    "data-transaction-name-for-input": PropTypes.string,
     theme: PropTypes.object
 };
 
diff --git a/src/stories/InputField.jsx b/src/stories/InputField.jsx
index 8e465a9a..bc0533e9 100644
--- a/src/stories/InputField.jsx
+++ b/src/stories/InputField.jsx
@@ -69,6 +69,7 @@ const InputField = (props) => {
                     : null,
             "aria-invalid": props.hasErrors ? "true" : null,
             "aria-autocomplete": props["aria-autocomplete"] || null,
+            "data-transaction-name": props["data-transaction-name"] || null,
             style: styleRules
         };
     };
@@ -140,7 +141,8 @@ InputField.propTypes = {
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
     ]),
-    theme: PropTypes.object
+    theme: PropTypes.object,
+    "data-transaction-name": PropTypes.string
 };
 
 InputField.defaultProps = {
diff --git a/src/stories/RadioButtonInput.jsx b/src/stories/RadioButtonInput.jsx
index b36e4a79..9070e184 100644
--- a/src/stories/RadioButtonInput.jsx
+++ b/src/stories/RadioButtonInput.jsx
@@ -38,7 +38,8 @@ const RadioButtonInput = (props) => {
         tabIndex: props.tabIndex || null,
         "aria-controls": props["aria-controls"],
         "aria-invalid": props.hasErrors ? "true" : null,
-        "aria-describedby": props["aria-describedby"]
+        "aria-describedby": props["aria-describedby"],
+        "data-transaction-name": props["data-transaction-name"]
     };
 
     return (
@@ -70,7 +71,8 @@ RadioButtonInput.propTypes = {
     theme: PropTypes.object,
     inputValue: PropTypes.string.isRequired,
     "aria-controls": PropTypes.string,
-    "aria-describedby": PropTypes.string
+    "aria-describedby": PropTypes.string,
+    "data-transaction-name": PropTypes.string
 };
 
 RadioButtonInput.defaultProps = {
diff --git a/src/stories/RadioButtonListItem.jsx b/src/stories/RadioButtonListItem.jsx
index 3f43e538..2e5da8ef 100644
--- a/src/stories/RadioButtonListItem.jsx
+++ b/src/stories/RadioButtonListItem.jsx
@@ -31,6 +31,7 @@ const RadioButtonListItem = (props) => {
         hasErrors: props.hasErrors,
         "aria-controls": props["aria-controls"],
         "aria-describedby": props["aria-describedby"],
+        "data-transaction-name": props["data-transaction-name"],
         id: props.id,
         name: props.name,
         theme: props.theme
@@ -56,7 +57,8 @@ RadioButtonListItem.propTypes = {
     theme: PropTypes.object,
     hasErrors: PropTypes.bool,
     "aria-controls": PropTypes.string,
-    "aria-describedby": PropTypes.string
+    "aria-describedby": PropTypes.string,
+    "data-transaction-name": PropTypes.string
 };
 
 RadioButtonListItem.defaultProps = {
diff --git a/src/stories/Select.jsx b/src/stories/Select.jsx
index 9eb678e2..b9fa28d4 100644
--- a/src/stories/Select.jsx
+++ b/src/stories/Select.jsx
@@ -193,6 +193,7 @@ const Select = (props) => {
                     ? props["aria-describedby"]
                     : null,
             "aria-invalid": props.hasErrors ? "true" : null,
+            "data-transaction-name": props["data-transaction-name"],
             style: styleRules
         };
         return (
@@ -273,6 +274,7 @@ Select.propTypes = {
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
     ]),
+    "data-transaction-name": PropTypes.string,
     theme: PropTypes.object
 };
 Select.defaultProps = {