@pocketprep/ui-kit 3.4.56 → 3.4.57

package/lib/components/Buttons/Button.vue

@@ -45,7 +45,7 @@ import { dark } from '../../directives'
 
 type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary' 
 | 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon' 
-| 'icon-yellow'
+| 'icon-yellow' | 'outline'
 
 @Component({
     components: {
@@ -115,6 +115,7 @@ export default class Button extends Vue {
     &--primary,
     &--primary-yellow,
     &--primary-red,
+    &--outline,
     &--secondary,
     &--secondary-yellow-dark {
         font-size: 15px;
@@ -142,7 +143,7 @@ export default class Button extends Vue {
         }
 
         &--dark:enabled:focus::before {
-            border-color: $butterscotch;
+            border-color: $banana-bread;
         }
     }
 
@@ -233,6 +234,48 @@ export default class Button extends Vue {
         }
     }
 
+    &--outline {
+        background-color: $white;
+        color: $brand-blue;
+        font-size: 15px;
+        font-weight: 600;
+        border: 1px solid $brand-blue;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                background-color: $pearl;
+            }
+
+            &:focus::before {
+                content: '';
+                position: absolute;
+                top: -3px;
+                bottom: -3px;
+                left: -3px;
+                right: -3px;
+                border-radius: 6px;
+            }
+        }
+
+        &:disabled {
+            opacity: 0.4;
+        }
+
+        &--dark {
+            background-color: $charcoal;
+            color: $banana-bread;
+            border-color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:active {
+                    background-color: $mariner;
+                }
+            }
+        }
+    }
+
     &--secondary {
         background-color: transparent;
         color: $brand-blue;

package/lib/components/Forms/Radio.vue

@@ -43,6 +43,7 @@
             >
                 <slot name="radioItem" :item="item">
                     <RadioButton
+                        class="uikit-radio__item-btn"
                         :selected="!!(modelValue && item.value === modelValue.value)"
                         :disabled="!!(disabled || item.disabled)"
                         :isDarkMode="isDarkMode"
@@ -248,66 +249,8 @@ export default class Radio extends Vue {
     }
 
     &__item-btn {
-        width: 18px;
-        height: 18px;
+        min-width: 18px;
         margin-right: 12px;
-        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;
-            }
-
-            &--disabled {
-                opacity: 0.4;
-                
-            }
-
-            &::before {
-                display: block;
-            }
-        }
     }
 }
 </style>

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

@@ -171,7 +171,10 @@
                     @click="handleClick"
                 >
                     <template #explanationTopExperiment>
-                        <slot name="explanationTopExperiment"></slot>
+                        <slot name="explanationTopExperiment" />
+                    </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
                     </template>
                 </DropdownExplanation>
             </div>

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

@@ -65,6 +65,7 @@
             <span class="uikit-question-dropdown-explanation__dropdown-reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
     </div>
 </template>
 

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

@@ -13,7 +13,7 @@
         >
             Explanation Details
         </div>
-        <slot name="explanationTopExperiment"></slot>
+        <slot name="explanationTopExperiment" />
         <div
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -70,6 +70,7 @@
             <span class="uikit-question-explanation__reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
         <div
             v-if="!reviewMode"
             v-dark="isDarkMode"

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

@@ -96,6 +96,7 @@
                 <span class="uikit-question-summary__summary-dropdown-reference-label">Reference: </span>
                 <div v-html="reference" />
             </div>
+            <slot name="explanationBottomExperiment" />
         </div>
         <Icon
             v-if="isQuestionCorrect"

package/lib/components/Quiz/Question.vue

@@ -230,6 +230,9 @@
                             :choiceKey="choiceKey"
                         />
                     </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
+                    </template>
                 </ChoicesContainer>
                 <MatrixChoicesContainer
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
@@ -339,6 +342,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Summary>
             <slot name="metricsTiles">
                 <StatsSummary
@@ -469,6 +475,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Explanation>
         </div> 
     </div>

package/package.json

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