@pocketprep/ui-kit 3.4.71 → 3.4.72

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

@@ -143,6 +143,10 @@
                         :review-mode="reviewMode"
                         :show-answers="showMatrixAnswers"
                         class="uikit-question-matrix-choices-container__radio-btns"
+                        :class="{
+                            'uikit-question-matrix-choices-container__radio-btns--three-columns':
+                                numberOfMatrixColumnLabels === 3,
+                        }"
                         :choices="getRadioRowChoices(rowIndex)"
                         :is-dark-mode="isDarkMode"
                         :disabled="false"
@@ -488,22 +492,17 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__column-row-header {
-        width: 286px;
-
-        &--tablet-landscape {
-            width: 285px;
-        }
-
-        &--tablet-portrait {
-            width: 275px;
-        }
+        width: 290px;
+        margin-right: 16px;
 
         &--two-columns {
-            width: 303px;
+            width: 288px;
+            margin-right: 16px;
         }
 
         &--radio-btn-three-columns {
-            width: 276px;
+            width: 290px;
+            margin-right: 16px;
         }
     }
 
@@ -512,7 +511,7 @@ export default class MatrixChoicesContainer extends Vue {
         hyphens: auto;
 
         &:not(:last-child) {
-            margin-right: 11px;
+            margin-right: 16px;
         }
 
         &--tablet-landscape {
@@ -528,14 +527,16 @@ export default class MatrixChoicesContainer extends Vue {
         }
 
         &--two-columns {
+            width: 88px;
+
             &:not(:last-child) {
-                margin-right: 24px;
+                margin-right: 16px;
             }
         }
 
         &--radio-btn-three-columns {
             &:not(:last-child) {
-                margin-right: 15px;
+                margin-right: 16px;
             }
         }
     }
@@ -622,7 +623,7 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__choice-text {
-        width: 303px;
+        width: 279px;
         min-height: fit-content;
         color: $brand-black;
         font-size: 16.5px;
@@ -633,12 +634,12 @@ export default class MatrixChoicesContainer extends Vue {
 
         &--two-columns {
             width: 279px;
-            margin-right: 24px;
+            margin-right: 14px;
         }
 
         &--radio-btn-two-columns {
             width: 279px;
-            margin-right: 12px;
+            margin-right: 14px;
         }
 
         &--dark {
@@ -668,7 +669,11 @@ export default class MatrixChoicesContainer extends Vue {
         display: flex;
 
         &--two-columns {
-            width: 80px;
+            width: 88px;
+
+            &:not(&:last-child) {
+                margin-right: 16px;
+            }
         }
 
         .uikit-checkbox--disabled {
@@ -677,14 +682,13 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__clickable-checkbox {
-        width: 36px;
-        height: 36px;
+        width: 40px;
+        height: 40px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: -8px;
-        margin-left: -8px;
+        margin-top: -10px;
 
         &--review {
             cursor: default;
@@ -718,6 +722,13 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    &__radio-btns {
+        &--three-columns {
+            position: relative;
+            left: 6px;
+        }
+    }
+
     &__radio-btn-correct-answer-icon {
         margin-top: -10px;
         width: 21px;

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

@@ -92,7 +92,11 @@ const selectChoice = (choiceKey: string) => {
         width: 72px;
 
         &--two-options {
-            width: 80px;
+            width: 88px;
+
+            &:first-child {
+                margin-right: 16px;
+            }
         }
 
         &:last-child {

package/lib/components/Quiz/Question.vue

@@ -135,6 +135,7 @@
                     'uikit-question__choices--correct': showAnswers && isMCR && isCorrect,
                     'uikit-question__choices--incorrect': 
                         showAnswers && (isMCR || isUnanswered) && !isCorrect && !isTeachReview,
+                    'uikit-question__choices--matrix': isMatrixQuestion,
                     'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                     'uikit-question__choices--show-stats': globalMetrics,
                     'uikit-question__choices--no-actions': !(isMCR || isUnanswered || isMatrixQuestion)
@@ -1896,6 +1897,10 @@ export default class Question extends Vue {
         &--incorrect#{&}--unanswered:not(&--show-stats) {
             margin-bottom: 71px;
         }
+
+        &--matrix {
+            max-width: 518px;
+        }
     }
 
     &__unanswered-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.71",
+  "version": "3.4.72",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {