@pocketprep/ui-kit 3.1.6 → 3.2.1

package/lib/components/Exams/ExamMenuCard.md

@@ -1,90 +0,0 @@
-```vue
-<template>
-    <div class="docs-exam-menu-card">
-        <div>
-            <Button @click="canClick = !canClick">
-                {{ canClick ? 'Prevent' : 'Allow' }} Click
-            </Button>
-            <Button @click="showMenuArrow = !showMenuArrow">
-                {{ showMenuArrow ? 'Hide' : 'Show' }} Menu Arrow
-            </Button>
-            <Button @click="isPremium = !isPremium">
-                {{ isPremium ? 'Hide' : 'Show' }} Premium Badge
-            </Button>
-        </div>
-        <SVGDefinitions />
-        <ExamMenuCard
-            class="docs-exam-menu-card__color"
-            :exam="exam"
-            :bundle-id="bundleId"
-            :is-clickable="canClick"
-            :show-menu-arrow="showMenuArrow"
-            :menu-arrow-direction="menuArrowDirection"
-            :is-premium="isPremium"
-            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
-            @keydown.enter="handleKeydown"
-        />
-        <ExamMenuCard
-            class="docs-exam-menu-card__grayscale"
-            :exam="exam"
-            :bundle-id="bundleId"
-            theme="grayscale"
-            :is-clickable="canClick"
-            :show-menu-arrow="showMenuArrow"
-            :menu-arrow-direction="menuArrowDirection"
-            :is-premium="isPremium"
-            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
-            @keydown.enter="handleKeydown"
-        />
-        <ExamMenuCard
-            class="docs-exam-menu-card__silver"
-            :exam="exam"
-            :bundle-id="bundleId"
-            theme="silver"
-            :is-clickable="canClick"
-            :show-menu-arrow="showMenuArrow"
-            :menu-arrow-direction="menuArrowDirection"
-            :is-premium="isPremium"
-            @click="menuArrowDirection = menuArrowDirection === 'up' ? 'down' : 'up'"
-            @keydown.enter="handleKeydown"
-        />
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        const exam = {
-            objectId: 'o98Hn8iUO4',
-            descriptiveName: 'College-level Biology Practice',
-            nativeAppName: 'College Biology',
-        }
-        const bundleId = '9970muCFGV'
-        const canClick = false
-        const showMenuArrow = false
-        const menuArrowDirection = 'down'
-        const isPremium = false
-
-        return {
-            exam,
-            bundleId,
-            canClick,
-            showMenuArrow,
-            menuArrowDirection,
-            isPremium,
-        }
-    },
-    methods: {
-        handleKeydown () {
-            this.menuArrowDirection = this.menuArrowDirection === 'up' ? 'down' : 'up'
-        }
-    }
-}
-</script>
-```
-
-<style>
-.docs-exam-menu-card__silver {
-    background-color: #1c2f3c;
-}
-</style>

package/lib/components/Filters/FilterDropdown.md

