@pocketprep/ui-kit 3.0.38 → 3.1.0

package/lib/components/EmptyStates/EmptyState.vue

@@ -160,13 +160,30 @@ export default class EmptyState extends Vue {
         position: relative;
     }
 
+    &__icon {
+        width: 22px;
+        height: 22px;
+
+        @include breakpoint(black-bear) {
+            width: 30px;
+            height: 30px;
+        }
+    }
+
     &__blob {
         position: absolute;
         top: 3.5px;
-        left: 1px;
-        width: 38px;
+        left: 2px;
+        width: 37px;
         height: 33px;
         z-index: -1;
+
+        @include breakpoint(black-bear) {
+            width: 48px;
+            height: 43px;
+            top: auto;
+            left: auto;
+        }
     }
 }
 </style>

package/lib/components/Quiz/Question.vue

@@ -102,7 +102,7 @@
                 :class="{
                     'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
                 }"
-                v-html="question.question"
+                v-html="question.prompt"
             />
             <PocketButton
                 v-if="question.passage || passageImageUrl"
@@ -461,7 +461,7 @@
                                         'uikit-question__toggle-dropdown-explanation-img-description--open':
                                             showExplanationImageLongAlt,
                                         'uikit-question__toggle-dropdown-explanation-img-description--no-reference':
-                                            !question.reference || hideReferences,
+                                            !reference || hideReferences,
                                     }"
                                     :is-dark-mode="isDarkMode"
                                     :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
@@ -490,12 +490,12 @@
                                     v-html="explanationImageLongAlt"
                                 />
                                 <div
-                                    v-if="question.reference && !hideReferences"
+                                    v-if="reference && !hideReferences"
                                     v-dark="isDarkMode"
                                     class="uikit-question__dropdown-reference"
                                 >
                                     <span class="uikit-question__dropdown-reference-label">Reference: </span>
-                                    <div v-html="question.reference" />
+                                    <div v-html="reference" />
                                 </div>
                             </div>
                         </div>
@@ -661,7 +661,7 @@
                             'uikit-question__toggle-summary-dropdown-explanation-img-description--open':
                                 showExplanationImageLongAlt,
                             'uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference':
-                                !question.reference || hideReferences,
+                                !reference || hideReferences,
                         }"
                         :is-dark-mode="isDarkMode"
                         :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
@@ -690,12 +690,12 @@
                         v-html="explanationImageLongAlt"
                     />
                     <div
-                        v-if="question.reference && !hideReferences"
+                        v-if="reference && !hideReferences"
                         v-dark="isDarkMode"
                         class="uikit-question__summary-dropdown-reference"
                     >
                         <span class="uikit-question__summary-dropdown-reference-label">Reference: </span>
-                        <div v-html="question.reference" />
+                        <div v-html="reference" />
                     </div>
                 </div>
                 <Icon
@@ -924,12 +924,12 @@
                     v-html="explanationImageLongAlt"
                 />
                 <div
-                    v-if="question.reference && !hideReferences"
+                    v-if="reference && !hideReferences"
                     v-dark="isDarkMode"
                     class="uikit-question__reference"
                 >
                     <span class="uikit-question__reference-label">Reference: </span>
-                    <div v-html="question.reference" />
+                    <div v-html="reference" />
                 </div>
                 <div
                     v-if="!reviewMode"
@@ -1001,7 +1001,7 @@ type TViewNames = {
     },
 })
 export default class Question extends Vue {
-    @Prop() question!: Study.Class.ExamDataJSON
+    @Prop() question!: Study.Class.QuestionJSON
     @Prop() questionNumber!: number
     @Prop() quizLength!: number
     @Prop({ default: '' }) imageUrlPrefix!: string
@@ -1094,33 +1094,31 @@ export default class Question extends Vue {
     }
 
     get passageImageUrl () {
-        const imageUrl = this.question.images?.passage?.url
-                || this.question.images?.Question   // Legacy support - TODO: remove when `Question` is deprecated
+        const imageUrl = this.question.passageImage?.url
         
         return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
     }
 
     get passageImageAlt () {
-        return this.question.images?.passage?.altText
+        return this.question.passageImage?.altText
     }
 
     get passageImageLongAlt () {
-        return this.question.images?.passage?.longAltText
+        return this.question.passageImage?.longAltText
     }
 
     get explanationImageUrl () {
-        const imageUrl = this.question.images?.explanation?.url
-                || this.question.images?.Explanation   // Legacy support - TODO: remove when `Explanation` is deprecated
+        const imageUrl = this.question.explanationImage?.url
         
         return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
     }
 
     get explanationImageAlt () {
-        return this.question.images?.explanation?.altText
+        return this.question.explanationImage?.altText
     }
 
     get explanationImageLongAlt () {
-        return this.question.images?.explanation?.longAltText
+        return this.question.explanationImage?.longAltText
     }
 
     get showPassageAndImage () {
@@ -1137,18 +1135,15 @@ export default class Question extends Vue {
         }
     }
 
+    get reference () {
+        return this.question.references?.length ? this.question.references.join('') : undefined
+    }
+
     get answers (): TChoice[] {
-        const answers = [
-            { text: this.question.answer, key: 'a1' },
-            { text: this.question.answer2, key: 'a2' },
-            { text: this.question.answer3, key: 'a3' },
-            { text: this.question.answer4, key: 'a4' },
-            { text: this.question.answer5, key: 'a5' },
-            { text: this.question.answer6, key: 'a6' },
-            { text: this.question.answer7, key: 'a7' },
-            { text: this.question.answer8, key: 'a8' },
-            { text: this.question.answer9, key: 'a9' },
-        ] as const
+        const answers = this.question.choices.filter(choice => choice.isCorrect).map((choice, index) => ({
+            text: choice.text,
+            key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
         
         return answers.filter(choice => !!choice.text)
     }
@@ -1158,17 +1153,10 @@ export default class Question extends Vue {
     }
 
     get distractors (): TChoice[] {
-        const distractors = [
-            { text: this.question.distractor1, key: 'd1' },
-            { text: this.question.distractor2, key: 'd2' },
-            { text: this.question.distractor3, key: 'd3' },
-            { text: this.question.distractor4, key: 'd4' },
-            { text: this.question.distractor5, key: 'd5' },
-            { text: this.question.distractor6, key: 'd6' },
-            { text: this.question.distractor7, key: 'd7' },
-            { text: this.question.distractor8, key: 'd8' },
-            { text: this.question.distractor9, key: 'd9' },
-        ] as const
+        const distractors = this.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
+            text: choice.text,
+            key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
 
         return distractors.filter(choice => !!choice.text)
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.0.38",
+  "version": "3.1.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -77,7 +77,7 @@
     "vue-facing-decorator": "2.1.20"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.8.10",
+    "@pocketprep/types": "1.11.1",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
     "@vitejs/plugin-vue": "4.2.1",