@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Forms/Input.vue

@@ -0,0 +1,310 @@
+<template>
+    <div
+        class="uikit-input"
+        @mouseout="hover = false"
+        @keydown="keydownListener"
+    >
+        <label
+            v-if="label"
+            :id="`${componentId}--label`"
+            v-dark="isDarkMode"
+            class="uikit-input__label"
+            :class="{ 
+                'uikit-input__label--hover': hover, 
+                'uikit-input__label--focus': focus, 
+                'uikit-input__label--error': error 
+            }"
+        >{{ label }}</label>
+        <div
+            v-if="fieldType === 'password'"
+            class="uikit-input__password-container"
+        >
+            <input
+                v-dark="isDarkMode"
+                :aria-labelledby="`${componentId}--label`"
+                :type="showPassword ? 'text' : 'password'"
+                :value="modelValue"
+                :disabled="disabled"
+                :maxlength="maxlength"
+                :placeholder="placeholder"
+                :name="name"
+                :autofocus="autoFocus"
+                :tabindex="tabindex"
+                class="uikit-input__input"
+                :class="{ 
+                    'uikit-input__input--hover': hover, 
+                    'uikit-input__input--focus': focus, 
+                    'uikit-input__input--error': error
+                }"
+                @input="valueChange"
+                @focus="focus = true"
+                @blur="focus = false"
+                @mouseover="hover = true"
+            >
+            <div
+                v-if="fieldType === 'password'"
+                v-dark="isDarkMode"
+                class="uikit-input__toggle-show-password"
+                tabindex="0"
+                aria-label="Show password"
+                :aria-checked="showPassword"
+                role="switch"
+                @mousedown.prevent
+                @click="showPassword = !showPassword"
+                @keyup.enter="showPassword = !showPassword"
+                @keydown.enter.stop
+            >
+                <Icon :type="showPassword ? 'eyeHide' : 'eyeShow'" />
+            </div>
+        </div>
+        <input
+            v-else
+            :id="componentId"
+            v-dark="isDarkMode"
+            :type="fieldType"
+            :value="modelValue"
+            :disabled="disabled"
+            :aria-labelledby="`${componentId}--label`"
+            :maxlength="maxlength"
+            :placeholder="placeholder"
+            :autofocus="autoFocus"
+            :tabindex="tabindex"
+            class="uikit-input__input"
+            :name="name"
+            :aria-required="ariaRequired"
+            :class="{ 
+                'uikit-input__input--hover': hover, 
+                'uikit-input__input--focus': focus, 
+                'uikit-input__input--error': error 
+            }"
+            @input="valueChange"
+            @focus="focus = true"
+            @blur="focus = false"
+            @mouseover="hover = true"
+        >
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+@Component({
+    components: {
+        Icon,
+    },
+    directives: {
+        dark,
+    },
+})
+export default class Input extends Vue {
+    @Prop() label?: string
+    @Prop({ default: 'text' }) fieldType?: string
+    @Prop({ default: '' }) placeholder?: string
+    @Prop({ default: '524288' }) maxlength?: string // that's the default input field length
+    @Prop({ default: false }) center?: boolean
+    @Prop() modelValue!: string
+    @Prop({ default: false }) disabled?: boolean
+    @Prop({ default: false }) autoFocus?: boolean
+    @Prop({ default: false }) error?: boolean
+    @Prop({ default: 0 }) tabindex?: number
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) ariaRequired!: boolean
+    @Prop({ default: '' }) name!: string
+
+    hover = false
+    focus = false
+    showPassword = false
+    
+    get componentId () {
+        if (this.label) {
+            return `input-${this.label.toLowerCase().replace(/ /g, '-')}`
+        } else {
+            return `input-${Math.round(Math.random() * 1000000)}`
+        }
+    }
+
+    keydownListener (e: Event | KeyboardEvent) {
+        if (this.focus && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+            e.stopPropagation()
+        }
+    }
+
+    @Emit('update:modelValue')
+    valueChange ($event: Event) {
+        return ($event.target as HTMLInputElement).value
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-input {
+    &__input {
+        appearance: none;
+        background-color: $white;
+        border: 1px solid rgba($pewter, 0.85);
+        color: $brand-black;
+        -webkit-text-fill-color: $brand-black;
+        -webkit-box-shadow: 0 0 0 1000px $white inset;
+        box-shadow: 0 0 0 1000px $white inset;
+        border-radius: 3px;
+        caret-color: $brand-blue;
+        padding: 9px 11px;
+        font-size: 16px;
+        line-height: 15px;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+        outline: none;
+        z-index: 2;
+
+        &::placeholder {
+            color: $pewter;
+            -webkit-text-fill-color: $pewter;
+        }
+
+        &:disabled {
+            background: $gray-background;
+            border: 1px solid $gray-background;
+            color: $slate-03;
+
+            &:placeholder {
+                color: $slate-03;
+            }
+        }
+
+        &--dark {
+            background-color: $moonlit-ocean;
+            -webkit-text-fill-color: $white;
+            -webkit-box-shadow: 0 0 0 1000px $moonlit-ocean inset;
+            box-shadow: 0 0 0 1000px $moonlit-ocean inset;
+            border-color: $pewter;
+            color: $white;
+            caret-color: $banana-bread;
+
+            &:disabled {
+                border-color: $moonlit-ocean;
+                background-color: $moonlit-ocean;
+            }
+        }
+
+        &--hover {
+            border: 1px solid $baby-blue;
+
+            &--dark {
+                border: 0.5px solid $banana-bread;
+            }
+        }
+
+        &--focus {
+            border: 1px solid $brand-blue;
+
+            &--dark {
+                border-color: $banana-bread;
+            }
+        }
+
+        &--error {
+            border: 1px solid $red-pegasus;
+
+            &--dark {
+                border-color: $rosa;
+            }
+        }
+    }
+
+    &__label {
+        font-size: 13px;
+        line-height: 14px;
+        margin: 0 0 6px 12px;
+        color: $slate-01;
+        display: block;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--hover {
+            color: $slate-03;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+
+        &--focus {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--error {
+            color: $red-pegasus;
+
+            &--dark {
+                color: $rosa;
+            }
+        }
+    }
+
+    &__password-container {
+        display: flex;
+    }
+
+    &__toggle-show-password {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 36px;
+        height: 36px;
+        color: $slate-01;
+        z-index: 1;
+        outline: none;
+        cursor: pointer;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -2px;
+            right: 0;
+            border: 1px solid rgba($pewter, 0.85);
+            border-radius: 0 3px 3px 0;
+        }
+
+        &:hover {
+            background-color: rgba($brand-black, 0.1);
+        }
+
+        &:focus {
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border: 1px solid $brand-blue;
+                border-radius: 3px;
+                z-index: 3;
+            }
+        }
+
+        &--dark {
+            color: rgba($white, 0.8);
+
+            &::before {
+                border-color: $pewter;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Forms/Radio.md

@@ -0,0 +1,66 @@
+```vue
+<template>
+    <div>
+        <Button @click="radioValue = null">Reset Radio Field</Button>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <div class="radio" :class="{ dark: isDarkMode }">
+            <Radio
+                label="Who can <strong>use</strong> it?"
+                v-model="radioValue"
+                :data="[
+                    { label: 'Colleagues in organization', helperText: 'Helper text can be added here to help', value: 1 }, 
+                    { label: 'Just me', value: 2 },
+                    { label: 'No one', value: 3 },
+                ]"
+                :isDarkMode="isDarkMode"
+            />
+
+            <Radio
+                label="Disabled radio buttons"
+                :disabled="true"
+                v-model="radioValue2"
+                :data="[
+                    { label: 'You cannot select me', value: 1 }, 
+                    { label: 'Or me', value: 2 },
+                ]"
+                :isDarkMode="isDarkMode"
+            />
+            </div>
+    </div>
+</template>
+
+<script>
+import Button from '../Buttons/Button.vue'
+
+export default {
+    components: {
+        Button
+    },
+    data() {
+        return {
+            radioValue: null,
+            radioValue2: { value: 2 },
+            isDarkMode: false,
+        }
+    }
+}
+</script>
+
+<style>
+.radio {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.uikit-btn {
+    margin-bottom: 30px;
+}
+
+.uikit-radio:last-child {
+    margin-top: 20px;
+}
+</style>
+```

package/lib/components/Forms/Radio.vue

@@ -0,0 +1,312 @@
+<template>
+    <div
+        class="uikit-radio"
+        :class="{ 'uikit-radio--selected': !!modelValue }"
+        @mouseover="hover = true"
+        @mouseout="hover = false"
+    >
+        <label
+            v-if="label"
+            :id="`uikit-radio__label-${uid}`"
+            v-dark="isDarkMode"
+            class="uikit-radio__label"
+            :class="{
+                'uikit-radio__label--hover': !disabled && hover,
+                'uikit-radio__label--focus': !disabled && hover,
+            }"
+            v-html="label"
+        />
+        <ul
+            class="uikit-radio__list"
+            role="radiogroup"
+            :aria-labelledby="label ? `uikit-radio__label-${uid}` : labelledBy || ''"
+        >
+            <li
+                v-for="item in data"
+                :key="JSON.stringify(item)"
+                ref="uikit-radio__item"
+                v-dark="isDarkMode"
+                class="uikit-radio__item"
+                :value="item.value"
+                :tabindex="disabled ? -1 : 0"
+                :class="{ 
+                    'uikit-radio__item--selected': modelValue && item.value === modelValue.value,
+                    'uikit-radio__item--disabled': disabled,
+                    'uikit-radio__item--has-helper-text': !!(item.helperText)
+                }"
+                role="radio"
+                :aria-checked="modelValue && item.value === modelValue.value"
+                :aria-label="`${item.label}${ item.helperText ? ` ${item.helperText}` : '' }`"
+                @click="!disabled && selectItem(item)"
+                @keydown.enter.space="keyPressedItem"
+                @mousedown.prevent
+            >
+                <slot name="radioItem" :item="item">
+                    <div 
+                        v-dark="isDarkMode" 
+                        class="uikit-radio__item-btn" 
+                        :class="{ 
+                            'uikit-radio__item-btn--selected': modelValue && item.value === modelValue.value,
+                            'uikit-radio__item-btn--disabled': disabled,
+                            'uikit-radio__item-btn--selected--disabled': disabled && modelValue 
+                                && item.value === modelValue.value,
+                        }"
+                        aria-hidden="true"
+                    />
+                    <div class="uikit-radio__item-text" aria-hidden="true">
+                        <slot name="radioItemLabel" :item="item">
+                            <div class="uikit-radio__item-label" v-html="item.label" />
+                            <div
+                                v-if="item.helperText"
+                                v-dark="isDarkMode"
+                                class="uikit-radio__item-helper-text"
+                                v-html="item.helperText" 
+                            />
+                        </slot>
+                    </div>
+                </slot>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+interface IItem {
+    value: string
+    label: string
+    helperText?: string
+}
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Radio extends Vue {
+    @Prop() label?: string
+    @Prop() data!: IItem[]
+    @Prop() center?: boolean
+    @Prop() modelValue!: IItem
+    @Prop() disabled?: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) labelledBy!: string | false
+    
+    uid = Math.floor(Math.random() * 1e9)
+    hover = false
+    focus = false
+
+    @Emit('update:modelValue')
+    selectItem (item: IItem) {
+        return item
+    }
+
+    keyPressedItem (e: KeyboardEvent) {
+        // select option on enter or space
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            const itemValue = (e.target as HTMLElement).getAttribute('value')
+            const item = this.data.find(i => String(i.value) === itemValue)
+            item && this.selectItem(item)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-radio {
+    &__label {
+        font-size: 13px;
+        line-height: 14px;
+        margin: 0 0 6px 0;
+        color: $slate-01;
+        display: block;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--hover {
+            color: $slate-03;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+
+        &--focus {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+    }
+
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &__item {
+        font-size: 15px;
+        line-height: 20px;
+        color: $slate-03;
+        padding: 4px 0;
+        border-radius: 4px;
+        cursor: default;
+        display: flex;
+        align-content: center;
+        user-select: none;
+        outline: none;
+        position: relative;
+        z-index: 1;
+
+        &::before {
+            content: '';
+            top: 0;
+            left: -6px;
+            right: -6px;
+            width: calc(100% + 12px);
+            height: 100%;
+            display: none;
+            position: absolute;
+            background: $gray-background;
+            border-radius: 4px;
+            z-index: -1;
+        }
+
+        &::after {
+            content: '';
+            top: 0;
+            left: -6px;
+            right: -6px;
+            width: calc(100% + 12px);
+            height: 100%;
+            display: none;
+            position: absolute;
+            border: 1px solid $brand-blue;
+            border-radius: 4px;
+            z-index: -1;
+            box-sizing: border-box;
+        }
+
+        &:hover:not(.uikit-radio__item--disabled)::before,
+        &:focus:not(.uikit-radio__item--disabled)::after {
+            display: block;
+        }
+
+        &--dark {
+            color: rgba($white, 0.7);
+
+            &::before {
+                background-color: $moonlit-ocean;
+            }
+
+            &::after {
+                border-color: $banana-bread;
+            }
+        }
+
+        &--selected {
+            color: $brand-black;
+
+            &--dark {
+                color: $white;
+            }
+        }
+
+        &--has-helper-text {
+            margin-bottom: 14px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__item-text {
+        flex: 1;
+    }
+
+    &__item-helper-text {
+        margin-top: 2px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 19px;
+        color: $slate-03;
+
+        &--dark {
+            color: $pewter;
+        }
+    }
+
+    &__item-btn {
+        width: 18px;
+        height: 18px;
+        margin-right: 12px;
+        border: 1px solid $steel;
+        background: $white;
+        border-radius: 18px;
+        position: relative;
+        box-sizing: border-box;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 12px;
+            height: 12px;
+            border-radius: 12px;
+            background: $brand-blue;
+            display: none;
+        }
+
+        &--dark {
+            background-color: transparent;
+            border-color: $pewter;
+
+            &::before {
+                background: $banana-bread;
+            }
+        }
+
+        &--disabled {
+            background-color: $fog;
+            opacity: 0.6;
+            border-color: rgba($steel, 0.6);
+
+            &--dark {
+                background-color: $moonlit-ocean;
+                border-color: $slate;
+                opacity: 1;
+            }
+        }
+
+        &--selected {
+            border-color: $brand-blue;
+            background: transparent;
+
+            &--dark {
+                border-color: $banana-bread;
+            }
+
+            &--disabled {
+                opacity: 0.4;
+            }
+
+            &::before {
+                display: block;
+            }
+        }
+    }
+}
+</style>