@pocketprep/ui-kit 3.0.30 → 3.0.32

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="tag" />
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,23 @@
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="motivationalMoment"
747
+ :showAnswers="showAnswers"
748
+ :answerKeys="answerKeys"
749
+ :choiceKey="null"
750
+ :isCorrect="isCorrect"
751
+ />
752
+ </div>
707
753
  <div
708
754
  v-if="!reviewMode"
709
755
  v-breakpoint:questionEl="breakpoints"
@@ -2106,6 +2152,26 @@ export default class Question extends Vue {
2106
2152
  font-weight: 500;
2107
2153
  }
2108
2154
 
2155
+ &__tag {
2156
+ margin-top: 8px;
2157
+ margin-bottom: -5px;
2158
+
2159
+ &--mobile {
2160
+ display: none;
2161
+ }
2162
+ }
2163
+
2164
+ &__tag-mobile {
2165
+ display: none;
2166
+ position: absolute;
2167
+ top: 14px;
2168
+ right: 14px;
2169
+
2170
+ &--mobile {
2171
+ display: block;
2172
+ }
2173
+ }
2174
+
2109
2175
  &__prompt {
2110
2176
  outline: none;
2111
2177
  font-weight: 600;
@@ -3158,6 +3224,44 @@ export default class Question extends Vue {
3158
3224
  }
3159
3225
  }
3160
3226
 
3227
+ &__motivational-moment {
3228
+ position: absolute;
3229
+ right: -150px;
3230
+ top: 20px;
3231
+
3232
+ &--mcr {
3233
+ display: none;
3234
+ }
3235
+
3236
+ &--passage-and-image {
3237
+ display: none;
3238
+ }
3239
+
3240
+ &--explanation {
3241
+ display: none;
3242
+ }
3243
+
3244
+ &--tablet-portrait {
3245
+ display: none;
3246
+ }
3247
+ }
3248
+
3249
+ &__motivational-moment-bottom {
3250
+ display: none;
3251
+
3252
+ &--mcr {
3253
+ display: block;
3254
+ }
3255
+
3256
+ &--passage-and-image:not(#{&}--tablet-portrait) {
3257
+ display: block;
3258
+ }
3259
+
3260
+ &--tablet-portrait {
3261
+ display: block;
3262
+ }
3263
+ }
3264
+
3161
3265
  &__summary {
3162
3266
  position: relative;
3163
3267
  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.32",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {