@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Bundles/BundleList.md

@@ -0,0 +1,63 @@
+```vue
+<template>
+    <div>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <div class="bundles" :class="{ dark: isDarkMode }">
+            <SVGDefinitions />
+            Selected Bundle: {{ selectedBundle?.objectId }}<br><br>
+            <BundleList :isDarkMode="isDarkMode" v-model="selectedBundle" :bundles="bundles" :premiumBundleIds="[ 'tVMt7KCrkQ' ]" />
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '../Buttons/Button.vue'
+
+const bundles = [
+    {
+        objectId: 'tVMt7KCrkQ',
+        name: 'AMTA',
+    },
+    {
+        objectId: 'k9T5L3kC0U',
+        name: 'Professional',
+    },
+    {
+        objectId: '1kS20KPPkH',
+        name: 'IT & Cybersecurity',
+    },
+    {
+        objectId: '9970muCFGV',
+        name: 'Nursing School',
+    }
+]
+
+export default {
+    components: {
+        Button
+    },
+    data () {
+        return {
+            bundles,
+            selectedBundle: bundles[2],
+            isDarkMode: false,
+        }
+    }
+}
+</script>
+
+<style>
+.bundles {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+    color: #fff;
+}
+
+.uikit-btn {
+    margin-bottom: 30px;
+}
+</style>
+```

package/lib/components/Bundles/BundleList.vue