@@ -1,68 +0,0 @@
-```vue
-<template>
-    <div>
-        <FilterDropdown
-            filterLabel="Filter"
-            :radioEntries="radioOptions"
-            :checkboxEntries="checkboxOptions"
-        />
-        <FilterDropdown
-            filterLabel="Filter"
-            :radioEntries="radioOptions"
-            :checkboxEntries="checkboxOptions"
-        >
-            <template #checkboxLabelText>
-                FILTER BY QUIZ MODE
-            </template>
-        </FilterDropdown>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            radioOptions: [],
-            checkboxOptions: [
-                    {
-                        id: 'airway',
-                        label: 'Airway, Respiration, & Ventilation (18)',
-                        enabled: false,
-                    },
-                    {
-                        id: 'cardio',
-                        label: 'Cardiology & Resuscitation (9)',
-                        enabled: false,
-                    },
-                    {
-                        id: 'ems',
-                        label: 'EMS Operations (5)',
-                        enabled: false,
-                    },
-                    {
-                        id: 'medical',
-                        label: 'Medical; Obstetrics & Gynecology (6)',
-                        enabled: false,
-                    },
-                    {
-                        id: 'trauma',
-                        label: 'Trauma (10)',
-                        enabled: false,
-                    },
-            ]
-        }
-    }
-}
-</script>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Filters/FilterOptions.md

@@ -1,67 +0,0 @@
-```vue
-<template>
-    <div>
-        <FilterOptions
-            :radioEntries="radioEntries"
-            :checkboxEntries="checkboxEntries"
-            class="multiple"
-        />
-        <FilterOptions
-            :radioEntries="[]"
-            :checkboxEntries="checkboxEntries"
-        >
-            <template #checkboxLabelText>
-                FILTER BY QUIZ MODE
-            </template>
-        </FilterOptions>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            checkboxEntries: [
-                {
-                    id: 'airway',
-                    label: 'Airway, Respiration, & Ventilation (18)',
-                    enabled: false,
-                },
-                {
-                    id: 'cardio',
-                    label: 'Cardiology & Resuscitation (9)',
-                    enabled: false,
-                },
-                {
-                    id: 'ems',
-                    label: 'EMS Operations (5)',
-                    enabled: false,
-                },
-                {
-                    id: 'medical',
-                    label: 'Medical; Obstetrics & Gynecology (6)',
-                    enabled: false,
-                },
-                {
-                    id: 'trauma',
-                    label: 'Trauma (10)',
-                    enabled: false,
-                }
-            ],
-            radioEntries: [
-                { label: 'All Answered', value: 'all' },
-                { label: 'Correct', value: 'correct' },
-                { label: 'Incorrect', value: 'incorrect' },
-                { label: 'Flagged', value: 'flagged' },
-            ]   
-        }
-    }
-}
-</script>
-
-<style>
-.multiple {
-    margin-bottom: 10px;
-}
-</style>
-```

package/lib/components/Forms/Checkbox.md

@@ -1,52 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Checkbox v-model="checkboxValue1" />
-            <Checkbox v-model="checkboxValue2" :disabled="true" />
-            <Checkbox v-model="checkboxValue3" />
-            <Checkbox v-model="checkboxValue4" :disabled="true" />
-            <Checkbox v-model="checkboxValue5" />
-            <Checkbox v-model="checkboxValue6" :disabled="true" />
-        </div>
-        <div class="dark">
-            <Checkbox :isDarkMode="true" v-model="checkboxValue1" />
-            <Checkbox :isDarkMode="true" v-model="checkboxValue2" :disabled="true" />
-            <Checkbox :isDarkMode="true" v-model="checkboxValue3" />
-            <Checkbox :isDarkMode="true" v-model="checkboxValue4" :disabled="true" />
-            <Checkbox :isDarkMode="true" v-model="checkboxValue5" />
-            <Checkbox :isDarkMode="true" v-model="checkboxValue6" :disabled="true" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checkboxValue1: true,
-            checkboxValue2: true,
-            checkboxValue3: null,
-            checkboxValue4: null,
-            checkboxValue5: false,
-            checkboxValue6: false,
-        }
-    }
-}
-</script>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-.uikit-checkbox {
-    margin-bottom: 10px;
-}
-</style>
-```

package/lib/components/Forms/CheckboxOption.md

