@pocketprep/ui-kit 3.4.33 → 3.4.35

package/lib/components/Forms/Textarea.vue

@@ -4,22 +4,49 @@
         @mouseover="hover = true"
         @mouseout="hover = false"
     >
-        <label
-            v-if="label"
-            v-dark="isDarkMode"
-            class="uikit-textarea__label"
-            :class="{
-                'uikit-textarea__label--hover': hover,
-                'uikit-textarea__label--focus': focus
-            }"
-        >{{ label }}</label>
+        <div
+            class="uikit-textarea__container"
+        >
+            <label
+                v-if="label"
+                v-dark="isDarkMode"
+                class="uikit-textarea__label"
+                :class="{
+                    'uikit-textarea__label--hover': hover,
+                    'uikit-textarea__label--focus': focus
+                }"
+            >{{ label }}</label>
+            <div
+                v-if="showIconAndTooltip"
+                @mouseenter="showTextAreaTooltip = true"
+                @mouseleave="showTextAreaTooltip = false"
+                @focus="showTextAreaTooltip = true"
+                @blur="showTextAreaTooltip = false"
+            >
+                <Tooltip
+                    v-if="showTextAreaTooltip"
+                    :key="tooltipText"
+                    theme="offset"
+                    :is-dark-mode="isDarkMode"
+                >
+                    {{ tooltipText }}
+                </Tooltip>
+                <Icon
+                    type="info"
+                    class="uikit-textarea__icon"
+                    :class="{
+                        'uikit-textarea__icon--dark': isDarkMode
+                    }"
+                />
+            </div>
+        </div>
         <textarea
             v-dark="isDarkMode"
             :value="modelValue"
             :disabled="disabled"
             :placeholder="placeholder"
             :autofocus="autoFocus"
-            :style="{ height }"
+            :style="{ height, width }"
             class="uikit-textarea__textarea"
             :class="{
                 'uikit-textarea__textarea--hover': hover,
