@pocketprep/ui-kit 3.1.1 → 3.1.3

package/lib/components/Filters/FilterDropdown.vue

@@ -1,43 +1,48 @@
 <template>
     <div class="filter">
-        <div class="filter-button">
-            <Link
-                v-dark="isDarkMode"
-                :has-icon="true"
-                :aria-expanded="showFilterDropdown ? 'true' : 'false'"
-                class="filter-button__link"
+        <Link
+            v-dark="isDarkMode"
+            :has-icon="true"
+            :aria-expanded="showFilterDropdown ? 'true' : 'false'"
+            class="filter__link"
+            :class="{ 
+                'filter__link--open': showFilterDropdown,
+                'filter__link--responsive': responsiveButton,
+            }"
+            role="button"
+            type="tertiary"
+            tabindex="0"
+            @keypress.enter="showFilterDropdown"
+            @click="showFilterDropdown = !showFilterDropdown"
+        >
+            <Icon 
+                type="filter"
+                class="filter__icon"
+            />
+            <span 
+                class="filter__text"
                 :class="{ 
-                    'filter-button__link--open': showFilterDropdown,
-                    'filter-button__link--responsive': responsiveButton,
+                    'filter__text--responsive': responsiveButton,
                 }"
-                role="button"
-                type="tertiary"
-                tabindex="0"
-                @keypress.enter="showFilterDropdown"
-                @click="showFilterDropdown = !showFilterDropdown"
             >
-                <Icon 
-                    type="filter"
-                    class="filter-button__icon"
-                />
-                <span class="filter-button__text">
-                    {{ filterLabel }}
-                </span>
-            </Link>
-        </div>
+                {{ filterLabel }}
+            </span>
+        </Link>
         <div
             v-if="showFilterDropdown"
             v-dark="isDarkMode"
-            class="filter-dropdown"
-            :class="{ 
-                [`filter-dropdown--${align}`]: true, 
-                [`filter-dropdown--${size}`]: true 
+            class="filter__dropdown"
+            :class="{
+                [`filter__dropdown--${align}`]: true, 
+                [`filter__dropdown--${size}`]: true 
             }"
         >
             <slot name="filterOptions">
                 <FilterOptions
                     :radio-entries="radioOptions"
                     :checkbox-entries="checkboxOptions"
+                    :is-dark-mode="isDarkMode"
+                    :filter-options-label="filterOptionsLabel"
                 >
                     <template #checkboxLabelText>
                         <slot name="checkboxLabelText" />
@@ -75,15 +80,18 @@ export default class FilterDropdown extends Vue {
     @Prop({ default: 'small' }) size!: 'small' | 'large'
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: false }) responsiveButton!: boolean
+    @Prop({ default: 'FILTER BY SUBJECT' }) filterOptionsLabel?: string
 
