chore: lift components folder

src/TooltipDefinition/TooltipDefinition.Story.svelte

@@ -0,0 +1,5 @@
+<script>
+  import TooltipDefinition from "./TooltipDefinition.svelte";
+</script>
+
+<TooltipDefinition {...$$props}>Definition Tooltip</TooltipDefinition>

src/TooltipDefinition/TooltipDefinition.stories.js

@@ -0,0 +1,31 @@
+import { withKnobs, select, text } from "@storybook/addon-knobs";
+import Component from "./TooltipDefinition.Story.svelte";
+
+export default { title: "TooltipDefinition", decorators: [withKnobs] };
+
+const directions = {
+  "Top (top)": "top",
+  "Bottom (bottom)": "bottom",
+};
+
+const alignments = {
+  "Start (start)": "start",
+  "Center (center)": "center",
+  "End (end)": "end",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    direction: select("Tooltip direction (direction)", directions, "bottom"),
+    align: select(
+      "Tooltip alignment to trigger button (align)",
+      alignments,
+      "start"
+    ),
+    tooltipText: text(
+      "Tooltip content (tooltipText)",
+      "Brief description of the dotted, underlined words above."
+    ),
+  },
+});

src/TooltipDefinition/TooltipDefinition.svelte

@@ -0,0 +1,51 @@
+<script>
+  export let tooltipText = "";
+  export let align = "center"; // "start" | "center" | "end"
+  export let direction = "bottom"; // "top" | "bottom"
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
+
+  $: hidden = false;
+  $: visible = false;
+</script>
+
+<svelte:body
+  on:keydown={e => {
+    if (e.key === 'Escape') {
+      hidden = true;
+    }
+  }} />
+
+<div
+  class:bx--tooltip--definition={true}
+  class:bx--tooltip--a11y={true}
+  {...$$restProps}
+  on:mouseenter={() => {
+    hidden = false;
+    visible = true;
+  }}
+  on:mouseleave={() => {
+    visible = false;
+  }}>
+  <button
+    bind:this={ref}
+    aria-describedby={id}
+    class:bx--tooltip--a11y={true}
+    class:bx--tooltip__trigger={true}
+    class:bx--tooltip__trigger--definition={true}
+    class:bx--tooltip--hidden={hidden}
+    class:bx--tooltip--visible={visible}
+    class="{direction && `bx--tooltip--${direction}`}
+    {align && `bx--tooltip--align-${align}`}"
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:focus
+    on:focus={() => {
+      hidden = false;
+    }}>
+    <slot />
+  </button>
+  <div role="tooltip" {id} class:bx--assistive-text={true}>{tooltipText}</div>
+</div>

src/TooltipDefinition/index.js

@@ -0,0 +1 @@
+export { default as TooltipDefinition } from "./TooltipDefinition.svelte";