@pocketprep/ui-kit 3.1.6 → 3.2.0

package/lib/components/BundleIcons/BundleIcon.vue

@@ -1,5 +1,5 @@
+<!-- eslint-disable -->
 <template>
-    <!-- eslint-disable -->
     <div class="uikit-bundle-icon">
         <AMTA v-if="bundleId === 'VEcpw3DhnA' && theme === 'color'" />
         <svg v-else width="209px" height="209px" viewBox="0 0 209 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -23,8 +23,8 @@
             </g>
         </svg>
     </div>
-    <!-- eslint-enable -->
 </template>
+<!-- eslint-enable -->
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-facing-decorator'

package/lib/components/Filters/FilterDropdown.vue

@@ -12,8 +12,8 @@
             role="button"
             type="tertiary"
             tabindex="0"
-            @keypress.enter="showFilterDropdown"
-            @click="showFilterDropdown = !showFilterDropdown"
+            @keypress.enter="() => showFilterDropdown = !showFilterDropdown"
+            @click="() => showFilterDropdown = !showFilterDropdown"
         >
             <Icon 
                 type="filter"

package/lib/pocketprep.scss

@@ -26,30 +26,30 @@ textarea {
             .uikit-slider__slide-input {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
                 }
 
                 &--dark {
                     &:focus {
                         &::-webkit-slider-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-moz-range-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-ms-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
                     }
                 }
@@ -61,30 +61,30 @@ textarea {
         .uikit-slider__slide-input {
             &:focus {
                 &::-webkit-slider-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
 
                 &::-moz-range-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
 
                 &::-ms-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
             }
 
             &--dark {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
                 }
             }

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite.config.docs.ts",
     "build": "run-p type-check build-only",
-    "preview": "vite preview",
+    "build-only": "vite build && vite build --config vite.config.docs.ts",
+    "preview": "vite preview --config vite.config.docs.ts",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
     "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
     "test:unit": "cypress run --component",
     "test:unit:dev": "cypress open --component",
-    "build-only": "vite build",
-    "minor": "npm version minor --no-git-tag-version",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
     "patch": "npm version patch --no-git-tag-version",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
+    "minor": "npm version minor --no-git-tag-version",
     "uikit-copy": "npm run build && pwd | pbcopy"
   },
   "type": "module",
@@ -73,14 +73,15 @@
     "highcharts": "10.3.3",
     "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
-    "vue": "3.2.47",
-    "vue-facing-decorator": "2.1.20"
+    "vue": "3.4.15",
+    "vue-facing-decorator": "2.1.20",
+    "vue-router": "4.2.5"
   },
   "devDependencies": {
     "@pocketprep/types": "1.11.1",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
-    "@vitejs/plugin-vue": "4.2.1",
+    "@vitejs/plugin-vue": "4.6.2",
     "@vue/eslint-config-typescript": "11.0.2",
     "@vue/tsconfig": "0.3.2",
     "cypress": "12.0.2",
@@ -102,7 +103,7 @@
     "url": "https://github.com/Pocket-Prep/ui-kit/issues"
   },
   "gitHooks": {
-    "pre-commit": "npm run build"
+    "pre-commit": "npm run lint && npm run type-check && npm run build && git add docs/"
   },
   "homepage": "https://github.com/Pocket-Prep/ui-kit#readme",
   "keywords": [
@@ -114,7 +115,7 @@
     "url": "git+https://github.com/Pocket-Prep/ui-kit.git"
   },
   "engines": {
-    "node": "16.14.0",
-    "npm": "8.3.1"
+    "node": "20.10.0",
+    "npm": "10.2.3"
   }
 }

package/lib/components/Banners/Banner.md

@@ -1,41 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Banner text="Default text." />
-        </div>
-        <div class="dark">
-            <Banner 
-                :isDarkMode="true"
-                text="Default text, but in dark mode."/>
-        </div>
-        <div class="light">
-            <Banner>Override at BANNER level!</Banner>
-        </div>
-        <div class="light">
-            <Banner>
-                <template #bannerText>
-                    Someone sent you 20% off your first subscription with Pocket Prep. Sweet!
-                </template>
-            </Banner>
-        </div>
-        <div class="light">
-            <Banner>
-                <template #bannerImage><div></div></template>
-                <template #bannerText>I don't want an image!</template>
-            </Banner>
-        </div>
-    </div>
-</template>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Blobs/Blob.md

@@ -1,10 +0,0 @@
-```vue
-<template>
-    <div>
-        <Blob
-            type="empty"
-            title="emptyBlob"
-        />
-    </div>
-</template>
-```

package/lib/components/Blobs/BlobEmptyState.md

@@ -1,9 +0,0 @@
-```vue
-<template>
-    <div>
-        <Blob
-            type="empty"
-        />
-    </div>
-</template>
-```

package/lib/components/BundleIcons/BundleIcon.md

