@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/directives.ts

@@ -0,0 +1,213 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import MediaBreakpoints from './pocketprep-export.module.scss'
+import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
+
+type TBreakpoints = { [breakpointName: string]: number }
+
+const updateBreakpointClasses = (el: HTMLElement, breakpoints?: TBreakpoints, container?: HTMLElement) => {
+    // calculate screen width
+    const mediaBreakpoints: string[] = []
+    if (window.matchMedia(`(max-width: ${MediaBreakpoints.blackBear}px)`).matches) {
+        mediaBreakpoints.push('black-bear')
+    }
+    if (window.matchMedia(`(max-width: ${MediaBreakpoints.brownBear}px)`).matches) {
+        mediaBreakpoints.push('brown-bear')
+    }
+
+    // calculate element width
+    const breakpointSuffixes = [ 'black-bear', 'brown-bear' ]
+    const elWidth = container ? container.getBoundingClientRect().width : el.getBoundingClientRect().width
+    const customBreakpoints: string[] = []
+
+    // If no custom breakpoints passed, use default breakpoints that match design's
+    if (!breakpoints) {
+        breakpoints = {
+            'mobile': Number(MediaBreakpoints.blackBear),
+            'tablet-portrait': Number(MediaBreakpoints.brownBear),
+            'tablet-landscape': Number(MediaBreakpoints.grizzlyBear),
+            'desktop': Number(MediaBreakpoints.polarBear),
+        }
+    }
+
+    if (breakpoints) {
+        Object.entries(breakpoints)
+            .forEach(([ name, width ]) => {
+                breakpointSuffixes.push(name)
+                if (elWidth <= width) {
+                    customBreakpoints.push(name)
+                }
+            })
+    }
+
+    const classes = el.getAttribute('class')?.split(' ') || []
+    const nonModifierClasses = classes.filter(className => !className.includes('--'))
+    const updatedClasses = classes.filter(c => {
+        const classSegments = c.split('--')
+        const lastSegment = classSegments[classSegments.length - 1]
+        return !(lastSegment && breakpointSuffixes.includes(lastSegment))
+    })
+    nonModifierClasses.forEach(className => {
+        if (className) {
+            updatedClasses.push(...mediaBreakpoints.map(bp => `${className}--${bp}`))
+            updatedClasses.push(...customBreakpoints.map(bp => `${className}--${bp}`))
+        }
+    })
+
+    classes.sort()
+    updatedClasses.sort()
+
+    const needToUpdateClasses =
+        classes.length !== updatedClasses.length
+        || classes.some((oldClass, index) => oldClass !== updatedClasses[index])
+
+    if (needToUpdateClasses) {
+        el.setAttribute('class', updatedClasses.join(' '))
+    }
+}
+
+const getCustomContainer = (binding: DirectiveBinding) => {
+    const bindingArg = binding.arg
+    const container = bindingArg && binding.instance && binding.instance[bindingArg as keyof typeof binding.instance]
+    return container
+}
+
+const eventListeners: Partial<Record<string, () => void>> = {}
+const mutationObservers: Partial<Record<string, MutationObserver>> = {}
+const resizeObservers: Partial<Record<string, ResizeObserver>> = {}
+
+export const fixed: Directive = {
+    beforeMount: el => {
+        if (!el.dataset.breakpointId) {
+            const { top, left } = el.getBoundingClientRect()
+
+            const scrollListener = () => {
+                const scrollX = window.scrollX
+                const scrollY = window.scrollY
+
+                el.style.top = `${top + scrollY}px`
+                el.style.left = `${left + scrollX}px`
+            }
+            scrollListener()
+
+            const eventId = Math.floor(Math.random() * 1e8)
+            eventListeners[eventId] = scrollListener
+            el.dataset.eventId = String(eventId)
+            document.addEventListener('scroll', scrollListener)
+        }
+    },
+    unmounted: el => {
+        const eventId = el.dataset.eventId
+        const eventListener = eventId && eventListeners[eventId]
+        if (eventId && eventListener) {
+            document.removeEventListener('scroll', eventListener)
+            delete eventListeners[eventId]
+        }
+    },
+}
+
+export const breakpoint: Directive = {
+    beforeMount (el, binding) {
+        if (!el.dataset.breakpointId) {
+            binding.instance?.$nextTick(() => {
+                const breakpointId = el.dataset.breakpointId || Math.floor(Math.random() * 1e8)
+                el.dataset.breakpointId = String(breakpointId)
+
+                // Set resize event listener
+                const resizeEventListener = () => {
+                    updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                }
+                eventListeners[breakpointId] = resizeEventListener
+                window.addEventListener('resize', resizeEventListener)
+        
+                // Set mutation observer
+                const mutationObserver = new MutationObserver(() => {
+                    updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                })
+                mutationObservers[breakpointId] = mutationObserver
+                mutationObserver.observe(el, { attributes: true })
+        
+                // Set resize observer
+                const container = getCustomContainer(binding)
+                if (container) {
+                    const resizeObserver = window.ResizeObserver
+                        ? new ResizeObserver(() => {
+                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                        })
+                        : new ResizeObserverPonyFill(() => {
+                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                        })
+                    resizeObservers[breakpointId] = resizeObserver
+                    resizeObserver.observe(container)
+                } else {
+                    const resizeObserver = window.ResizeObserver
+                        ? new ResizeObserver(() => {
+                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                        })
+                        : new ResizeObserverPonyFill(() => {
+                            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+                        })
+                    resizeObservers[breakpointId] = resizeObserver
+                    resizeObserver.observe(el)
+                }
+            })
+        }
+    },
+    mounted: (el, binding) => {
+        binding.instance?.$nextTick(() => {
+            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+        })
+    },
+    updated: (el, binding) => {
+        binding.instance?.$nextTick(() => {
+            updateBreakpointClasses(el, binding.value, getCustomContainer(binding))
+        })
+    },
+    unmounted: (el) => {
+        const breakpointId = el.dataset.breakpointId
+        if (breakpointId) {
+            // Remove event listener
+            const eventListener = eventListeners[breakpointId]
+            if (eventListener) {
+                window.removeEventListener('resize', eventListener)
+                delete eventListeners[breakpointId]
+            }
+
+            // Disconnect mutation observer
+            const mutationObserver = mutationObservers[breakpointId]
+            if (mutationObserver) {
+                mutationObserver.disconnect()
+                delete mutationObservers[breakpointId]
+            }
+
+            // Disconnect resize observer
+            const resizeObserver = resizeObservers[breakpointId]
+            if (resizeObserver) {
+                resizeObserver.disconnect()
+                delete resizeObservers[breakpointId]
+            }
+
+            delete el.dataset.breakpointId
+        }
+    },
+}
+
+export const dark: Directive<HTMLElement> = (el, { value }: { value?: boolean }) => {
+    const isDarkMode = !!value
+    const classes = (typeof el.className === 'string' 
+        ? el.className 
+        : (el.className as unknown as { baseVal: string }).baseVal).split(' ')
+    if (isDarkMode) {
+        if (classes.find(c => c.endsWith('--dark'))) {
+            return
+        }
+        classes.forEach(className => {
+            el.classList.add(`${className}--dark`)
+        })
+    } else {
+        classes.forEach(className => {
+            if (className.includes('--dark')) {
+                el.classList.remove(className)
+            }
+        })
+    }
+}

