@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Forms/Checkbox.vue

@@ -0,0 +1,184 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-checkbox"
+        :class="{
+            'uikit-checkbox--focus': focus,
+            'uikit-checkbox--disabled': disabled,
+            'uikit-checkbox--checked': modelValue === true,
+            'uikit-checkbox--checked--disabled': disabled && modelValue === true,
+            'uikit-checkbox--indeterminate': modelValue === null
+        }"
+        :tabindex="disabled ? -1 : 0"
+        :aria-checked="modelValue === true ? true : modelValue === null ? 'mixed' : false"
+        role="checkbox"
+        :aria-hidden="hasLabel"
+        @keypress.enter.prevent="!disabled && toggleCheckbox()"
+        @keypress.space.prevent="!disabled && toggleCheckbox()"
+        @click="!disabled && toggleCheckbox()"
+        @focus="focus = true"
+        @blur="focus = false"
+        @mousedown.prevent
+    >
+        <Icon
+            v-if="modelValue === true"
+            v-dark="isDarkMode"
+            type="check"
+            class="uikit-checkbox__check"
+        />
+        <div
+            v-if="modelValue === null"
+            v-dark="isDarkMode"
+            class="uikit-checkbox__line"
+            :class="{ 'uikit-checkbox__line--disabled': disabled }"
+        />
+    </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 Checkbox extends Vue {
+    @Prop() modelValue!: boolean | null
+    @Prop() disabled?: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) hasLabel!: boolean
+
+    hover = false
+    focus = false
+
+    @Emit('update:modelValue')
+    toggleCheckbox () {
+        return !this.modelValue
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-checkbox {
+    background: $white;
+    border: 1px solid $steel;
+    border-radius: 2px;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+        content: '';
+        left: -3px;
+        top: -3px;
+        position: absolute;
+        width: calc(100% + 6px);
+        height: calc(100% + 6px);
+        border: 1px solid $brand-blue;
+        border-radius: 2px;
+        box-sizing: border-box;
+        display: none;
+    }
+
+    &--dark {
+        border-color: $pewter;
+        background-color: transparent;
+
+        &::before {
+            border-color: $banana-bread;
+        }
+    }
+
+    &--focus:not(&--disabled)::before {
+        display: block;
+    }
+
+    &--checked {
+        background: $brand-blue;
+        border: 1px solid $brand-blue;
+
+        &--dark {
+            background: $banana-bread;
+            border-color: $banana-bread;
+        }
+
+        &--disabled--dark {
+            border-color: $ash !important;
+            background: $ash !important;
+        }
+    }
+
+    &--indeterminate {
+        border-color: $brand-blue;
+
+        &--dark {
+            border-color: $banana-bread;
+        }
+    }
+
+    &--disabled {
+        background: $fog;
+        border: 1px solid $steel;
+        cursor: default;
+
+        &--dark {
+            background-color: $moonlit-ocean;
+            border-color: $slate;
+        }
+    }
+
+    &--checked#{&}--disabled {
+        background: $steel;
+    }
+
+    &__check {
+        color: $white;
+        width: 12px;
+        height: 11.5px;
+        margin-top: 2px;
+
+        &--dark {
+            color: $brand-black;
+        }
+    }
+
+    &__line {
+        width: 10px;
+        height: 2px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -5px;
+        margin-top: -1px;
+        border-radius: 2px;
+        background-color: $brand-blue;
+
+        &--dark {
+            background-color: $banana-bread;
+        }
+
+        &--disabled {
+            background-color: $steel;
+
+            &--dark {
+                background-color: $slate;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Forms/CheckboxOption.md

@@ -0,0 +1,37 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <CheckboxOption label="Test Label" v-model="checkboxValue1" />
+        </div>
+        <div class="dark">
+            <CheckboxOption :isDarkMode="true" label="Test Label" v-model="checkboxValue1" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checkboxValue1: true,
+        }
+    }
+}
+</script>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+button {
+    margin-bottom: 20px;
+}
+</style>
+```

package/lib/components/Forms/CheckboxOption.vue

@@ -0,0 +1,173 @@
+<template>
+    <div
+        v-if="checkboxId"
+        v-dark="isDarkMode"
+        class="uikit-checkbox-option"
+        :class="{ 'uikit-checkbox-option--selected': modelValue }"
+        tabindex="0"
+        :aria-labelledby="checkboxId"
+        role="checkbox"
+        :aria-checked="modelValue === true ? true : modelValue === null ? 'mixed' : false"
+        @click="emitUpdateModelValue(!modelValue)"
+        @keydown.enter="emitUpdateModelValue(!modelValue)"
+        @mousedown.prevent
+    >
+        <Checkbox
+            :modelValue="modelValue"
+            tabindex="-1"
+            :disabled="false"
+            class="uikit-checkbox-option__checkbox"
+            :is-dark-mode="isDarkMode"
+            :has-label="true"
+        />
+        <label :id="checkboxId" class="uikit-checkbox-option__label">
+            {{ label }}
+        </label>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Checkbox from '../Forms/Checkbox.vue'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Checkbox,
+    },
+})
+export default class CheckboxOption extends Vue {
+    @Prop({ default: false }) modelValue!: boolean | null
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop() label!: string
+
+    checkboxId: null | string = null
+
+    mounted () {
+        this.checkboxId = `checkbox-${Math.round(Math.random() * 1000000)}`
+    }
+
+    @Emit('update:modelValue')
+    emitUpdateModelValue (val: boolean) {
+        return val
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.uikit-checkbox-option {
+    font-size: 15px;
+    line-height: 20px;
+    color: $slate;
+    padding: 4px 0;
+    border-radius: 4px;
+    cursor: default;
+    display: flex;
+    align-items: flex-start;
+    user-select: none;
+    outline: none;
+    position: relative;
+    z-index: 1;
+
+    &:hover {
+        label {
+            color: $slate-03;
+        }
+
+        &::before {
+            display: block;
+        }
+    }
+
+    &:focus {
+        label {
+            color: $brand-blue;
+        }
+
+        &::after {
+            display: block;
+        }
+    }
+
+    &--dark {
+        color: rgba($white, 0.72);
+
+        &:hover {
+            label {
+                color: rgba($white, 0.72);
+            }
+
+            &::before {
+                background-color: $pickled-bluewood;
+            }
+        }
+
+        &:focus {
+            label {
+                color: $white;
+            }
+
+            &::after {
+                border-color: $butterscotch;
+            }
+        }
+    }
+
+    &::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;
+    }
+
+    &--selected {
+        color: $brand-black;
+
+        &--dark {
+            color: $white;
+
+            label {
+                color: $white !important;
+            }
+        }
+    }
+
+    &__label {
+        margin-left: 12px;
+        width: calc(100% - 27px);
+    }
+
+    &__checkbox {
+        cursor: auto;
+        margin-top: 1px;
+    }
+}
+</style>

package/lib/components/Forms/Errors.md

@@ -0,0 +1,23 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <Errors :errors="['Error example', 'This is another possible error']" />
+        </div>
+        <div class="dark">
+            <Errors :isDarkMode="true" :errors="['Error example', 'This is another possible error']" />
+        </div>
+    </div>
+</template>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+</style>
+```

