@pocketprep/ui-kit 3.1.6 → 3.2.1

package/lib/components/Icons/IconSideBarActive.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="sideBarActive" />
-    </div>
-</template>
-```

package/lib/components/Icons/IconStopwatch.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="stopwatch" />
-    </div>
-</template>
-```

package/lib/components/Icons/IconStrike.md

@@ -1,60 +0,0 @@
-```vue
-<template>
-    <div class="icon-strike">
-        <div class="icon-strike__normal">
-            <Icon type="strike" />
-        </div>
-        <div class="icon-strike__hover">
-            <Icon type="strike" />
-        </div>
-        <div class="icon-strike__focus">
-            <Icon type="strike" />
-        </div>
-        <div class="icon-strike__selected">
-            <Icon type="strike" />
-        </div>
-    </div>
-</template>
-
-<style>
-.icon-strike {
-    display: flex;
-    align-items: center;
-    color: #587183;
-}
-
-/* stylelint-disable-next-line */
-.icon-strike >div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 22px;
-    margin-right: 20px;
-}
-
-.icon-strike__normal {
-    background-color: #f4f5f9;
-    border-radius: 2px;
-}
-
-.icon-strike__hover {
-    background-color: rgba(207, 225, 255, 0.674);
-    border-radius: 2px;
-    color: #0064ff;
-}
-
-.icon-strike__focus {
-    color: #0064ff;
-    background-color: #f4f5f9;
-    border: 1px solid #0064ff;
-    border-radius: 2px;
-}
-
-.icon-strike__selected {
-    background-color: #0064ff;
-    border-radius: 2px;
-    color: white;
-}
-</style>
-```

package/lib/components/Icons/IconSubject.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="subject" />
-    </div>
-</template>
-```

package/lib/components/Icons/IconText.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="text" title="test" />
-    </div>
-</template>
-```

package/lib/components/Icons/IconTimer.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="timer" />
-    </div>
-</template>
-```

package/lib/components/Icons/IconWarning.md

@@ -1,7 +0,0 @@
-```vue
-<template>
-    <div>
-        <Icon type="warning" title="test" />
-    </div>
-</template>
-```

package/lib/components/Loaders/SkeletonLoader.md

@@ -1,43 +0,0 @@
-```vue
-<template>
-    <div>
-        <div>
-            <SkeletonLoader class="skeletonLoader" />
-        </div>
-        <div>
-            <SkeletonLoader class="skeletonLoader2" />
-        </div>
-        <div>
-            <SkeletonLoader class="skeletonLoader3" />
-        </div>
-        <div>
-            <SkeletonLoader class="skeletonLoader4" />
-        </div>
-    </div>
-</template>
-<script>
-
-export default {
-}
-</script>
-
-<style>
-.skeletonLoader,
-.skeletonLoader2 {
-    height: 24px;
-    width: 60px;
-    margin-bottom: 20px;
-}
-
-.skeletonLoader3 {
-    height: 24px;
-    width: 80px;
-    margin-bottom: 20px;
-}
-.skeletonLoader4 {
-    height: 24px;
-    width: 100px;
-    margin-bottom: 20px;
-}
-</style>
-```

package/lib/components/Modal/Modal.md

@@ -1,31 +0,0 @@
-```vue
-<template>
-    <div class="custom-modal-container">
-        <Modal :showCloseButton="true">
-            <template #head>
-                Head section
-            </template>
-            <div class="modal-content">
-                Custom modal component
-            </div>
-        </Modal>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.custom-modal-container {
-    position: relative;
-}
-
-.modal-content {
-    background: white;
-    padding: 20px;
-}
-</style>
-```

package/lib/components/Modal/ModalContainer.md

@@ -1,96 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="showModal1 = true">Show Modal 1</Button>
-        <ModalContainer v-if="showModal1" :showCloseButton="true" @close="showModal1 = false">
-            <template #head>
-                Head section
-            </template>
-            <div class="modal1">
-                Modal 1 with head section and close button
-            </div>
-        </ModalContainer>
-        <Button @click="showModal2 = true">Show Dark Mode Modal 2</Button>
-        <ModalContainer v-if="showModal2" :showCloseButton="true" @close="showModal2 = false" :isDarkMode="true">
-            <template #head>
-                Head section
-            </template>
-            <div class="modal2">
-                Modal 2 with head section and close button
-            </div>
-        </ModalContainer>
-        <Button @click="showModal3 = true">Show Modal 3</Button>
-        <ModalContainer v-if="showModal3" :showCloseButton="true" @close="showModal3 = false">
-            <template #modal>
-                <Modal class="modal3">
-                    Modal 3 using Modal component for style overrides
-                    <ul class="modal3__list">
-                        <li class="modal3__list-item">ABC</li>
-                        <li class="modal3__list-item">DEF</li>
-                        <li class="modal3__list-item">GHI</li>
-                        <li class="modal3__list-item">JKL</li>
-                        <li class="modal3__list-item">MNO</li>
-                        <li class="modal3__list-item">PQR</li>
-                        <li class="modal3__list-item">STU</li>
-                        <li class="modal3__list-item">VWX</li>
-                    </ul>
-                </Modal>
-            </template>
-        </ModalContainer>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            showModal1: false,
-            showModal2: false,
-            showModal3: false,
-        }
-    }
-}
-</script>
-
-<style>
-.modal1,
-.modal2 {
-    padding: 20px;
-}
-
-.modal3 {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    height: 50px;
-    padding: 20px;
-    background-color: #0064ff;
-    color: white;
-    border-radius: 30px;
-}
-
-.modal3__list {
-    padding: 0;
-    list-style: none;
-    background-color: white;
-    border: 1px solid black;
-    color: black;
-}
-
-.modal3__list-item {
-    padding: 5px;
-}
-
-.modal3__list-item:nth-child(-n+7) {
-    border-bottom: 1px solid gray;
-}
-
-@media (max-width: 767px) {
-    .modal3 {
-        left: 10px;
-        right: 10px;
-        height: 90%;
-    }
-}
-</style>
-```

