@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Exams/ExamCard.vue

@@ -0,0 +1,257 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-exam-card"
+        :class="{ 
+            'uikit-exam-card--cancel': showCancelButton, 
+            'uikit-exam-card--disable-interaction': disableInteraction,
+            'uikit-exam-card--exam-selected': !showCancelButton && !disableInteraction && isSelected
+        }"
+        :tabindex="showCancelButton ? -1 : 0"
+        @click="emitSelect"
+        @keypress.enter.prevent="emitSelect"
+        @mousedown.prevent
+    >
+        <div
+            v-if="showCancelButton" 
+            class="uikit-exam-card__cancel"
+            tabindex="0"
+            aria-label="Clear exam selection"
+            @click="emitCancel"
+            @keypress.enter.prevent="emitCancel"
+        >
+            <Icon type="close" />
+        </div>
+        <div class="uikit-exam-card__name-short">
+            {{ exam.nativeAppName }}
+            <PremiumPill
+                v-if="isPremium"
+                v-dark="isDarkMode"
+            />
+        </div>
+        <div v-dark="isDarkMode" class="uikit-exam-card__name-long">
+            {{ exam.descriptiveName }}
+        </div>
+        <div v-dark="isDarkMode" class="uikit-exam-card__detail-counts">
+            <span class="uikit-exam-card__question-count">
+                {{ exam.itemCount - exam.archivedCount }}
+            </span> Questions,
+            <span class="uikit-exam-card__subject-count">
+                {{ Object.keys(exam.knowledgeAreas).length }}
+            </span> Subjects
+        </div>
+        <span
+            class="uikit-exam-card__label" 
+            aria-hidden="true"
+            :style="{ color: bundleColor || '' }"
+        >
+            <BundleIcon
+                ref="bundleIcon"
+                class="uikit-exam-card__label-icon"
+                :theme="isDarkMode ? 'silver' : 'color'"
+                :bundle-id="bundle.objectId"
+            />
+            {{ bundle.name }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import BundleIcon from '../BundleIcons/BundleIcon.vue'
+import Icon from '../Icons/Icon.vue'
+import type { Study } from '@pocketprep/types'
+import { dark } from '../../directives'
+import PremiumPill from '../Bundles/PremiumPill.vue'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        BundleIcon,
+        Icon,
+        PremiumPill,
+    },
+})
+export default class ExamCard extends Vue {
+    @Prop() exam!: Study.Class.ExamMetadataJSON
+    @Prop() bundle!: Study.Class.BundleJSON
+    @Prop({ default: false }) showCancelButton!: boolean
+    @Prop({ default: false }) disableInteraction!: boolean
+    @Prop({ default: false }) isPremium!: boolean
+    @Prop({ default: false }) isSelected!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    bundleColor: string | null = null
+    
+    mounted () {
+        try {
+            const bundleIcon = this.$refs.bundleIcon as ComponentPublicInstance
+            const gId = bundleIcon.$el?.querySelector('path')?.getAttribute('fill')?.split('#')[1].split(')')[0]
+            const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
+            this.bundleColor = stopColor || null
+        } catch (e) {
+            // noop
+        }
+    }
+
+    @Emit('select')
+    emitSelect () {
+        return true
+    }
+
+    @Emit('cancel')
+    emitCancel () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-exam-card {
+    position: relative;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px 0 rgba($brand-black, 0.15), 0 1px 2px 0 rgba($brand-black, 0.06);
+    box-sizing: border-box;
+    width: 305px;
+    min-height: 107px;
+    padding: 11px 13px;
+    margin: 8px 8px 5px;
+    outline: none;
+
+    &--dark {
+        background-color: $brand-black;
+        border: 1px solid $slate;
+        box-shadow: 0 1px 6px 0 rgba($charcoal, 0.3);
+    }
+
+    @include breakpoint(black-bear) {
+        width: 340px;
+    }
+
+    &:not(&--cancel):not(&--disable-interaction) {
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+            &::before {
+                content: '';
+                position: absolute;
+                border-radius: 4px;
+                border: 2px solid $pewter;
+                top: -2px;
+                bottom: -2px;
+                left: -2px;
+                right: -2px;
+            }
+        }
+    }
+
+    &--exam-selected {
+        &::before {
+            content: '';
+            position: absolute;
+            border-radius: 4px;
+            border: 2px solid $brand-blue !important;
+            top: -2px;
+            bottom: -2px;
+            left: -2px;
+            right: -2px;
+        }
+
+        &--dark::before {
+            border-color: $banana-bread !important;
+        }
+    }
+
+    &__cancel {
+        position: absolute;
+        right: 7px;
+        top: 8px;
+        width: 22px;
+        height: 22px;
+        color: $steel;
+        cursor: pointer;
+        outline: none;
+
+        &:hover,
+        &:focus {
+            color: $brand-black;
+        }
+
+        &:focus::before {
+            content: '';
+            position: absolute;
+            left: -1px;
+            top: -1px;
+            border-radius: 4px;
+            width: 100%;
+            height: 100%;
+            border: 1px solid $brand-blue;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__name-short {
+        font-weight: 600;
+        font-size: 15px;
+        letter-spacing: 0.47px;
+        line-height: 20px;
+        margin-bottom: 6px;
+    }
+
+    &__name-long {
+        color: $pickled-bluewood;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 16px;
+        margin-bottom: 3px;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__detail-counts {
+        font-size: 13px;
+        line-height: 17.76px;
+        color: $pickled-bluewood;
+        font-weight: 400;
+        margin-bottom: 26px;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__question-count,
+    &__subject-count {
+        font-weight: 500;
+    }
+
+    &__label {
+        position: absolute;
+        bottom: 9px;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        line-height: 14px;
+    }
+
+    &__label-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+    }
+}
+</style>

package/lib/components/Exams/ExamMenuCard.md

@@ -0,0 +1,90 @@
+```vue
+<template>
+    <div class="docs-exam-menu-card">
+        <div>
+            <Button @click="canClick = !canClick">
+                {{ canClick ? 'Prevent' : 'Allow' }} Click
+            </Button>
+            <Button @click="showMenuArrow = !showMenuArrow">
+                {{ showMenuArrow ? 'Hide' : 'Show' }} Menu Arrow
+            </Button>
+            <Button @click="isPremium = !isPremium">
+                {{ isPremium ? 'Hide' : 'Show' }} Premium Badge
+            </Button>
+        </div>
+        <SVGDefinitions />
+        <ExamMenuCard
+            class="docs-exam-menu-card__color"
+            :exam="exam"
+            :bundle-id="bundleId"
+            :is-clickable="canClick"
+            :show-menu-arrow="showMenuArrow"
+            :menu-arrow-direction="menuArrowDirection"
+            :is-premium="isPremium"
+            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
+            @keydown.enter="handleKeydown"
+        />
+        <ExamMenuCard
+            class="docs-exam-menu-card__grayscale"
+            :exam="exam"
+            :bundle-id="bundleId"
+            theme="grayscale"
+            :is-clickable="canClick"
+            :show-menu-arrow="showMenuArrow"
+            :menu-arrow-direction="menuArrowDirection"
+            :is-premium="isPremium"
+            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
+            @keydown.enter="handleKeydown"
+        />
+        <ExamMenuCard
+            class="docs-exam-menu-card__silver"
+            :exam="exam"
+            :bundle-id="bundleId"
+            theme="silver"
+            :is-clickable="canClick"
+            :show-menu-arrow="showMenuArrow"
+            :menu-arrow-direction="menuArrowDirection"
+            :is-premium="isPremium"
+            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
+            @keydown.enter="handleKeydown"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        const exam = {
+            objectId: 'o98Hn8iUO4',
+            descriptiveName: 'College-level Biology Practice',
+            nativeAppName: 'College Biology',
+        }
+        const bundleId = '9970muCFGV'
+        const canClick = false
+        const showMenuArrow = false
+        const menuArrowDirection = 'down'
+        const isPremium = false
+
+        return {
+            exam,
+            bundleId,
+            canClick,
+            showMenuArrow,
+            menuArrowDirection,
+            isPremium,
+        }
+    },
+    methods: {
+        handleKeydown () {
+            this.menuArrowDirection = this.menuArrowDirection === 'up' ? 'down' : 'up'
+        }
+    }
+}
+</script>
+```
+
+<style>
+.docs-exam-menu-card__silver {
+    background-color: #1c2f3c;
+}
+</style>

package/lib/components/Exams/ExamMenuCard.vue

@@ -0,0 +1,218 @@
+<template>
+    <div
+        v-if="bundleId"
+        class="uikit-exam-menu-card"
+        :class="{
+            [`uikit-exam-menu-card--${theme}`]: true,
+            'uikit-exam-menu-card--clickable': isClickable,
+        }"
+        :tabindex="isClickable ? '0' : '-1'"
+        @mousedown.prevent
+        @click="isClickable && emitClick()"
+        @keydown="isClickable && emitKeydown($event)"
+    >
+        <div class="uikit-exam-menu-card__icon">
+            <BundleIcon
+                :theme="theme"
+                :bundle-id="bundleId"
+            />
+        </div>
+        <div class="uikit-exam-menu-card__right">
+            <div class="uikit-exam-menu-card__top">
+                <div
+                    class="uikit-exam-menu-card__name"
+                    :class="{ 'uikit-exam-menu-card__name--is-premium': isPremium }"
+                >
+                    {{ exam.nativeAppName }}
+                </div>
+                <PremiumPill v-if="isPremium" class="uikit-exam-menu-card__premium-pill" />
+            </div>
+            <div class="uikit-exam-menu-card__fullname">
+                <span>{{ exam.descriptiveName }}</span>
+                <Icon
+                    v-if="showMenuArrow"
+                    :style="{ transform: `rotate(${menuArrowDirection === 'up' ? '180' : '0'}deg)` }"
+                    type="accordionArrow"
+                    class="uikit-exam-menu-card__arrow"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import BundleIcon from '../BundleIcons/BundleIcon.vue'
+import type { Study } from '@pocketprep/types'
+
+@Component({
+    components: {
+        BundleIcon,
+        Icon,
+    },
+})
+export default class ExamMenuCard extends Vue {
+    @Prop() exam!: Study.Class.ExamMetadataJSON
+    @Prop() bundleId!: string
+    @Prop({ default: 'color' }) theme!: 'color' | 'grayscale' | 'silver'
+    @Prop({ default: false }) isPremium!: boolean
+    @Prop({ default: false }) showMenuArrow!: boolean
+    @Prop({ default: 'down' }) menuArrowDirection!: 'up' | 'down'
+    @Prop({ default: true }) isClickable!: boolean
+
+    @Emit('click')
+    emitClick () {
+        return true
+    }
+
+    @Emit('keydown')
+    emitKeydown (keyEvent: KeyboardEvent) {
+        return keyEvent
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-exam-menu-card {
+    display: flex;
+    align-items: center;
+    padding: 8px 3px 10px;
+    box-sizing: border-box;
+    height: 54px;
+    user-select: none;
+    width: 320px;
+    position: relative;
+    outline: none;
+
+    @include breakpoint(black-bear) {
+        width: 100%;
+    }
+
+    &:not(&--silver) {
+        color: $brand-black;
+
+        .uikit-exam-menu-card__arrow {
+            color: $slate-03;
+        }
+    }
+
+    &--silver {
+        color: $white;
+
+        .uikit-exam-menu-card__premium-pill {
+            background-color: rgba($cream-puff, 0.19);
+            color: $banana-bread;
+        }
+    }
+
+    &--clickable {
+        cursor: pointer;
+
+        &:focus::before {
+            content: '';
+            left: 0;
+            top: 3px;
+            position: absolute;
+            width: calc(100% - 2px);
+            height: calc(100% - 8px);
+            border-radius: 6px;
+            border: 1px solid $brand-blue;
+        }
+
+        &:not(.uikit-exam-menu--silver):hover {
+            background-color: $gray-background;
+        }
+
+        &.uikit-exam-menu-card--silver:hover {
+            background-color: $black-feather;
+        }
+
+        &.uikit-exam-menu-card--silver:focus::before {
+            border-color: $banana-bread;
+        }
+    }
+
+    &__right {
+        position: relative;
+        max-width: calc(100% - 52px);
+        width: 100%;
+        margin-top: 5px;
+    }
+
+    &__arrow {
+        width: 10px;
+        color: $white;
+        display: inline-block;
+        vertical-align: top;
+        margin-top: 4px;
+        margin-left: 5px;
+    }
+
+    &__icon {
+        width: 52px;
+        height: 52px;
+        margin-right: 5px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__top {
+        font-size: 15px;
+        line-height: 20px;
+        font-weight: 600;
+        height: 20px;
+    }
+
+    &__name {
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &--is-premium {
+            max-width: calc(100% - 86px);
+        }
+    }
+
+    &__premium-pill {
+        font-size: 12px;
+        line-height: 16px;
+        background-color: $beach-sand;
+        width: 55px;
+        height: 16px;
+        vertical-align: top;
+        margin-top: 2px;
+        margin-left: 8px;
+        padding: 0;
+    }
+
+    &__fullname {
+        font-size: 12px;
+        line-height: 16px;
+        opacity: 0.8;
+        max-width: 244px;
+
+        @include breakpoint(black-bear) {
+            max-width: none;
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+
+        span {
+            display: inline-block;
+            max-width: calc(100% - 50px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+}
+</style>

package/lib/components/Filters/FilterDropdown.md

@@ -0,0 +1,59 @@
+```vue
+<template>
+    <div>
+        <FilterDropdown
+            filterLabel="Filter"
+            :radioEntries="radioOptions"
+            :checkboxEntries="checkboxOptions"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            radioOptions: [],
+            checkboxOptions: [
+                    {
+                        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,
+                    },
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+</style>
+```