@pocketprep/ui-kit 3.4.5 → 3.4.7

package/lib/components/Quiz/Question.vue

@@ -84,11 +84,12 @@
                 :is-dark-mode="isDarkMode"
                 :review-mode="reviewMode"
                 :image-url-prefix="imageUrlPrefix"
+                :show-passage-image-long-alt="showPassageImageLongAlt"
                 :passage-image-url="passageImageUrl"
                 :passage-image-long-alt="passageImageLongAlt"
                 :passage-image-alt="passageImageAlt"
                 :passage-and-image-title="passageAndImageTitle"
-                @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
+                @togglePassageImageLongAltDropdown="togglePassageImageLongAlt"
             />
             <Paywall
                 v-if="showPaywall"
@@ -300,7 +301,6 @@
                                 :global-metrics="globalMetrics"
                                 :show-answers="showAnswers"
                                 :is-MCR="isMCR"
-                                :show-explanation="showExplanation"
                                 :show-explanation-image-long-alt="showExplanationImageLongAlt"
                                 :explanation-image-url="explanationImageUrl"
                                 :explanation-image-alt="explanationImageAlt"
@@ -310,7 +310,7 @@
                                 :is-dark-mode="isDarkMode"
                                 :question-el="questionEl"
                                 :breakpoints="breakpoints"
-                                @emitToggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
+                                @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
                             />
                         </div>
                         <template v-if="!globalMetrics">
@@ -416,115 +416,27 @@
                 </div>
                 <slot name="unansweredFlaggedNamesTable" />
             </div>
-            <div
+            <Summary
                 v-if="isMCR && showAnswers && !showPaywall"
-                v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                ref="uikit-question__summary"
                 class="uikit-question__summary"
-            >
-                <div class="uikit-question__summary-title">
-                    {{ isCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
-                </div>
-                <PocketButton
-                    v-breakpoint:questionEl="breakpoints"
-                    type="tertiary-small"
-                    class="uikit-question__summary-toggle-explanation"
-                    :class="{ 'uikit-question__summary-toggle-explanation': reviewMode }"
-                    :is-dark-mode="isDarkMode"
-                    :aria-expanded="showExplanation ? 'true' : 'false'"
-                    @click="toggleExplanation"
-                    @mousedown.prevent
-                >
-                    <span
-                        ref="uikit-question__summary-toggle-explanation-text"
-                        class="uikit-question__summary-toggle-explanation-text"
-                        tabindex="-1"
-                    >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
-                    <Icon
-                        v-breakpoint:questionEl="breakpoints"
-                        type="accordionArrow"
-                        class="uikit-question__summary-toggle-explanation-icon"
-                        :class="{
-                            'uikit-question__summary-toggle-explanation-icon--up': showExplanation,
-                        }"
-                    />
-                </PocketButton>
-                <div
-                    v-if="showExplanation"
-                    v-breakpoint:questionEl="breakpoints"
-                    class="uikit-question__summary-dropdown-explanation"
-                >
-                    <div
-                        v-dark="isDarkMode"
-                        class="uikit-question__summary-dropdown-explanation-text"
-                        v-html="question.explanation"
-                    />
-                    <img
-                        v-if="explanationImageUrl"
-                        v-dark="isDarkMode"
-                        class="uikit-question__summary-dropdown-explanation-image"
-                        :src="explanationImageUrl"
-                        :alt="`${explanationImageAlt}. Extended image description below.`"
-                    >
-                    <PocketButton
-                        v-if="explanationImageLongAlt"
-                        v-breakpoint:questionEl="breakpoints"
-                        type="tertiary-small"
-                        class="uikit-question__toggle-summary-dropdown-explanation-img-description"
-                        :class="{
-                            'uikit-question__toggle-summary-dropdown-explanation-img-description--open':
-                                showExplanationImageLongAlt,
-                            'uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference':
-                                !reference || hideReferences,
-                        }"
-                        :is-dark-mode="isDarkMode"
-                        :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
-                        @click.stop="toggleExplanationImageLongAlt"
-                        @mousedown.prevent
-                    >
-                        <span class="uikit-question__toggle-summary-dropdown-explanation-img-description-text">
-                            Image Description
-                        </span>
-                        <Icon
-                            class="uikit-question__toggle-summary-dropdown-explanation-img-description-icon"
-                            :class="{
-                                'uikit-question__toggle-summary-dropdown-explanation-img-description-icon--up':
-                                    showExplanationImageLongAlt,
-                            }"
-                            type="accordionArrow"
-                        />
-                    </PocketButton>
-                    <div
-                        v-if="showExplanationImageLongAlt"
-                        ref="uikit-question__summary-dropdown-explanation-img-description"
-                        v-dark="isDarkMode"
-                        v-breakpoint:questionEl="breakpoints"
-                        class="uikit-question__summary-dropdown-explanation-img-description"
-                        tabindex="-1"
-                        v-html="explanationImageLongAlt"
-                    />
-                    <div
-                        v-if="reference && !hideReferences"
-                        v-dark="isDarkMode"
-                        class="uikit-question__summary-dropdown-reference"
-                    >
-                        <span class="uikit-question__summary-dropdown-reference-label">Reference: </span>
-                        <div v-html="reference" />
-                    </div>
-                </div>
-                <Icon
-                    v-if="isCorrect"
-                    v-dark="isDarkMode"
-                    type="correct"
-                    class="uikit-question__summary-correct-icon"
-                />
-                <Icon
-                    v-else
-                    v-dark="isDarkMode"
-                    type="incorrect"
-                    class="uikit-question__summary-incorrect-icon"
-                />
-            </div>
+                :question="question"
+                :show-explanation="showExplanation"
+                :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-correct="isCorrect"
+                :is-unanswered="isUnanswered"
+                :review-mode="reviewMode"
+                :is-dark-mode="isDarkMode"
+                :question-el="questionEl"
+                :breakpoints="breakpoints"
+                @toggleSummaryExplanation="toggleExplanation"
+                @toggleSummaryExplanationImageLongAlt="toggleExplanationImageLongAlt"
+            />
             <slot name="metricsTiles">
                 <div
                     v-if="globalMetrics"
