@pocketprep/ui-kit 3.4.17 → 3.4.19

package/lib/components/Filters/FilterOptions.vue

@@ -35,6 +35,7 @@
                 v-model="radioEntry"
                 aria-live="polite"
                 :data="radioOptions"
+                :is-dark-mode="isDarkMode"
                 class="filter-options__radio"
             />
         </slot>
@@ -67,7 +68,7 @@
                 :aria-expanded="showFilterDropdown ? 'true' : 'false'"
             >
                 <slot name="checkboxLabelText">
-                    <span>{{ filterOptionsLabel }}</span>
+                    <div>{{ filterOptionsLabel }}</div>
                 </slot>
             </div>
         </slot>
@@ -232,6 +233,14 @@ export default class FilterOptions extends Vue {
             transform: rotate(180deg);
         }
 
+        &:hover {
+            svg, 
+            span {
+                color: $brand-blue;
+                cursor: pointer;
+            }
+        }
+
         &:focus {
             &::before {
                 content: '';
@@ -246,11 +255,19 @@ export default class FilterOptions extends Vue {
         }
 
         &--dark {
-            color: $white;
+            color: $pewter;
 
             &:focus::before {
                 border-color: $banana-bread;
             }
+
+            &:hover {
+                svg, 
+                span {
+                    color: $banana-bread;
+                    cursor: pointer;
+                }
+            }
         }
 
         span {
@@ -258,9 +275,13 @@ export default class FilterOptions extends Vue {
         }
 
         svg {
-            color: $brand-blue;
+            color: $slate;
             width: 11px;
             height: 10px;
+
+            &--dark {
+                color: $pewter;
+            }
         }
     }
 

package/lib/components/SidePanels/SidePanel.vue

@@ -25,6 +25,7 @@
                 :class="{ 
                     'uikit-side-panel__head--has-tabs': tabs && tabs.length,
                     'uikit-side-panel__head--has-stepped-tabs': tabs && tabs.length && steppedTabs,
+                    'uikit-side-panel__head--teach-side-panel': isTeachSidePanel,
                 }"
             >
                 <div
@@ -83,7 +84,10 @@
                 <div 
                     v-dark="isDarkMode"
                     class="uikit-side-panel__content"
-                    :class="{ 'uikit-side-panel__content--has-tabs': tabs && tabs.length }"
+                    :class="{ 
+                        'uikit-side-panel__content--has-tabs': tabs && tabs.length,
+                        'uikit-side-panel__content--teach-side-panel': isTeachSidePanel,
+                    }"
                     :style="{ ...customContentStyles }"
                 >
                     <slot />
@@ -136,6 +140,7 @@ export default class SidePanel extends Vue {
     @Prop({ default: () => ({}) }) customContentStyles!: { [key: string]: string }
     @Prop({ default: 'large' }) width!: 'large' | 'medium' | number
     @Prop({ default: false }) disableTransition!: boolean
+    @Prop({ default: false }) isTeachSidePanel!: boolean
     @Prop({ default: false }) isDarkMode!: boolean
 
     openSidePanel = false
@@ -377,6 +382,10 @@ export default class SidePanel extends Vue {
             padding-bottom: 69px;
         }
 
+        &--teach-side-panel {
+            background-color: $barely-background;
+        }
+
         &--dark {
             background: $brand-black;
             color: $white;
@@ -570,6 +579,10 @@ export default class SidePanel extends Vue {
             margin: 5px 0 40px;
         }
 
+        &--teach-side-panel {
+            background-color: $white;
+        }
+
         &--dark {
             color: $fog;
         }

package/package.json

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