package/lib/components/Onboarding/EmailAuth.md

@@ -1,40 +0,0 @@
-```vue
-<template>
-    <div>
-        <pre>
-            Code: {{ code }}
-        </pre>
-        <EmailAuth
-            class="email-auth"
-            email="test@pocketprep.com"
-            @resend="resendEmail"
-            @submit="submitEmailAuth"
-            v-model="code"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            code: ''
-        }
-    },
-    methods: {
-        resendEmail: function () {
-            alert('Resend email')
-        },
-        submitEmailAuth: function ({ email, code }) {
-            alert(`Form submit with data- { email: ${email}, code: ${ code } }`)
-        }
-    }
-}
-</script>
-
-<style>
-.email-auth {
-    background-color: #fff9ef;
-}
-</style>
-```

package/lib/components/Onboarding/MagicCodeEntry.md

@@ -1,20 +0,0 @@
-```vue
-<template>
-    <div>
-        <pre>
-            Code: {{ code }}
-        </pre>
-        <MagicCodeEntry v-model="code" />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            code: ''
-        }
-    }
-}
-</script>
-```

package/lib/components/Pagination/QuestionReviewPagination.md

@@ -1,19 +0,0 @@
-```vue
-<template>
-    <QuestionReviewPagination :currentPage="currentPage" :total="10" @changePage="val => currentPage = val" />
-</template>
-<script>
-import QuestionReviewPagination from '@/components/Pagination/QuestionReviewPagination.vue'
-
-export default {
-    data () {
-        return {
-            currentPage: 0
-        }
-    },
-    components: {
-        QuestionReviewPagination,
-    },
-}
-</script>
-```

package/lib/components/Pagination/TablePagination.md

@@ -1,19 +0,0 @@
-```vue
-<template>
-    <TablePagination :perPage="10" unit="things" :currentPage="currentPage" :total="45" @changePage="val => currentPage = val" />
-</template>
-<script>
-import TablePagination from '@/components/Pagination/TablePagination.vue'
-
-export default {
-    data () {
-        return {
-            currentPage: 0
-        }
-    },
-    components: {
-        TablePagination,
-    },
-}
-</script>
-```

package/lib/components/PhonePerson/PhonePerson.md

@@ -1,36 +0,0 @@
-```vue
-<template>
-    <div class="phone-people">
-        <PhonePerson bundleId="mO5EIsoZ9H" />
-        <PhonePerson bundleId="uKLwvbsbPV" />
-        <PhonePerson bundleId="gAlCkoUVLl" />
-        <PhonePerson bundleId="GVCNrq4ixh" />
-        <PhonePerson bundleId="PusoOu7qGQ" />
-        <PhonePerson bundleId="1kS20KPPkH" />
-        <PhonePerson bundleId="tVMt7KCrkQ" />
-        <PhonePerson bundleId="4dTgUX97Dk" />
-        <PhonePerson bundleId="9970muCFGV" />
-        <PhonePerson bundleId="k9T5L3kC0U" />
-        <PhonePerson bundleId="DO5jBm0OJo" />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {}
-    }
-}
-</script>
-
-<style>
-.phone-people {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.phone-people img {
-    width: 150px;
-}
-</style>
-```

