@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Quiz/KeyboardShortcutsModal.vue

@@ -104,9 +104,9 @@
                     ↓
                 </div>
             </div>
-            <div 
-                v-if="keyboardMode !== 'teach'" 
-                v-dark="isDarkMode" 
+            <div
+                v-if="keyboardMode !== 'teach'"
+                v-dark="isDarkMode"
                 class="uikit-keyboard-modal__item"
             >
                 <div>
@@ -134,49 +134,48 @@
     </ModalContainer>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+<script setup lang="ts">
 import ModalContainer from '../Modal/ModalContainer.vue'
 import ToggleSwitch from '../Controls/ToggleSwitch.vue'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
+import { onMounted, useTemplateRef } from 'vue'
 
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        ModalContainer,
-        ToggleSwitch,
-    },
-})
-export default class KeyboardShortcutsModal extends Vue {
-    @Prop() allowKeyboardShortcuts!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: 'quiz' }) keyboardMode!: 'quiz' | 'review' | 'teach'
+const {
+    allowKeyboardShortcuts = false,
+    isDarkMode = false,
+    keyboardMode = 'quiz',
+} = defineProps<{
+    allowKeyboardShortcuts?: boolean
+    isDarkMode?: boolean
+    keyboardMode?: 'quiz' | 'review' | 'teach'
+}>()
 
-    mounted () {
-        setTimeout(() => {
-            const titleEl = this.$refs['uikit-keyboard-modal__title'] as HTMLElement | undefined
-            titleEl?.focus()
-        }, 0)
-    }
+const emit = defineEmits<{
+    'close': []
+    'toggleKeyboardShortcuts': [allowKeyboardShortcuts: boolean]
+}>()
 
-    toggleKeyboardShortcuts (newVal: boolean) {
-        if (newVal !== this.allowKeyboardShortcuts) {
-            this.emitToggleKeyboardShortcuts(newVal)
-        }
-    }
+const titleRef = useTemplateRef<HTMLElement>('uikit-keyboard-modal__title')
 
-    @Emit('close')
-    emitClose () {
-        return true
-    }
+onMounted(() => {
+    setTimeout(() => {
+        titleRef.value?.focus()
+    }, 0)
+})
 
-    @Emit('toggleKeyboardShortcuts')
-    emitToggleKeyboardShortcuts (allowKeyboardShortcuts: boolean) {
-        return allowKeyboardShortcuts
+const toggleKeyboardShortcuts = (newVal: boolean) => {
+    if (newVal !== allowKeyboardShortcuts) {
+        emitToggleKeyboardShortcuts(newVal)
     }
 }
+
+const emitClose = () => {
+    emit('close')
+}
+
+const emitToggleKeyboardShortcuts = (newAllowKeyboardShortcuts: boolean) => {
+    emit('toggleKeyboardShortcuts', newAllowKeyboardShortcuts)
+}
 </script>
 
 <style lang="scss">

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

@@ -1,6 +1,6 @@
 <template>
     <div class="uikit-question-build-list-choices-container-root" @click="clearFocusState">
-        <!-- 
+        <!--
             Visually hidden aria-live region for choice move announcements:
             "Moved Photosynthesis to position 2 of 6."
          -->
@@ -10,7 +10,7 @@
             class="uikit-question-build-list-choices-container__announcements"
         >
             {{ announcementMessage }}
-        </div>    
+        </div>
         <div
             class="uikit-question-build-list-choices-container-wrapper"
         >
@@ -21,11 +21,11 @@
                 tag="ol"
                 class="uikit-question-build-list-choices-container"
                 :class="{
-                    'uikit-question-build-list-choices-container--correct': 
+                    'uikit-question-build-list-choices-container--correct':
                         (showBuildListOrder || reviewMode) && isBuildListOrderCorrect,
-                    'uikit-question-build-list-choices-container--incorrect': 
+                    'uikit-question-build-list-choices-container--incorrect':
                         (showBuildListOrder || reviewMode) && !isBuildListOrderCorrect,
-                    'uikit-question-build-list-choices-container--teach-group-review': 
+                    'uikit-question-build-list-choices-container--teach-group-review':
                         (showBuildListOrder || reviewMode) && isTeachGroupReview,
                     'uikit-question-build-list-choices-container--review-mode': reviewMode,
                 }"
