Preview card (#89)

* card styles

* Overlay option added in exercise component and new component IncludeRemoveQuestion created (#86)

* overlay option added in exercise component and new component includeremovequestion created

* resolve comments

* update snapshots

* move overlay logic into Card component

* remove focus on card when overlay is up and add autoFocus for first interactive element on overlay

* Add export for IncludRemoveQuestion (#87)

add export of IncludRemoveQuestion

* Modify preview-card styles (#88)

* modify preview card styles

* change color of card when is included

* resolve comments - fix style issues

* change props in storybook of Exercise

* Add prop method for details button

* Refactor props of ExercisePreview

* export ExercisePreview

* remove focus first for screenreaders, style tweaks

* Remove aria attributes in order to read card body content (#90)

* remove aria attributes in order to read card body content

* conditional aria attributes for cardbody

* previewMode in storybook

* missing previewMode prop

* fix some type issues

* disable eslint rule for ts-ignore just for this case

* Core 675 refactor exercise preview (#92)

* remove includeRemove logic from preview exercise card

* print stories deleted by mistake

* test description fixed

* added new story for preview exercise, hide all feedback propertly

* revert print delete

* remove questionState prop, added feedback inside answers for stories purposes

* is_completed added into ExercisePreview component

* update snapshots

* New prop showCorrectAnswer (#93)

* new prop showCorrectAnswer

* fix exercise stories

* ExercisePreview now shows question detailed (#94)

* ExercisePreview now shows question detailed

* Restore print

* hide footer with new condition

* Restore print

* fix indentation in ExerciseQuestion

* set answer_id as empty

* set new margin for preview card

* update snaps

* resolve test duplicity

---------

Co-authored-by: jomcarvajal <[email protected]>
Co-authored-by: jomcarvajal <[email protected]>

Author: jivey

.github/workflows/checks.yml

@@ -27,4 +27,5 @@ jobs:
           node-version: '16'
       - run: yarn
       - run: yarn lint
+      - run: yarn typecheck
       - run: yarn test

src/components/AnswersTable.tsx

@@ -23,14 +23,15 @@ export interface AnswersTableProps {
   onKeyPress?: () => void;
   contentRenderer?: JSX.Element;
   instructions?: JSX.Element;
+  previewMode?: boolean;
 }
 
 export const AnswersTable = (props: AnswersTableProps) => {
   let idCounter = 0;
 
   const {
     question, hideAnswers, type = defaultAnswerType, answered_count, choicesEnabled, correct_answer_id,
-    incorrectAnswerId, answer_id, feedback_html, correct_answer_feedback_html,
+    incorrectAnswerId, answer_id, feedback_html, correct_answer_feedback_html, previewMode,
     show_all_feedback = false, tableFeedbackEnabled, hasCorrectAnswer, onChangeAnswer, onKeyPress, answerIdOrder, instructions
   } = props;
   if (hideAnswers) { return null; }
@@ -53,7 +54,7 @@ export const AnswersTable = (props: AnswersTableProps) => {
     onChangeAnswer: onChangeAnswer,
     type,
     answered_count,
-    disabled: !choicesEnabled,
+    disabled: previewMode || !choicesEnabled,
     show_all_feedback,
     tableFeedbackEnabled,
     onKeyPress
@@ -64,10 +65,10 @@ export const AnswersTable = (props: AnswersTableProps) => {
   const answersHtml = answers.map((answer, i) => {
     const additionalProps: { answer: AnswerType, iter: number, key: string }
       = {
-        answer: {
-          ...answer,
-          question_id: typeof question.id === 'string' ? parseInt(question.id, 10) : question.id
-         },
+      answer: {
+        ...answer,
+        question_id: typeof question.id === 'string' ? parseInt(question.id, 10) : question.id
+      },
       iter: i,
       key: `${questionAnswerProps.qid}-option-${i}`,
     };
@@ -103,7 +104,17 @@ export const AnswersTable = (props: AnswersTableProps) => {
   });
 
   return (
-    <div role="radiogroup" aria-label="Answer choices" className="answers-table">
+    <div
+      {
+      ...(!previewMode
+        ? {
+          role: "radiogroup",
+          'aria-label': "Answer choices"
+        }
+        : {})
+      }
+      className="answers-table"
+    >
       {instructions}
       {answersHtml}
     </div>

src/components/Card.stories.tsx

@@ -20,6 +20,7 @@ const props: TaskStepCardProps = {
   },
   questionNumber: 1,
   numberOfQuestions: 1,
+  showTotalQuestions: false,
 };
 
 export const Default = () => <TaskStepCard {...props}><ExerciseQuestion /></TaskStepCard>;

src/components/Card.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useState, useRef, useEffect, useCallback } from "react";
 import { breakpoints, colors, layouts, mixins } from "../theme";
 import { AvailablePoints, StepBase, StepWithData } from "../types";
 import styled from "styled-components";
@@ -33,7 +33,7 @@ const StepCardHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 24px;
+  padding: 1.6rem 2.4rem;
   background: ${colors.card.header.background};
   font-size: 1.8rem;
   line-height: 3rem;
@@ -88,9 +88,6 @@ const StepCardHeader = styled.div`
       button.ox-icon-angle-left, button.ox-icon-angle-right {
           display: none;
       }
-      .separator {
-          display: inherit;
-      }
   `}
 
     /*
@@ -195,6 +192,21 @@ const StepCardQuestion = styled.div<{ unpadded?: boolean }>`
     }
 `;
 
+export const StyledOverlay = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    background-color: #FFFFFF80;
+    z-index: 2;
+`;
+
 interface SharedProps {
   questionNumber: number;
   numberOfQuestions: number;
@@ -213,6 +225,7 @@ export interface StepCardProps extends SharedProps {
   questionId?: string;
   multipartBadge?: ReactNode;
   isHomework: boolean;
+  overlayChildren?: React.ReactNode;
 }
 
 const StepCard = ({
@@ -230,35 +243,91 @@ const StepCard = ({
   leftHeaderChildren,
   rightHeaderChildren,
   headerTitleChildren,
+  overlayChildren,
   ...otherProps }: StepCardProps) => {
 
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const [showOverlay, setShowOverlay] = useState<boolean>(false);
+
   const formattedQuestionNumber = numberOfQuestions > 1
     ? `Questions ${questionNumber} - ${questionNumber + numberOfQuestions - 1}`
     : `Question ${questionNumber}`;
 
+  const handleOverlayBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    if (overlayRef.current && !overlayRef.current.contains(event.relatedTarget as Node)) {
+      setShowOverlay(false);
+    }
+  };
+
+  const handleOverlayFocus = useCallback(() => {
+    setShowOverlay(true);
+  }, []);
+
+  const hideFocusableElements = useCallback(() => {
+    const focusableElements = Array.from(document.getElementById("step-card")?.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ) || []);
+
+    focusableElements.forEach((el) => {
+      (el as HTMLElement).setAttribute('tabindex', '-1');
+    });
+  }, []);
+
+  useEffect(() => {
+    const currentOverlayRef = overlayRef.current;
+    if (currentOverlayRef && overlayChildren) {
+      currentOverlayRef.addEventListener('focus', handleOverlayFocus);
+      hideFocusableElements();
+    }
+    return () => {
+      currentOverlayRef?.removeEventListener('focus', handleOverlayFocus);
+    };
+  }, [overlayChildren, overlayRef, handleOverlayFocus, hideFocusableElements]);
+
   return (
     <OuterStepCard {...otherProps}>
       {multipartBadge}
       <InnerStepCard className={className}>
-        {questionNumber && isHomework && stepType === 'exercise' &&
-          <StepCardHeader>
-            <div>
-              {leftHeaderChildren}
-              <h2 className="question-info">
-                {headerTitleChildren}
-                <span>{formattedQuestionNumber}</span>
-                {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}
-                <span className="separator">|</span>
-                <span className="question-id">ID: {questionId}</span>
-              </h2>
-            </div>
-            {availablePoints || rightHeaderChildren ? <div>
-              {availablePoints && <div className="points">{availablePoints} Points</div>}
-              {rightHeaderChildren}
-            </div> : null}
-          </StepCardHeader>
-        }
-        <StepCardQuestion unpadded={unpadded}>{children}</StepCardQuestion>
+        <div
+          ref={overlayRef}
+          {
+          ...(overlayChildren
+            ? {
+              onMouseOver: () => setShowOverlay(true),
+              onMouseLeave: () => setShowOverlay(false),
+              onBlur: handleOverlayBlur,
+              tabIndex: 0,
+            }
+            : {})
+          }
+        >
+          {(overlayChildren && showOverlay) &&
+            <StyledOverlay id="overlay-element">
+              {overlayChildren}
+            </StyledOverlay>
+          }
+          <div id="step-card">
+            {questionNumber && isHomework && stepType === 'exercise' &&
+              <StepCardHeader className="step-card-header">
+                <div>
+                  {leftHeaderChildren}
+                  <h2 className="question-info">
+                    {headerTitleChildren}
+                    <span>{formattedQuestionNumber}</span>
+                    {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}
+                    <span className="separator">|</span>
+                    <span className="question-id">ID: {questionId}</span>
+                  </h2>
+                </div>
+                {availablePoints || rightHeaderChildren ? <div>
+                  {availablePoints && <div className="points">{availablePoints} Points</div>}
+                  {rightHeaderChildren}
+                </div> : null}
+              </StepCardHeader>
+            }
+            <StepCardQuestion unpadded={unpadded}>{children}</StepCardQuestion>
+          </div>
+        </div>
       </InnerStepCard>
     </OuterStepCard>
   )
@@ -268,9 +337,11 @@ StepCard.displayName = 'OSStepCard';
 export interface TaskStepCardProps extends SharedProps {
   className?: string;
   children?: ReactNode;
+  tabIndex?: number;
   step: StepBase | StepWithData;
   questionNumber: number;
   numberOfQuestions: number;
+  overlayChildren?: React.ReactNode;
 }
 
 const TaskStepCard = ({
@@ -279,6 +350,7 @@ const TaskStepCard = ({
   numberOfQuestions,
   children,
   className,
+  overlayChildren,
   ...otherProps
 }: TaskStepCardProps) =>
 (<StepCard {...otherProps}
@@ -292,6 +364,7 @@ const TaskStepCard = ({
   // availablePoints={step.available_points}
   className={cn(`${('type' in step ? step.type : 'exercise')}-step`, className)}
   questionId={step.uid}
+  overlayChildren={overlayChildren}
 >
   {children}
 </StepCard>);

src/components/Exercise.spec.tsx

@@ -1,4 +1,4 @@
-import { Exercise, ExerciseWithStepDataProps, ExerciseWithQuestionStatesProps } from './Exercise';
+import { Exercise, ExerciseWithStepDataProps, ExerciseWithQuestionStatesProps, OverlayProps } from './Exercise';
 import renderer from 'react-test-renderer';
 import React from 'react';
 
@@ -299,4 +299,89 @@ describe('Exercise', () => {
       expect(tree.toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('with overlay rendering', () => {
+
+    let props: ExerciseWithStepDataProps & OverlayProps;
+
+    beforeEach(() => {
+      props = {
+        overlayChildren: <span>Overlay</span>,
+        exercise: {
+          uid: '1@1',
+          uuid: 'e4e27897-4abc-40d3-8565-5def31795edc',
+          group_uuid: '20e82bf6-232e-40c8-ba68-2d22c6498f69',
+          number: 1,
+          version: 1,
+          published_at: '2022-09-06T20:32:21.981Z',
+          context: 'Context',
+          stimulus_html: '<b>Stimulus HTML</b>',
+          tags: [],
+          authors: [{ user_id: 1, name: 'OpenStax' }],
+          copyright_holders: [{ user_id: 1, name: 'OpenStax' }],
+          derived_from: [],
+          is_vocab: false,
+          solutions_are_public: false,
+          versions: [1],
+          questions: [{
+            id: '1234@5',
+            collaborator_solutions: [],
+            formats: ['true-false'],
+            stimulus_html: '',
+            stem_html: '',
+            is_answer_order_important: false,
+            answers: [{
+              id: '1',
+              correctness: undefined,
+              content_html: 'True',
+            }, {
+              id: '2',
+              correctness: undefined,
+              content_html: 'False',
+            }],
+          }],
+        },
+        questionNumber: 1,
+        hasMultipleAttempts: false,
+        onAnswerChange: () => null,
+        onAnswerSave: () => null,
+        onNextStep: () => null,
+        canAnswer: false,
+        needsSaved: false,
+        apiIsPending: false,
+        canUpdateCurrentStep: false,
+        step: {
+          uid: '1234@4',
+          id: 1,
+          available_points: '1.0',
+          is_completed: false,
+          answer_id_order: ['1', '2'],
+          answer_id: '1',
+          free_response: '',
+          feedback_html: '',
+          correct_answer_id: '',
+          correct_answer_feedback_html: '',
+          is_feedback_available: true,
+          attempts_remaining: 0,
+          attempt_number: 1,
+          incorrectAnswerId: 0
+        },
+        numberOfQuestions: 1
+      }
+    });
+
+    it('matches snapshot', () => {
+      const tree = renderer.create(
+        <Exercise {...props} show_all_feedback />
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('matches snapshot with previewMode', () => {
+      const tree = renderer.create(
+        <Exercise {...props} show_all_feedback previewMode />
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });