Merge branch 'master' into X2-6273

xola · Jul 20, 2023 · 3154838 · 3154838
2 parents 480f22b + fbf2cbc
commit 3154838
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.6",
+    "version": "2.1.8",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

diff --git a/src/components/Buttons/Button.jsx b/src/components/Buttons/Button.jsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 
-const colors = {
+export const colors = {
     standard: {
         common: "border-transparent text-white", // Common classes for each style
         primary: "bg-primary hover:bg-primary-darker disabled:bg-primary active:bg-primary",

diff --git a/src/components/Buttons/SubmitButton.jsx b/src/components/Buttons/SubmitButton.jsx
@@ -1,9 +1,10 @@
 import { Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Spinner } from "../Spinner";
-import { Button } from "./Button";
+import { CheckIcon } from "../../icons/CheckIcon";
+import { Button, colors } from "./Button";
 
 const loadingColors = {
     primary: "!bg-primary-light",
@@ -14,37 +15,81 @@ const loadingColors = {
     danger: "!bg-danger-light",
 };
 
-export const SubmitButton = ({ color = "primary", isLoading, className, children, ...rest }) => {
+export const SubmitButton = ({
+    color = "primary",
+    isLoading,
+    isSuccess,
+    disabled = false,
+    className,
+    variant = "standard",
+    children,
+    ...rest
+}) => {
+    const [showSuccess, setShowSuccess] = useState(false);
+
+    useEffect(() => {
+        if (isSuccess && !isLoading) {
+            setShowSuccess(true);
+            const timer = setTimeout(() => setShowSuccess(false), 3000);
+            return () => clearTimeout(timer);
+        }
+
+        if (isLoading && showSuccess) {
+            setShowSuccess(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSuccess, isLoading]);
+
+    const showTransition = isLoading || showSuccess;
+
     return (
         <Button
             color={color}
-            disabled={isLoading}
-            className={clsx(className, "relative", isLoading && loadingColors[color])}
+            disabled={showTransition || disabled}
+            variant={variant}
+            className={clsx(className, "relative", showTransition && loadingColors[color])}
             {...rest}
         >
             <span
                 className={clsx(
                     "absolute inset-0 flex items-center justify-center",
-                    isLoading ? "opacity-100" : "opacity-0",
+                    showTransition ? "opacity-100" : "opacity-0",
                 )}
             >
-                <Transition
-                    appear
-                    as="span"
-                    show={isLoading}
-                    enter="transition-all duration-700"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                >
-                    <Spinner size="current" color="current" className="relative -top-0.25 text-white" />
-                </Transition>
+                {showTransition && (
+                    <Transition
+                        appear
+                        as="span"
+                        show={showTransition}
+                        enter="transition-all duration-700"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                    >
+                        {showSuccess && (
+                            <CheckIcon
+                                size="medium"
+                                color="current"
+                                className={clsx("relative -top-0.25 text-white", {
+                                    "text-black": variant === "outline",
+                                })}
+                            />
+                        )}
+                        {isLoading && !showSuccess && (
+                            <Spinner size="current" color="current" className="relative -top-0.25 text-white" />
+                        )}
+                    </Transition>
+                )}
             </span>
-            <span className={clsx(isLoading ? "flex-shrink flex-grow opacity-0" : "opacity-100")}>{children}</span>
+            <span className={clsx(showTransition ? "flex-shrink flex-grow opacity-0" : "opacity-100")}>{children}</span>
         </Button>
     );
 };
 
 SubmitButton.propTypes = {
     ...Button.propTypes,
     isLoading: PropTypes.bool,
+    isSuccess: PropTypes.bool,
+    variant: PropTypes.oneOf(Object.keys(colors)),
+    // eslint-disable-next-line react/boolean-prop-naming
+    disabled: PropTypes.bool,
 };
diff --git a/src/stories/Forms/SubmitButton.stories.js b/src/stories/Forms/SubmitButton.stories.js
@@ -35,14 +35,24 @@ const SubmitButtonStories = {
 
 export const Default = ({ isLoading, ...rest }) => {
     const [showLoading, setShowLoading] = useState(isLoading);
+    const [showSuccess, setShowSuccess] = useState(false);
+
+    const handleClick = () => {
+        setShowLoading(!showLoading);
+        setTimeout(() => {
+            setShowSuccess(true);
+            setShowLoading(false);
+        }, 2000);
+    };
+
     return (
         <div className="space-y-4">
             <div className="space-x-4">
-                <SubmitButton isLoading={showLoading} {...rest} onClick={() => setShowLoading(!showLoading)}>
+                <SubmitButton isLoading={showLoading} isSuccess={showSuccess} {...rest} onClick={handleClick}>
                     Submit
                 </SubmitButton>
 
-                <SubmitButton isLoading={showLoading} {...rest} onClick={() => setShowLoading(!showLoading)}>
+                <SubmitButton isLoading={showLoading} isSuccess={showSuccess} {...rest} onClick={handleClick}>
                     Button with really long text
                 </SubmitButton>
             </div>
@@ -51,35 +61,40 @@ export const Default = ({ isLoading, ...rest }) => {
                     {...rest}
                     color="success"
                     isLoading={showLoading}
-                    onClick={() => setShowLoading(!showLoading)}
+                    isSuccess={showSuccess}
+                    onClick={handleClick}
                 >
                     Submit
                 </SubmitButton>
 
                 <SubmitButton
                     {...rest}
                     color="success"
+                    isSuccess={showSuccess}
                     isLoading={showLoading}
-                    onClick={() => setShowLoading(!showLoading)}
+                    onClick={handleClick}
                 >
                     Button with really long text
                 </SubmitButton>
             </div>
             <div className="space-x-4">
                 <SubmitButton
                     {...rest}
+                    isSuccess={showSuccess}
                     color="danger"
                     isLoading={showLoading}
-                    onClick={() => setShowLoading(!showLoading)}
+                    onClick={handleClick}
                 >
                     Submit
                 </SubmitButton>
 
                 <SubmitButton
                     {...rest}
+                    isSuccess={showSuccess}
                     color="danger"
                     isLoading={showLoading}
-                    onClick={() => setShowLoading(!showLoading)}
+                    onClick={handleClick}
+
                 >
                     Button with really long text
                 </SubmitButton>