package/lib/components/Forms/Errors.vue

@@ -0,0 +1,109 @@
+<template>
+    <div
+        ref="uikit-errors"
+        v-dark="isDarkMode"
+        class="uikit-errors"
+        :class="{ 'uikit-errors__list': filteredErrors.length > 1 }"
+        tabindex="-1"
+    >
+        <Icon
+            v-dark="isDarkMode"
+            class="uikit-errors__icon"
+            type="warning"
+        />
+        <slot name="errors">
+            <div
+                v-for="error in filteredErrors"
+                :key="error"
+                v-dark="isDarkMode"
+                class="uikit-errors__error"
+            >
+                <slot name="error" :error="error">
+                    {{ error }}
+                </slot>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+    components: {
+        Icon,
+    },
+})
+export default class Errors extends Vue {
+    @Prop({ default: () => ([]) }) errors!: string[]
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    get filteredErrors () {
+        return [ ...new Set(this.errors) ]
+    }
+
+    mounted () {
+        const errorsEl = this.$refs['uikit-errors'] as HTMLElement | undefined
+        errorsEl?.focus()
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-errors {
+    border: 1px solid rgba($red-pegasus, 0.5);
+    position: relative;
+    border-radius: 3px;
+    padding: 8px 8px 7px 38px;
+    background-color: $red-hint;
+    outline: none;
+
+    &--dark {
+        background-color: rgba($brand-red, 0.3);
+        border-color: rgba($rosa, 0.5);
+    }
+
+    &__list {
+        .uikit-errors__error {
+            &::before {
+                content: '•';
+                display: inline-block;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        top: 8px;
+        left: 12px;
+        height: 20px;
+
+        &--dark {
+            color: $white;
+        }
+    }
+
+    &__error {
+        color: $brand-black;
+        font-size: 14px;
+        line-height: 19px;
+
+        &--dark {
+            color: $white;
+
+            &::before {
+                color: $white;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Forms/Input.md

@@ -0,0 +1,63 @@
+```vue
+<template>
+    <div class="inputs" :class="{ dark: isDarkMode }">
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <Input
+            label="Standard Input Field"
+            placeholder="Transfiguration Year Ones"
+            v-model="inputVal1"
+            :isDarkMode="isDarkMode"
+        />
+        <Input
+            label="Disabled Input Field"
+            placeholder="Transfiguration Year Ones"
+            :disabled="true"
+            v-model="inputVal2"
+            :isDarkMode="isDarkMode"
+        />
+        <Input
+            label="Password Field"
+            placeholder="6+ characters"
+            v-model="inputVal3"
+            fieldType="password"
+            :isDarkMode="isDarkMode"
+        />
+    </div>
+</template>
+
+<script>
+import Button from '../Buttons/Button.vue'
+
+export default {
+    components: {
+        Button
+    },
+    data() {
+        return {
+            inputVal1: null,
+            inputVal2: null,
+            inputVal3: null,
+            isDarkMode: false
+        }
+    }
+}
+</script>
+
+<style>
+.inputs {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.uikit-btn {
+    margin-bottom: 30px;
+}
+
+.uikit-input {
+    margin-bottom: 20px;
+}
+</style>
+```