feat(component): add Tooltip

Closes #11

- Fixes `tabindex` prop storybook typo

src/components/DatePicker/DatePicker.svelte

@@ -117,7 +117,6 @@
     }
   });
 
-  // $: hasCalendar.set($mode === 'single' || $mode === 'range');
   $: inputValue.set(value);
   $: value = $inputValue;
 </script>

src/components/FileUploader/FileUploader.stories.js

@@ -1,4 +1,4 @@
-import { withKnobs, text, select, boolean, number, array } from '@storybook/addon-knobs';
+import { withKnobs, text, select, boolean, array } from '@storybook/addon-knobs';
 import Component from './FileUploader.Story.svelte';
 
 export default { title: 'FileUploader', decorators: [withKnobs] };
@@ -89,7 +89,7 @@ export const FileUploaderDropContainer = () => ({
     ),
     disabled: boolean('Disabled (disabled)', false),
     role: text('ARIA role of the button (role)', ''),
-    tabindex: number('Tab index (tabindex)', '0')
+    tabindex: text('Tab index (tabindex)', '0')
   }
 });
 

src/components/Tabs/Tabs.stories.js

@@ -37,7 +37,7 @@ export const Container = () => ({
       disabled: boolean('Disabled (disabled in <Tab>)', false),
       href: text('The href for tab (href in <Tab>)', '#'),
       role: text('ARIA role (role in <Tab>)', 'presentation'),
-      tabindex: number('Tab index (tabindex in <Tab>)', 0)
+      tabindex: text('Tab index (tabindex in <Tab>)', '0')
     }
   }
 });

src/components/Tooltip/Tooltip.Story.svelte

@@ -0,0 +1,88 @@
+<script>
+  export let story = undefined;
+
+  import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
+  import Layout from '../../internal/ui/Layout.svelte';
+  import { cx } from '../../lib';
+  import Link from '../Link';
+  import Button from '../Button';
+  import Tooltip from './Tooltip.svelte';
+
+  let open = story === 'uncontrolled';
+</script>
+
+<style>
+  .custom-icon-class {
+    width: 10px;
+    height: 4px;
+    border-radius: 5px;
+    background-color: red;
+  }
+</style>
+
+<Layout>
+  <div style="margin: 3rem">
+    {#if story === 'custom icon'}
+      <Tooltip
+        {...$$props}
+        bind:open
+        on:open={() => {
+          console.log('on:open');
+        }}
+        on:close={() => {
+          console.log('on:close');
+        }}>
+        <div slot="icon" class="custom-icon-class" />
+        <p>
+          This is some tooltip text. This box shows the maximum amount of text that should appear
+          inside. If more room is needed please use a modal instead.
+        </p>
+        <div class={cx('--tooltip__footer')}>
+          <Link href="/">Learn More</Link>
+          <Button size="small">Create</Button>
+        </div>
+      </Tooltip>
+    {:else if story === 'uncontrolled'}
+      <Button
+        style="padding: 15px 20px; margin: 4px 20px"
+        on:click={() => {
+          open = false;
+        }}>
+        Hide
+      </Button>
+      <Button
+        style="padding: 15px 20px; margin: 4px 20px"
+        on:click={() => {
+          open = true;
+        }}>
+        Show
+      </Button>
+      <div style="padding: 15px 20px; margin: 4px 20px">
+        <Tooltip {...$$props} bind:open showIcon={false}>
+          <div slot="triggerText">My text wrapped with tooltip</div>
+          Tooltip content
+        </Tooltip>
+      </div>
+    {:else}
+      <Tooltip
+        {...$$props}
+        bind:open
+        on:open={() => {
+          console.log('on:open');
+        }}
+        on:close={() => {
+          console.log('on:close');
+        }}
+        icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
+        <p>
+          This is some tooltip text. This box shows the maximum amount of text that should appear
+          inside. If more room is needed please use a modal instead.
+        </p>
+        <div class={cx('--tooltip__footer')}>
+          <Link href="/">Learn More</Link>
+          <Button size="small">Create</Button>
+        </div>
+      </Tooltip>
+    {/if}
+  </div>
+</Layout>

src/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,61 @@
+import { withKnobs, select, text } from '@storybook/addon-knobs';
+import Component from './Tooltip.Story.svelte';
+
+export default { title: 'Tooltip', decorators: [withKnobs] };
+
+const directions = {
+  'Top (top)': 'top',
+  'Right (right)': 'right',
+  'Bottom (bottom)': 'bottom',
+  'Left (left)': 'left'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
+    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
+  }
+});
+
+export const NoIcon = () => ({
+  Component,
+  props: {
+    story: 'no icon',
+    showIcon: false,
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
+    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
+  }
+});
+
+export const CustomIcon = () => ({
+  Component,
+  props: {
+    story: 'custom icon',
+    showIcon: true,
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
+    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
+  }
+});
+
+export const CustomIconOnly = () => ({
+  Component,
+  props: {
+    story: 'custom icon only',
+    showIcon: true,
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    iconDescription: 'Helpful Information',
+    tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
+  }
+});
+
+export const UncontrolledTooltip = () => ({
+  Component,
+  props: {
+    story: 'uncontrolled',
+    direction: select('Tooltip direction (direction)', directions, 'bottom')
+  }
+});

