@pocketprep/ui-kit 3.4.3 → 3.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@pocketprep/ui-kit.js +8894 -8711
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +9 -9
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/DropdownExplanation.vue +253 -0
- package/lib/components/Quiz/Question/Paywall.vue +153 -0
- package/lib/components/Quiz/Question.vue +44 -192
- package/package.json +1 -1
|
@@ -90,38 +90,15 @@
|
|
|
90
90
|
:passage-and-image-title="passageAndImageTitle"
|
|
91
91
|
@emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
|
|
92
92
|
/>
|
|
93
|
-
<
|
|
93
|
+
<Paywall
|
|
94
94
|
v-if="showPaywall"
|
|
95
|
-
class="uikit-question__paywall
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
>
|
|
103
|
-
<img
|
|
104
|
-
v-breakpoint:questionEl="breakpoints"
|
|
105
|
-
:src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
|
|
106
|
-
alt=""
|
|
107
|
-
class="uikit-question__paywall-image"
|
|
108
|
-
>
|
|
109
|
-
<div
|
|
110
|
-
v-dark="isDarkMode"
|
|
111
|
-
v-breakpoint:questionEl="breakpoints"
|
|
112
|
-
class="uikit-question__paywall-text"
|
|
113
|
-
>
|
|
114
|
-
You need a Premium Subscription to view this question's answer and explanation.
|
|
115
|
-
</div>
|
|
116
|
-
<PocketButton
|
|
117
|
-
:is-dark-mode="isDarkMode"
|
|
118
|
-
class="uikit-question__paywall-button"
|
|
119
|
-
@click="emitUpgrade"
|
|
120
|
-
>
|
|
121
|
-
Upgrade to Premium
|
|
122
|
-
</PocketButton>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
95
|
+
class="uikit-question__paywall"
|
|
96
|
+
:review-Mode="reviewMode"
|
|
97
|
+
:is-dark-mode="isDarkMode"
|
|
98
|
+
:question-el="questionEl"
|
|
99
|
+
:breakpoints="breakpoints"
|
|
100
|
+
@upgradeClicked="emitUpgrade"
|
|
101
|
+
/>
|
|
125
102
|
<div
|
|
126
103
|
v-if="showAnswers && isTeachReview && isUnanswered"
|
|
127
104
|
v-dark="isDarkMode"
|
|
@@ -313,72 +290,28 @@
|
|
|
313
290
|
type="accordionArrow"
|
|
314
291
|
/>
|
|
315
292
|
</PocketButton>
|
|
316
|
-
<
|
|
293
|
+
<DropdownExplanation
|
|
317
294
|
v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
|
|
318
|
-
|
|
295
|
+
ref="uikit-question__dropdown-explanation"
|
|
319
296
|
class="uikit-question__dropdown-explanation"
|
|
320
|
-
:
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
v-breakpoint:questionEl="breakpoints"
|
|
339
|
-
type="tertiary-small"
|
|
340
|
-
class="uikit-question__toggle-dropdown-explanation-img-description"
|
|
341
|
-
:class="{
|
|
342
|
-
'uikit-question__toggle-dropdown-explanation-img-description--open':
|
|
343
|
-
showExplanationImageLongAlt,
|
|
344
|
-
'uikit-question__toggle-dropdown-explanation-img-description--no-reference':
|
|
345
|
-
!reference || hideReferences,
|
|
346
|
-
}"
|
|
347
|
-
:is-dark-mode="isDarkMode"
|
|
348
|
-
:aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
|
|
349
|
-
@click.stop="toggleExplanationImageLongAlt"
|
|
350
|
-
@mousedown.prevent
|
|
351
|
-
>
|
|
352
|
-
<span class="uikit-question__toggle-dropdown-explanation-img-description-text">
|
|
353
|
-
Image Description
|
|
354
|
-
</span>
|
|
355
|
-
<Icon
|
|
356
|
-
class="uikit-question__toggle-dropdown-explanation-img-description-icon"
|
|
357
|
-
:class="{
|
|
358
|
-
'uikit-question__toggle-dropdown-explanation-img-description-icon--up':
|
|
359
|
-
showExplanationImageLongAlt,
|
|
360
|
-
}"
|
|
361
|
-
type="accordionArrow"
|
|
362
|
-
/>
|
|
363
|
-
</PocketButton>
|
|
364
|
-
<div
|
|
365
|
-
v-if="showExplanationImageLongAlt"
|
|
366
|
-
ref="uikit-question__dropdown-explanation-img-description"
|
|
367
|
-
v-dark="isDarkMode"
|
|
368
|
-
v-breakpoint:questionEl="breakpoints"
|
|
369
|
-
class="uikit-question__dropdown-explanation-img-description"
|
|
370
|
-
tabindex="-1"
|
|
371
|
-
v-html="explanationImageLongAlt"
|
|
372
|
-
/>
|
|
373
|
-
<div
|
|
374
|
-
v-if="reference && !hideReferences"
|
|
375
|
-
v-dark="isDarkMode"
|
|
376
|
-
class="uikit-question__dropdown-reference"
|
|
377
|
-
>
|
|
378
|
-
<span class="uikit-question__dropdown-reference-label">Reference: </span>
|
|
379
|
-
<div v-html="reference" />
|
|
380
|
-
</div>
|
|
381
|
-
</div>
|
|
297
|
+
:question="question"
|
|
298
|
+
:answer-keys="answerKeys"
|
|
299
|
+
:choice="choice"
|
|
300
|
+
:global-metrics="globalMetrics"
|
|
301
|
+
:show-answers="showAnswers"
|
|
302
|
+
:is-MCR="isMCR"
|
|
303
|
+
:show-explanation="showExplanation"
|
|
304
|
+
:show-explanation-image-long-alt="showExplanationImageLongAlt"
|
|
305
|
+
:explanation-image-url="explanationImageUrl"
|
|
306
|
+
:explanation-image-alt="explanationImageAlt"
|
|
307
|
+
:explanation-image-long-alt="explanationImageLongAlt"
|
|
308
|
+
:reference="reference"
|
|
309
|
+
:hide-references="hideReferences"
|
|
310
|
+
:is-dark-mode="isDarkMode"
|
|
311
|
+
:question-el="questionEl"
|
|
312
|
+
:breakpoints="breakpoints"
|
|
313
|
+
@emitToggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
|
|
314
|
+
/>
|
|
382
315
|
</div>
|
|
383
316
|
<template v-if="!globalMetrics">
|
|
384
317
|
<div
|
|
@@ -840,11 +773,11 @@ import Table from '../Tables/Table.vue'
|
|
|
840
773
|
import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
|
|
841
774
|
import QuestionContext from '../Quiz/Question/QuestionContext.vue'
|
|
842
775
|
import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vue'
|
|
776
|
+
import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
|
|
777
|
+
import Paywall from '../Quiz/Question/Paywall.vue'
|
|
843
778
|
import type { Study } from '@pocketprep/types'
|
|
844
779
|
import { breakpoint, dark } from '../../directives'
|
|
845
780
|
import { studyModes } from '../../utils'
|
|
846
|
-
import PaywallImageLight from '../../assets/question/paywall-light.png'
|
|
847
|
-
import PaywallImageDark from '../../assets/question/paywall-dark.png'
|
|
848
781
|
import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
|
|
849
782
|
|
|
850
783
|
@Component({
|
|
@@ -855,6 +788,8 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
|
|
|
855
788
|
OverflowTooltip,
|
|
856
789
|
QuestionContext,
|
|
857
790
|
PassageAndImageDropdown,
|
|
791
|
+
Paywall,
|
|
792
|
+
DropdownExplanation,
|
|
858
793
|
},
|
|
859
794
|
directives: {
|
|
860
795
|
breakpoint,
|
|
@@ -916,13 +851,6 @@ export default class Question extends Vue {
|
|
|
916
851
|
isSortDisabled: true,
|
|
917
852
|
}]
|
|
918
853
|
|
|
919
|
-
get paywallImages () {
|
|
920
|
-
return {
|
|
921
|
-
light: PaywallImageLight,
|
|
922
|
-
dark: PaywallImageDark,
|
|
923
|
-
}
|
|
924
|
-
}
|
|
925
|
-
|
|
926
854
|
get breakpoints () {
|
|
927
855
|
// Passing the container element (typically QuizContainer) allows us to bind to that element's width
|
|
928
856
|
if (this.containerEl) {
|
|
@@ -1367,7 +1295,6 @@ export default class Question extends Vue {
|
|
|
1367
1295
|
const mobileImgDropdownImgDescription =
|
|
1368
1296
|
// eslint-disable-next-line max-len
|
|
1369
1297
|
mobileLongAltComp?.$refs['uikit-question-passage-and-image-dropdown__img-dropdown-img-description'] as HTMLElement | undefined
|
|
1370
|
-
|
|
1371
1298
|
const longAlt = this.$refs['uikit-question__passage-image-description'] as Ref
|
|
1372
1299
|
|
|
1373
1300
|
// Checking offsetParent tells us which element is visible
|
|
@@ -1386,14 +1313,22 @@ export default class Question extends Vue {
|
|
|
1386
1313
|
if (this.showExplanationImageLongAlt) {
|
|
1387
1314
|
setTimeout(() => {
|
|
1388
1315
|
const mcrLongAlt = this.$refs['uikit-question__summary-dropdown-explanation-img-description'] as Ref
|
|
1389
|
-
|
|
1316
|
+
|
|
1317
|
+
const mobileDropdownExplanation =
|
|
1318
|
+
this.$refs['uikit-question__dropdown-explanation'] as Ref[]
|
|
1319
|
+
const mobileDropdownExplanationComp =
|
|
1320
|
+
mobileDropdownExplanation[0] as ComponentPublicInstance | undefined
|
|
1321
|
+
const mobileImgDropdownImgDescription =
|
|
1322
|
+
// eslint-disable-next-line max-len
|
|
1323
|
+
mobileDropdownExplanationComp?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
|
|
1324
|
+
|
|
1390
1325
|
const longAlt = this.$refs['uikit-question__explanation-img-description'] as Ref
|
|
1391
1326
|
|
|
1392
1327
|
// Checking offsetParent tells us which element is visible
|
|
1393
1328
|
if (mcrLongAlt?.offsetParent) {
|
|
1394
1329
|
mcrLongAlt.focus()
|
|
1395
|
-
} else if (
|
|
1396
|
-
|
|
1330
|
+
} else if (mobileImgDropdownImgDescription?.offsetParent) {
|
|
1331
|
+
mobileImgDropdownImgDescription.focus()
|
|
1397
1332
|
} else if (longAlt?.offsetParent) {
|
|
1398
1333
|
longAlt.focus()
|
|
1399
1334
|
}
|
|
@@ -1732,14 +1667,13 @@ export default class Question extends Vue {
|
|
|
1732
1667
|
|
|
1733
1668
|
&__toggle-passage-image-description-text,
|
|
1734
1669
|
&__toggle-explanation-img-description-text,
|
|
1735
|
-
&__toggle-dropdown-explanation-img-description-text,
|
|
1736
1670
|
&__toggle-summary-dropdown-explanation-img-description-text {
|
|
1737
1671
|
outline: none;
|
|
1738
1672
|
}
|
|
1739
1673
|
|
|
1740
1674
|
&__toggle-passage-image-description-icon,
|
|
1741
1675
|
&__toggle-explanation-img-description-icon,
|
|
1742
|
-
|
|
1676
|
+
|
|
1743
1677
|
&__toggle-summary-dropdown-explanation-img-description-icon {
|
|
1744
1678
|
margin-left: 8px;
|
|
1745
1679
|
|
|
@@ -1951,7 +1885,6 @@ export default class Question extends Vue {
|
|
|
1951
1885
|
}
|
|
1952
1886
|
|
|
1953
1887
|
&__reference-label,
|
|
1954
|
-
&__dropdown-reference-label,
|
|
1955
1888
|
&__summary-dropdown-reference-label {
|
|
1956
1889
|
font-weight: 600;
|
|
1957
1890
|
}
|
|
@@ -2527,7 +2460,6 @@ export default class Question extends Vue {
|
|
|
2527
2460
|
}
|
|
2528
2461
|
}
|
|
2529
2462
|
|
|
2530
|
-
&__dropdown-explanation,
|
|
2531
2463
|
&__summary-dropdown-explanation {
|
|
2532
2464
|
display: none;
|
|
2533
2465
|
|
|
@@ -2536,7 +2468,6 @@ export default class Question extends Vue {
|
|
|
2536
2468
|
}
|
|
2537
2469
|
}
|
|
2538
2470
|
|
|
2539
|
-
&__dropdown-explanation-text,
|
|
2540
2471
|
&__summary-dropdown-explanation-text {
|
|
2541
2472
|
font-size: 16px;
|
|
2542
2473
|
letter-spacing: -0.1px;
|
|
@@ -2553,7 +2484,6 @@ export default class Question extends Vue {
|
|
|
2553
2484
|
}
|
|
2554
2485
|
}
|
|
2555
2486
|
|
|
2556
|
-
&__dropdown-explanation-image,
|
|
2557
2487
|
&__summary-dropdown-explanation-image {
|
|
2558
2488
|
display: block;
|
|
2559
2489
|
box-sizing: border-box;
|
|
@@ -2565,7 +2495,6 @@ export default class Question extends Vue {
|
|
|
2565
2495
|
}
|
|
2566
2496
|
}
|
|
2567
2497
|
|
|
2568
|
-
&__toggle-dropdown-explanation-img-description,
|
|
2569
2498
|
&__toggle-summary-dropdown-explanation-img-description {
|
|
2570
2499
|
margin-top: 12px;
|
|
2571
2500
|
margin-bottom: 20px;
|
|
@@ -2575,12 +2504,10 @@ export default class Question extends Vue {
|
|
|
2575
2504
|
}
|
|
2576
2505
|
|
|
2577
2506
|
&--tablet-portrait {
|
|
2578
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
|
|
2579
2507
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
|
|
2580
2508
|
margin-bottom: 4px;
|
|
2581
2509
|
}
|
|
2582
2510
|
|
|
2583
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--open,
|
|
2584
2511
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
|
|
2585
2512
|
margin-bottom: 6px;
|
|
2586
2513
|
}
|
|
@@ -2590,19 +2517,16 @@ export default class Question extends Vue {
|
|
|
2590
2517
|
margin-top: 16px;
|
|
2591
2518
|
margin-bottom: 16px;
|
|
2592
2519
|
|
|
2593
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
|
|
2594
2520
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
|
|
2595
2521
|
margin-bottom: 7px;
|
|
2596
2522
|
}
|
|
2597
2523
|
|
|
2598
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--open,
|
|
2599
2524
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
|
|
2600
2525
|
margin-bottom: 4px;
|
|
2601
2526
|
}
|
|
2602
2527
|
}
|
|
2603
2528
|
}
|
|
2604
2529
|
|
|
2605
|
-
&__dropdown-explanation-img-description,
|
|
2606
2530
|
&__summary-dropdown-explanation-img-description {
|
|
2607
2531
|
outline: none;
|
|
2608
2532
|
color: $ash;
|
|
@@ -2623,7 +2547,6 @@ export default class Question extends Vue {
|
|
|
2623
2547
|
}
|
|
2624
2548
|
}
|
|
2625
2549
|
|
|
2626
|
-
&__dropdown-reference,
|
|
2627
2550
|
&__summary-dropdown-reference {
|
|
2628
2551
|
padding-top: 24px;
|
|
2629
2552
|
border-top: 1px solid $fog;
|
|
@@ -3022,76 +2945,5 @@ export default class Question extends Vue {
|
|
|
3022
2945
|
margin-top: 24px;
|
|
3023
2946
|
}
|
|
3024
2947
|
}
|
|
3025
|
-
|
|
3026
|
-
&__paywall-container {
|
|
3027
|
-
width: 100%;
|
|
3028
|
-
display: flex;
|
|
3029
|
-
justify-content: center;
|
|
3030
|
-
}
|
|
3031
|
-
|
|
3032
|
-
&__paywall {
|
|
3033
|
-
width: 100%;
|
|
3034
|
-
max-width: 500px;
|
|
3035
|
-
background: $white;
|
|
3036
|
-
border-radius: 8px;
|
|
3037
|
-
border: 1px solid $steel;
|
|
3038
|
-
display: flex;
|
|
3039
|
-
flex-direction: column;
|
|
3040
|
-
align-items: center;
|
|
3041
|
-
justify-content: center;
|
|
3042
|
-
|
|
3043
|
-
&--dark {
|
|
3044
|
-
background: $brand-black;
|
|
3045
|
-
}
|
|
3046
|
-
|
|
3047
|
-
&--tablet-portrait {
|
|
3048
|
-
max-width: 430px;
|
|
3049
|
-
}
|
|
3050
|
-
|
|
3051
|
-
&--review {
|
|
3052
|
-
margin-bottom: 20px;
|
|
3053
|
-
}
|
|
3054
|
-
}
|
|
3055
|
-
|
|
3056
|
-
&__paywall-image {
|
|
3057
|
-
width: 305px;
|
|
3058
|
-
height: 230px;
|
|
3059
|
-
margin: 25px auto 21px;
|
|
3060
|
-
|
|
3061
|
-
&--mobile {
|
|
3062
|
-
width: 262px;
|
|
3063
|
-
height: 199px;
|
|
3064
|
-
margin: 14px auto 18px;
|
|
3065
|
-
}
|
|
3066
|
-
}
|
|
3067
|
-
|
|
3068
|
-
&__paywall-text {
|
|
3069
|
-
font-size: 18px;
|
|
3070
|
-
line-height: 22px;
|
|
3071
|
-
color: $brand-black;
|
|
3072
|
-
margin-bottom: 24px;
|
|
3073
|
-
font-weight: 600;
|
|
3074
|
-
text-align: center;
|
|
3075
|
-
max-width: 372px;
|
|
3076
|
-
|
|
3077
|
-
&--dark {
|
|
3078
|
-
color: $white;
|
|
3079
|
-
}
|
|
3080
|
-
|
|
3081
|
-
&--tablet-portrait {
|
|
3082
|
-
max-width: 302px;
|
|
3083
|
-
}
|
|
3084
|
-
|
|
3085
|
-
&--mobile {
|
|
3086
|
-
max-width: 293px;
|
|
3087
|
-
margin-bottom: 22px;
|
|
3088
|
-
font-size: 16px;
|
|
3089
|
-
line-height: 19px;
|
|
3090
|
-
}
|
|
3091
|
-
}
|
|
3092
|
-
|
|
3093
|
-
&__paywall-button {
|
|
3094
|
-
margin-bottom: 36px;
|
|
3095
|
-
}
|
|
3096
2948
|
}
|
|
3097
2949
|
</style>
|