Add icon and include css

0fb2790f · Tögl, Christina · 35a4baca · 0fb2790f · 0fb2790f · 0fb2790f
Commit 0fb2790f authored 3 years ago by Tögl, Christina
--- a/packages/tooltip/assets/favicon.ico
+++ b/packages/tooltip/assets/favicon.ico
--- a/packages/tooltip/assets/index.html.ejs
+++ b/packages/tooltip/assets/index.html.ejs
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <script type="module" src="dbp-tooltip-demo.js"></script>
+    <style src="tippy.css"></style>
 </head>
 <body>

--- a/packages/tooltip/rollup.config.js
+++ b/packages/tooltip/rollup.config.js
@@ -74,6 +74,7 @@ export default (async () => {
                limit: 0,
                include: [
                    await getPackagePath('select2', '**/*.css'),
+                    await getPackagePath('tippy.js', '**/*.css'),
                ],
                emitFiles: true,
                fileName: 'shared/[name].[hash][extname]'

--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -5,6 +5,7 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import {TooltipElement} from './tooltip';
 import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+import tippy2CSSPath from 'tippy.js/dist/tippy.css';
 export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
@@ -52,13 +53,18 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
    render() {
+        const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
        return html`
+            <link rel="stylesheet" href="${tippy2CSS}">
            <section class="section">
                <div class="container">
                    <h1 class="title">Tooltip-Demo</h1>
                </div>
                <div class="container">
-                    <dbp-tooltip></dbp-tooltip>
+                    <dbp-tooltip text-content="tippy tooltip demo text"></dbp-tooltip>
                </div>
            </section>
        `;

--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import * as commonStyles from '@dbp-toolkit/common/styles';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import tippy from 'tippy.js';
-//import 'tippy.js/dist/tippy.css';
+import {Icon} from '@dbp-toolkit/common';
-console.dir(tippy);
+import tippy2CSSPath from 'tippy.js/dist/tippy.css';
-export class TooltipElement extends DBPLitElement {
+export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
    constructor() {
        super();
-        this.gitInfo = '';
+        this.tippy = '';
+        this.textContent = '';
    }
+    static get scopedElements() {
+        return {
+            'dbp-icon': Icon,
+        };
+    }
    static get properties() {
        return {
            ...super.properties,
-            gitInfo: { type: String, attribute: 'git-info' },
+            tippy: { type: Object, attribute: false },
+            textContent: { type: String, attribute: 'text-content' },
        };
    }
+    firstUpdated() {
+        tippy(this._('#tooltip-icon'), {
+            content: this.textContent,
+        });
+    }
+    static get styles() {
+        // language=css
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS(false)}
+            ${commonStyles.getButtonCSS()}
+            .info-icon {
+                color: red;
+                padding: 0px 4px;
+            }
+        `;
+    }
    render() {
-        // tippy('#myButton', {
-        //     content: "I'm a Tippy tooltip!",
+        const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
-        // });
+        if (this._('#tooltip-icon')) {
+            this.tippy = tippy(this._('#tooltip-icon'), { content: this.textContent });
+        }
        return html`
-        <div>
+            <link rel="stylesheet" href="${tippy2CSS}">
-            <button id="myButton">My Button</button>
+            <div>
-        </div>
+                <dbp-icon name='information' class="info-icon" id="tooltip-icon"></dbp-icon>
+            </div>
        `;
    }

--- a/packages/tooltip/test/unit.js
+++ b/packages/tooltip/test/unit.js
+import {assert} from '@esm-bundle/chai';
+import '../src/dbp-tooltip';
+suite('dbp-tooltip', () => {
+    let node;
+    setup(async () => {
+      node = document.createElement('dbp-tooltip');
+      document.body.appendChild(node);
+      await node.updateComplete;
+    });
+    teardown(() => {
+      node.remove();
+    });
+    test('should render', () => {
+      assert.isNotNull(node.shadowRoot);
+    });
+  });