@pocketprep/ui-kit 2.0.40 → 3.0.1

package/lib/components/Quiz/QuizContainer.md

@@ -0,0 +1,91 @@
+```vue
+<template>
+    <div class="docs-quiz-container__container">
+        <SVGDefinitions />
+        <div class="docs-quiz-container__actions">
+            <Button type="secondary" @click="width = 'mobile'">
+                Mobile
+            </Button>
+            <Button type="secondary" @click="width = 'tablet-portrait'">
+                Tablet Portrait
+            </Button>
+            <Button type="secondary" @click="width = 'tablet-landscape'">
+                Tablet Landscape
+            </Button>
+            <Button type="secondary" @click="width = 'desktop'">
+                Desktop
+            </Button>
+            <Button type="secondary" @click="width = 'desktop-large'">
+                Desktop Large
+            </Button>
+            <div class="docs-quiz-container__side-toggle">
+                <ToggleSwitch
+                    v-model="showSide"
+                />
+                Show Side Bar
+            </div>
+        </div>
+        <div
+            class="docs-quiz-container"
+            :class="{
+                'docs-quiz-container--mobile': width === 'mobile',
+                'docs-quiz-container--tablet-portrait': width === 'tablet-portrait',
+                'docs-quiz-container--tablet-landscape': width === 'tablet-landscape',
+                'docs-quiz-container--desktop': width === 'desktop',
+                'docs-quiz-container--desktop-large': width === 'desktop-large',
+            }"
+        >
+            <QuizContainer :show-side="showSide" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            width: 'desktop',
+            showSide: false,
+        }
+    }
+}
+</script>
+
+<style>
+.docs-quiz-container__actions {
+    display: flex;
+}
+
+.docs-quiz-container__side-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 154px;
+}
+
+.docs-quiz-container--mobile {
+    width: 375px;
+    height: 667px;
+}
+
+.docs-quiz-container--tablet-portrait {
+    width: 768px;
+    height: 1024px;
+}
+
+.docs-quiz-container--tablet-landscape {
+    width: 1024px;
+    height: 768px;
+}
+
+.docs-quiz-container--desktop {
+    width: 1440px;
+    height: 938px;
+}
+
+.docs-quiz-container--desktop-large {
+    width: 1920px;
+    height: 938px;
+}
+</style>
+```

package/lib/components/Quiz/QuizContainer.vue

@@ -0,0 +1,207 @@
+<template>
+    <div
+        ref="quiz-container"
+        v-breakpoint
+        v-dark="isDarkMode"
+        class="uikit-quiz-container"
+    >
+        <div
+            v-breakpoint:quizContainerEl
+            class="uikit-quiz-container__header"
+            :style="customHeaderStyles"
+        >
+            <slot name="header" />
+        </div>
+        <div class="uikit-quiz-container__main" :style="customMainStyles">
+            <div
+                v-if="showSide"
+                v-breakpoint:quizContainerEl
+                v-dark="isDarkMode"
+                class="uikit-quiz-container__side"
+            >
+                <slot name="side" />
+            </div>
+            <div
+                v-breakpoint:quizContainerEl
+                class="uikit-quiz-container__question"
+                :class="{
+                    'uikit-quiz-container__question--show-side': showSide,
+                    'uikit-quiz-container__question--dark': isDarkMode
+                }"
+            >
+                <slot name="question" />
+            </div>
+        </div>
+        <div
+            v-breakpoint:quizContainerEl
+            class="uikit-quiz-container__footer"
+            :style="customFooterStyles"
+        >
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { breakpoint, dark } from '../../directives'
+import { Component, Prop, Vue } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+
+@Component({
+    directives: {
+        breakpoint,
+        dark,
+    },
+    components: {
+        Icon,
+    },
+})
+export default class QuizContainer extends Vue {
+    @Prop({ default: false }) showSide!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: () => ({}) }) customHeaderStyles!: Record<string, string>
+    @Prop({ default: () => ({}) }) customMainStyles!: Record<string, string>
+    @Prop({ default: () => ({}) }) customFooterStyles!: Record<string, string>
+
+    get quizContainerEl () {
+        return this.$refs['quiz-container']
+    }
+
+    beforeUnmount () {
+        const bodyEl = document.getElementsByTagName('body')[0]
+        if (bodyEl) {
+            bodyEl.style.overflow = ''
+        }
+    }
+
+    mounted () {
+        const bodyEl = document.getElementsByTagName('body')[0]
+        if (bodyEl) {
+            bodyEl.style.overflow = 'hidden'
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-quiz-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: $brand-black;
+    padding: 0 65px;
+
+    &--desktop {
+        padding: 0 22px 0 23px;
+    }
+
+    &--tablet-portrait {
+        padding: 0 19px;
+    }
+
+    &--mobile {
+        padding: 0;
+    }
+
+    &--dark {
+        background-color: $jet;
+        color: $gray-background;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 65px;
+        color: $white;
+        position: relative;
+
+        &--mobile {
+            height: 45px;
+            padding: 0 10px;
+            box-sizing: border-box;
+        }
+    }
+
+    &__main {
+        display: flex;
+        width: 100%;
+        height: calc(100% - 130px);
+
+        &--mobile {
+            height: calc(100% - 99px);
+        }
+    }
+
+    &__side {
+        background-color: $black-feather;
+        color: $white;
+        width: 242px;
+        height: 100%;
+        margin-right: 23px;
+        border-radius: 6px;
+        z-index: 2;
+
+        &--dark {
+            background-color: $mariner;
+        }
+
+        &--tablet-landscape {
+            width: 220px;
+            margin-right: -6px;
+        }
+
+        &--tablet-portrait {
+            width: 242px;
+        }
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__question {
+        position: relative;
+        background-color: $gray-background;
+        border-radius: 6px;
+        box-shadow: 0 -2px 8px 0 rgba($brand-black, 0.15);
+        flex: 1;
+        height: 100%;
+
+        &--show-side#{&}--tablet-landscape {
+            border-radius: 0 6px 6px 0;
+            padding-left: 6px;
+        }
+
+        &--show-side#{&}--mobile {
+            border-radius: 6px;
+            padding-left: 0;
+        }
+
+        &--mobile {
+            border-radius: 12px;
+        }
+
+        &--dark {
+            background-color: $charcoal;
+        }
+    }
+
+    &__footer {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 65px;
+        color: $white;
+
+        &--mobile {
+            height: 54px;
+        }
+    }
+}
+</style>

