@pocketprep/ui-kit 3.1.6 → 3.2.1

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

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