package/lib/index.ts

@@ -0,0 +1,108 @@
+import './pocketprep.scss'
+
+import Banner from './components/Banners/Banner.vue'
+import Bar from './components/Charts/Bar.vue'
+import Pie from './components/Charts/Pie.vue'
+import SegmentControl from './components/Controls/SegmentControl.vue'
+import ToggleSwitch from './components/Controls/ToggleSwitch.vue'
+import Slider from './components/Controls/Slider.vue'
+import Button from './components/Buttons/Button.vue'
+import FilterOptions from './components/Filters/FilterOptions.vue'
+import FilterDropdown from './components/Filters/FilterDropdown.vue'
+import Link from './components/Buttons/Link.vue'
+import Tab from './components/Buttons/Tab.vue'
+import Select from './components/Forms/Select.vue'
+import Radio from './components/Forms/Radio.vue'
+import Checkbox from './components/Forms/Checkbox.vue'
+import CheckboxOption from './components/Forms/CheckboxOption.vue'
+import Input from './components/Forms/Input.vue'
+import Textarea from './components/Forms/Textarea.vue'
+import Icon from './components/Icons/Icon.vue'
+import BundleIcon from './components/BundleIcons/BundleIcon.vue'
+import Table from './components/Tables/Table.vue'
+import TableActions from './components/Tables/TableActions.vue'
+import TablePagination from './components/Tables/TablePagination.vue'
+import Search from './components/Search/Search.vue'
+import Pill from './components/Search/Pill.vue'
+import PhonePerson from './components/PhonePerson/PhonePerson.vue'
+import Tooltip from './components/Tooltips/Tooltip.vue'
+import OverflowTooltip from './components/Tooltips/OverflowTooltip.vue'
+import Modal from './components/Modal/Modal.vue'
+import ModalContainer from './components/Modal/ModalContainer.vue'
+import EmailAuth from './components/Onboarding/EmailAuth.vue'
+import MagicCodeEntry from './components/Onboarding/MagicCodeEntry.vue'
+import BundleSearch from './components/Bundles/BundleSearch.vue'
+import BundleList from './components/Bundles/BundleList.vue'
+import ExamCard from './components/Exams/ExamCard.vue'
+import ExamMenuCard from './components/Exams/ExamMenuCard.vue'
+import Errors from './components/Forms/Errors.vue'
+import SVGDefinitions from './SVGDefinitions.vue'
+import SidePanel from './components/SidePanels/SidePanel.vue'
+import Calendar from './components/Calendar/Calendar.vue'
+import Question from './components/Quiz/Question.vue'
+import QuizContainer from './components/Quiz/QuizContainer.vue'
+import QuizProgress from './components/Quiz/QuizProgress.vue'
+import QuizProgressBar from './components/Quiz/QuizProgressBar.vue'
+import KeyboardShortcutsButton from './components/Quiz/KeyboardShortcutsButton.vue'
+import KeyboardShortcutsModal from './components/Quiz/KeyboardShortcutsModal.vue'
+import FlagToggle from './components/Quiz/FlagToggle.vue'
+import GlobalMetricsToggle from './components/Quiz/GlobalMetricsToggle.vue'
+import PremiumPill from './components/Bundles/PremiumPill.vue'
+import Toast from './components/Toasts/Toast.vue'
+
+export * as directives from './directives'
+export * as utils from './utils'
+
+const components = {
+    Banner,
+    Bar,
+    Pie,
+    Button,
+    FilterOptions,
+    FilterDropdown,
+    Link,
+    SegmentControl,
+    ToggleSwitch,
+    Slider,
+    Select,
+    Radio,
+    Checkbox,
+    CheckboxOption,
+    Input,
+    Textarea,
+    Icon,
+    BundleIcon,
+    Table,
+    TableActions,
+    TablePagination,
+    Search,
+    Pill,
+    PhonePerson,
+    Tooltip,
+    OverflowTooltip,
+    Modal,
+    ModalContainer,
+    EmailAuth,
+    MagicCodeEntry,
+    BundleSearch,
+    BundleList,
+    ExamCard,
+    ExamMenuCard,
+    Errors,
+    SVGDefinitions,
+    SidePanel,
+    Calendar,
+    Question,
+    QuizContainer,
+    QuizProgress,
+    QuizProgressBar,
+    KeyboardShortcutsButton,
+    KeyboardShortcutsModal,
+    FlagToggle,
+    GlobalMetricsToggle,
+    Tab,
+    PremiumPill,
+    Toast,
+}
+
+export default components

