@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Quiz/QuizProgressBar.md

@@ -0,0 +1,131 @@
+```vue
+<template>
+    <div>
+        <div class="docs-quiz-progress-bar__controls">
+            <div class="docs-quiz-progress-bar__slider">
+                Answered
+                <Slider class="docs-quiz-progress-bar__slider-input" v-model="numAnswered" :max="numBars" />
+            </div>
+            <div class="docs-quiz-progress-bar__slider">
+                Selected
+                <Slider class="docs-quiz-progress-bar__slider-input" v-model="indexOfSelected" :max="numBars" />
+            </div>
+            <div class="docs-quiz-progress-bar__slider">
+                Total
+                <Slider class="docs-quiz-progress-bar__slider-input" v-model="numBars" min="1" max="100" />
+            </div>
+        </div>
+        <div class="docs-quiz-progress-bar__container">
+            <div class="docs-quiz-progress-bar__context">
+                <div>Answered: {{ numAnswered }}</div>
+                <div>Selected: {{ indexOfSelected }}</div>
+                <div>Total: {{ numBars }}</div>
+            </div>
+            <div class="docs-quiz-progress-bar" :style="{ width: fullBarWidth + 'px'}">
+                <QuizProgressBar
+                    v-for="n in numBars"
+                    :key="n"
+                    :is-answered="n <= numAnswered"
+                    :is-selected="Number(n) === Number(indexOfSelected)"
+                    :style="{
+                        maxWidth: barWidthString,
+                        marginRight: n === numBars ? '0' : barMarginString,
+                        height: (numBars >= 50 && n === indexOfSelected) ? '8px' : '4px',
+                    }"
+                    @click="clickedBar(n)"
+                    @keydown.enter="clickedBar(n)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            fullBarWidth: 334,
+            numAnswered: 0,
+            indexOfSelected: 0,
+            numBars: 10,
+        }
+    },
+    computed: {
+        barWidth () {
+            const numGaps = this.numBars - 1
+            const widthOfAllGaps = numGaps * this.barMargin
+            const availableWidth = this.fullBarWidth - widthOfAllGaps
+            const barWidth = Math.max(Math.floor(availableWidth / this.numBars), 1)
+            return this.numBars < 50 ? barWidth : Math.min(barWidth, 2)
+        },
+        barMargin () {
+            return this.numBars < 50 ? 4 : 2
+        },
+        barWidthString () {
+            return `${this.barWidth}px`
+        },
+        barMarginString () {
+            return `${this.barMargin}px`
+        },
+    },
+    watch: {
+        numBars (newVal) {
+            if (this.numAnswered > newVal) {
+                this.numAnswered = newVal
+            }
+            if (this.indexOfSelected > newVal) {
+                this.indexOfSelected = newVal
+            }
+        }
+    },
+    methods: {
+        clickedBar(index) {
+            this.indexOfSelected = index
+        }
+    },
+}
+</script>
+
+<style>
+.docs-quiz-progress-bar__controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.docs-quiz-progress-bar__slider {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 380px;
+    margin: 5px;
+}
+
+.docs-quiz-progress-bar__slider-input {
+    width: 300px;
+}
+
+.docs-quiz-progress-bar__container {
+    width: 100%;
+    background-color: #1f3545;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.docs-quiz-progress-bar__context {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    color: white;
+}
+
+.docs-quiz-progress-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
+```

package/lib/components/Quiz/QuizProgressBar.vue

