analytica-frontend-lib 1.3.3 → 1.3.5

package/dist/StudentLessonProgressModal/index.d.ts

@@ -1,4 +1,4 @@
 export { StudentLessonProgressModal, default, } from './StudentLessonProgressModal';
-export type { StudentLessonProgressModalProps, StudentLessonProgressData, StudentLessonProgressLabels, LessonProgressItem, LessonProgressStatus, } from './types';
+export type { StudentLessonProgressModalProps, StudentLessonProgressData, StudentLessonProgressLabels, TopicProgressItem, SubtopicProgressItem, ContentProgressItem, LessonProgressStatus, } from './types';
 export { DEFAULT_LESSON_PROGRESS_LABELS } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/StudentLessonProgressModal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StudentLessonProgressModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,OAAO,GACR,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,+BAA+B,EAC/B,yBAAyB,EACzB,2BAA2B,EAC3B,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StudentLessonProgressModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,OAAO,GACR,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,+BAA+B,EAC/B,yBAAyB,EACzB,2BAA2B,EAC3B,iBAAiB,EACjB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC"}

package/dist/StudentLessonProgressModal/index.js

@@ -2770,16 +2770,106 @@ var DEFAULT_LESSON_PROGRESS_LABELS = {
 
 // src/components/StudentLessonProgressModal/StudentLessonProgressModal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var LessonAccordionItem = ({
+var ContentAccordionItem = ({
   item,
-  noDataMessage,
-  level = 0
+  noDataMessage
+}) => {
+  const hasNoData = item.progress === 0 && !item.isCompleted;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between p-4 border-t border-border-50", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "sm", className: "text-text-950", children: item.content.name }),
+    hasNoData ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "xs", className: "text-text-500", children: noDataMessage }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      Text_default,
+      {
+        size: "xs",
+        weight: "medium",
+        className: "text-text-500 whitespace-nowrap",
+        children: [
+          Math.round(item.progress),
+          "%"
+        ]
+      }
+    )
+  ] });
+};
+var SubtopicAccordionItem = ({
+  item,
+  noDataMessage
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react5.useState)(false);
+  const hasChildren = item.contents && item.contents.length > 0;
+  const hasNoData = item.status === "no_data";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => hasChildren && setIsExpanded(!isExpanded),
+        disabled: !hasChildren,
+        className: cn(
+          "w-full flex items-center justify-between gap-3 p-4 text-left transition-colors duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-inset rounded-xl",
+          "border-t border-border-50",
+          hasChildren && "cursor-pointer hover:bg-background-50",
+          !hasChildren && "cursor-default"
+        ),
+        "aria-expanded": hasChildren ? isExpanded : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "md", weight: "medium", className: "text-text-950", children: item.subtopic.name }),
+            !hasNoData && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              Text_default,
+              {
+                size: "xs",
+                weight: "medium",
+                className: "text-text-500 whitespace-nowrap",
+                children: [
+                  Math.round(item.progress),
+                  "%"
+                ]
+              }
+            )
+          ] }),
+          hasChildren && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_phosphor_react4.CaretRight,
+            {
+              size: 20,
+              className: cn(
+                "transition-transform duration-200 flex-shrink-0 text-text-700",
+                isExpanded ? "rotate-90" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        "data-testid": `accordion-content-subtopic-${item.subtopic.id}`,
+        "data-expanded": isExpanded,
+        className: cn(
+          "transition-all duration-300 ease-in-out overflow-hidden",
+          isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pl-4", children: item.contents.map((content) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ContentAccordionItem,
+          {
+            item: content,
+            noDataMessage
+          },
+          content.content.id
+        )) })
+      }
+    )
+  ] });
+};
+var TopicAccordionItem = ({
+  item,
+  noDataMessage
 }) => {
   const [isExpanded, setIsExpanded] = (0, import_react5.useState)(false);
-  const hasChildren = item.children && item.children.length > 0;
-  const hasNoData = item.status === "no_data" || item.progress === null;
-  const progressValue = item.progress ?? 0;
-  const paddingLeft = level > 0 ? `${level * 16}px` : void 0;
+  const hasChildren = item.subtopics && item.subtopics.length > 0;
+  const hasNoData = item.status === "no_data";
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
@@ -2791,19 +2881,17 @@ var LessonAccordionItem = ({
           "w-full flex items-center justify-between gap-3 p-4 text-left transition-colors duration-200",
           "focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-inset rounded-xl",
           hasChildren && "cursor-pointer hover:bg-background-50",
-          !hasChildren && "cursor-default",
-          level > 0 && "border-t border-border-50"
+          !hasChildren && "cursor-default"
         ),
-        style: { paddingLeft },
         "aria-expanded": hasChildren ? isExpanded : void 0,
         children: [
-          level === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950", children: item.topic }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950", children: item.topic.name }),
             hasNoData ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "xs", className: "text-text-500", children: noDataMessage }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 ProgressBar_default,
                 {
-                  value: progressValue,
+                  value: item.progress,
                   variant: "green",
                   size: "medium"
                 }
@@ -2815,30 +2903,13 @@ var LessonAccordionItem = ({
                   weight: "medium",
                   className: "text-text-950 whitespace-nowrap",
                   children: [
-                    Math.round(progressValue),
-                    "%"
-                  ]
-                }
-              )
-            ] })
-          ] }) : (
-            /* Level 1+: Subtopic/lesson with only percentage */
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between flex-1 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "md", weight: "medium", className: "text-text-950", children: item.topic }),
-              !hasNoData && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                Text_default,
-                {
-                  size: "xs",
-                  weight: "medium",
-                  className: "text-text-500 whitespace-nowrap",
-                  children: [
-                    Math.round(progressValue),
+                    Math.round(item.progress),
                     "%"
                   ]
                 }
               )
             ] })
-          ),
+          ] }),
           hasChildren && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             import_phosphor_react4.CaretRight,
             {
@@ -2855,20 +2926,19 @@ var LessonAccordionItem = ({
     hasChildren && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
-        "data-testid": `accordion-content-${item.id}`,
+        "data-testid": `accordion-content-${item.topic.id}`,
         "data-expanded": isExpanded,
         className: cn(
           "transition-all duration-300 ease-in-out overflow-hidden",
           isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pl-4", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          LessonAccordionItem,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pl-4", children: item.subtopics.map((subtopic) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          SubtopicAccordionItem,
           {
-            item: child,
-            noDataMessage,
-            level: level + 1
+            item: subtopic,
+            noDataMessage
           },
-          child.id
+          subtopic.subtopic.id
         )) })
       }
     )
@@ -2958,20 +3028,20 @@ var ProgressContent = ({
   ] }),
   data.lessonProgress.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4 pt-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950", children: labels.lessonProgressTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-2", children: data.lessonProgress.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-2", children: data.lessonProgress.map((topic) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
-        "data-testid": `lesson-item-${item.id}`,
+        "data-testid": `lesson-item-${topic.topic.id}`,
         className: "bg-background rounded-xl border border-border-50",
         children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          LessonAccordionItem,
+          TopicAccordionItem,
           {
-            item,
+            item: topic,
             noDataMessage: labels.noDataMessage
           }
         )
       },
-      item.id
+      topic.topic.id
     )) })
   ] })
 ] });