chore: lift components folder

src/TooltipIcon/TooltipIcon.Story.svelte

@@ -0,0 +1,11 @@
+<script>
+  import Filter16 from "carbon-icons-svelte/lib/Filter16";
+
+  import TooltipIcon from "./TooltipIcon.svelte";
+</script>
+
+<div>
+  <TooltipIcon {...$$props}>
+    <Filter16 />
+  </TooltipIcon>
+</div>

src/TooltipIcon/TooltipIcon.stories.js

@@ -0,0 +1,26 @@
+import { withKnobs, select, text } from "@storybook/addon-knobs";
+import Component from "./TooltipIcon.Story.svelte";
+
+export default { title: "TooltipIcon", decorators: [withKnobs] };
+
+const directions = {
+  "Top (top)": "top",
+  "Right (right)": "right",
+  "Bottom (bottom)": "bottom",
+  "Left (left)": "left",
+};
+
+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 (align)", alignments, "center"),
+    tooltipText: text("Tooltip content (tooltipText)", "Filter"),
+  },
+});

src/TooltipIcon/TooltipIcon.svelte

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

src/TooltipIcon/index.js

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