package/lib/components/Quiz/QuizProgress.md

@@ -0,0 +1,122 @@
+```vue
+<template>
+    <div>
+        <div class="docs-quiz-progress__checkbox-controls">
+            <div class="docs-quiz-progress__checkbox">
+                <Checkbox v-model="forceSlider" />
+                Force Slider
+            </div>
+        </div>
+        <div class="docs-quiz-progress__slider-controls">
+            <div class="docs-quiz-progress__slider">
+                Container Width
+                <Slider class="docs-quiz-progress__slider-input" v-model="containerWidth" min="280" max="768" />
+            </div>
+            <div class="docs-quiz-progress__slider">
+                Selected
+                <Slider class="docs-quiz-progress__slider-input" v-model="selectedIndex" :max="numQuestions" />
+            </div>
+            <div class="docs-quiz-progress__slider">
+                Total
+                <Slider class="docs-quiz-progress__slider-input" v-model="numQuestions" min="1" max="200" />
+            </div>
+        </div>
+        <div class="docs-quiz-progress__container" :style="{
+            width: `${containerWidth}px`
+        }">
+            <div class="docs-quiz-progress__context">
+                <div>Container Width: {{ containerWidth }}</div>
+                <div>Answered: {{ answeredIndexList }}</div>
+                <div>Selected: {{ selectedIndex }}</div>
+                <div>Total: {{ numQuestions }}</div>
+            </div>
+            <QuizProgress
+                :num-questions="numQuestions"
+                :answered-index-list="answeredIndexList"
+                :selected-index="selectedIndex"
+                :force-slider="forceSlider"
+                @barClicked="barClicked"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            numQuestions: 100,
+            answeredIndexList: [],
+            selectedIndex: 0,
+            containerWidth: 768,
+            forceSlider: false,
+        }
+    },
+    watch: {
+        numQuestions (newVal) {
+            this.answeredIndexList = []
+            if (this.selectedIndex > newVal) {
+                this.selectedIndex = newVal
+            }
+        }
+    },
+    methods: {
+        barClicked(index) {
+            this.answeredIndexList.push(index)
+            this.selectedIndex = index
+        }
+    },
+}
+</script>
+
+<style>
+.docs-quiz-progress__checkbox-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.docs-quiz-progress__slider-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.docs-quiz-progress__checkbox {
+    display: flex;
+    align-items: center;
+}
+
+.docs-quiz-progress__checkbox .uikit-checkbox {
+    margin-right: 10px;
+}
+
+.docs-quiz-progress__slider {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 380px;
+    margin: 5px;
+}
+
+.docs-quiz-progress__slider-input {
+    width: 300px;
+}
+
+.docs-quiz-progress__container {
+    background-color: #1f3545;
+    height: 240px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.docs-quiz-progress__context {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    color: white;
+}
+</style>
+```

