Better naming for button with spinner

[MAILPOET-2771]

assets/css/src/generic/_buttons.scss

@@ -75,7 +75,7 @@
     color: $color-secondary;
   }
 
-  &.mailpoet-button-loading:after {
+  &.mailpoet-button-with-spinner:after {
     background-color: rgba($color-secondary-light, .8);
   }
 }
@@ -88,7 +88,7 @@
     background: $color-tertiary-hover;
   }
 
-  &.mailpoet-button-loading:after {
+  &.mailpoet-button-with-spinner:after {
     background-color: rgba($color-tertiary, .8);
   }
 }
@@ -105,7 +105,7 @@
     text-decoration: none;
   }
 
-  &.mailpoet-button-loading:after {
+  &.mailpoet-button-with-spinner:after {
     background-color: rgba(#fff, .8);
   }
 }
@@ -122,12 +122,12 @@
     text-decoration: none;
   }
 
-  &.mailpoet-button-loading:after {
+  &.mailpoet-button-with-spinner:after {
     background-color: rgba(#fff, .8);
   }
 }
 
-.mailpoet-button-loading{
+.mailpoet-button-with-spinner {
   pointer-events: none;
 
   &:after {

assets/css/src/mailpoet-plugin.scss

@@ -23,7 +23,7 @@
 // Generic
 
 @import 'generic/buttons';
-@import 'generic/buttons-loaders';
+@import 'generic/buttons-spinners';
 @import 'generic/helpers';
 @import 'generic/typography';
 

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

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

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

@@ -153,32 +153,32 @@ export const WithIcons = () => (
     </p>
     <br />
 
-    <Heading level={3}>Loading buttons</Heading>
+    <Heading level={3}>Buttons with spinner</Heading>
     <p>
       <Button
-        onClick={action('only icon loading')}
-        isLoading
+        onClick={action('only icon spinner')}
+        withSpinner
         variant="light"
         iconStart={icon}
       />
       <Button
-        onClick={action('icon start loading')}
-        isLoading
+        onClick={action('icon start spinner')}
+        withSpinner
         iconStart={icon}
       >
         Icon start
       </Button>
       <Button
-        onClick={action('icon end loading')}
-        isLoading
+        onClick={action('icon end spinner')}
+        withSpinner
         variant="dark"
         iconEnd={icon}
       >
         Icon end
       </Button>
       <Button
-        onClick={action('both icons loading')}
-        isLoading
+        onClick={action('both icons spinner')}
+        withSpinner
         variant="light"
         iconStart={icon}
         iconEnd={icon}
@@ -186,14 +186,14 @@ export const WithIcons = () => (
         Both icons
       </Button>
       <Button
-        onClick={action('only icon link loading')}
-        isLoading
+        onClick={action('only icon link spinner')}
+        withSpinner
         variant="link"
         iconStart={icon}
       />
       <Button
-        onClick={action('icon start link loading')}
-        isLoading
+        onClick={action('icon start link spinner')}
+        withSpinner
         variant="link-dark"
         iconStart={icon}
       >

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

@@ -5,7 +5,7 @@ type Props = {
   children?: React.ReactNode,
   size?: 'small' | 'large',
   variant?: 'light' | 'dark' | 'link' | 'link-dark',
-  isLoading?: boolean,
+  withSpinner?: boolean,
   isFullWidth?: boolean,
   iconStart?: JSX.Element,
   iconEnd?: JSX.Element,
@@ -17,7 +17,7 @@ const Button = ({
   children,
   size,
   variant,
-  isLoading,
+  withSpinner,
   isFullWidth,
   iconStart,
   iconEnd,
@@ -33,7 +33,7 @@ const Button = ({
         {
           [`mailpoet-button-${size}`]: size,
           [`mailpoet-button-${variant}`]: variant,
-          'mailpoet-button-loading': isLoading,
+          'mailpoet-button-with-spinner': withSpinner,
           'mailpoet-full-width': isFullWidth,
         }
       )