Merge pull request #23 from silinternational/feature/Tooltip-story

Tooltip story

Author: hobbitronics

CHANGELOG.md

@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - actions, isAboveMobile, isAboveTablet, setNotice to index.js so they can be imported directly
-- $$props.class to Fab, TextArea, Select, Checkbox, Datatable, Dialog.Simple, Dialog.Alert and List so they can accept global classes
+- $$props.class to Fab, TextArea, Select, Checkbox, Datatable, Dialog.Simple, Dialog.Alert, Tooltip and List so they can accept global classes
 - barColorProvided to Progress.Linear to allow bypass of bar-color class when no color is provided
 - bgColorIsVariant to TopAppBar to allow bypass of bg-color-variant if no color is provided
 - README: Theming, Drawer example, CSS utility classes and Storybook url.

components/mdc/Tooltip/Tooltip.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface">
+  <div class="mdc-tooltip__surface {$$props.class}">
     <slot></slot>
   </div>
 </div>

stories/Tooltip.stories.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Tooltip } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    tooltipID: '1',
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/Tooltip"
+  component={Tooltip}
+/>
+
+<Template let:args>
+  <div class="flex justify-center my-4">
+    <Tooltip.Wrapper ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
+  </div>
+
+  <Tooltip {...args}>Tooltip main slot here</Tooltip>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Position"
+  args={
+    copyAndModifyArgs(args, {positionX: 'start', positionY: 'above'})
+  }
+/>