@pocketprep/ui-kit 3.4.9 → 3.4.11

package/lib/components/Quiz/Question.vue

@@ -78,6 +78,7 @@
                 v-if="question.passage || passageImageUrl"
                 ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
+                :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
                 :question="question"
                 :question-el="questionEl"
                 :breakpoints="breakpoints"
@@ -310,149 +311,42 @@
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
             }"
         >
-            <div
+            <PassageAndImage
                 v-if="showPassageAndImage"
-                v-breakpoint:questionEl="breakpoints"
+                ref="uikit-question__passage-and-image"
                 class="uikit-question__passage-and-image"
-            >
-                <div
-                    ref="uikit-question__passage-and-image-title"
-                    v-dark="isDarkMode"
-                    class="uikit-question__passage-and-image-title"
-                    tabindex="-1"
-                >
-                    {{ passageAndImageTitle }}
-                </div>
-                <div
-                    v-if="question.passage"
-                    class="uikit-question__passage"
-                    v-html="question.passage"
-                />
-                <img
-                    v-if="passageImageUrl"
-                    v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
-                    class="uikit-question__image"
-                    :src="passageImageUrl"
-                    :alt="`${passageImageAlt}. Extended image description below.`"
-                >
-                <PocketButton
-                    v-if="passageImageLongAlt"
-                    v-breakpoint:questionEl="breakpoints"
-                    type="tertiary-small"
-                    class="uikit-question__toggle-passage-image-description"
-                    :is-dark-mode="isDarkMode"
-                    :aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
-                    @click.stop="togglePassageImageLongAlt"
-                    @mousedown.prevent
-                >
-                    <span class="uikit-question__toggle-passage-image-description-text">Image Description</span>
-                    <Icon
-                        class="uikit-question__toggle-passage-image-description-icon"
-                        :class="{
-                            'uikit-question__toggle-passage-image-description-icon--up': showPassageImageLongAlt,
-                        }"
-                        type="accordionArrow"
-                    />
-                </PocketButton>
-                <div
-                    v-if="showPassageImageLongAlt"
-                    ref="uikit-question__passage-image-description"
-                    v-dark="isDarkMode"
-                    class="uikit-question__passage-image-description"
-                    tabindex="-1"
-                    v-html="passageImageLongAlt"
-                />
-                <PocketButton
-                    class="uikit-question__return-to-prompt"
-                    @click="moveFocusToPrompt"
-                >
-                    Return to Question
-                </PocketButton>
-            </div>
-            <div
-                v-if="showExplanation && !showPaywall"
-                v-breakpoint:questionEl="breakpoints"
-                v-dark="isDarkMode"
+                :question="question"
+                :show-passage-image-long-alt="showPassageImageLongAlt"
+                :show-passage-and-image="showPassageAndImage"
+                :passage-image-url="passageImageUrl"
+                :passage-image-long-alt="passageImageLongAlt"
+                :passage-image-alt="passageImageAlt"
+                :passage-and-image-title="passageAndImageTitle"
+                :is-dark-mode="isDarkMode"
+                :question-el="questionEl"
+                :breakpoints="breakpoints"
+                @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
+                @emitMoveFocusToPrompt="moveFocusToPrompt"
+            />         
+            <Explanation
+                ref="uikit-question__explanation"
                 class="uikit-question__explanation"
