@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Toasts/Toast.md

@@ -0,0 +1,35 @@
+```vue
+<template>
+    <div>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <Button @click="showToast1 = !showToast1">{{ showToast1 ? 'Hide' : 'Show' }} Toast 1</Button>
+        <Button @click="showToast2 = !showToast2">{{ showToast2 ? 'Hide' : 'Show' }} Toast 1</Button>
+        <Toast @close="showToast1 = false" :isDarkMode="isDarkMode" v-if="showToast1">
+            ATI TEAS exam added.
+        </Toast>
+        <Toast @close="showToast2 = false" :isDarkMode="isDarkMode" v-if="showToast2">
+            ATI TEAS exam added.
+            <template #subtext>
+                Edit and remove exams in Settings > Your Exams.
+            </template>
+        </Toast>
+    </div>
+</template>
+
+<script>
+import Button from '../Buttons/Button.vue'
+
+export default {
+    components: {
+        Button
+    },
+    data() {
+        return {
+            isDarkMode: false,
+            showToast1: false,
+            showToast2: false
+        }
+    }
+}
+</script>
+```

package/lib/components/Toasts/Toast.vue

@@ -0,0 +1,213 @@
+<template>
+    <div
+        ref="toast"
+        v-dark="isDarkMode"
+        class="toast"
+        role="alert"
+        @mouseenter="clearCloseTimeout"
+        @mouseleave="setCloseTimeout"
+    >
+        <div
+            v-if="showCloseButton"
+            v-dark="isDarkMode"
+            tabindex="0"
+            class="toast__close"
+            @click="emitClose"
+            @keypress.enter="emitClose"
+            @mousedown.prevent
+        >
+            <Icon type="close" />
+        </div>
+        <div class="toast__icon">
+            <Icon type="check" />
+        </div>
+        <div class="toast__content">
+            <div v-dark="isDarkMode" class="toast__content-title">
+                <slot />
+            </div>
+            <div
+                v-if="$slots.subtext?.()"
+                v-dark="isDarkMode"
+                class="toast__content-subtext"
+            >
+                <slot name="subtext" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Icon,
+    },
+})
+export default class Toast extends Vue {
+    @Prop({ default: true }) showCloseButton!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    closeTimeout: NodeJS.Timeout | null = null
+
+    mounted () {
+        this.setCloseTimeout()
+        const toastEl = this.$refs['toast'] as HTMLElement
+
+        setTimeout(() => {
+            toastEl.classList.add('toast--visible')
+        }, 1)
+    }
+
+    setCloseTimeout () {
+        this.closeTimeout = setTimeout(() => {
+            const toastEl = this.$refs['toast'] as HTMLElement
+            toastEl?.classList.add('toast--closing')
+
+            setTimeout(() => {
+                this.emitClose()
+            }, 300)
+        }, 5000)
+    }
+
+    clearCloseTimeout () {
+        this.closeTimeout && clearTimeout(this.closeTimeout)
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.toast {
+    background-color: rgba($charcoal, 0.9);
+    width: 386px;
+    min-height: 49px;
+    position: absolute;
+    left: -100%;
+    bottom: 32px;
+    z-index: 1000000;
+    display: flex;
+    align-items: flex-start;
+    border-radius: 6px;
+    padding: 0 15px;
+    box-sizing: border-box;
+
+    &:hover {
+        background-color: $charcoal;
+    }
+
+    &--visible {
+        transition: all 0.5s ease-out;
+        left: 32px;
+    }
+
+    &--closing {
+        opacity: 0;
+        transition: all 0.3s ease-out;
+    }
+
+    &--dark {
+        background-color: rgba($white, 0.9);
+
+        &:hover {
+            background-color: $white;
+        }
+    }
+
+    &__icon {
+        color: $jungle-green;
+        margin-top: 16px;
+        width: 18px;
+        height: 14px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__content {
+        padding: 15px 0 12px;
+        max-width: 313px;
+        margin-left: 6px;
+    }
+
+    &__content-title {
+        color: rgba($white, 0.86);
+        font-size: 16px;
+        line-height: 19px;
+        font-weight: 600;
+
+        &--dark {
+            color: $brand-black;
+        }
+    }
+
+    &__content-subtext {
+        font-size: 13px;
+        line-height: 16px;
+        color: rgba($white, 0.8);
+        margin-top: 1px;
+        margin-bottom: 5px;
+
+        &--dark {
+            color: $ash;
+        }
+    }
+
+    &__close {
+        color: rgba($white, 0.8);
+        outline: none;
+        position: absolute;
+        right: 7px;
+        top: 10px;
+        cursor: pointer;
+        width: 27px;
+        height: 27px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover {
+            color: $white;
+        }
+
+        &:focus::before {
+            content: '';
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            left: 0;
+            top: 0;
+            border: 1px solid $banana-bread;
+            box-sizing: border-box;
+        }
+
+        &--dark {
+            color: $slate;
+
+            &:hover {
+                color: $brand-black;
+            }
+
+            &:focus::before {
+                border-color: $brand-blue;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Tooltips/OverflowTooltip.md

@@ -0,0 +1,14 @@
+```vue
+<template>
+    <div class="overflow-tooltip">
+        <OverflowTooltip>
+            Test overflow text
+        </OverflowTooltip>
+    </div>
+</template>
+<style>
+.overflow-tooltip {
+    width: 100px;
+}
+</style>
+```

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="uikit-overflow-tooltip">
+        <Tooltip
+            v-if="textOverflows && showTooltip"
+            class="uikit-overflow-tooltip__tooltip"
+            theme="rightalign"
+        >
+            <slot />
+        </Tooltip>
+        <div
+            ref="content"
+            class="uikit-overflow-tooltip__content"
+            @mouseenter="showTooltip = true"
+            @mouseleave="showTooltip = false"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-facing-decorator'
+import Tooltip from '../Tooltips/Tooltip.vue'
+
+@Component({
+    components: {
+        Tooltip,
+    },
+})
+export default class OverflowTooltip extends Vue {
+    showTooltip = false
+    textOverflows = false
+
+    mounted () {
+        const content = this.$refs['content'] as HTMLElement
+
+        this.$nextTick(() => {
+            const truncatedWidth = content.getBoundingClientRect().width
+            content.style.display = 'inline'
+            const fullWidth = content.getBoundingClientRect().width
+            content.style.display = 'block'
+            this.textOverflows = truncatedWidth < fullWidth
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-overflow-tooltip {
+    position: relative;
+
+    &__content {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__tooltip {
+        position: absolute;
+        left: 12px;
+        top: calc(-100% - 14px);
+    }
+}
+</style>

package/lib/components/Tooltips/Tooltip.md

@@ -0,0 +1,72 @@
+```vue
+<template>
+    <div>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <div class="tooltips" :class="{ dark: isDarkMode }">
+            <div class="tooltip-container">
+                <Tooltip :isDarkMode="isDarkMode" v-if="showTooltip1">Regular Tooltip</Tooltip>
+                <Button @mouseover="showTooltip1 = true" @mouseout="showTooltip1 = false">Tooltip Regular</Button>
+            </div>
+            <div class="tooltip-container">
+                <Tooltip :isDarkMode="isDarkMode" theme="leftalign" v-if="showTooltip2">Left Aligned Tooltip</Tooltip>
+                <Button @mouseover="showTooltip2 = true" @mouseout="showTooltip2 = false">Tooltip Left</Button>
+            </div>
+            <div class="tooltip-container">
+                <Tooltip :isDarkMode="isDarkMode" theme="rightalign" v-if="showTooltip3">Right Aligned Tooltip</Tooltip>
+                <Button @mouseover="showTooltip3 = true" @mouseout="showTooltip3 = false">Tooltip Right</Button>
+            </div>
+            <div class="tooltip-container">
+                <Tooltip
+                    v-if="showTooltip4"
+                    :styles="{
+                        backgroundColor: '#14ca9e',
+                        color: '#1f3545'
+                    }"
+                >Custom Style Tooltip</Tooltip>
+                <Button @mouseover="showTooltip4 = true" @mouseout="showTooltip4 = false">Tooltip Custom</Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Button from '../Buttons/Button.vue'
+
+export default {
+    components: {
+        Button
+    },
+    data () {
+        return {
+            isDarkMode: false,
+            showTooltip1: false,
+            showTooltip2: false,
+            showTooltip3: false,
+            showTooltip4: false,
+        }
+    },
+}
+</script>
+
+<style>
+.tooltips {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.tooltip-container {
+    position: relative;
+    display: inline-block;
+    margin: 0 10px;
+}
+
+.uikit-tooltip {
+    position: absolute;
+    left: 50%;
+    top: -100%;
+}
+</style>
+```

package/lib/components/Tooltips/Tooltip.vue

@@ -0,0 +1,143 @@
+<template>
+    <div
+        :id="`tooltip-container-${tooltipId}`"
+        class="uikit-tooltip"
+    >
+        <div
+            :id="`tooltip-${tooltipId}`"
+            v-dark="isDarkMode"
+            class="uikit-tooltip-popup"
+            :class="{ 
+                'uikit-tooltip-popup--rightalign': theme === 'rightalign',
+                'uikit-tooltip-popup--leftalign': theme === 'leftalign'
+            }"
+        >
+            <div
+                v-dark="isDarkMode"
+                class="uikit-tooltip-popup__triangle"
+                :class="{ 
+                    'uikit-tooltip-popup__triangle--rightalign': theme === 'rightalign',
+                    'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign'
+                }"
+            />
+            <span>
+                <slot />
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Tooltip extends Vue {
+    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign'
+    @Prop({ default: null }) styles!: null | Record<string, string>
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    tooltipId = Math.floor(Math.random() * 1000000)
+
+    mounted () {
+        this.$nextTick(() => {
+            const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${this.tooltipId}`) as HTMLElement
+            const tooltipWidth = tooltipEl.clientWidth
+            const body = document.querySelector('body') as HTMLElement
+            const leftOffset = this.theme === 'rightalign' 
+                ? 20
+                : this.theme === 'leftalign'
+                    ? tooltipWidth - 20
+                    : Math.floor(tooltipWidth / 2)
+            const left = Math.round(tooltipEl.getBoundingClientRect().left + window.pageXOffset - leftOffset)
+            const top = Math.round(tooltipEl.getBoundingClientRect().top + window.pageYOffset)
+
+            tooltipEl.parentNode?.removeChild(tooltipEl)
+            body.appendChild(tooltipEl)
+            tooltipEl.style.zIndex = '1002'
+            tooltipEl.style.top = `${top}px`
+            tooltipEl.style.left = `${left}px`
+            tooltipEl.style.position = 'absolute'
+            const propStyle = this.styles
+            if (propStyle) {
+                Object.keys(propStyle).forEach(styleProp => {
+                    tooltipEl.style[styleProp as 'color'] = propStyle[styleProp] || ''
+                })
+                if (tooltipEl.style.backgroundColor) {
+                    const triangleEl = document.querySelector(
+                        `.uikit-tooltip-popup#tooltip-${this.tooltipId} .uikit-tooltip-popup__triangle`
+                    ) as HTMLElement
+                    triangleEl.style.borderColor = `${tooltipEl.style.backgroundColor} transparent transparent`
+                }
+            }
+        })
+    }
+
+    unmounted () {
+        const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${this.tooltipId}`) as HTMLElement
+        tooltipEl.remove()
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-tooltip-popup {
+    color: $white;
+    background-color: rgba($brand-black, 0.95);
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: left;
+    padding: 3px 7px;
+    position: relative;
+    margin-bottom: 6px;
+    border-radius: 4px;
+    display: inline-block;
+    cursor: default;
+    user-select: none;
+    word-wrap: none;
+
+    &--dark {
+        color: $brand-black;
+        background: $white;
+    }
+
+    span {
+        position: relative;
+        z-index: 1;
+        white-space: nowrap;
+    }
+
+    &__triangle {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -6px;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid rgba($brand-black, 0.95);
+
+        &--leftalign {
+            left: auto;
+            right: 13px;
+            transform: none;
+        }
+
+        &--rightalign {
+            left: 14px;
+            transform: none;
+        }
+
+        &--dark {
+            border-top-color: $white;
+        }
+    }
+}
+</style>