From 0fb2790faffbc0309ecb7a36c1e5c0132987d5d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christina=20T=C3=B6gl?= <toegl@tugraz.at>
Date: Wed, 8 Sep 2021 16:07:52 +0200
Subject: [PATCH] Add icon and include css
---
packages/tooltip/assets/favicon.ico | Bin 0 -> 2550 bytes
packages/tooltip/assets/index.html.ejs | 1 +
packages/tooltip/rollup.config.js | 1 +
packages/tooltip/src/dbp-tooltip-demo.js | 8 ++-
packages/tooltip/src/tooltip.js | 60 ++++++++++++++++++-----
packages/tooltip/test/unit.js | 21 ++++++++
6 files changed, 79 insertions(+), 12 deletions(-)
create mode 100644 packages/tooltip/assets/favicon.ico
create mode 100644 packages/tooltip/test/unit.js
diff --git a/packages/tooltip/assets/favicon.ico b/packages/tooltip/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
GIT binary patch
literal 2550
zcmeH{J!@1^5Qg9Qfi}@C1S=tFL@SHw1R=k|!X_wkl3I{dku4;hA_M{lL{exWVu~Os
z1S^fr9!$4EB!X-a459`s0v5+-W+QHv-9Sty-ek_b^WOP*?wq?<8qpCo8sdCX)5oRr
z(yl+I>0{D;v<t3bW0=SJF)<RS?$UEzYelP?S6lT<(cAVnwKq5Q;OTQ@<6gotRwQ?g
z#n24RTqEB@5_;kyp(pf&?r9l4qi39qp3ym}pcnLlUJwd;#jp6aMA=G1qqtGXNHRDb
z$zU)T3<iV2U<f1_3<iV2U@#a069$99U@#aAhCqkGU@#aA27|$9U~m{5796$vctMi5
z&RD_F{gGiwG*2{26iu+i7`U0ZNU$VWVk~eZI1(HQjs!=H3XTLrf+4}+qf2lk7!nM{
zpPMyCNT2Q>evH?r0~Nh9Q88+IXP7cgGYv9KnckV3nIf6qnclG-(Houqnf{snzD1e-
znb~9*G7Opb#J7#9#M7g2X7z1k28DhFwgN|?Uu>;&FoOa|aSk3Vwwt5^OM#^TQD_*i
z04#;XLQp{{u<(yjhdn8<6rV@1_}k#SfCfW_p~6sMs4!F*;&p<dz))eRFccUlgAory
zg`vVwVW2dI4nu{Z!cYOI^e+^vBvyhFH4=V;qeg9yNgCG^O-@c~W@binb8}i)SWv6g
z((>}M*4Njyv9X~}r=zW{Ep2aaYiDOi-+xv;UR+eO*<`x@8}JkL!t=WBRy}G@sd4mn
z*v(Pt!_taYX0PkU*(t3qz1IAzdA*#yrz<B$_5Rc|T|0M2FK(UD)yp6C?%`L>uKv*H
zOH*2FtjRhnYF&IoheIDnIC_ih_1%j@zADy!zenswML;)xxAGnbt>5njILLK(wlVIQ
z^CxEQ)*SEJUA~iU_4KaAUi^vQ`<)$&))Rb#{~!BJpnvN7#SXgnxB2~fgM9DTum5J~
r*9Z9r$sZIutmdHDLE3)#9zX2p&l?suOh0V?u)6<--anm#erJ9GA@oeM
literal 0
HcmV?d00001
diff --git a/packages/tooltip/assets/index.html.ejs b/packages/tooltip/assets/index.html.ejs
index d6d81fb6..e91e6887 100644
--- 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>
diff --git a/packages/tooltip/rollup.config.js b/packages/tooltip/rollup.config.js
index 0fbc7fbf..b0d23052 100644
--- 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]'
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 7e294b0a..a4d7e1e2 100644
--- 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>
`;
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 37cd0358..8bfa72cb 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -1,32 +1,70 @@
+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';
-console.dir(tippy);
+import {Icon} from '@dbp-toolkit/common';
+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>
- <button id="myButton">My Button</button>
- </div>
+ <link rel="stylesheet" href="${tippy2CSS}">
+ <div>
+ <dbp-icon name='information' class="info-icon" id="tooltip-icon"></dbp-icon>
+ </div>
+
`;
}
diff --git a/packages/tooltip/test/unit.js b/packages/tooltip/test/unit.js
new file mode 100644
index 00000000..007cddaa
--- /dev/null
+++ b/packages/tooltip/test/unit.js
@@ -0,0 +1,21 @@
+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);
+ });
+ });
+
--
GitLab