-            >
-                <div
-                    ref="explanation"
-                    v-dark="isDarkMode"
-                    class="uikit-question__explanation-title"
-                    tabindex="-1"
-                >
-                    Explanation Details
-                </div>
-                <div
-                    v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
-                    class="uikit-question__explanation-text"
-                    v-html="question.explanation"
-                />
-                <img
-                    v-if="explanationImageUrl"
-                    v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
-                    class="uikit-question__explanation-image"
-                    :class="{
-                        'uikit-question__explanation-image--long-alt': explanationImageLongAlt,
-                    }"
-                    :src="explanationImageUrl"
-                    :alt="`${explanationImageAlt}. Extended image description below.`"
-                >
-                <PocketButton
-                    v-if="explanationImageLongAlt"
-                    v-breakpoint:questionEl="breakpoints"
-                    type="tertiary-small"
-                    class="uikit-question__toggle-explanation-img-description"
-                    :class="{
-                        'uikit-question__toggle-explanation-img-description--open': showExplanationImageLongAlt,
-                    }"
-                    :is-dark-mode="isDarkMode"
-                    :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
-                    @click.stop="toggleExplanationImageLongAlt"
-                    @mousedown.prevent
-                >
-                    <span class="uikit-question__toggle-explanation-img-description-text">Image Description</span>
-                    <Icon
-                        class="uikit-question__toggle-explanation-img-description-icon"
-                        :class="{
-                            'uikit-question__toggle-explanation-img-description-icon--up': showExplanationImageLongAlt,
-                        }"
-                        type="accordionArrow"
-                    />
-                </PocketButton>
-                <div
-                    v-if="showExplanationImageLongAlt"
-                    ref="uikit-question__explanation-img-description"
-                    v-dark="isDarkMode"
-                    class="uikit-question__explanation-img-description"
-                    tabindex="-1"
-                    v-html="explanationImageLongAlt"
-                />
-                <div
-                    v-if="reference && !hideReferences"
-                    v-dark="isDarkMode"
-                    class="uikit-question__reference"
-                >
-                    <span class="uikit-question__reference-label">Reference: </span>
-                    <div v-html="reference" />
-                </div>
-                <div
-                    v-if="!reviewMode"
-                    v-dark="isDarkMode"
-                    class="uikit-question__explanation-close"
-                    tabindex="0"
-                    role="button"
-                    aria-label="Close explanation"
-                    @keydown.enter.stop="toggleExplanation"
-                    @click.stop="toggleExplanation"
-                    @mousedown.prevent
-                >
-                    <Icon type="close" />
-                </div>
-            </div>
+                :question="question"
+                :show-explanation="showExplanation"
+                :show-paywall="showPaywall"
+                :review-mode="reviewMode"
+                :show-explanation-image-long-alt="showExplanationImageLongAlt"
+                :explanation-image-url="explanationImageUrl"
+                :explanation-image-alt="explanationImageAlt"
+                :explanation-image-long-alt="explanationImageLongAlt"
+                :reference="reference"
+                :hide-references="hideReferences"
+                :is-dark-mode="isDarkMode"
+                :question-el="questionEl"
+                :breakpoints="breakpoints"
+                @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
+                @toggleExplanation="toggleExplanation"
+            />
         </div> 
     </div>
 </template>
@@ -472,6 +366,8 @@ import Paywall from '../Quiz/Question/Paywall.vue'
 import Summary from '../Quiz/Question/Summary.vue'
 import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
 import StatsSummary from '../Quiz/Question/StatsSummary.vue'
+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'
@@ -490,6 +386,8 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         Summary,
         ChoicesContainer,
         StatsSummary,
