From a8ed8ab2ed01bd44b3bdb35d510e29b785a0d2d0 Mon Sep 17 00:00:00 2001
From: felicia-haggqvist <144792260+felicia-haggqvist@users.noreply.github.com>
Date: Tue, 30 Apr 2024 08:57:39 +0200
Subject: [PATCH] feat: add more functionality to attention component (#161)

* fix: add tooltip to attentionState

* feat: add crossAxis prop

* feat: only render attention component when targetEl is not undefined or when callout

* fix: add targetEl prop to wAttention-test

* fix: mock targetEl prop in wAttention-test-file

* fix: revert adding isTooltip to attentionState

* fix: bump to latest version of @warp-ds/core
---
 components/attention/w-attention.vue |  7 ++++++-
 dev/pages/Attention.vue              |  7 ++++---
 package.json                         |  2 +-
 pnpm-lock.yaml                       | 14 +++++++-------
 test/wAttention.test.js              |  2 +-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/attention/w-attention.vue b/components/attention/w-attention.vue
index 8de8aa17..7e6ceae3 100644
--- a/components/attention/w-attention.vue
+++ b/components/attention/w-attention.vue
@@ -45,6 +45,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  crossAxis: {
+    type: Boolean,
+    default: false
+  },
   fallbackPlacements: {
     type: Array,
     validator(values) {
@@ -88,6 +92,7 @@ const attentionState = computed(() => ({
   distance: props.distance,
   skidding: props.skidding,
   flip: props.flip,
+  crossAxis: props.crossAxis,
   fallbackPlacements: props.fallbackPlacements,
   waitForDOM: nextTick
 }));
@@ -212,7 +217,7 @@ onUnmounted(async () => {
 </script>
 
 <template>
-  <div :class="attentionClasses" ref="attentionEl" v-show="model">
+  <div :class="attentionClasses" ref="attentionEl" v-show="model" v-if="props.callout || (props.targetEl !== undefined && !props.callout)">
     <div
       :role="props.role === '' ? undefined : props.tooltip ? 'tooltip' : 'img'"
       :aria-label="
diff --git a/dev/pages/Attention.vue b/dev/pages/Attention.vue
index 9829bcfd..206e9584 100644
--- a/dev/pages/Attention.vue
+++ b/dev/pages/Attention.vue
@@ -54,7 +54,7 @@ const dismissibleHighlightShowing = ref(false)
           </w-box>
           <w-attention
             tooltip
-            placement="bottom"
+            placement="top"
             :target-el="tooltipTarget ? tooltipTarget.$el : null"
             v-model="tooltipShowing"
             @focus="tooltipShowing = true"
@@ -134,8 +134,7 @@ const dismissibleHighlightShowing = ref(false)
           </w-button>
           <w-attention
             popover
-            placement="bottom"
-            flip
+            placement="right"
             :target-el="popoverTarget ? popoverTarget.$el : null"
             v-model="popoverShowing"
           >
@@ -156,6 +155,7 @@ const dismissibleHighlightShowing = ref(false)
             popover
             placement="bottom"
             can-close
+            flip
             @dismiss="dismissiblePopoverShowing = false"
             :target-el="dismissiblePopoverTarget ? dismissiblePopoverTarget.$el : null"
             v-model="dismissiblePopoverShowing"
@@ -202,6 +202,7 @@ const dismissibleHighlightShowing = ref(false)
             highlight
             placement='left'
             flip
+            cross-axis
             :fallback-placements="['right', 'bottom', 'top']"
             :target-el="highlightTarget ? highlightTarget.$el : null"
             v-model="highlightShowing"
diff --git a/package.json b/package.json
index ec29f06b..721905f8 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@lingui/core": "^4.7.0",
-    "@warp-ds/core": "^1.1.0",
+    "@warp-ds/core": "^1.1.1",
     "@warp-ds/css": "1.9.3",
     "@warp-ds/icons": "2.0.0",
     "@warp-ds/uno": "1.10.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be965ecf..15dfe32c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^4.7.0
     version: 4.7.0
   '@warp-ds/core':
-    specifier: ^1.1.0
-    version: 1.1.0(@floating-ui/dom@1.6.3)
+    specifier: ^1.1.1
+    version: 1.1.1(@floating-ui/dom@1.6.3)
   '@warp-ds/css':
     specifier: 1.9.3
     version: 1.9.3
@@ -4797,7 +4797,7 @@ packages:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.4.19(typescript@5.4.5)
-      vue-component-type-helpers: 2.0.13
+      vue-component-type-helpers: 2.0.14
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -5657,8 +5657,8 @@ packages:
       vue-component-type-helpers: 1.8.27
     dev: true
 
-  /@warp-ds/core@1.1.0(@floating-ui/dom@1.6.3):
-    resolution: {integrity: sha512-ZMpeE/ZWLBJkHL6CtR02JIRGm7RM1iwhVal1Vo9wC2HU2JqGOMBG9T0vCK7FNqjZXTgw7TPgVqJpbkLnTD3KTg==}
+  /@warp-ds/core@1.1.1(@floating-ui/dom@1.6.3):
+    resolution: {integrity: sha512-JL7Zzi8djG9NOpZMebn4zuP7zAu8C5nAnplvJuMnWrExg3Kw+ZP9wnJWJJ+wNPASPbqHxshVHbNTBStGGTCeqw==}
     peerDependencies:
       '@floating-ui/dom': 1.6.3
     dependencies:
@@ -13524,8 +13524,8 @@ packages:
     resolution: {integrity: sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==}
     dev: true
 
-  /vue-component-type-helpers@2.0.13:
-    resolution: {integrity: sha512-xNO5B7DstNWETnoYflLkVgh8dK8h2ZDgxY1M2O0zrqGeBNq5yAZ8a10yCS9+HnixouNGYNX+ggU9MQQq86HTpg==}
+  /vue-component-type-helpers@2.0.14:
+    resolution: {integrity: sha512-DInfgOyXlMyliyqAAD9frK28tTfch0+tMi4qoWJcZlRxUf+NFAtraJBnAsKLep+FOyLMiajkhfyEb3xLK08i7w==}
     dev: true
 
   /vue-docgen-api@4.75.1(vue@3.4.19):
diff --git a/test/wAttention.test.js b/test/wAttention.test.js
index 9b16b3f9..f72ce315 100644
--- a/test/wAttention.test.js
+++ b/test/wAttention.test.js
@@ -24,7 +24,7 @@ describe('attention', () => {
   test('highlight', () => {
     const defaultSlot = '<h5>Hello Warp</h5>';
     const wrapper = mount(wAttention, {
-      props: { highlight: true, modelValue: true },
+      props: { highlight: true, modelValue: true, targetEl: document.createElement('div') },
       slots: { default: defaultSlot },
     });
     assert.include(wrapper.text(), 'Hello Warp');