Add isDisabled parameter for Button

[MAILPOET-2771]

assets/css/src/generic/_buttons.scss

@@ -127,8 +127,15 @@
   }
 }
 
+.mailpoet-button-disabled {
+  opacity: .4;
+  pointer-events: none;
+  touch-action: none;
+}
+
 .mailpoet-button-with-spinner {
   pointer-events: none;
+  touch-action: none;
 
   &:after {
     background: rgba($color-secondary, .8) no-repeat center;

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

@@ -122,6 +122,45 @@ export const WithoutIcons = () => (
     </p>
     <br />
 
+    <Heading level={3}>Disabled buttons</Heading>
+    <p>
+      <Button
+        onClick={action('light disabled')}
+        isDisabled
+        variant="light"
+      >
+        Light button
+      </Button>
+      <Button
+        onClick={action('regular disabled')}
+        isDisabled
+      >
+        Regular button
+      </Button>
+      <Button
+        onClick={action('dark disabled')}
+        isDisabled
+        variant="dark"
+      >
+        Dark button
+      </Button>
+      <Button
+        onClick={action('link disabled')}
+        isDisabled
+        variant="link"
+      >
+        Link button
+      </Button>
+      <Button
+        onClick={action('link-dark disabled')}
+        isDisabled
+        variant="link-dark"
+      >
+        Link dark button
+      </Button>
+    </p>
+    <br />
+
     <Heading level={3}>Buttons with spinner</Heading>
     <p>
       <Button

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

@@ -153,6 +153,55 @@ export const WithIcons = () => (
     </p>
     <br />
 
+    <Heading level={3}>Disabled buttons</Heading>
+    <p>
+      <Button
+        onClick={action('only icon disabled')}
+        isDisabled
+        variant="light"
+        iconStart={icon}
+      />
+      <Button
+        onClick={action('icon start disabled')}
+        isDisabled
+        iconStart={icon}
+      >
+        Icon start
+      </Button>
+      <Button
+        onClick={action('icon end disabled')}
+        isDisabled
+        variant="dark"
+        iconEnd={icon}
+      >
+        Icon end
+      </Button>
+      <Button
+        onClick={action('both icons disabled')}
+        isDisabled
+        variant="light"
+        iconStart={icon}
+        iconEnd={icon}
+      >
+        Both icons
+      </Button>
+      <Button
+        onClick={action('only icon link disabled')}
+        isDisabled
+        variant="link"
+        iconStart={icon}
+      />
+      <Button
+        onClick={action('icon start link disabled')}
+        isDisabled
+        variant="link-dark"
+        iconStart={icon}
+      >
+        Link icon
+      </Button>
+    </p>
+    <br />
+
     <Heading level={3}>Buttons with spinner</Heading>
     <p>
       <Button

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

@@ -5,7 +5,8 @@ type Props = {
   children?: React.ReactNode,
   size?: 'small' | 'large',
   variant?: 'light' | 'dark' | 'link' | 'link-dark',
-  withSpinner?: boolean,
+  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,
   iconStart?: JSX.Element,
   iconEnd?: JSX.Element,
@@ -18,6 +19,7 @@ const Button = ({
   size,
   variant,
   withSpinner,
+  isDisabled,
   isFullWidth,
   iconStart,
   iconEnd,
@@ -33,6 +35,7 @@ const Button = ({
         {
           [`mailpoet-button-${size}`]: size,
           [`mailpoet-button-${variant}`]: variant,
+          'mailpoet-button-disabled': isDisabled,
           'mailpoet-button-with-spinner': withSpinner,
           'mailpoet-full-width': isFullWidth,
         }