@pocketprep/ui-kit 3.4.1 → 3.4.3

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"
@@ -112,103 +74,22 @@
             >
                 Skip to Passage
             </PocketButton>
-            <div
+            <PassageAndImageDropdown
                 v-if="question.passage || passageImageUrl"
-                v-breakpoint:questionEl="breakpoints"
-                v-dark="isDarkMode"
+                ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
-                :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
-            >
-                <div
-                    v-dark="isDarkMode"
-                    class="uikit-question__passage-and-image-dropdown-btn"
-                    tabindex="0"
-                    role="button"
-                    :aria-expanded="showPassageImageDropdown ? 'true' : 'false'"
-                    @click.stop="showPassageImageDropdown = !showPassageImageDropdown"
-                    @keydown.enter.stop="showPassageImageDropdown = !showPassageImageDropdown"
-                    @mousedown.prevent
-                >
-                    <Icon
-                        v-if="question.passage"
-                        class="uikit-question__passage-dropdown-icon"
-                        type="passage"
-                    />
-                    <Icon
-                        v-else
-                        class="uikit-question__image-dropdown-icon"
-                        type="image"
-                    />
-                    <span v-dark="isDarkMode" class="uikit-question__passage-and-image-dropdown-text">
-                        {{ showPassageImageDropdown ? 'Hide' : 'Show' }}
-                        {{ passageAndImageTitle }}
-                    </span>
-                    <Icon
-                        v-dark="isDarkMode"
-                        class="uikit-question__passage-and-image-dropdown-arrow"
-                        :class="{
-                            'uikit-question__passage-and-image-dropdown-arrow--up': showPassageImageDropdown,
-                        }"
-                        type="accordionArrow"
-                    />
-                </div>
-                <div
-                    v-if="showPassageImageDropdown"
-                    v-breakpoint:questionEl="breakpoints"
-                    class="uikit-question__passage-and-image-dropdown-container"
-                >
-                    <div
-                        v-if="question.passage"
-                        v-breakpoint:questionEl="breakpoints"
-                        class="uikit-question__passage-dropdown-passage"
-                        :class="{
-                            'uikit-question__passage-dropdown-passage--with-image': passageImageUrl,
-                        }"
-                        v-html="question.passage"
-                    />
-                    <img
-                        v-if="passageImageUrl"
-                        v-dark="isDarkMode"
-                        class="uikit-question__image-dropdown-image"
-                        :class="{
-                            'uikit-question__image-dropdown-image--with-passage': question.passage,
-                        }"
-                        :src="passageImageUrl"
-                        :alt="`${passageImageAlt}. Extended image description below.`"
-                    >
-                    <PocketButton
-                        v-if="passageImageLongAlt"
-                        v-breakpoint:questionEl="breakpoints"
-                        type="tertiary-small"
-                        class="uikit-question__toggle-img-dropdown-img-description"
-                        :class="{
-                            'uikit-question__toggle-img-dropdown-img-description--open': showPassageImageLongAlt,
-                        }"
-                        :is-dark-mode="isDarkMode"
-                        :aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
-                        @click.stop="togglePassageImageLongAlt"
-                        @mousedown.prevent
-                    >
-                        <span class="uikit-question__toggle-img-dropdown-img-description-text">Image Description</span>
-                        <Icon
-                            class="uikit-question__toggle-img-dropdown-img-description-icon"
-                            :class="{
-                                'uikit-question__toggle-img-dropdown-img-description-icon--up': showPassageImageLongAlt,
-                            }"
-                            type="accordionArrow"
-                        />
-                    </PocketButton>
-                    <div
-                        v-if="showPassageImageLongAlt"
-                        ref="uikit-question__img-dropdown-img-description"
-                        v-breakpoint:questionEl="breakpoints"
-                        v-dark="isDarkMode"
-                        class="uikit-question__img-dropdown-img-description"
-                        tabindex="-1"
-                        v-html="passageImageLongAlt"
-                    />
-                </div>
-            </div>
+                :question="question"
+                :question-el="questionEl"
+                :breakpoints="breakpoints"
+                :is-dark-mode="isDarkMode"
+                :review-mode="reviewMode"
+                :image-url-prefix="imageUrlPrefix"
+                :passage-image-url="passageImageUrl"
+                :passage-image-long-alt="passageImageLongAlt"
+                :passage-image-alt="passageImageAlt"
+                :passage-and-image-title="passageAndImageTitle"
+                @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
+            />
             <div
                 v-if="showPaywall"
                 class="uikit-question__paywall-container"
@@ -951,42 +832,20 @@
 
 <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 PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.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 +853,8 @@ type TViewNames = {
         Icon,
         Table,
         OverflowTooltip,
+        QuestionContext,
+        PassageAndImageDropdown,
     },
     directives: {
         breakpoint,
@@ -1238,7 +1099,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)
         }
