@pocketprep/ui-kit 3.4.33 → 3.4.34

package/lib/components/Forms/Textarea.vue

@@ -4,22 +4,49 @@
         @mouseover="hover = true"
         @mouseout="hover = false"
     >
-        <label
-            v-if="label"
-            v-dark="isDarkMode"
-            class="uikit-textarea__label"
-            :class="{
-                'uikit-textarea__label--hover': hover,
-                'uikit-textarea__label--focus': focus
-            }"
-        >{{ label }}</label>
+        <div
+            class="uikit-textarea__container"
+        >
+            <label
+                v-if="label"
+                v-dark="isDarkMode"
+                class="uikit-textarea__label"
+                :class="{
+                    'uikit-textarea__label--hover': hover,
+                    'uikit-textarea__label--focus': focus
+                }"
+            >{{ label }}</label>
+            <div
+                v-if="showIconAndTooltip"
+                @mouseenter="showTextAreaTooltip = true"
+                @mouseleave="showTextAreaTooltip = false"
+                @focus="showTextAreaTooltip = true"
+                @blur="showTextAreaTooltip = false"
+            >
+                <Tooltip
+                    v-if="showTextAreaTooltip"
+                    :key="tooltipText"
+                    theme="offset"
+                    :is-dark-mode="isDarkMode"
+                >
+                    {{ tooltipText }}
+                </Tooltip>
+                <Icon
+                    type="info"
+                    class="uikit-textarea__icon"
+                    :class="{
+                        'uikit-textarea__icon--dark': isDarkMode
+                    }"
+                />
+            </div>
+        </div>
         <textarea
             v-dark="isDarkMode"
             :value="modelValue"
             :disabled="disabled"
             :placeholder="placeholder"
             :autofocus="autoFocus"
-            :style="{ height }"
+            :style="{ height, width }"
             class="uikit-textarea__textarea"
             :class="{
                 'uikit-textarea__textarea--hover': hover,
@@ -34,9 +61,15 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import Icon from '../Icons/Icon.vue'
+import Tooltip from '../Tooltips/Tooltip.vue'
 import { dark } from '../../directives'
 
 @Component({
+    components: {
+        Icon,
+        Tooltip,
+    },
     directives: {
         dark,
     },
@@ -49,10 +82,14 @@ export default class Textarea extends Vue {
     @Prop() disabled?: boolean
     @Prop() autoFocus?: boolean
     @Prop({ default: '150px' }) height?: string
+    @Prop({ default: '341px' }) width?: string
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) showIconAndTooltip!: boolean
+    @Prop({ default: '' }) tooltipText!: string
 
     hover = false
     focus = false
+    showTextAreaTooltip = false
 
     @Emit('update:modelValue')
     valueChange ($event: Event) {
@@ -66,6 +103,12 @@ export default class Textarea extends Vue {
 @import '../../styles/breakpoints';
 
 .uikit-textarea {
+    &__container {
+        position: relative;
+        display: flex;
+        outline: none;
+    }
+
     &__label {
         font-size: 13px;
         font-weight: 600;
@@ -99,6 +142,25 @@ export default class Textarea extends Vue {
         }
     }
 
+    .uikit-tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(-100% - 14px);
+
+        @include breakpoint('black-bear') {
+            left: 35%;
+        }
+    }
+
+    &__icon {
+        padding: 0 0 2px 5px;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
     &__textarea {
         background-color: $white;
         border: 1px solid rgba($pewter, 0.85);

package/lib/components/Tooltips/Tooltip.vue

@@ -17,7 +17,8 @@
                 class="uikit-tooltip-popup__triangle"
                 :class="{ 
                     'uikit-tooltip-popup__triangle--rightalign': theme === 'rightalign',
-                    'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign'
+                    'uikit-tooltip-popup__triangle--leftalign': theme === 'leftalign',
+                    'uikit-tooltip-popup__triangle--offset': theme === 'offset'
                 }"
             />
             <span>
@@ -37,7 +38,7 @@ import { dark } from '../../directives'
     },
 })
 export default class Tooltip extends Vue {
-    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign'
+    @Prop({ default: '' }) theme!: 'leftalign' | 'rightalign' | 'offset'
     @Prop({ default: null }) styles!: null | Record<string, string>
     @Prop({ default: false }) isDarkMode!: boolean
 
@@ -128,8 +129,12 @@ export default class Tooltip extends Vue {
     span {
         position: relative;
         z-index: 1;
-        max-width: 400px;
+        max-width: 482px;
         display: block;
+
+        @include breakpoint('black-bear') {
+            max-width: 341px;
+        }
     }
 
     &__triangle {
@@ -152,6 +157,16 @@ export default class Tooltip extends Vue {
             transform: none;
         }
 
+        &--offset {
+            left: 42%;
+            transform: none;
+
+            @include breakpoint('black-bear') {
+                left: 60%;
+                transform: none;
+            }
+        }
+
         &--dark {
             border-top-color: $white;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.33",
+  "version": "3.4.34",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {