@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Controls/Slider.md

@@ -0,0 +1,67 @@
+```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/Slider.vue

@@ -0,0 +1,358 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-slider"
+        :class="{ [`uikit-slider--${size}`]: true }"
+    >
+        <div v-dark="isDarkMode" class="uikit-slider__number uikit-slider__min">
+            {{ min }}
+        </div>
+        <div v-dark="isDarkMode" class="uikit-slider__slide">
+            <div
+                v-dark="isDarkMode"
+                class="uikit-slider__filled"
+                :style="{ width: `${filledWidth}%` }"
+            />
+            <input
+                :id="inputId ? inputId : undefined"
+                v-model.number="sliderValue"
+                v-dark="isDarkMode"
+                type="range"
+                :max="max"
+                :min="min"
+                :step="step"
+                :aria-valuemin="min"
+                :aria-valuemax="max"
+                :aria-valuenow="sliderValue"
+                class="uikit-slider__slide-input"
+            >
+        </div>
+        <div v-dark="isDarkMode" class="uikit-slider__number uikit-slider__max">
+            {{ max }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Slider extends Vue {
+    @Prop({ default: 0 }) min!: number
+    @Prop() max!: number
+    @Prop({ default: 1 }) step!: number
+    @Prop() modelValue!: number
+    @Prop({ default: 'large' }) size!: 'small' | 'large'
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) inputId!: string | null
+
+    sliderValue = 0
+
+    get filledWidth () {
+        return ((this.modelValue - this.min) / (this.max - this.min)) * 100
+    }
+
+    mounted () {
+        this.sliderValue = this.modelValue
+        this.sliderValueChanged()
+    }
+
+    @Watch('modelValue')
+    valueChanged () {
+        this.sliderValue = this.modelValue
+    }
+
+    @Watch('sliderValue')
+    sliderValueChanged () {
+        if (this.sliderValue % this.step !== 0) {
+            this.sliderValue = Math.round(this.sliderValue / this.step) * this.step || 0
+        }
+
+        if (this.sliderValue > this.max) {
+            this.sliderValue = this.max
+        } else if (this.sliderValue < this.min) {
+            this.sliderValue = this.min
+        }
+
+        this.emitUpdateModelValue(this.sliderValue)
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (sliderValue: number) {
+        return sliderValue
+    }
+}
+</script>
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-slider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &--small {
+        .uikit-slider__number {
+            font-size: 14px;
+            line-height: 14px;
+            width: 24px;
+        }
+
+        .uikit-slider__min {
+            text-align: right;
+            margin-right: 10px;
+        }
+
+        .uikit-slider__max {
+            text-align: left;
+            margin-left: 10px;
+        }
+
+        .uikit-slider__filled {
+            top: 6px;
+        }
+
+        .uikit-slider__slide {
+            height: 15px;
+
+            .uikit-slider__slide-input {
+                height: 15px;
+
+                &:focus {
+                    &::-webkit-slider-thumb {
+                        border: 0;
+                        background-size: 14px 14px;
+                    }
+
+                    &::-moz-range-thumb {
+                        border: 0;
+                        background-size: 14px 14px;
+                    }
+
+                    &::-ms-thumb {
+                        border: 0;
+                        background-size: 14px 14px;
+                    }
+                }
+
+                &::-webkit-slider-thumb {
+                    margin-top: -5px;
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 14px;
+                    position: relative;
+                }
+
+                &::-moz-range-thumb {
+                    margin-top: -5px;
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 14px;
+                }
+
+                &::-ms-thumb {
+                    margin-top: -5px;
+                    width: 14px;
+                    height: 14px;
+                    border-radius: 14px;
+                }
+            }
+        }
+    }
+
+    &__number {
+        font-size: 15px;
+        line-height: 15px;
+        font-weight: 600;
+        color: $slate-01;
+        width: 30px;
+
+        &--dark {
+            color: $pewter;
+        }
+    }
+
+    &__min {
+        width: 23px;
+        text-align: right;
+        margin-right: 10px;
+    }
+
+    &__max {
+        text-align: left;
+        margin-left: 10px;
+    }
+
+    &__slide {
+        flex: 1;
+        position: relative;
+        height: 29px;
+    }
+
+    &__slide-input {
+        height: 29px;
+        width: 100%;
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+
+        &:hover {
+            &::-webkit-slider-thumb {
+                background: $brand-blue;
+            }
+
+            &::-moz-range-thumb {
+                background: $brand-blue;
+            }
+
+            &::-ms-thumb {
+                background: $brand-blue;
+            }
+        }
+
+        &:focus {
+            outline: none;
+
+            &::-webkit-slider-thumb {
+                border: 0;
+                background-size: 28px 29px;
+            }
+
+            &::-moz-range-thumb {
+                border: 0;
+                background-size: 28px 29px;
+            }
+
+            &::-ms-thumb {
+                border: 0;
+                background-size: 28px 29px;
+            }
+        }
+
+        &::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 3px;
+            cursor: pointer;
+            background: $sky-blue;
+            border-radius: 3px;
+        }
+
+        &::-moz-range-track {
+            width: 100%;
+            height: 3px;
+            cursor: pointer;
+            background: $sky-blue;
+            border-radius: 3px;
+        }
+
+        &::-ms-track {
+            width: calc(100% - 5px);
+            height: 3px;
+            cursor: pointer;
+            background: $sky-blue;
+            border-radius: 3px;
+        }
+
+        &::-webkit-slider-thumb {
+            margin-top: -12px;
+            width: 28px;
+            height: 29px;
+            border-radius: 28px;
+            border: 2px solid $brand-blue;
+            box-sizing: border-box;
+            background: $white;
+            cursor: pointer;
+            -webkit-appearance: none;
+            position: relative;
+            z-index: 1;
+        }
+
+        &::-moz-range-thumb {
+            margin-top: -12px;
+            width: 28px;
+            height: 29px;
+            border-radius: 28px;
+            border: 2px solid $brand-blue;
+            box-sizing: border-box;
+            background: $white;
+            cursor: pointer;
+            position: relative;
+            z-index: 1;
+        }
+
+        &::-ms-thumb {
+            margin-top: -12px;
+            width: 28px;
+            height: 29px;
+            border-radius: 28px;
+            border: 2px solid $brand-blue;
+            box-sizing: border-box;
+            background: $white;
+            cursor: pointer;
+            position: relative;
+            z-index: 1;
+        }
+
+        &--dark {
+            &:hover {
+                &::-webkit-slider-thumb {
+                    background-color: $banana-bread;
+                }
+
+                &::-moz-range-thumb {
+                    background-color: $banana-bread;
+                }
+
+                &::-ms-thumb {
+                    background-color: $banana-bread;
+                }
+            }
+
+            &::-webkit-slider-runnable-track {
+                background-color: $charcoal;
+            }
+
+            &::-moz-range-track {
+                background-color: $charcoal;
+            }
+
+            &::-ms-track {
+                background-color: $charcoal;
+            }
+
+            &::-webkit-slider-thumb {
+                border: 2px solid $banana-bread;
+                background-color: $brand-black;
+            }
+
+            &::-moz-range-thumb {
+                border: 2px solid $banana-bread;
+                background-color: $brand-black;
+            }
+
+            &::-ms-thumb {
+                border: 2px solid $banana-bread;
+                background-color: $brand-black;
+            }
+        }
+    }
+
+    &__filled {
+        background: $brand-blue;
+        height: 3px;
+        position: absolute;
+        left: 0;
+        top: 13px;
+        border-radius: 3px;
+
+        &--dark {
+            background: $banana-bread;
+        }
+    }
+}
+</style>

package/lib/components/Controls/ToggleSwitch.md

@@ -0,0 +1,56 @@
+```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/Controls/ToggleSwitch.vue

