@pocketprep/ui-kit 3.4.71 → 3.4.73

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.
Files changed (9) hide show
  1. package/dist/@pocketprep/ui-kit.js +608 -597
  2. package/dist/@pocketprep/ui-kit.js.map +1 -1
  3. package/dist/@pocketprep/ui-kit.umd.cjs +1 -1
  4. package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/lib/components/Quiz/Question/MatrixChoicesContainer.vue +112 -71
  7. package/lib/components/Quiz/Question/MatrixRadioGroup.vue +5 -1
  8. package/lib/components/Quiz/Question.vue +6 -1
  9. package/package.json +1 -1
package/lib/components/Quiz/Question/MatrixChoicesContainer.vue CHANGED
@@ -84,52 +84,62 @@
84
84
  matrixCheckboxGrid[rowIndex]"
85
85
  >
86
86
  <div
87
- class="uikit-question-matrix-choices-container__checkbox"
87
+ class="uikit-question-matrix-choices-container__checkboxes"
88
88
  :class="{
89
- 'uikit-question-matrix-choices-container__checkbox--two-columns':
90
- numberOfMatrixColumnLabels === 2
89
+ 'uikit-question-matrix-choices-container__checkboxes--three-columns':
90
+ numberOfMatrixColumnLabels === 3,
91
91
  }"
92
- v-for="(columnLabel, columnIndex) in matrixColumnLabels"
93
- :key="columnIndex"
94
- v-dark="isDarkMode"
95
- v-breakpoint:questionEl="breakpoints"
96
92
  >
97
- <Checkbox
98
- v-if="(showMatrixAnswers || reviewMode) &&
99
- correctAnswerButNotSelected(rowIndex, columnIndex)"
100
- :model-value="true"
101
- :is-dark-mode="isDarkMode"
102
- :disabled="showMatrixAnswers || reviewMode"
103
- :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
104
- :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
105
- />
106
- <div
107
- v-else
108
- class="uikit-question-matrix-choices-container__clickable-checkbox"
93
+ <div
94
+ class="uikit-question-matrix-choices-container__checkbox"
109
95
  :class="{
110
- 'uikit-question-matrix-choices-container__clickable-checkbox--review':
111
- showMatrixAnswers || reviewMode
96
+ 'uikit-question-matrix-choices-container__checkbox--two-columns':
97
+ numberOfMatrixColumnLabels === 2,
98
+ 'uikit-question-matrix-choices-container__checkbox--review':
99
+ showMatrixAnswers || reviewMode,
112
100
  }"
113
- @click="!(showMatrixAnswers || reviewMode) && checkboxClicked(rowIndex, columnIndex)"
114
- @keypress.enter="!(showMatrixAnswers || reviewMode) &&
115
- checkboxClicked(rowIndex, columnIndex)"
101
+ v-for="(columnLabel, columnIndex) in matrixColumnLabels"
102
+ :key="columnIndex"
103
+ v-dark="isDarkMode"
104
+ v-breakpoint:questionEl="breakpoints"
116
105
  >
117
106
  <Checkbox
118
- :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
107
+ v-if="(showMatrixAnswers || reviewMode) &&
108
+ correctAnswerButNotSelected(rowIndex, columnIndex)"
109
+ :model-value="true"
119
110
  :is-dark-mode="isDarkMode"
120
111
  :disabled="showMatrixAnswers || reviewMode"
112
+ :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
121
113
  :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
122
114
  />
115
+ <div
116
+ v-else
117
+ class="uikit-question-matrix-choices-container__clickable-checkbox"
118
+ :class="{
119
+ 'uikit-question-matrix-choices-container__clickable-checkbox--review':
120
+ showMatrixAnswers || reviewMode
121
+ }"
122
+ @click="!(showMatrixAnswers || reviewMode) && checkboxClicked(rowIndex, columnIndex)"
123
+ @keypress.enter="!(showMatrixAnswers || reviewMode) &&
124
+ checkboxClicked(rowIndex, columnIndex)"
125
+ >
126
+ <Checkbox
127
+ :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
128
+ :is-dark-mode="isDarkMode"
129
+ :disabled="showMatrixAnswers || reviewMode"
130
+ :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
131
+ />
132
+ </div>
133
+ <Icon
134
+ v-if="
135
+ (showMatrixAnswers || reviewMode) &&
136
+ (incorrectlySelectedChoice(rowIndex, columnIndex) ||
137
+ correctAnswerButNotSelected(rowIndex, columnIndex))"
138
+ class="uikit-question-matrix-choices-container__incorrect-answer-icon"
139
+ v-dark="isDarkMode"
140
+ type="incorrect"
141
+ />
123
142
  </div>
