Tests for implementation (#309)

ni · Jun 14, 2022 · 0e71240 · 0e71240
1 parent 2f2920f
commit 0e71240
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 5 deletions.
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -4,18 +4,20 @@ import {
     borderColor,
     tooltipCaptionFont,
     tooltipCaptionFontColor,
-    borderWidth
+    borderWidth,
+    popupBoxShadowColor
 } from '../theme-provider/design-tokens';
 
 // font should be source sans pro regular 11px
+// shadow color???
 
 export const styles = css`
     ${display('inline-flex')}
 
     :host {
         font: ${tooltipCaptionFont}; 
         color: ${tooltipCaptionFontColor};
-        align-items: center;
+        align-items: left;
         cursor: pointer;
         outline: none;
         user-select: none;
@@ -25,7 +27,9 @@ export const styles = css`
         box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
-        padding: 2px;
+        box-shadow: ${popupBoxShadowColor};
+        background: #00000029;
+        padding: 1px;
         display: inline-flex;
         align-items: center;
         justify-content: center;

diff --git a/packages/nimble-components/src/tooltip/tests/tooltip-matrix.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip-matrix.stories.ts
@@ -0,0 +1,70 @@
+import type { Meta, Story } from '@storybook/html';
+import { withXD } from 'storybook-addon-xd-designs';
+import { html, ViewTemplate } from '@microsoft/fast-element';
+import {
+    createMatrix,
+    sharedMatrixParameters
+} from '../../utilities/tests/matrix';
+import {
+    createMatrixThemeStory,
+    createStory
+} from '../../utilities/tests/storybook';
+import { hiddenWrapper } from '../../utilities/tests/hidden';
+import '../../all-components';
+
+const metadata: Meta = {
+    title: 'Tests/Tooltip',
+    decorators: [withXD],
+    parameters: {
+        ...sharedMatrixParameters(),
+        design: {
+            artboardUrl:
+                'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/'
+        }
+    }
+};
+
+export default metadata;
+
+const horiontalViewportLockStates = [
+    ['horiontalViewportLock Checked', true],
+    ['horiontalViewportLock Unchecked', false]
+] as const;
+type HoriontalViewportLockState = typeof horiontalViewportLockStates[number];
+
+const verticalViewportLockStates = [
+    ['verticalViewportLock Checked', true],
+    ['verticalViewportLock Unchecked', false]
+] as const;
+type VerticalViewportLockState = typeof verticalViewportLockStates[number];
+
+// WIP need to figure out anchoring
+
+const component = (
+    [horiontalViewportLockName, horiontalViewportLock]: HoriontalViewportLockState,
+    [verticalViewportLockName, verticalViewportLock]: VerticalViewportLockState,
+): ViewTemplate => html`
+<nimble-button
+id="anchor">${horiontalViewportLockName} ${verticalViewportLockName}
+</nimble-button>
+
+<nimble-tooltip
+    anchor='anchor'
+    ?horiontalViewportLock="${() => horiontalViewportLock}"
+    ?verticalViewportLock="${() => verticalViewportLock}"
+>
+    text
+</nimble-tooltip>`;
+
+export const tooltipThemeMatrix: Story = createMatrixThemeStory(
+    createMatrix(component, [
+        horiontalViewportLockStates,
+        verticalViewportLockStates
+    ])
+);
+
+export const hiddenTooltip: Story = createStory(
+    hiddenWrapper(
+        html`<nimble-tooltip hidden>Hidden Tooltip</nimble-tooltip>`
+    )
+);
diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.spec.ts b/packages/nimble-components/src/tooltip/tests/tooltip.spec.ts
@@ -0,0 +1,17 @@
+import {
+    DesignSystem,
+    Tooltip as FoundationTooltip
+} from '@microsoft/fast-foundation';
+import { Tooltip } from '..';
+
+describe('Tooltip', () => {
+    it('should have its tag returned by tagFor(FoundationTooltip)', () => {
+        expect(DesignSystem.tagFor(FoundationTooltip)).toBe('nimble-tooltip');
+    });
+
+    it('can construct an element instance', () => {
+        expect(document.createElement('nimble-tooltip')).toBeInstanceOf(
+            Tooltip
+        );
+    });
+});
diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts
@@ -19,12 +19,12 @@ const metadata: Meta<TooltipArgs> = {
         docs: {
             description: { // to be updated
                 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.'
+                    'Per [W3C](https://w3c.github.io/aria-practices/#tooltip) – A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.'
             }
         },
         design: {
             artboardUrl:
-                'https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/3698340b-8162-4e5d-bf7a-20194612b3a7/specs'
+                'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/'
         },
         actions: {
             handles: ['change']