@campxdev/react-blueprint 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -8,6 +8,7 @@ export interface TutorialProps {
   steps: Step[];
   children?: ReactNode;
   tourName: string;
+  showProgress?: boolean;
   iconPosition?: "left" | "right";
 }
 
@@ -16,6 +17,7 @@ export const Tutorial = ({
   children,
   tourName,
   iconPosition = "right",
+  showProgress = true,
 }: TutorialProps) => {
   const [run, setRun] = useState(false);
   const userTours = localStorage.getItem("userTours") || "[]";
@@ -33,7 +35,7 @@ export const Tutorial = ({
 
   const handleJoyrideCallback = (data: CallBackProps) => {
     console.log(data);
-    const { action, status, lifecycle, type } = data;
+    const { action, status, lifecycle, type, size } = data;
     const reqData = {
       tourName: tourName,
       skipped: false,
@@ -46,11 +48,15 @@ export const Tutorial = ({
       lifecycle === "complete" &&
       type === "tour:end"
     ) {
+      console.log("Tour is skipped");
       reqData.skipped = true;
+    } else if (action === ACTIONS.CLOSE) {
+      setRun(false);
     } else if (action === ACTIONS.RESET) {
+      console.log("Tour is reset");
       reqData.completed = true;
     }
-
+    console.log(reqData);
     if (reqData.skipped || reqData.completed) {
       setRun(false); // Stop the tour
       completeTour(reqData).catch((err) => {
@@ -97,22 +103,25 @@ export const Tutorial = ({
         continuous
         run={run}
         showSkipButton
-        showProgress
+        showProgress={showProgress}
+        disableCloseOnEsc
+        disableOverlayClose
         spotlightPadding={5}
         locale={{
-          last: "Finish",
+          last: "Got it",
           next: "Next",
           skip: "Skip",
           back: "Previous",
         }}
         styles={{
           buttonNext: {
-            backgroundColor: "#D27D2D",
-            color: "white",
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.secondary.light,
+            border: "none",
             height: "28px",
             width: "100px",
             padding: "0px",
-            fontFamily: "Roboto, sans-serif",
+            fontFamily: "Heebo, sans-serif",
           },
           buttonBack: {
             backgroundColor: "transparent",
@@ -124,8 +133,16 @@ export const Tutorial = ({
             marginLeft: "5px",
             padding: "0px",
             border: "1px solid black",
-            fontFamily: "Roboto, sans-serif",
+            fontFamily: "Heebo, sans-serif",
+          },
+          tooltip: {
+            padding: "10px",
           },
+          tooltipContainer: {
+            display: "flex",
+            backgroundColor: theme.palette.surface.paperBackground,
+          },
+
           options: {},
         }}
       />

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -50,7 +50,14 @@ export const AppHeader = ({
           id="jiraIssueCollector"
           className="reportAnIssue"
         >
-          <Typography variant="button">Report an Issue</Typography>
+          <Typography
+            variant="button"
+            sx={{
+              fontWeight: "bold",
+            }}
+          >
+            Report an Issue
+          </Typography>
         </Button>
         <UserBox
           fullName={userFullName}

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
+import { Typography } from "../../components/DataDisplay/Typography/Typography";
+import { useTheme } from "@mui/material";
 
 export default {
   title: "Feedback/Tutorial",
@@ -42,15 +44,28 @@ export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
   ),
   args: {
     tourName: "Active Batches",
+    showProgress: false,
     steps: [
       {
         target: ".tutorial-target",
-        content: "This is my first step",
-      },
-      {
-        target: ".next-target",
-        content: "This is the next step",
+        content: (
+          <>
+            <div>
+              <Typography variant="body2">
+                Click the button above 👆 to submit your feedback.
+              </Typography>
+              <Typography variant="caption" color="highlight">
+                Check the environment box to ensure detailed reporting.
+              </Typography>
+            </div>
+          </>
+        ),
+        disableBeacon: true,
       },
+      // {
+      //   target: ".next-target",
+      //   content: "This is the next step",
+      // },
     ],
   },
 };