Add support for data-transaction-name attribute

Arkitektum · Dec 4, 2023 · da19003 · da19003
1 parent 2d64dc7
commit da19003
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {