@pocketprep/ui-kit 3.5.0 → 3.5.2

package/lib/components/Pagination/QuestionReviewPagination.vue

@@ -45,8 +45,8 @@ import { computed } from 'vue'
 import Icon from '../Icons/Icon.vue'
 
 const props = withDefaults(defineProps<{
-    currentPage: number
-    total: number
+    currentPage?: number
+    total?: number
 }>(), {
     currentPage: 0,
     total: 0,
@@ -71,8 +71,8 @@ const changePage = (direction: 'next' | 'previous') => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-review-pagination {
     display: flex;

package/lib/components/Pagination/TablePagination.vue

@@ -121,8 +121,8 @@ export default class TablePagination extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table-pagination {
     display: flex;

package/lib/components/Quiz/FlagToggle.vue

@@ -93,8 +93,8 @@ export default class FlagToggle extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-flag-toggle {
     position: relative;

package/lib/components/Quiz/GlobalMetricsToggle.vue

@@ -47,6 +47,7 @@ import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
 
 @Component({
+    name: 'GlobalMetricsToggle',
     components: {
         Tooltip,
         Icon,
@@ -74,8 +75,8 @@ export default class GlobalMetricsToggle extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-global-metrics-toggle {
     position: relative;

package/lib/components/Quiz/KeyboardShortcutsButton.vue

@@ -60,7 +60,7 @@ export default class KeyboardShortcutsButton extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-keyboard-shortcuts-btn {
     position: relative;

package/lib/components/Quiz/KeyboardShortcutsModal.vue

@@ -180,7 +180,7 @@ export default class KeyboardShortcutsModal extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-keyboard-modal {
     box-sizing: border-box;

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

@@ -377,8 +377,9 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-choices-container {
     display: contents;
@@ -814,7 +815,7 @@ const handleClick = (event: MouseEvent) => {
             color: $white;
 
             &:hover {
-                background-color: mix($brand-blue, black, 90%);
+                background-color: color.mix($brand-blue, black, 90%);
             }
 
             &:focus {

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

@@ -113,8 +113,8 @@ const toggleDropdownExplanationImageLongAlt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-dropdown-explanation {
     &__dropdown-explanation {

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

@@ -138,8 +138,8 @@ const toggleExplanation = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-explanation {
     position: relative;

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

@@ -204,7 +204,6 @@ const emit = defineEmits<{
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     question,
     isMatrixQuestionCorrect,
@@ -272,7 +271,7 @@ const convertSelectedMatrixChoiceToCheckboxGrid = () => {
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
         const colIndex = Number(choice.split('_').pop()) - 1
-        const row = checkboxGrid && checkboxGrid[rowIndex]
+        const row = checkboxGrid?.[rowIndex]
         if (row) {
             row[colIndex] = true
         }
@@ -284,7 +283,7 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
     const radioBtnGrid = defaultRadioButtonGrid.value
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-        const row = radioBtnGrid && radioBtnGrid[rowIndex]
+        const row = radioBtnGrid?.[rowIndex]
         if (row) {
             row.value = choice
         }
@@ -334,7 +333,7 @@ const correctlySelectedChoice = (rowIndex: number, colIndex: number) => {
 const incorrectlySelectedChoice = (rowIndex: number, colIndex: number) => {
     if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
         const selectedChoice = selectedChoiceKey(rowIndex, colIndex)
-        if (selectedChoice && selectedChoice.startsWith('d')) {
+        if (selectedChoice?.startsWith('d')) {
             return true
         }
     }
@@ -348,11 +347,11 @@ const correctAnswerButNotSelected = (rowIndex: number, colIndex: number) => {
 }
 
 const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
     if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
-        const borderColor = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const borderColor = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             borderColor: `${borderColor} !important`,
             background: `${borderColor} !important`,
@@ -375,9 +374,9 @@ const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
     if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
-        const color = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const color = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             color: `${color} !important`,
         }
@@ -401,11 +400,7 @@ watch(matrixCheckboxGrid, () => {
 
         matrixCheckboxGrid.value?.forEach((row, rowIndex) => {
             row.forEach((choice, choiceIndex) => {
-                if (
-                    choice && 
-                        matrixChoiceLayout.value?.[rowIndex] && 
-                        matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex]
-                ) {
+                if (choice && matrixChoiceLayout?.value?.[rowIndex]?.[choiceIndex]) {
                     const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey | null
                     if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
@@ -432,12 +427,12 @@ watch(matrixRadioGrid, () => {
 }, { deep: true })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
@@ -446,8 +441,8 @@ watch(selectedMatrixChoices, () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-matrix-choices-container {
     width: 100%;

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

@@ -74,8 +74,8 @@ const selectChoice = (choiceKey: TMatrixChoiceKey) => {
 </template>
 
 <style lang="scss" scoped>
-@import '../../../styles/breakpoints';
-@import '../../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-matrix-radio-group {
     display: flex;

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

@@ -169,7 +169,6 @@ const emit = defineEmits<{
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     question,
     isMatrixQuestionCorrect,
@@ -298,7 +297,7 @@ const correctlySelectedChoice = (rowIndex: number, columnIndex: number) => {
 const incorrectlySelectedChoice = (rowIndex: number, columnIndex: number) => {
     if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
         const selectedChoice = selectedChoiceKey(rowIndex, columnIndex)
-        if (selectedChoice && selectedChoice.startsWith('d')) {
+        if (selectedChoice?.startsWith('d')) {
             return true
         }
     }
@@ -312,11 +311,11 @@ const correctAnswerButNotSelected = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
     if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
-        const borderColor = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const borderColor = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             borderColor: `${borderColor} !important`,
             background: `${borderColor} !important`,
@@ -339,9 +338,9 @@ const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
     if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
-        const color = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const color = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             color: `${color} !important`,
         }
@@ -349,11 +348,10 @@ const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const correctRow = (rowIndex: number) => {
-    if (matrixChoiceLayout.value && matrixChoiceLayout.value[rowIndex]) {
+    if (matrixChoiceLayout.value?.[rowIndex]) {
         if (
             question?.value.type === 'Matrix Checkbox' && 
-            matrixCheckboxGrid.value &&
-            matrixCheckboxGrid.value[rowIndex]
+            matrixCheckboxGrid.value?.[rowIndex]
         ) {
             const correctAnswerKeys = matrixChoiceLayout.value[rowIndex]?.filter(choice => 
                 choice.startsWith('a')
@@ -371,8 +369,7 @@ const correctRow = (rowIndex: number) => {
 
         if (
             question?.value.type === 'Matrix Radio Button' && 
-            matrixRadioGrid.value &&
-            matrixRadioGrid.value[rowIndex]
+            matrixRadioGrid.value?.[rowIndex]
         ) {
             const rowVal = matrixRadioGrid.value[rowIndex]?.value
             if (rowVal) {
@@ -402,7 +399,7 @@ const convertSelectedMatrixChoiceToCheckboxGrid = () => {
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
         const columnIndex = Number(choice.split('_').pop()) - 1
-        const row = checkboxGrid && checkboxGrid[rowIndex]
+        const row = checkboxGrid?.[rowIndex]
         if (row) {
             row[columnIndex] = true
             if (selectedColumnHeaders.value[rowIndex] && question.value.matrixLabels?.columns[columnIndex]) {
@@ -441,7 +438,7 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
                 selectedColumnHeaders.value[rowIndex]?.push(columnHeader)
             }
         }
-        const radioBtnGridRow = radioBtnGrid && radioBtnGrid[rowIndex]
+        const radioBtnGridRow = radioBtnGrid?.[rowIndex]
         if (radioBtnGridRow) {
             radioBtnGridRow.value = choice
         }
@@ -450,12 +447,12 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
 }
 
 const checkboxRowClicked = (rowIndex: number, columnIndex: number) => {
-    const matrixCheckboxGridRow = matrixCheckboxGrid.value && matrixCheckboxGrid.value[rowIndex]
+    const matrixCheckboxGridRow = matrixCheckboxGrid.value?.[rowIndex]
     if (matrixCheckboxGridRow) {
         matrixCheckboxGridRow[columnIndex] = !matrixCheckboxGridRow[columnIndex]
         const columnHeader = question.value.matrixLabels?.columns[columnIndex]
 
-        if (selectedColumnHeaders.value && selectedColumnHeaders.value[rowIndex] && columnHeader) {
+        if (selectedColumnHeaders.value?.[rowIndex] && columnHeader) {
             if (selectedColumnHeaders.value[rowIndex]?.includes(columnHeader)) {
                 const columnHeaderIndex = selectedColumnHeaders.value[rowIndex]?.indexOf(columnHeader)
                 if (columnHeaderIndex !== undefined && columnHeaderIndex !== -1) {
@@ -493,16 +490,12 @@ const emitSelectedMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
 }
 
 watch(matrixCheckboxGrid, () => {
-    if (matrixChoiceLayout.value && matrixCheckboxGrid.value && (!reviewMode || !showMatrixAnswers.value)) {
+    if (matrixChoiceLayout.value && matrixCheckboxGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
         const selectedCheckboxChoices: TMatrixChoiceKey[] = []
 
         matrixCheckboxGrid.value.forEach((row, rowIndex) => {
             row.forEach((choice, choiceIndex) => {
-                if (
-                    choice && 
-                        matrixChoiceLayout.value?.[rowIndex] && 
-                        matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex]
-                ) {
+                if (choice && matrixChoiceLayout?.value?.[rowIndex]?.[choiceIndex]) {
                     const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey
                     if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
@@ -516,7 +509,7 @@ watch(matrixCheckboxGrid, () => {
 }, { deep: true })
 
 watch(matrixRadioGrid, () => {
-    if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode || !showMatrixAnswers.value)) {
+    if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
         const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
 
         matrixRadioGrid.value.forEach((row) => {
@@ -536,12 +529,12 @@ watch(showMatrixAnswers, () => {
 })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
@@ -549,8 +542,8 @@ watch(selectedMatrixChoices, () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-mobile-matrix-choices-container {
     width: 100%;

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

@@ -4,15 +4,17 @@ import { dark as vDark } from '../../../directives'
 import type { TMatrixChoiceKey } from '../question'
 
 interface Props {
-    isDarkMode: boolean
+    isDarkMode?: boolean
     choices?: TMatrixChoiceKey[]
     labels?: string[]
-    showAnswers: boolean
-    disabled: boolean
+    showAnswers?: boolean
+    disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     isDarkMode: false,
+    choices: () => [],
+    labels: () => [],
     showAnswers: false,
     disabled: false,
 })
@@ -91,8 +93,8 @@ const stripHtmlTags = (string?: string) => {
 </template>
 
 <style lang="scss" scoped>
-@import '../../../styles/breakpoints';
-@import '../../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-mobile-matrix-radio-group {
     list-style: none;

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

@@ -102,8 +102,8 @@ const emitMoveFocusToPrompt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image {
     position: relative;

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

@@ -141,8 +141,9 @@ const togglePassageImageLongAltDropdown = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-passage-and-image-dropdown {
     &__passage-and-image-dropdown-btn {
@@ -161,11 +162,11 @@ const togglePassageImageLongAltDropdown = () => {
 
         &:hover {
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow {
-                color: mix($brand-blue, black, 90%);
+                color: color.mix($brand-blue, black, 90%);
             }
 
             &::before {
@@ -261,7 +262,7 @@ const togglePassageImageLongAltDropdown = () => {
         line-height: 24px;
         font-size: 16px;
         font-weight: 400;
-        letter-spacing: -0.1;
+        letter-spacing: -0.1px;
 
         &--mobile {
             line-height: 24px;
@@ -315,7 +316,7 @@ const togglePassageImageLongAltDropdown = () => {
         font-size: 15px;
         line-height: 22px;
         font-weight: 500;
-        letter-spacing: -0.2;
+        letter-spacing: -0.2px;
 
         &--dark {
             color: $fog;

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

@@ -66,8 +66,8 @@ const emitUpgradeClick = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-paywall {
     width: 100%;

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

@@ -65,7 +65,6 @@ import { useQuestionContext } from './composables'
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     breakpointsWithEl,
     quizLength,
@@ -85,8 +84,8 @@ defineExpose({
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-context {
     display: flex;

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

@@ -42,8 +42,8 @@ const {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-stats-summary {
     margin-top: 24px;

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

@@ -180,8 +180,8 @@ const toggleSummaryExplanationImageLongAlt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-summary {
     position: relative;