@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Buttons/Button.md

@@ -0,0 +1,99 @@
+```vue
+<template>
+    <div>
+        <Button @click="allDisabled = !allDisabled">Toggle Disabled Status</Button>
+        <div class="white">
+            <h3>White Background</h3>
+            <Button :disabled="allDisabled">Primary</Button>
+            <Button :isLoading="true" :disabled="allDisabled">Primary Loading</Button>
+            <Button type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
+            <Button type="primary-red" :disabled="allDisabled">Primary Red</Button>
+            <Button type="secondary" :disabled="allDisabled">Secondary</Button>
+            <Button type="tertiary" :disabled="allDisabled">Tertiary</Button>
+            <Button type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
+            <Button type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
+            <Button type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
+            <Button type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
+            <Button type="icon" icon="add" :disabled="allDisabled" />
+        </div>
+        <div class="gray">
+            <h3>Gray Background</h3>
+            <Button :disabled="allDisabled">Primary</Button>
+            <Button :isLoading="true" :disabled="allDisabled">Primary Loading</Button>
+            <Button type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
+            <Button type="primary-red" :disabled="allDisabled">Primary Red</Button>
+            <Button type="secondary" :disabled="allDisabled">Secondary</Button>
+            <Button type="tertiary" :disabled="allDisabled">Tertiary</Button>
+            <Button type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
+            <Button type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
+            <Button type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
+            <Button type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
+            <Button type="icon" icon="add" :disabled="allDisabled" />
+        </div>
+        <div class="dark">
+            <h3>Dark Mode</h3>
+            <Button :isDarkMode="true" :disabled="allDisabled">Primary</Button>
+            <Button :isDarkMode="true" :isLoading="true" :disabled="allDisabled">Primary</Button>
+            <Button :isDarkMode="true" type="primary-yellow" :disabled="allDisabled">Primary Yellow</Button>
+            <Button :isDarkMode="true" type="primary-red" :disabled="allDisabled">Primary Red</Button>
+            <Button :isDarkMode="true" type="secondary" :disabled="allDisabled">Secondary</Button>
+            <Button :isDarkMode="true" type="tertiary" :disabled="allDisabled">Tertiary</Button>
+            <Button :isDarkMode="true" type="tertiary-red" :disabled="allDisabled">Tertiary Red</Button>
+            <Button :isDarkMode="true" type="tertiary-small" :disabled="allDisabled">Tertiary Small</Button>
+            <Button :isDarkMode="true" type="tertiary-red-small" :disabled="allDisabled">Tertiary Red Small</Button>
+            <Button :isDarkMode="true" type="icon" icon="filter" :disabled="allDisabled">Icon</Button>
+            <Button :isDarkMode="true" type="icon" icon="add" :disabled="allDisabled" />
+        </div>
+        <div class="dark">
+            <h3>Dark Background</h3>
+            <Button type="secondary-yellow-dark" :disabled="allDisabled">Secondary Yellow Dark</Button>
+            <Button type="icon-yellow" icon="filter" :disabled="allDisabled">Icon Yellow</Button>
+            <Button type="icon-yellow" icon="add" :disabled="allDisabled" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            allDisabled: false
+        }
+    }
+}
+</script>
+
+<style>
+.white,
+.gray,
+.dark {
+    margin: 10px 0;
+    padding: 20px;
+    border: 1px solid #1f3545;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.white {
+    background-color: #fff;
+}
+
+.gray {
+    background-color: #fbfbfd;
+}
+
+.dark {
+    color: white;
+    background-color: #1f3545;
+}
+
+h3 {
+    width: 100%;
+}
+
+button {
+    margin: 4px;
+}
+</style>
+```

package/lib/components/Buttons/Button.vue

