@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Quiz/FlagToggle.vue

@@ -0,0 +1,124 @@
+<template>
+    <div
+        class="uikit-flag-toggle"
+        tabindex="0"
+        :aria-checked="isFlagged"
+        aria-label="Flag question"
+        role="checkbox"
+        @mouseover="showFlagTooltip = true"
+        @mouseleave="showFlagTooltip = false"
+        @click="toggleFlag"
+        @keydown.enter.stop.prevent="toggleFlag"
+        @mousedown.prevent
+        @focus="showFlagTooltip = true"
+        @blur="showFlagTooltip = false"
+    >
+        <Tooltip
+            v-if="showFlagTooltip && enableFlagTooltip"
+            :key="isFlagged"
+            class="uikit-flag-toggle__tooltip"
+            :styles="{
+                backgroundColor: brandColors.grayDivider,
+                color: brandColors.brandBlack,
+            }"
+        >
+            {{ isFlagged ? 'Unflag' : 'Flag' }}
+        </Tooltip>
+        <Icon
+            class="uikit-flag-toggle__icon"
+            :class="{
+                'uikit-flag-toggle__icon--active': isFlagged,
+            }"
+            :type="isFlagged ? 'flag-filled' : 'flag'"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import Tooltip from '../Tooltips/Tooltip.vue'
+import Icon from '../Icons/Icon.vue'
+import BrandColors from '../../pocketprep-export.module.scss'
+
+@Component({
+    components: {
+        Tooltip,
+        Icon,
+    },
+})
+export default class FlagToggle extends Vue {
+    @Prop() isFlagged!: boolean
+    @Prop({ default: false }) enableFlagKeyboardShortcut!: boolean
+    @Prop({ default: true }) enableFlagTooltip!: boolean
+
+    brandColors = BrandColors
+    showFlagTooltip = false
+
+    mounted () {
+        if (this.enableFlagKeyboardShortcut) {
+            window.addEventListener('keydown', this.keydownListener)
+        }
+    }
+
+    beforeUnmount () {
+        window.removeEventListener('keydown', this.keydownListener)
+    }
+
+    keydownListener (e: KeyboardEvent) {
+        if (e.code === 'KeyP') {
+            this.emitToggleFlag(!this.isFlagged)
+        }
+    }
+
+    toggleFlag () {
+        this.emitToggleFlag(!this.isFlagged)
+    }
+
+    @Emit('toggleFlag')
+    emitToggleFlag (isFlagged: boolean) {
+        return isFlagged
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-flag-toggle {
+    position: relative;
+    outline: none;
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        border: 1px solid $butterscotch;
+        width: 32px;
+        height: 32px;
+        top: 8px;
+        left: 8px;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    @media (hover: hover) {
+        &__icon:hover {
+            color: $banana-bread;
+        }
+    }
+
+    &__icon {
+        cursor: pointer;
+
+        &--active {
+            color: $banana-bread;
+        }
+    }
+
+    &__tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(-100% + 24px);
+    }
+}
+</style>

package/lib/components/Quiz/GlobalMetricsToggle.md

@@ -0,0 +1,46 @@
+```vue
+<template>
+    <div>
+        <div class="docs-global-metrics-toggle">
+            <GlobalMetricsToggle
+                :showGlobalMetrics="showGlobalMetrics"
+                @toggleGlobalMetrics="toggleGlobalMetrics"
+            />
+        </div>
+        <div class="docs-global-metrics-toggle">
+            <GlobalMetricsToggle
+                :disabled="true"
+                :showGlobalMetrics="showGlobalMetrics"
+                @toggleGlobalMetrics="toggleGlobalMetrics"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            showGlobalMetrics: false,
+        }
+    },
+    methods: {
+        toggleGlobalMetrics (newVal) {
+            this.showGlobalMetrics = newVal
+        },
+    },
+}
+</script>
+
+<style>
+.docs-global-metrics-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    background-color: #1f3545;
+    color: white;
+}
+</style>
+```

package/lib/components/Quiz/GlobalMetricsToggle.vue

@@ -0,0 +1,124 @@
+<template>
+    <div
+        class="uikit-global-metrics-toggle"
+        :tabindex="!disabled ? 0 : -1"
+        role="checkbox"
+        :aria-disabled="disabled"
+        :aria-checked="showGlobalMetrics ? 'true' : 'false'"
+        aria-label="Show Community Stats"
+        @mouseover="showGlobalMetricsToolTip = true"
+        @mouseleave="showGlobalMetricsToolTip = false"
+        @click="!disabled && toggleGlobalMetrics()"
+        @keydown.enter.stop.prevent="!disabled && toggleGlobalMetrics()"
+        @mousedown.prevent
+        @focus="showGlobalMetricsToolTip = true"
+        @blur="showGlobalMetricsToolTip = false"
+    >
+        <Tooltip
+            v-if="!disabled && showGlobalMetricsToolTip"
+            :key="showGlobalMetrics"
+            :theme="tooltipTheme"
+            :styles="{
+                backgroundColor: brandColors.grayDivider,
+                color: brandColors.brandBlack,
+                ...customTooltipStyles,
+            }"
+            :is-dark-mode="isDarkMode"
+        >
+            Community Stats
+        </Tooltip>
+        <Icon
+            class="uikit-global-metrics-toggle__icon"
+            :class="{
+                'uikit-global-metrics-toggle__icon--active': showGlobalMetrics,
+                'uikit-global-metrics-toggle__icon--enabled': !disabled,
+            }"
+            type="people"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import Tooltip from '../Tooltips/Tooltip.vue'
+import Icon from '../Icons/Icon.vue'
+import BrandColors from '../../pocketprep-export.module.scss'
+
+@Component({
+    components: {
+        Tooltip,
+        Icon,
+    },
+})
+export default class GlobalMetricsToggle extends Vue {
+    @Prop() showGlobalMetrics!: boolean
+    @Prop({ default: false }) disabled!: boolean
+    @Prop() customTooltipStyles!: { [key: string]: unknown }
+    @Prop() tooltipTheme!: 'leftalign' | 'rightalign'
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    brandColors = BrandColors
+    showGlobalMetricsToolTip = false
+
+    toggleGlobalMetrics () {
+        this.emitToggleGlobalMetrics(!this.showGlobalMetrics)
+    }
+
+    @Emit('toggleGlobalMetrics')
+    emitToggleGlobalMetrics (showGlobalMetrics: boolean) {
+        return showGlobalMetrics
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-global-metrics-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    outline: none;
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        border: 1px solid $butterscotch;
+        width: 40px;
+        height: 40px;
+        top: -9px;
+        left: 0;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    @media (hover: hover) {
+        &__icon--enabled:hover {
+            color: $banana-bread;
+        }
+    }
+
+    .uikit-tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(-100% - 14px);
+    }
+
+    &__icon {
+        width: 40px;
+        height: 24px;
+        opacity: 0.35;
+
+        &--enabled {
+            opacity: 1;
+            cursor: pointer;
+        }
+
+        &--active {
+            color: $banana-bread;
+        }
+    }
+}
+</style>