@@ -775,6 +687,7 @@ import QuestionContext from '../Quiz/Question/QuestionContext.vue'
 import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vue'
 import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
 import Paywall from '../Quiz/Question/Paywall.vue'
+import Summary from '../Quiz/Question/Summary.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { studyModes } from '../../utils'
@@ -790,6 +703,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         PassageAndImageDropdown,
         Paywall,
         DropdownExplanation,
+        Summary,
     },
     directives: {
         breakpoint,
@@ -827,7 +741,6 @@ export default class Question extends Vue {
     selectedChoices: TChoiceKey[] = []
     showAnswers = false
     showExplanation = false
-    showPassageImageDropdown = false
     showPassageImageLongAlt = false
     showExplanationImageDropdown = false
     showExplanationImageLongAlt = false
@@ -1309,26 +1222,33 @@ export default class Question extends Vue {
 
     toggleExplanationImageLongAlt () {
         this.showExplanationImageLongAlt = !this.showExplanationImageLongAlt
-
         if (this.showExplanationImageLongAlt) {
             setTimeout(() => {
-                const mcrLongAlt = this.$refs['uikit-question__summary-dropdown-explanation-img-description'] as Ref
+                // checks for mobile / tablet portrait uikit-question-summary
+                const mcrLongAltComp = this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
+                const mcrLongAlt = 
+                    // eslint-disable-next-line max-len
+                    mcrLongAltComp?.$refs['uikit-question-summary__summary-dropdown-explanation-img-description'] as HTMLElement | undefined
 
                 const mobileDropdownExplanation = 
                     this.$refs['uikit-question__dropdown-explanation'] as Ref[]
-                const mobileDropdownExplanationComp = 
+                if (mobileDropdownExplanation) {
+                    const mobileDropdownExplanationComp = 
                     mobileDropdownExplanation[0] as ComponentPublicInstance | undefined
-                const mobileImgDropdownImgDescription = 
+                    const mobileImgDropdownImgDescription = 
                     // eslint-disable-next-line max-len
                     mobileDropdownExplanationComp?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
 
+                    if (mobileImgDropdownImgDescription?.offsetParent) {
+                        mobileImgDropdownImgDescription.focus()
+                    }
+                }
+
                 const longAlt = this.$refs['uikit-question__explanation-img-description'] as Ref
 
                 // Checking offsetParent tells us which element is visible
                 if (mcrLongAlt?.offsetParent) {
                     mcrLongAlt.focus()
-                } else if (mobileImgDropdownImgDescription?.offsetParent) {
-                    mobileImgDropdownImgDescription.focus()
                 } else if (longAlt?.offsetParent) {
                     longAlt.focus()
                 }
@@ -1340,16 +1260,26 @@ export default class Question extends Vue {
         this.showExplanation = !this.showExplanation
         if (!this.showExplanation) {
             setTimeout(() => {
+                const summaryMCRComp = 
+                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
+                const summaryMCRExplanation = 
+                    // eslint-disable-next-line max-len
+                    summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
+
                 const showExplanationRef = (
                     this.$refs['uikit-question__toggle-explanation-text']
-                    || this.$refs['uikit-question__summary-toggle-explanation-text']
                 ) as Element[] | Element | undefined
-                const showExplanationEl = (
-                    showExplanationRef instanceof Array
-                        ? showExplanationRef[0]
-                        : showExplanationRef
-                ) as HTMLElement | undefined
-                showExplanationEl?.focus()
+
+                if (summaryMCRExplanation) {
+                    summaryMCRExplanation?.focus()
+                } else {
+                    const showExplanationEl = (
+                        showExplanationRef instanceof Array
+                            ? showExplanationRef[0]
+                            : showExplanationRef
+                    ) as HTMLElement | undefined
+                    showExplanationEl?.focus()
+                }
             }, 0)
         } else {
             setTimeout(() => {
@@ -1368,16 +1298,26 @@ export default class Question extends Vue {
                 questionSerial: this.question.serial,
             })
             setTimeout(() => {
+                const summaryMCRComp = 
+                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
+                const summaryMCRExplanation = 
+                    // eslint-disable-next-line max-len
+                    summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
+
                 const showExplanationRef = (
                     this.$refs['uikit-question__toggle-explanation-text']
-                    || this.$refs['uikit-question__summary-toggle-explanation-text']
                 ) as Element[] | Element | undefined
-                const showExplanationEl = (
-                    showExplanationRef instanceof Array
-                        ? showExplanationRef[0]
-                        : showExplanationRef
-                ) as HTMLElement | undefined
-                showExplanationEl?.focus()
+
+                if (summaryMCRExplanation) {
+                    summaryMCRExplanation?.focus()
+                } else {
+                    const showExplanationEl = (
+                        showExplanationRef instanceof Array
+                            ? showExplanationRef[0]
+                            : showExplanationRef
+                    ) as HTMLElement | undefined
+                    showExplanationEl?.focus()
+                }
             }, 500)
         }
     }
@@ -1666,15 +1606,12 @@ export default class Question extends Vue {
     }
 
     &__toggle-passage-image-description-text,
-    &__toggle-explanation-img-description-text,
-    &__toggle-summary-dropdown-explanation-img-description-text {
+    &__toggle-explanation-img-description-text {
         outline: none;
     }
 
     &__toggle-passage-image-description-icon,
-    &__toggle-explanation-img-description-icon,
-
-    &__toggle-summary-dropdown-explanation-img-description-icon {
+    &__toggle-explanation-img-description-icon {
         margin-left: 8px;
 
         &--up {
@@ -1884,8 +1821,7 @@ export default class Question extends Vue {
         }
     }
 
-    &__reference-label,
-    &__summary-dropdown-reference-label {
+    &__reference-label {
         font-weight: 600;
     }
 
@@ -2441,13 +2377,11 @@ export default class Question extends Vue {
         }
     }
 
-    &__toggle-explanation-text,
-    &__summary-toggle-explanation-text {
+    &__toggle-explanation-text {
         outline: none;
     }
 
-    &__toggle-explanation-icon,
-    &__summary-toggle-explanation-icon {
+    &__toggle-explanation-icon {
         margin-left: 5px;
         display: none;
 
@@ -2460,113 +2394,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__summary-dropdown-explanation {
-        display: none;
-
-        &--tablet-portrait {
-            display: block;
-        }
-    }
-
-    &__summary-dropdown-explanation-text {
-        font-size: 16px;
-        letter-spacing: -0.1px;
-        line-height: 24px;
-        font-weight: 400;
-        padding-bottom: 6px;
-
-        p {
-            margin: 10px 0;
-
-            &:first-child {
-                margin: 0;
-            }
-        }
-    }
-
-    &__summary-dropdown-explanation-image {
-        display: block;
-        box-sizing: border-box;
-        width: 100%;
-        border: 1px solid $fog;
-
-        &--dark {
-            border: 1px solid $jet;
-        }
-    }
-
-    &__toggle-summary-dropdown-explanation-img-description {
-        margin-top: 12px;
-        margin-bottom: 20px;
-
-        &--open {
-            margin-bottom: 6px;
-        }
-
-        &--tablet-portrait {
-            &.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
-                margin-bottom: 4px;
-            }
-
-            &.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
-                margin-bottom: 6px;
-            }
-        }
-
-        &--mobile {
-            margin-top: 16px;
-            margin-bottom: 16px;
-
-            &.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
-                margin-bottom: 7px;
-            }
-
-            &.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
-                margin-bottom: 4px;
-            }
-        }
-    }
-
-    &__summary-dropdown-explanation-img-description {
-        outline: none;
-        color: $ash;
-        font-size: 15px;
-        line-height: 22px;
-        margin-bottom: 20px;
-
-        &--dark {
-            color: $fog;
-        }
-
-        &--mobile {
-            margin-bottom: 16px;
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__summary-dropdown-reference {
-        padding-top: 24px;
-        border-top: 1px solid $fog;
-        font-size: 15px;
-        letter-spacing: -0.1px;
-        line-height: 22px;
-        font-weight: 400;
-        word-break: break-word;
-        margin-bottom: -7px;
-
-        &--dark {
-            color: $white;
-            border-top-color: rgba($fog, 0.28);
-        }
-
-        p {
-            margin: 6px 0 8pt 0;
-        }
-    }
-
     &__strikethrough {
         display: flex;
         align-items: center;
@@ -2806,74 +2633,6 @@ export default class Question extends Vue {
         }
     }
 
-    &__summary {
-        position: relative;
-        background-color: $white;
-        width: 100%;
-        max-width: 492px;
-        margin-top: 24px;
-        padding: 11px 46px 11px 15px;
-        box-sizing: border-box;
-        border-radius: 5px;
-        box-shadow: 0 1px 6px 0 rgba($fog, 0.6);
-
-        &--dark {
-            background: $brand-black;
-            border: 1px solid $slate;
-            box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
-        }
-
-        &--tablet-portrait {
-            display: inline-block;
-        }
-    }
-
-    &__summary-title {
-        font-weight: 600;
-        font-size: 15.5px;
-        line-height: 22px;
-    }
-
-    &__summary-toggle-explanation {
-        margin-top: 8px;
-        margin-bottom: 8px;
-        padding: 0;
-
-        &--review-mode {
-            display: none;
-
-            &.uikit-question__summary-toggle-explanation--tablet-portrait {
-                display: block;
-            }
-        }
-    }
-
-    &__summary-correct-icon {
-        position: absolute;
-        top: 12px;
-        right: 10px;
-        width: 22px;
-        height: 22px;
-        color: $cadaverous;
-
-        &--dark {
-            color: $jungle-green;
-        }
-    }
-
-    &__summary-incorrect-icon {
-        position: absolute;
-        top: 12px;
-        right: 10px;
-        width: 22px;
-        height: 22px;
-        color: $pepper;
-
-        &--dark {
-            color: $rosa;
-        }
-    }
-
     &__stats-summary {
         margin-top: 24px;
         display: flex;

package/lib/components/Tables/Table.vue

@@ -173,6 +173,59 @@
                                                 </slot>
                                             </template>
                                         </tr>
+                                        <template v-for="subrow in row.subrows">
+                                            <slot name="tableSubrow" :subrow="subrow">
+                                                <tr 
+                                                    :key="`subrow--${subrow.id}`"
+                                                    v-dark="isDarkMode"
+                                                    role="subrow"
+                                                    :tabIndex="row.tabIndex === 0 ? 0 : -1"
+                                                    :class="{
+                                                        'uikit-table__subrow--hover-focus': row.tabIndex === 0 
+                                                    }"
+                                                    class="uikit-table__subrow"
+                                                    :style="{
+                                                        ...gridStyles,
+                                                        ...tableSubrowsStyles,
+                                                        ...subrow.styles,
+                                                    }"
+                                                    v-show="row.displaySubrows"
+                                                    @click="emitRowClicked(subrow)"
+                                                    @keydown.enter="emitRowClicked(subrow)"
+                                                    @mouseenter="emitRowEnter(subrow)"
+                                                    @mouseleave="emitRowLeave(subrow)"
+                                                >
+                                                    <template v-for="column in columns">
+                                                        <slot name="subrowCell"
+                                                              :subrow="subrow"
+                                                              :column="column"
+                                                              :table-cell-styles="tableCellStyles"
+                                                        >
+                                                            <td
+                                                                :key="`subrow-${subrow.id}--column-${column.propName}`"
+                                                                role="cell"
+                                                                class="uikit-table__cell"
+                                                                :style="{
+                                                                    ...tableCellStyles,
+                                                                    ...column.styles,
+                                                                }"
+                                                                @click="emitCellClicked(subrow, column)"
+                                                            >
+                                                                <slot
+                                                                    name="tableSubrowCellValue"
+                                                                    :subrow="subrow"
+                                                                    :column="column"
+                                                                >
+                                                                    <OverflowTooltip>
+                                                                        {{ subrow[column.propName] }}
+                                                                    </OverflowTooltip>
+                                                                </slot>
+                                                            </td>
+                                                        </slot>
+                                                    </template>
+                                                </tr>
+                                            </slot>
+                                        </template>
                                     </slot>
                                 </template>
                             </tbody>
@@ -236,6 +289,8 @@ export default class Table extends Vue {
     @Prop() tableRowStyles!: Record<string, string>
     // .table__cell
     @Prop() tableCellStyles!: Record<string, string>
+    // .table__subrow
+    @Prop() tableSubrowsStyles!: Record<string, string>
 
     gridStyles: Record<string, string> = {}
     currentSort: ITableSortSettings = {
@@ -255,7 +310,6 @@ export default class Table extends Vue {
         } else {
             const numColumns = this.columns.length
             this.gridStyles = {
-                'display': 'inline-grid',
                 'grid-template-columns': `repeat(${numColumns}, 1fr)`,
             }
         }
@@ -356,6 +410,7 @@ export default class Table extends Vue {
     }
 
     &__column-labels {
+        display: inline-grid;
         min-width: 100%;
         padding: 5px 22px 5px 11px;
         font-size: 11px;
@@ -454,6 +509,7 @@ export default class Table extends Vue {
     }
 
     &__row {
+        display: inline-grid;
         position: relative;
         max-width: 100%;
         min-width: 100%;
@@ -487,6 +543,48 @@ export default class Table extends Vue {
         }
     }
 
+    &__subrow {
+        display: inline-grid;
+        position: relative;
+        max-width: 100%;
+        min-width: 100%;
+        padding: 10px 22px 10px 11px;
+        font-size: 15px;
+        line-height: 19px;
+        border-bottom: 1px solid $gray-divider;
+        outline: none;
+
+        td:first-child {
+            position: relative;
+            font-size: 14px;
+            left: 15px;
+            width: calc(100% - 15px);
+        }
+
+        &--dark {
+            border-bottom-color: $ash;
+        }
+
+        &--hover-focus {
+            &:hover {
+                background-color: mix($barely-background, $brand-black, 96%);
+            }
+
+            &:focus {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    border: 1px solid $brand-blue;
+                    border-radius: 6px;
+                }
+            }
+        }
+    }
+
     &__cell {
         white-space: nowrap;
         text-overflow: ellipsis;

package/lib/components/Tables/table.d.ts

@@ -24,9 +24,18 @@ export interface ITableColumn {
     isLabelHidden?: boolean
 }
 
+export type TTableSubrow = {
+    id: string | number
+    styles?: Record<string, string>
+} & {
+    [key: string]: unknown
+}
+
 export type TTableRow = {
     id: string | number
     styles?: Record<string, string>
+    displaySubrows?: boolean
+    subrows?: TTableSubrow[]
 } & {
     [key: string]: unknown
 }