@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Icons/IconSubject.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="subject" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconSubject.vue

@@ -0,0 +1,22 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(3.500000, 2.000000)" fill="currentColor">
+                <rect fill-opacity="0.1" x="1" y="1" width="4" height="18"></rect>
+                <path d="M14,0 C16.209139,0 18,1.790861 18,4 L18,4 L18,16 C18,18.209139 16.209139,20 14,20 L14,20 L3,20 C1.34314575,20 0,18.6568542 0,17 L0,17 L0,3 C0,1.34314575 1.34314575,0 3,0 L3,0 Z M14,2 L5,2 L5,18 L14,18 C15.0543618,18 15.9181651,17.1841222 15.9945143,16.1492623 L16,16 L16,4 C16,2.8954305 15.1045695,2 14,2 L14,2 Z M4,2 L3,2 C2.44771525,2 2,2.44771525 2,3 L2,3 L2,17 C2,17.5522847 2.44771525,18 3,18 L3,18 L4,18 L4,2 Z M13.5,4.5 C13.7761424,4.5 14,4.72385763 14,5 L14,9 C14,9.27614237 13.7761424,9.5 13.5,9.5 L7.5,9.5 C7.22385763,9.5 7,9.27614237 7,9 L7,5 C7,4.72385763 7.22385763,4.5 7.5,4.5 L13.5,4.5 Z M13,5.5 L8,5.5 L8,8.5 L13,8.5 L13,5.5 Z" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-facing-decorator'
+
+@Component
+export default class IconSubject extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconText.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="text" title="test" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconText.vue

@@ -0,0 +1,22 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <rect x="0" y="0" width="30" height="30" rx="6"></rect>
+            <g transform="translate(6.000000, 8.000000)" fill="currentColor">
+                <path d="M9.27941176,11 C9.9697677,11 10.5294118,11.5596441 10.5294118,12.25 C10.5294118,12.8972087 10.0375371,13.4295339 9.407217,13.4935464 L9.27941176,13.5 L1.25,13.5 C0.559644063,13.5 0,12.9403559 0,12.25 C0,11.6027913 0.491874664,11.0704661 1.12219476,11.0064536 L1.25,11 L9.27941176,11 Z M16.3088235,5.5 C16.9991795,5.5 17.5588235,6.05964406 17.5588235,6.75 C17.5588235,7.39720869 17.0669489,7.9295339 16.4366288,7.99354639 L16.3088235,8 L1.25,8 C0.559644063,8 4.40536496e-13,7.44035594 4.40536496e-13,6.75 C4.40536496e-13,6.10279131 0.491874664,5.5704661 1.12219476,5.50645361 L1.25,5.5 L16.3088235,5.5 Z M12.5441176,0 C13.2344736,0 13.7941176,0.559644063 13.7941176,1.25 C13.7941176,1.89720869 13.302243,2.4295339 12.6719229,2.49354639 L12.5441176,2.5 L1.25,2.5 C0.559644063,2.5 0,1.94035594 0,1.25 C0,0.602791309 0.491874664,0.0704661011 1.12219476,0.00645360909 L1.25,0 L12.5441176,0 Z"></path>
+            </g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconText extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconWarning.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="warning" title="test" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconWarning.vue