@@ -0,0 +1,496 @@
+<template>
+    <button
+        v-dark="isDarkMode"
+        class="uikit-btn"
+        :class="{
+            [`uikit-btn--${type}`]: true,
+            [`uikit-btn--${type}--is-loading`]: isLoading,
+            'uikit-btn--icon--no-text': !$slots.default?.(),
+        }"
+        :disabled="disabled"
+        tabindex="0"
+        @click="buttonClicked"
+        @mousedown.prevent
+    >
+        <Icon
+            v-if="isLoading"
+            v-dark="isDarkMode"
+            aria-label="Loading"
+            role="alert"
+            type="loading2"
+            class="uikit-btn__loading-icon"
+            :is-dark-mode="isDarkMode"
+        />
+        <div class="uikit-btn__content" :class="{ 'uikit-btn__content--is-loading': isLoading }">
+            <Icon
+                v-if="icon && (type === 'icon' || type === 'icon-yellow')"
+                v-dark="isDarkMode"
+                class="uikit-btn-icon__icon"
+                :class="{
+                    'uikit-btn-icon__icon--no-text': !$slots.default?.(),
+                }"
+                :title="iconTitle"
+                :type="icon"
+            />
+            <slot />
+        </div>
+    </button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import type { TIconType } from '../Icons/icon'
+import { dark } from '../../directives'
+
+type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary' 
+| 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon' 
+| 'icon-yellow'
+
+@Component({
+    components: {
+        Icon,
+    },
+    directives: {
+        dark,
+    },
+})
+export default class Button extends Vue {
+    @Prop({ default: 'primary' }) readonly type!: TButtonType
+    @Prop({ default: false }) readonly disabled!: boolean
+    @Prop({ default: false }) readonly isDarkMode!: boolean
+    @Prop({ default: null }) readonly icon!: TIconType
+    @Prop({ default: '' }) readonly iconTitle!: string
+    @Prop({ default: false }) isLoading!: boolean
+
+    buttonClicked () {
+        if (!this.disabled && !this.isLoading) {
+            this.emitClick()
+        }
+    }
+
+    @Emit('click')
+    emitClick () {
+        return true
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-btn {
+    position: relative;
+    cursor: pointer;
+
+    &__loading-icon {
+        margin: -2px 0;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -11.5px;
+        margin-top: -11.5px;
+
+        .uikit-loading {
+            border-color: $barely-blue;
+            border-top-color: $baby-blue;
+        }
+
+        &--dark {
+            .uikit-loading {
+                border-color: $brand-black;
+                border-top-color: $buttermilk;
+            }
+        }
+    }
+
+    &__content {
+        &--is-loading {
+            color: transparent;
+            opacity: 0;
+        }
+    }
+
+    &--primary,
+    &--primary-yellow,
+    &--primary-red,
+    &--secondary,
+    &--secondary-yellow-dark {
+        font-size: 15px;
+        line-height: 18px;
+        padding: 11px 18px 10px;
+        border-radius: 4px;
+        border: none;
+        user-select: none;
+        outline: none;
+        font-weight: 600;
+
+        @include breakpoint(brown-bear) {
+            padding: 13px 18px 12px;
+        }
+
+        &:enabled:focus::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            bottom: -2px;
+            left: -2px;
+            right: -2px;
+            border: 1px solid $brand-blue;
+            border-radius: 6px;
+        }
+
+        &--dark:enabled:focus::before {
+            border-color: $butterscotch;
+        }
+    }
+
+    &--primary {
+        background-color: $brand-blue;
+        color: $white;
+
+        &:enabled {
+            &:hover {
+                background-color: mix($brand-blue, black, 90%);
+            }
+
+            &:active {
+                background-color: mix($brand-blue, black, 80%);
+            }
+        }
+
+        &--dark {
+            background-color: $banana-bread;
+            color: $brand-black;
+
+            &:enabled {
+                &:hover {
+                    background-color: $butterscotch;
+                }
+
+                &:active {
+                    background-color: mix($butterscotch, black, 80%);
+                }
+            }
+        }
+
+        &--is-loading {
+            cursor: default;
+            background-color: mix($brand-blue, black, 90%) !important;
+
+            &--dark {
+                background-color: $butterscotch !important;
+            }
+        }
+    }
+
+    &--primary-yellow {
+        background-color: $banana-bread;
+        color: $brand-black;
+        font-size: 15px;
+        font-weight: 600;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                background-color: $butterscotch;
+            }
+        }
+
+        &:disabled {
+            opacity: 0.59;
+        }
+    }
+
+    &--primary-red {
+        background-color: $red-pegasus;
+        color: $white;
+        font-size: 15px;
+        font-weight: 600;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                background-color: mix($red-pegasus, black, 90%);
+            }
+        }
+
+        &:disabled {
+            opacity: 0.3;
+        }
+
+        &--dark {
+            background-color: $rosa;
+            color: $brand-black;
+
+            &:enabled {
+                &:hover,
+                &:active {
+                    background-color: mix($rosa, black, 90%);
+                }
+            }
+        }
+    }
+
+    &--secondary {
+        background-color: transparent;
+        color: $brand-blue;
+        font-size: 15px;
+        font-weight: 600;
+
+        &:enabled {
+            &:hover {
+                background-color: mix($barely-background, black, 96%);
+            }
+
+            &:active {
+                background-color: mix($gray-background, black, 92%);
+            }
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:focus {
+                    background-color: transparent;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 100%;
+                        background-color: mix($barely-background, black, 96%);
+                        opacity: 0.1;
+                        border-radius: 4px;
+                    }
+                }
+
+                &:active {
+                    background-color: $ash;
+                }
+            }
+        }
+    }
+
+    &--secondary-yellow-dark {
+        font-size: 15px;
+        font-weight: 600;
+        background-color: rgba($cream-puff, 0.14);
+        border-radius: 6px;
+        color: $banana-bread;
+
+        &:disabled {
+            background-color: transparent;
+        }
+
+        &:enabled {
+            &:hover {
+                background-color: rgba($cream-puff, 0.26);
+            }
+
+            &:focus {
+                &::before {
+                    border: 1px solid $butterscotch;
+                }
+            }
+
+            &:active {
+                background-color: rgba($cream-puff, 0.3);
+            }
+        }
+    }
+
+    &--tertiary,
+    &--tertiary-red,
+    &--tertiary-small,
+    &--tertiary-red-small {
+        font-size: 15px;
+        background-color: transparent;
+        border: none;
+        user-select: none;
+        outline: none;
+        font-weight: 600;
+        padding: 0;
+        text-decoration: none;
+
+        &:enabled:hover {
+            text-decoration: underline;
+            color: mix($brand-blue, black, 90%);
+        }
+
+        &:enabled:focus::before {
+            content: '';
+            position: absolute;
+            left: -3px;
+            top: -1px;
+            height: 100%;
+            width: calc(100% + 4px);
+            border: 1px solid $brand-blue;
+            border-radius: 4px;
+        }
+    }
+
+    &--tertiary,
+    &--tertiary-red {
+        font-size: 15px;
+        line-height: 18px;
+    }
+
+    &--tertiary-small,
+    &--tertiary-red-small {
+        font-size: 14px;
+    }
+
+    &--tertiary,
+    &--tertiary-small {
+        color: $brand-blue;
+
+        &:enabled {
+            &:focus {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            &:active {
+                color: mix($brand-blue, black, 80%);
+            }
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:focus,
+                &:active {
+                    color: $butterscotch;
+                }
+
+                &:focus {
+                    &::before {
+                        border-color: $butterscotch;
+                    }
+                }
+            }
+        }
+    }
+
+    &--tertiary-red,
+    &--tertiary-red-small {
+        color: $lust;
+
+        &:enabled {
+            &:hover,
+            &:focus {
+                color: mix($lust, black, 90%);
+
+                &::before {
+                    border-color: $lust;
+                }
+            }
+
+            &:active {
+                color: mix($lust, black, 80%);
+            }
+        }
+
+        &--dark {
+            color: $rosa;
+
+            &:enabled {
+                &:hover,
+                &:focus,
+                &:active {
+                    color: mix($rosa, black, 90%);
+                }
+
+                &:focus {
+                    &::before {
+                        border-color: mix($rosa, black, 90%);
+                    }
+                }
+            }
+        }
+    }
+
+    &--icon,
+    &--icon-yellow {
+        user-select: none;
+        outline: none;
+        color: $brand-blue;
+        background-color: transparent;
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 18px;
+        height: 28px;
+        padding: 2px 8px 2px 4px;
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid transparent;
+        border-radius: 4px;
+
+        &--no-text {
+            padding: 2px 4px;
+        }
+
+        &:enabled {
+            &:hover,
+            &:active {
+                color: $brand-black;
+            }
+
+            &:focus {
+                border: 1px solid $brand-blue;
+            }
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:active,
+                &:focus {
+                    color: $butterscotch;
+                }
+
+                &:focus {
+                    border: 1px solid $butterscotch;
+                }
+            }
+        }
+    }
+
+    &--icon-yellow {
+        color: $banana-bread;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                color: $butterscotch;
+            }
+
+            &:focus {
+                border: 1px solid $butterscotch;
+            }
+        }
+    }
+
+    &__icon {
+        margin-right: 2px;
+
+        &--no-text {
+            margin-right: 0;
+        }
+    }
+
+    &:disabled {
+        opacity: 0.4;
+        cursor: auto;
+    }
+}
+</style>

