@pocketprep/ui-kit 3.4.52 → 3.4.54

package/lib/components/Forms/Checkbox.vue

@@ -7,8 +7,9 @@
             'uikit-checkbox--disabled': disabled,
             'uikit-checkbox--checked': modelValue === true,
             'uikit-checkbox--checked--disabled': disabled && modelValue === true,
-            'uikit-checkbox--indeterminate': modelValue === null
+            'uikit-checkbox--indeterminate': modelValue === null,
         }"
+        :style="checkboxStyles"
         :tabindex="disabled ? -1 : 0"
         :aria-checked="modelValue === true ? true : modelValue === null ? 'mixed' : false"
         role="checkbox"
@@ -25,6 +26,7 @@
             v-dark="isDarkMode"
             type="check"
             class="uikit-checkbox__check"
+            :style="checkboxCheckStyles"
         />
         <div
             v-if="modelValue === null"
@@ -54,6 +56,12 @@ export default class Checkbox extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: false }) hasLabel!: boolean
 
+    /*******    Element-specific style props    *******/
+    // .uikit-checkbox
+    @Prop() checkboxStyles!: Record<string, string>
+    // .uikit-checkbox__check
+    @Prop() checkboxCheckStyles!: Record<string, string>
+
     hover = false
     focus = false
 

package/lib/components/Forms/Radio.vue

@@ -37,21 +37,16 @@
                 role="radio"
                 :aria-checked="modelValue && item.value === modelValue.value"
                 :aria-label="`${item.label}${ item.helperText ? ` ${item.helperText}` : '' }`"
-                @click="!(disabled || item.disabled) && selectItem(item)"
+                @click="!(disabled || item.disabled ) && selectItem(item)"
                 @keydown.enter.space="keyPressedItem"
                 @mousedown.prevent
             >
                 <slot name="radioItem" :item="item">
-                    <div 
-                        v-dark="isDarkMode" 
-                        class="uikit-radio__item-btn" 
-                        :class="{ 
-                            'uikit-radio__item-btn--selected': modelValue && item.value === modelValue.value,
-                            'uikit-radio__item-btn--disabled': disabled || item.disabled,
-                            'uikit-radio__item-btn--selected--disabled': (disabled || item.disabled) && modelValue 
-                                && item.value === modelValue.value,
-                        }"
-                        aria-hidden="true"
+                    <RadioButton
+                        :selected="!!(modelValue && item.value === modelValue.value)"
+                        :disabled="!!(disabled || item.disabled)"
+                        :isDarkMode="isDarkMode"
+                        color="blue"
                     />
                     <div class="uikit-radio__item-text" aria-hidden="true">
                         <slot name="radioItemLabel" :item="item">
@@ -73,6 +68,7 @@
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
 import { dark } from '../../directives'
+import RadioButton from './RadioButton.vue'
 
 interface IItem {
     value: string
@@ -82,6 +78,9 @@ interface IItem {
 }
 
 @Component({
+    components: {
+        RadioButton,
+    },
     directives: {
         dark,
     },
@@ -302,6 +301,7 @@ export default class Radio extends Vue {
 
             &--disabled {
                 opacity: 0.4;
+                
             }
 
             &::before {

package/lib/components/Forms/RadioButton.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { dark as vDark } from '../../directives'
+
+defineProps<{
+    selected: boolean
+    disabled: boolean
+    isDarkMode: boolean
+    color: 'blue' | 'green' | 'gray'
+}>()
+</script>
+
+<template>
+    <div 
+        v-dark="isDarkMode" 
+        class="uikit-radio-btn" 
+        :class="{ 
+            'uikit-radio-btn--selected': selected,
+            'uikit-radio-btn--disabled': disabled,
+            [`uikit-radio-btn--${color}`]: true,
+        }"
+        aria-hidden="true"
+    />
+</template>
+
+<style lang="scss" scoped>
+@import '../../styles/colors';
+
+.uikit-radio-btn {
+    width: 18px;
+    height: 18px;
+    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;
+        }
+
+        &::before {
+            display: block;
+        }
+    }
+
+    &--selected#{&}--disabled {
+        opacity: 0.4;
+    }
+
+    &--selected#{&}--green {
+        border-color: $cadaverous;
+        &::before {
+            background: $cadaverous;
+        }
+        &--dark {
+            border-color: $jungle-green;
+            &::before {
+                background: $jungle-green;
+            }
+        }
+    }
+
+    &--selected#{&}--gray {
+        &::before {
+            background: $slate;
+        }
+        &--dark {
+            &::before {
+                background: $pewter;
+            }
+        }
+    }
+
+    &--green {
+        &::before {
+            background: $jungle-green;
+        }
+
+        &--dark {
+            &::before {
+                background: $jungle-green;
+            }
+        }
+    }
+
+    &--gray {
+        border-color: $slate;
+        
+        &::before {
+            background: $slate;
+        }
+
+        &--dark {
+            border-color: $pewter;
+
+            &::before {
+                background: $pewter;
+            }
+        }
+    }
+}
+</style>

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

@@ -169,7 +169,11 @@
                     :keyword-definitions="keywordDefinitions"
                     @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
                     @click="handleClick"
-                />
+                >
+                    <template #explanationTopExperiment>
+                        <slot name="explanationTopExperiment"></slot>
+                    </template>
+                </DropdownExplanation>
             </div>
             <template v-if="!globalMetrics">
                 <div

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

@@ -7,6 +7,7 @@
             'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics
         }"
     >
+        <slot name="explanationTopExperiment"></slot>
         <div
             v-dark="isDarkMode"
             class="uikit-question-dropdown-explanation__dropdown-explanation-text"
@@ -113,7 +114,7 @@ export default class DropdownExplanation extends Vue {
             text: this.question.explanation || '', 
             keywordDefinitions: this.keywordDefinitions, 
             isDarkMode: this.isDarkMode,
-            location: 'dropdown-explanation',
+            location: 'explanation',
         })
     }
     
@@ -174,6 +175,12 @@ export default class DropdownExplanation extends Vue {
         line-height: 24px;
         font-weight: 400;
         padding-bottom: 6px;
+        
+        .keyword-highlight {
+            span {
+                font-size: 16px;
+            }
+        }
 
         p {
             margin: 10px 0;

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

@@ -13,6 +13,7 @@
         >
             Explanation Details
         </div>
+        <slot name="explanationTopExperiment"></slot>
         <div
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -233,6 +234,12 @@ export default class Explanation extends Vue {
         margin-bottom: 24px;
         word-break: break-word;
 
+        .keyword-highlight {
+            span {
+                font-size: 16.5px;
+            }
+        }
+
         &--dark {
             color: $white;
         }