From 36ab817858f797c709f2b0ccc3e19767d54d2c2c Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 9 Jul 2021 13:08:15 -0500
Subject: [PATCH] add edit button support to transaction-detail-item (#11481)

---
 .../app/transaction-detail-item/index.scss       | 14 ++++++++++++++
 .../transaction-detail-item.component.js         | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index 7359d694c..a007a2e2d 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -3,6 +3,20 @@
 
   &__row {
     display: flex;
+
+    &--action-row {
+      justify-content: flex-end;
+      align-items: flex-start;
+      margin-bottom: 4px;
+    }
+  }
+
+  &__action-button.button {
+    @include H7;
+
+    width: auto;
+    padding: 0;
+    text-transform: uppercase;
   }
 
   &__title {
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 0e3039987..edbd03b4b 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -7,6 +7,7 @@ import {
   FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
+import Button from '../../ui/button';
 
 export default function TransactionDetailItem({
   detailTitle,
@@ -14,9 +15,22 @@ export default function TransactionDetailItem({
   detailTotal,
   subTitle,
   subText,
+  handleActionClick,
+  actionText,
 }) {
   return (
     <div className="transaction-detail-item">
+      {actionText && handleActionClick && (
+        <div className="transaction-detail-item__row transaction-detail-item__row--action-row">
+          <Button
+            className="transaction-detail-item__action-button"
+            onClick={handleActionClick}
+            type="link"
+          >
+            {actionText}
+          </Button>
+        </div>
+      )}
       <div className="transaction-detail-item__row">
         <Typography
           color={COLORS.BLACK}
@@ -63,6 +77,8 @@ export default function TransactionDetailItem({
 }
 
 TransactionDetailItem.propTypes = {
+  handleActionClick: PropTypes.func,
+  actionText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),