Merge branch 'upgrade-forms' of github.com:rushi/ui-kit; branch 'mast…

…er' of github.com:xola/ui-kit into upgrade-forms * 'upgrade-forms' of github.com:rushi/ui-kit: * 'master' of github.com:xola/ui-kit: 2.1.13 X2-6630: The date does not automatically change when you switch the booking from public to private (different schedules) if you add more than 1 demographic (xola#252) 2.1.12 X2-5999 Show "--" if line item is per outing demographic (xola#251) 2.1.11 X2-6097 Remove Guest workflow enhancements (xola#244) 2.1.10 X2-6496 fix(datepicker-popover): resolves issue of date resetting to initial value when clicking outside of popover (xola#247) 2.1.9 X2-6098: Pull up roster from Purchase item (xola#248) 2.1.8 X2-5712 add break down for long word in breakdown item (xola#240) 2.1.7 X2-1192: submit button success animation (xola#230)
rushi · Aug 27, 2023 · 3ea2b70 · 3ea2b70
2 parents 273c045 + 67adf36
commit 3ea2b70
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 36 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.13",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { createContext, useContext } from "react";
+import { isNumber } from "lodash";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -37,7 +38,7 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
 
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
-            <td colSpan={2} className="text-left leading-none">
+            <td colSpan={2} className="break-all text-left leading-none">
                 <span className="mr-0.5">{methodIcon}</span>
                 <span>{children}</span>
                 <span className="ml-1 text-sm">
@@ -49,9 +50,13 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
             </td>
 
             <td className="w-[1%] whitespace-nowrap pl-4 text-right">
-                <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
-                    {value}
-                </Currency>
+                {isNumber(value) ? (
+                    <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                        {value}
+                    </Currency>
+                ) : (
+                    <span>{value}</span>
+                )}
             </td>
         </tr>
     );

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/components/DatePicker/DatePickerPopover.jsx b/src/components/DatePicker/DatePickerPopover.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { cloneElement, forwardRef, useState } from "react";
+import React, { cloneElement, forwardRef, useEffect, useState } from "react";
 import { CalendarIcon, DownArrowIcon } from "../..";
 import { formatDate } from "../../helpers/date";
 import { Input } from "../Forms/Input";
@@ -42,11 +42,13 @@ export const DatePickerPopover = ({
     };
 
     const handleClickOutside = () => {
-        // Revert back to the original value because the user didn't apply the changes
-        onChange(originalValue);
         toggleVisibility();
     };
 
+    useEffect(() => {
+        setOriginalValue(value);
+    }, [value]);
+
     return (
         <Popover
             visible={isVisible}

diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
@@ -42,7 +42,7 @@ export const Drawer = ({ isOpen = false, title, content, onClose, classNames = {
                             leaveFrom="translate-x-0"
                             leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
                         >
-                            <div className="flex w-screen max-w-xl md:max-w-screen-md">
+                            <div className="flex w-screen md:max-w-screen-md 2xl:max-w-screen-lg">
                                 {position === "right" ? <CloseButton onClose={onClose} /> : null}
 
                                 <div

diff --git a/src/components/Forms/InlineValuePopover.jsx b/src/components/Forms/InlineValuePopover.jsx
@@ -35,7 +35,7 @@ export const InlineValuePopover = ({
                 )}
                 onClick={handleClick}
             >
-                <span className="border-b border-b-black font-bold text-black">
+                <span className={clsx("border-b border-b-black font-bold text-black", classNames?.textField)}>
                     <ValuePopoverText value={text} error={error} />
                 </span>
                 {showArrow && <DownArrowIcon size="medium" />}

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>