feat: add loading button + icon - fix #134

src/components/form/button/button.component.tsx

@@ -3,14 +3,19 @@ import * as React from "react";
 // @ts-ignore
 import styles from "./button.module.scss";
 import { cn } from "../../../utils";
-import { BoxComponent, extractBoxProps } from "../../../components";
+import {
+  BoxComponent,
+  extractBoxProps,
+  LoadingIconComponent,
+} from "../../../components";
 import type { BoxProps } from "../../../components";
 
 type Props = {
   variant?: "plain" | "3d";
   color?: "blue" | "yellow" | "grey" | "dark" | "light";
   className?: string;
   fullWidth?: boolean;
+  loading?: boolean;
 } & Partial<BoxProps> &
   React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -22,6 +27,9 @@ export const ButtonComponent: React.FC<Props> = ({
   variant = "plain",
   color = "blue",
   fullWidth,
+  loading = false,
+  disabled = false,
+  children,
   ...props
 }) => {
   const [otherProps, boxProps] = extractBoxProps<Props>(props);
@@ -40,11 +48,25 @@ export const ButtonComponent: React.FC<Props> = ({
             [styles.colorDark]: color === "dark",
             [styles.colorLight]: color === "light",
             [styles.fullWidth]: !!fullWidth,
+            [styles.loading]: loading,
+            [styles.disabled]: disabled,
           },
           className,
         )}
         {...otherProps}
-      />
+        disabled={disabled}
+      >
+        {loading ? (
+          <>
+            <div className={styles.content}>{children}</div>
+            <div className={styles.loadingIcon}>
+              <LoadingIconComponent width={16} />
+            </div>
+          </>
+        ) : (
+          children
+        )}
+      </button>
     </BoxComponent>
   );
 };

src/components/form/button/button.module.scss

@@ -15,6 +15,25 @@
     cursor: pointer;
     user-select: none;
     outline: none;
+    position: relative;
+
+    &.loading,
+    &.disabled {
+      background-color: var(--btn-grey-bg);
+      border-color: var(--btn-grey-bd);
+      color: var(--btn-grey-c);
+      cursor: auto !important;
+
+      .content {
+        opacity: 0;
+      }
+      .loadingIcon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
 
     @include textEllipsis();
 
@@ -44,24 +63,26 @@
       }
     }
 
-    &.colorBlue {
-      @include btn-color("btn-blue");
-    }
+    &:not(&.loading):not(&.disabled) {
+      &.colorBlue {
+        @include btn-color("btn-blue");
+      }
 
-    &.colorYellow {
-      @include btn-color("btn-yellow");
-    }
+      &.colorYellow {
+        @include btn-color("btn-yellow");
+      }
 
-    &.colorGrey {
-      @include btn-color("btn-grey");
-    }
+      &.colorGrey {
+        @include btn-color("btn-grey");
+      }
 
-    &.colorDark {
-      @include btn-color("btn-dark");
-    }
+      &.colorDark {
+        @include btn-color("btn-dark");
+      }
 
-    &.colorLight {
-      @include btn-color("btn-light");
+      &.colorLight {
+        @include btn-color("btn-light");
+      }
     }
   }
 }

src/components/form/button/button.stories.ts

@@ -30,3 +30,17 @@ export const FullWidth = {
     fullWidth: true,
   },
 };
+
+export const Disabled = {
+  args: {
+    children: "Button",
+    disabled: true,
+  },
+};
+
+export const Loading = {
+  args: {
+    children: "Button",
+    loading: true,
+  },
+};

src/components/icons/icons.stories.tsx

@@ -30,6 +30,7 @@ import { KeysIconComponent } from "./keys-icon.component";
 import { BurgerIconComponent } from "./burger-icon.component";
 import { BurgerCrossIconComponent } from "./burger-cross-icon.component";
 import { BurgerArrowIconComponent } from "./burger-arrow-icon.component";
+import { LoadingIconComponent } from "./loading-icon.component";
 
 export default {
   title: "Components/Icons",
@@ -71,3 +72,5 @@ export const LowSignal = () => <LowSignalIconComponent />;
 export const MediumSignal = () => <MediumSignalIconComponent />;
 export const HighSignal = () => <HighSignalIconComponent />;
 export const FullSignal = () => <FullSignalIconComponent />;
+
+export const LoadingIcon = () => <LoadingIconComponent />;

src/components/icons/index.ts

@@ -21,6 +21,7 @@ export * from "./keys-icon.component";
 export * from "./burger-icon.component";
 export * from "./burger-cross-icon.component";
 export * from "./burger-arrow-icon.component";
+export * from "./loading-icon.component";
 
 export * from "./cc";
 export * from "./signal";

src/components/icons/loading-icon.component.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+//@ts-ignore
+import styles from "./loading-icon.module.scss";
+import { cn } from "../../utils";
+
+export const LoadingIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props} className={cn(styles.animateSpin, props.className)}>
+    <circle
+      className={styles.circle}
+      cx="12"
+      cy="12"
+      r="10"
+      stroke={fill}
+      strokeWidth="4"
+      fill="none"
+    ></circle>
+    <path
+      className={styles.move}
+      color={fill}
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </IconComponent>
+);

src/components/icons/loading-icon.module.scss

@@ -0,0 +1,19 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animateSpin {
+  animation: spin 1s linear infinite;
+
+  .circle {
+    opacity: 25%;
+  }
+  .move {
+    opacity: 75%;
+  }
+}