@pocketprep/ui-kit 3.0.30 → 3.0.31

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.
@@ -18,6 +18,12 @@
18
18
  @click="emitClose"
19
19
  />
20
20
  </slot>
21
+ <div
22
+ class="uikit-question__tag-mobile"
23
+ v-breakpoint:questionEl="breakpoints"
24
+ >
25
+ <slot name="tagMobile" />
26
+ </div>
21
27
  <div
22
28
  v-breakpoint:questionEl="breakpoints"
23
29
  class="uikit-question__main"
@@ -80,6 +86,12 @@
80
86
  </div>
81
87
  </h2>
82
88
  </slot>
89
+ <div
90
+ class="uikit-question__tag"
91
+ v-breakpoint:questionEl="breakpoints"
92
+ >
93
+ <slot name="tag" />
94
+ </div>
83
95
  </div>
84
96
  </slot>
85
97
  <div
@@ -564,6 +576,23 @@
564
576
  />
565
577
  </div>
566
578
  </template>
579
+ <div
580
+ v-breakpoint:questionEl="breakpoints"
581
+ class="uikit-question__motivational-moment"
582
+ :class="{
583
+ 'uikit-question__motivational-moment--mcr': isMCR,
584
+ 'uikit-question__motivational-moment--explanation': showExplanation,
585
+ 'uikit-question__motivational-moment--passage-and-image': showPassageAndImage,
586
+ }"
587
+ >
588
+ <slot
589
+ name="motivationalMoment"
590
+ :showAnswers="showAnswers"
591
+ :answerKeys="answerKeys"
592
+ :choiceKey="choice.key"
593
+ :isCorrect="isCorrect"
594
+ />
595
+ </div>
567
596
  </div>
568
597
  <slot
569
598
  name="showNamesTable"
@@ -704,6 +733,21 @@
704
733
  </div>
705
734
  </div>
706
735
  </slot>
736
+ <div
737
+ v-breakpoint:questionEl="breakpoints"
738
+ class="uikit-question__motivational-moment-bottom"
739
+ :class="{
740
+ 'uikit-question__motivational-moment-bottom--mcr': isMCR,
741
+ 'uikit-question__motivational-moment-bottom--explanation': showExplanation,
742
+ 'uikit-question__motivational-moment-bottom--passage-and-image': showPassageAndImage,
743
+ }"
744
+ >
745
+ <slot
746
+ name="motivationalMomentBottom"
747
+ :showAnswers="showAnswers"
748
+ :isCorrect="isCorrect"
749
+ />
750
+ </div>
707
751
  <div
708
752
  v-if="!reviewMode"
709
753
  v-breakpoint:questionEl="breakpoints"
@@ -2106,6 +2150,26 @@ export default class Question extends Vue {
2106
2150
  font-weight: 500;
2107
2151
  }
2108
2152
 
2153
+ &__tag {
2154
+ margin-top: 8px;
2155
+ margin-bottom: -5px;
2156
+
2157
+ &--mobile {
2158
+ display: none;
2159
+ }
2160
+ }
2161
+
2162
+ &__tag-mobile {
2163
+ display: none;
2164
+ position: absolute;
2165
+ top: 14px;
2166
+ right: 14px;
2167
+
2168
+ &--mobile {
2169
+ display: block;
2170
+ }
2171
+ }
2172
+
2109
2173
  &__prompt {
2110
2174
  outline: none;
2111
2175
  font-weight: 600;
@@ -3158,6 +3222,44 @@ export default class Question extends Vue {
3158
3222
  }
3159
3223
  }
3160
3224
 
3225
+ &__motivational-moment {
3226
+ position: absolute;
3227
+ right: -150px;
3228
+ top: 20px;
3229
+
3230
+ &--mcr {
3231
+ display: none;
3232
+ }
3233
+
3234
+ &--passage-and-image {
3235
+ display: none;
3236
+ }
3237
+
3238
+ &--explanation {
3239
+ display: none;
3240
+ }
3241
+
3242
+ &--tablet-portrait {
3243
+ display: none;
3244
+ }
3245
+ }
3246
+
3247
+ &__motivational-moment-bottom {
3248
+ display: none;
3249
+
3250
+ &--mcr {
3251
+ display: block;
3252
+ }
3253
+
3254
+ &--passage-and-image:not(#{&}--tablet-portrait) {
3255
+ display: block;
3256
+ }
3257
+
3258
+ &--tablet-portrait {
3259
+ display: block;
3260
+ }
3261
+ }
3262
+
3161
3263
  &__summary {
3162
3264
  position: relative;
3163
3265
  background-color: $white;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.0.30",
3
+ "version": "3.0.31",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {