@pocketprep/ui-kit 3.4.72 → 3.4.74

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 (8) hide show
  1. package/dist/@pocketprep/ui-kit.js +478 -470
  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 +79 -49
  7. package/lib/components/Quiz/Question.vue +1 -1
  8. 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
@@ -514,18 +524,6 @@ export default class MatrixChoicesContainer extends Vue {
514
524
  margin-right: 16px;
515
525
  }
516
526
 
517
- &--tablet-landscape {
518
- &:not(:last-child) {
519
- margin-right: 10px;
520
- }
521
- }
522
-
523
- &--tablet-portrait {
524
- &:not(:last-child) {
525
- margin-right: 14px;
526
- }
527
- }
528
-
529
527
  &--two-columns {
530
528
  width: 88px;
531
529
 
@@ -605,9 +603,13 @@ export default class MatrixChoicesContainer extends Vue {
605
603
  position: relative;
606
604
  transition: 0.1s padding ease;
607
605
  align-items: flex-start;
608
- gap: 16px;
606
+ gap: 10px;
609
607
  margin-bottom: 9px;
610
608
 
609
+ &--checkbox {
610
+ gap: 24px;
611
+ }
612
+
611
613
  &--two-columns {
612
614
  gap: 0;
613
615
  }
@@ -624,6 +626,7 @@ export default class MatrixChoicesContainer extends Vue {
624
626
 
625
627
  &__choice-text {
626
628
  width: 279px;
629
+ min-width: 279px;
627
630
  min-height: fit-content;
628
631
  color: $brand-black;
629
632
  font-size: 16.5px;
@@ -664,10 +667,24 @@ export default class MatrixChoicesContainer extends Vue {
664
667
  margin-bottom: 9px;
665
668
  }
666
669
 
670
+ &__checkboxes {
671
+ display: flex;
672
+
673
+ &--three-columns {
674
+ margin-left: -8px;
675
+ }
676
+ }
677
+
667
678
  &__checkbox {
679
+ position: relative;
668
680
  width: 56px;
681
+ min-width: 56px;
669
682
  display: flex;
670
683
 
684
+ &:not(:last-child) {
685
+ margin-right: 16px;
686
+ }
687
+
671
688
  &--two-columns {
672
689
  width: 88px;
673
690
 
@@ -676,8 +693,19 @@ export default class MatrixChoicesContainer extends Vue {
676
693
  }
677
694
  }
678
695
 
696
+ &--review {
697
+ padding-left: 12px;
698
+
699
+ &:not(&:last-child) {
700
+ margin-right: 4px;
701
+ }
702
+ }
703
+
679
704
  .uikit-checkbox--disabled {
680
705
  background: transparent;
706
+ position: relative;
707
+ top: 1px;
708
+ left: -1px;
681
709
  }
682
710
  }
683
711
 
@@ -696,6 +724,7 @@ export default class MatrixChoicesContainer extends Vue {
696
724
  margin-top: 0;
697
725
  margin-left: 0;
698
726
  width: 20px;
727
+ height: auto;
699
728
  }
700
729
  }
701
730
 
@@ -711,8 +740,9 @@ export default class MatrixChoicesContainer extends Vue {
711
740
  }
712
741
 
713
742
  &__incorrect-answer-icon {
714
- margin-left: 6px;
715
- margin-top: -2px;
743
+ position: absolute;
744
+ top: -1px;
745
+ left: 34px;
716
746
  width: 21px;
717
747
  height: 22px;
718
748
  color: $pepper;
package/lib/components/Quiz/Question.vue CHANGED
@@ -1578,7 +1578,7 @@ export default class Question extends Vue {
1578
1578
 
1579
1579
  &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
1580
1580
  width: 100%;
1581
- padding-right: 0;
1581
+ padding-right: 42px;
1582
1582
  }
1583
1583
  }
1584
1584
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.4.72",
3
+ "version": "3.4.74",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {