@pocketprep/ui-kit 3.1.6 → 3.2.0

package/lib/components/Buttons/Link.md

@@ -1,58 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Link type="tertiary">Tertiary</Link>
-            <br>
-            <Link :has-icon="true">
-                <Icon type="filter"/>
-                Tertiary with Icon
-            </Link>
-            <br>
-            <Link type="tertiary-red">Tertiary Red</Link>
-            <br>
-            <Link type="tertiary-small">Tertiary Small</Link>
-        </div>
-        <div class="dark">
-            <Link isDarkMode="true" type="tertiary">Tertiary</Link>
-            <br>
-            <Link isDarkMode="true" :has-icon="true">
-                <Icon type="filter"/>
-                Tertiary with Icon
-            </Link>
-            <br>
-            <Link isDarkMode="true" type="tertiary-red">Tertiary Red</Link>
-            <br>
-            <Link isDarkMode="true" type="tertiary-small">Tertiary Small</Link>
-        </div>
-    </div>
-</template>
-
-<script>
-import Icon from '../Icons/Icon.vue'
-
-export default {
-    components: {
-        Icon
-    }
-}
-</script>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-
-svg {
-    width: 20px;
-    vertical-align: top;
-    margin-right: 5px;
-    margin-top: -4px;
-}
-</style>
-```

package/lib/components/Buttons/Tab.md

@@ -1,35 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Tab :active="isActive" @click="isActive = !isActive">All Studying</Tab>
-            <Tab :disabled="true">Disabled Tab</Tab>
-        </div>
-        <div class="dark">
-            <Tab :isDarkMode="true" :active="isActive" @click="isActive = !isActive">All Studying</Tab>
-            <Tab :isDarkMode="true" :disabled="true">Disabled Tab</Tab>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            isActive: false
-        }
-    }
-}
-</script>
-
-<style>
-.dark,
-.light {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Calendar/Calendar.md

@@ -1,18 +0,0 @@
-```vue
-<template>
-    <div>
-        Selected Date: {{ calendar }}
-        <Calendar label="Scheduled Exam Date" placeholder="Set Exam Date" v-model="calendar" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            calendar: null,
-        }
-    }
-}
-</script>
-```

package/lib/components/Charts/Bar.md

@@ -1,123 +0,0 @@
-```vue
-<template>
-    <div class="bar-example">
-        <div class="light">
-            <div class="bar-container">
-                <Bar
-                    title="Multiple Column Percent Chart"
-                    type="percent"
-                    size="small"
-                    :data="[{
-                        'y': 50
-                    }, {
-                        'y': 0
-                    }, {
-                        'y': 100
-                    }, {
-                        'y': 90
-                    }, {
-                        'y': 70
-                    }, {
-                        'y': 80
-                    }]"
-                />
-                <div class="bar-x-axis-multi">
-                    <span>Oldest</span>
-                    <span>Most Recent</span>
-                </div>
-            </div>
-            <div class="bar-container">
-                <Bar
-                    title="Single Column Percent Chart"
-                    type="percent"
-                    size="small"
-                    :data="[{
-                        info: '05.25.1992',
-                        'y': 50
-                    }]"
-                />
-                <div class="bar-x-axis-single">
-                    <span>12/31</span>
-                </div>
-            </div>
-        </div>
-        <div class="dark">
-            <div class="bar-container">
-                <Bar
-                    title="Multiple Column Percent Chart"
-                    type="percent"
-                    :isDarkMode="true"
-                    size="small"
-                    :data="[{
-                        'y': 50
-                    }, {
-                        'y': 0
-                    }, {
-                        'y': 100
-                    }, {
-                        'y': 90
-                    }, {
-                        'y': 70
-                    }, {
-                        'y': 80
-                    }]"
-                />
-                <div class="bar-x-axis-multi">
-                    <span>Oldest</span>
-                    <span>Most Recent</span>
-                </div>
-            </div>
-            <div class="bar-container">
-                <Bar
-                    title="Single Column Percent Chart"
-                    type="percent"
-                    size="small"
-                    :isDarkMode="true"
-                    :data="[{
-                        info: '05.25.1992',
-                        'y': 50
-                    }]"
-                />
-                <div class="bar-x-axis-single">
-                    <span>12/31</span>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style>
-.bar-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 40%;
-}
-
-.bar-x-axis-multi {
-    width: 85%;
-    display: flex;
-    justify-content: space-between;
-    margin-right: 45px;
-}
-
-.bar-x-axis-single {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding-right: 45px;
-}
-
-.dark,
-.light {
-    display: flex;
-    justify-content: space-around;
-    height: 350px;
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Charts/Pie.md

@@ -1,23 +0,0 @@
-```vue
-<template>
-    <Pie
-        :data="[{
-            'y': 10
-        }, {
-            'y': 30
-        }, {
-            'y': 5
-        }, {
-            'y': 55
-        }]"
-    />
-</template>
-
-<style>
-.uikit-pie {
-    height: 182px;
-    width: 182px;
-    display: block;
-}
-</style>
-```

package/lib/components/Controls/SegmentControl.md

@@ -1,47 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="control-container">
-            <SegmentControl
-                option1="Hide"
-                option2="Show"
-                @change="changeControl1"
-            />
-            Value: {{ control1 }}
-        </div>
-        <div class="control-container">
-            <SegmentControl
-                option1="Distribution"
-                option2="Bar Graph"
-                @change="changeControl2"
-            />
-            Value: {{ control2 }}
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            control1: 1,
-            control2: 1
-        }
-    },
-    methods: {
-        changeControl1 (option) {
-            this.control1 = option
-        },
-        changeControl2 (option) {
-            this.control2 = option
-        }
-    }
-}
-</script>
-
-<style>
-.control-container {
-    padding: 10px;
-}
-</style>
-```

package/lib/components/Controls/Slider.md

@@ -1,67 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <div class="slider" :class="{ dark: isDarkMode }">
-            <div class="slider-container">
-                Large Slider:
-                <Slider
-                    min="5"
-                    max="60"
-                    step="5"
-                    v-model="slider1"
-                    :isDarkMode="isDarkMode"
-                />
-                Value: {{ slider1 }}
-            </div>
-            <div class="slider-container">
-                Small Slider:
-                <Slider
-                    min="5"
-                    max="60"
-                    step="5"
-                    v-model="slider2"
-                    size="small"
-                    :isDarkMode="isDarkMode"
-                />
-                Value: {{ slider2 }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            slider1: 25,
-            slider2: 25,
-            isDarkMode: false,
-        }
-    }
-}
-</script>
-
-<style>
-.slider {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-    color: white;
-}
-
-.uikit-btn {
-    margin-bottom: 30px;
-}
-
-.slider-container {
-    padding: 10px 10px 40px;
-}
-
-.slider-container:last-child {
-    padding-bottom: 10px;
-}
-</style>
-```