package/lib/components/Quiz/KeyboardShortcutsButton.md

@@ -0,0 +1,18 @@
+```vue
+<template>
+    <div class="docs-keyboard-shortcuts-btn">
+        <KeyboardShortcutsButton />
+    </div>
+</template>
+<style>
+.docs-keyboard-shortcuts-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    background-color: #1f3545;
+    color: white;
+}
+</style>
+```

package/lib/components/Quiz/KeyboardShortcutsButton.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <slot
+            name="keyboardShortcutsModal"
+            :show-keyboard-shortcuts-modal="showKeyboardShortcutsModal"
+            :close-modal-func="() => showKeyboardShortcutsModal = false"
+        />
+        <div
+            class="uikit-keyboard-shortcuts-btn"
+            tabindex="0"
+            aria-label="Show Keyboard Shortcuts Modal"
+            @mouseenter="showKeyboardTooltip = true"
+            @mouseleave="showKeyboardTooltip = false"
+            @click="showKeyboardShortcutsModal = !showKeyboardShortcutsModal"
+            @keydown.enter.stop.prevent="showKeyboardShortcutsModal = !showKeyboardShortcutsModal"
+            @mousedown.prevent
+            @focus="showKeyboardTooltip = true"
+            @blur="showKeyboardTooltip = false"
+        >
+            <Tooltip
+                v-if="showKeyboardTooltip"
+                :theme="tooltipTheme"
+                :styles="{
+                    backgroundColor: brandColors.grayDivider,
+                    color: brandColors.brandBlack,
+                }"
+            >
+                Keyboard Shortcuts
+            </Tooltip>
+            <Icon
+                class="uikit-keyboard-shortcuts-btn__icon"
+                type="keyboard"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-facing-decorator'
+import KeyboardShortcutsModal from '../Quiz/KeyboardShortcutsModal.vue'
+import Tooltip from '../Tooltips/Tooltip.vue'
+import Icon from '../Icons/Icon.vue'
+import BrandColors from '../../pocketprep-export.module.scss'
+
+@Component({
+    components: {
+        KeyboardShortcutsModal,
+        Tooltip,
+        Icon,
+    },
+})
+export default class KeyboardShortcutsButton extends Vue {
+    @Prop() tooltipTheme!: 'leftalign' | 'rightalign'
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    brandColors = BrandColors
+    showKeyboardTooltip = false
+    showKeyboardShortcutsModal = false
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-keyboard-shortcuts-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 40px;
+    outline: none;
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        border: 1px solid $butterscotch;
+        width: 48px;
+        height: 32px;
+        top: -4px;
+        left: -4px;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $banana-bread;
+        }
+    }
+
+    .uikit-tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(-100% - 14px);
+    }
+
+    &__icon {
+        cursor: pointer;
+        width: 40px;
+        height: 24px;
+    }
+}
+</style>

