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

@@ -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="

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"

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",

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');