package/lib/components/Quiz/FlagToggle.md

@@ -1,37 +0,0 @@
-```vue
-<template>
-    <div class="docs-flag-toggle">
-        <FlagToggle
-            :is-flagged="isFlagged"
-            @toggleFlag="toggleFlag"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            isFlagged: false,
-        }
-    },
-    methods: {
-        toggleFlag (newVal) {
-            this.isFlagged = newVal
-        },
-    },
-}
-</script>
-
-<style>
-.docs-flag-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 200px;
-    height: 200px;
-    background-color: #1f3545;
-    color: white;
-}
-</style>
-```

package/lib/components/Quiz/GlobalMetricsToggle.md

@@ -1,46 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="docs-global-metrics-toggle">
-            <GlobalMetricsToggle
-                :showGlobalMetrics="showGlobalMetrics"
-                @toggleGlobalMetrics="toggleGlobalMetrics"
-            />
-        </div>
-        <div class="docs-global-metrics-toggle">
-            <GlobalMetricsToggle
-                :disabled="true"
-                :showGlobalMetrics="showGlobalMetrics"
-                @toggleGlobalMetrics="toggleGlobalMetrics"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            showGlobalMetrics: false,
-        }
-    },
-    methods: {
-        toggleGlobalMetrics (newVal) {
-            this.showGlobalMetrics = newVal
-        },
-    },
-}
-</script>
-
-<style>
-.docs-global-metrics-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 200px;
-    height: 200px;
-    background-color: #1f3545;
-    color: white;
-}
-</style>
-```

package/lib/components/Quiz/KeyboardShortcutsButton.md

@@ -1,18 +0,0 @@
-```vue
-<template>
-    <div class="docs-keyboard-shortcuts-btn">
-        <KeyboardShortcutsButton />
-    </div>
-</template>
-<style>
-.docs-keyboard-shortcuts-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 200px;
-    height: 200px;
-    background-color: #1f3545;
-    color: white;
-}
-</style>
-```

package/lib/components/Quiz/KeyboardShortcutsModal.md

@@ -1,71 +0,0 @@
-```vue
-<template>
-    <div class="docs-keyboard-shortcuts-modal">
-        <Button 
-            @click="showQuizKeyboardShortcutsModal = true; 
-            showReviewKeyboardShortcutsModal = false; 
-            showTeachKeyboardShortcutsModal = false"
-        >
-            Show Quiz Mode Keyboard Shortcuts
-        </Button>
-        <Button 
-            @click="showQuizKeyboardShortcutsModal = false; 
-            showTeachKeyboardShortcutsModal = false; 
-            showReviewKeyboardShortcutsModal = true"
-        >
-            Show Review Mode Keyboard Shortcuts
-        </Button>
-        <Button 
-            @click="showQuizKeyboardShortcutsModal = false; 
-            showReviewKeyboardShortcutsModal = false; 
-            showTeachKeyboardShortcutsModal = true"
-        >
-            Show Teach Mode Keyboard Shortcuts
-        </Button>
-        <Button @click="isDarkMode = !isDarkMode">
-            {{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode
-        </Button>
-        <KeyboardShortcutsModal
-            v-if="showQuizKeyboardShortcutsModal"
-            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
-            :allowKeyboardShortcuts="allowKeyboardShortcuts"
-            @close="showQuizKeyboardShortcutsModal = false"
-            :isDarkMode="isDarkMode"
-        />
-        <KeyboardShortcutsModal
-            v-if="showReviewKeyboardShortcutsModal"
-            keyboardMode="review"
-            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
-            :allowKeyboardShortcuts="allowKeyboardShortcuts"
-            @close="showReviewKeyboardShortcutsModal = false"
-            :isDarkMode="isDarkMode"
-        />
-        <KeyboardShortcutsModal
-            v-if="showTeachKeyboardShortcutsModal"
-            keyboardMode="teach"
-            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
-            :allowKeyboardShortcuts="allowKeyboardShortcuts"
-            @close="showTeachKeyboardShortcutsModal = false"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            showQuizKeyboardShortcutsModal: false,
-            showReviewKeyboardShortcutsModal: false,
-            showTeachKeyboardShortcutsModal: false,
-            allowKeyboardShortcuts: false,
-            isDarkMode: false
-        }
-    },
-    methods: {
-        toggleKeyboardShortcuts (newVal) {
-            this.allowKeyboardShortcuts = newVal
-        }
-    }
-}
-</script>
-```