@pocketprep/ui-kit 3.0.29 → 3.0.31

package/lib/components/Modal/ModalContainer.vue

@@ -54,60 +54,65 @@ export default class ModalContainer extends Vue {
     savedYPosition = 0
 
     mounted () {
-        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
-
-        // Reset focus to last element in modal so next tab will move it to top
-        const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
-        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
-        if (modalFocusableEls.length) {
-            modalFocusableEls[modalFocusableEls.length - 1]?.focus()
-            modalFocusableEls[modalFocusableEls.length - 1]?.blur()
-        }
-
-        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
-        this.focusListener = event => {
-            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
-            const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
-            const hasCalendarClass = target 
-                && Array.from(target.classList).find(
-                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
-                )
-            if (isFocusOutside && !hasCalendarClass) {
-                const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
-                    focusableSelectors
-                ))
-                const firstFocusableModalChild = focusableModalChildren.find(
-                    el => !!el.getBoundingClientRect().width
-                )
-                const reversedModalChildren = [ ...focusableModalChildren ].reverse()
-                const lastFocusableModalChild = reversedModalChildren.find(
-                    el => !!el.getBoundingClientRect().width
-                )
-                if (firstFocusableModalChild) {
-                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
-                    if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
-                        // If focus moves from first element -> outside modal, focus the last element instead
-                        lastFocusableModalChild.focus()
-                    } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
-                        // If focus moves from last element -> outside modal, focus the first element instead
-                        firstFocusableModalChild.focus()
-                    } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
-                        // If focus goes outside in a different way, return focus to where it came from if possible
-                        relatedTarget.focus()
+        // Prevent an error where multiple modals trigger a loop
+        // TODO: Find a way to have only the latest modal's focusListener active
+        const openModals = document.querySelectorAll('.uikit-modal-container')
+        if (openModals.length === 1) {
+            const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
+    
+            // Reset focus to last element in modal so next tab will move it to top
+            const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
+            const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
+            if (modalFocusableEls.length) {
+                modalFocusableEls[modalFocusableEls.length - 1]?.focus()
+                modalFocusableEls[modalFocusableEls.length - 1]?.blur()
+            }
+    
+            // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
+            this.focusListener = event => {
+                const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+                const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
+                const hasCalendarClass = target 
+                    && Array.from(target.classList).find(
+                        c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
+                    )
+                if (isFocusOutside && !hasCalendarClass) {
+                    const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
+                        focusableSelectors
+                    ))
+                    const firstFocusableModalChild = focusableModalChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    const reversedModalChildren = [ ...focusableModalChildren ].reverse()
+                    const lastFocusableModalChild = reversedModalChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    if (firstFocusableModalChild) {
+                        const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                        if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
+                            // If focus moves from first element -> outside modal, focus the last element instead
+                            lastFocusableModalChild.focus()
+                        } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
+                            // If focus moves from last element -> outside modal, focus the first element instead
+                            firstFocusableModalChild.focus()
+                        } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
+                            // If focus goes outside in a different way, return focus to where it came from if possible
+                            relatedTarget.focus()
+                        } else {
+                            // Otherwise, just return focus to the first element
+                            firstFocusableModalChild.focus()
+                        }
                     } else {
-                        // Otherwise, just return focus to the first element
-                        firstFocusableModalChild.focus()
-                    }
-                } else {
-                    // If the modal doesn't have any focusable children, focus the container instead
-                    if (modalContainerEl.tabIndex === -1) {
-                        modalContainerEl.tabIndex = 0
+                        // If the modal doesn't have any focusable children, focus the container instead
+                        if (modalContainerEl.tabIndex === -1) {
+                            modalContainerEl.tabIndex = 0
+                        }
+                        modalContainerEl.focus()
                     }
-                    modalContainerEl.focus()
                 }
             }
+            document.addEventListener('focusin', this.focusListener)
         }
-        document.addEventListener('focusin', this.focusListener)
 
         // prevent scrolling outside of modal
         const openModalCount = Number(document.body.getAttribute('data-openModalCount'))

package/lib/components/Quiz/Question.vue

@@ -18,6 +18,12 @@
                 @click="emitClose"
             />
         </slot>
+        <div
+            class="uikit-question__tag-mobile"
+            v-breakpoint:questionEl="breakpoints"
+        >
+            <slot name="tagMobile" />
+        </div>
         <div
             v-breakpoint:questionEl="breakpoints"
             class="uikit-question__main"
@@ -80,6 +86,12 @@
                             </div>
                         </h2>
                     </slot>
+                    <div
+                        class="uikit-question__tag"
+                        v-breakpoint:questionEl="breakpoints"
+                    >
+                        <slot name="tag" />
+                    </div>
                 </div>
             </slot>
             <div
@@ -564,6 +576,23 @@
                                 />
                             </div>
                         </template>
+                        <div
+                            v-breakpoint:questionEl="breakpoints"
+                            class="uikit-question__motivational-moment"
+                            :class="{
+                                'uikit-question__motivational-moment--mcr': isMCR,
+                                'uikit-question__motivational-moment--explanation': showExplanation,
+                                'uikit-question__motivational-moment--passage-and-image': showPassageAndImage,
+                            }"
+                        >
+                            <slot
+                                name="motivationalMoment"
+                                :showAnswers="showAnswers"
+                                :answerKeys="answerKeys"
+                                :choiceKey="choice.key"
+                                :isCorrect="isCorrect"
+                            />
+                        </div>
                     </div>
                     <slot
                         name="showNamesTable"
@@ -704,6 +733,21 @@
                     </div>
                 </div>
             </slot>
+            <div
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question__motivational-moment-bottom"
+                :class="{
+                    'uikit-question__motivational-moment-bottom--mcr': isMCR,
+                    'uikit-question__motivational-moment-bottom--explanation': showExplanation,
+                    'uikit-question__motivational-moment-bottom--passage-and-image': showPassageAndImage,
+                }"
+            >
+                <slot
+                    name="motivationalMomentBottom"
+                    :showAnswers="showAnswers"
+                    :isCorrect="isCorrect"
+                />
+            </div>
             <div
                 v-if="!reviewMode"
                 v-breakpoint:questionEl="breakpoints"
@@ -2106,6 +2150,26 @@ export default class Question extends Vue {
         font-weight: 500;
     }
 
+    &__tag {
+        margin-top: 8px;
+        margin-bottom: -5px;
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__tag-mobile {
+        display: none;
+        position: absolute;
+        top: 14px;
+        right: 14px;
+
+        &--mobile {
+            display: block;
+        }
+    }
+
     &__prompt {
         outline: none;
         font-weight: 600;
@@ -3158,6 +3222,44 @@ export default class Question extends Vue {
         }
     }
 
+    &__motivational-moment {
+        position: absolute;
+        right: -150px;
+        top: 20px;
+
+        &--mcr {
+            display: none;
+        }
+
+        &--passage-and-image {
+            display: none;
+        }
+
+        &--explanation {
+            display: none;
+        }
+
+        &--tablet-portrait {
+            display: none;
+        }
+    }
+
+    &__motivational-moment-bottom {
+        display: none;
+
+        &--mcr {
+            display: block;
+        }
+
+        &--passage-and-image:not(#{&}--tablet-portrait) {
+            display: block;
+        }
+
+        &--tablet-portrait {
+            display: block;
+        }
+    }
+
     &__summary {
         position: relative;
         background-color: $white;

package/package.json

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