Merge pull request #2344 from bryanjenningz/make-exericse-card-responsive

Make exercise card responsive and replace module name with "Your Answer"

Author: bryanjenningz

__tests__/__snapshots__/storyshots.test.js.snap

@@ -5222,27 +5222,31 @@ exports[`Storyshots Components/ExerciseCard Basic 1`] = `
   className="card p-5 border-0 shadow"
 >
   <div
-    className="fw-bold mb-2"
+    className="d-flex flex-column flex-md-row mb-2"
   >
-    Problem
-  </div>
-  <div
-    className="d-flex mb-2"
-  >
-    <pre
-      className="w-50 bg-light py-3 px-4 mb-0 me-3"
+    <div
+      className="mb-0 me-md-3 exerciseCard__section"
     >
-      let a = 5
+      <div
+        className="fw-bold mb-2"
+      >
+        Problem
+      </div>
+      <pre
+        className="bg-light py-3 px-4"
+      >
+        let a = 5
 a = a + 10
 // what is a?
-    </pre>
+      </pre>
+    </div>
     <div
-      className="w-50 ms-3"
+      className="ms-md-3 exerciseCard__section"
     >
       <div
-        className="mb-2"
+        className="fw-bold mt-2 mt-md-0 mb-2"
       >
-        Variable mutation
+        Your Answer
       </div>
       <input
         aria-label="User answer"
@@ -5251,12 +5255,12 @@ a = a + 10
         value=""
       />
       <div
-        className="exerciseCard__message  my-2"
+        className="exerciseCard__message  my-3"
       >
 
       </div>
       <div
-        className="d-flex"
+        className="d-flex flex-column flex-md-row"
       >
         <button
           className="newButton "
@@ -5265,7 +5269,7 @@ a = a + 10
           SUBMIT
         </button>
         <button
-          className="bg-transparent ms-3 border-0 fw-normal"
+          className="bg-transparent mt-2 mt-md-0 ms-md-3 border-0 fw-normal"
           onClick={[Function]}
         >
           <div

components/ExerciseCard/ExerciseCard.test.tsx

@@ -13,7 +13,6 @@ a = a + 10
 
     const { getByRole, queryByText, getByLabelText } = render(
       <ExerciseCard
-        challengeName="Variable mutation"
         problem={exampleProblem}
         answer={exampleAnswer}
         explanation={exampleExplanation}

components/ExerciseCard/ExerciseCard.tsx

@@ -4,7 +4,6 @@ import { Text } from '../theme/Text'
 import styles from './exerciseCard.module.scss'
 
 export type ExerciseCardProps = {
-  challengeName: string
   problem: string
   answer: string
   explanation: string
@@ -18,24 +17,21 @@ enum Message {
 
 type MessageKey = keyof typeof Message
 
-const ExerciseCard = ({
-  challengeName,
-  problem,
-  answer,
-  explanation
-}: ExerciseCardProps) => {
+const ExerciseCard = ({ problem, answer, explanation }: ExerciseCardProps) => {
   const [studentAnswer, setStudentAnswer] = useState('')
   const [answerShown, setAnswerShown] = useState(false)
   const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
   const message = Message[messageKey]
 
   return (
     <section className="card p-5 border-0 shadow">
-      <div className="fw-bold mb-2">Problem</div>
-      <div className="d-flex mb-2">
-        <pre className="w-50 bg-light py-3 px-4 mb-0 me-3">{problem}</pre>
-        <div className="w-50 ms-3">
-          <div className="mb-2">{challengeName}</div>
+      <div className="d-flex flex-column flex-md-row mb-2">
+        <div className={`mb-0 me-md-3 ${styles.exerciseCard__section}`}>
+          <div className="fw-bold mb-2">Problem</div>
+          <pre className="bg-light py-3 px-4">{problem}</pre>
+        </div>
+        <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
+          <div className="fw-bold mt-2 mt-md-0 mb-2">Your Answer</div>
           <input
             aria-label="User answer"
             className={`form-control mb-2 ${
@@ -47,11 +43,11 @@ const ExerciseCard = ({
           <div
             className={`${styles.exerciseCard__message} ${
               messageKey === 'ERROR' ? styles.exerciseCard__message__error : ''
-            } my-2`}
+            } my-3`}
           >
             {message}
           </div>
-          <div className="d-flex">
+          <div className="d-flex flex-column flex-md-row">
             <NewButton
               onClick={() => {
                 if (studentAnswer.trim() === answer.trim()) {
@@ -65,7 +61,7 @@ const ExerciseCard = ({
               SUBMIT
             </NewButton>
             <button
-              className="bg-transparent ms-3 border-0 fw-normal"
+              className="bg-transparent mt-2 mt-md-0 ms-md-3 border-0 fw-normal"
               onClick={() => setAnswerShown(!answerShown)}
             >
               <Text size="xs" bold>
@@ -79,9 +75,15 @@ const ExerciseCard = ({
         <>
           <hr />
           <div className="fw-bold mb-2">Answer</div>
-          <div className="d-flex mb-2">
-            <pre className="w-50 bg-light py-3 px-4 mb-0 me-3">{answer}</pre>
-            <div className="w-50 ms-3">{explanation}</div>
+          <div className="d-flex flex-column flex-md-row mb-2">
+            <pre
+              className={`bg-light py-3 px-4 mb-2 mb-md-0 me-md-3 ${styles.exerciseCard__section}`}
+            >
+              {answer}
+            </pre>
+            <div className={`ms-md-3 ${styles.exerciseCard__section}`}>
+              {explanation}
+            </div>
           </div>
         </>
       )}

components/ExerciseCard/exerciseCard.module.scss

@@ -1,5 +1,13 @@
 $error-red: #a0213e;
 
+.exerciseCard__section {
+  width: 100%;
+
+  @media (min-width: 768px) {
+    width: 50%;
+  }
+}
+
 .exerciseCard__message {
   min-height: 20px;
   font-size: 12px;

pages/exercises/[lessonSlug].tsx

@@ -107,7 +107,7 @@ const Exercise = ({
   showSkipButton
 }: ExerciseProps) => {
   return (
-    <div className="w-75 mx-auto">
+    <div className={`mx-auto ${styles.exercise__container}`}>
       <button
         className="btn ps-0 d-flex align-items-center"
         onClick={() => setExerciseIndex(-1)}
@@ -117,7 +117,6 @@ const Exercise = ({
 
       <h1 className="mb-4 fs-2">{lessonTitle}</h1>
       <ExerciseCard
-        challengeName={exercise.challengeName}
         problem={exercise.problem}
         answer={exercise.answer}
         explanation={exercise.explanation}

scss/exercises.module.scss

@@ -9,3 +9,10 @@
     width: 100%;
   }
 }
+
+.exercise__container {
+  width: 100%;
+  @media (min-width: 768px) {
+    width: 75%;
+  }
+}

stories/components/ExerciseCard.stories.tsx

@@ -17,7 +17,6 @@ const exampleExplanation = `You can reassign variables that are initialized with
 export const Basic = () => {
   return (
     <ExerciseCard
-      challengeName="Variable mutation"
       problem={exampleProblem}
       answer={exampleAnswer}
       explanation={exampleExplanation}