@carbon/vue 3.0.6-alpha.0 → 3.0.8-alpha.0

package/src/components/CvTooltip/CvInteractiveTooltip.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="cv-interactive-tooltip" ref="root">
+    <div :id="`${cvId}-label`" :class="`${carbonPrefix}--tooltip__label`">
+      <slot name="label"></slot>
+
+      <button
+        :aria-expanded="dataVisible ? 'true' : 'false'"
+        :aria-labelledby="`${cvId}-label`"
+        :class="`${carbonPrefix}--tooltip__trigger`"
+        :aria-controls="`${cvId}`"
+        aria-haspopup="true"
+        ref="trigger"
+        type="button"
+        @click="toggle(dataVisible)"
+        @keydown.tab="onTriggerTab"
+        @focusout="checkFocusOut"
+      >
+        <slot name="trigger">
+          <Information16 />
+        </slot>
+      </button>
+    </div>
+
+    <div
+      :id="cvId"
+      :aria-hidden="!dataVisible"
+      :data-floating-menu-direction="direction"
+      :class="[
+        `${carbonPrefix}--tooltip`,
+        {
+          [`${carbonPrefix}--tooltip--shown`]: dataVisible,
+          [`${carbonPrefix}--tooltip--${direction}`]: direction,
+          [`${carbonPrefix}--tooltip--align-${alignment}`]: alignment,
+        },
+      ]"
+      ref="popup"
+      role="dialog"
+      :aria-describedby="`${cvId}-body`"
+      :aria-labelledby="`${cvId}-label`"
+      @focusout="checkFocusOut"
+      :style="{ left: left + 'px', top: top + 'px' }"
+      tabindex="-1"
+      @mousedown.prevent="preventFocusOut"
+    >
+      <div
+        class="cv-interactive-tooltip__before-content"
+        ref="beforeContent"
+        tabindex="0"
+        style="position: absolute; left: -9999px; width: 1px; height: 1px"
+        @focus="focusBeforeContent"
+      />
+      <span :class="`${carbonPrefix}--tooltip__caret`"></span>
+      <div :class="`${carbonPrefix}--tooltip__content`">
+        <slot name="content"></slot>
+      </div>
+      <div
+        class="cv-interactive-tooltip__after-content"
+        ref="afterContent"
+        tabindex="0"
+        style="position: absolute; left: -9999px; width: 1px; height: 1px"
+        @focus="focusAfterContent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Information16 from '@carbon/icons-vue/es/information/16';
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  toRefs,
+} from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { TipAlignments, alignments, TipDirections, directions } from './consts';
+
+const props = defineProps({
+  alignment: {
+    type: String,
+    default: TipAlignments.center,
+    validator: val => alignments.includes(val),
+  },
+  direction: {
+    type: String,
+    default: TipDirections.top,
+    validator: val => directions.includes(val),
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  ...propsCvId,
+});
+
+const { direction, visible } = toRefs(props);
+const cvId = useCvId(props);
+const dataVisible = ref(false);
+const left = ref(-9999); // position offscreen
+const top = ref(0);
+const root = ref(null);
+let popupEl = ref(null);
+const popup = ref(null);
+const trigger = ref(null);
+const beforeContent = ref(null);
+const afterContent = ref(null);
+
+const contentAfter = computed(() => {
+  return [TipDirections.right, TipDirections.bottom].includes(direction.value);
+});
+
+onMounted(() => {
+  // move popup out to body to ensure it appears above other elements
+  popupEl = document.body.appendChild(popup.value);
+  toggle(!visible.value);
+});
+
+watch(visible, newValue => {
+  toggle(!newValue);
+});
+
+watch(direction, () => {
+  if (!visible.value) return;
+  position();
+});
+
+function positionListen(on) {
+  if (on) {
+    window.addEventListener('scroll', position);
+    window.addEventListener('resize', position);
+    return;
+  }
+  window.removeEventListener('scroll', position);
+  window.removeEventListener('resize', position);
+}
+
+function position() {
+  const menuPosition = trigger.value.getBoundingClientRect();
+  const pixelsScrolledX = window.scrollX || window.pageXOffset;
+  const pixelsScrolledY = window.scrollY || window.pageYOffset;
+  const positioningMethod = [TipDirections.top, TipDirections.bottom].includes(
+    direction.value
+  )
+    ? positionForTopBottomDirections
+    : positionForLeftRightDirections;
+
+  positioningMethod({
+    menuPosition,
+    pixelsScrolledX,
+    pixelsScrolledY,
+  });
+}
+
+function positionForTopBottomDirections({
+  menuPosition,
+  pixelsScrolledX,
+  pixelsScrolledY,
+}) {
+  top.value =
+    direction.value === TipDirections.bottom
+      ? menuPosition.bottom + 10 + pixelsScrolledY
+      : menuPosition.top - 15 - popup.value.offsetHeight + pixelsScrolledY;
+
+  left.value =
+    menuPosition.left +
+    0.5 +
+    (trigger.value.offsetWidth - popup.value.offsetWidth) / 2 +
+    pixelsScrolledX;
+}
+
+function positionForLeftRightDirections({
+  menuPosition,
+  pixelsScrolledX,
+  pixelsScrolledY,
+}) {
+  top.value =
+    menuPosition.top +
+    (trigger.value.offsetHeight - 0.5 - popup.value.offsetHeight) / 2 +
+    pixelsScrolledY;
+
+  left.value =
+    direction.value === TipDirections.left
+      ? menuPosition.left - 10 - popup.value.offsetWidth + pixelsScrolledX
+      : menuPosition.right + 15 + pixelsScrolledX;
+}
+
+async function show() {
+  dataVisible.value = true;
+  positionListen(true);
+
+  await nextTick(() => {
+    position();
+    trigger.value.focus();
+  });
+}
+
+function hide() {
+  dataVisible.value = false;
+  positionListen(true);
+}
+
+function toggle(isVisible) {
+  if (isVisible) {
+    hide();
+    return;
+  }
+  show();
+}
+
+function onTriggerTab(ev) {
+  if (!ev.shiftKey) {
+    if (contentAfter.value) {
+      // move focus before content before tab press
+      beforeContent.value.focus();
+    }
+    return;
+  }
+
+  if (contentAfter.value) return;
+  // move focus after content before tab press
+  afterContent.value.focus();
+}
+
+function checkFocusOut(ev) {
+  dataVisible.value =
+    ev.relatedTarget === trigger.value ||
+    popup.value.contains(ev.relatedTarget);
+}
+
+function focusBeforeContent(ev) {
+  if (contentAfter.value) {
+    if (popup.value.contains(ev.relatedTarget)) {
+      trigger.value.focus();
+    }
+    return;
+  }
+
+  trigger.value.focus();
+  dataVisible.value = contentAfter.value;
+}
+
+function focusAfterContent(ev) {
+  if (!contentAfter.value) {
+    if (popup.value.contains(ev.relatedTarget)) {
+      trigger.value.focus();
+    }
+  } else {
+    trigger.value.focus();
+    dataVisible.value = !contentAfter.value;
+  }
+}
+
+function preventFocusOut() {
+  // This is here to prevent focus being lost if the user clicks on the contents of the interactive tooltip
+}
+
+onBeforeUnmount(() => {
+  positionListen(false);
+  if (!popupEl.value) return;
+  // move back to where it came from
+  root.value.appendChild(popupEl.value);
+});
+</script>

package/src/components/CvTooltip/CvTooltip.stories.js

@@ -0,0 +1,128 @@
+import CvTooltip from './CvTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvTooltip`,
+  component: CvTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvTooltip.props.direction.default,
+    },
+    default: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Tooltip trigger slot.',
+    },
+    content: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Tooltip text slot',
+    },
+  },
+};
+
+const TipText = 'This is a tooltip';
+
+const template = `<cv-tooltip v-bind="args" />`;
+
+const Template = args => {
+  return {
+    components: { CvTooltip },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  tip: TipText,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+const triggerSlotTemplate = `
+  <cv-tooltip v-bind="args">
+    <svg width="16" height="12" viewBox="0 0 16 12">
+      <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+    </svg>
+  </cv-tooltip>
+`;
+
+const TriggerSlotTemplate = args => {
+  return {
+    components: { CvTooltip },
+    template: triggerSlotTemplate,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const TriggerSlot = TriggerSlotTemplate.bind({});
+TriggerSlot.args = {
+  tip: TipText,
+};
+TriggerSlot.parameters = storyParametersObject(
+  TriggerSlot.parameters,
+  triggerSlotTemplate,
+  TriggerSlot.args
+);
+
+const contentSlotTemplate = `
+  <cv-tooltip v-bind="args">
+    <template #content>
+    <div>
+      <p style="color:green;font-weight:bold;margin-bottom:5px;">Title</p>
+      <p>Lorem ipsum dolor</p>
+    </div>
+    </template>
+  </cv-tooltip>
+`;
+
+const ContentSlotTemplate = args => {
+  return {
+    components: { CvTooltip },
+    template: contentSlotTemplate,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const ContentSlot = ContentSlotTemplate.bind({});
+ContentSlot.parameters = storyParametersObject(
+  ContentSlot.parameters,
+  contentSlotTemplate,
+  ContentSlot.args
+);

package/src/components/CvTooltip/CvTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <button
+    :class="[
+      `cv-tooltip`,
+      `${carbonPrefix}--tooltip__trigger`,
+      `${carbonPrefix}--tooltip--a11y`,
+      `${carbonPrefix}--tooltip--${direction}`,
+      `${carbonPrefix}--tooltip--align-${alignment}`,
+    ]"
+    type="button"
+  >
+    <span :class="`${carbonPrefix}--assistive-text`">
+      <slot name="content">
+        {{ tip }}
+      </slot>
+    </span>
+    <slot>
+      <Information16 />
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import Information16 from '@carbon/icons-vue/es/information/16';
+import { carbonPrefix } from '../../global/settings';
+import { TipAlignments, alignments, TipDirections, directions } from './consts';
+
+defineProps({
+  alignment: {
+    type: String,
+    default: TipAlignments.center,
+    validator: val => alignments.includes(val),
+  },
+  direction: {
+    type: String,
+    default: TipDirections.top,
+    validator: val => directions.includes(val),
+  },
+  tip: {
+    type: String,
+    default: '',
+  },
+});
+</script>