refactor: updated further dependencies (pattern-lab#1303)

* chore(docs): some typos

missed to replace mustache initially and incorrect handlebars two times (both in package name and URL)

* Revert "Merge pull request pattern-lab#2 from pattern-lab/dev"

This reverts commit 7812878, reversing
changes made to 26db979.

* Revert "Merge pull request pattern-lab#1 from pattern-lab/dev"

This reverts commit 26db979, reversing
changes made to fc90750.

* Revert "chore(docs): some typos"

This reverts commit 271dc8d.

* chore: initially regenerated the yarn.lock file

by yarn run setup

* refactor: updated dependency js-beautify

* refactor: updated dependency update-notifier

* Revert "Merge branch 'dev' into refactor-updated-further-dependencies"

This reverts commit 3b11ab2, reversing
changes made to 46e97da.

* refactor: updated portfinder dependency

* refactor: updated hasha dependency

* refactor: updated wolfy87-eventemitter dependency

* refactor: updated scriptjs dependency

* refactor: updated pwa-helpers dependency

* refactor: updated mousetrap dependency

* refactor: updated clipboard dependency

* refactor: updated @webcomponents/custom-elements dependency

* refactor: updated @webcomponents/webcomponentsjs dependency

* refactor: updated get-own-property-symbols dependency

* refactor: updated lodash dependency

* refactor: updated cors dependency

* refactor: updated twing dependency

* refactor: updated nunjucks dependency

* refactor: updated minimist dependency

* refactor: updated glob dependency

* refactor: updated jshint dependency

* refactor: updated morgan dependency

* refactor: updated connect dependency

* refactor: updated colors dependency

* refactor: regenerated yarn.lock

* refactor(prettier): code rework on the prettier feedback

* refactor(prettier): code rework on the prettier feedback

* refactor: updated chalk dependency

* refactor: updated handlebars dependency

* refactor: updated sass dependency

* refactor: updated json-to-scss dependency

* refactor: updated slugify dependency

* refactor: updated tap dependency

* refactor: updated standard-version dependency

* build(deps-dev): bump sanitize-filename dependency from 1.6.1 to 1.6.3

* build(deps-dev): bump proxyquire dependency from 2.0.1 to 2.1.3

* build(deps-dev): bump graphlib dependency from 2.1.1 to 2.1.8

* build(deps-dev): bump recursive-copy dependency from 2.0.8 to 2.0.11

* build: regenerated yarn.lock file

* refactor: updated @babel/core dependency

* build(deps-dev): bump underscore dependency from 1.8.3 to 1.13.0

https://snyk.io/vuln/SNYK-JS-UNDERSCORE-1080984

* Revert "Merge branch 'dev' into refactor-updated-further-dependencies"

This reverts commit 3e3145b, reversing
changes made to c05223b.

* Revert "Revert "Merge branch 'dev' into refactor-updated-further-dependencies""

This reverts commit a690ab0.

* pattern-lab#1303: Fix pl-viewport-size-list doesn't appear anymore

* pattern-lab#1303: Fix tooltip in horizontal mode

Co-authored-by: Maximilian <[email protected]>
Co-authored-by: Josef Bredreck <[email protected]>

packages/uikit-workshop/package.json

@@ -40,14 +40,14 @@
     "ejs": "^2.7.2",
     "express": "^4.17.1",
     "fs-extra": "^8.1.0",
-    "hasha": "^5.1.0",
-    "portfinder": "^1.0.25",
+    "hasha": "^5.2.2",
+    "portfinder": "^1.0.28",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpackbar": "^4.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.13.13",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.5",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
@@ -59,13 +59,13 @@
     "@babel/runtime": "^7.13.10",
     "@pattern-lab/uikit-polyfills": "^5.13.1",
     "@reach/visually-hidden": "^0.1.2",
-    "@webcomponents/custom-elements": "^1.4.2",
+    "@webcomponents/custom-elements": "^1.4.3",
     "autoprefixer": "^9.6.5",
     "babel-loader": "^8.0.6",
     "classnames": "^2.2.6",
     "clean-css-loader": "^1.0.1",
     "clean-webpack-plugin": "0.1.19",
-    "clipboard": "^2.0.4",
+    "clipboard": "^2.0.8",
     "copy-webpack-plugin": "^5.0.2",
     "core-js": "^3.6.5",
     "cosmiconfig": "^5.0.6",
@@ -84,7 +84,7 @@
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
     "mini-css-extract-plugin": "^0.8.0",
-    "mousetrap": "^1.6.3",
+    "mousetrap": "^1.6.5",
     "no-emit-webpack-plugin": "^1.0.0",
     "node-sass": "^5.0.0",
     "node-sass-selector-importer": "^5.2.0",
@@ -97,15 +97,14 @@
     "prerender-spa-plugin": "^3.4.0",
     "pretty": "^2.0.0",
     "prismjs": "^1.15.0",
-    "pwa-helpers": "^0.9.0",
+    "pwa-helpers": "^0.9.1",
     "react-autosuggest": "^9.4.2",
     "react-dom": "^16.8.6",
     "react-html-parser": "^2.0.2",
-    "react-popper-tooltip": "^2.7.0",
     "redux": "3.7.2",
     "redux-thunk": "^2.3.0",
     "sass-loader": "^10.1.1",
-    "scriptjs": "^2.5.8",
+    "scriptjs": "^2.5.9",
     "scroll-js": "^2.2.0",
     "skatejs": "^5.2.4",
     "style-loader": "^1.0.0",
@@ -116,7 +115,7 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",
     "webpack-merge": "^4.2.2",
-    "wolfy87-eventemitter": "^5.2.6",
+    "wolfy87-eventemitter": "^5.2.9",
     "yargs": "^16.2.0"
   },
   "browserslist": [

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -45,7 +45,6 @@
 \*------------------------------------*/
 @import '../scripts/components/pl-nav/pl-nav.scss';
 @import '../scripts/components/pl-search/pl-search.scss';
-@import '../scripts/components/pl-tooltip/pl-tooltip.scss';
 @import 'scss/04-components/annotations';
 @import 'scss/04-components/breadcrumbs';
 @import 'scss/04-components/pattern-category';

packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.js

@@ -0,0 +1,59 @@
+import { LitElement, html, customElement } from 'lit-element';
+import styles from './pl-tooltip.scss?external';
+import { Slotify } from '../slotify';
+
+class Tooltip extends Slotify(LitElement) {
+  static get properties() {
+    return {
+      message: { type: String },
+      position: { type: String },
+      child: {},
+    };
+  }
+
+  constructor() {
+    super();
+
+    // property defaults
+    this.position = 'top';
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
+    styles.use();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
+    styles.unuse();
+  }
+
+  render() {
+    return html`
+      <div class="pl-tooltip pl-tooltip--${this.position}">
+        ${this.slotify('default') ? this.slotify('default') : ''}
+        <span class="pl-tooltip__text">${this.message}</span>
+      </div>
+    `;
+  }
+
+  hideTooltip() {
+    this.opened = false;
+  }
+
+  showTooltip() {
+    this.opened = true;
+  }
+
+  toggleTooltip() {
+    this.opened = !this.opened;
+  }
+}
+
+customElements.define('pl-tooltip', Tooltip);
+
+export { Tooltip };

packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss

@@ -0,0 +1,65 @@
+@import '../../../sass/scss/core.scss';
+
+.tooltip-container {
+  color: $pl-color-gray-87;
+}
+
+pl-tooltip {
+  > *:not(.pl-tooltip) {
+    display: none;
+  }
+}
+
+.pl-tooltip {
+  position: relative;
+  display: inline-block;
+
+  &__text {
+    visibility: hidden;
+    width: 120px;
+    max-width: 200px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    position: absolute;
+    z-index: 50;
+  }
+
+  &--right &__text, 
+  &--left &__text {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &--right &__text {
+    left: 115%;
+  }
+
+  &--left &__text {
+    right: 115%;
+  }
+
+  &--top &__text,
+  &--bottom &__text {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--top &__text {
+    bottom: 115%;
+
+  }
+
+  &--bottom &__text {
+    top: 115%;
+  }
+
+  &:hover &__text {
+    visibility: visible;
+  }
+}
+
+