@@ -37,14 +37,14 @@
                     :key="choice.key"
                     class="uikit-question-build-list-choices-container__choice-container"
                     :class="{
-                        'uikit-question-build-list-choices-container__choice-container--floating': 
+                        'uikit-question-build-list-choices-container__choice-container--floating':
                             floatingChoiceKey === choice.key
                     }"
                     role="listitem"
                     :aria-label="`Item ${index + 1} of ${orderedChoices.length}: ${stripHtmlTags(choice.text || '')}`"
                 >
-                    <div 
-                        v-dark="isDarkMode" 
+                    <div
+                        v-dark="isDarkMode"
                         v-breakpoint="breakpointsWithEl"
                         class="uikit-question-build-list-choices-container__choice-number"
                         :class="{
@@ -67,16 +67,16 @@
                         @mousedown.prevent
                         :ref="(el) => setCardRef(el, choice.key)"
                     >
-                        <div 
+                        <div
                             v-dark="isDarkMode"
-                            v-breakpoint="breakpointsWithEl" 
+                            v-breakpoint="breakpointsWithEl"
                             class="uikit-question-build-list-choices-container__mobile-choice-number"
                             :class="{
-                                'uikit-question-build-list-choices-container__mobile-choice-number--correct': 
+                                'uikit-question-build-list-choices-container__mobile-choice-number--correct':
                                     (reviewMode || showBuildListOrder) && isChoiceInCorrectPosition(choice, index),
-                                'uikit-question-build-list-choices-container__mobile-choice-number--incorrect': 
+                                'uikit-question-build-list-choices-container__mobile-choice-number--incorrect':
                                     (reviewMode || showBuildListOrder) && !isChoiceInCorrectPosition(choice, index),
-                                'uikit-question-build-list-choices-container__mobile-choice-number--review-mode': 
+                                'uikit-question-build-list-choices-container__mobile-choice-number--review-mode':
                                     reviewMode,
                             }"
                         >
@@ -85,7 +85,7 @@
                         <div v-dark="isDarkMode" class="uikit-question-build-list-choices-container__choice-text">
                             {{ stripHtmlTags(choice.text || '') }}
                         </div>
-                        <div 
+                        <div
                             v-if="reviewMode || showBuildListOrder"
                             class="uikit-question-build-list-choices-container__answer-info"
                         >
@@ -102,7 +102,7 @@
                                 v-breakpoint="breakpointsWithEl"
                                 class="uikit-question-build-list-choices-container__answer-correct-icon"
                                 type="correct"
-                                
+
                             />
                             <Icon
                                 v-else-if="!isChoiceInCorrectPosition(choice, index) && !reviewMode"
@@ -120,7 +120,7 @@
                                 v-dark="isDarkMode"
                                 class="uikit-question-build-list-choices-container__choice-up-button"
                                 :class="{
-                                    'uikit-question-build-list-choices-container__choice-up-button--disabled': 
+                                    'uikit-question-build-list-choices-container__choice-up-button--disabled':
                                         index === 0
                                 }"
                                 :disabled="index === 0"
@@ -135,7 +135,7 @@
                                 <Icon
                                     v-dark="isDarkMode"
                                     class="uikit-question-build-list-choices-container__up-button-icon"
-                                    type="arrow" 
+                                    type="arrow"
                                     :aria-hidden="true"
                                 />
                             </button>
@@ -143,7 +143,7 @@
                                 v-dark="isDarkMode"
                                 class="uikit-question-build-list-choices-container__choice-down-button"
                                 :class="{
-                                    'uikit-question-build-list-choices-container__choice-down-button--disabled': 
+                                    'uikit-question-build-list-choices-container__choice-down-button--disabled':
                                         index === orderedChoices.length - 1
                                 }"
                                 :disabled="index === orderedChoices.length - 1"
@@ -158,7 +158,7 @@
                                 <Icon
                                     v-dark="isDarkMode"
                                     class="uikit-question-build-list-choices-container__down-button-icon"
-                                    type="arrow" 
+                                    type="arrow"
                                     :aria-hidden="true"
                                 />
                             </button>