124
- <Icon
125
- v-if="
126
- (showMatrixAnswers || reviewMode) &&
127
- (incorrectlySelectedChoice(rowIndex, columnIndex) ||
128
- correctAnswerButNotSelected(rowIndex, columnIndex))"
129
- class="uikit-question-matrix-choices-container__incorrect-answer-icon"
130
- v-dark="isDarkMode"
131
- type="incorrect"
132
- />
133
143
  </div>
134
144
  </template>
135
145
  <template
@@ -143,6 +153,10 @@
143
153
  :review-mode="reviewMode"
144
154
  :show-answers="showMatrixAnswers"
145
155
  class="uikit-question-matrix-choices-container__radio-btns"
156
+ :class="{
157
+ 'uikit-question-matrix-choices-container__radio-btns--three-columns':
158
+ numberOfMatrixColumnLabels === 3,
159
+ }"
146
160
  :choices="getRadioRowChoices(rowIndex)"
147
161
  :is-dark-mode="isDarkMode"
148
162
  :disabled="false"
@@ -488,22 +502,17 @@ export default class MatrixChoicesContainer extends Vue {
488
502
  }
489
503
 
490
504
  &__column-row-header {
491
- width: 286px;
492
-
493
- &--tablet-landscape {
494
- width: 285px;
495
- }
496
-
497
- &--tablet-portrait {
498
- width: 275px;
499
- }
505
+ width: 290px;
506
+ margin-right: 16px;
500
507
 
501
508
  &--two-columns {
502
- width: 303px;
509
+ width: 288px;
510
+ margin-right: 16px;
503
511
  }
504
512
 
505
513
  &--radio-btn-three-columns {
506
- width: 276px;
514
+ width: 290px;
515
+ margin-right: 16px;
507
516
  }
508
517
  }
509
518
 
@@ -512,30 +521,20 @@ export default class MatrixChoicesContainer extends Vue {
512
521
  hyphens: auto;
513
522
 
514
523
  &:not(:last-child) {
515
- margin-right: 11px;
516
- }
517
-
518
- &--tablet-landscape {
519
- &:not(:last-child) {
520
- margin-right: 10px;
521
- }
522
- }
523
-
524
- &--tablet-portrait {
525
- &:not(:last-child) {
526
- margin-right: 14px;
527
- }
524
+ margin-right: 16px;
528
525
  }
529
526
 
530
527
  &--two-columns {
528
+ width: 88px;
529
+
531
530
  &:not(:last-child) {
532
- margin-right: 24px;
531
+ margin-right: 16px;
533
532
  }
534
533
  }
535
534
 
536
535
  &--radio-btn-three-columns {
537
536
  &:not(:last-child) {
538
- margin-right: 15px;
537
+ margin-right: 16px;
539
538
  }
540
539
  }
541
540
  }