-    radioOptions = [ ...this.radioEntries ]
-    checkboxOptions = [ ...this.checkboxEntries ]
+    radioOptions: TRadioOption[] = []
+    checkboxOptions: TCheckboxOption[] = []
 
     showFilterDropdown: boolean | 'checkbox' = false
 
     mounted () {
         document.addEventListener('click', this.clickListener)
         document.addEventListener('keydown', this.keydownListener)
+        this.radioOptions = [ ...this.radioEntries ]
+        this.checkboxOptions = [ ...this.checkboxEntries ]
     }
 
     keydownListener (e: KeyboardEvent) {
@@ -148,34 +156,65 @@ export default class FilterDropdown extends Vue {
 @import '../../styles/breakpoints';
 
 .filter {
-    .filter-button {
-        padding-bottom: 12px;
+    position: relative;
+    z-index: 2;
 
-        &__link {
-            &--open {
-                color: $brand-black !important;
+    &__link {
+        align-items: center;
+        display: flex;
 
-                &--dark {
-                    color: $butterscotch !important;
-                }
+        &--open {
+            color: $brand-black !important;
+
+            &--dark {
+                color: $butterscotch !important;
             }
+        }
 
-            &--responsive {
-                div {
-                    @include breakpoint(black-bear) {
-                        display: none;
-                    }
+        svg {
+            margin-right: 3px;
+        }
+    }
+
+    &__icon {
+        padding-bottom: 1px;
+    }
+
+    &__text {
+        margin-top: 1px;
+
+        &--responsive {
+                @include breakpoint(black-bear) {
+                    display: none;
                 }
-            }
+        }
+    }
+
+    &__dropdown {
+        position: absolute;
+        right: -14px;
+        top: 28px;
+        width: 204px;
+        border-radius: 8px;
+        z-index: 1;
+        box-sizing: border-box;
+        background: $white;
+        box-shadow: 0 6px 22px 0 rgba($brand-black, 0.1);
+        max-height: 305px;
+        overflow: auto;
+
+        &--dark {
+            background: $brand-black;
+            box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
         }
 
-        &__icon {
-            vertical-align: middle;
-            padding-bottom: 1px;
+        &--left {
+            right: auto;
+            left: -14px;
         }
 
-        &__text {
-            vertical-align: middle;
+        &--large {
+            width: 250px;
         }
     }
 }

package/lib/components/Filters/FilterOptions.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        v-dark
+        v-dark="isDarkMode"
         class="filter-options"
         :class="{ 
             [`filter-options--${align}`]: true, 
@@ -10,7 +10,7 @@
         <slot name="radioLabel">
             <div
                 v-if="radioOptions.length > 0"
-                v-dark
+                v-dark="isDarkMode"
                 class="filter-options__label"
                 :class="{ 'filter-options__label--active': showRadioOptions }"
                 :aria-expanded="showFilterDropdown ? 'true' : 'false'"
@@ -41,7 +41,7 @@
         <slot name="checkboxLabel">
             <div
                 v-if="radioOptions.length > 0"
-                v-dark
+                v-dark="isDarkMode"
                 class="filter-options__label"
                 :class="{ 'filter-options__label--active': showCheckboxOptions }"
                 :aria-expanded="showFilterDropdown ? 'true' : 'false'"
@@ -49,7 +49,7 @@
                 @mousedown.prevent
             >
                 <slot name="checkboxLabelText">
-                    <span>FILTER BY SUBJECT</span>
+                    <span>{{ filterOptionsLabel }}</span>
                 </slot>
                 <slot name="checkboxLabelIcon">
                     <Icon
@@ -61,13 +61,13 @@
             </div>
             <div
                 v-else
-                v-dark
+                v-dark="isDarkMode"
                 class="filter-options__label"
                 :class="{ 'filter-options__label--active': showCheckboxOptions }"
                 :aria-expanded="showFilterDropdown ? 'true' : 'false'"
             >
                 <slot name="checkboxLabelText">
-                    <span>FILTER BY SUBJECT</span>
+                    <span>{{ filterOptionsLabel }}</span>
                 </slot>
             </div>
         </slot>
@@ -80,10 +80,12 @@
                     v-for="option in checkboxOptions"
                     :key="option.id"
                     v-model="option.enabled"
-                    v-dark="isDarkMode"
+                    :is-dark-mode="isDarkMode"
                     :label="option.label"
                     class="filter-options__option"
-                    @click="option.enabled = !option.enabled"
+                    :class="{
+                        'filter-options__option--force-break': !stringHasSpaces(option.label)
+                    }"
                 />
             </div>
         </slot>
@@ -95,6 +97,7 @@ import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
 import CheckboxOption from '../Forms/CheckboxOption.vue'
 import Link from '../Buttons/Link.vue'
 import Radio from '../Forms/Radio.vue'
+import Icon from '../Icons/Icon.vue'
 import { dark } from '../../directives'
 import type { TRadioOption, TCheckboxOption } from './filterOptions'
 
@@ -103,6 +106,7 @@ import type { TRadioOption, TCheckboxOption } from './filterOptions'
         CheckboxOption,
         Link,
         Radio,
+        Icon,
     },
     directives: {
         dark,
@@ -117,9 +121,10 @@ export default class FilterOptions extends Vue {
     @Prop({ default: 'right' }) align!: 'left' | 'right'
     @Prop({ default: 'small' }) size!: 'small' | 'large'
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: 'FILTER BY SUBJECT' }) filterOptionsLabel?: string
 
-    radioOptions = [ ...this.radioEntries ]
-    checkboxOptions = [ ...this.checkboxEntries ]
+    radioOptions: TRadioOption[] = []
+    checkboxOptions: TCheckboxOption[] = []
 
     showFilterDropdown: boolean | 'checkbox' = false
     showRadioOptions = true
@@ -154,6 +159,8 @@ export default class FilterOptions extends Vue {
     mounted () {
         document.addEventListener('click', this.clickListener)
         document.addEventListener('keydown', this.keydownListener)
+        this.radioOptions = [ ...this.radioEntries ]
+        this.checkboxOptions = [ ...this.checkboxEntries ]
     }
 
     @Watch('checkboxOptions', { deep: true })
@@ -199,13 +206,18 @@ export default class FilterOptions extends Vue {
     background: $white;
     border-radius: 8px;
     box-shadow: 0 6px 22px 0 rgba($brand-black, 0.1);
-    padding-bottom: 20px;
     box-sizing: border-box;
     width: 100%;
     max-width: 250px;
     font-weight: 500;
     max-height: 305px;
     overflow: auto;
+    padding: 5px 0 16px;
+
+    &--dark {
+        background: $brand-black;
+        box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+    }
 
     &__label {
         display: flex;
@@ -234,7 +246,7 @@ export default class FilterOptions extends Vue {
         }
 
         &--dark {
-            color: $pewter;
+            color: $white;
 
             &:focus::before {
                 border-color: $banana-bread;
@@ -259,7 +271,10 @@ export default class FilterOptions extends Vue {
     &__option {
         padding-left: 14px;
         margin: 0 6px;
-        line-height: 18px;
+
+        &--force-break {
+            word-break: break-all;
+        }
     }
 }
 </style>

package/lib/components/Pagination/TablePagination.vue

@@ -1,11 +1,20 @@
 <template>
-    <div class="uikit-table-pagination">
-        <div class="uikit-table-pagination__info">
+    <div 
+        v-dark="isDarkMode"
+        class="uikit-table-pagination"
+    >
+        <div 
+            ref="pagination_info"
+            v-dark="isDarkMode"
+            class="uikit-table-pagination__info"
+            tabindex="-1"
+        >
             {{ (currentPage * perPage) + 1 }} -
             {{ nextPageDisabled ? total : (currentPage * perPage) + perPage }}
             of {{ total }} {{ unit }} <slot />
         </div>
         <div
+            v-dark="isDarkMode"
             class="uikit-table-pagination__previous"
             :class="{ 'uikit-table-pagination__previous--disabled': currentPage === 0 }"
             :tabindex="currentPage === 0 ? -1 : 0"
@@ -13,10 +22,12 @@
             :aria-disabled="currentPage === 0"
             @keydown.enter="changePage('previous')"
             @click="changePage('previous')"
+            @mousedown.prevent
         >
-            <Icon type="accordionArrow" class="uikit-table-pagination__previous-icon" />
+            <Icon type="accordionArrow" />
         </div>
         <div
+            v-dark="isDarkMode"
             class="uikit-table-pagination__next"
             :class="{ 'uikit-table-pagination__next--disabled': nextPageDisabled }"
             :tabindex="nextPageDisabled ? -1 : 0"
@@ -24,8 +35,9 @@
             :aria-disabled="nextPageDisabled"
             @keydown.enter="changePage('next')"
             @click="changePage('next')"
+            @mousedown.prevent
         >
-            <Icon type="accordionArrow" class="uikit-table-pagination__next-icon" />
+            <Icon type="accordionArrow" />
         </div>
     </div>
 </template>
@@ -33,17 +45,22 @@
 <script lang="ts">
 import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
 import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
 
 @Component({
     components: {
         Icon,
     },
+    directives: {
+        dark,
+    },
 })
 export default class TablePagination extends Vue {
     @Prop({ default: 10 }) perPage!: number
     @Prop({ default: 0 }) currentPage!: number
     @Prop() total!: number
     @Prop() unit!: string
+    @Prop({ default: false }) isDarkMode!: boolean
 
     get nextPageDisabled () {
         return this.currentPage >= Math.floor((this.total - 1) / this.perPage)
@@ -51,6 +68,8 @@ export default class TablePagination extends Vue {
 
     @Emit('changePage')
     changePage (direction: 'next' | 'previous') {
+        const paginationInfo = this.$refs['pagination_info'] as HTMLElement
+        paginationInfo.focus()
         if (direction === 'next') {
             return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
         } else {
@@ -70,9 +89,16 @@ export default class TablePagination extends Vue {
     font-size: 13px;
     line-height: 18px;
     font-weight: 500;
+    outline: none;
 
     &__info {
+        color: $slate;
         margin-right: 12px;
+        outline: none;
+
+        &--dark {
+            color: $white;
+        }
     }
 
     &__previous,
@@ -80,29 +106,47 @@ export default class TablePagination extends Vue {
         color: $brand-blue;
         cursor: pointer;
         user-select: none;
-        width: 17px;
+        width: 16px;
+        height: 10px;
+        outline: none;
+        position: relative;
+
+        &:focus::before {
+            content: '';
+            left: -3px;
+            top: -1px;
+            position: absolute;
+            width: calc(100% + 5px);
+            height: calc(100% + 7px);
+            border-radius: 6px;
+            border: 1px solid $brand-blue;
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
 
         &--disabled {
             opacity: 0.35;
             cursor: default;
         }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     &__previous {
         margin-right: 4px;
-    }
-
-    &__previous-icon,
-    &__next-icon {
-        width: 16px;
-        height: 10px;
-    }
-
-    &__previous-icon {
         transform: rotate(90deg);
     }
 
-    &__next-icon {
+    &__next {
         transform: rotate(-90deg);
     }
 }

package/package.json

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