fleetcor-lwc 1.3.0 → 1.4.1

package/README.md

@@ -68,17 +68,30 @@ Icon:
 
 <flt-icon icon="arrow-left"></flt-icon>
 
-arrow-left  | ev        | carwash       | car               | 
-van         | unleaded  | fuel          | driver            | 
-vehicle     | both      | shared-card   | ev-and-fuel       |
-oil         | key       | blocked       | multiple-users    | 
-arrow-right |
+arrow-left | ev | carwash | car | van | unleaded | fuel | driver | vehicle |
+both | shared-card | ev-and-fuel | oil | key | blocked | multiple-users |
+arrow-right | ...
+```
+
+```html
+Tooltip:
+
+<flt-tooltip content="Text description info" corner="12">
+  <!-- Any html element -->
+  <flt-icon icon="arrow-left"></flt-icon>
+</flt-tooltip>
+
 ...
 ```
 
 ```scss
 /* mixins.scss */
 
+// TOOLTIP ->
+$FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
+$FLT_TOOLTIP_COLOR: var(--flt-tooltip-bg-color, #f9fafb);
+// <- TOOLTIP
+
 /* ICON START */
 $FLT_ICON_COLOR: var(--flt-icon-color, #111827);
 /* ICON END */
@@ -116,6 +129,16 @@ $FLT_BUTTON_LINK_HOVER_COLOR: var(--flt-button-link-hover-color, #6b7280);
 
 ## Release Notes:
 
+- v.1.4.1
+  - Bug fix with empty content and svg max width
+
+---
+
+- v.1.4.0
+  - Added Component `flt-tooltip`
+
+---
+
 - v.1.3.0
   - Added Component `flt-icon`
 

package/frontend/common/mixins_amber.scss

@@ -1,3 +1,8 @@
+// TOOLTIP ->
+$FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
+$FLT_TOOLTIP_COLOR: var(--flt-tooltip-bg-color, #f9fafb);
+// <- TOOLTIP
+
 // ICON ->
 $FLT_ICON_COLOR: var(--flt-icon-color, #111827);
 // <- ICON

package/frontend/common/mixins_aquamarine.scss

@@ -1,3 +1,8 @@
+// TOOLTIP ->
+$FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
+$FLT_TOOLTIP_COLOR: var(--flt-tooltip-bg-color, #F9FAFB);
+// <- TOOLTIP
+
 // ICON ->
 $FLT_ICON_COLOR: var(--flt-icon-color, #111827);
 // <- ICON

package/frontend/components/flt/tooltip/__test__/tooltip.test.js

@@ -0,0 +1,35 @@
+import { createElement } from 'lwc'
+import Tooltip from 'flt/tooltip'
+import Button from 'flt/button'
+
+class ResizeObserver {
+    observe() {}
+    unobserve() {}
+}
+
+describe('ui-button', () => {
+    window.ResizeObserver = ResizeObserver;
+
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('displays greeting', () => {
+        const element_1 = createElement('flt-tooltip', {
+            is: Tooltip
+        })
+        element_1.content = 'Welcome to tooltip world'
+
+        const element_2 = createElement('flt-button', {
+            is: Button
+        })
+        element_2.label = 'Add'
+
+        element_1.appendChild(element_2)
+        document.body.appendChild(element_1)
+
+        expect(document.querySelector('.tooltip__text')).toBeDefined()
+    })
+})

package/frontend/components/flt/tooltip/tooltip.html

@@ -0,0 +1,11 @@
+<template lwc:render-mode="light">
+    <div class="tooltip" onmouseover={over} ontouchstart={over} onmouseout={out} ontouchend={out}>
+        <slot></slot>
+        <div if:true={content} class={tooltipVisibility} style={conentStyle}>
+            <svg class="tooltip__svg" height={svgH} width={svgW} style={svgStyle}>
+                <path class="tooltip__path" d={svgD}></path>
+            </svg>
+            <p class="tooltip__text" style={textStyle}></p>
+        </div>
+    </div>
+</template>

package/frontend/components/flt/tooltip/tooltip.js

@@ -0,0 +1,286 @@
+import './tooltip.scss'
+import { LightningElement, api } from 'lwc'
+
+export default class Tooltip extends LightningElement {
+    static renderMode = 'light'
+
+    @api content
+    @api corner = 0
+
+    maxWidth = 240
+    svgW = 0
+    svgH = 0
+    delta = 4
+    paddingX = 12
+    paddingY = 8
+    tip = 8
+    active = false
+    childElementRect = {}
+    leftPosition
+    rightPosition = false
+    bottomPosition = false
+
+    get textStyle() {
+        let result = `padding:${this.paddingY + this.delta}px ${this.paddingX + this.delta}px ${
+            this.paddingY + this.delta + this.tip
+        }px; width:${this.minimalWidth}px`
+        if (this.bottomPosition) {
+            result = `padding:${this.paddingY + this.delta + this.tip}px ${
+                this.paddingX + this.delta
+            }px ${this.paddingY + this.delta}px`
+        }
+        return result
+    }
+
+    get svgStyle() {
+        let result = `top:0px;`
+        if (this.rightPosition) {
+            result += `right:0px`
+        } else {
+            result += `left:0px`
+        }
+        return result
+    }
+
+    get conentStyle() {
+        let result = `top:-${this.svgH}px; width:${this.minimalWidth}px;`
+        if (this.bottomPosition) {
+            result = `bottom:-${this.svgH}px; width:${this.minimalWidth}px;`
+        }
+        if (this.rightPosition) {
+            result += `right:0px`
+        } else {
+            result += `left:${this.leftPosition}px`
+        }
+        return result
+    }
+
+    get tooltipVisibility() {
+        return this.active ? 'tooltip__content tooltip__content_visible' : 'tooltip__content'
+    }
+
+    get svgD() {
+        let result
+
+        if (this.bottomPosition && this.rightPosition) {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner + this.tip} 
+                Q   ${this.delta} ${this.delta + this.tip}, 
+                    ${this.delta + this.corner} ${this.delta + this.tip}
+
+                L   ${this.svgW - this.tip * 4 + this.tip} ${this.delta + this.tip} 
+                    ${this.svgW - this.tip * 4} ${this.delta}
+                    ${this.svgW - this.tip * 4 - this.tip} ${this.delta + this.tip}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta + this.tip} 
+                Q   ${this.svgW - this.delta} ${this.delta + this.tip}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner + this.tip}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.delta} 
+        
+                L   ${this.delta + this.corner} ${this.svgH - this.delta}
+                Q   ${this.delta} ${this.svgH - this.delta}, 
+                    ${this.delta} ${this.svgH - this.delta - this.corner}
+                Z`
+        } else if (this.bottomPosition && this.leftPosition) {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner + this.tip} 
+                Q   ${this.delta} ${this.delta + this.tip}, 
+                    ${this.delta + this.corner} ${this.delta + this.tip}
+
+                L   ${this.svgW / 2 + this.tip} ${this.delta + this.tip} 
+                    ${this.svgW / 2} ${this.delta}
+                    ${this.svgW / 2 - this.tip} ${this.delta + this.tip}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta + this.tip} 
+                Q   ${this.svgW - this.delta} ${this.delta + this.tip}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner + this.tip}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.delta} 
+        
+                L   ${this.delta + this.corner} ${this.svgH - this.delta}
+                Q   ${this.delta} ${this.svgH - this.delta}, 
+                    ${this.delta} ${this.svgH - this.delta - this.corner}
+                Z`
+        } else if (this.bottomPosition) {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner + this.tip} 
+                Q   ${this.delta} ${this.delta + this.tip}, 
+                    ${this.delta + this.corner} ${this.delta + this.tip}
+
+                L   ${this.tip * 4 + this.tip} ${this.delta + this.tip} 
+                    ${this.tip * 4} ${this.delta}
+                    ${this.tip * 4 - this.tip} ${this.delta + this.tip}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta + this.tip} 
+                Q   ${this.svgW - this.delta} ${this.delta + this.tip}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner + this.tip}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.delta} 
+        
+                L   ${this.delta + this.corner} ${this.svgH - this.delta}
+                Q   ${this.delta} ${this.svgH - this.delta}, 
+                    ${this.delta} ${this.svgH - this.delta - this.corner}
+                Z`
+        } else if (this.rightPosition) {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner} 
+                Q   ${this.delta} ${this.delta}, 
+                    ${this.delta + this.corner} ${this.delta}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta} 
+                Q   ${this.svgW - this.delta} ${this.delta}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.tip - this.delta} 
+
+                L   ${this.svgW - this.tip * 4 + this.tip} ${this.svgH - this.tip - this.delta} 
+                    ${this.svgW - this.tip * 4} ${this.svgH - this.tip - this.delta + this.tip}
+                    ${this.svgW - this.tip * 4 - this.tip} ${this.svgH - this.tip - this.delta}
+
+                L   ${this.delta + this.corner} ${this.svgH - this.tip - this.delta}
+                Q   ${this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.delta} ${this.svgH - this.tip - this.delta - this.corner}
+                Z`
+        } else if (this.leftPosition) {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner} 
+                Q   ${this.delta} ${this.delta}, 
+                    ${this.delta + this.corner} ${this.delta}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta} 
+                Q   ${this.svgW - this.delta} ${this.delta}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.tip - this.delta} 
+
+                L   ${this.svgW / 2 + this.tip} ${this.svgH - this.tip - this.delta} 
+                    ${this.svgW / 2} ${this.svgH - this.tip - this.delta + this.tip}
+                    ${this.svgW / 2 - this.tip} ${this.svgH - this.tip - this.delta}
+
+                L   ${this.delta + this.corner} ${this.svgH - this.tip - this.delta}
+                Q   ${this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.delta} ${this.svgH - this.tip - this.delta - this.corner}
+                Z`
+        } else {
+            result = `
+                M   ${this.delta} ${this.delta + this.corner} 
+                Q   ${this.delta} ${this.delta}, 
+                    ${this.delta + this.corner} ${this.delta}
+                
+                L   ${this.svgW - this.delta - this.corner} ${this.delta} 
+                Q   ${this.svgW - this.delta} ${this.delta}, 
+                    ${this.svgW - this.delta} ${this.delta + this.corner}
+                
+                L   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta - this.corner} 
+                Q   ${this.svgW - this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.svgW - this.delta - this.corner} ${this.svgH - this.tip - this.delta} 
+
+                L   ${this.tip * 4 + this.tip} ${this.svgH - this.tip - this.delta} 
+                    ${this.tip * 4} ${this.svgH - this.tip - this.delta + this.tip}
+                    ${this.tip * 4 - this.tip} ${this.svgH - this.tip - this.delta}
+        
+                L   ${this.delta + this.corner} ${this.svgH - this.tip - this.delta}
+                Q   ${this.delta} ${this.svgH - this.tip - this.delta}, 
+                    ${this.delta} ${this.svgH - this.tip - this.delta - this.corner}
+                Z`
+        }
+
+        return result
+    }
+
+    connectedCallback() {
+        if (this.content) {
+            this.resizeObserver = new ResizeObserver(this.update.bind(this))
+        }
+    }
+
+    update() {
+        if (this.content) {
+            const text = this.firstChild.querySelector('.tooltip__text')
+            text.innerHTML = this.content
+            this.createTooltip()
+        }
+    }
+
+    over() {
+        if (!this.active && this.content) {
+            this.active = true
+            this.createTooltip()
+        }
+    }
+
+    out() {
+        if (this.active && this.content) {
+            this.active = false
+            this.childElementRect = this.firstChild.firstChild.getBoundingClientRect()
+            this.leftPosition = (this.childElementRect.width - this.svgW) / 2
+            this.rightPosition = false
+            this.bottomPosition = false
+        }
+    }
+
+    createTooltip() {
+        // 1. find width of tooltip
+        const text = this.firstChild.querySelector('.tooltip__text')
+        this.minimalWidth = getLineWidth(text)
+        if (this.minimalWidth < this.maxWidth) {
+            this.minimalWidth = this.minimalWidth + this.paddingX * 2 + 2 * this.delta
+            this.svgW = this.minimalWidth
+        } else {
+            this.minimalWidth = this.maxWidth
+            this.svgW = this.minimalWidth
+        }
+        this.svgH = text.offsetHeight
+
+        // 2. find position left or right
+
+        const textPosition = text.getBoundingClientRect()
+        const bodyPosition = document.body.getBoundingClientRect()
+
+        if (textPosition.right > bodyPosition.width - 12) {
+            this.leftPosition = 0
+            this.rightPosition = true
+        } else if (textPosition.x < 12) {
+            this.leftPosition = 0
+            this.rightPosition = false
+        } else {
+            this.childElementRect = this.firstChild.firstChild.getBoundingClientRect()
+            this.leftPosition = (this.childElementRect.width - this.svgW) / 2
+        }
+
+        // 3. find position top or bottom
+        if (textPosition.top < 12) {
+            this.bottomPosition = true
+        }
+    }
+
+    renderedCallback() {
+        if (this.content) {
+            this.resizeObserver.observe(this.firstChild)
+        }
+    }
+}
+
+function getLineWidth(el) {
+    let temp = document.createElement(el.nodeName),
+        ret
+    temp.setAttribute('style', 'position:fixed;margin:0;padding:0;font-size:inherit;')
+    temp.innerHTML = el.innerHTML
+
+    document.body.appendChild(temp)
+    ret = temp.clientWidth
+    document.body.removeChild(temp)
+
+    return ret
+}

package/frontend/components/flt/tooltip/tooltip.scss

@@ -0,0 +1,46 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.tooltip {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    max-width: initial;
+
+    &__content {
+        position: absolute;
+        z-index: 999999;
+        cursor: initial;
+        visibility: hidden;
+        opacity: 0;
+        font-size: 16px;
+        line-height: 1.3;
+        max-width: initial;
+        transition: opacity 0.3s ease-out;
+
+        &_visible {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+
+    &__text {
+        position: relative;
+        color: $FLT_TOOLTIP_COLOR;
+        float: left;
+        margin: 0;
+        max-width: 240px;
+        box-sizing: border-box;
+    }
+
+    &__svg {
+        position: absolute;
+        max-width: initial;
+    }
+
+    &__path {
+        fill: $FLT_TOOLTIP_BG_COLOR;
+        -webkit-filter: drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
+        filter: drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fleetcor-lwc",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "LWC framework by Fleetcor",
   "repository": {
     "type": "git",
@@ -21,7 +21,8 @@
     ],
     "expose": [
       "flt/button",
-      "flt/icon"
+      "flt/icon",
+      "flt/tooltip"
     ]
   },
   "keywords": [