@pocketprep/ui-kit 3.4.3 → 3.4.5

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

@@ -0,0 +1,253 @@
+<template>
+    <div
+        v-breakpoint:questionEl="breakpoints"
+        ref="uikit-question-dropdown-explanation"
+        class="uikit-question-dropdown-explanation__dropdown-explanation"
+        :class="{
+            'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics
+        }"
+    >
+        <div
+            v-dark="isDarkMode"
+            class="uikit-question-dropdown-explanation__dropdown-explanation-text"
+            v-html="question.explanation"
+        />
+        <img
+            v-if="explanationImageUrl"
+            v-dark="isDarkMode"
+            class="uikit-question-dropdown-explanation__dropdown-explanation-image"
+            :src="explanationImageUrl"
+            :alt="`${explanationImageAlt}. Extended image description below.`"
+        >
+        <PocketButton
+            v-if="explanationImageLongAlt"
+            v-breakpoint:questionEl="breakpoints"
+            type="tertiary-small"
+            class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description"
+            :class="{
+                'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open':
+                    showExplanationImageLongAlt,
+                'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference':
+                    !reference || hideReferences,
+            }"
+            :is-dark-mode="isDarkMode"
+            :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
+            @click="emitToggleExplanationImageLongAlt"
+            @mousedown.prevent
+        >
+            <span class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-text">
+                Image Description
+            </span>
+            <Icon
+                class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-icon"
+                :class="{
+                    'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-icon--up':
+                        showExplanationImageLongAlt,
+                }"
+                type="accordionArrow"
+            />
+        </PocketButton>
+        <div
+            v-if="showExplanationImageLongAlt"
+            ref="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
+            v-dark="isDarkMode"
+            v-breakpoint:questionEl="breakpoints"
+            class="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
+            tabindex="-1"
+            v-html="explanationImageLongAlt"
+        />
+        <div
+            v-if="reference && !hideReferences"
+            v-dark="isDarkMode"
+            class="uikit-question-dropdown-explanation__dropdown-reference"
+        >
+            <span class="uikit-question-dropdown-explanation__dropdown-reference-label">Reference: </span>
+            <div v-html="reference" />
+        </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 { TBreakPointsObject, TChoice, TChoiceKey } from './../question'
+
+@Component({
+    components: {
+        Icon,
+        PocketButton,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class DropdownExplanation extends Vue {
+    @Prop() question!: Study.Class.QuestionJSON
+    @Prop({ default: [] }) answerKeys!: TChoiceKey[]
+    @Prop() choice!: TChoice
+    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
+    @Prop({ default: false }) showAnswers!: boolean
+    @Prop({ default: false }) isMCR!: boolean
+    @Prop({ default: false }) showExplanation!: boolean
+    @Prop({ default: null }) explanationImageUrl!: string | null
+    @Prop({ default: undefined }) explanationImageAlt!: string | undefined
+    @Prop({ default: undefined }) explanationImageLongAlt!: string | undefined
+    @Prop({ default: undefined }) reference!: string | undefined
+    @Prop({ default: false }) hideReferences!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+
+    showExplanationImageLongAlt = false
+    
+    @Emit('emitToggleExplanationImageLongAlt')
+    emitToggleExplanationImageLongAlt () {
+        this.showExplanationImageLongAlt = !this.showExplanationImageLongAlt
+        return
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-dropdown-explanation {
+    &__dropdown-explanation {
+        display: none;
+
+        &--tablet-portrait {
+            display: block;
+        }
+
+        &--show-stats {
+            padding-bottom: 23px;
+            padding-right: 66px;
+        }
+    }
+
+    &__reference-label,
+    &__dropdown-reference-label {
+        font-weight: 600;
+    }
+
+    &__toggle-dropdown-explanation-img-description {
+        margin-top: 12px;
+        margin-bottom: 20px;
+
+        &--open {
+            margin-bottom: 6px;
+        }
+
+        &--tablet-portrait {
+            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
+                margin-bottom: 4px;
+            }
+
+            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
+                margin-bottom: 6px;
+            }
+        }
+
+        &--mobile {
+            margin-top: 16px;
+            margin-bottom: 16px;
+
+            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
+                margin-bottom: 7px;
+            }
+
+            &.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
+                margin-bottom: 4px;
+            }
+        }
+    }
+
+    &__toggle-dropdown-explanation-img-description-text {
+        outline: none;
+    }
+
+    &__toggle-dropdown-explanation-img-description-icon {
+        margin-left: 8px;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__dropdown-explanation-text {
+        font-size: 16px;
+        letter-spacing: -0.1px;
+        line-height: 24px;
+        font-weight: 400;
+        padding-bottom: 6px;
+
+        p {
+            margin: 10px 0;
+
+            &:first-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &__dropdown-explanation-img-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        line-height: 22px;
+        margin-bottom: 20px;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--mobile {
+            margin-bottom: 16px;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__dropdown-explanation-image {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid $fog;
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+    }
+
+    &__dropdown-reference {
+        padding-top: 24px;
+        border-top: 1px solid $fog;
+        font-size: 15px;
+        letter-spacing: -0.1px;
+        line-height: 22px;
+        font-weight: 400;
+        word-break: break-word;
+        margin-bottom: -7px;
+
+        &--dark {
+            color: $white;
+            border-top-color: rgba($fog, 0.28);
+        }
+
+        p {
+            margin: 6px 0 8pt 0;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+    <div
+        class="uikit-question-paywall"
+    >
+        <div
+            v-dark="isDarkMode"
+            v-breakpoint:questionEl="breakpoints" 
+            class="uikit-question-paywall__paywall"
+            :class="{ 'uikit-question-paywall__paywall--review': reviewMode }"
+        >
+            <img
+                v-breakpoint:questionEl="breakpoints"
+                :src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
+                alt=""
+                class="uikit-question-paywall__paywall-image"
+            >
+            <div
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question-paywall__paywall-text"
+            >
+                You need a Premium Subscription to view this question's answer and explanation.
+            </div>
+            <PocketButton
+                :is-dark-mode="isDarkMode"
+                class="uikit-question-paywall__paywall-button"
+                @click="emitUpgradeClick"
+            >
+                Upgrade to Premium
+            </PocketButton>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../../Icons/Icon.vue'
+import PocketButton from '../../Buttons/Button.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TBreakPointsObject } from './../question'
+import PaywallImageLight from '../../../assets/question/paywall-light.png'
+import PaywallImageDark from '../../../assets/question/paywall-dark.png'
+
+@Component({
+    components: {
+        Icon,
+        PocketButton,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class Paywall extends Vue {
+    @Prop({ default: false }) reviewMode!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+
+    get paywallImages () {
+        return {
+            light: PaywallImageLight,
+            dark: PaywallImageDark,
+        }
+    }
+
+    @Emit('upgradeClicked')
+    emitUpgradeClick () {
+        return true
+    }
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-paywall {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    &__paywall {
+        width: 100%;
+        max-width: 500px;
+        background: $white;
+        border-radius: 8px;
+        border: 1px solid $steel;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &--dark {
+            background: $brand-black;
+        }
+
+        &--tablet-portrait {
+            max-width: 430px;
+        }
+
+        &--review {
+            margin-bottom: 20px;
+        }
+    }
+
+    &__paywall-image {
+        width: 305px;
+        height: 230px;
+        margin: 25px auto 21px;
+
+        &--mobile {
+            width: 262px;
+            height: 199px;
+            margin: 14px auto 18px;
+        }
+    }
+
+    &__paywall-text {
+        font-size: 18px;
+        line-height: 22px;
+        color: $brand-black;
+        margin-bottom: 24px;
+        font-weight: 600;
+        text-align: center;
+        max-width: 372px;
+
+        &--dark {
+            color: $white;
+        }
+
+        &--tablet-portrait {
+            max-width: 302px;
+        }
+
+        &--mobile {
+            max-width: 293px;
+            margin-bottom: 22px;
+            font-size: 16px;
+            line-height: 19px;
+        }
+    }
+
+    &__paywall-button {
+        margin-bottom: 36px;
+    }
+}
+</style>