@@ -34,9 +61,15 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import Tooltip from '../Tooltips/Tooltip.vue'
 import { dark } from '../../directives'
 
 @Component({
+    components: {
+        Icon,
+        Tooltip,
+    },
     directives: {
         dark,
     },
@@ -49,10 +82,14 @@ export default class Textarea extends Vue {
     @Prop() disabled?: boolean
     @Prop() autoFocus?: boolean
     @Prop({ default: '150px' }) height?: string
+    @Prop({ default: '341px' }) width?: string
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) showIconAndTooltip!: boolean
+    @Prop({ default: '' }) tooltipText!: string
 
     hover = false
     focus = false
+    showTextAreaTooltip = false
 
     @Emit('update:modelValue')
     valueChange ($event: Event) {
@@ -66,6 +103,12 @@ export default class Textarea extends Vue {
 @import '../../styles/breakpoints';
 
 .uikit-textarea {
+    &__container {
+        position: relative;
+        display: flex;
+        outline: none;
+    }
+
     &__label {
         font-size: 13px;
         font-weight: 600;
@@ -99,6 +142,25 @@ export default class Textarea extends Vue {
         }
     }
 
+    .uikit-tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(-100% - 14px);
+
+        @include breakpoint('black-bear') {
+            left: 35%;
+        }
+    }
+
+    &__icon {
+        padding: 0 0 2px 5px;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
     &__textarea {
         background-color: $white;
         border: 1px solid rgba($pewter, 0.85);

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

@@ -166,7 +166,9 @@
                     :is-dark-mode="isDarkMode"
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
+                    :keyword-definitions="keywordDefinitions"
                     @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
+                    @click="handleClick"
                 />
             </div>
             <template v-if="!globalMetrics">
@@ -323,6 +325,7 @@ export default class ChoicesContainer extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     stripText (string?: string) {
         return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
@@ -383,6 +386,11 @@ export default class ChoicesContainer extends Vue {
     toggleDropdownExplanationImageLongAlt () {
         return
     }
+
+    @Emit('click')
+    handleClick (event: MouseEvent) {
+        return event
+    }
 }
 </script>
 

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

@@ -10,7 +10,7 @@
         <div
             v-dark="isDarkMode"
             class="uikit-question-dropdown-explanation__dropdown-explanation-text"
-            v-html="question.explanation"
+            v-html="explanation"
         />
         <img
             v-if="explanationImageUrl"
@@ -74,6 +74,7 @@ import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
 import { breakpoint, dark } from '../../../directives'
 import type { TBreakPointsObject, TChoice, TChoiceKey } from './../question'
+import { highlightKeywordsInText } from '../../../utils'
 
 @Component({
     components: {
@@ -105,6 +106,16 @@ export default class DropdownExplanation extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
+    
+    get explanation () {
+        return highlightKeywordsInText({
+            text: this.question.explanation || '', 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'dropdown-explanation',
+        })
+    }
     
     @Emit('toggleDropdownExplanationImageLongAlt')
     toggleDropdownExplanationImageLongAlt () {

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

@@ -17,7 +17,7 @@
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
             class="uikit-question-explanation__explanation-text"
-            v-html="question.explanation"
+            v-html="explanation"
         />
         <img
             v-if="explanationImageUrl"
@@ -92,6 +92,7 @@ import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
 import { breakpoint, dark } from '../../../directives'
 import type { TBreakPointsObject } from './../question'
+import { highlightKeywordsInText } from '../../../utils'
 
 @Component({
     components: {
@@ -121,6 +122,16 @@ export default class Explanation extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
+
+    get explanation () {
+        return highlightKeywordsInText({
+            text: this.question.explanation || '', 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'explanation',
+        })
+    }
     
     @Emit('toggleExplanationImageLongAlt')
     toggleExplanationImageLongAlt () {

package/lib/components/Quiz/Question.vue

@@ -66,7 +66,8 @@
                 :class="{
                     'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
                 }"
-                v-html="question.prompt"
+                @click="keywordClick"
+                v-html="prompt"
             />
             <PocketButton
                 v-if="question.passage || passageImageUrl"
@@ -178,6 +179,7 @@
                     :is-dark-mode="isDarkMode"
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
+                    :keyword-definitions="keywordDefinitions"
                     @emitChoiceMouseOver="choiceMouseOver"
                     @emitChoiceMouseLeave="choiceMouseLeave"
                     @emitChoiceFocusIn="choiceFocusIn"
@@ -189,6 +191,7 @@
                     @emitClickChoiceStrike="clickChoiceStrike"
                     @toggleChoiceExplanation="toggleExplanation"
                     @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
+                    @click="keywordClick"
                 >
                     <template #motivationalMoment="{
                         isCorrect,
@@ -330,7 +333,7 @@
                 :breakpoints="breakpoints"
                 @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
                 @emitMoveFocusToPrompt="moveFocusToPrompt"
-            />         
+            />
             <Explanation
                 ref="uikit-question__explanation"
                 class="uikit-question__explanation"
@@ -347,8 +350,10 @@
                 :is-dark-mode="isDarkMode"
                 :question-el="questionEl"
                 :breakpoints="breakpoints"
+                :keyword-definitions="keywordDefinitions"
                 @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 @toggleExplanation="toggleExplanation"
+                @click="keywordClick"
             />
         </div> 
     </div>
@@ -373,7 +378,7 @@ import Explanation from '../Quiz/Question/Explanation.vue'
 import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
-import { studyModes } from '../../utils'
+import { highlightKeywordsInText, studyModes } from '../../utils'
 import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
 
 @Component({
@@ -421,6 +426,7 @@ export default class Question extends Vue {
     @Prop({ default: false }) showPaywall!: boolean
     @Prop({ default: false }) hideReferences!: boolean
     @Prop({ default: false }) isTeachReview!: boolean
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     hoverChoiceKey: TChoiceKey | null = null
     focusChoiceKey: TChoiceKey | null = null
@@ -606,6 +612,15 @@ export default class Question extends Vue {
         return this.selectedChoices.length === 0
     }
 
+    get prompt () {
+        return highlightKeywordsInText({
+            text: this.question.prompt, 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'prompt',
+        })
+    }
+
     mounted () {
         if (this.reviewMode) {
             this.startReviewMode()
@@ -718,6 +733,19 @@ export default class Question extends Vue {
         }, 0)
     }
 
+    @Emit('keyword-click')
+    keywordClick (event: MouseEvent) {
+        const target = event.target as HTMLElement
+        if (target.classList.contains('keyword-highlight')) {
+            const keyword = target.innerHTML
+            const location = target.getAttribute('data-location')
+            return {
+                keyword,
+                location,
+            }
+        }
+    }
+
     startReviewMode () {
         this.showAnswers = true
         this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
@@ -1283,6 +1311,16 @@ export default class Question extends Vue {
         }
     }
 
+    .keyword-highlight {
+        text-decoration: underline;
+        text-decoration-color: $brand-blue;
+        cursor: pointer;
+
+        &--dark {
+            text-decoration-color: $banana-bread;
+        }
+    }
+
     &__prompt {
         outline: none;
         font-weight: 600;

package/lib/components/Tooltips/Tooltip.vue

@@ -17,7 +17,8 @@
                 class="uikit-tooltip-popup__triangle"
                 :class="{ 
                     'uikit-tooltip-popup__triangle--rightalign': theme === 'rightalign',
-                    'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign'
+                    'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign',
+                    'uikit-tooltip-popup__triangle--offset': theme === 'offset'
                 }"
             />
             <span>
@@ -37,7 +38,7 @@ import { dark } from '../../directives'
     },
 })
 export default class Tooltip extends Vue {
-    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign'
+    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign' | 'offset'
     @Prop({ default: null }) styles!: null | Record<string, string>
     @Prop({ default: false }) isDarkMode!: boolean
 
@@ -128,8 +129,12 @@ export default class Tooltip extends Vue {
     span {
         position: relative;
         z-index: 1;
-        max-width: 400px;
+        max-width: 482px;
         display: block;
+
+        @include breakpoint('black-bear') {
+            max-width: 341px;
+        }
     }
 
     &__triangle {
@@ -152,6 +157,16 @@ export default class Tooltip extends Vue {
             transform: none;
         }
 
+        &--offset {
+            left: 42%;
+            transform: none;
+
+            @include breakpoint('black-bear') {
+                left: 60%;
+                transform: none;
+            }
+        }
+
         &--dark {
             border-top-color: $white;
         }

package/lib/utils.ts

@@ -58,3 +58,25 @@ export const studyModes = {
         iconColorDM: BrandColors.pewter,
     },
 } as const
+
+export const highlightKeywordsInText = (params: {
+    text: string
+    keywordDefinitions: { keyword: string }[]
+    isDarkMode: boolean
+    location?: string
+}) => {
+    if (!params.keywordDefinitions.length) {
+        return params.text
+    }
+
+    const keywords = params.keywordDefinitions.map(k => k.keyword)
+
+    return keywords.reduce((acc, word) => {
+        const regex = new RegExp(`(${word})`, 'i')
+        return acc.replace(
+            regex, 
+            `<span class="keyword-highlight${params.isDarkMode 
+                ? ' keyword-highlight--dark' : ''}" data-location="${params.location}">$1</span>`
+        )
+    }, params.text)
+}

package/package.json

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