@pocketprep/ui-kit 3.9.6 → 3.9.7

package/lib/components/Buttons/Button.vue

@@ -44,7 +44,7 @@ import { dark as vDark } from '../../directives'
 
 type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary'
     | 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon'
-    | 'icon-yellow' | 'outline' | 'oval-dark'
+    | 'icon-yellow' | 'outline' | 'outline-grey' | 'oval-dark'
 
 const {
     type = 'primary',
@@ -570,6 +570,40 @@ const buttonClicked = (event: Event) => {
         }
     }
 
+    &--outline-grey {
+        user-select: none;
+        outline: none;
+        color: $brand-black;
+        background-color: $gray-background;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 19px;
+        height: 32px;
+        padding: 6px 8px;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 6px;
+        border: 1px solid rgba($pewter, 0.30);
+
+        &:hover,
+        &:focus {
+            border: 1px solid rgba($brand-blue, 0.40);
+            background: $barely-blue;
+        }
+
+        &--dark {
+            color: $barely-background;
+            background: $moonlit-ocean;
+            border: 1px solid $ash;
+
+            &:hover,
+            &:focus {
+                border: 1px solid rgba($banana-bread, 0.40);
+                background: rgba($banana-bread, 0.20);
+            }
+        }
+    }
+
     &:disabled {
         opacity: 0.4;
         cursor: auto;

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

@@ -62,6 +62,13 @@
             tabindex="-1"
             v-html="explanationImageLongAlt"
         />
+        <div
+            v-if="showTutorChatExplanationPrompts"
+            v-dark="isDarkMode"
+            class="uikit-question-explanation__tutor-chat-prompts"
+        >
+            <slot name="tutorChatExplanationPrompts" />
+        </div>
         <div
             v-if="reference && !hideReferences"
             v-dark="isDarkMode"
@@ -117,6 +124,7 @@ const {
     reviewMode,
     breakpointsWithEl,
     keywordDefinitions,
+    showTutorChatExplanationPrompts,
 } = useQuestionContext()
 
 const explanation = computed(() => {

package/lib/components/Quiz/Question/composables.ts

@@ -86,5 +86,6 @@ export const useQuestionContext = () => {
         selectedBuildListChoiceOrder: inject(InjectionKeys.selectedBuildListChoiceOrderKey, ref([])),
         isTeachGroupReview: inject(InjectionKeys.isTeachGroupReviewKey, ref(false)),
         showRightSideBar: inject(InjectionKeys.showRightSideBarKey, ref(false)),
+        showTutorChatExplanationPrompts: inject(InjectionKeys.showTutorChatExplanationPromptsKey, ref(false)),
     }
 }

package/lib/components/Quiz/Question/injectionSymbols.ts

@@ -85,3 +85,4 @@ export const selectedMPMCChoicesKey = Symbol('selectedMPMCChoices') as Injection
 export const selectedBuildListChoiceOrderKey = Symbol('selectedBuildListChoiceOrder') as InjectionKey<Ref<TBuildListChoiceKey[]>>
 export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>
 export const showRightSideBarKey = Symbol('showRightSideBar') as InjectionKey<Ref<boolean>>
+export const showTutorChatExplanationPromptsKey = Symbol('showTutorChatExplanationPrompt') as InjectionKey<Ref<boolean>>

package/lib/components/Quiz/Question.vue

@@ -445,6 +445,9 @@
                 <template #explanationBottomExperiment>
                     <slot name="explanationBottomExperiment" />
                 </template>
+                <template #tutorChatExplanationPrompts>
+                    <slot name="tutorChatExplanationPrompts" />
+                </template>
             </Explanation>
         </div>
     </div>
@@ -516,6 +519,7 @@ const props = withDefaults(defineProps<{
     isTeachGroupReview?: boolean
     keywordDefinitions?: { keyword: string; definition: string }[]
     showRightSideBar?: boolean
+    showTutorChatExplanationPrompts?: boolean
 }>(), {
     questionNumber: undefined,
     quizLength: undefined,
@@ -545,6 +549,7 @@ const props = withDefaults(defineProps<{
     isTeachGroupReview: false,
     keywordDefinitions: () => [],
     showRightSideBar: false,
+    showTutorChatExplanationPrompts: false,
 })
 
 const emit = defineEmits<{
@@ -580,6 +585,7 @@ const keywordDefinitions = computed(() => props.keywordDefinitions)
 const showPaywall = computed(() => props.showPaywall)
 const isTeachGroupReview = computed(() => props.isTeachGroupReview)
 const showRightSideBar = computed(() => props.showRightSideBar)
+const showTutorChatExplanationPrompts = computed(() => props.showTutorChatExplanationPrompts)
 const hoverChoiceKey = ref<TChoiceKey | null>(null)
 const focusChoiceKey = ref<TChoiceKey | null>(null)
 const choiceStrikes = ref<TChoiceKey[]>([])
@@ -1752,6 +1758,7 @@ provide(InjectionKeys.isBuildListOrderCorrectKey, isBuildListOrderCorrect)
 provide(InjectionKeys.selectedBuildListChoiceOrderKey, selectedBuildListChoiceOrder)
 provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 provide(InjectionKeys.showRightSideBarKey, showRightSideBar)
+provide(InjectionKeys.showTutorChatExplanationPromptsKey, showTutorChatExplanationPrompts)
 </script>
 
 <style lang="scss">

package/package.json

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