@pocketprep/ui-kit 3.4.0 → 3.4.2

package/lib/components/Forms/Select.vue

@@ -523,6 +523,7 @@ export default class Select extends Vue {
 
     &__input {
         cursor: text !important;
+        padding-right: 32px;
 
         &--error {
             border: 1px solid $red-pegasus;
@@ -535,6 +536,10 @@ export default class Select extends Vue {
 
     &__value {
         user-select: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-right: 32px;
 
         &--subtext {
             height: 60px;

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

@@ -0,0 +1,158 @@
+<template>
+    <div
+        ref="uikit-question-context"
+        v-breakpoint:questionEl="breakpoints"
+        class="uikit-question-context"
+        tabindex="-1"
+    >
+        <slot name="contextIcon">
+            <Icon
+                v-dark="isDarkMode"
+                class="uikit-question-context__icon"
+                :type="contextIconType"
+            />
+        </slot>
+        <h2
+            v-if="quizMode === 'qotd'"
+            v-dark="isDarkMode"
+            class="uikit-question-context__text"
+        >
+            Question of the Day
+        </h2>
+        <h2
+            v-else
+            v-dark="isDarkMode"
+            class="uikit-question-context__text"
+            :aria-label="`Question ${
+                questionNumber
+            }${
+                quizMode !== 'timed'
+                    ? ` of ${quizLength}`
+                    : ''
+            }${
+                showAnswers
+                    ? isCorrect
+                        ? ', Answered Correctly'
+                        : ', Answered Incorrectly'
+                    : ''
+            }`"
+            aria-live="assertive"
+        >
+            <div class="uikit-question-context__current-index" aria-hidden="true">
+                Question {{ questionNumber }}
+            </div>
+            <div
+                v-if="quizMode !== 'timed'"
+                class="uikit-question-context__quiz-length"
+                aria-hidden="true"
+            >
+                / {{ quizLength }}
+            </div>
+        </h2>
+        <div
+            class="uikit-question-context__tag"
+            v-breakpoint:questionEl="breakpoints"
+        >
+            <slot name="tag" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import Icon from '../../Icons/Icon.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TQuizMode, TContextIcon, TBreakPointsObject } from './../question'
+
+@Component({
+    components: {
+        Icon,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class QuestionContext extends Vue {
+    @Prop() quizLength!: number
+    @Prop({ default: 'quick10' }) quizMode!: TQuizMode
+    @Prop() questionNumber!: number
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) isCorrect!: boolean
+    @Prop() contextIconType!: TContextIcon 
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: false }) showAnswers!: boolean
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-context {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 28px;
+    padding-top: 60px;
+    outline: none;
+
+    &--tablet-landscape {
+        padding-top: 42px;
+    }
+
+    &--tablet-portrait {
+        padding-top: 52px;
+    }
+
+    &--mobile {
+        padding-top: 22px;
+        margin-bottom: 28px;
+    }
+
+    &__icon {
+        margin-bottom: 8px;
+        margin-left: 6px;
+        color: $ash;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__tag {
+        margin-top: 8px;
+        margin-bottom: -5px;
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__text {
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 0.2px;
+        line-height: 17px;
+        color: $ash;
+        margin: 0;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__quiz-length {
+        margin-left: 5px;
+        font-weight: 500;
+    }
+}
+</style>

package/lib/components/Quiz/Question.vue

@@ -34,65 +34,27 @@
             }"
         >
             <slot name="context">
-                <div
+                <QuestionContext
                     ref="uikit-question__context"
                     v-breakpoint:questionEl="breakpoints"
                     class="uikit-question__context"
                     tabindex="-1"
+                    :quiz-length="quizLength"
+                    :quiz-mode="quizMode"
+                    :question-number="questionNumber"
+                    :is-dark-mode="isDarkMode"
+                    :context-icon-type="contextIconType"
+                    :show-answers="showAnswers"
+                    :question-el="questionEl"
+                    :breakpoints="breakpoints"
                 >
-                    <slot name="contextIcon">
-                        <Icon
-                            v-dark="isDarkMode"
-                            class="uikit-question__context-icon"
-                            :type="contextIconType"
-                        />
-                    </slot>
-                    <slot name="contextText">
-                        <h2
-                            v-if="quizMode === 'qotd'"
-                            v-dark="isDarkMode"
-                            class="uikit-question__context-text"
-                        >
-                            Question of the Day
-                        </h2>
-                        <h2
-                            v-else
-                            v-dark="isDarkMode"
-                            class="uikit-question__context-text"
-                            :aria-label="`Question ${
-                                questionNumber
-                            }${
-                                quizMode !== 'timed'
-                                    ? ` of ${quizLength}`
-                                    : ''
-                            }${
-                                showAnswers
-                                    ? isCorrect
-                                        ? ', Answered Correctly'
-                                        : ', Answered Incorrectly'
-                                    : ''
-                            }`"
-                            aria-live="assertive"
-                        >
-                            <div class="uikit-question__current-index" aria-hidden="true">
-                                Question {{ questionNumber }}
-                            </div>
-                            <div
-                                v-if="quizMode !== 'timed'"
-                                class="uikit-question__quiz-length"
-                                aria-hidden="true"
-                            >
-                                / {{ quizLength }}
-                            </div>
-                        </h2>
-                    </slot>
-                    <div
-                        class="uikit-question__tag"
-                        v-breakpoint:questionEl="breakpoints"
-                    >
+                    <template #contextIcon>
+                        <slot name="contextIcon" />
+                    </template>
+                    <template #tag>
                         <slot name="tag" />
-                    </div>
-                </div>
+                    </template>
+                </QuestionContext>
             </slot>
             <div
                 ref="prompt"
@@ -951,42 +913,19 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
+import type { ComponentPublicInstance } from 'vue'
 import PocketButton from '../Buttons/Button.vue'
 import Icon from '../Icons/Icon.vue'
 import type { ITableColumn, ITableSortSettings } from '../Tables/table'
 import Table from '../Tables/Table.vue'
 import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
+import QuestionContext from '../Quiz/Question/QuestionContext.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { studyModes } from '../../utils'
 import PaywallImageLight from '../../assets/question/paywall-light.png'
 import PaywallImageDark from '../../assets/question/paywall-dark.png'
-
-type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
-type TChoice = { text?: string; key: TChoiceKey }
-type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
-    totalAnswered: number
-    answeredCorrectly: number
-}
-type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
-type Ref = HTMLElement | null
-type TNamesRow = {
-    id: string
-    nameOne: string
-    isFlaggedByNameOne: boolean
-    nameTwo?: string
-    isFlaggedByNameTwo?: boolean
-    nameThree?: string
-    isFlaggedByNameThree?: boolean
-}
-
-type TViewNames = {
-    [ key: string ]: {
-        id: string
-        name: string
-        isFlaggedByStudent: boolean
-    }[]
-}
+import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
 
 @Component({
     components: {
@@ -994,6 +933,7 @@ type TViewNames = {
         Icon,
         Table,
         OverflowTooltip,
+        QuestionContext,
     },
     directives: {
         breakpoint,
@@ -1238,7 +1178,8 @@ export default class Question extends Vue {
             this.moveFocusToPrompt()
         } else if (this.autoFocusPrompt === false) {
             setTimeout(() => {
-                const contextEl = this.$refs['uikit-question__context'] as HTMLElement | undefined
+                const contextComp = this.$refs['uikit-question__context'] as ComponentPublicInstance | undefined
+                const contextEl = contextComp?.$refs['uikit-question-context'] as HTMLElement | undefined
                 contextEl?.focus()
             }, 0)
         }
@@ -2091,66 +2032,6 @@ export default class Question extends Vue {
         font-weight: 600;
     }
 
-    &__context {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        flex-shrink: 0;
-        margin-bottom: 28px;
-        padding-top: 60px;
-        outline: none;
-
-        &--tablet-landscape {
-            padding-top: 42px;
-        }
-
-        &--tablet-portrait {
-            padding-top: 52px;
-        }
-
-        &--mobile {
-            padding-top: 22px;
-        }
-    }
-
-    &__context-icon {
-        margin-bottom: 8px;
-        margin-left: 6px;
-        color: $ash;
-
-        &--dark {
-            color: $fog;
-        }
-    }
-
-    &__context-text {
-        display: flex;
-        font-size: 14px;
-        font-weight: 600;
-        letter-spacing: 0.2px;
-        line-height: 17px;
-        color: $ash;
-        margin: 0;
-
-        &--dark {
-            color: $fog;
-        }
-    }
-
-    &__quiz-length {
-        margin-left: 5px;
-        font-weight: 500;
-    }
-
-    &__tag {
-        margin-top: 8px;
-        margin-bottom: -5px;
-
-        &--mobile {
-            display: none;
-        }
-    }
-
     &__tag-mobile {
         display: none;
         position: absolute;

package/lib/components/Quiz/question.d.ts

@@ -0,0 +1,39 @@
+export type Ref = HTMLElement | null
+
+export type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+
+export type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
+
+// eslint-disable-next-line max-len
+export type TContextIcon = 'quick10' | 'calendar' | 'missedQuestions' | 'subject' | 'stopwatch' | 'exam' | 'levelup' | 'pencil'
+
+export type TBreakPointsObject = {
+    mobile: number
+    tabletPortrait: number
+    tabletLandscape: number
+}
+
+export type TChoice = { text?: string; key: TChoiceKey }
+
+export type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
+    totalAnswered: number
+    answeredCorrectly: number
+}
+
+export type TNamesRow = {
+    id: string
+    nameOne: string
+    isFlaggedByNameOne: boolean
+    nameTwo?: string
+    isFlaggedByNameTwo?: boolean
+    nameThree?: string
+    isFlaggedByNameThree?: boolean
+}
+
+export type TViewNames = {
+    [ key: string ]: {
+        id: string
+        name: string
+        isFlaggedByStudent: boolean
+    }[]
+}

package/package.json

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