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

package/src/components/CvToggle/CvToggle.vue

@@ -1,18 +1,20 @@
 <template>
   <div :class="{ [`${carbonPrefix}--form-item`]: formItem }">
     <input
+      :id="cvId"
+      ref="input"
       role="toggle"
       v-bind="$attrs"
       :class="[
         `${carbonPrefix}--toggle-input`,
-        { 'bx--toggle-input--small': small },
+        {
+          [`${carbonPrefix}--toggle-input--small`]: small,
+        },
       ]"
       type="checkbox"
-      :id="cvId"
       :checked="isChecked"
-      @change="onChange"
       :value="value"
-      ref="input"
+      @change="onChange"
     />
     <label
       :class="`${carbonPrefix}--toggle-input__label`"
@@ -55,9 +57,24 @@ const visibleLabel = computed(() => {
 });
 
 const props = defineProps({
+  /**
+   * Specify the size of the Toggle. Default is medium. Set to `true` for small.
+   */
   small: Boolean,
-  label: String,
+  /**
+   * Label and aria-label for the toggle
+   */
+  label: {
+    type: String,
+    default: 'Toggle element',
+  },
+  /**
+   * Set the carbon form-item class
+   */
   formItem: { type: Boolean, default: true },
+  /**
+   * Visibly hide the toggle label
+   */
   hideLabel: Boolean,
   ...propsCvId,
   ...propsCvCheck,

package/src/components/CvToggle/__tests__/__snapshots__/CvToggle.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvToggle CvToggle - should render formItem: default 1`] = `<div class="bx--form-item"><input role="toggle" class="bx--toggle-input" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
+exports[`CvToggle CvToggle - should render formItem: default 1`] = `<div class="bx--form-item"><input id="test-1" role="toggle" class="bx--toggle-input" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1">Toggle element <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
 
-exports[`CvToggle CvToggle - should render when formItem: false && small && hideLabel 1`] = `<div class="" disabled="true"><input role="toggle" disabled="" class="bx--toggle-input bx--toggle-input--small" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
+exports[`CvToggle CvToggle - should render when formItem: false && small && hideLabel 1`] = `<div class="" disabled="true"><input id="test-1" role="toggle" disabled="" class="bx--toggle-input bx--toggle-input--small" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1" aria-label="Toggle element"> <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
 
-exports[`CvToggle CvToggle - should render when formItem: true && disabled 1`] = `<div class="bx--form-item" disabled="true"><input role="toggle" disabled="" class="bx--toggle-input" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
+exports[`CvToggle CvToggle - should render when formItem: true && disabled 1`] = `<div class="bx--form-item" disabled="true"><input id="test-1" role="toggle" disabled="" class="bx--toggle-input" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1">Toggle element <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;

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

@@ -0,0 +1,80 @@
+import CvDefinitionTooltip from './CvDefinitionTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvDefinitionTooltip`,
+  component: CvDefinitionTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvDefinitionTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvDefinitionTooltip.props.direction.default,
+    },
+    definition: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Definition of the term',
+    },
+    term: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Term to be defined',
+    },
+    'definition ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Definition of the term slot.',
+    },
+    'term ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Term slot',
+    },
+  },
+};
+
+const Term = 'A term needing definition';
+const Definition = 'Brief description of the dotted, underlined term';
+
+const template = `<cv-definition-tooltip v-bind="args" />`;
+
+const Template = args => {
+  return {
+    components: { CvDefinitionTooltip },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  term: Term,
+  definition: Definition,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvTooltip/CvDefinitionTooltip.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`"
+    :id="cvId"
+  >
+    <button
+      :aria-describedby="`${cvId}-label`"
+      :class="[
+        `${carbonPrefix}--tooltip__trigger`,
+        `${carbonPrefix}--tooltip--a11y`,
+        `${carbonPrefix}--tooltip__trigger--definition`,
+        `${carbonPrefix}--tooltip--${direction}`,
+        `${carbonPrefix}--tooltip--align-${alignment}`,
+      ]"
+      type="button"
+    >
+      <slot name="term">
+        {{ term }}
+      </slot>
+    </button>
+    <div
+      :class="`${carbonPrefix}--assistive-text`"
+      :id="`${cvId}-label`"
+      role="tooltip"
+    >
+      <slot name="definition">
+        {{ definition }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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),
+  },
+  definition: {
+    type: String,
+    default: '',
+  },
+  term: {
+    type: String,
+    default: '',
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+</script>

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

@@ -0,0 +1,90 @@
+import CvInteractiveTooltip from './CvInteractiveTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+import Filter16 from '@carbon/icons-vue/es/filter/16';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvInteractiveTooltip`,
+  component: CvInteractiveTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvInteractiveTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvInteractiveTooltip.props.direction.default,
+    },
+    visible: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: CvInteractiveTooltip.props.visible.default,
+      description: 'Initial tooltip visibility state',
+    },
+    label: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Label slot.',
+    },
+    content: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Content slot.',
+    },
+    trigger: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Trigger slot',
+    },
+  },
+};
+const template = `
+  <cv-interactive-tooltip v-bind="args">
+    <template #label>
+      Tooltip label
+    </template>
+    <template #trigger>
+      <Filter16 class="bx--overflow-menu__icon bx--toolbar-filter-icon" />
+    </template>
+    <template #content>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <button class="bx--button">Clicky one</button>
+    </template>
+  </cv-interactive-tooltip>
+`;
+
+const Template = args => {
+  return {
+    components: { CvInteractiveTooltip, Filter16 },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

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