package/lib/components/Controls/ToggleSwitch.md

@@ -1,56 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <div class="toggles" :class="{ dark: isDarkMode }">
-            <ToggleSwitch :isDarkMode="isDarkMode" v-model="control" />
-            Value: {{ control }}<br>
-            <br>
-            <ToggleSwitch :isDarkMode="isDarkMode" v-model="control2" size="large" />
-            Value: {{ control2 }}
-        </div>
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-
-export default {
-    components: {
-        Button
-    },
-    data () {
-        return {
-            control: false,
-            control2: true,
-            isDarkMode: false,
-        }
-    },
-    mounted () {
-        // This tests that the ToggleSwitch component updates when the parent component updates the v-model value
-        setTimeout(() => {
-            this.control = true
-        }, 1000)
-    }
-}
-</script>
-
-<style>
-.toggles {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-    color: #fff;
-}
-
-.uikit-btn {
-    margin-bottom: 30px;
-}
-
-.uikit-toggle-switch {
-    margin-bottom: 10px;
-}
-</style>
-```

package/lib/components/EmptyStates/EmptyState.md

@@ -1,44 +0,0 @@
-```vue
-<template>
-    <div>
-        <EmptyState
-            title="Default empty state TITLE"
-            message="Default empty state SUBHEAD"
-        />
-        <EmptyState
-            title="No results for “vea”"
-            message="Only question text is searchable. Check your spelling or try again."
-        >
-            <template #imageRow>
-                <div />
-            </template>
-        </EmptyState>
-        <EmptyState
-            state="correct"
-            title="0 Correct Questions"
-        />
-        <EmptyState
-            state="correct"
-            title="You don't have any correct questions."
-            message="Let's start studying."
-            blobColor="white"
-        />
-        <EmptyState
-            state="incorrect"
-            title="0 Incorrect Questions"
-            message="Questions answered incorrectly by this student will appear here."
-        />
-        <EmptyState
-            state="incorrect"
-            title="You don't have any incorrect questions."
-            message="Impressive!"
-            blobColor="white"
-        />
-        <EmptyState
-            state="flagged"
-            title="0 Flagged Questions"
-            message="Questions flagged by this student will appear here."
-        />
-    </div>
-</template>
-```

package/lib/components/Exams/ExamCard.md

@@ -1,45 +0,0 @@
-```vue
-<template>
-    <div>
-    <SVGDefinitions />
-    <ExamCard
-        :exam="exam"
-        :bundle="bundle"
-    />
-    <ExamCard
-        :exam="exam"
-        :bundle="bundle"
-        :showCancelButton="true"
-    />
-    <ExamCard
-        :exam="exam"
-        :bundle="bundle"
-        :disableInteraction="true"
-    />
-    </div>
-</template>
-
-<script>
-const exam = {
-    objectId: 'o98Hn8iUO4',
-    descriptiveName: 'College-level Biology Practice',
-    nativeAppName: 'College Biology',
-    itemCount: 100,
-    archivedCount: 2,
-    knowledgeAreas: ['', '']
-}
-const bundle = {
-    name: 'Nursing School',
-    objectId: '9970muCFGV'
-}
-
-export default {
-    data () {
-        return {
-            exam,
-            bundle
-        }
-    }
-}
-</script>
-```

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>
-```