diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index f3320a9218..53ca330cad 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -49,7 +49,8 @@ "author": "", "license": "Apache-2.0", "devDependencies": { - "@spectrum-css/tooltip": "^3.0.0-beta.4" + "@spectrum-css/tooltip": "^3.0.0-beta.5", + "@spectrum-web-components/icons-workflow": "^0.3.6" }, "dependencies": { "@spectrum-web-components/base": "^0.1.3", diff --git a/packages/tooltip/stories/tooltip.stories.ts b/packages/tooltip/stories/tooltip.stories.ts index 69ba3ebec6..e1b2226427 100644 --- a/packages/tooltip/stories/tooltip.stories.ts +++ b/packages/tooltip/stories/tooltip.stories.ts @@ -14,13 +14,35 @@ import { html, boolean, select, text } from '@open-wc/demoing-storybook'; import '../sp-tooltip.js'; import '@spectrum-web-components/icon/sp-icon'; import '@spectrum-web-components/icons/sp-icons-medium.js'; -import { TemplateResult } from '@spectrum-web-components/base'; +import { ifDefined, TemplateResult } from '@spectrum-web-components/base'; +import { + AlertIcon, + CheckmarkIcon, + InfoIcon, +} from '@spectrum-web-components/icons-workflow'; const tipOptions = ['top', 'bottom', 'left', 'right']; const variantOptions = ['', 'info', 'positive', 'negative']; -const iconOptions = ['AlertSmall', 'CheckmarkSmall', 'InfoSmall']; +const iconOptions: { + [key: string]: ({ + width, + height, + hidden, + title, + }?: { + width?: number; + height?: number; + hidden?: boolean; + title?: string; + }) => TemplateResult | string; +} = { + '': () => html``, + negative: AlertIcon, + positive: CheckmarkIcon, + info: InfoIcon, +}; export default { component: 'sp-tooltip', @@ -50,8 +72,13 @@ export const Default = (): TemplateResult => { }; export const wIcon = (): TemplateResult => { + const variant = select( + 'Variant', + variantOptions, + variantOptions[3], + 'Element' + ); return html` - { tipOptions[0], 'Element' )} - variant=${select( - 'Variant', - variantOptions, - variantOptions[0], - 'Element' - )} + variant=${ifDefined(variant || undefined)} > - + ${!!variant + ? html` + + ${iconOptions[variant]()} + + ` + : html``} ${text('Tip text', 'Tooltip', 'Element')} `;