@nualang/nualang-ui-components 0.1.1136 → 0.1.1137

package/dist/Chat/Chat.js

@@ -93,7 +93,8 @@ function Chat({
   handleContinue,
   currentMessage,
   roleplayImage,
-  siteLanguage
+  siteLanguage,
+  answerCounts
 }) {
   const {
     classes
@@ -153,7 +154,8 @@ function Chat({
     handleContinue: handleContinue,
     currentMessage: currentMessage,
     roleplayImage: roleplayImage,
-    siteLanguage: siteLanguage
+    siteLanguage: siteLanguage,
+    answerCounts: answerCounts
   }), !hideBottomBar && !viewAttemptMode && /*#__PURE__*/_react.default.createElement(_BottomBar.default, {
     t: t,
     inputName: inputName,

package/dist/Chat/Messages/Message/Message.js

@@ -81,7 +81,7 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
       color: isMyMessage ? isHighlighted ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.grey[400] : isHighlighted ? theme.palette.primary.main : theme.palette.grey[600]
     },
     "&:hover": {
-      backgroundColor: isButton ? isMyMessage ? theme.palette.primary.dark : theme.palette.grey[100] : null,
+      backgroundColor: isButton ? isMyMessage ? theme.palette.primary.dark : theme.palette.grey[300] : null,
       borderColor: isButton ? theme.palette.primary.dark : null
     },
     "@media print": {
@@ -93,6 +93,42 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
       boxShadow: "none"
     }
   },
+  bubbleEnlarge: {
+    display: "block",
+    backgroundColor: isMyMessage ? theme.palette.primary.main : theme.palette.common.white,
+    color: isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.main,
+    padding: theme.spacing(1, 2),
+    borderRadius: theme.spacing(2),
+    boxShadow: theme.shadows[2],
+    minWidth: 150,
+    borderTopLeftRadius: 0,
+    borderStyle: "solid",
+    borderColor: theme.palette.primary.main,
+    borderWidth: "thin",
+    transition: isButton ? theme.transitions.create("background-color") : null,
+    "& img": {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    },
+    "& svg": {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+      color: isMyMessage ? isHighlighted ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.grey[400] : isHighlighted ? theme.palette.primary.main : theme.palette.grey[600]
+    },
+    "&:hover": {
+      boxShadow: isButton ? isMyMessage ? theme.palette.mode === "dark" ? `0px 4px 8px ${theme.palette.primary.main}` : `0px 4px 8px ${theme.palette.primary.dark}` : theme.palette.mode === "dark" ? `0px 4px 8px ${theme.palette.grey[700]}` : `0px 4px 8px ${theme.palette.grey[300]}` : null,
+      transform: "scale(1.1)",
+      transition: "transform 0.3s ease-in-out"
+    },
+    "@media print": {
+      "-webkit-print-color-adjust": "exact",
+      "-moz-print-color-adjust": "exact",
+      " -ms-print-color-adjust": "exact",
+      "print-color-adjust": "exact",
+      "page-break-inside": "avoid",
+      boxShadow: "none"
+    }
+  },
   additionalInfo: {
     display: "flex",
     marginTop: theme.spacing(1),
@@ -347,7 +383,7 @@ function Message({
     fontSize: "large"
   })), /*#__PURE__*/_react.default.createElement("div", null, isButton && /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
     focusRipple: true,
-    className: classes.bubble,
+    className: classes.bubbleEnlarge,
     id: messageContainerId,
     "aria-label": `Option ${accessibilityIndex}`,
     onClick: () => onClickButton(text)

package/dist/Chat/Messages/Messages.js

@@ -56,6 +56,7 @@ function Messages({
   currentMessage,
   roleplayImage,
   siteLanguage,
+  answerCounts,
   ...otherProps
 }) {
   const {
@@ -78,7 +79,7 @@ function Messages({
         }
       }, 0);
     }
-  }, [disableScroll, messages.length, currentMessage]);
+  }, [disableScroll, messages.length, currentMessage, isTimeUp]);
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "messages",
     className: classes.root,
@@ -160,7 +161,9 @@ function Messages({
       setIsAnswered: setIsAnswered,
       isAnswered: isAnswered,
       handleContinue: handleContinue,
-      isCurrentMessage: isCurrentMessage
+      isCurrentMessage: isCurrentMessage,
+      answerCounts: answerCounts,
+      messages: messages
     }, m, otherProps)), !m?.question && !isLivePlayer && /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
       languageTag: languageTag,
       t: t,