@@ -1,37 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <CheckboxOption label="Test Label" v-model="checkboxValue1" />
-        </div>
-        <div class="dark">
-            <CheckboxOption :isDarkMode="true" label="Test Label" v-model="checkboxValue1" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            checkboxValue1: true,
-        }
-    }
-}
-</script>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-button {
-    margin-bottom: 20px;
-}
-</style>
-```

package/lib/components/Forms/Errors.md

@@ -1,23 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Errors :errors="['Error example', 'This is another possible error']" />
-        </div>
-        <div class="dark">
-            <Errors :isDarkMode="true" :errors="['Error example', 'This is another possible error']" />
-        </div>
-    </div>
-</template>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Forms/Input.md

@@ -1,63 +0,0 @@
-```vue
-<template>
-    <div class="inputs" :class="{ dark: isDarkMode }">
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <Input
-            label="Standard Input Field"
-            placeholder="Transfiguration Year Ones"
-            v-model="inputVal1"
-            :isDarkMode="isDarkMode"
-        />
-        <Input
-            label="Disabled Input Field"
-            placeholder="Transfiguration Year Ones"
-            :disabled="true"
-            v-model="inputVal2"
-            :isDarkMode="isDarkMode"
-        />
-        <Input
-            label="Password Field"
-            placeholder="6+ characters"
-            v-model="inputVal3"
-            fieldType="password"
-            :isDarkMode="isDarkMode"
-        />
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-
-export default {
-    components: {
-        Button
-    },
-    data() {
-        return {
-            inputVal1: null,
-            inputVal2: null,
-            inputVal3: null,
-            isDarkMode: false
-        }
-    }
-}
-</script>
-
-<style>
-.inputs {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-.uikit-btn {
-    margin-bottom: 30px;
-}
-
-.uikit-input {
-    margin-bottom: 20px;
-}
-</style>
-```

package/lib/components/Forms/Radio.md

@@ -1,66 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="radioValue = null">Reset Radio Field</Button>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <div class="radio" :class="{ dark: isDarkMode }">
-            <Radio
-                label="Who can <strong>use</strong> it?"
-                v-model="radioValue"
-                :data="[
-                    { label: 'Colleagues in organization', helperText: 'Helper text can be added here to help', value: 1 }, 
-                    { label: 'Just me', value: 2 },
-                    { label: 'No one', value: 3 },
-                ]"
-                :isDarkMode="isDarkMode"
-            />
-
-            <Radio
-                label="Disabled radio buttons"
-                :disabled="true"
-                v-model="radioValue2"
-                :data="[
-                    { label: 'You cannot select me', value: 1 }, 
-                    { label: 'Or me', value: 2 },
-                ]"
-                :isDarkMode="isDarkMode"
-            />
-            </div>
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-
-export default {
-    components: {
-        Button
-    },
-    data() {
-        return {
-            radioValue: null,
-            radioValue2: { value: 2 },
-            isDarkMode: false,
-        }
-    }
-}
-</script>
-
-<style>
-.radio {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-.uikit-btn {
-    margin-bottom: 30px;
-}
-
-.uikit-radio:last-child {
-    margin-top: 20px;
-}
-</style>
-```

package/lib/components/Forms/Select.md

@@ -1,133 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="reset">Reset Select Fields</Button>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable'}} Dark Mode</Button>
-        <div class="select" :class="{ dark: isDarkMode }">
-            <Select
-                label="Exam Prep"
-                placeholder="Select field with empty option"
-                :showEmptyOption="true"
-                :data="[
-                    { value: 1, label: 'NASM-CPT 1' }, { value: 2, label: 'PP Trivia 2'}, { value: 3, label: 'Another Exam 3'},
-                    { value: 4, label: 'NASM-CPT 4' }, { value: 5, label: 'PP Trivia 5'}, { value: 6, label: 'Another Exam 6'},
-                    { value: 7, label: 'NASM-CPT 7' }, { value: 8, label: 'PP Trivia 8'}, { value: 9, label: 'Another Exam 9'},
-                    { value: 10, label: 'NASM-CPT 10' }, { value: 11, label: 'PP Trivia 11'}, { value: 12, label: 'Another Exam 12'},
-                ]"
-                v-model="selectValue0"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue0 }}<br>
-            <br>
-            <Select
-                label="Exam Prep"
-                placeholder="Select field with empty option and menu above field"
-                :showEmptyOption="true"
-                :openMenuAbove="true"
-                :data="[
-                    { value: 1, label: 'NASM-CPT 1' }, { value: 2, label: 'PP Trivia 2'}, { value: 3, label: 'Another Exam 3'},
-                    { value: 4, label: 'NASM-CPT 4' }, { value: 5, label: 'PP Trivia 5'}, { value: 6, label: 'Another Exam 6'},
-                    { value: 7, label: 'NASM-CPT 7' }, { value: 8, label: 'PP Trivia 8'}, { value: 9, label: 'Another Exam 9'},
-                    { value: 10, label: 'NASM-CPT 10' }, { value: 11, label: 'PP Trivia 11'}, { value: 12, label: 'Another Exam 12'},
-                ]"
-                v-model="selectValue1"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue1 }}<br>
-            <br>
-            <Select
-                label="Exam Prep"
-                placeholder="Disabled select field"
-                :disabled="true"
-                :data="[{ value: 1, label: 'NASM-CPT' }, { value: 2, label: 'PP Trivia'}, { value: 3, label: 'Another Exam'}]"
-                v-model="selectValue2"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue2 }}<br>
-            <br>
-            <Select
-                placeholder="Select field with no label"
-                :data="[{ value: 1, label: 'NASM-CPT' }, { value: 2, label: 'PP Trivia'}, { value: 3, label: 'Another Exam'}]"
-                v-model="selectValue3"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue3 }}<br>
-            <br>
-            <Select
-                label="Exam Prep"
-                placeholder="Select field with typeahead"
-                :typeahead="true"
-                :data="[{ value: 1, label: 'NASM-CPT' }, { value: 2, label: 'PP Trivia'}, { value: 3, label: 'Another Exam'}]"
-                v-model="selectValue4"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue4 }}
-            <br>
-            <Select
-                label="Exam Prep"
-                placeholder="Select field with link"
-                :data="[{ value: 1, label: 'Card ending in 2234' }, { value: 2, label: 'Card endingin 1234'}, { value: 3, label: '+ Add Payment Method', type: 'link' }]"
-                v-model="selectValue5"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue5 }}
-            <br>
-            <Select
-                label="Exam Prep"
-                placeholder="Select field with subtext"
-                subtext="Hello, I am sample subtext"
-                :data="[{ value: 1, label: 'Field 1 with subtext' , subtext: 'Hello, I am subtext for field 1'}, { value: 2, label: 'Field 2 with subtext', subtext: 'And I am for field 2!'}, { value: 3, label: 'Field 3 with subtext', subtext: 'Field 3!!!'}]"
-                v-model="selectValue6"
-                :isDarkMode="isDarkMode"
-            />
-            Value: {{ selectValue6 }}
-        </div>
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-export default {
-    components: {
-        Button
-    },
-    data() {
-        return {
-            selectValue0: null,
-            selectValue1: null,
-            selectValue2: null,
-            selectValue3: null,
-            selectValue4: null,
-            selectValue5: null,
-            selectValue6: null,
-            isDarkMode: false,
-        }
-    },
-    methods: {
-        reset() {
-            this.selectValue0 = null
-            this.selectValue1 = null
-            this.selectValue2 = null
-            this.selectValue3 = null
-            this.selectValue4 = null
-            this.selectValue5 = null
-            this.selectValue6 = null
-        }
-    }
-}
-</script>
-
-<style>
-.select {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-.uikit-select {
-    margin-top: 10px;
-}
-</style>
-```

package/lib/components/Forms/Textarea.md

@@ -1,57 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <div class="textareas" :class="{ dark: isDarkMode }">
-            <Textarea
-                label="Standard Textarea Field"
-                placeholder="Transfiguration Year Ones"
-                v-model="textareaVal1"
-                :isDarkMode="isDarkMode"
-            />
-            <Textarea
-                label="Disabled Textarea Field"
-                placeholder="Transfiguration Year Ones"
-                :disabled="true"
-                v-model="textareaVal2"
-                :isDarkMode="isDarkMode"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-
-export default {
-    components: {
-        Button
-    },
-    data() {
-        return {
-            textareaVal1: null,
-            textareaVal2: null,
-            isDarkMode: false,
-        }
-    }
-}
-</script>
-
-<style>
-.uikit-btn {
-    margin-bottom: 30px;
-}
-
-.textareas {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-.uikit-textarea:first-child {
-    margin-bottom: 10px;
-}
-</style>
-```