package/{pocketprep-export.module.scss → lib/pocketprep-export.module.scss}

@@ -1,5 +1,5 @@
-@import 'styles/breakpoints';
-@import 'styles/colors';
+@import './styles/breakpoints';
+@import './styles/colors';
 
 /* stylelint-disable property-case */
 :export {

package/{pocketprep.scss → lib/pocketprep.scss}

@@ -1,16 +1,14 @@
-@import 'styles/normalize';
-@import 'styles/fonts';
-@import 'styles/colors';
-@import 'styles/breakpoints';
+@import './styles/breakpoints';
+@import './styles/colors';
 
 body,
 html {
-    font-family: 'Avenir Next', 'Muli', sans-serif;
+    font-family: 'Avenir Next', Muli, sans-serif;
     width: 100%;
     min-height: 100%;
     color: $brand-black;
     font-weight: 500;
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -28,30 +26,30 @@ textarea {
             .uikit-slider__slide-input {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-small.svg) !important;
+                        background-image: url("./assets/images/thumb-small.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-small.svg) !important;
+                        background-image: url("./assets/images/thumb-small.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-small.svg) !important;
+                        background-image: url("./assets/images/thumb-small.svg") !important;
                     }
                 }
 
                 &--dark {
                     &:focus {
                         &::-webkit-slider-thumb {
-                            background-image: url(~ui-kit/assets/images/thumb-small-dark.svg) !important;
+                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-moz-range-thumb {
-                            background-image: url(~ui-kit/assets/images/thumb-small-dark.svg) !important;
+                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-ms-thumb {
-                            background-image: url(~ui-kit/assets/images/thumb-small-dark.svg) !important;
+                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
                         }
                     }
                 }
@@ -63,30 +61,30 @@ textarea {
         .uikit-slider__slide-input {
             &:focus {
                 &::-webkit-slider-thumb {
-                    background-image: url(~ui-kit/assets/images/thumb-large.svg) !important;
+                    background-image: url("./assets/images/thumb-large.svg") !important;
                 }
 
                 &::-moz-range-thumb {
-                    background-image: url(~ui-kit/assets/images/thumb-large.svg) !important;
+                    background-image: url("./assets/images/thumb-large.svg") !important;
                 }
 
                 &::-ms-thumb {
-                    background-image: url(~ui-kit/assets/images/thumb-large.svg) !important;
+                    background-image: url("./assets/images/thumb-large.svg") !important;
                 }
             }
 
             &--dark {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-large-dark.svg) !important;
+                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-large-dark.svg) !important;
+                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url(~ui-kit/assets/images/thumb-large-dark.svg) !important;
+                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
                     }
                 }
             }

package/{styles → lib/styles}/_colors.scss

@@ -65,7 +65,7 @@ $scifi-takeout: #00654a;
 $orange-soda: #ff5e3e;
 $sunset-papaya: #ff7d63;
 
-/* deprecated color names */
+// deprecated color names
 $gray-progress-background: $pearl;
 $gray-divider: $fog;
 $slate-01: $slate;

package/lib/styles/fonts.css

@@ -0,0 +1,149 @@
+/**
+These custom font faces were added in order to reconcile differences between
+the Muli and Avenir Next font weights. Muli is a thinner font. For example,
+Muli's 700 weight font is equivalent to Avenir Next's 600 weight font.
+
+To fix these issues, this file creates the following weight "aliases":
+Avenir Next 400 / Muli 400 = font-weight: 400 / normal
+Avenir Next 500 / Muli 600 = font-weight: 500 / medium
+Avenir Next 600 / Muli 700 = font-weight: 600 / demi-bold
+**/
+@font-face {
+    font-family: "Avenir Next";
+    font-style: normal;
+    src: local("Avenir Next Regular"), local("AvenirNext-Regular");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: normal;
+    src: local("Avenir Next Medium"), local("AvenirNext-Medium");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: normal;
+    src: local("Avenir Next Demi Bold"), local("AvenirNext-DemiBold");
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: normal;
+    src: local("Avenir Next Bold"), local("AvenirNext-Bold");
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: italic;
+    src: local("Avenir Next Italic"), local("AvenirNext-Italic");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: italic;
+    src: local("Avenir Next Medium Italic"), local("AvenirNext-MediumItalic");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: italic;
+    src: local("Avenir Next Demi Bold Italic"), local("AvenirNext-DemiBoldItalic");
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: "Avenir Next";
+    font-style: italic;
+    src: local("Avenir Next Bold Italic"), local("AvenirNext-BoldItalic");
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: normal;
+    font-weight: 400;
+    src: url('../assets/fonts/muli/muli-400.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-400.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-400.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-400.woff') format('woff'),
+        url('../assets/fonts/muli/muli-400.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-400.svg#Muli') format('svg');
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: normal;
+    font-weight: 500;
+    src: url('../assets/fonts/muli/muli-600.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-600.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-600.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-600.woff') format('woff'),
+        url('../assets/fonts/muli/muli-600.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-600.svg#Muli') format('svg');
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: normal;
+    font-weight: 600;
+    src: url('../assets/fonts/muli/muli-700.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-700.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-700.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-700.woff') format('woff'),
+        url('../assets/fonts/muli/muli-700.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-700.svg#Muli') format('svg');
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: italic;
+    font-weight: 400;
+    src: url('../assets/fonts/muli/muli-400italic.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-400italic.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-400italic.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-400italic.woff') format('woff'),
+        url('../assets/fonts/muli/muli-400italic.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-400italic.svg#Muli') format('svg');
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: italic;
+    font-weight: 500;
+    src: url('../assets/fonts/muli/muli-600italic.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-600italic.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-600italic.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-600italic.woff') format('woff'),
+        url('../assets/fonts/muli/muli-600italic.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-600italic.svg#Muli') format('svg');
+}
+
+@font-face {
+    font-family: Muli;
+    font-style: italic;
+    font-weight: 600;
+    src: url('../assets/fonts/muli/muli-700italic.eot');
+    src:
+        local(''),
+        url('../assets/fonts/muli/muli-700italic.eot?#iefix') format('embedded-opentype'),
+        url('../assets/fonts/muli/muli-700italic.woff2') format('woff2'),
+        url('../assets/fonts/muli/muli-700italic.woff') format('woff'),
+        url('../assets/fonts/muli/muli-700italic.ttf') format('truetype'),
+        url('../assets/fonts/muli/muli-700italic.svg#Muli') format('svg');
+}

package/lib/utils.ts

@@ -0,0 +1,53 @@
+import BrandColors from './pocketprep-export.module.scss'
+
+export const studyModes = {
+    '-1': {
+        name: 'Question of the Day',
+        shortName: 'qotd',
+        icon: 'calendar',
+        iconColor: BrandColors.cadaverous,
+        iconColorDM: BrandColors.jungleGreen,
+    },
+    '0': {
+        name: 'Quick 10',
+        shortName: 'quick10',
+        icon: 'quick10',
+        iconColor: BrandColors.cosmos,
+        iconColorDM: BrandColors.orchid,
+    },
+    '2': {
+        name: 'Missed Questions',
+        shortName: 'missed',
+        icon: 'missedQuestions',
+        iconColor: '#EC0000',
+        iconColorDM: BrandColors.rosa,
+    },
+    '3': {
+        name: 'Weakest Subject',
+        shortName: 'weakest',
+        icon: 'subject',
+        iconColor: '#EC0000',
+        iconColorDM: BrandColors.rosa,
+    },
+    '4': {
+        name: 'Timed Quiz',
+        shortName: 'timed',
+        icon: 'stopwatch',
+        iconColor: BrandColors.brandBlue,
+        iconColorDM: '#4C92FF',
+    },
+    '5': {
+        name: 'Mock Exam',
+        shortName: 'mockExam',
+        icon: 'exam',
+        iconColor: BrandColors.cadaverous,
+        iconColorDM: BrandColors.jungleGreen,
+    },
+    '10': {
+        name: 'Build Your Own',
+        shortName: 'custom',
+        icon: 'pencil',
+        iconColor: BrandColors.slate,
+        iconColorDM: BrandColors.pewter,
+    },
+} as const