@@ -0,0 +1,22 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(-486.000000, -808.000000)"></g>
+            <g fill="currentColor">
+                <path d="M8.97109821,0.188436935 C9.29757834,0.369814785 9.56674905,0.638985494 9.7481269,0.965465625 L15.7899605,11.8407661 C16.3263869,12.8063335 15.9784993,14.0239401 15.0129318,14.5603665 C14.7158158,14.7254309 14.3815344,14.8120519 14.0416459,14.8120519 L1.95797877,14.8120519 C0.853409272,14.8120519 -0.0420212285,13.9166214 -0.0420212285,12.8120519 C-0.0420212285,12.4721634 0.0445997731,12.1378821 0.209664219,11.8407661 L6.2514978,0.965465625 C6.78792417,-0.000101840421 8.00553075,-0.347989435 8.97109821,0.188436935 Z M8.03242624,10.484962 C7.8001238,10.484962 7.60787351,10.5630637 7.45567537,10.7192671 C7.30347722,10.8754704 7.22737815,11.0617129 7.22737815,11.2779945 C7.22737815,11.4862656 7.30547983,11.6685029 7.46168319,11.8247062 C7.61788655,11.9809096 7.80813423,12.0590113 8.03242624,12.0590113 C8.26472867,12.0590113 8.45697896,11.978907 8.60917711,11.8186984 C8.76137526,11.6584898 8.83747433,11.47425 8.83747433,11.2659788 C8.83747433,11.0496972 8.76137526,10.8654574 8.60917711,10.7132592 C8.45697896,10.5610611 8.26472867,10.484962 8.03242624,10.484962 Z M8.62119275,4.25545113 L7.43164408,4.25545113 L7.43164408,9.49967927 L8.62119275,9.49967927 L8.62119275,4.25545113 Z"></path>
+            </g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconWarning extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Modal/Modal.md

@@ -0,0 +1,31 @@
+```vue
+<template>
+    <div class="custom-modal-container">
+        <Modal :showCloseButton="true">
+            <template #head>
+                Head section
+            </template>
+            <div class="modal-content">
+                Custom modal component
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+.custom-modal-container {
+    position: relative;
+}
+
+.modal-content {
+    background: white;
+    padding: 20px;
+}
+</style>
+```

package/lib/components/Modal/Modal.vue