src/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,172 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let triggerText = ''; // TODO: support slot?
+  export let triggerId = Math.random();
+  export let tooltipId = Math.random();
+  export let triggerClass = undefined;
+  export let open = false;
+  export let direction = 'bottom';
+  export let icon = Information16;
+  export let showIcon = true; // TODO: change to hideIcon
+  export let iconName = '';
+  export let iconDescription = '';
+  export let tabindex = '0';
+  export let style = undefined;
+
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+  import Information16 from 'carbon-icons-svelte/lib/Information16';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+
+  let programmatic = true;
+  let buttonRef = undefined;
+  let tooltipRef = undefined;
+  let iconRef = undefined;
+
+  function onKeydown(event) {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      open = false;
+    } else if (event.key === ' ' || event.key === 'Enter') {
+      event.stopPropagation();
+      event.preventDefault();
+      open = true;
+    }
+  }
+
+  function onBlur({ relatedTarget }) {
+    if (tooltipRef && !tooltipRef.contains(relatedTarget)) {
+      open = false;
+    }
+  }
+
+  function openMenu() {
+    programmatic = false;
+    open = true;
+  }
+
+  function closeMenu() {
+    programmatic = false;
+    open = false;
+  }
+
+  afterUpdate(() => {
+    if (open) {
+      const button = buttonRef.getBoundingClientRect();
+      const tooltip = tooltipRef.getBoundingClientRect();
+
+      let iconWidth = 16;
+      let iconHeight = 16;
+
+      if (iconRef) {
+        const icon = iconRef.getBoundingClientRect();
+        iconWidth = icon.width;
+        iconHeight = icon.height;
+      }
+
+      let offsetX = 0;
+      let offsetY = 0;
+
+      switch (direction) {
+        case 'bottom':
+          if (!showIcon) {
+            offsetX = -1 * (tooltip.width / 2 - button.width / 2);
+          } else {
+            offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2);
+          }
+          offsetY = iconHeight / 2;
+          break;
+        case 'right':
+          offsetX = button.width + 6;
+          offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
+          break;
+        case 'left':
+          if (!showIcon) {
+            offsetX = -1 * (tooltip.width + 6 + 1);
+          } else {
+            offsetX = -1 * (tooltip.width - button.width + iconWidth + 8);
+          }
+          offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
+          break;
+        case 'top':
+          if (!showIcon) {
+            offsetX = -1 * (tooltip.width / 2 - button.width / 2);
+          } else {
+            offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
+          }
+          offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
+          break;
+      }
+
+      tooltipRef.style.left = offsetX + 'px';
+      tooltipRef.style.marginTop = offsetY + 'px';
+    }
+  });
+
+  $: {
+    dispatch(open ? 'open' : 'close');
+  }
+  $: buttonProps = {
+    role: 'button',
+    'aria-haspopup': 'true',
+    id: showIcon ? undefined : triggerId,
+    class: showIcon ? cx('--tooltip__trigger') : cx('--tooltip__label', triggerClass),
+    'aria-expanded': open,
+    'aria-describedby': open ? tooltipId : undefined,
+    'aria-labelledby': triggerText ? triggerId : undefined,
+    'aria-label': triggerText ? iconDescription : undefined,
+    tabindex,
+    style: showIcon ? undefined : style
+  };
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (!programmatic && open && tooltipRef && !tooltipRef.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div style="position: relative">
+  {#if showIcon}
+    <div bind:this={buttonRef} id={triggerId} class={cx('--tooltip__label', triggerClass)} {style}>
+      {triggerText}
+      <div
+        bind:this={iconRef}
+        {...buttonProps}
+        on:click|preventDefault|stopPropagation={openMenu}
+        on:focus={openMenu}
+        on:blur={onBlur}
+        on:keydown={onKeydown}>
+        <slot name="icon">
+          <svelte:component this={icon} name={iconName} />
+        </slot>
+      </div>
+    </div>
+  {:else}
+    <div
+      bind:this={buttonRef}
+      {...buttonProps}
+      on:click|preventDefault|stopPropagation={openMenu}
+      on:focus={openMenu}
+      on:blur={onBlur}
+      on:keydown={onKeydown}>
+      <slot name="triggerText">{triggerText}</slot>
+    </div>
+  {/if}
+  {#if open}
+    <div
+      bind:this={tooltipRef}
+      role="tooltip"
+      tabindex="0"
+      id={tooltipId}
+      data-floating-menu-direction={direction}
+      class={cx('--tooltip', open && '--tooltip--shown', className)}
+      on:blur={closeMenu}>
+      <span class={cx('--tooltip__caret')} />
+      <slot />
+    </div>
+  {/if}
+</div>

src/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip.svelte';
+
+export default Tooltip;