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