@pocketprep/ui-kit 3.4.2 → 3.4.4

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/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>