@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Quiz/KeyboardShortcutsModal.vue

@@ -0,0 +1,261 @@
+<template>
+    <ModalContainer
+        :show-close-button="true"
+        :custom-close-styles="{ right: '26px', top: '28px' }"
+        :is-dark-mode="isDarkMode"
+        @close="emitClose"
+    >
+        <div v-dark="isDarkMode" class="uikit-keyboard-modal">
+            <h1
+                ref="uikit-keyboard-modal__title"
+                v-dark="isDarkMode"
+                class="uikit-keyboard-modal__title"
+                tabindex="-1"
+            >
+                Keyboard Shortcuts
+            </h1>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div v-if="keyboardMode === 'quiz'">
+                    Quit Quiz
+                </div>
+                <div v-if="keyboardMode === 'review'">
+                    Back to Review
+                </div>
+                <div v-if="keyboardMode === 'teach'">
+                    Back
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    Esc
+                </div>
+            </div>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div>
+                    Navigate through clickable items
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    Tab
+                </div>
+            </div>
+            <div
+                v-if="keyboardMode === 'quiz'"
+                v-dark="isDarkMode"
+                class="uikit-keyboard-modal__item"
+            >
+                <div>
+                    Open/Close Explanation
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    X
+                </div>
+            </div>
+            <div
+                v-if="keyboardMode === 'quiz'"
+                v-dark="isDarkMode"
+                class="uikit-keyboard-modal__item"
+            >
+                <div>
+                    Select Answer Choice
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    A - J
+                </div>
+            </div>
+            <div
+                v-if="keyboardMode === 'quiz'"
+                v-dark="isDarkMode"
+                class="uikit-keyboard-modal__item"
+            >
+                <div>
+                    Submit Selected Element
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    Return/Enter
+                </div>
+            </div>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div>
+                    Previous Question
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    ←
+                </div>
+            </div>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div>
+                    Next Question
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    →
+                </div>
+            </div>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div>
+                    Scroll View Up
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    ↑
+                </div>
+            </div>
+            <div v-dark="isDarkMode" class="uikit-keyboard-modal__item">
+                <div>
+                    Scroll View Down
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    ↓
+                </div>
+            </div>
+            <div 
+                v-if="keyboardMode !== 'teach'" 
+                v-dark="isDarkMode" 
+                class="uikit-keyboard-modal__item"
+            >
+                <div>
+                    Flag
+                </div>
+                <div v-dark="isDarkMode" class="uikit-keyboard-modal__key">
+                    P
+                </div>
+            </div>
+            <div class="uikit-keyboard-modal__toggle">
+                <ToggleSwitch
+                    :modelValue="allowKeyboardShortcuts"
+                    :is-dark-mode="isDarkMode"
+                    aria-label="Keyboard shortcuts"
+                    @update:modelValue="toggleKeyboardShortcuts"
+                />
+                <div
+                    v-dark="isDarkMode"
+                    class="uikit-keyboard-modal__toggle-label"
+                >
+                    Keyboard shortcuts
+                </div>
+            </div>
+        </div>
+    </ModalContainer>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import ModalContainer from '../Modal/ModalContainer.vue'
+import ToggleSwitch from '../Controls/ToggleSwitch.vue'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        ModalContainer,
+        ToggleSwitch,
+    },
+})
+export default class KeyboardShortcutsModal extends Vue {
+    @Prop() allowKeyboardShortcuts!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: 'quiz' }) keyboardMode!: 'quiz' | 'review' | 'teach'
+
+    mounted () {
+        setTimeout(() => {
+            const titleEl = this.$refs['uikit-keyboard-modal__title'] as HTMLElement | undefined
+            titleEl?.focus()
+        }, 0)
+    }
+
+    toggleKeyboardShortcuts (newVal: boolean) {
+        if (newVal !== this.allowKeyboardShortcuts) {
+            this.emitToggleKeyboardShortcuts(newVal)
+        }
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+
+    @Emit('toggleKeyboardShortcuts')
+    emitToggleKeyboardShortcuts (allowKeyboardShortcuts: boolean) {
+        return allowKeyboardShortcuts
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-keyboard-modal {
+    box-sizing: border-box;
+    width: 400px;
+    background-color: $white;
+    padding: 30px 21px 30px 22px;
+    color: $brand-black;
+
+    &--dark {
+        background-color: $moonlit-ocean;
+        color: $white;
+        box-shadow: 0 1px 6px 0 rgba($charcoal, 0.3);
+    }
+
+    &__title {
+        font-size: 22px;
+        font-weight: 600;
+        line-height: 26px;
+        padding-left: 8px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid $gray-divider;
+        margin: 0;
+        outline: none;
+
+        &--dark {
+            border-bottom-color: $slate;
+        }
+    }
+
+    &__item {
+        box-sizing: border-box;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid $gray-divider;
+        padding: 0 8px;
+        font-size: 15px;
+        line-height: 21px;
+        color: rgba($brand-black, 0.9);
+
+        &--dark {
+            color: $fog;
+            border-bottom-color: $slate;
+        }
+    }
+
+    &__key {
+        padding: 3px 6px;
+        background-color: $gray-divider;
+        border-radius: 4px;
+        line-height: 15px;
+
+        &--dark {
+            color: $fog;
+            background-color: $charcoal;
+        }
+    }
+
+    &__toggle {
+        display: flex;
+        align-items: center;
+        margin-top: 23px;
+        margin-left: 6px;
+    }
+
+    &__toggle-label {
+        margin-left: 12px;
+        font-size: 15px;
+        line-height: 18px;
+
+        &--dark {
+            color: $white;
+        }
+    }
+}
+</style>