@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Buttons/Link.vue

@@ -0,0 +1,192 @@
+<template>
+    <a
+        v-dark="isDarkMode"
+        class="uikit-link"
+        :class="{
+            [`uikit-link--${type}`]: true,
+            'uikit-link--has-icon': hasIcon,
+            'uikit-link--disabled': disabled,
+        }"
+        :href="href"
+        :target="target"
+        @click="clicked"
+        @mousedown.prevent
+    >
+        <slot />
+    </a>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+type TLinkType = 'tertiary' | 'tertiary-red' | 'tertiary-small'
+
+/**
+ * @see [Designs for Buttons](https://marvelapp.com/adf8ab3/screen/68221507)
+ */
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Link extends Vue {
+    @Prop({ default: 'tertiary' }) readonly type!: TLinkType
+    @Prop({ default: '#' }) readonly href!: string
+    @Prop({ default: '_self' }) readonly target!: string
+    @Prop({ default: false }) readonly disabled!: boolean
+    @Prop({ default: false }) readonly hasIcon!: boolean
+    @Prop({ default: false }) readonly isDarkMode!: boolean
+
+    @Emit('click')
+    clicked (event: MouseEvent) {
+        if (this.href === '#') {
+            event.preventDefault()
+        }
+        return event
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-link {
+    outline: none;
+    position: relative;
+
+    &:focus::before {
+        content: '';
+        position: absolute;
+        left: -3px;
+        top: 0;
+        height: 100%;
+        width: calc(100% + 4px);
+        border: 1px solid $brand-blue;
+        border-radius: 4px;
+    }
+
+    &--dark:focus::before {
+        border-color: $butterscotch;
+    }
+
+    &--tertiary,
+    &--tertiary-red,
+    &--tertiary-small {
+        line-height: 20px;
+        background-color: transparent;
+        user-select: none;
+        outline: none;
+        text-decoration: none;
+        font-weight: 600;
+    }
+
+    &--tertiary,
+    &--tertiary-red {
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 18px;
+    }
+
+    &--tertiary-small {
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &--tertiary,
+    &--tertiary-small {
+        color: $brand-blue;
+
+        &:not(.uikit-link--disabled) {
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:hover,
+            &:focus {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            &:active {
+                color: mix($brand-blue, black, 80%);
+            }
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:not(.uikit-link--disabled) {
+                &:hover {
+                    color: $butterscotch !important;
+                }
+
+                &:focus {
+                    color: $butterscotch;
+
+                    &::before {
+                        border-color: $butterscotch;
+                    }
+                }
+            }
+        }
+    }
+
+    &--tertiary-red {
+        color: $pepper;
+
+        &:not(.uikit-link--disabled) {
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:hover,
+            &:focus {
+                color: mix($pepper, black, 90%);
+            }
+
+            &:focus::before {
+                border-color: mix($pepper, black, 90%);
+            }
+
+            &:active {
+                color: mix($pepper, black, 80%);
+            }
+        }
+
+        &--dark {
+            color: $rosa;
+
+            &:not(.uikit-link--disabled) {
+                &:hover,
+                &:focus {
+                    color: mix($rosa, black, 90%);
+                }
+
+                &:focus::before {
+                    border-color: mix($rosa, black, 90%);
+                }
+            }
+        }
+    }
+
+    &--has-icon {
+        &:focus::before {
+            height: 26px;
+            width: calc(100% + 12px);
+            top: 50%;
+            left: -4px;
+            margin-top: -14px;
+        }
+
+        &:hover {
+            text-decoration: none !important;
+            color: $brand-black;
+        }
+    }
+
+    &--disabled {
+        opacity: 0.4;
+        cursor: default;
+    }
+}
+</style>

package/lib/components/Buttons/Tab.md

@@ -0,0 +1,35 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <Tab :active="isActive" @click="isActive = !isActive">All Studying</Tab>
+            <Tab :disabled="true">Disabled Tab</Tab>
+        </div>
+        <div class="dark">
+            <Tab :isDarkMode="true" :active="isActive" @click="isActive = !isActive">All Studying</Tab>
+            <Tab :isDarkMode="true" :disabled="true">Disabled Tab</Tab>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            isActive: false
+        }
+    }
+}
+</script>
+
+<style>
+.dark,
+.light {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+</style>
+```

package/lib/components/Buttons/Tab.vue

@@ -0,0 +1,103 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-tab"
+        :class="{ 'uikit-tab--disabled': disabled, 'uikit-tab--active': active }"
+        :tabindex="disabled ? -1 : 0"
+        @click="emitClick()"
+        @keydown.enter="emitClick()"
+        @mousedown.prevent
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Tab extends Vue {
+    @Prop({ default: false }) disabled!: boolean
+    @Prop({ default: false }) active!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    @Emit('click')
+    emitClick () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-tab {
+    color: $brand-blue;
+    font-size: 14px;
+    line-height: 17px;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    padding: 0 3px 3px;
+
+    @media (hover: hover) {
+        &:hover {
+            color: mix($brand-blue, black, 90%);
+        }
+    }
+
+    &:focus::before {
+        content: '';
+        border: 1px solid $brand-blue;
+        border-radius: 4px;
+        left: -1px;
+        top: -3px;
+        position: absolute;
+        height: 21px;
+        width: 100%;
+    }
+
+    &--disabled {
+        opacity: 0.6;
+    }
+
+    &--active {
+        font-weight: 600;
+
+        &::after {
+            content: '';
+            left: 0;
+            bottom: -2px;
+            height: 2px;
+            width: 100%;
+            background: $brand-blue;
+            position: absolute;
+        }
+    }
+
+    &--dark {
+        color: $banana-bread;
+
+        @media (hover: hover) {
+            &:hover {
+                color: $butterscotch;
+            }
+        }
+
+        &:focus::before {
+            border-color: $butterscotch;
+        }
+
+        &::after {
+            background: $banana-bread;
+        }
+    }
+}
+</style>

package/lib/components/Calendar/Calendar.md

@@ -0,0 +1,18 @@
+```vue
+<template>
+    <div>
+        Selected Date: {{ calendar }}
+        <Calendar label="Scheduled Exam Date" placeholder="Set Exam Date" v-model="calendar" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            calendar: null,
+        }
+    }
+}
+</script>
+```

package/lib/components/Calendar/Calendar.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="uikit-calendar">
+        <Input
+            v-model="dateString"
+            :label="label"
+            class="uikit-calendar__input"
+            :placeholder="placeholder"
+            :is-dark-mode="isDarkMode"
+            disabled
+            @update:modelValue="processDateString"
+            @click="calendar && calendar.show()"
+        />
+        <div
+            ref="calendarToggle"
+            v-dark="isDarkMode"
+            class="uikit-calendar__icon"
+            :class="{ 'uikit-calendar__icon--hover': hover, 'uikit-calendar__icon--focus': focus }"
+            tabindex="0"
+            @keydown.stop.prevent.enter="calendar && calendar.show()"
+            @click="calendar && calendar.show()"
+        >
+            <Icon type="calendar" />
+        </div>
+        <div
+            ref="calendar"
+            class="uikit-calendar__trigger"
+            :tabindex="-1"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Input from '../Forms/Input.vue'
+import Icon from '../Icons/Icon.vue'
+import Litepicker from 'litepicker'
+import 'litepicker/dist/plugins/keyboardnav'
+import type { DateTime } from 'litepicker/dist/types/datetime'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Input,
+        Icon,
+    },
+})
+export default class Calendar extends Vue {
+    @Prop() label!: string
+    @Prop({ default: '' }) placeholder!: string
+    @Prop() modelValue!: Date | null
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    calendar: null | Litepicker = null
+    calendarInput = this.modelValue
+    dateString = this.modelValue ? this.modelValue.toLocaleDateString() : ''
+    hover = false
+    focus = false
+    afterCalendarTab = -1
+
+    beforeUnmount () {
+        this.calendar?.destroy()
+    }
+
+    mounted () {
+        this.calendar = new Litepicker({
+            element: this.$refs.calendar as HTMLElement,
+            plugins: [ 'keyboardnav' ],
+            firstDay: 0,
+            setup: picker => {
+                picker.on('selected', (date: DateTime) => {
+                    this.calendarInput = date.toJSDate()
+                    this.dateString = this.calendarInput.toLocaleDateString()
+                    this.emitUpdateModelValue(this.calendarInput)
+                })
+                picker.on('show', () => {
+                    this.$nextTick(() => {
+                        const calendarEls = Array.from<HTMLElement>(document.querySelectorAll('.litepicker'))
+                        const visibleCalendarEl = calendarEls.find(el => el.getBoundingClientRect().height)
+                        const focusableEl = visibleCalendarEl?.querySelector(
+                            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                        ) as HTMLElement
+                        focusableEl.focus()
+                    })
+                })
+                picker.on('hide', () => {
+                    const calendarToggle = ((
+                        this.$refs['calendarToggle'] as ComponentPublicInstance | undefined
+                    )?.$el)
+                    calendarToggle?.focus()
+                    calendarToggle?.blur()
+                })
+            },
+        })
+    }
+
+    processDateString () {
+        const inputDate = new Date(this.dateString)
+        if (inputDate && inputDate.toLocaleDateString() !== this.calendarInput?.toLocaleDateString()) {
+            this.calendarInput = inputDate
+            this.emitUpdateModelValue(this.calendarInput)
+        }
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (calendarInput: Date) {
+        return calendarInput
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-calendar {
+    position: relative;
+
+    &__trigger {
+        width: 1px;
+        height: 1px;
+    }
+
+    &__icon {
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        color: $brand-blue;
+        outline: none;
+
+        &: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;
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

package/lib/components/Charts/Bar.md

@@ -0,0 +1,123 @@
+```vue
+<template>
+    <div class="bar-example">
+        <div class="light">
+            <div class="bar-container">
+                <Bar
+                    title="Multiple Column Percent Chart"
+                    type="percent"
+                    size="small"
+                    :data="[{
+                        'y': 50
+                    }, {
+                        'y': 0
+                    }, {
+                        'y': 100
+                    }, {
+                        'y': 90
+                    }, {
+                        'y': 70
+                    }, {
+                        'y': 80
+                    }]"
+                />
+                <div class="bar-x-axis-multi">
+                    <span>Oldest</span>
+                    <span>Most Recent</span>
+                </div>
+            </div>
+            <div class="bar-container">
+                <Bar
+                    title="Single Column Percent Chart"
+                    type="percent"
+                    size="small"
+                    :data="[{
+                        info: '05.25.1992',
+                        'y': 50
+                    }]"
+                />
+                <div class="bar-x-axis-single">
+                    <span>12/31</span>
+                </div>
+            </div>
+        </div>
+        <div class="dark">
+            <div class="bar-container">
+                <Bar
+                    title="Multiple Column Percent Chart"
+                    type="percent"
+                    :isDarkMode="true"
+                    size="small"
+                    :data="[{
+                        'y': 50
+                    }, {
+                        'y': 0
+                    }, {
+                        'y': 100
+                    }, {
+                        'y': 90
+                    }, {
+                        'y': 70
+                    }, {
+                        'y': 80
+                    }]"
+                />
+                <div class="bar-x-axis-multi">
+                    <span>Oldest</span>
+                    <span>Most Recent</span>
+                </div>
+            </div>
+            <div class="bar-container">
+                <Bar
+                    title="Single Column Percent Chart"
+                    type="percent"
+                    size="small"
+                    :isDarkMode="true"
+                    :data="[{
+                        info: '05.25.1992',
+                        'y': 50
+                    }]"
+                />
+                <div class="bar-x-axis-single">
+                    <span>12/31</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+.bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 40%;
+}
+
+.bar-x-axis-multi {
+    width: 85%;
+    display: flex;
+    justify-content: space-between;
+    margin-right: 45px;
+}
+
+.bar-x-axis-single {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-right: 45px;
+}
+
+.dark,
+.light {
+    display: flex;
+    justify-content: space-around;
+    height: 350px;
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+</style>
+```