@pocketprep/ui-kit 3.4.76 → 3.4.78

package/lib/components/Forms/RadioButton.vue

@@ -28,6 +28,8 @@ defineProps<{
 .uikit-radio-btn {
     width: 18px;
     height: 18px;
+    min-height: 18px;
+    min-width: 18px;
     border: 1px solid $steel;
     background: $white;
     border-radius: 18px;

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

@@ -119,7 +119,7 @@
                                 ? 'Correct Answer, '
                                 : 'Incorrect Answer, '
                             : ''
-                    }${ stripText(choice.text) }`"
+                    }${ stripHtmlTags(choice.text) }`"
                     v-html="choice.text"
                 />
                 <PocketButton
@@ -334,11 +334,15 @@ export default class ChoicesContainer extends Vue {
     } }) breakpoints!: TBreakPointsObject
     @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
-    stripText (string?: string) {
-        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    stripHtmlTags (string?: string) {
+        if (string) {
+            const div = document.createElement('div')
+            div.innerHTML = string
+            return div.textContent || ''
+        }
+        return ''
     }
 
-
     @Emit('emitChoiceFocusIn')
     emitChoiceFocusIn (choiceKey: TChoiceKey) {
         return choiceKey

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

@@ -48,7 +48,7 @@
                         class="uikit-question-mobile-matrix-choices-container__row-label"
                         v-dark="isDarkMode"
                     >
-                        {{ stripText(rowLabel) }}
+                        {{ stripHtmlTags(rowLabel) }}
                         <Icon
                             class="uikit-question-mobile-matrix-choices-container__toggle-row-icon"
                             :class="{
@@ -78,8 +78,8 @@
                                 >
                                     {{ selectedColumnHeaders[rowIndex][colHeaderIndex] === 
                                         selectedColumnHeaders[rowIndex][selectedColumnHeaders[rowIndex].length - 1] ?
-                                            stripText(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
-                                            `${stripText(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
+                                            stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
+                                            `${stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
                                     }}
                                 </div>
                             </template>
@@ -127,7 +127,7 @@
                                     matrixChoiceLayout[rowIndex][columnIndex]?.startsWith('d'),
                             }"
                         >
-                            {{ stripText(column) }}
+                            {{ stripHtmlTags(column) }}
                         </div>
                     </div>
                 </div>
@@ -204,8 +204,13 @@ export default class MobileMatrixChoicesContainer extends Vue {
     selectedColumnHeaders: string[][] = []
     brandColors = BrandColors
 
-    stripText (string?: string) {
-        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    stripHtmlTags (string?: string) {
+        if (string) {
+            const div = document.createElement('div')
+            div.innerHTML = string
+            return div.textContent || ''
+        }
+        return ''
     }
 
     get defaultCheckboxGrid () {

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

@@ -40,8 +40,13 @@ const radioButtonColor = (choice: string) => {
     return 'blue'
 }
 
-const stripText = (string?: string) => {
-    return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+const stripHtmlTags = (string?: string) => {
+    if (string) {
+        const div = document.createElement('div')
+        div.innerHTML = string
+        return div.textContent || ''
+    }
+    return ''
 }
 </script>
 
@@ -78,7 +83,7 @@ const stripText = (string?: string) => {
                 }"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
             >
-                {{ stripText(labels[index]) }}
+                {{ stripHtmlTags(labels[index]) }}
             </div>
         </li>
     </ul>
@@ -102,9 +107,9 @@ const stripText = (string?: string) => {
 
     &__option {
         display: flex;
-        align-items: center;
-        padding-left: 15px;
-        min-height: 47px;
+        align-items: flex-start;
+        align-self: stretch;
+        padding: 11px 15px 12px 15px;
         max-width: 325px;
         border: 0.5px solid rgba($pewter, 0.85);
         border-top: none;

package/package.json

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