Better naming for button with spinner

[MAILPOET-2771]

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,
         }
       )