@@ -0,0 +1,170 @@
+<template>
+    <ul class="uikit-bundle-list">
+        <li
+            v-for="bundle in bundles"
+            :key="bundle.objectId"
+            v-dark="isDarkMode"
+            class="uikit-bundle-list__item"
+            tabindex="0"
+            :style="{
+                color: (modelValue && modelValue.objectId === bundle.objectId && selectedBundleColor)
+                    || (hoverBundleId === bundle.objectId && hoverBundleColor)
+                    || 'currentColor'
+            }"
+            @mouseenter="hoverBundleId = bundle.objectId"
+            @mouseleave="hoverBundleId = null"
+            @focus="hoverBundleId = bundle.objectId"
+            @blur="hoverBundleId = null"
+            @click="selectBundle(bundle)"
+            @keypress.enter="selectBundle(bundle)"
+            @mousedown.prevent
+        >
+            <span>
+                <BundleIcon
+                    :ref="bundle.objectId"
+                    class="uikit-bundle-list__icon"
+                    :bundle-id="bundle.objectId"
+                    :theme="isDarkMode
+                        ? 'silver'
+                        : ![ hoverBundleId, modelValue && modelValue.objectId ].includes(bundle.objectId)
+                            ? 'grayscale'
+                            : 'color'"
+                />
+                {{ bundle.name }}
+                <PremiumPill
+                    v-if="premiumBundleIds.includes(bundle.objectId)"
+                    v-dark="isDarkMode"
+                />
+            </span>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+import BundleIcon from '../BundleIcons/BundleIcon.vue'
+import type { Study } from '@pocketprep/types'
+import { dark } from '../../directives'
+import PremiumPill from '../Bundles/PremiumPill.vue'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        BundleIcon,
+        PremiumPill,
+    },
+})
+export default class BundleSearch extends Vue {
+    @Prop() bundles!: Study.Class.BundleJSON[]
+    @Prop({ default: null }) modelValue!: Study.Class.BundleJSON
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: () => ([]) }) premiumBundleIds!: string[]
+    
+    hoverBundleId: string | null = null
+    hoverBundleColor: string | null = null
+    selectedBundleColor: string | null = null
+
+    mounted () {
+        this.modelValue && this.selectBundle(this.modelValue)
+    }
+
+    selectBundle (bundle: Study.Class.BundleJSON) {
+        const selectedBundleId = bundle.objectId
+        this.hoverBundleId = selectedBundleId
+        this.$nextTick(() => {
+            this.updateBundleColor()
+            this.selectedBundleColor = this.hoverBundleColor
+        })
+        this.emitUpdateModelValue(bundle)
+    }
+
+    updateBundleColor () {
+        if (this.hoverBundleId) {
+            try {
+                const bundleIcon = this.$refs[this.hoverBundleId] as ComponentPublicInstance[]
+                const gId = bundleIcon[0]?.$el?.querySelector('path')?.getAttribute('fill')?.split('#')[1].split(')')[0]
+                const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
+                this.hoverBundleColor = stopColor || null
+            } catch (err) {
+                // no-op
+            }
+        } else {
+            this.hoverBundleColor = null
+        }
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (val: Study.Class.BundleJSON) {
+        return val
+    }
+
+    @Watch('hoverBundleId')
+    hoverBundleIdChanged () {
+        this.$nextTick(() => {
+            this.updateBundleColor()
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-bundle-list {
+    box-sizing: border-box;
+    list-style-type: none;
+    margin: 0 0 38px 0;
+    padding: 0;
+
+    &__item {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        letter-spacing: 0.2px;
+        line-height: 19px;
+        outline: none;
+        cursor: pointer;
+        user-select: none;
+        margin-bottom: 6px;
+
+        span {
+            white-space: nowrap;
+            align-items: center;
+            display: flex;
+            position: relative;
+        }
+
+        &--dark {
+            color: rgba($fog, 0.8) !important;
+
+            &:hover {
+                color: $white !important;
+            }
+
+            &:focus span::before {
+                content: '';
+                position: absolute;
+                left: -3px;
+                top: -1px;
+                border: 1px solid $butterscotch;
+                border-radius: 2px;
+                width: calc(100% + 8px);
+                height: 100%;
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__icon {
+        width: 25px;
+        height: 25px;
+        margin-right: 9px;
+    }
+}
+</style>

package/lib/components/Bundles/BundleSearch.md

@@ -0,0 +1,195 @@
+```vue
+<template>
+    <div>
+        <Button @click="showBundleSearch = !showBundleSearch">Toggle Bundle Search</Button>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button><br>
+        Selected Exam: {{ selectedExam?.objectId }}
+        <div class="bundle-search-container" :class="{ dark: isDarkMode }">
+            <BundleSearch 
+                v-if="showBundleSearch"
+                @select="exam => selectedExam = exam" 
+                :bundles="bundles" 
+                :isDarkMode="isDarkMode"
+                :examMetadataById="examMetadata" 
+                :premiumBundleIds="[ 'k9T5L3kC0U' ]"
+                :premiumExamIds="[ 'W54AAON6ZP', 'LIjSJZQEB1' ]"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+const bundles = [
+    {
+        objectId: 'tVMt7KCrkQ',
+        name: 'AMTA',
+        exams: [
+            {
+                "objectId": "icX2CYGp2P"
+            }
+        ]
+    },
+    {
+        objectId: 'k9T5L3kC0U',
+        name: 'Professional',
+        exams: [
+            {
+                "objectId": "W54AAON6ZP"
+            },
+            {
+                "objectId": "LIjSJZQEB1"
+            },
+        ]
+    },
+    {
+        objectId: '1kS20KPPkH',
+        name: 'IT & Cybersecurity',
+        exams: [
+            {
+                "objectId": "rGNBApGBEg"
+            },
+            {
+                "objectId": "rGNBApGBEg2"
+            },
+            {
+                "objectId": "rGNBApGBEg3"
+            },
+            {
+                "objectId": "rGNBApGBEg4"
+            },
+            {
+                "objectId": "rGNBApGBEg5"
+            },
+            {
+                "objectId": "rGNBApGBEg6"
+            },
+            {
+                "objectId": "rGNBApGBEg7"
+            },
+        ]
+    },
+    {
+        objectId: '9970muCFGV',
+        name: 'Nursing School',
+        exams: [
+            {
+                "objectId": "o98Hn8iUO4"
+            }
+        ]
+    }
+]
+const examMetadata = {
+    icX2CYGp2P: {
+        objectId: 'icX2CYGp2P',
+        nativeAppName: 'AMTA mBLEX',
+        descriptiveName: 'The AMTA Exam',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    W54AAON6ZP: {
+        objectId: 'W54AAON6ZP',
+        nativeAppName: 'BCSP ASP®',
+        descriptiveName: 'Associate Safety Professional Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    LIjSJZQEB1: {
+        objectId: 'LIjSJZQEB1',
+        nativeAppName: 'ASP',
+        descriptiveName: 'Board of Certified Safety Professionals: Associate Safety Professional',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg: {
+        objectId: 'rGNBApGBEg',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg2: {
+        objectId: 'rGNBApGBEg2',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg3: {
+        objectId: 'rGNBApGBEg3',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg4: {
+        objectId: 'rGNBApGBEg4',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg5: {
+        objectId: 'rGNBApGBEg5',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg6: {
+        objectId: 'rGNBApGBEg6',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    rGNBApGBEg7: {
+        objectId: 'rGNBApGBEg7',
+        nativeAppName: 'EC-Council® CEH™',
+        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    },
+    o98Hn8iUO4: {
+        objectId: 'o98Hn8iUO4',
+        nativeAppName: 'College Biology',
+        descriptiveName: 'College-level Biology Practice',
+        itemCount: '100',
+        archivedCount: '2',
+        knowledgeAreas: ['', ''],
+    }
+}
+export default {
+    data () {
+        return {
+            isDarkMode: false,
+            bundles,
+            selectedExam: null,
+            examMetadata,
+            showBundleSearch: true,
+        }
+    }
+}
+</script>
+
+<style>
+.dark {
+    background-color: #1f3545;
+    color: #fff;
+}
+
+.bundle-search-container {
+    height: 400px;
+    padding: 30px 0;
+}
+</style>
+```