@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Onboarding/EmailAuth.vue

@@ -0,0 +1,218 @@
+<template>
+    <div class="uikit-email-auth__form">
+        <h1 class="uikit-email-auth__text-big" role="alert">
+            Check your email
+        </h1>
+        <div class="uikit-email-auth__text-small">
+            Tap the button in the email we sent to {{ email }} or enter code from email below.
+        </div>
+        <MagicCodeEntry
+            class="uikit-email-auth__magic-code-entry"
+            :class="{
+                'uikit-email-auth__magic-code-entry--error': errorMessage,
+            }"
+            :error="errorMessage"
+            @update:modelValue="magicCodeChange" 
+            @error="(err: string) => errorMessage = err"
+            @submit="submitSignIn"
+        />
+        <div v-if="errorMessage" class="uikit-email-auth__error-message">
+            <Icon class="uikit-email-auth__error-message-icon" type="warning" />
+            <span>{{ errorMessage }}</span>
+        </div>
+        <Button
+            class="uikit-email-auth__sign-in-btn"
+            :class="{
+                'uikit-email-auth__sign-in-btn--error': errorMessage,
+            }"
+            :disabled="code.length !== 6 || isLoading"
+            :autofocus="code.length === 6"
+            @click="submitSignIn"
+        >
+            Sign In
+        </Button>
+        <Button
+            type="tertiary"
+            class="uikit-email-auth__resend-email-btn"
+            :disabled="isResending"
+            @click="resendEmail"
+        >
+            Resend Email
+        </Button>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import Button from '../Buttons/Button.vue'
+import Link from '../Buttons/Link.vue'
+import MagicCodeEntry from '../Onboarding/MagicCodeEntry.vue'
+
+@Component({
+    components: {
+        Button,
+        Link,
+        Icon,
+        MagicCodeEntry,
+    },
+})
+export default class EmailAuth extends Vue {
+    @Prop({ default: '' }) parentError!: string
+    @Prop() email!: string
+
+    code = ''
+    errorMessage = ''
+    isLoading = false
+    isResending = false
+    highlightInput = false
+
+    @Watch('parentError')
+    parentErrorChanged (newVal: string, oldVal: string) {
+        if (newVal !== oldVal) {
+            this.errorMessage = newVal
+        }
+    }
+
+    async submitSignIn () {
+        this.isLoading = true
+        this.errorMessage = ''
+
+        if (this.email && this.code) {
+            if (this.code.trim().length !== 6) {
+                this.errorMessage = 'Code must be six digits'
+            } else {
+                this.emitSubmit({ email: this.email, code: this.code })
+            }
+        }
+
+        this.isLoading = false
+    }
+
+    async resendEmail () {
+        this.errorMessage = ''
+        this.isResending = true
+        this.emitResend({ email: this.email })
+        this.isResending = false
+    }
+
+    magicCodeChange (code: string) {
+        this.code = code
+        this.emitUpdateModelValue(code)
+    }
+
+    @Emit('submit')
+    emitSubmit (results: { email: string; code: string}) {
+        return results
+    }
+
+    @Emit('resend')
+    emitResend (resendInfo: { email: string }) {
+        return resendInfo
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (code: string) {
+        return code
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-email-auth {
+    &__form {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 503px;
+
+        @include breakpoint(black-bear) {
+            min-height: 550px;
+        }
+    }
+
+    &__text-big {
+        font-size: 36px;
+        line-height: 46px;
+        font-weight: 700;
+        margin-top: 105px;
+        margin-bottom: 13px;
+
+        @include breakpoint(black-bear) {
+            margin-top: 128px;
+        }
+    }
+
+    &__text-small {
+        font-size: 16px;
+        line-height: 23px;
+        width: 453px;
+        text-align: center;
+        margin-bottom: 39px;
+
+        @include breakpoint(black-bear) {
+            width: 303px;
+            margin-bottom: 37px;
+        }
+    }
+
+    &__magic-code-entry {
+        margin-bottom: 27px;
+        overflow: hidden;
+
+        &--error {
+            margin-bottom: 15px;
+        }
+    }
+
+    &__error-message {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        width: 320px;
+        height: 36px;
+        background-color: $red-hint;
+        border: 1px solid rgba($red-pegasus, 0.5);
+        border-radius: 3px;
+        font-size: 14px;
+        line-height: 17px;
+        padding-left: 13px;
+        margin-bottom: 28px;
+    }
+
+    &__error-message-icon {
+        margin-right: 7px;
+    }
+
+    &__sign-in-btn {
+        margin-bottom: 95px;
+
+        &--error {
+            margin-bottom: 41px;
+        }
+
+        @include breakpoint(black-bear) {
+            margin-bottom: 106px;
+
+            &--error {
+                margin-bottom: 52px;
+            }
+        }
+    }
+
+    &__resend-email-btn {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 24px;
+
+        @include breakpoint(black-bear) {
+            bottom: 44px;
+        }
+    }
+}
+</style>

package/lib/components/Onboarding/MagicCodeEntry.md

@@ -0,0 +1,20 @@
+```vue
+<template>
+    <div>
+        <pre>
+            Code: {{ code }}
+        </pre>
+        <MagicCodeEntry v-model="code" />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            code: ''
+        }
+    }
+}
+</script>
+```

package/lib/components/Onboarding/MagicCodeEntry.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="uikit-magic-code" @keydown="handleKeyDown">
+        <div
+            v-for="n in 6"
+            :key="n"
+            class="uikit-magic-code__code-input-box"
+            :class="{
+                'uikit-magic-code__code-input-box--active': highlightInput && n === cursorIndex + 1,
+                'uikit-magic-code__code-input-box--error': error,
+            }"
+        />
+        <input
+            v-model="code"
+            aria-label="Magic code input field"
+            class="uikit-magic-code__code-input"
+            type="text"
+            maxlength="6"
+            :autofocus="code.length !== 6"
+            @focus="highlightInput = true"
+            @blur="highlightInput = false"
+            @click="handleClick"
+            @paste="handlePaste"
+        >
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop, Emit } from 'vue-facing-decorator'
+
+@Component
+export default class MagicCodeEntry extends Vue {
+    @Prop({ default: false }) error!: boolean
+
+    highlightInput = false
+    cursorIndex = 0
+    code = ''
+
+    mounted () {
+        // Ensure proper letter spacing for magic code in case of a11y browser extension overrides
+        setTimeout(() => {
+            const codeInputEl = document.querySelector('.uikit-magic-code__code-input') as HTMLElement | null
+            if (codeInputEl) {
+                codeInputEl.style.letterSpacing = '35.5px'
+            }
+        }, 500)
+    }
+
+    handleKeyDown (event: Event | KeyboardEvent) {
+        if (!('key' in event)) {
+            return
+        }
+
+        // Allow tab, refresh, and paste events to pass through, otherwise prevent default keydown behavior
+        if (
+            !event.metaKey
+            && (
+                event.key.match(/^[0-9]$/)
+                || event.key === 'ArrowLeft'
+                || event.key === 'ArrowRight'
+                || event.key === 'Backspace'
+                || event.key === 'Enter'
+            )
+        ) {
+            event.preventDefault()
+        }
+
+        if (event.key.match(/[0-9]/)) {
+            this.code = this.code.slice(0, this.cursorIndex) + event.key + this.code.slice(this.cursorIndex + 1)
+            this.cursorIndex = Math.min(this.cursorIndex + 1, 5)
+        } else if (event.key === 'ArrowLeft') {
+            this.cursorIndex = Math.max(this.cursorIndex - 1, 0)
+        } else if (event.key === 'ArrowRight') {
+            this.cursorIndex = Math.min(this.cursorIndex + 1, 5)
+        } else if (event.key === 'Backspace') {
+            if (this.code[this.cursorIndex]) {
+                this.code = (this.code.slice(0, this.cursorIndex) + ' ' + this.code.slice(this.cursorIndex + 1))
+                    .trimRight()
+            }
+            this.cursorIndex = Math.min(Math.max(this.cursorIndex - 1, 0), this.code.length)
+        } else if (event.key === 'Enter') {
+            this.emitSubmit()
+        }
+    }
+
+    handleClick (event: MouseEvent) {
+        const selectionEnd = (event.target as HTMLInputElement)?.selectionEnd
+        if (selectionEnd !== null) {
+            this.cursorIndex = selectionEnd
+        }
+    }
+
+    handlePaste (event: ClipboardEvent) {
+        this.emitError('')
+        const pasteValue = event.clipboardData?.getData('text')
+        if (pasteValue && typeof Number(pasteValue) === 'number' && pasteValue.length === 6) {
+            this.code = ''
+            this.cursorIndex = Math.min(pasteValue.length, 5)
+        } else if (pasteValue) {
+            this.emitError(`Invalid code: ${pasteValue}. Code must be six digits`)
+            event.preventDefault()
+        }
+    }
+
+    @Watch('code')
+    codeChanged (newVal: string) {
+        this.emitUpdateModelValue(newVal)
+    }
+
+    @Emit('submit')
+    emitSubmit () {
+        return true
+    }
+
+    @Emit('error')
+    emitError (errorMessage: string) {
+        return errorMessage
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (code: string) {
+        return code
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-magic-code {
+    position: relative;
+    display: flex;
+    padding-left: 39px;
+    min-height: 52px;
+
+    &__code-input-box {
+        position: relative;
+        background-color: white;
+        border: 1px solid $steel;
+        border-radius: 4px;
+        width: 42px;
+        height: 50px;
+        margin-right: 10px;
+        box-sizing: border-box;
+
+        &--active {
+            border-width: 2px;
+            border-color: $brand-blue;
+        }
+
+        &--error {
+            border-width: 2px;
+            border-color: $red-pegasus;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: -11px;
+            width: 9px;
+            height: 100%;
+            z-index: 2;
+        }
+    }
+
+    &__code-input {
+        box-sizing: border-box;
+        position: absolute;
+        font-family: monospace;
+        width: 328px;
+        height: 50px;
+        font-size: 28px;
+        line-height: 38px;
+        font-weight: 600;
+        letter-spacing: 35.5px;
+        padding-left: 12px;
+        background: none;
+        border: none;
+        outline: none;
+        caret-color: white;
+        appearance: none;
+
+        &::selection {
+            color: none;
+            background: none;
+        }
+    }
+}
+</style>

package/lib/components/PhonePerson/PhonePerson.md

@@ -0,0 +1,36 @@
+```vue
+<template>
+    <div class="phone-people">
+        <PhonePerson bundleId="mO5EIsoZ9H" />
+        <PhonePerson bundleId="uKLwvbsbPV" />
+        <PhonePerson bundleId="gAlCkoUVLl" />
+        <PhonePerson bundleId="GVCNrq4ixh" />
+        <PhonePerson bundleId="PusoOu7qGQ" />
+        <PhonePerson bundleId="1kS20KPPkH" />
+        <PhonePerson bundleId="tVMt7KCrkQ" />
+        <PhonePerson bundleId="4dTgUX97Dk" />
+        <PhonePerson bundleId="9970muCFGV" />
+        <PhonePerson bundleId="k9T5L3kC0U" />
+        <PhonePerson bundleId="DO5jBm0OJo" />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    }
+}
+</script>
+
+<style>
+.phone-people {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.phone-people img {
+    width: 150px;
+}
+</style>
+```

package/lib/components/PhonePerson/PhonePerson.vue

@@ -0,0 +1,48 @@
+<template>
+    <img v-if="bundleId === 'mO5EIsoZ9H'" :src="urls.PhonePersonSkilledTrades">
+    <img v-else-if="bundleId === 'uKLwvbsbPV'" :src="urls.PhonePersonBehavioralHealth">
+    <img v-else-if="bundleId === 'gAlCkoUVLl'" :src="urls.PhonePersonEMT">
+    <img v-else-if="bundleId === 'DO5jBm0OJo'" :src="urls.PhonePersonEssentials">
+    <img v-else-if="bundleId === 'GVCNrq4ixh'" :src="urls.PhonePersonFinance">
+    <img v-else-if="bundleId === 'PusoOu7qGQ'" :src="urls.PhonePersonFitness">
+    <img v-else-if="bundleId === '1kS20KPPkH'" :src="urls.PhonePersonIT">
+    <img v-else-if="bundleId === 'tVMt7KCrkQ'" :src="urls.PhonePersonMedical">
+    <img v-else-if="bundleId === '4dTgUX97Dk'" :src="urls.PhonePersonNursing">
+    <img v-else-if="bundleId === '9970muCFGV'" :src="urls.PhonePersonNursingSchool">
+    <img v-else-if="bundleId === 'k9T5L3kC0U'" :src="urls.PhonePersonProfessional">
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import type { TBundleIds } from './phonePerson'
+import PhonePersonBehavioralHealth from './phoneperson-behavioralhealth@2x.png'
+import PhonePersonEMT from './phoneperson-emt@2x.png'
+import PhonePersonEssentials from './phoneperson-essentials@2x.png'
+import PhonePersonFinance from './phoneperson-finance@2x.png'
+import PhonePersonFitness from './phoneperson-fitness@2x.png'
+import PhonePersonIT from './phoneperson-IT@2x.png'
+import PhonePersonMedical from './phoneperson-medical@2x.png'
+import PhonePersonNursing from './phoneperson-nursing@2x.png'
+import PhonePersonNursingSchool from './phoneperson-nursingschool@2x.png'
+import PhonePersonProfessional from './phoneperson-professional@2x.png'
+import PhonePersonSkilledTrades from './phoneperson-skilledtrades@2x.png'
+
+@Component
+export default class PhonePerson extends Vue {
+    @Prop({ default: 'mO5EIsoZ9H' }) bundleId!: TBundleIds
+
+    urls = {
+        PhonePersonBehavioralHealth,
+        PhonePersonEMT,
+        PhonePersonEssentials,
+        PhonePersonFinance,
+        PhonePersonFitness,
+        PhonePersonIT,
+        PhonePersonMedical,
+        PhonePersonNursing,
+        PhonePersonNursingSchool,
+        PhonePersonProfessional,
+        PhonePersonSkilledTrades,
+    }
+}
+</script>

package/lib/components/Quiz/FlagToggle.md

@@ -0,0 +1,37 @@
+```vue
+<template>
+    <div class="docs-flag-toggle">
+        <FlagToggle
+            :is-flagged="isFlagged"
+            @toggleFlag="toggleFlag"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            isFlagged: false,
+        }
+    },
+    methods: {
+        toggleFlag (newVal) {
+            this.isFlagged = newVal
+        },
+    },
+}
+</script>
+
+<style>
+.docs-flag-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    background-color: #1f3545;
+    color: white;
+}
+</style>
+```