@@ -0,0 +1,96 @@
+<template>
+    <div
+        v-breakpoint="{ small: 2 }"
+        class="uikit-quiz-progress-bar"
+        :class="{
+            'uikit-quiz-progress-bar--selected': isSelected,
+            'uikit-quiz-progress-bar--answered': isAnswered,
+        }"
+        :tabindex="isFocusable ? '0' : '-1'"
+        @click="emitClick($event)"
+        @keydown="emitKeydown($event)"
+        @mousedown.prevent
+    />
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import { breakpoint } from '../../directives'
+
+@Component({
+    directives: {
+        breakpoint,
+    },
+})
+export default class QuizProgressBar extends Vue {
+    @Prop({ default: false }) isSelected!: boolean
+    @Prop({ default: false }) isAnswered!: boolean
+    @Prop({ default: true }) isFocusable!: boolean
+
+    @Emit('click')
+    emitClick (event: MouseEvent) {
+        return event
+    }
+
+    @Emit('keydown')
+    emitKeydown (event: KeyboardEvent) {
+        return event
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-quiz-progress-bar {
+    flex: 1;
+    background-color: rgba($white, 0.4);
+    cursor: pointer;
+    position: relative;
+    outline: none;
+
+    &:hover {
+        background-color: rgba($white, 0.7);
+    }
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        top: -6px;
+        bottom: -6px;
+        left: -3px;
+        right: -3px;
+        border: 1px solid $butterscotch;
+        border-radius: 8px;
+    }
+
+    &--small:focus::before {
+        top: -3px;
+        bottom: -3px;
+        left: -2px;
+        right: -2px;
+    }
+
+    &--answered {
+        background-color: rgba($white, 0.85);
+
+        &:hover {
+            background-color: $white;
+        }
+    }
+
+    &--selected {
+        background-color: $banana-bread;
+
+        &:hover {
+            background-color: $butterscotch;
+        }
+
+        &.uikit-quiz-progress-bar--small:focus::before {
+            top: -2px;
+            bottom: -2px;
+        }
+    }
+}
+</style>

package/lib/components/Search/Pill.md

@@ -0,0 +1,37 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <Pill>Not Interactable</Pill>
+            <Pill @click="showPill1 = false" v-if="showPill1" :show-close="true">Interactable</Pill>
+        </div>
+        <div class="dark">
+            <Pill :is-dark-mode="true">Not Interactable</Pill>
+            <Pill @click="showPill2 = false" v-if="showPill2" :is-dark-mode="true" :show-close="true">Interactable</Pill>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            showPill1: true,
+            showPill2: true
+        }
+    }
+}
+</script>
+
+<style>
+.light,
+.dark {
+    display: flex;
+    padding: 15px;
+}
+
+.dark {
+    background: #1f3545;
+}
+</style>
+```

package/lib/components/Search/Pill.vue

@@ -0,0 +1,117 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-pill"
+        :class="{ 'uikit-pill--show-close': showClose }"
+        :tabindex="showClose ? 0 : -1"
+        @click="showClose && emitClick()"
+        @keydown.enter="showClose && emitClick()"
+        @mousedown.prevent
+    >
+        <div class="uikit-pill__label">
+            <slot />
+        </div>
+        <Icon v-if="showClose" type="close" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+@Component({
+    components: {
+        Icon,
+    },
+    directives: {
+        dark,
+    },
+})
+export default class Pill extends Vue {
+    @Prop({ default: false }) showClose!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    @Emit('click')
+    emitClick () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-pill {
+    background: $brand-black;
+    border-radius: 4px;
+    height: 22px;
+    line-height: 22px;
+    padding: 0 6px;
+    font-size: 13px;
+    color: $white;
+    display: inline-block;
+    position: relative;
+    user-select: none;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    outline: none;
+    vertical-align: middle;
+    cursor: default;
+
+    &--show-close {
+        padding-right: 24px;
+        cursor: pointer;
+
+        &:focus::before {
+            content: '';
+            position: absolute;
+            left: -2px;
+            top: -2px;
+            border: 1px solid $brand-blue;
+            border-radius: 6px;
+            width: calc(100% + 2px);
+            height: calc(100% + 2px);
+        }
+
+        &:hover {
+            background: $pickled-bluewood;
+
+            svg {
+                color: $banana-bread;
+            }
+        }
+
+        &--dark {
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+
+            &:hover {
+                background: $jet;
+            }
+        }
+    }
+
+    &--dark {
+        background: $charcoal;
+    }
+
+    &__label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        display: inline-block;
+        max-width: 180px;
+    }
+
+    svg {
+        width: 13px;
+        height: 13px;
+        position: absolute;
+        top: 4.5px;
+        right: 4.5px;
+    }
+}
+</style>

package/lib/components/Search/Search.md

@@ -0,0 +1,44 @@
+```vue
+<template>
+    <div>
+        <div class="search" :class="{ dark: isDarkMode }">
+            <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+            <Search :isDarkMode="isDarkMode" v-model="searchVal1" placeholder="Search with gray background" />
+            <Search :isDarkMode="isDarkMode" v-model="searchVal2" type="white" placeholder="Search with white background" />
+            <Search :isDarkMode="isDarkMode" v-model="searchVal2" type="white" placeholder="Disabled search" :disabled="true" />
+            <Search :isDarkMode="isDarkMode" searchResultInfo="15 Results" v-model="searchVal3" type="white" placeholder="Search with white background and result info" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchVal1: null,
+            searchVal2: null,
+            searchVal3: null,
+            isDarkMode: false,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.search {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.uikit-btn {
+    margin-bottom: 30px;
+}
+
+.uikit-search {
+    margin-bottom: 15px;
+}
+</style>
+```