@pocketprep/ui-kit 2.0.40 → 3.0.1

package/lib/components/Bundles/BundleSearch.vue

@@ -0,0 +1,573 @@
+<template>
+    <div
+        ref="uikit-exam-search"
+        v-breakpoint="{ small: smallBreakpoint }"
+        class="uikit-exam-search"
+        :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }" 
+    >
+        <Search
+            v-model="examSearchString"
+            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+            class="uikit-exam-search__search"
+            placeholder="Search exams"
+            type="white"
+            :is-dark-mode="isDarkMode"
+        />
+        <div 
+            v-if="examSearchString" 
+            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+            class="uikit-exam-search__search-results"
+        >
+            <div class="uikit-exam-search__search-results-header">
+                <span
+                    v-dark="isDarkMode"
+                    class="uikit-exam-search__search-results-count"
+                    aria-live="polite"
+                    role="alert"
+                >
+                    {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
+                </span>
+                <Button
+                    class="uikit-exam-search__search-reset-btn"
+                    type="tertiary-small"
+                    :is-dark-mode="isDarkMode"
+                    @click="examSearchString = ''"
+                >
+                    Browse Instead
+                </Button>
+            </div>
+            <ul class="uikit-exam-search__search-results-list">
+                <ExamCard
+                    v-for="exam in filteredExams"
+                    :key="exam.objectId"
+                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                    :is-premium="premiumExamIds.includes(exam.objectId)"
+                    :exam="exam"
+                    :bundle="exam.bundle" 
+                    class="uikit-exam-search__search-results-card"
+                    :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                    :is-dark-mode="isDarkMode"
+                    @select="selectExam(exam)"
+                />
+                <div class="uikit-exam-search__exam-list-padding" />
+            </ul>
+        </div>
+        <div
+            v-else
+            class="uikit-exam-search__bundle-search"
+            :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
+        >
+            <div
+                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                class="uikit-exam-search__bundle-list"
+            >
+                <div class="uikit-exam-search__browse-industry-text">
+                    <span v-if="!selectedBundle">or </span>browse by industry
+                </div>
+                <BundleList
+                    v-model="selectedBundle"
+                    :bundles="bundles"
+                    :is-dark-mode="isDarkMode"
+                    :premium-bundle-ids="!selectedBundle ? premiumBundleIds : []"
+                />
+            </div>
+            <div
+                v-if="selectedBundle"
+                v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                class="uikit-exam-search__bundle-exam-container"
+            >
+                <div 
+                    v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                    class="uikit-exam-search__bundle-exam-container-top"
+                >
+                    <PocketButton
+                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                        class="uikit-exam-search__bundle-exam-back"
+                        :is-dark-mode="isDarkMode"
+                        type="tertiary"
+                        @click="selectedBundle = null"
+                    >
+                        <Icon type="arrow" /> Back to Browse
+                    </PocketButton>
+                    <span 
+                        v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                        class="uikit-exam-search__bundle-exam-count"
+                        tabindex="-1"
+                    >
+                        {{ selectedBundleExams.length }}
+                        {{ selectedBundle.name }}
+                        Exam{{ selectedBundleExams.length > 1 ? 's' : '' }}
+                    </span>
+                </div>
+                <div
+                    :key="selectedBundle.objectId"
+                    class="uikit-exam-search__bundle-exam-list-container"
+                >
+                    <div
+                        :key="selectedBundle.objectId"
+                        class="uikit-exam-search__bundle-exam-list"
+                    >
+                        <ExamCard
+                            v-for="exam in selectedBundleExams"
+                            :key="exam.objectId"
+                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }"
+                            :exam="exam"
+                            :is-dark-mode="isDarkMode"
+                            :bundle="exam.bundle"
+                            class="uikit-exam-search__search-results-card"
+                            :is-premium="premiumExamIds.includes(exam.objectId)"
+                            :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                            @select="selectExam(exam)"
+                        />
+                        <div 
+                            v-breakpoint:examSearchContainer="{ small: smallBreakpoint }" 
+                            class="uikit-exam-search__exam-list-padding"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+import BundleIcon from '../BundleIcons/BundleIcon.vue'
+import ExamCard from '../Exams/ExamCard.vue'
+import BundleList from '../Bundles/BundleList.vue'
+import Search from '../Search/Search.vue'
+import Button from '../Buttons/Button.vue'
+import PocketButton from '../Buttons/Button.vue'
+import Icon from '../Icons/Icon.vue'
+import type { Study } from '@pocketprep/types'
+import { breakpoint, dark } from '../../directives'
+
+type TBundleExam = Study.Class.ExamMetadataJSON & { bundle: Study.Class.BundleJSON }
+
+@Component({
+    components: {
+        Button,
+        BundleIcon,
+        BundleList,
+        ExamCard,
+        Search,
+        PocketButton,
+        Icon,
+    },
+    directives: {
+        breakpoint,
+        dark,
+    },
+})
+export default class BundleSearch extends Vue {
+    @Prop() bundles!: Study.Class.BundleJSON[]
+    @Prop() examMetadataById!: { [id: string]: Study.Class.ExamMetadataJSON | undefined }
+    @Prop({ default: () => ([]) }) premiumBundleIds!: string[]
+    @Prop({ default: () => ([]) }) premiumExamIds!: string[]
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    selectedExam: TBundleExam | null = null
+    selectedBundle: Study.Class.BundleJSON | null = null
+    examSearchString = ''
+    examDisplayName = ''
+    examSearchContainer: null | HTMLElement = null
+    smallBreakpoint = 420
+
+    get filteredExams () {
+        return this.bundleExams.filter(exam =>
+            `${exam.nativeAppName} ${exam.descriptiveName} ${exam.bundle.name}`.toLowerCase()
+                .includes(this.examSearchString.toLowerCase())
+        )
+    }
+
+    get selectedBundleExams () {
+        const selectedBundle = this.selectedBundle
+        if (selectedBundle) {
+            return this.bundleExams.filter(exam => exam.bundle.objectId === selectedBundle.objectId)
+        } else {
+            return []
+        }
+    }
+
+    get bundleExams () {
+        return Object.values(this.bundles)
+            .filter((bundle): bundle is NonNullable<typeof bundle> => !!bundle)
+            .flatMap(bundle => bundle.exams.map(exam => {
+                const examMetadata = this.examMetadataById[exam.objectId]
+                if (examMetadata) {
+                    return {
+                        ...examMetadata,
+                        bundle,
+                    }
+                } else {
+                    return undefined
+                }
+            }))
+            .filter((exam): exam is NonNullable<typeof exam> => !!exam)
+            .sort((a, b) => a.nativeAppName?.localeCompare(b.nativeAppName))
+    }
+
+    mounted () {
+        this.examSearchContainer = this.$refs['uikit-exam-search'] as HTMLElement
+    }
+
+    @Watch('examSearchString')
+    examSearchStringChanged (newVal: string) {
+        this.emitSearch(newVal)
+    }
+
+    @Watch('selectedBundle')
+    selectedBundleChanged (selectedBundle: Study.Class.BundleJSON) {
+        this.emitSelectBundle(selectedBundle)
+
+        // automatically select first exam
+        setTimeout(() => {
+            const firstCard = document.querySelector('.uikit-exam-search__bundle-exam-count');
+            (firstCard as HTMLElement | undefined)?.focus()
+        }, 1)
+    }
+
+    selectExam (exam: TBundleExam) {
+        this.selectedExam = exam
+        this.examDisplayName = exam.nativeAppName
+        this.emitSelect(exam)
+    }
+
+    @Emit('search')
+    emitSearch (searchString: string) {
+        return searchString
+    }
+
+    @Emit('selectBundle')
+    emitSelectBundle (selectedBundle: Study.Class.BundleJSON) {
+        return selectedBundle
+    }
+
+    @Emit('select')
+    emitSelect (exam: TBundleExam) {
+        return exam
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-exam-search {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+
+    &--bundle-selected {
+        .uikit-exam-search__bundle-exam-container {
+            &--small,
+            &--brown-bear {
+                margin-left: 0;
+            }
+        }
+
+        .uikit-exam-search__bundle-list {
+            &--small,
+            &--brown-bear {
+                display: none;
+            }
+        }
+    }
+
+    &__step-text {
+        color: $slate-03;
+        font-size: 13px;
+        line-height: 17.76px;
+        margin-bottom: 10px;
+    }
+
+    &__text-big {
+        font-size: 26px;
+        line-height: 35.52px;
+        font-weight: 600;
+        margin-bottom: 5px;
+    }
+
+    &__text-small {
+        width: 303px;
+        font-size: 14px;
+        line-height: 19.12px;
+        text-align: center;
+        color: $slate-03;
+        margin-bottom: 22px;
+    }
+
+    &__select-exam-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__search {
+        width: 250px;
+        margin-bottom: 30px;
+
+        &--small,
+        &--black-bear {
+            width: calc(100% - 16px);
+        }
+    }
+
+    &__search-results {
+        width: 305px;
+        height: calc(100% - 66px);
+        display: flex;
+        flex-direction: column;
+
+        &--small,
+        &--black-bear {
+            width: 100%;
+        }
+    }
+
+    &__search-results-header {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: calc(100% - 16px);
+        margin-left: 8px;
+    }
+
+    &__search-results-count {
+        font-size: 13px;
+        line-height: 17.76px;
+        color: $slate-03;
+
+        &--dark {
+            color: $white;
+        }
+    }
+
+    &__search-reset-btn {
+        font-size: 13px !important;
+        line-height: 17.76px !important;
+        font-weight: 500;
+    }
+
+    &__search-results-list {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    &__search-results-card {
+        &--small,
+        &--black-bear {
+            width: 100%;
+        }
+    }
+
+    &__browse-industry-text {
+        font-weight: 600;
+        margin-bottom: 12px;
+        font-size: 13px;
+        line-height: 18px;
+        padding-left: 5px;
+    }
+
+    &__bundle-search {
+        display: flex;
+        flex: 1;
+        height: calc(100% - 66px);
+
+        &--bundle-selected {
+            width: 100%;
+            justify-content: space-between;
+        }
+    }
+
+    &__bundle-list {
+        box-sizing: border-box;
+        list-style-type: none;
+        padding-right: 20px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        &--small,
+        &--black-bear {
+            padding-right: 0;
+        }
+    }
+
+    &__bundle {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        letter-spacing: 0.2px;
+        line-height: 19px;
+        white-space: nowrap;
+        outline: none;
+        cursor: pointer;
+    }
+
+    &__bundle-icon {
+        width: 25px;
+        height: 25px;
+        margin-right: 9px;
+    }
+
+    &__bundle-exam-container {
+        display: flex;
+        flex-direction: column;
+        width: 657px;
+
+        &--brown-bear {
+            width: 642px;
+        }
+
+        &--small,
+        &--black-bear {
+            width: 100%;
+            display: block;
+        }
+    }
+
+    &__bundle-exam-container-top {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &__bundle-exam-back {
+        margin-left: 8px;
+        display: none;
+
+        &--small,
+        &--brown-bear {
+            display: block;
+        }
+
+        svg {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__bundle-exam-count {
+        font-size: 15px;
+        letter-spacing: 0.23px;
+        line-height: 20px;
+        margin-left: 13px;
+        margin-bottom: 10px;
+        font-weight: 600;
+        outline: none;
+
+        &--small,
+        &--brown-bear {
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+
+        &--small,
+        &--black-bear {
+            font-size: 14px;
+        }
+    }
+
+    &__bundle-exam-list-container {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        flex: 1;
+
+        &--brown-bear {
+            width: calc(100% + 15px);
+        }
+
+        &--black-bear {
+            width: 100%;
+        }
+    }
+
+    &__bundle-exam-list {
+        display: flex;
+        align-content: flex-start;
+        flex-wrap: wrap;
+
+        &--small,
+        &--brown-bear {
+            height: auto;
+            overflow: visible;
+        }
+    }
+
+    &__exam-list-padding {
+        width: 100%;
+        height: 40px;
+
+        &--small,
+        &--black-bear {
+            display: none;
+        }
+    }
+
+    &__exam-confirmation {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 410px;
+    }
+
+    &__selected-exam-container {
+        position: relative;
+    }
+
+    &__selected-exam {
+        margin-bottom: 43px;
+        cursor: auto;
+
+        &:hover,
+        &:focus {
+            &::before {
+                display: none;
+            }
+        }
+    }
+
+    &__unselect-exam-icon {
+        position: absolute;
+        top: 14px;
+        right: 21px;
+        color: $slate-01;
+        cursor: pointer;
+
+        &:hover {
+            color: $brand-black;
+        }
+    }
+
+    &__display-name-prompt {
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 20.49px;
+        margin-bottom: 10px;
+        padding-left: 11px;
+    }
+
+    &__display-name-hint {
+        color: $slate-03;
+        font-size: 14px;
+        line-height: 19px;
+        margin-bottom: 27px;
+        padding-left: 11px;
+    }
+
+    &__display-name-input {
+        margin-bottom: 41px;
+    }
+
+    &__submit {
+        margin-bottom: 57px;
+    }
+}
+</style>

package/lib/components/Bundles/PremiumPill.md

@@ -0,0 +1,23 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <PremiumPill />
+        </div>
+        <div class="dark">
+            <PremiumPill :isDarkMode="true" />
+        </div>
+    </div>
+</template>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+</style>
+```

package/lib/components/Bundles/PremiumPill.vue

@@ -0,0 +1,43 @@
+<template>
+    <div v-dark="isDarkMode" class="uikit-premium-pill">
+        Premium
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class PremiumPill extends Vue {
+    @Prop({ default: false }) isDarkMode!: boolean
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-premium-pill {
+    font-size: 14px;
+    display: inline-block;
+    line-height: 19px;
+    background: $buttermilk;
+    padding: 0 6px;
+    border-radius: 3px;
+    text-align: center;
+    margin-left: 6px;
+    color: $brand-black;
+    font-weight: 500;
+
+    &--dark {
+        color: $banana-bread;
+        background-color: rgba($buttermilk, 0.2);
+        border: 1px solid $banana-bread;
+    }
+}
+</style>