@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/SidePanels/SidePanel.vue

@@ -0,0 +1,592 @@
+<template>
+    <div
+        ref="sidepanelContainer"
+        v-dark="isDarkMode"
+        class="uikit-page-overlay"
+        :class="{ 
+            'uikit-page-overlay--open': openSidePanel,
+            'uikit-page-overlay--disable-transition': disableTransition
+        }"
+        role="dialog"
+        aria-modal="true"
+        tabindex="-1"
+        @keydown="keydownListener"
+    >
+        <div class="uikit-page-overlay__clickable" @click.self="emitClose" />
+        <div
+            ref="uikit-side-panel"
+            v-dark="isDarkMode"
+            class="uikit-side-panel"
+            :style="{ width: `${sidePanelWidth}px`, right: `-${sidePanelWidth}px` }"
+        >
+            <div 
+                v-dark="isDarkMode" 
+                class="uikit-side-panel__head"
+                :class="{ 
+                    'uikit-side-panel__head--has-tabs': tabs && tabs.length,
+                    'uikit-side-panel__head--has-stepped-tabs': tabs && tabs.length && steppedTabs,
+                }"
+            >
+                <div
+                    v-dark="isDarkMode"
+                    class="uikit-side-panel__close"
+                    :class="{ 'uikit-side-panel__close--has-tabs': tabs && tabs.length }"
+                    tabindex="0"
+                    aria-label="Close"
+                    @click="emitClose"
+                    @keypress="closeKeyPress($event)"
+                    @mousedown.prevent
+                >
+                    <Icon type="close" />
+                </div>
+                <div
+                    ref="uikit-side-panel__title"
+                    class="uikit-side-panel__title"
+                    :class="{ 'uikit-side-panel__title--has-tabs': tabs && tabs.length }"
+                    tabindex="-1"
+                >
+                    <h1 class="uikit-side-panel__title-inner">
+                        {{ name }}
+                    </h1>
+                </div>
+                <div
+                    v-if="tabs && tabs.length"
+                    class="uikit-side-panel__tabs"
+                    role="tablist"
+                >
+                    <div
+                        v-for="(tab, index) in tabs"
+                        :key="tab"
+                        v-dark="isDarkMode"
+                        class="uikit-side-panel__tab"
+                        :class="{ 
+                            'uikit-side-panel__tab--active': activeTabName === tab,
+                            'uikit-side-panel__tab--stepper': steppedTabs,
+                        }"
+                        tabindex="0"
+                        role="tab"
+                        :aria-selected="activeTabName === tab ? 'true' : 'false'"
+                        @click="selectTab($event, tab)"
+                        @keypress="selectTab($event, tab)"
+                        @mousedown.prevent
+                    >
+                        {{ tab }}
+                        <div v-if="steppedTabs && index < tabs.length - 1" class="uikit-side-panel__tab-arrow">
+                            <Icon type="accordionArrow" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div 
+                v-dark="isDarkMode"
+                class="uikit-side-panel__content"
+                :class="{ 'uikit-side-panel__content--has-tabs': tabs && tabs.length }"
+                :style="{ ...customContentStyles }"
+            >
+                <slot />
+            </div>
+            <div class="uikit-side-panel__foot" :class="{ 'uikit-side-panel__foot--dark': isDarkMode }">
+                <div class="uikit-side-panel__foot-left">
+                    <slot name="details" />
+                </div>
+                <div class="uikit-side-panel__foot-right">
+                    <PocketButton
+                        class="uikit-side-panel__foot-cancel"
+                        type="secondary"
+                        :is-dark-mode="isDarkMode"
+                        @click="customCancelButtonAction ? emitCloseButton() : emitClose()"
+                    >
+                        {{ cancelButtonText }}
+                    </PocketButton>
+                    <slot name="action" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import Button from '../Buttons/Button.vue'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+@Component({
+    components: {
+        Icon,
+        PocketButton: Button,
+    },
+    directives: {
+        dark,
+    },
+})
+export default class SidePanel extends Vue {
+    @Prop() name!: string
+    @Prop({ default: () => [] }) tabs!: string[]
+    @Prop({ default: undefined }) activeTabName!: string
+    @Prop({ default: false }) steppedTabs!: boolean
+    @Prop({ default: 'Cancel' }) cancelButtonText!: string
+    @Prop({ default: false }) customCancelButtonAction!: boolean
+    @Prop({ default: () => ({}) }) customContentStyles!: { [key: string]: string }
+    @Prop({ default: 'large' }) width!: 'large' | 'medium' | number
+    @Prop({ default: false }) disableTransition!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    openSidePanel = false
+    notContentHeight = this.tabs && this.tabs.length ? 262 : 218
+    focusListener: Parameters<typeof addEventListener>[1] | null = null
+    savedYPosition = 0
+
+    get sidePanelWidth () {
+        return this.width === 'large'
+            ? 572
+            : this.width === 'medium'
+                ? 460
+                : this.width
+    }
+    
+    mounted () {
+        // Focus title after opening transition
+        const sidePanelEl = this.$refs['uikit-side-panel'] as HTMLElement | undefined
+        sidePanelEl?.addEventListener('transitionend', () => {
+            const titleEl = this.$refs['uikit-side-panel__title'] as HTMLElement | undefined
+            titleEl?.focus()
+        })
+
+        // delay opening to show animation
+        setTimeout(() => {
+            this.openSidePanel = true
+        }, 1)
+
+        // Trap the user's focus within the side panel - don't allow focusing elements behind the overlay
+        this.focusListener = event => {
+            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+            const sidePanelContainerEl = this.$refs['sidepanelContainer'] as HTMLElement
+            const isFocusOutside = target && sidePanelContainerEl && !sidePanelContainerEl.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 focusableSidePanelChildren = Array.from<HTMLElement>(sidePanelContainerEl.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                ))
+                const firstFocusableSidePanelChild = focusableSidePanelChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                const reversedSidePanelChildren = [ ...focusableSidePanelChildren ].reverse()
+                const lastFocusableSidePanelChild = reversedSidePanelChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                if (firstFocusableSidePanelChild) {
+                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                    if (relatedTarget === firstFocusableSidePanelChild && lastFocusableSidePanelChild) {
+                        // If focus moves from first element -> outside side panel, focus the last element instead
+                        lastFocusableSidePanelChild.focus()
+                    } else {
+                        // If focus goes outside the side panel in any other way, focus the first element
+                        firstFocusableSidePanelChild.focus()
+                    }
+                } else {
+                    // If the side panel doesn't have any focusable children, focus the container instead
+                    if (sidePanelContainerEl.tabIndex === -1) {
+                        sidePanelContainerEl.tabIndex = 0
+                    }
+                    sidePanelContainerEl.focus()
+                }
+            }
+        }
+        document.addEventListener('focusin', this.focusListener)
+
+        // prevent scrolling outside of modal
+        const openSidePanelCount = Number(document.body.getAttribute('data-openSidePanelCount'))
+        document.body.setAttribute('data-openSidePanelCount', String(openSidePanelCount + 1))
+        document.body.classList.add('uikit-sidepanel-open')
+    }
+
+    beforeUnmount () {
+        if (this.focusListener) {
+            document.removeEventListener('focusin', this.focusListener)
+        }
+
+        const openSidePanelCount = Number(document.body.getAttribute('data-openSidePanelCount'))
+        document.body.setAttribute('data-openSidePanelCount', String(openSidePanelCount - 1))
+        if (openSidePanelCount <= 1) {
+            document.body.classList.remove('uikit-sidepanel-open')
+            document.body.scrollTo(0, 0)
+        }
+    }
+
+    selectTab (e: MouseEvent | KeyboardEvent, tabName: string) {
+        e.preventDefault()
+        this.emitSelectTab(tabName)
+    }
+
+    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()
+        }
+    }
+
+    closeKeyPress (e: KeyboardEvent) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            this.emitClose()
+        }
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+
+    @Emit('close-button')
+    emitCloseButton () {
+        return true
+    }
+
+    @Emit('selectTab')
+    emitSelectTab (tabName: string) {
+        return tabName
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-page-overlay {
+    background: rgba($brand-black, 0);
+    position: absolute;
+    left: 0;
+    top: 54px;
+    width: 100%;
+    height: calc(100% - 54px);
+    z-index: 1000;
+    outline: none;
+
+    @include breakpoint(black-bear) {
+        height: calc(100% - 10px);
+        top: 0;
+        background: transparent !important;
+    }
+
+    &--open {
+        background: rgba($brand-black, 0.15);
+        transition: 0.3s all;
+
+        & > .uikit-side-panel {
+            right: 0 !important;
+            transition: 0.3s all;
+        }
+
+        &--dark {
+            background: rgba($jet, 0.8);
+        }
+    }
+
+    &--disable-transition {
+        transition: 0s all !important;
+
+        & > .uikit-side-panel {
+            transition: 0s all !important;
+        }
+    }
+
+    &__clickable {
+        z-index: -1;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.uikit-side-panel {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background: $gray-background;
+    box-shadow: 0 1px 40px 0 rgba($pewter, 0.5);
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+
+    @include breakpoint(black-bear) {
+        top: 10px;
+        left: 0;
+        right: auto !important;
+        width: 100% !important;
+        border-radius: 8px 8px 0 0;
+    }
+
+    &--dark {
+        background: $charcoal;
+        box-shadow: 0 1px 40px 0 $jet;
+    }
+
+    &__head {
+        background: $white;
+        padding: 30px 44px 26px;
+        position: relative;
+        box-sizing: border-box;
+        border-bottom: 1px solid rgba($gray-divider, 0.5);
+        user-select: none;
+
+        @include breakpoint(black-bear) {
+            padding: 13px 29px 11px;
+            border-radius: 8px 8px 0 0;
+        }
+
+        &--has-tabs {
+            padding: 32px 64px 40px 43px;
+
+            @include breakpoint(black-bear) {
+                padding: 13px 50px 46px 29px;
+            }
+        }
+
+        &--has-stepped-tabs {
+            padding-bottom: 69px;
+        }
+
+        &--dark {
+            background: $brand-black;
+            color: $white;
+            border-bottom-color: $charcoal;
+        }
+    }
+
+    &__close {
+        position: absolute;
+        right: 26px;
+        top: 30px;
+        height: 30px;
+        width: 30px;
+        cursor: pointer;
+        font-size: 30px;
+        color: $brand-blue;
+        outline: none;
+
+        @include breakpoint(black-bear) {
+            right: 13px;
+            top: 11px;
+        }
+
+        &--has-tabs {
+            @include breakpoint(black-bear) {
+                right: 13px;
+                top: 13px;
+            }
+        }
+
+        &: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%;
+        }
+    }
+
+    &__title {
+        width: calc(100% - 38px);
+        display: flex;
+        align-items: center;
+        outline: none;
+    }
+
+    &__title-inner {
+        font-size: 26px;
+        line-height: 32px;
+        width: calc(100% - 38px);
+        font-weight: 500;
+        margin: 0;
+
+        @include breakpoint(black-bear) {
+            font-size: 22px;
+            line-height: 26px;
+        }
+    }
+
+    &__tabs {
+        position: absolute;
+        bottom: -1px;
+        left: 28px;
+        display: flex;
+
+        @include breakpoint(black-bear) {
+            left: 14px;
+        }
+    }
+
+    &__tab {
+        font-size: 16px;
+        color: $slate-01;
+        line-height: 19px;
+        position: relative;
+        padding: 6px 8px;
+        margin: 0 8px;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+            color: $brand-blue;
+        }
+
+        &:focus {
+            border-radius: 2px;
+            box-shadow: 0 0 0 1px $brand-blue;
+            outline: 0;
+        }
+
+        &--dark {
+            color: $pewter;
+
+            &:hover {
+                color: $butterscotch;
+            }
+
+            &:focus {
+                box-shadow: 0 0 0 1px $butterscotch;
+            }
+        }
+
+        &--active {
+            color: $brand-black;
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: -1px;
+                left: 0;
+                width: 100%;
+                height: 1.5px;
+                background: $brand-blue;
+            }
+
+            &--dark {
+                color: $banana-bread;
+
+                &::after {
+                    background: $banana-bread;
+                }
+            }
+        }
+
+        &--stepper {
+            font-size: 15px;
+            line-height: 18px;
+            padding: 8px 9px 7px;
+            margin-bottom: 11px;
+
+            &::after {
+                bottom: 4px;
+                left: 9px;
+                width: calc(100% - 18px);
+            }
+        }
+    }
+
+    &__tab-arrow {
+        position: absolute;
+        right: -10px;
+        top: 8px;
+        transform: rotate(-90deg);
+        color: #708a9d;
+
+        svg {
+            width: 8px;
+            height: 5px;
+        }
+    }
+
+    &__content {
+        overflow: auto;
+        padding: 36px 44px;
+        position: relative;
+        flex: 1;
+        -webkit-overflow-scrolling: touch;
+
+        @include breakpoint(black-bear) {
+            padding: 30px;
+        }
+
+        & > p {
+            color: $slate-03;
+            font-size: 15px;
+            line-height: 20px;
+            margin: 5px 0 40px;
+        }
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__foot {
+        justify-content: space-between;
+        background: $barely-background;
+        height: 56px;
+        width: 100%;
+        padding: 10px 32px;
+        display: flex;
+        box-sizing: border-box;
+        border-top: 1px solid rgba($gray-divider, 0.5);
+        align-items: center;
+
+        @include breakpoint(black-bear) {
+            padding: 10px 18px;
+        }
+
+        &--dark {
+            background: $brand-black;
+            border-top-color: $charcoal;
+        }
+    }
+
+    &__foot-right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    &__foot-cancel {
+        margin-right: 8px;
+    }
+}
+</style>