@@ -0,0 +1,133 @@
+<template>
+    <div v-dark="isDarkMode" class="uikit-modal">
+        <div
+            v-if="showCloseButton"
+            v-dark="isDarkMode"
+            class="uikit-modal__close"
+            tabindex="0"
+            aria-label="Close"
+            :style="customCloseStyles"
+            @mousedown.prevent
+            @click="emitClose"
+            @keydown.enter="emitClose"
+        >
+            <IconClose title="close" />
+        </div>
+        <div v-if="hasHeadSlot" class="uikit-modal__head">
+            <slot name="head" />
+        </div>
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import IconClose from '../Icons/IconClose.vue'
+import { dark } from '../../directives'
+
+@Component({
+    components: {
+        IconClose,
+    },
+    directives: {
+        dark,
+    },
+})
+export default class Modal extends Vue {
+    @Prop({ default: false }) showCloseButton!: boolean
+    @Prop({ default: () => ({}) }) customCloseStyles?: { [key: string]: string }
+    @Prop({ default: false }) isDarkMode!: boolean
+    
+    get hasHeadSlot () {
+        // See https://github.com/vuejs/core/issues/7002
+        return !!(this.$slots.head?.()[0]?.children?.length)
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-modal {
+    border-radius: 12px;
+    box-shadow: 0 2px 30px 0 rgba($brand-black, 0.1);
+    z-index: 10001;
+    background-color: $white;
+
+    &--dark {
+        background-color: $moonlit-ocean;
+        color: $white;
+        box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+    }
+
+    &__head {
+        position: relative;
+        width: 100%;
+        height: 56px;
+        display: flex;
+        padding: 0 18px;
+        box-sizing: border-box;
+        align-items: center;
+
+        @include breakpoint(brown-bear) {
+            padding: 0 16px;
+        }
+    }
+
+    &__close {
+        position: absolute;
+        right: 14px;
+        top: 14px;
+        z-index: 10;
+        color: $brand-blue;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+
+        @include breakpoint(black-bear) {
+            right: 16px;
+            top: 16px;
+        }
+
+        &:hover {
+            color: $brand-black;
+        }
+
+        &:focus::before {
+            content: '';
+            left: -1px;
+            top: -1px;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            border: 1px solid $brand-blue;
+            border-radius: 5px;
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:hover {
+                color: $butterscotch;
+            }
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

package/lib/components/Modal/ModalContainer.md

@@ -0,0 +1,96 @@
+```vue
+<template>
+    <div>
+        <Button @click="showModal1 = true">Show Modal 1</Button>
+        <ModalContainer v-if="showModal1" :showCloseButton="true" @close="showModal1 = false">
+            <template #head>
+                Head section
+            </template>
+            <div class="modal1">
+                Modal 1 with head section and close button
+            </div>
+        </ModalContainer>
+        <Button @click="showModal2 = true">Show Dark Mode Modal 2</Button>
+        <ModalContainer v-if="showModal2" :showCloseButton="true" @close="showModal2 = false" :isDarkMode="true">
+            <template #head>
+                Head section
+            </template>
+            <div class="modal2">
+                Modal 2 with head section and close button
+            </div>
+        </ModalContainer>
+        <Button @click="showModal3 = true">Show Modal 3</Button>
+        <ModalContainer v-if="showModal3" :showCloseButton="true" @close="showModal3 = false">
+            <template #modal>
+                <Modal class="modal3">
+                    Modal 3 using Modal component for style overrides
+                    <ul class="modal3__list">
+                        <li class="modal3__list-item">ABC</li>
+                        <li class="modal3__list-item">DEF</li>
+                        <li class="modal3__list-item">GHI</li>
+                        <li class="modal3__list-item">JKL</li>
+                        <li class="modal3__list-item">MNO</li>
+                        <li class="modal3__list-item">PQR</li>
+                        <li class="modal3__list-item">STU</li>
+                        <li class="modal3__list-item">VWX</li>
+                    </ul>
+                </Modal>
+            </template>
+        </ModalContainer>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            showModal1: false,
+            showModal2: false,
+            showModal3: false,
+        }
+    }
+}
+</script>
+
+<style>
+.modal1,
+.modal2 {
+    padding: 20px;
+}
+
+.modal3 {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    height: 50px;
+    padding: 20px;
+    background-color: #0064ff;
+    color: white;
+    border-radius: 30px;
+}
+
+.modal3__list {
+    padding: 0;
+    list-style: none;
+    background-color: white;
+    border: 1px solid black;
+    color: black;
+}
+
+.modal3__list-item {
+    padding: 5px;
+}
+
+.modal3__list-item:nth-child(-n+7) {
+    border-bottom: 1px solid gray;
+}
+
+@media (max-width: 767px) {
+    .modal3 {
+        left: 10px;
+        right: 10px;
+        height: 90%;
+    }
+}
+</style>
+```

package/lib/components/Modal/ModalContainer.vue

@@ -0,0 +1,208 @@
+<template>
+    <div
+        ref="modalContainer"
+        v-dark="isDarkMode"
+        class="uikit-modal-container"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        @keydown.self.esc="emitClose"
+        @keydown.self.enter="emitClose"
+        @keydown="keydownListener"
+    >
+        <div
+            class="uikit-modal-container__clickable" 
+            @click.self="emitClose"
+            @mousedown.self.prevent
+        />
+        <slot name="modal">
+            <Modal
+                class="uikit-modal-container__modal"
+                :show-close-button="showCloseButton"
+                :custom-close-styles="customCloseStyles"
+                :is-dark-mode="isDarkMode"
+                @close="emitClose"
+            >
+                <template #head>
+                    <slot name="head" />
+                </template>
+                <slot />
+            </Modal>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Modal from '../Modal/Modal.vue'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Modal,
+    },
+})
+export default class ModalContainer extends Vue {
+    @Prop({ default: false }) showCloseButton!: boolean
+    @Prop({ default: () => ({}) }) customCloseStyles?: { [key: string]: unknown }
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    focusListener: Parameters<typeof addEventListener>[1] | null = null
+    savedYPosition = 0
+
+    mounted () {
+        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
+
+        // Reset focus to last element in modal so next tab will move it to top
+        const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
+        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
+        if (modalFocusableEls.length) {
+            modalFocusableEls[modalFocusableEls.length - 1]?.focus()
+            modalFocusableEls[modalFocusableEls.length - 1]?.blur()
+        }
+
+        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
+        this.focusListener = event => {
+            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+            const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
+            const hasCalendarClass = target 
+                && Array.from(target.classList).find(
+                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
+                )
+            if (isFocusOutside && !hasCalendarClass) {
+                const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
+                    focusableSelectors
+                ))
+                const firstFocusableModalChild = focusableModalChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                const reversedModalChildren = [ ...focusableModalChildren ].reverse()
+                const lastFocusableModalChild = reversedModalChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                if (firstFocusableModalChild) {
+                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                    if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
+                        // If focus moves from first element -> outside modal, focus the last element instead
+                        lastFocusableModalChild.focus()
+                    } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
+                        // If focus moves from last element -> outside modal, focus the first element instead
+                        firstFocusableModalChild.focus()
+                    } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
+                        // If focus goes outside in a different way, return focus to where it came from if possible
+                        relatedTarget.focus()
+                    } else {
+                        // Otherwise, just return focus to the first element
+                        firstFocusableModalChild.focus()
+                    }
+                } else {
+                    // If the modal doesn't have any focusable children, focus the container instead
+                    if (modalContainerEl.tabIndex === -1) {
+                        modalContainerEl.tabIndex = 0
+                    }
+                    modalContainerEl.focus()
+                }
+            }
+        }
+        document.addEventListener('focusin', this.focusListener)
+
+        // prevent scrolling outside of modal
+        const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
+        document.body.setAttribute('data-openModalCount', String(openModalCount + 1))
+        document.body.classList.add('uikit-modal-open')
+    }
+
+    beforeUnmount () {
+        if (this.focusListener) {
+            document.removeEventListener('focusin', this.focusListener)
+        }
+
+        const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
+        document.body.setAttribute('data-openModalCount', String(openModalCount - 1))
+        if (openModalCount <= 1) {
+            document.body.classList.remove('uikit-modal-open')
+        }
+    }
+
+    keydownListener (e: Event | KeyboardEvent) {
+        if (!('key' in e)) {
+            return
+        }
+
+        if (e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+            e.stopPropagation()
+        }
+
+        if (e.key === 'Escape') {
+            this.emitClose()
+        }
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-modal-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba($brand-black, 0.4);
+    z-index: 10000;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    outline: none;
+
+    @include breakpoint(black-bear) {
+        overflow: initial;
+    }
+
+    &--dark {
+        background-color: rgba($charcoal, 0.8);
+    }
+
+    &__clickable {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+    }
+
+    &__modal {
+        position: absolute;
+        top: 84px;
+        left: 50%;
+        transform: translateX(-50%);
+        overflow: hidden;
+
+        @include breakpoint(brown-bear) {
+            top: 69px;
+        }
+
+        @include breakpoint(black-bear) {
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transform: none;
+            margin: 0;
+            border-radius: 0;
+            box-shadow: none;
+            overflow: auto;
+        }
+    }
+}
+</style>

package/lib/components/Onboarding/EmailAuth.md

@@ -0,0 +1,40 @@
+```vue
+<template>
+    <div>
+        <pre>
+            Code: {{ code }}
+        </pre>
+        <EmailAuth
+            class="email-auth"
+            email="test@pocketprep.com"
+            @resend="resendEmail"
+            @submit="submitEmailAuth"
+            v-model="code"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            code: ''
+        }
+    },
+    methods: {
+        resendEmail: function () {
+            alert('Resend email')
+        },
+        submitEmailAuth: function ({ email, code }) {
+            alert(`Form submit with data- { email: ${email}, code: ${ code } }`)
+        }
+    }
+}
+</script>
+
+<style>
+.email-auth {
+    background-color: #fff9ef;
+}
+</style>
+```