package/lib/components/Quiz/KeyboardShortcutsModal.md

@@ -0,0 +1,71 @@
+```vue
+<template>
+    <div class="docs-keyboard-shortcuts-modal">
+        <Button 
+            @click="showQuizKeyboardShortcutsModal = true; 
+            showReviewKeyboardShortcutsModal = false; 
+            showTeachKeyboardShortcutsModal = false"
+        >
+            Show Quiz Mode Keyboard Shortcuts
+        </Button>
+        <Button 
+            @click="showQuizKeyboardShortcutsModal = false; 
+            showTeachKeyboardShortcutsModal = false; 
+            showReviewKeyboardShortcutsModal = true"
+        >
+            Show Review Mode Keyboard Shortcuts
+        </Button>
+        <Button 
+            @click="showQuizKeyboardShortcutsModal = false; 
+            showReviewKeyboardShortcutsModal = false; 
+            showTeachKeyboardShortcutsModal = true"
+        >
+            Show Teach Mode Keyboard Shortcuts
+        </Button>
+        <Button @click="isDarkMode = !isDarkMode">
+            {{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode
+        </Button>
+        <KeyboardShortcutsModal
+            v-if="showQuizKeyboardShortcutsModal"
+            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
+            :allowKeyboardShortcuts="allowKeyboardShortcuts"
+            @close="showQuizKeyboardShortcutsModal = false"
+            :isDarkMode="isDarkMode"
+        />
+        <KeyboardShortcutsModal
+            v-if="showReviewKeyboardShortcutsModal"
+            keyboardMode="review"
+            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
+            :allowKeyboardShortcuts="allowKeyboardShortcuts"
+            @close="showReviewKeyboardShortcutsModal = false"
+            :isDarkMode="isDarkMode"
+        />
+        <KeyboardShortcutsModal
+            v-if="showTeachKeyboardShortcutsModal"
+            keyboardMode="teach"
+            @toggleKeyboardShortcuts="toggleKeyboardShortcuts"
+            :allowKeyboardShortcuts="allowKeyboardShortcuts"
+            @close="showTeachKeyboardShortcutsModal = false"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            showQuizKeyboardShortcutsModal: false,
+            showReviewKeyboardShortcutsModal: false,
+            showTeachKeyboardShortcutsModal: false,
+            allowKeyboardShortcuts: false,
+            isDarkMode: false
+        }
+    },
+    methods: {
+        toggleKeyboardShortcuts (newVal) {
+            this.allowKeyboardShortcuts = newVal
+        }
+    }
+}
+</script>
+```