Update Button with loading state

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/Button.jsx

@@ -12,7 +12,8 @@ import {
   ACTIVE_AND_INACTIVE_STATUS,
   TRANSPARENT
 } from './constants'
-// ${inactive ? styles.inactive : styles.active}
+import SpinnerCircular from './loaders/SpinnerCircular'
+
 function Button ({
   textClass = '',
   paddingClass = '',
@@ -28,6 +29,7 @@ function Button ({
   platformaticIcon = null,
   platformaticIconAfter = null,
   selected = false,
+  loading = false,
   ...rest
 }) {
   let buttonClassName = textClass
@@ -39,7 +41,7 @@ function Button ({
   } else {
     contentClassName += `${styles['button-' + size]} `
   }
-  if (disabled) {
+  if (disabled || loading) {
     tmpBorderedClassName = commonStyles[`bordered--${color}-30`]
     buttonClassName += ` ${styles.disabled}`
   } else {
@@ -109,6 +111,7 @@ function Button ({
   return (
     <button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
       <div className={`${contentClassName} ${backgroundClassName}`}>
+        {loading ? <SpinnerCircular className={styles.spinner} size={30} thickness={2} color={color} /> : null}
         {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
         <span className={styles.label}>{label}</span>
         {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}

src/components/Button.module.css

@@ -145,4 +145,7 @@
 }
 .cursorDefault {
   @apply cursor-default;
-}
+}
+.spinner {
+  @apply z-50 relative top-[20px] left-[20px] transform -translate-x-1/2 -translate-y-1/2
+}

src/stories/Button.stories.jsx

@@ -670,3 +670,9 @@ export const FigmaTemplate = DesignSystem.bind({})
 FigmaTemplate.args = {
   label: 'Sample label'
 }
+
+export const LoadingButton = Template.bind({})
+LoadingButton.args = {
+  label: 'Loading Button',
+  loading: true
+}