Add destructive variant to <Button>

[MAILPOET-3545]

assets/css/src/generic/_buttons.scss

@@ -98,6 +98,25 @@
   }
 }
 
+.mailpoet-button-destructive {
+  background: #fff;
+  border-color: #fff;
+  color: $color-destructive;
+
+  &:hover {
+    background: #fff;
+    border-color: $color-destructive-hover;
+    color: $color-destructive-hover;
+  }
+
+  &:focus {
+    background: #fff;
+    border-color: #fff;
+    box-shadow: 0 0 0 1.5px $color-destructive-hover;
+    color: $color-destructive-hover;
+  }
+}
+
 .mailpoet-button-with-spinner {
   pointer-events: none;
   touch-action: none;
@@ -115,7 +134,8 @@
   }
 
   &.mailpoet-button-secondary:after,
-  &.mailpoet-button-tertiary:after {
+  &.mailpoet-button-tertiary:after,
+  &.mailpoet-button-destructive:after {
     background-color: rgba(#fff, .8);
   }
 }
@@ -131,4 +151,8 @@
     border-color: #eaeaea;
     color: #828282;
   }
+
+  &.mailpoet-button-destructive {
+    color: rgba($color-destructive, .4);
+  }
 }

assets/css/src/settings/_colors.scss

@@ -24,6 +24,8 @@ $color-tertiary-hover: darken($color-tertiary, 10%);
 $color-tertiary-light: #e5e9f8;
 $color-tertiary-light-hover: darken($color-tertiary-light, 10%);
 $color-tertiary-light-background: rgba($color-tertiary-light, .3);
+$color-destructive: #b52727;
+$color-destructive-hover: #a02222;
 
 // Typography colors
 $color-text: $color-tertiary;

assets/js/src/common/button/_stories/button.tsx

@@ -32,6 +32,13 @@ export const WithoutIcons = () => (
       >
         Tertiary button
       </Button>
+      <Button
+        onClick={action('destructive small')}
+        dimension="small"
+        variant="destructive"
+      >
+        Destructive button
+      </Button>
     </p>
     <br />
 
@@ -54,6 +61,12 @@ export const WithoutIcons = () => (
       >
         Tertiary button
       </Button>
+      <Button
+        onClick={action('destructive regular')}
+        variant="destructive"
+      >
+        Destructive button
+      </Button>
     </p>
     <br />
 
@@ -74,6 +87,12 @@ export const WithoutIcons = () => (
       >
         Tertiary button
       </Button>
+      <Button
+        isDisabled
+        variant="destructive"
+      >
+        Destructive button
+      </Button>
     </p>
     <br />
 
@@ -94,6 +113,12 @@ export const WithoutIcons = () => (
       >
         Tertiary button
       </Button>
+      <Button
+        withSpinner
+        variant="destructive"
+      >
+        Destructive button
+      </Button>
     </p>
     <br />
 
@@ -119,6 +144,13 @@ export const WithoutIcons = () => (
       >
         Tertiary button
       </Button>
+      <Button
+        onClick={action('destructive full-width')}
+        isFullWidth
+        variant="destructive"
+      >
+        Destructive button
+      </Button>
     </p>
     <br />
   </>

assets/js/src/common/button/_stories/button_icons.tsx

@@ -41,6 +41,14 @@ export const WithIcons = () => (
         variant="tertiary"
         iconStart={icon}
       />
+      <Button
+        onClick={action('icon end destructive small')}
+        dimension="small"
+        variant="destructive"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
     </p>
     <br />
 
@@ -70,6 +78,13 @@ export const WithIcons = () => (
         variant="tertiary"
         iconStart={icon}
       />
+      <Button
+        onClick={action('icon end destructive regular')}
+        variant="destructive"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
     </p>
     <br />
 
@@ -99,6 +114,13 @@ export const WithIcons = () => (
         variant="tertiary"
         iconStart={icon}
       />
+      <Button
+        isDisabled
+        variant="destructive"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
     </p>
     <br />
 
@@ -128,6 +150,13 @@ export const WithIcons = () => (
         variant="tertiary"
         iconStart={icon}
       />
+      <Button
+        withSpinner
+        variant="destructive"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
     </p>
     <br />
 
@@ -161,6 +190,14 @@ export const WithIcons = () => (
         variant="tertiary"
         iconStart={icon}
       />
+      <Button
+        onClick={action('icon end destructive full-width')}
+        isFullWidth
+        variant="destructive"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
     </p>
     <br />
   </>

assets/js/src/common/button/button.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   dimension?: 'small';
-  variant?: 'secondary' | 'tertiary';
+  variant?: 'secondary' | 'tertiary' | 'destructive';
   withSpinner?: boolean; // also disables href and onClick (via pointer-events in CSS)
   isDisabled?: boolean; // also disables href and onClick (via pointer-events in CSS)
   isFullWidth?: boolean;