@@ -224,7 +224,7 @@ const prefersReducedMotion = () => {
 const updateOrderedChoices = () => {
     // Map the selectedBuildListChoiceOrder keys to full TBuildListChoice objects
     if (selectedBuildListChoiceOrder.value.length) {
-        orderedChoices.value = selectedBuildListChoiceOrder.value.map(key => 
+        orderedChoices.value = selectedBuildListChoiceOrder.value.map(key =>
             buildListChoices.value.find(choice => choice.key === key)
         ).filter(Boolean) as TBuildListChoice[]
     } else {
@@ -259,7 +259,7 @@ const setFocusedArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
 const restoreFocusToArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
     const choiceEl = choiceRefs.value.get(choiceKey)
     if (choiceEl) {
-        const buttonSelector = direction === 'up' 
+        const buttonSelector = direction === 'up'
             ? '.uikit-question-build-list-choices-container__choice-up-button'
             : '.uikit-question-build-list-choices-container__choice-down-button'
         const button = choiceEl.querySelector(buttonSelector) as HTMLButtonElement
@@ -269,7 +269,7 @@ const restoreFocusToArrowButton = (choiceKey: string, direction: 'up' | 'down')
         } else {
             // Move focus to opposite button if focused button becomes disabled
             const oppositeDirection = direction === 'up' ? 'down' : 'up'
-            const oppositeButtonSelector = oppositeDirection === 'up' 
+            const oppositeButtonSelector = oppositeDirection === 'up'
                 ? '.uikit-question-build-list-choices-container__choice-up-button'
                 : '.uikit-question-build-list-choices-container__choice-down-button'
             const oppositeButton = choiceEl.querySelector(oppositeButtonSelector) as HTMLButtonElement
@@ -288,12 +288,12 @@ const restoreFocusAfterMove = (movedChoiceKey: string) => {
     if (showBuildListOrder.value || reviewMode.value) {
         return
     }
-    
+
     // Don't restore focus to choice element if there's a focused arrow button
-    if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === movedChoiceKey) {
+    if (focusedArrowButton.value?.choiceKey === movedChoiceKey) {
         return
     }
-    
+
     const delay = prefersReducedMotion() ? 0 : 50
     setTimeout(() => {
         const choiceEl = choiceRefs.value.get(movedChoiceKey)
@@ -301,7 +301,7 @@ const restoreFocusAfterMove = (movedChoiceKey: string) => {
             // Temporarily make the choice focusable for animation
             choiceEl.setAttribute('tabindex', '0')
             choiceEl.focus()
-            
+
             // Remove tabindex after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 350
             setTimeout(() => {
@@ -316,7 +316,7 @@ const removeFocusAfterAnimation = (movedChoiceKey: string) => {
     if (showBuildListOrder.value || reviewMode.value) {
         return
     }
-    
+
     // Only remove focus if the move was NOT triggered by arrow keys
     // AND there's no focused arrow button that should maintain focus
     if (!isMoveTriggeredByArrowKey.value && !focusedArrowButton.value) {
@@ -335,7 +335,7 @@ const removeFocusAfterAnimation = (movedChoiceKey: string) => {
 const announceMove = (choiceText: string, newPosition: number, totalItems: number) => {
     // Clear previous announcement
     announcementMessage.value = ''
-    
+
     // Set new announcement after a brief delay to ensure screen readers pick it up
     const delay = prefersReducedMotion() ? 0 : 10
     setTimeout(() => {
@@ -346,31 +346,31 @@ const announceMove = (choiceText: string, newPosition: number, totalItems: numbe
 const moveChoiceUp = (index: number) => {
     if (index > 0) {
         const newChoices = [ ...orderedChoices.value ]
-        const currentItem = newChoices[ index ]
-        const previousItem = newChoices[ index - 1 ]
-        
+        const currentItem = newChoices[index]
+        const previousItem = newChoices[index - 1]
+
         if (currentItem && previousItem) {
             // Set move in progress flag
             isMoveInProgress.value = true
-            
+
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
-            
-            newChoices[ index ] = previousItem
-            newChoices[ index - 1 ] = currentItem
+
+            newChoices[index] = previousItem
+            newChoices[index - 1] = currentItem
             orderedChoices.value = newChoices
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
             announceMove(choiceText, index, orderedChoices.value.length)
-            
+
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
-            
+
             // Remove focus after animation if not triggered by arrow key
             removeFocusAfterAnimation(currentItem.key)
-            
+
             // Restore focus to arrow button if it was previously focused
-            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+            if (focusedArrowButton.value?.choiceKey === currentItem.key) {
                 const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
                 setTimeout(() => {
                     const focusedButton = focusedArrowButton.value
@@ -387,7 +387,7 @@ const moveChoiceUp = (index: number) => {
                     isMoveInProgress.value = false
                 }, delay)
             }
-            
+
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -400,32 +400,32 @@ const moveChoiceUp = (index: number) => {
 const moveChoiceDown = (index: number) => {
     if (index < orderedChoices.value.length - 1) {
         const newChoices = [ ...orderedChoices.value ]
-        const currentItem = newChoices[ index ]
-        const nextItem = newChoices[ index + 1 ]
-        
+        const currentItem = newChoices[index]
+        const nextItem = newChoices[index + 1]
+
         if (currentItem && nextItem) {
             // Set move in progress flag
             isMoveInProgress.value = true
-            
+
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
-            
-            newChoices[ index ] = nextItem
-            newChoices[ index + 1 ] = currentItem
+
+            newChoices[index] = nextItem
+            newChoices[index + 1] = currentItem
             orderedChoices.value = newChoices
-            
+
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
             announceMove(choiceText, index + 2, orderedChoices.value.length)
-            
+
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
-            
+
             // Remove focus after animation
             removeFocusAfterAnimation(currentItem.key)
-            
+
             // Restore focus to arrow button if it was previously focused
-            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+            if (focusedArrowButton.value?.choiceKey === currentItem.key) {
                 const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
                 setTimeout(() => {
                     const focusedButton = focusedArrowButton.value
@@ -442,7 +442,7 @@ const moveChoiceDown = (index: number) => {
                     isMoveInProgress.value = false
                 }, delay)
             }
-            
+
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -451,7 +451,7 @@ const moveChoiceDown = (index: number) => {
         }
     }
 }
- 
+
 const getCorrectPositionOrderNumber = (choice: TBuildListChoice) => {
     return Number(choice?.key.substring(1))
 }
@@ -461,7 +461,7 @@ const isChoiceInCorrectPosition = (choice: TBuildListChoice, currentIndex: numbe
     if (!correctOrderPosition) {
         return false
     }
-    
+
     const currentOrderPosition = currentIndex + 1
     return correctOrderPosition === currentOrderPosition
 }
@@ -496,7 +496,7 @@ watch(orderedChoices, () => {
 
 watch(selectedBuildListChoiceOrder, () => {
     if ((reviewMode.value || showBuildListOrder.value)) {
-        updateOrderedChoices() 
+        updateOrderedChoices()
     }
 })
 </script>
@@ -512,7 +512,7 @@ watch(selectedBuildListChoiceOrder, () => {
     width: 1px;
     height: 1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: circle(0);
     white-space: nowrap;
 }
 
@@ -564,7 +564,7 @@ watch(selectedBuildListChoiceOrder, () => {
         margin: 0;
         max-width: 492px;
         width: 100%;
-        
+
         &::after {
             left: -8px;
             right: -8px;
@@ -612,11 +612,11 @@ watch(selectedBuildListChoiceOrder, () => {
         &--floating {
             transform: translateY(-4px);
             z-index: 10;
-            
+
             .uikit-question-build-list-choices-container__choice {
                 outline: 2px solid $brand-blue;
                 outline-offset: 2px;
-                
+
                 &--dark {
                     outline-color: $banana-bread;
                 }
@@ -661,7 +661,7 @@ watch(selectedBuildListChoiceOrder, () => {
         font-weight: 500;
         line-height: 23px;
         letter-spacing: -0.1px;
-        
+
         &--dark {
             background-color: $jet;
         }
@@ -713,13 +713,13 @@ watch(selectedBuildListChoiceOrder, () => {
         border-radius: 5px;
         border: 1px solid rgba($pewter, 0.85);
         background-color: $white;
-        box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
+        box-shadow: 0 1px 4px 0 rgb(71, 89, 103, 0.30);
         outline: none;
 
         &--dark {
             border: 1px solid $slate;
             background-color: $brand-black;
-            box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
+            box-shadow: 0 1px 4px 0 rgb(71, 89, 103, 0.30);
         }
 
         &--mobile {
@@ -793,7 +793,7 @@ watch(selectedBuildListChoiceOrder, () => {
                 background-color: $butterscotch;
             }
         }
-        
+
         &--disabled {
             opacity: 0.3;
             cursor: default;
@@ -907,4 +907,4 @@ watch(selectedBuildListChoiceOrder, () => {
         }
     }
 }
-</style>
+</style>

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

@@ -10,13 +10,13 @@
             v-dark="isDarkMode"
             class="uikit-question-choices-container__choice-container"
             :class="{
-                'uikit-question-choices-container__choice-container--hover': 
+                'uikit-question-choices-container__choice-container--hover':
                     !showAnswers && hoverChoiceKey === choice.key,
-                'uikit-question-choices-container__choice-container--focus': 
+                'uikit-question-choices-container__choice-container--focus':
                     !showAnswers && focusChoiceKey === choice.key,
                 'uikit-question-choices-container__choice-container--selected': !showAnswers
                     && selectedChoices.includes(choice.key),
-                'uikit-question-choices-container__choice-container--correct': 
+                'uikit-question-choices-container__choice-container--correct':
                     !isMCR && showAnswers && !isUnanswered && answerKeys.includes(choice.key),
                 'uikit-question-choices-container__choice-container--incorrect': !isMCR && showAnswers
                     && selectedChoices.includes(choice.key)
@@ -87,7 +87,7 @@
                     v-dark="isDarkMode"
                     class="uikit-question-choices-container__mcr-checkbox"
                     :class="{
-                        'uikit-question-choices-container__mcr-checkbox--selected': 
+                        'uikit-question-choices-container__mcr-checkbox--selected':
                             selectedChoices.includes(choice.key),
                         'uikit-question-choices-container__mcr-checkbox--answer': showAnswers
                             && answerKeys.includes(choice.key),
@@ -971,4 +971,4 @@ const handleClick = (event: MouseEvent) => {
         }
     }
 }
-</style>
+</style>

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

@@ -100,8 +100,8 @@ const {
 
 const explanation = computed(() => {
     return highlightKeywordsInText({
-        text: question.value.explanation || '', 
-        keywordDefinitions: keywordDefinitions.value, 
+        text: question.value.explanation || '',
+        keywordDefinitions: keywordDefinitions.value,
         isDarkMode: isDarkMode.value,
         location: 'explanation',
     })
@@ -162,7 +162,7 @@ const toggleDropdownExplanationImageLongAlt = () => {
         line-height: 24px;
         font-weight: 400;
         padding-bottom: 6px;
-        
+
         .keyword-highlight {
             span {
                 font-size: 16px;
@@ -212,7 +212,7 @@ const toggleDropdownExplanationImageLongAlt = () => {
         letter-spacing: -0.1px;
         line-height: 22px;
         font-weight: 400;
-        word-break: break-word;
+        overflow-wrap: anywhere;
         margin-bottom: -7px;
 
         &--dark {
@@ -221,4 +221,4 @@ const toggleDropdownExplanationImageLongAlt = () => {
         }
     }
 }
-</style>
+</style>

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

@@ -48,7 +48,7 @@
             <Icon
                 class="uikit-question-explanation__toggle-explanation-img-description-icon"
                 :class="{
-                    'uikit-question-explanation__toggle-explanation-img-description-icon--up': 
+                    'uikit-question-explanation__toggle-explanation-img-description-icon--up':
                         showExplanationImageLongAlt,
                 }"
                 type="accordionArrow"
@@ -121,8 +121,8 @@ const {
 
 const explanation = computed(() => {
     return highlightKeywordsInText({
-        text: question.value.explanation || '', 
-        keywordDefinitions: keywordDefinitions.value, 
+        text: question.value.explanation || '',
+        keywordDefinitions: keywordDefinitions.value,
         isDarkMode: isDarkMode.value,
         location: 'explanation',
     })
@@ -223,7 +223,7 @@ const toggleExplanation = () => {
         letter-spacing: -0.1px;
         line-height: 26px;
         margin-bottom: 24px;
-        word-break: break-word;
+        overflow-wrap: anywhere;
 
         .keyword-highlight {
             span {
@@ -316,7 +316,7 @@ const toggleExplanation = () => {
         letter-spacing: -0.1px;
         line-height: 22px;
         font-weight: 600;
-        word-break: break-word;
+        overflow-wrap: anywhere;
 
         &--dark {
             color: $white;
@@ -337,4 +337,4 @@ const toggleExplanation = () => {
     }
 
 }
-</style>
+</style>