@pocketprep/ui-kit 3.4.24 → 3.4.26

package/lib/components/Filters/FilterDropdown.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="filter">
+    <div class="uikit-filter">
         <Link
             v-dark="isDarkMode"
             :has-icon="true"
             :aria-expanded="showFilterDropdown ? 'true' : 'false'"
-            class="filter__link"
+            class="uikit-filter__link"
             :class="{ 
-                'filter__link--open': showFilterDropdown,
-                'filter__link--responsive': responsiveButton,
+                'uikit-filter__link--open': showFilterDropdown,
+                'uikit-filter__link--responsive': responsiveButton,
             }"
             role="button"
             type="tertiary"
@@ -17,12 +17,12 @@
         >
             <Icon 
                 type="filter"
-                class="filter__icon"
+                class="uikit-filter__icon"
             />
             <span 
-                class="filter__text"
+                class="uikit-filter__text"
                 :class="{ 
-                    'filter__text--responsive': responsiveButton,
+                    'uikit-filter__text--responsive': responsiveButton,
                 }"
             >
                 {{ filterLabel }}
@@ -31,10 +31,10 @@
         <div
             v-if="showFilterDropdown"
             v-dark="isDarkMode"
-            class="filter__dropdown"
+            class="uikit-filter__dropdown"
             :class="{
-                [`filter__dropdown--${align}`]: true, 
-                [`filter__dropdown--${size}`]: true 
+                [`uikit-filter__dropdown--${align}`]: true, 
+                [`uikit-filter__dropdown--${size}`]: true 
             }"
         >
             <slot name="filterOptions">
@@ -103,7 +103,7 @@ export default class FilterDropdown extends Vue {
     clickListener (e: MouseEvent) {
         if (this.showFilterDropdown) {
             const targetEl = e.target as HTMLElement
-            if (!targetEl?.closest('.filter') 
+            if (!targetEl?.closest('.uikit-filter') 
                 && this.showFilterDropdown !== 'checkbox'
                 && document.body.contains(targetEl)
             ) {
@@ -155,7 +155,7 @@ export default class FilterDropdown extends Vue {
 @import '../../styles/colors';
 @import '../../styles/breakpoints';
 
-.filter {
+.uikit-filter {
     position: relative;
     z-index: 2;
 
@@ -199,13 +199,13 @@ export default class FilterDropdown extends Vue {
         z-index: 1;
         box-sizing: border-box;
         background: $white;
-        box-shadow: 0 6px 22px 0 rgba($brand-black, 0.1);
+        box-shadow: 0 6px 22px 0 rgba($brand-black, 0.2);
         max-height: 305px;
         overflow: auto;
 
         &--dark {
             background: $brand-black;
-            box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+            box-shadow: 0 6px 22px 0 rgba($jet, 0.6);
         }
 
         &--left {

package/lib/components/Modal/Modal.vue

@@ -56,14 +56,14 @@ export default class Modal extends Vue {
 
 .uikit-modal {
     border-radius: 12px;
-    box-shadow: 0 2px 30px 0 rgba($brand-black, 0.1);
+    box-shadow: 0 1px 40px 0 rgba($brand-black, 0.5);
     z-index: 10001;
     background-color: $white;
 
     &--dark {
         background-color: $moonlit-ocean;
         color: $white;
-        box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+        box-shadow: 0 1px 40px 0 $jet;
     }
 
     &__head {

package/lib/components/Tags/Tag.vue

@@ -3,9 +3,13 @@
         v-dark="isDarkMode"
         class="uikit-tag"
         :class="{
-            'uikit-tag--small': isSmallTag,
+            'uikit-tag--small': size === 'small',
+            'uikit-tag--medium': size === 'medium',
             'uikit-tag--beta': isBetaTag,
             'uikit-tag--learning': isLearningTag,
+            'uikit-tag--active': isActiveTag,
+            'uikit-tag--pending': isPendingTag,
+            'uikit-tag--archived': isArchivedTag,
         }"
     >
         <slot name="tagMessage" />
@@ -24,7 +28,10 @@ import { dark } from '../../directives'
 export default class Tag extends Vue {
     @Prop({ default: false }) isBetaTag!: boolean
     @Prop({ default: false }) isLearningTag!: boolean
-    @Prop({ default: false }) isSmallTag!: boolean
+    @Prop({ default: false }) isActiveTag!: boolean
+    @Prop({ default: false }) isPendingTag!: boolean
+    @Prop({ default: false }) isArchivedTag!: boolean
+    @Prop({ default: 'large' }) size!: 'small' | 'medium' | 'large'
     @Prop({ default: false }) isDarkMode!: boolean
 }
 </script>
@@ -55,6 +62,13 @@ export default class Tag extends Vue {
         border: 1px solid $banana-bread;
     }
 
+    &--medium {
+        font-size: 12px;
+        height: 17px;
+        line-height: 16px;
+        padding: 0 3px;
+    }
+
     &--small {
         font-size: 12px;
         height: 16px;
@@ -81,5 +95,23 @@ export default class Tag extends Vue {
             background-color: $orchid;
         }
     }
+
+    &--active {
+        border: none;
+        background: $meadow;
+        color: $scifi-takeout
+    }
+
+    &--pending {
+        border: none;
+        background: $buttermilk;
+        color: $flat-brown
+    }
+
+    &--archived {
+        border: none;
+        background: $fog;
+        color: $pickled-bluewood
+    }
 }
 </style>

package/package.json

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