@pocketprep/ui-kit 2.0.40 → 3.0.1

package/lib/components/Filters/FilterDropdown.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="filter">
+        <div class="filter-button">
+            <Link
+                v-dark="isDarkMode"
+                :has-icon="true"
+                :aria-expanded="showFilterDropdown ? 'true' : 'false'"
+                class="filter-button__link"
+                :class="{ 
+                    'filter-button__link--open': showFilterDropdown,
+                    'filter-button__link--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>
+        <div
+            v-if="showFilterDropdown"
+            v-dark="isDarkMode"
+            class="filter-dropdown"
+            :class="{ 
+                [`filter-dropdown--${align}`]: true, 
+                [`filter-dropdown--${size}`]: true 
+            }"
+        >
+            <FilterOptions
+                :radio-entries="radioOptions"
+                :checkbox-entries="checkboxOptions"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
+import Link from '../Buttons/Link.vue'
+import Icon from '../Icons/Icon.vue'
+import FilterOptions from '../Filters/FilterOptions.vue'
+import { dark } from '../../directives'
+import type { TRadioOption, TCheckboxOption } from './filterOptions'
+
+@Component({
+    components: {
+        FilterOptions,
+        Icon,
+        Link,
+    },
+    directives: {
+        dark,
+    },
+})
+
+export default class FilterDropdown extends Vue {
+    @Prop() radioEntries!: TRadioOption[]
+    @Prop() checkboxEntries!: TCheckboxOption[]
+    @Prop() filterLabel!: string
+    @Prop({ default: 'right' }) align!: 'left' | 'right'
+    @Prop({ default: 'small' }) size!: 'small' | 'large'
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) responsiveButton!: boolean
+
+    radioOptions = [ ...this.radioEntries ]
+    checkboxOptions = [ ...this.checkboxEntries ]
+
+    showFilterDropdown: boolean | 'checkbox' = false
+
+    mounted () {
+        document.addEventListener('click', this.clickListener)
+        document.addEventListener('keydown', this.keydownListener)
+    }
+
+    keydownListener (e: KeyboardEvent) {
+        if (e.code === 'Escape') {
+            e.stopPropagation()
+            this.showFilterDropdown = false
+        }
+    }
+    clickListener (e: MouseEvent) {
+        if (this.showFilterDropdown) {
+            const targetEl = e.target as HTMLElement
+            if (!targetEl?.closest('.filter') 
+                && this.showFilterDropdown !== 'checkbox'
+                && document.body.contains(targetEl)
+            ) {
+                this.showFilterDropdown = false
+            }
+        }
+    }
+
+    beforeUnmount () {
+        document.removeEventListener('click', this.clickListener)
+        document.removeEventListener('keydown', this.keydownListener)
+    }
+
+    @Watch('checkboxOptions')
+    checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
+        const newEnabledFilters = newVal.filter(o => o.enabled)
+        const oldEnabledFilters = oldVal.filter(o => o.enabled)
+        if (newEnabledFilters.length !== oldEnabledFilters.length) {
+            this.emitUpdateModelValue(newVal)
+        }
+    }
+    @Watch('checkboxEntries')
+    checkboxOptionChanged (newVal: TCheckboxOption[]) {
+        this.checkboxOptions = [ ...newVal ]
+    }
+
+    @Watch('radioOptions')
+    radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
+        const newEnabledFilters = newVal
+        const oldEnabledFilters = oldVal
+        if (newEnabledFilters.length !== oldEnabledFilters.length) {
+            this.emitUpdateModelValue(newVal)
+        }
+    }
+    @Watch('radioEntries')
+    radioOptionChanged (newVal: TRadioOption[]) {
+        this.radioOptions = [ ...newVal ]
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (options: TCheckboxOption[] | TRadioOption[]) {
+        return options
+    }
+}
+
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.filter {
+    .filter-button {
+        padding-bottom: 12px;
+
+        &__link {
+            &--open {
+                color: $brand-black !important;
+
+                &--dark {
+                    color: $butterscotch !important;
+                }
+            }
+
+            &--responsive {
+                div {
+                    @include breakpoint(black-bear) {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        &__icon {
+            vertical-align: middle;
+            padding-bottom: 1px;
+        }
+
+        &__text {
+            vertical-align: middle;
+        }
+    }
+}
+</style>

package/lib/components/Filters/FilterOptions.md

@@ -0,0 +1,65 @@
+```vue
+<template>
+    <div>
+        <FilterOptions
+            :radioEntries="radioEntries"
+            :checkboxEntries="checkboxEntries"
+            class="multiple"
+        />
+        <FilterOptions
+            :radioEntries="[]"
+            :checkboxEntries="checkboxEntries"
+        >
+            <template #radioLabel></template>
+        </FilterOptions>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            checkboxEntries: [
+                {
+                    id: 'airway',
+                    label: 'Airway, Respiration, & Ventilation (18)',
+                    enabled: false,
+                },
+                {
+                    id: 'cardio',
+                    label: 'Cardiology & Resuscitation (9)',
+                    enabled: false,
+                },
+                {
+                    id: 'ems',
+                    label: 'EMS Operations (5)',
+                    enabled: false,
+                },
+                {
+                    id: 'medical',
+                    label: 'Medical; Obstetrics & Gynecology (6)',
+                    enabled: false,
+                },
+                {
+                    id: 'trauma',
+                    label: 'Trauma (10)',
+                    enabled: false,
+                }
+            ],
+            radioEntries: [
+                { label: 'All Answered', value: 'all' },
+                { label: 'Correct', value: 'correct' },
+                { label: 'Incorrect', value: 'incorrect' },
+                { label: 'Flagged', value: 'flagged' },
+            ]   
+        }
+    }
+}
+</script>
+
+<style>
+.multiple {
+    margin-bottom: 10px;
+}
+</style>
+```

package/lib/components/Filters/FilterOptions.vue

@@ -0,0 +1,265 @@
+<template>
+    <div
+        v-dark
+        class="filter-options"
+        :class="{ 
+            [`filter-options--${align}`]: true, 
+            [`filter-options-${size}`]: true 
+        }"
+    >
+        <slot name="radioLabel">
+            <div
+                v-if="radioOptions.length > 0"
+                v-dark
+                class="filter-options__label"
+                :class="{ 'filter-options__label--active': showRadioOptions }"
+                :aria-expanded="showFilterDropdown ? 'true' : 'false'"
+                @click="showRadioOptions = !showRadioOptions; showCheckboxOptions = false;"
+                @mousedown.prevent
+            >
+                <slot name="radioLabelText">
+                    <span>FILTER BY QUESTION TYPE</span>
+                </slot>
+                <slot name="radioLabelIcon">
+                    <Icon
+                        v-dark="isDarkMode"
+                        type="accordionArrow"
+                        class="filter-options__arrow"
+                    />
+                </slot>
+            </div>
+        </slot>    
+        <slot name="radio">
+            <Radio
+                v-if="showRadioOptions"
+                v-model="radioEntry"
+                aria-live="polite"
+                :data="radioOptions"
+                class="filter-options__radio"
+            />
+        </slot>
+        <slot name="checkboxLabel">
+            <div
+                v-if="radioOptions.length > 0"
+                v-dark
+                class="filter-options__label"
+                :class="{ 'filter-options__label--active': showCheckboxOptions }"
+                :aria-expanded="showFilterDropdown ? 'true' : 'false'"
+                @click="showCheckboxOptions = !showCheckboxOptions; showRadioOptions = false;"
+                @mousedown.prevent
+            >
+                <slot name="checkboxLabelText">
+                    <span>FILTER BY SUBJECT</span>
+                </slot>
+                <slot name="checkboxLabelIcon">
+                    <Icon
+                        v-dark="isDarkMode"
+                        type="accordionArrow"
+                        class="filter-options__arrow"
+                    />
+                </slot>
+            </div>
+            <div
+                v-else
+                v-dark
+                class="filter-options__label"
+                :class="{ 'filter-options__label--active': showCheckboxOptions }"
+                :aria-expanded="showFilterDropdown ? 'true' : 'false'"
+            >
+                <slot name="checkboxLabelText">
+                    <span>FILTER BY SUBJECT</span>
+                </slot>
+            </div>
+        </slot>
+        <slot name="checkbox">
+            <div
+                v-if="showCheckboxOptions || radioOptions.length === 0"
+                class="filter-options__checkbox"
+            >
+                <CheckboxOption
+                    v-for="option in checkboxOptions"
+                    :key="option.id"
+                    v-model="option.enabled"
+                    v-dark="isDarkMode"
+                    :label="option.label"
+                    class="filter-options__option"
+                    @click="option.enabled = !option.enabled"
+                />
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+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 { dark } from '../../directives'
+import type { TRadioOption, TCheckboxOption } from './filterOptions'
+
+@Component({
+    components: {
+        CheckboxOption,
+        Link,
+        Radio,
+    },
+    directives: {
+        dark,
+    },
+})
+
+
+export default class FilterOptions extends Vue {
+    @Prop({ default: '' }) defaultRadioEntry?: string
+    @Prop() radioEntries!: TRadioOption[]
+    @Prop() checkboxEntries!: TCheckboxOption[]
+    @Prop({ default: 'right' }) align!: 'left' | 'right'
+    @Prop({ default: 'small' }) size!: 'small' | 'large'
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    radioOptions = [ ...this.radioEntries ]
+    checkboxOptions = [ ...this.checkboxEntries ]
+
+    showFilterDropdown: boolean | 'checkbox' = false
+    showRadioOptions = true
+    showCheckboxOptions = false
+
+    radioEntry: { label: string; value: string } | null = this.radioOptions.find(
+        o => o.value === this.defaultRadioEntry
+    ) || null
+
+    stringHasSpaces (val: string) {
+        return val.includes(' ')
+    }
+
+    keydownListener (e: KeyboardEvent) {
+        if (e.code === 'Escape') {
+            e.stopPropagation()
+            this.showFilterDropdown = false
+        }
+    }
+    clickListener (e: MouseEvent) {
+        if (this.showFilterDropdown) {
+            const targetEl = e.target as HTMLElement
+            if (!targetEl?.closest('.filter') 
+                && this.showFilterDropdown !== 'checkbox'
+                && document.body.contains(targetEl)
+            ) {
+                this.showFilterDropdown = false
+            }
+        }
+    }
+
+    mounted () {
+        document.addEventListener('click', this.clickListener)
+        document.addEventListener('keydown', this.keydownListener)
+    }
+
+    @Watch('checkboxOptions')
+    checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
+
+        const newEnabledFilters = newVal.filter(o => o.enabled)
+        const oldEnabledFilters = oldVal.filter(o => o.enabled)
+        if (newEnabledFilters.length !== oldEnabledFilters.length) {
+            this.emitUpdateModelValue(newVal)
+        }
+    }
+    @Watch('checkboxEntries')
+    checkboxOptionChanged (newVal: TCheckboxOption[]) {
+        this.checkboxOptions = [ ...newVal ]
+    }
+
+    @Watch('radioOptions')
+    radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
+        const newEnabledFilters = newVal
+        const oldEnabledFilters = oldVal
+        if (newEnabledFilters.length !== oldEnabledFilters.length) {
+            this.emitUpdateModelValue(newVal)
+        }
+    }
+    @Watch('radioEntries')
+    radioOptionChanged (newVal: TRadioOption[]) {
+        this.radioOptions = [ ...newVal ]
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (options: TCheckboxOption[] | TRadioOption[]) {
+        return options
+    }
+}
+
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.filter-options {
+    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;
+
+    &__label {
+        display: flex;
+        color: $slate;
+        font-size: 12px;
+        letter-spacing: 0.24px;
+        line-height: 16px;
+        text-align: left;
+        padding: 13px 20px;
+
+        &--active svg {
+            transform: rotate(180deg);
+        }
+
+        &:focus {
+            &::before {
+                content: '';
+                left: -6px;
+                top: -2px;
+                width: calc(100% + 12px);
+                height: 100%;
+                border: 1px solid $brand-blue;
+                position: absolute;
+                border-radius: 6px;
+            }
+        }
+
+        &--dark {
+            color: $pewter;
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+
+        span {
+            margin-right: 6px;
+        }
+
+        svg {
+            color: $brand-blue;
+            width: 11px;
+            height: 10px;
+        }
+    }
+
+    &__radio {
+        padding-left: 20px;
+    }
+
+    &__option {
+        padding-left: 14px;
+        margin: 0 6px;
+        line-height: 18px;
+    }
+}
+</style>

package/lib/components/Filters/filterOptions.d.ts

@@ -0,0 +1,10 @@
+export type TRadioOption = {
+    label: string
+    value: string
+}
+
+export type TCheckboxOption = {
+    id: string
+    label: string
+    enabled: boolean
+}

package/lib/components/Forms/Checkbox.md

@@ -0,0 +1,52 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <Checkbox v-model="checkboxValue1" />
+            <Checkbox v-model="checkboxValue2" :disabled="true" />
+            <Checkbox v-model="checkboxValue3" />
+            <Checkbox v-model="checkboxValue4" :disabled="true" />
+            <Checkbox v-model="checkboxValue5" />
+            <Checkbox v-model="checkboxValue6" :disabled="true" />
+        </div>
+        <div class="dark">
+            <Checkbox :isDarkMode="true" v-model="checkboxValue1" />
+            <Checkbox :isDarkMode="true" v-model="checkboxValue2" :disabled="true" />
+            <Checkbox :isDarkMode="true" v-model="checkboxValue3" />
+            <Checkbox :isDarkMode="true" v-model="checkboxValue4" :disabled="true" />
+            <Checkbox :isDarkMode="true" v-model="checkboxValue5" />
+            <Checkbox :isDarkMode="true" v-model="checkboxValue6" :disabled="true" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checkboxValue1: true,
+            checkboxValue2: true,
+            checkboxValue3: null,
+            checkboxValue4: null,
+            checkboxValue5: false,
+            checkboxValue6: false,
+        }
+    }
+}
+</script>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.uikit-checkbox {
+    margin-bottom: 10px;
+}
+</style>
+```