package/dist/Chat/Messages/Question/Question.js

@@ -73,13 +73,18 @@ function Answers({
   setCurrentAnswer,
   setIsAnswered,
   isAnswered,
-  handleContinue
+  handleContinue,
+  answerCounts,
+  messages,
+  messageIndex
 }) {
   const {
     classes
   } = useStyles();
-  const [selected, setSelected] = _react.default.useState();
-  const [answeredCorrectly, setAnsweredCorrectly] = _react.default.useState(handleEditQuestion ? true : false);
+  const [selected, setSelected] = (0, _react.useState)();
+  const [answeredCorrectly, setAnsweredCorrectly] = (0, _react.useState)(handleEditQuestion ? true : false);
+  const [totalVotes, setTotalVotes] = (0, _react.useState)(0);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
   (0, _react.useEffect)(() => {
     if (isTimeUp && isLivePlayer) {
       handleContinue();
@@ -103,10 +108,62 @@ function Answers({
       }
     }
   };
-  return showResults ? /*#__PURE__*/_react.default.createElement(_material.RadioGroup, {
+  (0, _react.useEffect)(() => {
+    if (showResults) {
+      setTotalVotes(Object.values(answerCounts).reduce((sum, count) => sum + count, 0));
+      setIsLoading(false);
+    }
+  }, [answerCounts, showResults]);
+  if (isLoading && showResults) {
+    return null;
+  }
+  return showResults ? messageIndex === messages.length - 1 ? /*#__PURE__*/_react.default.createElement(_material.RadioGroup, {
+    className: classes.list
+  }, answers.map((value, i) => {
+    const votes = answerCounts[value?.text] || 0;
+    const percent = totalVotes > 0 ? votes / totalVotes * 100 : 0;
+    return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+      key: i,
+      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.text, /*#__PURE__*/_react.default.createElement(_material.Box, {
+        sx: {
+          mt: 0.5,
+          mb: 0.5
+        }
+      }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, {
+        variant: "determinate",
+        value: percent,
+        sx: {
+          height: 6,
+          width: 240
+        }
+      }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        variant: "caption",
+        sx: {
+          mt: 0.5,
+          mb: 0.5
+        }
+      }, t(votes + ` vote${votes === 1 ? "" : "s"}`)))),
+      value: value.text,
+      control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
+        color: "default",
+        icon: value.correct ? /*#__PURE__*/_react.default.createElement(_Check.default, {
+          className: classes.correct
+        }) : /*#__PURE__*/_react.default.createElement(_Cancel.default, {
+          className: classes.incorrect
+        }),
+        checkedIcon: value.correct ? /*#__PURE__*/_react.default.createElement(_Check.default, {
+          className: classes.correct
+        }) : /*#__PURE__*/_react.default.createElement(_Cancel.default, {
+          className: classes.incorrect
+        }),
+        checked: true
+      })
+    });
+  })) : /*#__PURE__*/_react.default.createElement(_material.RadioGroup, {
     className: classes.list
   }, answers.map((value, i) => {
     return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+      key: i,
       label: value.text,
       value: value.text,
       control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
@@ -147,6 +204,7 @@ function Answers({
     className: classes.list
   }, answers.map((value, i) => {
     return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+      key: i,
       value: value.text,
       control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
         color: "default",
@@ -212,7 +270,9 @@ function Question({
   setCurrentAnswer,
   setIsAnswered,
   isAnswered,
-  handleContinue
+  handleContinue,
+  answerCounts,
+  messages
 }) {
   const {
     classes
@@ -297,7 +357,12 @@ function Question({
     onClick: handlePause,
     startIcon: isPaused ? /*#__PURE__*/_react.default.createElement(_PlayArrow.default, null) : /*#__PURE__*/_react.default.createElement(_Pause.default, null),
     size: "small"
-  }, isPaused ? t("resume") : t("pause")))), isLiveGame && !isLivePlayer && isTimeUp && /*#__PURE__*/_react.default.createElement(Answers, {
+  }, isPaused ? t("resume") : t("pause")))), isLiveGame && !isLivePlayer && isTimeUp && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  }, /*#__PURE__*/_react.default.createElement(Answers, {
     t: t,
     question: question,
     answers: answers,
@@ -305,8 +370,11 @@ function Question({
     handleIncorrectQuestionAnswer: handleIncorrectQuestionAnswer,
     handleEditQuestion: handleEditQuestion,
     answerAttempts: answerAttempts,
-    showResults: true
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    showResults: true,
+    answerCounts: answerCounts,
+    messages: messages,
+    messageIndex: messageIndex
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.actions
   }, moveScriptItem && /*#__PURE__*/_react.default.createElement(_material.ButtonGroup, {
     color: "inherit",

package/dist/Chat/Messages/Question/Question.stories.js

@@ -9,16 +9,69 @@ var _Question = _interopRequireDefault(require("./Question"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Template = args => /*#__PURE__*/_react.default.createElement(_Question.default, args);
 const props = exports.props = {
-  question: "Question ?",
+  answerCounts: {
+    "answer 1": 0,
+    "answer 2": 7,
+    "answer 3": 1
+  },
+  isLiveGame: true,
+  messageIndex: 1,
+  messages: [{
+    text: "This is a question",
+    question: "What is the answer to the Question?",
+    answers: [{
+      text: "answer 1",
+      correct: false,
+      percent: 30,
+      votes: 0
+    }, {
+      text: "answer 2",
+      correct: true,
+      percent: 70,
+      votes: 7
+    }, {
+      text: "answer 3",
+      correct: false,
+      percent: 0,
+      votes: 1
+    }]
+  }, {
+    text: "This is a question",
+    question: "What is the answer to the Question?",
+    answers: [{
+      text: "answer 1",
+      correct: false,
+      percent: 30,
+      votes: 0
+    }, {
+      text: "answer 2",
+      correct: true,
+      percent: 70,
+      votes: 7
+    }, {
+      text: "answer 3",
+      correct: false,
+      percent: 0,
+      votes: 1
+    }]
+  }],
+  isTimeUp: true,
+  question: "What is the answer to the Question?",
   answers: [{
     text: "answer 1",
-    correct: false
+    correct: false,
+    percent: 33,
+    votes: 3
   }, {
     text: "answer 2",
-    correct: true
+    correct: true,
+    percent: 66,
+    votes: 6
   }, {
     text: "answer 3",
-    correct: false
+    correct: false,
+    percent: 0,
+    votes: 0
   }]
 };
 const story = {

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -506,7 +506,8 @@ function Topic({
       value: completion.percentage
     }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
       ml: 1,
-      fontSize: 14
+      fontSize: 14,
+      minWidth: 35
     }, completion && completion.percentage ? completion.percentage.toFixed(0) : 0, "%")))
   })), /*#__PURE__*/_react.default.createElement(_material.ListItemSecondaryAction, null, isMember && !isCreator && showViewTopicButton && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     onClick: handleClick,

package/dist/Live/Game/Game.js

@@ -144,6 +144,7 @@ function Game({
   gameAward,
   handleTranslate,
   userImage,
+  answerCounts,
   ...otherProps
 }) {
   const {
@@ -455,7 +456,8 @@ function Game({
         getNualaCelebratingImage: getNualaCelebratingImage,
         nextScriptLine: nextScriptLine,
         handleTranslate: handleTranslate,
-        isFinalScoreDrawerOpen: isFinalScoreDrawerOpen
+        isFinalScoreDrawerOpen: isFinalScoreDrawerOpen,
+        answerCounts: answerCounts
       }, otherProps));
     }
   })(), gameView === GameViewTypes.Leaderboard && /*#__PURE__*/_react.default.createElement(_material.Box, {

package/dist/Live/LiveRoleplay/LiveStory/LiveStory.js

@@ -72,7 +72,8 @@ function LiveStory({
   isStudentAnswerDrawerOpen,
   setIsStudentAnswerDrawerOpen,
   roleplayAnswer,
-  setRoleplayAnswer
+  setRoleplayAnswer,
+  answerCounts
 }) {
   const {
     classes
@@ -220,7 +221,8 @@ function LiveStory({
     isAnswered: isAnswered,
     handleContinue: handleContinue,
     currentMessage: currentMessage,
-    roleplayImage: roleplay.picture
+    roleplayImage: roleplay.picture,
+    answerCounts: answerCounts
   })), /*#__PURE__*/_react.default.createElement(_AnswerResult.default, _extends({
     t: t,
     open: isCorrectResultOpen

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1136",
+  "version": "0.1.1137",
   "main": "dist/index.js",
   "files": [
     "dist",