@pocketprep/ui-kit 3.4.43 → 3.4.45

package/lib/components/Quiz/FlagToggle.vue

@@ -1,6 +1,7 @@
 <template>
     <div
         class="uikit-flag-toggle"
+        :class="{ 'uikit-flag-toggle--disabled': disabled }"
         tabindex="0"
         :aria-checked="isFlagged"
         aria-label="Flag question"
@@ -14,7 +15,7 @@
         @blur="showFlagTooltip = false"
     >
         <Tooltip
-            v-if="showFlagTooltip && enableFlagTooltip"
+            v-if="showFlagTooltip && enableFlagTooltip && !disabled"
             :key="isFlagged"
             class="uikit-flag-toggle__tooltip"
             :styles="{
@@ -28,6 +29,7 @@
             class="uikit-flag-toggle__icon"
             :class="{
                 'uikit-flag-toggle__icon--active': isFlagged,
+                'uikit-flag-toggle__icon--disabled': disabled
             }"
             :type="isFlagged ? 'flag-filled' : 'flag'"
         />
@@ -50,6 +52,7 @@ export default class FlagToggle extends Vue {
     @Prop() isFlagged!: boolean
     @Prop({ default: false }) enableFlagKeyboardShortcut!: boolean
     @Prop({ default: true }) enableFlagTooltip!: boolean
+    @Prop({ default: false }) disabled!: boolean
 
     brandColors = BrandColors
     showFlagTooltip = false
@@ -65,12 +68,20 @@ export default class FlagToggle extends Vue {
     }
 
     keydownListener (e: KeyboardEvent) {
+        if (this.disabled) {
+            return
+        }
+
         if (e.code === 'KeyP') {
             this.emitToggleFlag(!this.isFlagged)
         }
     }
 
     toggleFlag () {
+        if (this.disabled) {
+            return
+        }
+
         this.emitToggleFlag(!this.isFlagged)
     }
 
@@ -107,12 +118,25 @@ export default class FlagToggle extends Vue {
         }
     }
 
+    &--disabled {
+        opacity: 0.35;
+
+        &:focus::before {
+            display: none;
+        }
+    }
+
     &__icon {
         cursor: pointer;
 
         &--active {
             color: $banana-bread;
         }
+
+        &--disabled {
+            cursor: default;
+            color: $white !important;
+        }
     }
 
     &__tooltip {

package/lib/components/Search/Search.vue

@@ -140,6 +140,7 @@ export default class Search extends Vue {
         &--white {
             top: 10px;
             left: 8px;
+            color: $steel;
         }
 
         &--disabled,
@@ -268,7 +269,7 @@ export default class Search extends Vue {
         }
 
         &::placeholder {
-            color: $slate;
+            color: $slate !important;
         }
 
         &--dark {
@@ -278,7 +279,7 @@ export default class Search extends Vue {
             color: $white;
 
             &::placeholder {
-                color: $pewter;
+                color: $pewter !important;
             }
         }
 
@@ -305,7 +306,7 @@ export default class Search extends Vue {
                 border: 1px solid #a7c7ff;
 
                 &::placeholder {
-                    color: $brand-blue;
+                    color: $brand-blue !important;
                 }
             }
 
@@ -314,7 +315,7 @@ export default class Search extends Vue {
                     border-color: $banana-bread;
 
                     &::placeholder {
-                        color: $banana-bread;
+                        color: $banana-bread !important;
                     }
                 }
             }
@@ -326,7 +327,7 @@ export default class Search extends Vue {
                 background: $white;
 
                 &::placeholder {
-                    color: $slate-01;
+                    color: $slate !important;
                 }
             }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.43",
+  "version": "3.4.45",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {