@pocketprep/ui-kit 3.9.5 → 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/Icons/Icon.vue

@@ -75,6 +75,8 @@ import IconReadiness from './IconReadiness.vue'
 import IconConcept from './IconConcept.vue'
 import IconStar from './IconStar.vue'
 import IconRecommendedFilter from './IconRecommendedFilter.vue'
+import IconTutorChat from './IconTutorChat.vue'
+import IconMinimize from './IconMinimize.vue'
 
 withDefaults(defineProps<{
     type?: TIconType
@@ -175,4 +177,6 @@ withDefaults(defineProps<{
     <IconConcept v-else-if="type === 'concept'" :title="title" />
     <IconStar v-else-if="type === 'star'" :title="title" />
     <IconRecommendedFilter v-else-if="type === 'recommendedFilter'" :title="title" />
+    <IconTutorChat v-else-if="type === 'tutorChat'" :title="title" />
+    <IconMinimize v-else-if="type === 'minimize'" :title="title" />
 </template>

package/lib/components/Icons/IconMinimize.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
+<template>
+    <!-- eslint-disable -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="2" viewBox="0 0 18 2" fill="none">
+        <title>{{ title }}</title>
+        <rect width="18" height="2" rx="1" fill="currentColor"/>
+    </svg>
+    <!-- eslint-enable -->
+</template>

package/lib/components/Icons/IconTutorChat.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
+<template>
+    <!-- eslint-disable -->
+    <svg width="29" height="27" viewBox="0 0 29 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.12891 5.12988C2.04554 5.40534 2 5.69733 2 6V17C2 18.6569 3.34315 20 5 20H7V22L9.5 20H16.7695L19.3535 22H10L5 27V22C2.23858 22 1.12748e-07 19.7614 0 17V8C0 6.64624 0.89708 5.50326 2.12891 5.12988Z" fill="currentColor"/>
+        <path d="M26 1H8C6.89543 1 6 1.89543 6 3V14C6 15.1046 6.89543 16 8 16H17.3203L17.5811 16.1865L23 20.0566V16H26C27.1046 16 28 15.1046 28 14V3C28 1.89543 27.1046 1 26 1Z" stroke="currentColor" stroke-width="2"/>
+    </svg>
+    <!-- eslint-enable -->
+</template>

package/lib/components/Icons/icon.d.ts

@@ -74,3 +74,5 @@ export type TIconType =
     | 'concept'
     | 'star'
     | 'recommendedFilter'
+    | 'tutorChat'
+    | 'minimize'

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

@@ -132,7 +132,10 @@
                     v-breakpoint="breakpointsWithEl"
                     type="tertiary-small"
                     class="uikit-question-choices-container__toggle-explanation"
-                    :class="{ 'uikit-question-choices-container__toggle-explanation--review-mode': reviewMode }"
+                    :class="{
+                        'uikit-question-choices-container__toggle-explanation--review-mode': reviewMode,
+                        'uikit-question-choices-container__toggle-explanation--right-side-bar-open': showRightSideBar,
+                    }"
                     :is-dark-mode="isDarkMode"
                     :aria-expanded="showExplanation ? 'true' : 'false'"
                     @click.stop="toggleChoiceExplanation"
@@ -317,6 +320,7 @@ const {
     passageImageUrl,
     isCorrect,
     breakpointsWithEl,
+    showRightSideBar,
 } = useQuestionContext()
 
 const emitChoiceFocusIn = (choiceKey: TChoiceKey) => {
@@ -725,6 +729,10 @@ const handleClick = (event: MouseEvent) => {
         &--mobile {
             display: block;
         }
+
+        &--tablet-landscape#{&}--right-side-bar-open {
+            display: block;
+        }
     }
 
     &__toggle-explanation-text {
@@ -739,6 +747,10 @@ const handleClick = (event: MouseEvent) => {
             display: initial;
         }
 
+        &--tablet-landscape#{&}--right-side-bar-open {
+            display: initial;
+        }
+
         &--up {
             transform: rotate(180deg);
         }

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

@@ -4,7 +4,8 @@
         ref="uikit-question-dropdown-explanation"
         class="uikit-question-dropdown-explanation__dropdown-explanation"
         :class="{
-            'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics
+            'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics,
+            'uikit-question-dropdown-explanation__dropdown-explanation--right-side-bar-open': showRightSideBar,
         }"
     >
         <slot name="explanationTopExperiment"></slot>
@@ -96,6 +97,7 @@ const {
     isDarkMode,
     breakpointsWithEl,
     keywordDefinitions,
+    showRightSideBar,
 } = useQuestionContext()
 
 const explanation = computed(() => {
@@ -124,6 +126,10 @@ const toggleDropdownExplanationImageLongAlt = () => {
             display: block;
         }
 
+        &--tablet-landscape#{&}--right-side-bar-open {
+            display: block;
+        }
+
         &--show-stats {
             padding-bottom: 23px;
             padding-right: 66px;

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(() => {
@@ -147,7 +155,7 @@ const toggleExplanation = () => {
     border: 1px solid rgba($pewter, 0.85);
     border-bottom: 0;
     border-radius: 6px 6px 0 0;
-    padding: 42px 60px 72px;
+    padding: 44px 34px 72px;
     box-sizing: border-box;
     max-width: 565px;
     min-height: 100%;

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

@@ -85,5 +85,7 @@ export const useQuestionContext = () => {
         selectedMPMCChoices: inject(InjectionKeys.selectedMPMCChoicesKey, ref([])),
         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

@@ -84,3 +84,5 @@ export const selectedMatrixChoicesKey = Symbol('selectedMatrixChoices') as Injec
 export const selectedMPMCChoicesKey = Symbol('selectedMPMCChoices') as InjectionKey<Ref<TChoiceKey[]>>
 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

@@ -35,6 +35,7 @@
                 'uikit-question__main--matrix-question-review-mode': isMatrixQuestion && reviewMode,
                 'uikit-question__main--mpmc-question-review-mode': isMPMCQuestion && reviewMode,
                 'uikit-question__main--build-list-question-review-mode': isBuildListQuestion && reviewMode,
+                'uikit-question__main--right-side-bar-open': showRightSideBar,
             }"
         >
             <div v-if="!showPassageAndImage && !showExplanation && !showPaywall">
@@ -421,6 +422,7 @@
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
                 'uikit-question__right-side--matrix-question-review-mode': isMatrixQuestion && reviewMode,
                 'uikit-question__right-side--mpmc-question-review-mode': isMPMCQuestion && reviewMode,
+                'uikit-question__right-side--right-side-bar-open': showRightSideBar,
             }"
         >
             <PassageAndImage
@@ -443,6 +445,9 @@
                 <template #explanationBottomExperiment>
                     <slot name="explanationBottomExperiment" />
                 </template>
+                <template #tutorChatExplanationPrompts>
+                    <slot name="tutorChatExplanationPrompts" />
+                </template>
             </Explanation>
         </div>
     </div>
@@ -513,6 +518,8 @@ const props = withDefaults(defineProps<{
     isTeachReview?: boolean
     isTeachGroupReview?: boolean
     keywordDefinitions?: { keyword: string; definition: string }[]
+    showRightSideBar?: boolean
+    showTutorChatExplanationPrompts?: boolean
 }>(), {
     questionNumber: undefined,
     quizLength: undefined,
@@ -541,6 +548,8 @@ const props = withDefaults(defineProps<{
     isTeachReview: false,
     isTeachGroupReview: false,
     keywordDefinitions: () => [],
+    showRightSideBar: false,
+    showTutorChatExplanationPrompts: false,
 })
 
 const emit = defineEmits<{
@@ -575,6 +584,8 @@ const hideReferences = computed(() => props.hideReferences)
 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[]>([])
@@ -1746,6 +1757,8 @@ provide(InjectionKeys.buildListChoiceScoresKey, buildListChoiceScores)
 provide(InjectionKeys.isBuildListOrderCorrectKey, isBuildListOrderCorrect)
 provide(InjectionKeys.selectedBuildListChoiceOrderKey, selectedBuildListChoiceOrder)
 provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
+provide(InjectionKeys.showRightSideBarKey, showRightSideBar)
+provide(InjectionKeys.showTutorChatExplanationPromptsKey, showTutorChatExplanationPrompts)
 </script>
 
 <style lang="scss">
@@ -1810,11 +1823,15 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
             width: 51%;
         }
 
-        &--show-side#{&}--tablet-landscape:not(&--tablet-portrait) {
+        &--show-side#{&}--tablet-landscape:not(&--tablet-portrait):not(&--right-side-bar-open) {
             width: 50%;
             padding-right: 36px;
         }
 
+        &--right-side-bar-open#{&}--tablet-landscape:not(&--tablet-portrait) {
+            width: 100%
+        }
+
         &--unanswered#{&}--mobile,
         &--mcr#{&}--mobile {
             display: inline-block;
@@ -1858,6 +1875,10 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
             display: none;
         }
 
+        &--tablet-landscape#{&}--right-side-bar-open {
+            display: none;
+        }
+
         &--matrix-question-review-mode#{&}--tablet-landscape,
         &--mpmc-question-review-mode#{&}--tablet-landscape {
             display: none;

package/lib/components/Quiz/QuizContainer.vue

@@ -14,7 +14,11 @@
             >
                 <slot name="header" />
             </div>
-            <div class="uikit-quiz-container__main" :style="customMainStyles">
+            <div
+                class="uikit-quiz-container__main"
+                :class="{ 'uikit-quiz-container__main--right-side-bar-open': showRightSideBar }"
+                :style="customMainStyles"
+            >
                 <div
                     v-if="showSide"
                     v-breakpoint="{ containerEl: quizContainerEl }"
@@ -24,6 +28,14 @@
                     <slot name="definition"></slot>
                     <slot name="side" />
                 </div>
+                <div
+                    v-if="showRightSideBar"
+                    v-breakpoint="{ containerEl: quizContainerEl }"
+                    v-dark="isDarkMode"
+                    class="uikit-quiz-container__right-side"
+                >
+                    <slot name="rightSide" />
+                </div>
                 <div
                     v-breakpoint="{ containerEl: quizContainerEl }"
                     class="uikit-quiz-container__question"
@@ -53,12 +65,14 @@ import { dark as vDark, breakpoint as vBreakpoint } from '../../directives'
 
 withDefaults(defineProps<{
     showSide?: boolean
+    showRightSideBar?: boolean
     isDarkMode?: boolean
     customHeaderStyles?: Record<string, string>
     customMainStyles?: Record<string, string>
     customFooterStyles?: Record<string, string>
 }>(), {
     showSide: false,
+    showRightSideBar: false,
     isDarkMode: false,
     customHeaderStyles: () => ({}),
     customMainStyles: () => ({}),
@@ -90,14 +104,14 @@ onMounted(() => {
     flex-direction: column;
     height: 100%;
     background-color: $brand-black;
-    padding: 0 65px;
+    padding: 0 34px;
 
     &--desktop {
-        padding: 0 22px 0 23px;
+        padding: 0 18px;
     }
 
     &--tablet-portrait {
-        padding: 0 19px;
+        padding: 0 18px;
     }
 
     &--mobile {
@@ -141,6 +155,14 @@ onMounted(() => {
         }
     }
 
+    &--mobile &__main--right-side-bar-open {
+        flex-direction: column;
+
+        .uikit-quiz-container__question {
+            display: none;
+        }
+    }
+
     &__side {
         background-color: $black-feather;
         color: $white;
@@ -167,6 +189,31 @@ onMounted(() => {
         }
     }
 
+    &__right-side {
+        background-color: $black-feather;
+        color: $white;
+        width: 350px;
+        height: 100%;
+        margin-left: 18px;
+        border-radius: 6px;
+        order: 1;
+
+        &--dark {
+            background-color: $evening;
+        }
+
+        &--tablet-portrait {
+            width: 290px;
+        }
+
+        &--mobile {
+            width: 100%;
+            margin-left: 0;
+            flex: 1;
+            min-width: 0;
+        }
+    }
+
     &__question {
         position: relative;
         background-color: $gray-background;
@@ -174,6 +221,7 @@ onMounted(() => {
         box-shadow: 0 -2px 8px 0 rgba($brand-black, 0.15);
         flex: 1;
         height: 100%;
+        order: 0;
 
         &--show-side#{&}--tablet-landscape {
             border-radius: 0 6px 6px 0;

package/package.json

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