@@ -1,60 +0,0 @@
-```vue
-<template>
-    <div>
-        <SVGDefinitions />
-        <Select v-model="theme" :data="themeOptions" />
-        <div class="icons">
-            <BundleIcon bundleId="mO5EIsoZ9H" :theme="theme.value"/>
-            <BundleIcon bundleId="uKLwvbsbPV" :theme="theme.value"/>
-            <BundleIcon bundleId="gAlCkoUVLl" :theme="theme.value"/>
-            <BundleIcon bundleId="GVCNrq4ixh" :theme="theme.value"/>
-            <BundleIcon bundleId="PusoOu7qGQ" :theme="theme.value"/>
-            <BundleIcon bundleId="1kS20KPPkH" :theme="theme.value"/>
-            <BundleIcon bundleId="tVMt7KCrkQ" :theme="theme.value"/>
-            <BundleIcon bundleId="4dTgUX97Dk" :theme="theme.value"/>
-            <BundleIcon bundleId="9970muCFGV" :theme="theme.value"/>
-            <BundleIcon bundleId="k9T5L3kC0U" :theme="theme.value"/>
-            <BundleIcon bundleId="DO5jBm0OJo" :theme="theme.value"/>
-            <BundleIcon bundleId="vtgI9oxCI4" :theme="theme.value"/>
-            <BundleIcon bundleId="VEcpw3DhnA" :theme="theme.value"/>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            theme: { label: 'Color', value: 'color' },
-            themeOptions: [
-                {
-                    label: 'Color',
-                    value: 'color',
-                },
-                { 
-                    label: 'Grayscale',
-                    value: 'grayscale',
-                },
-                {
-                    label: 'Silver',
-                    value: 'silver',
-                }
-            ]
-        }
-    }
-}
-</script>
-
-<style>
-.icons {
-    display: flex;
-    align-items: center;
-    background: black;
-}
-
-.icons > div {
-    margin: 5px;
-    width: 50px;
-}
-</style>
-```

package/lib/components/Bundles/BundleList.md

@@ -1,63 +0,0 @@
-```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/BundleSearch.md

@@ -1,195 +0,0 @@
-```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>
-```

package/lib/components/Bundles/PremiumPill.md

@@ -1,23 +0,0 @@
-```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/Buttons/Button.md

@@ -1,99 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="allDisabled = !allDisabled">Toggle Disabled Status</Button>
-        <div class="white">
-            <h3>White Background</h3>
-            <Button :disabled="allDisabled">Primary</Button>
-            <Button :isLoading="true" :disabled="allDisabled">Primary Loading</Button>
-            <Button type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
-            <Button type="primary-red" :disabled="allDisabled">Primary Red</Button>
-            <Button type="secondary" :disabled="allDisabled">Secondary</Button>
-            <Button type="tertiary" :disabled="allDisabled">Tertiary</Button>
-            <Button type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
-            <Button type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
-            <Button type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
-            <Button type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
-            <Button type="icon" icon="add" :disabled="allDisabled" />
-        </div>
-        <div class="gray">
-            <h3>Gray Background</h3>
-            <Button :disabled="allDisabled">Primary</Button>
-            <Button :isLoading="true" :disabled="allDisabled">Primary Loading</Button>
-            <Button type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
-            <Button type="primary-red" :disabled="allDisabled">Primary Red</Button>
-            <Button type="secondary" :disabled="allDisabled">Secondary</Button>
-            <Button type="tertiary" :disabled="allDisabled">Tertiary</Button>
-            <Button type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
-            <Button type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
-            <Button type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
-            <Button type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
-            <Button type="icon" icon="add" :disabled="allDisabled" />
-        </div>
-        <div class="dark">
-            <h3>Dark Mode</h3>
-            <Button :isDarkMode="true" :disabled="allDisabled">Primary</Button>
-            <Button :isDarkMode="true" :isLoading="true" :disabled="allDisabled">Primary</Button>
-            <Button :isDarkMode="true" type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
-            <Button :isDarkMode="true" type="primary-red" :disabled="allDisabled">Primary Red</Button>
-            <Button :isDarkMode="true" type="secondary" :disabled="allDisabled">Secondary</Button>
-            <Button :isDarkMode="true" type="tertiary" :disabled="allDisabled">Tertiary</Button>
-            <Button :isDarkMode="true" type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
-            <Button :isDarkMode="true" type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
-            <Button :isDarkMode="true" type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
-            <Button :isDarkMode="true" type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
-            <Button :isDarkMode="true" type="icon" icon="add" :disabled="allDisabled" />
-        </div>
-        <div class="dark">
-            <h3>Dark Background</h3>
-            <Button type="secondary-yellow-dark" :disabled="allDisabled">Secondary Yellow Dark</Button>
-            <Button type="icon-yellow" icon="filter" :disabled="allDisabled">Icon Yellow</Button>
-            <Button type="icon-yellow" icon="add" :disabled="allDisabled" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            allDisabled: false
-        }
-    }
-}
-</script>
-
-<style>
-.white,
-.gray,
-.dark {
-    margin: 10px 0;
-    padding: 20px;
-    border: 1px solid #1f3545;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.white {
-    background-color: #fff;
-}
-
-.gray {
-    background-color: #fbfbfd;
-}
-
-.dark {
-    color: white;
-    background-color: #1f3545;
-}
-
-h3 {
-    width: 100%;
-}
-
-button {
-    margin: 4px;
-}
-</style>
-```