@pocketprep/ui-kit 3.4.55 → 3.4.57

package/lib/components/Buttons/Button.vue

@@ -45,7 +45,7 @@ import { dark } from '../../directives'
 
 type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary' 
 | 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon' 
-| 'icon-yellow'
+| 'icon-yellow' | 'outline'
 
 @Component({
     components: {
@@ -115,6 +115,7 @@ export default class Button extends Vue {
     &--primary,
     &--primary-yellow,
     &--primary-red,
+    &--outline,
     &--secondary,
     &--secondary-yellow-dark {
         font-size: 15px;
@@ -142,7 +143,7 @@ export default class Button extends Vue {
         }
 
         &--dark:enabled:focus::before {
-            border-color: $butterscotch;
+            border-color: $banana-bread;
         }
     }
 
@@ -233,6 +234,48 @@ export default class Button extends Vue {
         }
     }
 
+    &--outline {
+        background-color: $white;
+        color: $brand-blue;
+        font-size: 15px;
+        font-weight: 600;
+        border: 1px solid $brand-blue;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                background-color: $pearl;
+            }
+
+            &:focus::before {
+                content: '';
+                position: absolute;
+                top: -3px;
+                bottom: -3px;
+                left: -3px;
+                right: -3px;
+                border-radius: 6px;
+            }
+        }
+
+        &:disabled {
+            opacity: 0.4;
+        }
+
+        &--dark {
+            background-color: $charcoal;
+            color: $banana-bread;
+            border-color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:active {
+                    background-color: $mariner;
+                }
+            }
+        }
+    }
+
     &--secondary {
         background-color: transparent;
         color: $brand-blue;

package/lib/components/Forms/Radio.vue

@@ -43,6 +43,7 @@
             >
                 <slot name="radioItem" :item="item">
                     <RadioButton
+                        class="uikit-radio__item-btn"
                         :selected="!!(modelValue && item.value === modelValue.value)"
                         :disabled="!!(disabled || item.disabled)"
                         :isDarkMode="isDarkMode"
@@ -248,66 +249,8 @@ export default class Radio extends Vue {
     }
 
     &__item-btn {
-        width: 18px;
-        height: 18px;
+        min-width: 18px;
         margin-right: 12px;
-        border: 1px solid $steel;
-        background: $white;
-        border-radius: 18px;
-        position: relative;
-        box-sizing: border-box;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
-            background: $brand-blue;
-            display: none;
-        }
-
-        &--dark {
-            background-color: transparent;
-            border-color: $pewter;
-
-            &::before {
-                background: $banana-bread;
-            }
-        }
-
-        &--disabled {
-            background-color: $fog;
-            opacity: 0.6;
-            border-color: rgba($steel, 0.6);
-
-            &--dark {
-                background-color: $moonlit-ocean;
-                border-color: $slate;
-                opacity: 1;
-            }
-        }
-
-        &--selected {
-            border-color: $brand-blue;
-            background: transparent;
-
-            &--dark {
-                border-color: $banana-bread;
-            }
-
-            &--disabled {
-                opacity: 0.4;
-                
-            }
-
-            &::before {
-                display: block;
-            }
-        }
     }
 }
 </style>

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -171,7 +171,10 @@
                     @click="handleClick"
                 >
                     <template #explanationTopExperiment>
-                        <slot name="explanationTopExperiment"></slot>
+                        <slot name="explanationTopExperiment" />
+                    </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
                     </template>
                 </DropdownExplanation>
             </div>

package/lib/components/Quiz/Question/DropdownExplanation.vue

@@ -65,6 +65,7 @@
             <span class="uikit-question-dropdown-explanation__dropdown-reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
     </div>
 </template>
 

package/lib/components/Quiz/Question/Explanation.vue

@@ -13,7 +13,7 @@
         >
             Explanation Details
         </div>
-        <slot name="explanationTopExperiment"></slot>
+        <slot name="explanationTopExperiment" />
         <div
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -70,6 +70,7 @@
             <span class="uikit-question-explanation__reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
         <div
             v-if="!reviewMode"
             v-dark="isDarkMode"

package/lib/components/Quiz/Question/Summary.vue

@@ -96,6 +96,7 @@
                 <span class="uikit-question-summary__summary-dropdown-reference-label">Reference: </span>
                 <div v-html="reference" />
             </div>
+            <slot name="explanationBottomExperiment" />
         </div>
         <Icon
             v-if="isQuestionCorrect"

package/lib/components/Quiz/Question.vue

@@ -57,6 +57,17 @@
                     </template>
                 </QuestionContext>
             </slot>
+            <div
+                v-if="questionScenario && currentScenarioQuestionNumber && numberOfScenarioQuestions"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                tabindex="-1"
+                class="uikit-question__scenario-part-x-of-y-label"
+                :aria-label="`Scenario Part ${currentScenarioQuestionNumber} of ${numberOfScenarioQuestions}`"
+                aria-live="assertive"
+            >
+                Part {{ currentScenarioQuestionNumber }} of {{ numberOfScenarioQuestions }}
+            </div>
             <slot name="promptExperiment" />
             <div
                 ref="prompt"
@@ -219,6 +230,9 @@
                             :choiceKey="choiceKey"
                         />
                     </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
+                    </template>
                 </ChoicesContainer>
                 <MatrixChoicesContainer
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
@@ -328,6 +342,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Summary>
             <slot name="metricsTiles">
                 <StatsSummary
@@ -458,6 +475,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Explanation>
         </div> 
     </div>
@@ -495,6 +515,7 @@ import type {
     TMatrixChoiceScores,
     TNamesRow,
     TViewNames,
+    IScenarioSerial,
 } from './question'
 
 @Component({
@@ -615,6 +636,29 @@ export default class Question extends Vue {
         return this.question.type === 'Matrix Checkbox' || this.question.type === 'Matrix Radio Button'
     }
 
+    get questionScenario () {
+        return this.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
+    }
+
+    get numberOfScenarioQuestions () {
+        return this.questionScenario?.questions.length
+    }
+
+    get currentScenarioQuestionNumber () {
+        if (this.questionScenario?.questions) {
+            const indexOfScenarioSerial = this.questionScenario.questions.findIndex(
+                (scenarioSerial: IScenarioSerial) =>  {
+                    return scenarioSerial.serial === this.question.serial
+                }
+            )
+
+            return indexOfScenarioSerial !== -1 ? indexOfScenarioSerial + 1 : undefined
+        }
+
+        return undefined
+
+    }
+
     get passageImageUrl () {
         const imageUrl = this.question.passageImage?.url
         
@@ -1639,6 +1683,27 @@ export default class Question extends Vue {
         }
     }
 
+    &__scenario-part-x-of-y-label {
+        padding: 0 16px;
+        margin-bottom: 4px;
+        width: 100%;
+        max-width: 490px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 19px;
+        color: $slate;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--mobile {
+            line-height: 20px;
+            margin-bottom: 8px;
+        }
+    }
+
     &__prompt {
         outline: none;
         font-weight: 600;

package/lib/components/Quiz/question.d.ts

@@ -50,4 +50,8 @@ export interface IRadioOptions {
     choices: TMatrixChoiceKey[]
     value: TMatrixChoiceKey | null
     label?: string
+}
+
+export interface IScenarioSerial {
+    serial: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.55",
+  "version": "3.4.57",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -78,7 +78,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.14.10",
+    "@pocketprep/types": "1.14.20",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
     "@vitejs/plugin-vue": "4.6.2",