tooltip implementation - controls show up (#309)

packages/nimble-components/src/tooltip/index.ts

@@ -0,0 +1,24 @@
+import {
+    DesignSystem,
+    Tooltip as FoundationTooltip,
+    tooltipTemplate as template
+} from '@microsoft/fast-foundation';
+import { styles } from './styles';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tooltip': Tooltip;
+    }
+}
+
+export class Tooltip extends FoundationTooltip {}
+
+const nimbleTooltip = Tooltip.compose({
+    baseName: 'tooltip',
+    baseClass: FoundationTooltip,
+    template,
+    styles
+    //extra?
+})
+
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());

packages/nimble-components/src/tooltip/styles.ts

@@ -0,0 +1,23 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '@microsoft/fast-foundation';
+
+import {
+    borderColor,
+    borderHoverColor,
+    borderRgbPartialColor,
+    bodyFontColor,
+    bodyDisabledFontColor,
+    controlHeight,
+    iconSize,
+    borderWidth,
+    smallDelay,
+    buttonLabelFont
+} from '../theme-provider/design-tokens';
+
+// wip
+
+export const styles = css`
+    ${display('inline-flex')}
+    
+`;

packages/nimble-components/src/tooltip/tests/tooltip.stories.ts

@@ -0,0 +1,64 @@
+import { html } from '@microsoft/fast-element';
+import type { Meta, StoryObj } from '@storybook/html';
+import { withXD } from 'storybook-addon-xd-designs';
+import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
+import '../../all-components';
+import type { AutoUpdateMode } from '@microsoft/fast-foundation';
+
+interface TooltipArgs {
+    visible: boolean;
+    anchor: string;
+    delay: number;
+    autoUpdateMode: AutoUpdateMode; // ? Can't put in args
+    horiontalViewportLock: boolean;
+    verticalViewportLock: boolean;
+    tooltip: string;
+}
+
+const metadata: Meta<TooltipArgs> = {
+    title: 'Tooltip',
+    decorators: [withXD],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Per [W3C](https://w3c.github.io/aria-practices/#checkbox) – The dual-state checkbox is the most common type, as it allows the user to toggle between two choices: checked and not checked.'
+            }
+        },
+        design: {
+            artboardUrl:
+                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/3698340b-8162-4e5d-bf7a-20194612b3a7/specs'
+        },
+        actions: {
+            handles: ['change']
+        }
+        // prob change nimble html back to checkbox for now might err
+    },
+    render: createUserSelectedThemeStory(html`
+        <nimble-tooltip 
+        >
+
+        </nimble-tooltip>
+    `),
+    argTypes: {
+        autoUpdateMode: {
+            description: `Whether the checkbox is in the indeterminate (i.e. partially checked) state. Configured programmatically, not by attribute.
+<details>
+<summary>Usage details</summary>
+The \`indeterminate\` state is not automatically changed when the user changes the \`checked\` state. Client applications that use \`indeterminate\` state are responsible for subscribing to the \`change\` event to respond to this situation.
+</details>`
+        }
+    },
+    args: {
+        tooltip: 'Tooltip label',
+        anchor: 'anchor? id of element?', // how to set to id of element tooltip anchored to
+        visible: true,
+        delay: 300,
+        horiontalViewportLock: false,
+        verticalViewportLock: false
+    }
+};
+
+export default metadata;
+
+export const checkbox: StoryObj<TooltipArgs> = {}; // if checkbox changed to toolbox, breaks