Merge pull request #15 from geoblink/feature/CORE-7848-add-tooltip-po…

…sition-in-GeoTrimmedContent

add tooltip props in GeoTrimmedContent

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 29.2.0
+
+New:
+
+- `GeoTooltip` position and alignment can be passed to `GeoTrimmedContent`
+
 ## 29.1.5
 
 Fix:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "29.1.5",
+  "version": "29.2.0",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <contact@geoblink.com>",
   "main": "dist/system.js",

src/elements/GeoTooltip/GeoTooltip.vue

@@ -23,7 +23,7 @@ import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
 import throttle from '../../utils/throttle'
 import getDOMElementOffset from '../../utils/getDOMElementOffset'
 import counterFactory from '../../utils/counterFactory'
-import { POSITIONS, ALIGNMENTS } from '../GeoTooltip/GeoTooltip.constants'
+import { POSITIONS, ALIGNMENTS } from './GeoTooltip.constants'
 
 /** @type {number} */
 let existingTooltipsCount = 0

src/elements/GeoTrimmedContent/GeoTrimmedContent.examples.md

@@ -9,6 +9,15 @@
       </geo-trimmed-content>
     </div>
 
+    <div class="element-demo__bordered-box" style="width: 120px;">
+      <geo-trimmed-content
+        tooltip-position='bottom'
+        tooltip-alignment='end'
+      >
+        Some text that should be trimmed and shown in the bottom left
+      </geo-trimmed-content>
+    </div>
+
     <div class="element-demo__bordered-box" style="width: 120px;">
       <geo-trimmed-content>
         <template>Some text that should be trimmed</template>

src/elements/GeoTrimmedContent/GeoTrimmedContent.vue

@@ -7,6 +7,8 @@
   >
     <geo-tooltip
       :visible="isTooltipVisible"
+      :position="tooltipPosition"
+      :alignment="tooltipAlignment"
     >
       <div ref="tooltipContent" />
     </geo-tooltip>

test/unit/specs/elements/GeoTrimmedContent.spec.js

@@ -6,8 +6,6 @@ import GeoTooltip from '@/elements/GeoTooltip/GeoTooltip.vue'
 const localVue = createLocalVue()
 localVue.component('geo-trimmed-content', GeoTrimmedContent)
 
-jest.mock('vue-directive-tooltip')
-
 describe('GeoTrimmedContent', () => {
   it('Should render content', function () {
     const wrapper = mount(GeoTrimmedContent, {
@@ -23,4 +21,46 @@ describe('GeoTrimmedContent', () => {
     expect(wrapper.find('.my-content').exists()).toBe(true)
     expect(wrapper.find('.my-content').text()).toEqual('Custom content')
   })
+
+  it('Should complain if tooltipPosition is invalid', function () {
+    const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => { })
+    const consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(() => { })
+
+    const wrapper = mount(GeoTrimmedContent, {
+      propsData: {
+        tooltipPosition: 'invalid position'
+      },
+      slots: {
+        default: '<div class="my-content">Custom content</div>'
+      },
+      stubs: {
+        GeoTooltip
+      }
+    })
+    const trimmedContent = wrapper.find('.geo-trimmed-content')
+    expect(trimmedContent.exists()).toBe(true)
+    expect(consoleErrorSpy).toHaveBeenCalled()
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+
+  it('Should complain if tooltipAlignment is invalid', function () {
+    const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockImplementation(() => { })
+    const consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(() => { })
+
+    const wrapper = mount(GeoTrimmedContent, {
+      propsData: {
+        tooltipAlignment: 'invalid alignment'
+      },
+      slots: {
+        default: '<div class="my-content">Custom content</div>'
+      },
+      stubs: {
+        GeoTooltip
+      }
+    })
+    const trimmedContent = wrapper.find('.geo-trimmed-content')
+    expect(trimmedContent.exists()).toBe(true)
+    expect(consoleErrorSpy).toHaveBeenCalled()
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
 })