@@ -0,0 +1,160 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-toggle-switch"
+        :class="{ 
+            'uikit-toggle-switch--enabled': modelValue, 
+            [`uikit-toggle-switch--${size}`]: true 
+        }"
+        tabindex="0"
+        role="checkbox"
+        :aria-checked="modelValue"
+        @keydown.enter="toggleOption"
+        @keydown.prevent.space="toggleOption"
+        @mousedown.prevent
+        @click="toggleOption"
+    >
+        <div
+            v-dark="isDarkMode" 
+            class="uikit-toggle-switch__handle" 
+            :class="{ 
+                [`uikit-toggle-switch__handle--${size}`]: true,
+                [`uikit-toggle-switch__handle--${size}--enabled`]: modelValue,
+                'uikit-toggle-switch__handle--enabled': modelValue,
+            }"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class ToggleSwitch extends Vue {
+    @Prop({ default: false }) modelValue!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: 'small' }) size!: 'small' | 'large'
+
+    @Emit('update:modelValue')
+    toggleOption () {
+        return !this.modelValue
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-toggle-switch {
+    background-color: $steel;
+    width: 38px;
+    height: 20px;
+    border-radius: 20px;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    outline: none;
+
+    &:hover {
+        background-color: $slate;
+    }
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        z-index: 0;
+        width: calc(100% + 1px);
+        height: calc(100% + 1px);
+        border-radius: 28px;
+        top: -2px;
+        left: -2px;
+        border: 1.5px solid $brand-blue;
+    }
+
+    &--dark {
+        background-color: $steel;
+
+        &:hover {
+            background-color: $pewter;
+        }
+
+        &:focus {
+            background-color: rgba($pewter, 0.4);
+
+            &::before {
+                border-color: $butterscotch;
+            }
+        }
+    }
+
+    &--large {
+        width: 50px;
+        height: 26px;
+        border-radius: 36.5px;
+    }
+
+    &--enabled {
+        background-color: $brand-blue;
+
+        &:hover {
+            background-color: darken($brand-blue, 10%);
+        }
+
+        &--dark {
+            background-color: $banana-bread;
+
+            &:hover {
+                background-color: $butterscotch;
+            }
+
+            &:focus {
+                background-color: $banana-bread;
+            }
+        }
+    }
+
+    &__handle {
+        background-color: $white;
+        border: 0.5px solid rgba(0, 0, 0, 0.04);
+        border-radius: 100px;
+        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        transition: left 0.1s linear;
+        box-sizing: border-box;
+
+        &--dark {
+            background: $charcoal;
+            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        &--enabled {
+            box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.15);
+            left: 20px;
+            transition: left 0.1s linear;
+
+            &--dark {
+                box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
+            }
+        }
+
+        &--large {
+            width: 22px;
+            height: 22px;
+
+            &--enabled {
+                left: 26px;
+                transition: left 0.1s linear;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Exams/ExamCard.md

@@ -0,0 +1,45 @@
+```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>
+```