X2-6577 | Improvements for Tutorials - Drawer, DotProgress, Modal Pos…

…itioning (#250)

index.d.ts

@@ -23,6 +23,7 @@ export {
     BarGraphIcon,
     BaseInput,
     BellIcon,
+    BookIcon,
     BookmarkIcon,
     BoxIcon,
     Breadcrumb,
@@ -89,6 +90,7 @@ export {
     DisabledIcon,
     DisputeIcon,
     Dot,
+    DotProgress,
     DotCircleIcon,
     DoubleCheckIcon,
     DownArrowIcon,
@@ -183,6 +185,7 @@ export {
     PiggyBankIcon,
     PinIcon,
     PipeIcon,
+    PlayIcon,
     PlusIcon,
     PolicyIcon,
     Popover,
@@ -242,6 +245,9 @@ export {
     Tooltip,
     TransferArrowIcon,
     TrashIcon,
+    TutorialsBadgeIcon,
+    TutorialsButtonIcon,
+    TutorialsSquareIcon,
     UnlinkIcon,
     useId,
     useIsClient,

package.json

@@ -15,18 +15,17 @@
     "types": "index.d.ts",
     "scripts": {
         "prepare": "node scripts/prepare && vite build",
-        "start": "node scripts/prepare && start-storybook -p 6006 -s public",
-        "dev": "node scripts/prepare && start-storybook -p 6006 -s public --no-manager-cache",
-        "storybook": "node scripts/prepare && start-storybook -p 6006 -s public",
-        "build": "node scripts/prepare && vite build && cp index.d.ts build",
-        "watch": "npm run build -- --watch",
+        "start": "npm run storybook -s public --no-open",
+        "dev": "npm run storybook -s public --no-manager-cache --no-open",
+        "storybook": "npm run prepare && start-storybook -p 6006 -s public --no-open",
+        "build": "npm run prepare && vite build",
         "clean": "rm -rf node_modules/.vite",
-        "build:storybook": "node scripts/prepare && build-storybook -s public",
-        "lint": "xola-lint --ignore src/stories src",
-        "lint:fix": "xola-lint --ignore src/stories src --fix",
-        "lint:report": "xola-lint --ignore src/stories src --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
+        "build:storybook": "npm run prepare && build-storybook -s public",
+        "lint": "xola-lint src --ignore src/stories",
+        "lint:fix": "xola-lint src --fix --ignore src/stories",
+        "lint:report": "xola-lint src --ignore src/stories --reporter=json src > eslint_report.json",
         "format": "prettier --write src",
-        "test": "xola-lint && jest",
+        "test": "jest",
         "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {

src/components/Dot.jsx → src/components/Dot/Dot.jsx

@@ -11,10 +11,16 @@ const colors = {
     caution: "bg-caution",
 };
 
-export const Dot = ({ color = "primary", className, ...rest }) => {
+const sizes = {
+    small: "h-1 w-1",
+    medium: "h-1.5 w-1.5",
+    large: "h-2 w-2",
+};
+
+export const Dot = ({ color = "primary", size = "small", className, ...rest }) => {
     return (
         <span
-            className={clsx("ui-dot", "inline-block h-1 w-1 rounded-full text-white", colors[color], className)}
+            className={clsx("ui-dot", "inline-block rounded-full text-white", colors[color], sizes[size], className)}
             {...rest}
         />
     );

src/components/Dot/DotProgress.jsx

@@ -0,0 +1,25 @@
+import { range } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { Dot } from "./Dot";
+
+export const DotProgress = ({ current, total }) => {
+    if (total <= 1) {
+        return null;
+    }
+
+    return (
+        <div className="w-full space-x-2 text-center">
+            {range(0, total).map((index) => {
+                const currentValue = current <= 0 ? 0 : current >= total ? current - 1 : current;
+                const color = index === currentValue ? "primary" : "secondary";
+                return <Dot key={index} color={color} size="medium" />;
+            })}
+        </div>
+    );
+};
+
+DotProgress.propTypes = {
+    total: PropTypes.number.isRequired,
+    current: PropTypes.number.isRequired,
+};

src/components/Drawer.jsx

@@ -5,7 +5,23 @@ import React, { Fragment } from "react";
 import { CloseIcon } from "../icons/CloseIcon";
 import { Button } from "./Buttons/Button";
 
-export const Drawer = ({ isOpen = false, title, content, onClose, classNames = {}, position = "right" }) => {
+const sizes = {
+    small: "w-72",
+    medium: "w-85",
+    large: "w-110",
+    xl: "w-200",
+    "2xl": "w-screen md:max-w-screen-md 2xl:max-w-screen-lg", // This was the old size
+};
+
+export const Drawer = ({
+    isOpen = false,
+    title,
+    size = "medium",
+    content,
+    onClose,
+    classNames = {},
+    position = "right",
+}) => {
     return (
         <Transition.Root show={isOpen} as={Fragment}>
             <Dialog
@@ -42,16 +58,17 @@ 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 md:max-w-screen-md 2xl:max-w-screen-lg">
+                            <div className="flex">
                                 {position === "right" ? <CloseButton onClose={onClose} /> : null}
 
                                 <div
                                     className={clsx(
                                         "flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
+                                        sizes[size],
                                         classNames.children,
                                     )}
                                 >
-                                    <div className="flex items-start justify-between">
+                                    <div className="w-full">
                                         {/* eslint-disable-next-line react/jsx-max-depth */}
                                         <Dialog.Title>{title}</Dialog.Title>
                                     </div>

src/components/Forms/BaseInput.jsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import React from "react";
 import { isEmpty, isString } from "lodash";
-import { Dot } from "../Dot";
+import { Dot } from "../Dot/Dot";
 
 const sizes = {
     small: "px-3 py-1.5 text-sm leading-sm", // 30px
@@ -24,8 +24,8 @@ export const BaseInput = ({ as: Tag, size = "medium", isError, className, isRequ
                     "border border-transparent hover:border-black hover:bg-gray-lighter focus:text-black active:text-black disabled:bg-gray-lighter",
                     sizes[size],
                     isError
-                        ? "border-danger focus:border-danger focus:ring-0 focus:ring-danger"
-                        : "border-gray-light focus:border-primary focus:ring-0 focus:ring-primary",
+                        ? "!focus:border-danger !border-danger focus:ring-0 focus:ring-danger"
+                        : "!border-gray-light focus:border-primary focus:ring-0 focus:ring-primary",
                     className,
                 )}
                 value={value}

src/components/ImageUpload.jsx

@@ -1,18 +1,20 @@
-import React, { useRef, useState } from "react";
-import PropTypes from "prop-types";
 import clsx from "clsx";
-import { Button, ImageIcon, Logo, Spinner, TrashIcon } from "..";
+import PropTypes from "prop-types";
+import React, { useRef, useState } from "react";
+import { Button, ImageIcon, Logo, SubmitButton, TrashIcon } from "..";
 
 export const ImageUpload = ({
     src,
     size = "large",
-    onChange,
-    onDelete,
-    onError,
     isLoading = false,
     maxSize = 5,
     hasDelete = true,
     requirements = null,
+    caption = null,
+    csvAcceptFormats = "image/png,image/jpeg",
+    onChange,
+    onDelete,
+    onError,
     ...props
 }) => {
     const inputReference = useRef();
@@ -39,20 +41,28 @@ export const ImageUpload = ({
         onDelete();
     };
 
+    const hasRequirements = typeof requirements === "string" ? requirements?.trim().length > 0 : !!requirements;
+    const hasCaption = caption ? caption.trim().length > 0 : false;
+
     return (
-        <div className="flex items-center space-x-8 rounded bg-gray-lighter p-4">
+        <div className={clsx("flex items-center rounded bg-gray-lighter p-4", hasDelete ? "space-x-2" : "space-x-3")}>
             <div>
                 {src ? (
                     <Logo src={src} size={size} />
                 ) : (
-                    <div className={clsx(Logo.sizes[size], "flex items-center justify-center")}>
+                    <div
+                        className={clsx(
+                            Logo.sizes[size],
+                            "flex items-center justify-center rounded border border-gray-light",
+                        )}
+                    >
                         <ImageIcon size="large" className="text-gray" />
                     </div>
                 )}
             </div>
 
             <div className="flex flex-col space-y-2">
-                <div className="space-x-1">
+                <div className="space-x-2">
                     {hasDelete ? (
                         <>
                             <Button
@@ -64,15 +74,14 @@ export const ImageUpload = ({
                             >
                                 Delete
                             </Button>
-                            <Button disabled={isLoading} onClick={handleUploadClick}>
-                                Upload New Picture
-                            </Button>
-                            {isLoading && <Spinner />}
+                            <SubmitButton disabled={isLoading} isLoading={isLoading} onClick={handleUploadClick}>
+                                {hasCaption ? caption.trim() : "Upload New Photo"}
+                            </SubmitButton>
                         </>
                     ) : (
-                        <Button disabled={isLoading} onClick={handleUploadClick}>
-                            {src ? "Replace Photo" : "Upload New Photo"}
-                        </Button>
+                        <SubmitButton disabled={isLoading} isLoading={isLoading} onClick={handleUploadClick}>
+                            {hasCaption ? caption.trim() : src ? "Replace Photo" : "Upload New Photo"}
+                        </SubmitButton>
                     )}
                 </div>
                 <input
@@ -81,12 +90,14 @@ export const ImageUpload = ({
                     className="hidden"
                     type="file"
                     multiple={false}
-                    accept="image/png,image/jpeg"
+                    accept={csvAcceptFormats}
                     onChange={handleChange}
                     {...props}
                 />
                 <div className="text-xs text-gray-darker">
-                    {requirements ?? (
+                    {hasRequirements ? (
+                        requirements
+                    ) : (
                         <div>
                             Check that the image is in PNG or JPG format
                             {maxSize ? ` and does not exceed ${maxSize}MB` : ""}
@@ -101,11 +112,13 @@ export const ImageUpload = ({
 ImageUpload.propTypes = {
     src: PropTypes.string,
     size: PropTypes.oneOf(["small", "medium", "large"]),
-    onChange: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    onError: PropTypes.func.isRequired,
     isLoading: PropTypes.bool,
     maxSize: PropTypes.number,
     hasDelete: PropTypes.bool,
-    requirements: PropTypes.oneOf([PropTypes.string, PropTypes.node]),
+    caption: PropTypes.string,
+    requirements: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    csvAcceptFormats: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onError: PropTypes.func.isRequired,
 };