@pocketprep/ui-kit 3.4.1 → 3.4.3

package/lib/components/Quiz/Question/PassageAndImageDropdown.vue

@@ -0,0 +1,351 @@
+<template>
+    <div
+        v-if="question.passage || passageImageUrl"
+        ref="uikit-question-passage-and-image-dropdown"
+        v-breakpoint:questionEl="breakpoints"
+        v-dark="isDarkMode"
+        class="uikit-question-passage-and-image-dropdown"
+        :class="{ 'uikit-question-passage-and-image-dropdown__passage-and-image-dropdown--review-mode': reviewMode }"
+    >
+        <div
+            v-dark="isDarkMode"
+            class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-btn"
+            tabindex="0"
+            role="button"
+            :aria-expanded="showPassageImageDropdown ? 'true' : 'false'"
+            @click.stop="showPassageImageDropdown = !showPassageImageDropdown"
+            @keydown.enter.stop="showPassageImageDropdown = !showPassageImageDropdown"
+            @mousedown.prevent
+        >
+            <Icon
+                v-if="question.passage"
+                class="uikit-question-passage-and-image-dropdown__passage-dropdown-icon"
+                type="passage"
+            />
+            <Icon
+                v-else
+                class="uikit-question-passage-and-image-dropdown__image-dropdown-icon"
+                type="image"
+            />
+            <span 
+                v-dark="isDarkMode" 
+                class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text"
+            >
+                {{ showPassageImageDropdown ? 'Hide' : 'Show' }}
+                {{ passageAndImageTitle }}
+            </span>
+            <Icon
+                v-dark="isDarkMode"
+                class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow"
+                :class="{
+                    'uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow--up': 
+                        showPassageImageDropdown,
+                }"
+                type="accordionArrow"
+            />
+        </div>
+        <div
+            v-if="showPassageImageDropdown"
+            v-breakpoint:questionEl="breakpoints"
+            class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-container"
+        >
+            <div
+                v-if="question.passage"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question-passage-and-image-dropdown__passage-dropdown-passage"
+                :class="{
+                    'uikit-question-passage-and-image-dropdown__passage-dropdown-passage--with-image': passageImageUrl,
+                }"
+                v-html="question.passage"
+            />
+            <img
+                v-if="passageImageUrl"
+                v-dark="isDarkMode"
+                class="uikit-question-passage-and-image-dropdown__image-dropdown-image"
+                :class="{
+                    'uikit-question-passage-and-image-dropdown__image-dropdown-image--with-passage': question.passage,
+                }"
+                :src="passageImageUrl"
+                :alt="`${passageImageAlt}. Extended image description below.`"
+            >
+            <PocketButton
+                v-if="passageImageLongAlt"
+                v-breakpoint:questionEl="breakpoints"
+                type="tertiary-small"
+                class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description"
+                :class="{
+                    'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description--open': 
+                        showPassageImageLongAlt,
+                }"
+                :is-dark-mode="isDarkMode"
+                :aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
+                @click="emitTogglePassageImageLongAlt"
+                @mousedown.prevent
+            >
+                <span 
+                    class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-text"
+                >
+                    Image Description
+                </span>
+                <Icon
+                    class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-icon"
+                    :class="{
+                        'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-icon--up': 
+                            showPassageImageLongAlt,
+                    }"
+                    type="accordionArrow"
+                />
+            </PocketButton>
+            <div
+                v-if="showPassageImageLongAlt"
+                ref="uikit-question-passage-and-image-dropdown__img-dropdown-img-description"
+                v-breakpoint:questionEl="breakpoints"
+                v-dark="isDarkMode"
+                class="uikit-question-passage-and-image-dropdown__img-dropdown-img-description"
+                tabindex="-1"
+                v-html="passageImageLongAlt"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import type { Study } from '@pocketprep/types'
+import Icon from '../../Icons/Icon.vue'
+import PocketButton from '../../Buttons/Button.vue'
+import { breakpoint, dark } from '../../../directives'
+import type { TQuestionPassageAndImageTitle, TBreakPointsObject } from './../question'
+
+@Component({
+    components: {
+        Icon,
+        PocketButton,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class PassageAndImageDropdown extends Vue {
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop() question!: Study.Class.QuestionJSON
+    @Prop({ default: false }) reviewMode!: boolean
+    @Prop({ default: '' }) imageUrlPrefix!: string
+    @Prop({ default: null }) passageImageUrl!: string | null
+    @Prop({ default: '' }) passageImageLongAlt!: string | undefined
+    @Prop({ default: '' }) passageImageAlt!: string | undefined
+    @Prop({ default: 'Passage' }) passageAndImageTitle!: TQuestionPassageAndImageTitle
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+    
+    showPassageImageDropdown = false
+    showPassageImageLongAlt = false
+
+    @Emit('emitTogglePassageImageLongAlt')
+    emitTogglePassageImageLongAlt () {
+        this.showPassageImageLongAlt = !this.showPassageImageLongAlt
+        return this.showPassageImageLongAlt
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-passage-and-image-dropdown {
+    &__passage-and-image-dropdown-btn {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border: 1px solid rgba($pewter, 0.85);
+        border-radius: 5px;
+        box-shadow: 0 1px 4px 0 rgba($ash, 0.3);
+        box-sizing: border-box;
+        height: 50px;
+        padding: 15px 57px 16px 48px;
+        margin: -1px;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+            .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            &::before {
+                content: '';
+                left: -2px;
+                top: -2px;
+                width: 100%;
+                height: 100%;
+                border: 2px solid $slate;
+                position: absolute;
+                border-radius: 5px;
+            }
+        }
+
+        &:focus::before {
+            content: '';
+            left: -3px;
+            top: -3px;
+            width: calc(100% + 4px);
+            height: calc(100% + 4px);
+            border: 1px solid $brand-blue;
+            position: absolute;
+            border-radius: 8px;
+        }
+
+        &--dark {
+            box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
+            border-color: $slate;
+
+            &:hover {
+                .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text {
+                    color: $butterscotch;
+                }
+
+                .uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow {
+                    color: $butterscotch;
+                }
+
+                &::before {
+                    border-color: rgba($white, 0.6);
+                }
+            }
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+    }
+
+    &__passage-dropdown-icon,
+    &__image-dropdown-icon {
+        position: absolute;
+        left: 17px;
+        width: 19px;
+    }
+
+    &__passage-and-image-dropdown-text {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
+    &__passage-and-image-dropdown-arrow {
+        position: absolute;
+        right: 20px;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__passage-and-image-dropdown-container {
+        padding: 14px 15px 16px 16px;
+
+        &--mobile {
+            padding: 12px 15px 16px 15px;
+        }
+    }
+
+    &__passage-dropdown-passage {
+        box-sizing: border-box;
+        margin: 14px 20px 24px 17px;
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 400;
+        letter-spacing: -0.1;
+
+        &--mobile {
+            line-height: 24px;
+            font-size: 16px;
+        }
+
+        &--with-image {
+            margin-bottom: 16px;
+        }
+    }
+
+    &__image-dropdown-image {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid $fog;
+
+        &--with-passage {
+            padding-top: 0;
+        }
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+    }
+
+    &__toggle-img-dropdown-img-description {
+        margin-top: 16px;
+
+        &--open {
+            margin-bottom: 8px;
+        }
+    }
+
+    &__toggle-img-dropdown-img-description-text {
+        outline: none;
+    }
+
+
+    &__toggle-img-dropdown-img-description-icon {
+        margin-left: 8px;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__img-dropdown-img-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+        letter-spacing: -0.2;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--tablet-landscape {
+            margin-bottom: 4px;
+        }
+
+        &--tablet-portrait {
+            margin-bottom: 0;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+}
+</style>

package/lib/components/Quiz/Question/QuestionContext.vue

@@ -0,0 +1,158 @@
+<template>
+    <div
+        ref="uikit-question-context"
+        v-breakpoint:questionEl="breakpoints"
+        class="uikit-question-context"
+        tabindex="-1"
+    >
+        <slot name="contextIcon">
+            <Icon
+                v-dark="isDarkMode"
+                class="uikit-question-context__icon"
+                :type="contextIconType"
+            />
+        </slot>
+        <h2
+            v-if="quizMode === 'qotd'"
+            v-dark="isDarkMode"
+            class="uikit-question-context__text"
+        >
+            Question of the Day
+        </h2>
+        <h2
+            v-else
+            v-dark="isDarkMode"
+            class="uikit-question-context__text"
+            :aria-label="`Question ${
+                questionNumber
+            }${
+                quizMode !== 'timed'
+                    ? ` of ${quizLength}`
+                    : ''
+            }${
+                showAnswers
+                    ? isCorrect
+                        ? ', Answered Correctly'
+                        : ', Answered Incorrectly'
+                    : ''
+            }`"
+            aria-live="assertive"
+        >
+            <div class="uikit-question-context__current-index" aria-hidden="true">
+                Question {{ questionNumber }}
+            </div>
+            <div
+                v-if="quizMode !== 'timed'"
+                class="uikit-question-context__quiz-length"
+                aria-hidden="true"
+            >
+                / {{ quizLength }}
+            </div>
+        </h2>
+        <div
+            class="uikit-question-context__tag"
+            v-breakpoint:questionEl="breakpoints"
+        >
+            <slot name="tag" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import Icon from '../../Icons/Icon.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TQuizMode, TContextIcon, TBreakPointsObject } from './../question'
+
+@Component({
+    components: {
+        Icon,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class QuestionContext extends Vue {
+    @Prop() quizLength!: number
+    @Prop({ default: 'quick10' }) quizMode!: TQuizMode
+    @Prop() questionNumber!: number
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) isCorrect!: boolean
+    @Prop() contextIconType!: TContextIcon 
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: false }) showAnswers!: boolean
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-context {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 28px;
+    padding-top: 60px;
+    outline: none;
+
+    &--tablet-landscape {
+        padding-top: 42px;
+    }
+
+    &--tablet-portrait {
+        padding-top: 52px;
+    }
+
+    &--mobile {
+        padding-top: 22px;
+        margin-bottom: 28px;
+    }
+
+    &__icon {
+        margin-bottom: 8px;
+        margin-left: 6px;
+        color: $ash;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__tag {
+        margin-top: 8px;
+        margin-bottom: -5px;
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__text {
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 0.2px;
+        line-height: 17px;
+        color: $ash;
+        margin: 0;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__quiz-length {
+        margin-left: 5px;
+        font-weight: 500;
+    }
+}
+</style>