Move StyledExercise outside component (#96)

* move styledexercise outside component

* remove extra space

* snapshots update

Author: jomcarvajal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/assessment-components",
-  "version": "1.2.6",
+  "version": "1.2.10",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/src/index.d.ts",

src/components/ExercisePreview.tsx

@@ -3,6 +3,22 @@ import { ExerciseData, ExerciseQuestionData, StepBase } from "src/types";
 import { Exercise } from "./Exercise";
 import styled from "styled-components";
 
+
+const StyledExercise = styled(Exercise)<{ showAllFeedback?: boolean; showCorrectAnswer?: boolean }>`
+    ${({ showAllFeedback }) => !showAllFeedback &&
+    `.step-card-footer {
+        display: none;
+      }`
+    }
+    ${({ showCorrectAnswer }) => !showCorrectAnswer &&
+    `.answer-answer {
+        font-weight: normal;
+        & > div {
+          display: none;
+        }
+      }`
+    }
+  `;
 export interface ExercisePreviewProps {
   exercise: ExerciseData;
   selected?: boolean;
@@ -78,30 +94,15 @@ export const ExercisePreview = (
     };
   };
 
-  const StyledExercise = styled(Exercise)`
-
-      ${(!showAllFeedback) &&
-    `.step-card-footer {
-        display: none;
-      }`
-    }
-      ${!showCorrectAnswer &&
-    `.answer-answer {
-        font-weight: normal;
-        & > div {
-          display: none;
-        }
-      }`
-    }
-  `;
-
   return (
     <StyledExercise
       exercise={showAllFeedback ? exercise : hideAnswerFeedback(exercise)}
       className={`preview-card ${selected ? 'is-selected' : ''}`}
       previewMode
       overlayChildren={overlayChildren}
       {...exercisePreviewProps(exercise)}
+      showAllFeedback={showAllFeedback}
+      showCorrectAnswer={showCorrectAnswer}
     />
   );
 };

src/components/__snapshots__/ExercisePreview.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`ExercisePreview using step data matches snapshot with overlay and corre
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fEOsli QCsJH ubRcZ preview-card is-selected"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fnykZs QCsJH ghrOKm preview-card is-selected"
     >
       <div
         onBlur={[Function]}
@@ -199,7 +199,7 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-bjUoiL QCsJH cePIaL preview-card is-selected"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fnykZs QCsJH ignuyR preview-card is-selected"
     >
       <div
         onBlur={[Function]}
@@ -383,7 +383,7 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fnykZs QCsJH kKGUqH preview-card is-selected"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fnykZs QCsJH ignuyR preview-card is-selected"
     >
       <div
         onBlur={[Function]}
@@ -567,7 +567,7 @@ exports[`ExercisePreview using step data matches snapshot without overlay 1`] =
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-idiyUo QCsJH mjsmp preview-card "
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl sc-fnykZs QCsJH JxRcU preview-card "
     >
       <div>
         <div