package/lib/components/Quiz/QuizProgress.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="uikit-quiz-progress">
+        <QuizProgressBar
+            v-for="n in numQuestions"
+            :key="`${n}_${barWidthString}`"
+            :is-answered="answeredIndexList.includes(n)"
+            :is-selected="Number(n) === Number(selectedIndex)"
+            :is-focusable="!isSlider || Number(n) === Number(selectedIndex)"
+            :style="{
+                minWidth: barWidthString,
+                maxWidth: barWidthString,
+                margin: `0 ${barMargin}px`
+            }"
+            class="uikit-quiz-progress__bar"
+            :class="{
+                'uikit-quiz-progress__bar--under50': !isSlider && numQuestions < 50,
+                'uikit-quiz-progress__bar--over49': !isSlider && numQuestions >= 50,
+                'uikit-quiz-progress__bar--slider': isSlider,
+                'uikit-quiz-progress__bar--selected': Number(n) === Number(selectedIndex),
+            }"
+            :aria-label="`${
+                Number(n) === Number(selectedIndex)
+                    ? 'Current '
+                    : ''
+            }Question ${n}, ${
+                answeredIndexList.includes(n)
+                    ? 'answered'
+                    : 'unanswered'
+            }`"
+            @click="emitBarClicked(n)"
+            @keydown.enter="emitBarClicked(n)"
+            @keydown.left="clickAndFocus(n - 1)"
+            @keydown.right="clickAndFocus(n + 1)"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import QuizProgressBar from '../Quiz/QuizProgressBar.vue'
+import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
+
+@Component({
+    components: {
+        QuizProgressBar,
+    },
+})
+export default class QuizProgress extends Vue {
+    @Prop() answeredIndexList!: number[]
+    @Prop() selectedIndex!: number
+    @Prop() numQuestions!: number
+    @Prop({ default: false }) forceSlider!: boolean
+
+    containerWidth = 0
+    mutationObserver: ResizeObserver | null = null
+
+    get isSlider () {
+        return this.forceSlider || this.numQuestions > 100
+    }
+
+    get barMaxMargin () {
+        return this.numQuestions > 100 || this.forceSlider
+            ? 0 // No margin for >100 questions or slider mode
+            : this.numQuestions < 50
+                ? 2
+                : 2.5
+    }
+
+    get barWidth () {
+        const numGaps = this.numQuestions - 1
+        const totalMarginWidth = numGaps * this.barMaxMargin * 2
+        const availableWidth = this.containerWidth - totalMarginWidth
+        const barWidth = (this.forceSlider || this.numQuestions > 100)
+            ? availableWidth / this.numQuestions
+            : Math.floor(Math.max(availableWidth / this.numQuestions, 1))
+        return barWidth
+    }
+
+    get barMargin () {
+        const maxMargin = ((this.containerWidth - (this.barWidth * this.numQuestions)) / (this.numQuestions - 1)) / 2
+
+        return Math.max(
+            Math.min(this.barMaxMargin, Math.floor(maxMargin)),
+            0
+        )
+    }
+
+    get barWidthString () {
+        return `${this.barWidth}px`
+    }
+
+    get barMarginString () {
+        return `${this.barMargin}px`
+    }
+
+    mounted () {
+        this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+        const el = document.querySelector('.uikit-quiz-progress') as Element
+        const resizeMutationObserver = window.ResizeObserver
+            ? new ResizeObserver(() => {
+                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+            })
+            : new ResizeObserverPonyFill(() => {
+                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+            })
+        this.mutationObserver = resizeMutationObserver
+        this.mutationObserver.observe(el)
+    }
+
+    beforeUnmount () {
+        this.mutationObserver?.disconnect()
+    }
+
+    clickAndFocus (index: number) {
+        const bars = document.querySelectorAll('.uikit-quiz-progress__bar')
+        const bar = bars[index - 1] as HTMLElement
+        if (bar) {
+            this.emitBarClicked(index)
+            setTimeout(() => {
+                this.$nextTick(() => {
+                    bar.focus()
+                })
+            }, 50)
+        }
+    }
+
+    @Emit('barClicked')
+    emitBarClicked (index: number) {
+        return index
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+
+.uikit-quiz-progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+
+    &__bar {
+        height: 4px;
+
+        &--over49 {
+            height: 10px;
+
+            @include breakpoint(brown-bear) {
+                margin: 0 1px !important;
+            }
+        }
+
+        &--slider {
+            height: 4px;
+
+            &:first-child {
+                border-radius: 5px 0 0 5px;
+            }
+
+            &:last-child {
+                border-radius: 0 5px 5px 0;
+            }
+
+            @include breakpoint(brown-bear) {
+                margin: 0 0 !important;
+            }
+        }
+
+        &--selected.uikit-quiz-progress__bar--over49 {
+            height: 16px;
+        }
+
+        &--selected.uikit-quiz-progress__bar--slider {
+            height: 14px;
+            border-radius: 4px;
+        }
+
+        &:last-child {
+            margin-right: 0 !important;
+        }
+
+        &:first-child {
+            margin-left: 0 !important;
+        }
+    }
+}
+</style>