From 9926c1781f98a98d5bc57cecb1aaab11759a4f71 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Wed, 15 Nov 2023 13:26:52 +0100
Subject: [PATCH] feat(button): destructive secondary variant

---
 components/button/src/button/button.js        |  7 ++---
 .../button/src/button/button.stories.js       |  6 ++++
 components/button/src/button/button.styles.js | 28 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index 1e5d8ef641..df8c405463 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -102,7 +102,7 @@ Button.propTypes = {
     /**
      * Indicates that the button makes potentially dangerous
      * deletions or data changes.
-     * Mutually exclusive with `primary` and `secondary` props
+     * Mutually exclusive with `primary` prop
      */
     destructive: sharedPropTypes.buttonVariantPropType,
     /** Applies a greyed-out appearance and makes the button non-interactive  */
@@ -122,14 +122,13 @@ Button.propTypes = {
     name: PropTypes.string,
     /**
      * Applies 'primary' button appearance.
-     * Mutually exclusive with `destructive` and `secondary` props
+     * Mutually exclusive with `destructive` prop
      */
     primary: sharedPropTypes.buttonVariantPropType,
     /**
      * Applies 'secondary' button appearance.
-     * Mutually exclusive with `primary` and `destructive` props
      */
-    secondary: sharedPropTypes.buttonVariantPropType,
+    secondary: PropTypes.bool,
     /** Makes the button small. Mutually exclusive with `large` prop */
     small: sharedPropTypes.sizePropType,
     /** Tab index for focusing the button with a keyboard */
diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js
index 704bc83ced..aa95218293 100644
--- a/components/button/src/button/button.stories.js
+++ b/components/button/src/button/button.stories.js
@@ -108,6 +108,12 @@ Destructive.parameters = {
         },
     },
 }
+export const DestructiveSecondary = Template.bind({})
+DestructiveSecondary.args = {
+    destructive: true,
+    secondary: true,
+    name: 'Destructive secondary button',
+}
 
 export const Disabled = (args) => (
     <>
diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js
index d17f6bb954..643a20cdbb 100644
--- a/components/button/src/button/button.styles.js
+++ b/components/button/src/button/button.styles.js
@@ -187,6 +187,34 @@ export default css`
         fill: ${colors.white};
     }
 
+    .destructive.secondary {
+        border-color: rgba(74, 87, 104, 0.25);
+        background: transparent;
+        color: ${colors.red700};
+        fill: ${colors.red700};
+    }
+
+    .destructive.secondary:hover {
+        border-color: ${colors.red600};
+        background: ${colors.red050};
+        color: ${colors.red800};
+        fill: ${colors.red800};
+    }
+
+    .destructive.secondary:active,
+    .destructive.secondary:active:focus {
+        background: ${colors.red100};
+        border-color: ${colors.red700};
+        box-shadow: none;
+    }
+
+    .destructive.secondary:disabled {
+        background: transparent;
+        border-color: rgba(74, 87, 104, 0.25);
+        color: rgba(183, 28, 28, 0.6);
+        fill: rgba(183, 28, 28, 0.6);
+    }
+
     .icon-only {
         padding: 0 0 0 5px;
     }