@@ -604,9 +603,13 @@ export default class MatrixChoicesContainer extends Vue {
604
603
  position: relative;
605
604
  transition: 0.1s padding ease;
606
605
  align-items: flex-start;
607
- gap: 16px;
606
+ gap: 10px;
608
607
  margin-bottom: 9px;
609
608
 
609
+ &--checkbox {
610
+ gap: 24px;
611
+ }
612
+
610
613
  &--two-columns {
611
614
  gap: 0;
612
615
  }
@@ -622,7 +625,8 @@ export default class MatrixChoicesContainer extends Vue {
622
625
  }
623
626
 
624
627
  &__choice-text {
625
- width: 303px;
628
+ width: 279px;
629
+ min-width: 279px;
626
630
  min-height: fit-content;
627
631
  color: $brand-black;
628
632
  font-size: 16.5px;
@@ -633,12 +637,12 @@ export default class MatrixChoicesContainer extends Vue {
633
637
 
634
638
  &--two-columns {
635
639
  width: 279px;
636
- margin-right: 24px;
640
+ margin-right: 14px;
637
641
  }
638
642
 
639
643
  &--radio-btn-two-columns {
640
644
  width: 279px;
641
- margin-right: 12px;
645
+ margin-right: 14px;
642
646
  }
643
647
 
644
648
  &--dark {
@@ -663,28 +667,56 @@ export default class MatrixChoicesContainer extends Vue {
663
667
  margin-bottom: 9px;
664
668
  }
665
669
 
670
+ &__checkboxes {
671
+ display: flex;
672
+
673
+ &--three-columns {
674
+ margin-left: -10px;
675
+ }
676
+ }
677
+
666
678
  &__checkbox {
679
+ position: relative;
667
680
  width: 56px;
681
+ min-width: 56px;
668
682
  display: flex;
669
683
 
684
+ &:not(:last-child) {
685
+ margin-right: 16px;
686
+ }
687
+
670
688
  &--two-columns {
671
- width: 80px;
689
+ width: 88px;
690
+
691
+ &:not(&:last-child) {
692
+ margin-right: 16px;
693
+ }
694
+ }
695
+
696
+ &--review {
697
+ padding-left: 12px;
698
+
699
+ &:not(&:last-child) {
700
+ margin-right: 4px;
701
+ }
672
702
  }
673
703
 
674
704
  .uikit-checkbox--disabled {
675
705
  background: transparent;
706
+ position: relative;
707
+ top: 1px;
708
+ left: -1px;
676
709
  }
677
710
  }
678
711
 
679
712
  &__clickable-checkbox {
680
- width: 36px;
681
- height: 36px;
713
+ width: 40px;
714
+ height: 40px;
682
715
  cursor: pointer;
683
716
  display: flex;
684
717
  align-items: center;
685
718
  justify-content: center;
686
- margin-top: -8px;
687
- margin-left: -8px;
719
+ margin-top: -10px;
688
720
 
689
721
  &--review {
690
722
  cursor: default;
@@ -692,6 +724,7 @@ export default class MatrixChoicesContainer extends Vue {
692
724
  margin-top: 0;
693
725
  margin-left: 0;
694
726
  width: 20px;
727
+ height: auto;
695
728
  }
696
729
  }
697
730
 
@@ -707,8 +740,9 @@ export default class MatrixChoicesContainer extends Vue {
707
740
  }
708
741
 
709
742
  &__incorrect-answer-icon {
710
- margin-left: 6px;
711
- margin-top: -2px;
743
+ position: absolute;
744
+ top: -1px;
745
+ left: 34px;
712
746
  width: 21px;
713
747
  height: 22px;
714
748
  color: $pepper;
@@ -718,6 +752,13 @@ export default class MatrixChoicesContainer extends Vue {
718
752
  }
719
753
  }
720
754
 
755
+ &__radio-btns {
756
+ &--three-columns {
757
+ position: relative;
758
+ left: 6px;
759
+ }
760
+ }
761
+
721
762
  &__radio-btn-correct-answer-icon {
722
763
  margin-top: -10px;
723
764
  width: 21px;
package/lib/components/Quiz/Question/MatrixRadioGroup.vue CHANGED
@@ -92,7 +92,11 @@ const selectChoice = (choiceKey: string) => {
92
92
  width: 72px;
93
93
 
94
94
  &--two-options {
95
- width: 80px;
95
+ width: 88px;
96
+
97
+ &:first-child {
98
+ margin-right: 16px;
99
+ }
96
100
  }
97
101
 
98
102
  &:last-child {
package/lib/components/Quiz/Question.vue CHANGED
@@ -135,6 +135,7 @@
135
135
  'uikit-question__choices--correct': showAnswers && isMCR && isCorrect,
136
136
  'uikit-question__choices--incorrect':
137
137
  showAnswers && (isMCR || isUnanswered) && !isCorrect && !isTeachReview,
138
+ 'uikit-question__choices--matrix': isMatrixQuestion,
138
139
  'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
139
140
  'uikit-question__choices--show-stats': globalMetrics,
140
141
  'uikit-question__choices--no-actions': !(isMCR || isUnanswered || isMatrixQuestion)
@@ -1577,7 +1578,7 @@ export default class Question extends Vue {
1577
1578
 
1578
1579
  &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
1579
1580
  width: 100%;
1580
- padding-right: 0;
1581
+ padding-right: 42px;
1581
1582
  }
1582
1583
  }
1583
1584
 
@@ -1896,6 +1897,10 @@ export default class Question extends Vue {
1896
1897
  &--incorrect#{&}--unanswered:not(&--show-stats) {
1897
1898
  margin-bottom: 71px;
1898
1899
  }
1900
+
1901
+ &--matrix {
1902
+ max-width: 518px;
1903
+ }
1899
1904
  }
1900
1905
 
1901
1906
  &__unanswered-label {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.4.71",
3
+ "version": "3.4.73",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {