Add destructive variant to <Button>

[MAILPOET-3545]

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;