catchup-library-web 1.0.15 → 1.0.16

package/dist/index.d.mts

@@ -145,6 +145,7 @@ interface IActivityPreviewByDataProps {
     showType: boolean;
     lockedType: string;
     typeOptionList: any[];
+    showSolution: boolean;
 }
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
@@ -167,7 +168,7 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
-declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, showSolution, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
 
 interface IDividerLineProps {
     opacity: string;

package/dist/index.d.ts

@@ -145,6 +145,7 @@ interface IActivityPreviewByDataProps {
     showType: boolean;
     lockedType: string;
     typeOptionList: any[];
+    showSolution: boolean;
 }
 
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
@@ -167,7 +168,7 @@ declare const TrueFalseActivityContent: ({ answer, data, canAnswerQuestion, chan
 
 declare const ActivitySolutionContent: ({ activityTemplateType, data, }: IActivitySolutionProps) => react_jsx_runtime.JSX.Element | undefined;
 
-declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
+declare const ActivityPreviewByData: ({ data, showType, lockedType, typeOptionList, showSolution, }: IActivityPreviewByDataProps) => react_jsx_runtime.JSX.Element | undefined;
 
 interface IDividerLineProps {
     opacity: string;

package/dist/index.js

@@ -5924,7 +5924,8 @@ var ActivityPreviewByData = ({
   data,
   showType,
   lockedType,
-  typeOptionList
+  typeOptionList,
+  showSolution
 }) => {
   const [selectedType, setSelectedType] = (0, import_react24.useState)(null);
   (0, import_react24.useEffect)(() => {
@@ -6062,7 +6063,14 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : null : null
+    ) : null : null,
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) : null
   ] });
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
@@ -6140,14 +6148,17 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: option.title
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+      ]
     },
     index
   )) });

package/dist/index.mjs

@@ -5750,7 +5750,8 @@ var ActivityPreviewByData = ({
   data,
   showType,
   lockedType,
-  typeOptionList
+  typeOptionList,
+  showSolution
 }) => {
   const [selectedType, setSelectedType] = useState19(null);
   useEffect11(() => {
@@ -5888,7 +5889,14 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : null : null
+    ) : null : null,
+    selectedType && showSolution ? /* @__PURE__ */ jsx41(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) : null
   ] });
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
@@ -5956,7 +5964,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -5966,14 +5974,17 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx44("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx44("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs34(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: option.title
+      children: [
+        /* @__PURE__ */ jsx44("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx44("p", { className: "text-md", children: option.subTitle }) : null
+      ]
     },
     index
   )) });
@@ -5981,12 +5992,12 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ jsx45("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx45("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-x-2", children: [
     /* @__PURE__ */ jsx45(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx45("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -5994,9 +6005,9 @@ var ActivityTemplateLabel = ({
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx46("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx46("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx46(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx46("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -6018,9 +6029,9 @@ var GradeLabel = ({ title, font }) => {
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
     /* @__PURE__ */ jsx49(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -6028,9 +6039,9 @@ var OutcomeLabel = ({ title, font }) => {
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx50, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx50(
       BaseImage_default,
       {
@@ -6045,9 +6056,9 @@ var PersonalLabel = ({ title, icon, font }) => {
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx51(
       BaseImage_default,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/ActivityPreviewByData.tsx

@@ -11,12 +11,14 @@ import OrderingActivityContent from "./OrderingActivityContent";
 import SelectionBox from "../boxes/SelectionBox";
 import TrueFalseActivityContent from "./TrueFalseActivityContent";
 import { IActivityPreviewByDataProps } from "../../properties/ActivityProperties";
+import ActivitySolutionContent from "./solution-content/ActivitySolutionContent";
 
 const ActivityPreviewByData = ({
   data,
   showType,
   lockedType,
   typeOptionList,
+  showSolution,
 }: IActivityPreviewByDataProps) => {
   const [selectedType, setSelectedType] = useState(null);
 
@@ -142,6 +144,12 @@ const ActivityPreviewByData = ({
           />
         ) : null
       ) : null}
+      {selectedType && showSolution ? (
+        <ActivitySolutionContent
+          activityTemplateType={selectedType}
+          data={data}
+        />
+      ) : null}
     </>
   );
 };

package/src/components/tabs/SelectionTab.tsx

@@ -10,7 +10,7 @@ const SelectionTab = ({
   borderColor,
 }: ISelectionTabProps) => {
   return (
-    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-lg text-center">
+    <div className="flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center">
       {optionList.map((option: any, index: number) => (
         <div
           key={index}
@@ -35,7 +35,10 @@ const SelectionTab = ({
             handleSelectOnClick(option.id);
           }}
         >
-          {option.title}
+          <p className="text-lg">{option.title}</p>
+          {option.subTitle ? (
+            <p className="text-md">{option.subTitle}</p>
+          ) : null}
         </div>
       ))}
     </div>

package/src/properties/ActivityProperties.ts

@@ -208,4 +208,5 @@ export interface IActivityPreviewByDataProps {
   showType: boolean;
   lockedType: string;
   typeOptionList: any[];
+  showSolution: boolean;
 }