@@ -1500,12 +1362,17 @@ export default class Question extends Vue {
 
         if (this.showPassageImageLongAlt) {
             setTimeout(() => {
-                const mobileLongAlt = this.$refs['uikit-question__img-dropdown-img-description'] as Ref
+                const mobileLongAltComp = 
+                    this.$refs['uikit-question__passage-and-image-dropdown'] as ComponentPublicInstance | undefined
+                const mobileImgDropdownImgDescription = 
+                    // eslint-disable-next-line max-len
+                    mobileLongAltComp?.$refs['uikit-question-passage-and-image-dropdown__img-dropdown-img-description'] as HTMLElement | undefined
+
                 const longAlt = this.$refs['uikit-question__passage-image-description'] as Ref
 
                 // Checking offsetParent tells us which element is visible
-                if (mobileLongAlt?.offsetParent) {
-                    mobileLongAlt.focus()
+                if (mobileImgDropdownImgDescription?.offsetParent) {
+                    mobileImgDropdownImgDescription.focus()
                 } else if (longAlt?.offsetParent) {
                     longAlt.focus()
                 }
@@ -1865,7 +1732,6 @@ export default class Question extends Vue {
 
     &__toggle-passage-image-description-text,
     &__toggle-explanation-img-description-text,
-    &__toggle-img-dropdown-img-description-text,
     &__toggle-dropdown-explanation-img-description-text,
     &__toggle-summary-dropdown-explanation-img-description-text {
         outline: none;
@@ -1873,7 +1739,6 @@ export default class Question extends Vue {
 
     &__toggle-passage-image-description-icon,
     &__toggle-explanation-img-description-icon,
-    &__toggle-img-dropdown-img-description-icon,
     &__toggle-dropdown-explanation-img-description-icon,
     &__toggle-summary-dropdown-explanation-img-description-icon {
         margin-left: 8px;
@@ -2091,66 +1956,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;
@@ -2256,182 +2061,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__passage-and-image-dropdown-btn {
-        position: relative;
-        display: flex;
-        align-items: center;
-        border: 1px solid rgba($pewter, 0.85);
-        border-radius: 5px;
-        box-shadow: 0 1px 4px 0 rgba($ash, 0.3);
-        box-sizing: border-box;
-        height: 50px;
-        padding: 15px 57px 16px 48px;
-        margin: -1px;
-        cursor: pointer;
-        outline: none;
-
-        &:hover {
-            .uikit-question__passage-and-image-dropdown-text {
-                color: mix($brand-blue, black, 90%);
-            }
-
-            .uikit-question__passage-and-image-dropdown-arrow {
-                color: mix($brand-blue, black, 90%);
-            }
-
-            &::before {
-                content: '';
-                left: -2px;
-                top: -2px;
-                width: 100%;
-                height: 100%;
-                border: 2px solid $slate;
-                position: absolute;
-                border-radius: 5px;
-            }
-        }
-
-        &:focus::before {
-            content: '';
-            left: -3px;
-            top: -3px;
-            width: calc(100% + 4px);
-            height: calc(100% + 4px);
-            border: 1px solid $brand-blue;
-            position: absolute;
-            border-radius: 8px;
-        }
-
-        &--dark {
-            box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
-            border-color: $slate;
-
-            &:hover {
-                .uikit-question__passage-and-image-dropdown-text {
-                    color: $butterscotch;
-                }
-
-                .uikit-question__passage-and-image-dropdown-arrow {
-                    color: $butterscotch;
-                }
-
-                &::before {
-                    border-color: rgba($white, 0.6);
-                }
-            }
-
-            &:focus::before {
-                border-color: $banana-bread;
-            }
-        }
-    }
-
-    &__passage-and-image-dropdown-text {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 600;
-        color: $brand-blue;
-
-        &--dark {
-            color: $banana-bread;
-        }
-    }
-
-    &__passage-dropdown-icon,
-    &__image-dropdown-icon {
-        position: absolute;
-        left: 17px;
-        width: 19px;
-    }
-
-    &__passage-and-image-dropdown-arrow {
-        position: absolute;
-        right: 20px;
-        color: $brand-blue;
-
-        &--dark {
-            color: $banana-bread;
-        }
-
-        &--up {
-            transform: rotate(180deg);
-        }
-    }
-
-    &__passage-and-image-dropdown-container {
-        padding: 14px 15px 16px 16px;
-
-        &--mobile {
-            padding: 12px 15px 16px 15px;
-        }
-    }
-
-    &__passage-dropdown-passage {
-        box-sizing: border-box;
-        margin: 14px 20px 24px 17px;
-        line-height: 24px;
-        font-size: 16px;
-        font-weight: 400;
-        letter-spacing: -0.1;
-
-        &--mobile {
-            line-height: 24px;
-            font-size: 16px;
-        }
-
-        &--with-image {
-            margin-bottom: 16px;
-        }
-    }
-
-    &__image-dropdown-image {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        border: 1px solid $fog;
-
-        &--with-passage {
-            padding-top: 0;
-        }
-
-        &--dark {
-            border: 1px solid $jet;
-        }
-    }
-
-    &__toggle-img-dropdown-img-description {
-        margin-top: 16px;
-
-        &--open {
-            margin-bottom: 8px;
-        }
-    }
-
-    &__img-dropdown-img-description {
-        outline: none;
-        color: $ash;
-        font-size: 15px;
-        line-height: 22px;
-        font-weight: 500;
-        letter-spacing: -0.2;
-
-        &--dark {
-            color: $fog;
-        }
-
-        &--tablet-landscape {
-            margin-bottom: 4px;
-        }
-
-        &--tablet-portrait {
-            margin-bottom: 0;
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-
     &__unanswered-teach-review-label {
         margin-bottom: 12px;
         display: flex;

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

@@ -0,0 +1,41 @@
+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 TQuestionPassageAndImageTitle = 'Passage + Image' | 'Image' | 'Passage'
+
+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.1",
+  "version": "3.4.3",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {