feat: add ellipsis and decrease title (#108)

* feat: first implementation for TextInput

* feat: get latest user's answer instead of first

* test: implement E2E tests of play text with multiple attempts

* feat: update PlayFillInTheBlanks to allow multiple attempts

* test: update play fillBlanks test to test multiple attempts

* feat: translate the number of attempts

* fix: update analytics and results for multiple attempts

* feat: do not display explanations of multiple choice until the end of the attempts

* feat: resize the question size and add ellipsis for TopBar question names

* feat: use const to configure max lines

* feat: increase the max number of lines

* fix: update the utilities file to remove duplicate functions

* chore: use component and variant for the Typography of the question's title

cypress/e2e/play/textInput.cy.ts

@@ -4,7 +4,7 @@ import { TextAppDataData } from '../../../src/components/types/types';
 import { APP_SETTING_NAMES, QuestionType } from '../../../src/config/constants';
 import {
   PLAY_VIEW_QUESTION_TITLE_CY,
-  PLAY_VIEW_SUBMIT_BUTTON_CY, // PLAY_VIEW_TEXT_INPUT_CY,
+  PLAY_VIEW_SUBMIT_BUTTON_CY,
   buildPlayViewTextInputCy,
   buildQuestionStepCy,
   dataCyWrapper,

src/components/common/TypographyMaxLines.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+import { Typography, TypographyProps } from '@mui/material';
+
+type Props = TypographyProps & {
+  maxLines: number;
+  children?: ReactNode;
+};
+
+export const TypographyMaxLines = ({
+  maxLines,
+  children,
+  ...typographyProps
+}: Props) => {
+  return (
+    <Typography
+      {...typographyProps}
+      sx={{
+        ...typographyProps.sx, 
+        display: '-webkit-box',
+        overflow: 'hidden',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: maxLines,
+      }}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+export default TypographyMaxLines;

src/components/create/CreateQuestionTopBar.tsx

@@ -17,13 +17,15 @@ import {
   Stepper,
 } from '@mui/material';
 
+import { MAX_QUESTION_LINES_TOP_BAR } from '../../config/constants';
 import {
   QUESTION_BAR_CY,
   QUESTION_BAR_NEXT_CY,
   QUESTION_BAR_PREV_CY,
   QUESTION_STEP_CLASSNAME,
   buildQuestionStepCy,
 } from '../../config/selectors';
+import TypographyMaxLines from '../common/TypographyMaxLines';
 import { QuizContext } from '../context/QuizContext';
 import { getQuestionById } from '../context/utilities';
 import PlusStep from '../navigation/PlusStep';
@@ -81,7 +83,9 @@ const CreateQuestionTopBar = () => {
         {...provided.draggableProps}
         {...props}
       >
-        {question.data.question}
+        <TypographyMaxLines maxLines={MAX_QUESTION_LINES_TOP_BAR}>
+          {question.data.question}
+        </TypographyMaxLines>
       </StepLabel>
     );
   };
@@ -107,6 +111,7 @@ const CreateQuestionTopBar = () => {
       direction="row"
       alignItems="flex-start"
       justifyContent="center"
+      mb={3}
     >
       <Grid item>
         <Button

src/components/create/NumberOfAttempts.tsx

@@ -27,7 +27,6 @@ const NumberOfAttempts = ({ initAttempts, onChange }: Props) => {
   const { t } = useTranslation();
   const MIN_ATTEMPTS = 1;
   const UNSET_NUMBER = 0;
-
   const attemptsLabel = t(QUIZ_TRANSLATIONS.CREATE_VIEW_NUMBER_OF_ATTEMPTS);
   const [attempts, setAttempts] = useState<number>(MIN_ATTEMPTS);
 

src/components/navigation/QuestionTopBar.tsx

@@ -16,6 +16,7 @@ import {
 import { useLocalContext } from '@graasp/apps-query-client';
 import { Context } from '@graasp/sdk';
 
+import { MAX_QUESTION_LINES_TOP_BAR } from '../../config/constants';
 import { hooks } from '../../config/queryClient';
 import {
   QUESTION_BAR_CY,
@@ -24,6 +25,7 @@ import {
   QUESTION_STEP_CLASSNAME,
   buildQuestionStepCy,
 } from '../../config/selectors';
+import TypographyMaxLines from '../common/TypographyMaxLines';
 import { QuizContext } from '../context/QuizContext';
 import {
   computeCorrectness,
@@ -90,7 +92,9 @@ const QuestionTopBar = () => {
         onClick={() => setCurrentIdx(index)}
         {...props}
       >
-        {question.data.question}
+        <TypographyMaxLines maxLines={MAX_QUESTION_LINES_TOP_BAR}>
+          {question.data.question}
+        </TypographyMaxLines>
       </StepLabel>
     );
   };

src/components/play/PlayView.tsx

@@ -137,9 +137,13 @@ const PlayView = () => {
       </Grid>
       <Grid item>
         <Typography
-          variant="h4"
-          sx={{ pb: 2 }}
+          component="h1"
+          variant="h5"
+          sx={{
+            pb: 2,
+          }}
           data-cy={PLAY_VIEW_QUESTION_TITLE_CY}
+          textAlign="center"
         >
           {currentQuestion.data.question}
         </Typography>

src/config/constants.ts

@@ -146,3 +146,4 @@ export const FILL_BLANKS_PLACEHOLDER_TEXT =
 export const AUTO_SCROLLABLE_HOVER_COLOR = '#878383';
 
 export const CHART_SECONDARY_COLOR = '#d95557';
+export const MAX_QUESTION_LINES_TOP_BAR = 3;