package/lib/components/Buttons/Link.md

@@ -0,0 +1,58 @@
+```vue
+<template>
+    <div>
+        <div class="light">
+            <Link type="tertiary">Tertiary</Link>
+            <br>
+            <Link :has-icon="true">
+                <Icon type="filter"/>
+                Tertiary with Icon
+            </Link>
+            <br>
+            <Link type="tertiary-red">Tertiary Red</Link>
+            <br>
+            <Link type="tertiary-small">Tertiary Small</Link>
+        </div>
+        <div class="dark">
+            <Link isDarkMode="true" type="tertiary">Tertiary</Link>
+            <br>
+            <Link isDarkMode="true" :has-icon="true">
+                <Icon type="filter"/>
+                Tertiary with Icon
+            </Link>
+            <br>
+            <Link isDarkMode="true" type="tertiary-red">Tertiary Red</Link>
+            <br>
+            <Link isDarkMode="true" type="tertiary-small">Tertiary Small</Link>
+        </div>
+    </div>
+</template>
+
+<script>
+import Icon from '../Icons/Icon.vue'
+
+export default {
+    components: {
+        Icon
+    }
+}
+</script>
+
+<style>
+.light,
+.dark {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+svg {
+    width: 20px;
+    vertical-align: top;
+    margin-right: 5px;
+    margin-top: -4px;
+}
+</style>
+```