+        Explanation,
+        PassageAndImage,
     },
     directives: {
         breakpoint,
@@ -799,8 +697,14 @@ export default class Question extends Vue {
 
     moveFocusToPassage () {
         setTimeout(() => {
-            const passageTitleEl = this.$refs['uikit-question__passage-and-image-title'] as HTMLElement | undefined
-            passageTitleEl?.focus()
+            const passageAndImageComp = 
+                this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
+            const passageTitleEl = 
+                // eslint-disable-next-line max-len
+                passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-and-image-title'] as HTMLElement | undefined
+            if (passageTitleEl) {
+                passageTitleEl?.focus()
+            }
         }, 0)
     }
 
@@ -1005,7 +909,11 @@ export default class Question extends Vue {
                 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
+                
+                const passageAndImageComp = 
+                    this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
+                const longAlt = 
+                    passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-image-description'] as Ref
 
                 // Checking offsetParent tells us which element is visible
                 if (mobileImgDropdownImgDescription?.offsetParent) {
@@ -1045,7 +953,9 @@ export default class Question extends Vue {
                     }
                 }
 
-                const longAlt = this.$refs['uikit-question__explanation-img-description'] as Ref
+                const explanationComp = 
+                    this.$refs['uikit-question__explanation'] as ComponentPublicInstance | undefined
+                const longAlt = explanationComp?.$refs['uikit-question-explanation__explanation-img-description'] as Ref
 
                 // Checking offsetParent tells us which element is visible
                 if (mcrLongAlt?.offsetParent) {
@@ -1066,14 +976,17 @@ export default class Question extends Vue {
                 const summaryMCRExplanation = 
                     // eslint-disable-next-line max-len
                     summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
+                
+                const choiceContainerComp = 
+                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
 
                 const showExplanationRef = (
-                    this.$refs['uikit-question__toggle-explanation-text']
+                    choiceContainerComp?.$refs['uikit-question-choices-container__toggle-explanation-text']
                 ) as Element[] | Element | undefined
 
                 if (summaryMCRExplanation) {
                     summaryMCRExplanation?.focus()
-                } else {
+                } else if (showExplanationRef) {
                     const showExplanationEl = (
                         showExplanationRef instanceof Array
                             ? showExplanationRef[0]
@@ -1084,8 +997,12 @@ export default class Question extends Vue {
             }, 0)
         } else {
             setTimeout(() => {
-                const explanationTitle = this.$refs['explanation'] as HTMLElement | undefined
-                explanationTitle?.focus()
+                const explanationComp = 
+                    this.$refs['uikit-question__explanation'] as ComponentPublicInstance | undefined
+                const explanationTitle = explanationComp?.$refs['explanation'] as HTMLElement | undefined
+                if (explanationTitle) {
+                    explanationTitle?.focus()
+                }
             }, 0)
         }
     }
@@ -1105,13 +1022,16 @@ export default class Question extends Vue {
                     // eslint-disable-next-line max-len
                     summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
 
+                const choiceContainerComp = 
+                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
+
                 const showExplanationRef = (
-                    this.$refs['uikit-question__toggle-explanation-text']
+                    choiceContainerComp?.$refs['uikit-question-choices-container__toggle-explanation-text']
                 ) as Element[] | Element | undefined
 
                 if (summaryMCRExplanation) {
                     summaryMCRExplanation?.focus()
-                } else {
+                } else if (showExplanationRef) {
                     const showExplanationEl = (
                         showExplanationRef instanceof Array
                             ? showExplanationRef[0]
@@ -1336,296 +1256,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__passage-and-image {
-        position: relative;
-        max-width: 566px;
-        padding: 133px 60px 72px 60px;
-        box-sizing: border-box;
-        line-height: 26px;
-        font-size: 16.5px;
-        font-weight: 400;
-        letter-spacing: -0.1px;
-
-        &--tablet-landscape {
-            padding: 115px 41px 42px 30px;
-            font-size: 16.5px;
-            line-height: 26px;
-        }
-    }
-
-    &__passage-and-image-title {
-        color: $ash;
-        margin-bottom: 24px;
-        font-weight: 600;
-        font-size: 17.5px;
-        line-height: 25px;
-        letter-spacing: -0.1px;
-        outline: none;
-
-        &--dark {
-            color: rgba($white, 0.86);
-        }
-    }
-
-    &__passage {
-        line-height: 26px;
-        font-weight: 400;
-        font-size: 16.5px;
-        letter-spacing: -0.1px;
-        margin-bottom: 24px;
-
-        strong,
-        b {
-            font-weight: 600;
-        }
-    }
-
-    &__image {
-        display: block;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        width: calc(100% + 24px);
-        border: 1px solid $fog;
-
-        &--dark {
-            border: 1px solid $jet;
-        }
-
-        &--tablet-landscape {
-            width: calc(100% + 16px);
-        }
-    }
-
-    &__toggle-passage-image-description {
-        margin-top: 16px;
-        margin-bottom: 8px;
-
-        &--tablet-landscape {
-            margin-top: 12px;
-        }
-    }
-
-    &__toggle-passage-image-description-text,
-    &__toggle-explanation-img-description-text {
-        outline: none;
-    }
-
-    &__toggle-passage-image-description-icon,
-    &__toggle-explanation-img-description-icon {
-        margin-left: 8px;
-
-        &--up {
-            transform: rotate(180deg);
-        }
-    }
-
-    &__passage-image-description {
-        outline: none;
-        color: $ash;
-        font-size: 15px;
-        line-height: 22px;
-        font-weight: 500;
-        letter-spacing: -0.2px;
-
-        &--dark {
-            color: $fog;
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__return-to-prompt {
-        position: absolute;
-        left: -10000px;
-
-        &:focus {
-            left: auto;
-        }
-    }
-
-    &__explanation {
-        position: relative;
-        background-color: $white;
-        border: 1px solid rgba($pewter, 0.85);
-        border-bottom: 0;
-        border-radius: 6px 6px 0 0;
-        padding: 42px 60px 72px;
-        box-sizing: border-box;
-        max-width: 565px;
-        min-height: 100%;
-
-        &--tablet-landscape {
-            max-width: 460px;
-            padding: 42px 36px 72px;
-        }
-
-        &--dark {
-            border-color: $slate;
-            background-color: $mariner;
-        }
-    }
-
-    &__explanation-close {
-        position: absolute;
-        width: 30px;
-        height: 30px;
-        top: 12px;
-        right: 12px;
-        color: $brand-blue;
-        cursor: pointer;
-        outline: none;
-
-        &:hover {
-            color: $brand-black;
-        }
-
-        &:focus::before {
-            content: '';
-            left: -1px;
-            top: -1px;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            border: 1px solid $brand-blue;
-            border-radius: 5px;
-        }
-
-        &--dark {
-            color: $banana-bread;
-
-            &:hover {
-                color: $butterscotch;
-            }
-
-            &:focus::before {
-                border-color: $banana-bread;
-            }
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    &__explanation-title {
-        font-weight: 600;
-        font-size: 17.5px;
-        letter-spacing: -0.1px;
-        line-height: 25px;
-        outline: none;
-
-        &--dark {
-            color: $fog;
-        }
-    }
-
-    &__explanation-text {
-        font-weight: 400;
-        font-size: 16.5px;
-        letter-spacing: -0.1px;
-        line-height: 26px;
-        margin-bottom: 24px;
-        word-break: break-word;
-
-        &--dark {
-            color: $white;
-        }
-
-        &--tablet-landscape {
-            margin-bottom: 24px;
-            font-size: 16px;
-            line-height: 24px;
-        }
-
-        strong,
-        b {
-            font-weight: 600;
-        }
-    }
-
-    &__explanation-image {
-        display: block;
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        width: calc(100% + 24px);
-        margin-bottom: 24px;
-        border: 1px solid $fog;
-
-        &--long-alt {
-            margin-bottom: 0;
-        }
-
-        &--dark {
-            border: 1px solid $jet;
-        }
-
-        &--tablet-landscape {
-            width: calc(100% + 16px);
-        }
-    }
-
-    &__toggle-explanation-img-description {
-        margin-top: 24px;
-
-        &--open {
-            margin-bottom: 6px;
-        }
-
-        &--tablet-landscape {
-            margin-top: 12px;
-        }
-    }
-
-    &__explanation-img-description {
-        outline: none;
-        color: $ash;
-        font-size: 15px;
-        font-weight: 500;
-        letter-spacing: -0.2px;
-        line-height: 22px;
-        margin-bottom: 24px;
-
-        &--dark {
-            color: $fog;
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__reference {
-        padding-top: 24px;
-        border-top: 1px solid $fog;
-        font-size: 15px;
-        letter-spacing: -0.1px;
-        line-height: 22px;
-        font-weight: 600;
-        word-break: break-word;
-
-        &--dark {
-            color: $white;
-            border-top-color: rgba($fog, 0.28);
-        }
-
-        p {
-            margin: 6px 0 8pt 0;
-            font-size: 15px;
-            letter-spacing: -0.1px;
-            font-weight: 400;
-            font-style: italic;
-        }
-    }
-
-    &__reference-label {
-        font-weight: 600;
-    }
-
     &__tag-mobile {
         display: none;
         position: absolute;
@@ -1827,143 +1457,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__toggle-explanation {
-        margin-top: 8px;
-        margin-bottom: 8px;
-        padding: 0;
-        z-index: 2;
-
-        &--review-mode {
-            display: none;
-
-            &.uikit-question__toggle-explanation--tablet-portrait,
-            &.uikit-question__toggle-explanation--mobile {
-                display: block;
-            }
-        }
-    }
-
-    &__toggle-explanation-text {
-        outline: none;
-    }
-
-    &__toggle-explanation-icon {
-        margin-left: 5px;
-        display: none;
-
-        &--tablet-portrait {
-            display: initial;
-        }
-
-        &--up {
-            transform: rotate(180deg);
-        }
-    }
-
-    &__strikethrough {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        width: 20px;
-        height: 22px;
-        right: 12px;
-        background-color: $gray-background;
-        border-radius: 2px;
-        z-index: 2;
-        outline: none;
-        opacity: 0;
-
-        &--visible {
-            opacity: 1;
-        }
-
-        &:hover:not(&--active) {
-            background-color: rgba($sky-blue, 0.674);
-            color: $brand-blue;
-        }
-
-        &:focus:not(&--active) {
-            background-color: $gray-background;
-            color: $brand-blue;
-
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                border: 1px solid $brand-blue;
-                border-radius: 2px;
-            }
-        }
-
-        &--dark {
-            background-color: $ash;
-            color: $white;
-
-            &:hover:not(&--active) {
-                background-color: rgba($banana-bread, 0.15);
-                color: $banana-bread;
-            }
-
-            &:focus:not(&--active) {
-                background-color: rgba($white, 0.15);
-                color: $banana-bread;
-
-                &::after {
-                    border-color: $banana-bread;
-                }
-            }
-        }
-
-        &--active {
-            background-color: $brand-blue;
-            color: $white;
-
-            &:hover {
-                background-color: mix($brand-blue, black, 90%);
-            }
-
-            &:focus {
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: -2px;
-                    bottom: -2px;
-                    left: -2px;
-                    right: -2px;
-                    border: 1px solid $brand-blue;
-                    border-radius: 2px;
-                }
-            }
-
-            &--dark {
-                background-color: $banana-bread;
-                color: $brand-black;
-
-                &:hover {
-                    background-color: $banana-bread;
-                    color: $brand-black;
-                }
-
-                &:focus {
-                    background-color: $banana-bread !important;
-                    color: $brand-black !important;
-
-                    &::before {
-                        border-color: $banana-bread;
-                    }
-                }
-            }
-        }
-
-        &--tablet-landscape {
-            display: none;
-        }
-    }
-
     &__correct-icon {
         position: absolute;
         top: 12px;