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

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

@@ -0,0 +1,525 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvDefinitionTooltip should render definition tooltip with aligment and direction set as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`center\` as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`end\` as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-end" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip with aligment set to \`start\` as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-start" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`bottom\` as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip with direction set to \`top\` as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvDefinitionTooltip should render definition tooltip: minimal as expected 1`] = `
+<div class="cv-definition-tooltip bx--tooltip--definition bx--tooltip--a11y" id="test-1"><button aria-describedby="test-1-label" class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--top bx--tooltip--align-center" type="button">A term needeing definition</button>
+  <div class="bx--assistive-text" id="test-1-label" role="tooltip">Brief description of the dotted, underlined term</div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction and visible set as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction and visible set as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--left bx--tooltip--align-center"
+  data-floating-menu-direction="left"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`bottom\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`bottom\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--bottom bx--tooltip--align-center"
+  data-floating-menu-direction="bottom"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`left\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`left\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--left bx--tooltip--align-center"
+  data-floating-menu-direction="left"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`right\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`right\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--right bx--tooltip--align-center"
+  data-floating-menu-direction="right"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`top\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with direction set to \`top\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`content\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`content\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    <div>
+      Interactive tooptip content
+      <button>
+        Close tooltip
+      </button>
+    </div>
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`label\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label">
+    <div>Interactive tooptip label</div><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`label\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`trigger\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <div>Interactive tooptip trigger</div>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with slot \`trigger\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with visible set to \`true\` as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip with visible set to \`true\` as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip: minimal as expected 1`] = `
+<div class="cv-interactive-tooltip">
+  <div id="test-1-label" class="bx--tooltip__label"><button aria-expanded="false" aria-labelledby="test-1-label" class="bx--tooltip__trigger" aria-controls="test-1" aria-haspopup="true" type="button">
+      <anonymous-stub></anonymous-stub>
+    </button></div>
+</div>
+`;
+
+exports[`CvInteractiveTooltip should render interactive tooltip: minimal as expected 2`] = `
+<div
+  aria-describedby="test-1-body"
+  aria-hidden="true"
+  aria-labelledby="test-1-label"
+  class="bx--tooltip bx--tooltip--top bx--tooltip--align-center"
+  data-floating-menu-direction="top"
+  id="test-1"
+  role="dialog"
+  style="left: -9999px; top: 0px;"
+  tabindex="-1"
+>
+  <div
+    class="cv-interactive-tooltip__before-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+  <span
+    class="bx--tooltip__caret"
+  />
+  <div
+    class="bx--tooltip__content"
+  >
+    
+    
+  </div>
+  <div
+    class="cv-interactive-tooltip__after-content"
+    style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`CvToopltip should render tooltip with aligment and direction set as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-end" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with aligment set to \`center\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with aligment set to \`end\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with aligment set to \`start\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-start" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with direction set to \`bottom\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with direction set to \`left\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with direction set to \`right\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip with direction set to \`top\` as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;
+
+exports[`CvToopltip should render tooltip: minimal as expected 1`] = `
+<button class="cv-tooltip bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center" type="button"><span class="bx--assistive-text">this is a tip</span>
+  <anonymous-stub></anonymous-stub>
+</button>
+`;

package/src/components/CvTooltip/consts.js

@@ -0,0 +1,15 @@
+export const TipAlignments = {
+  center: 'center',
+  end: 'end',
+  start: 'start',
+};
+
+export const TipDirections = {
+  bottom: 'bottom',
+  left: 'left',
+  top: 'top',
+  right: 'right',
+};
+
+export const alignments = Object.values(TipAlignments);
+export const directions = Object.values(TipDirections);

package/src/components/CvTooltip/index.js

@@ -0,0 +1,6 @@
+import CvTooltip from './CvTooltip.vue';
+import CvDefinitionTooltip from './CvDefinitionTooltip.vue';
+import CvInteractiveTooltip from './CvInteractiveTooltip.vue';
+export { CvTooltip, CvDefinitionTooltip, CvInteractiveTooltip };
+export { TipAlignments, TipDirections, alignments, directions } from './consts';
+export default CvTooltip;

package/src/components/CvTooltip/sbTooltipPrefix.js

@@ -0,0 +1,2 @@
+/* istanbul ignore next */
+export const sbTooltipPrefix = 'CvTooltips';

package/src/components/CvUIShell/CvSideNav.vue

@@ -15,6 +15,8 @@
     :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
+    @mouseenter="onHoverToggle(true)"
+    @mouseleave="onHoverToggle(false)"
     ref="el"
   >
     <slot></slot>
@@ -62,6 +64,7 @@ const props = defineProps({
 });
 
 const el = ref(null);
+const expandedViaHoverState = ref(false);
 const panelExpanded = computed({
   get() {
     return data.dataExpanded;
@@ -107,7 +110,10 @@ watch(
   }
 );
 const emit = defineEmits(['update:expanded', 'panel-resize']);
-watch(panelExpanded, current => {
+const isPanelExpanded = computed(
+  () => panelExpanded.value || expandedViaHoverState.value
+);
+watch(isPanelExpanded, current => {
   emit('update:expanded', current);
   emit('panel-resize', { id: props.id, expanded: current });
 });
@@ -125,6 +131,9 @@ function onMouseDown(ev) {
     ev.preventDefault();
   }
 }
+function onHoverToggle(value) {
+  if (props.rail) expandedViaHoverState.value = value;
+}
 function toggleExpand() {
   panelExpanded.value = data.dataExpanded;
 }