diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json
index 956b61f03..e1edef818 100644
--- a/packages/uikit-workshop/package.json
+++ b/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": [
diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss
index 1f225e713..51295b8fb 100755
--- a/packages/uikit-workshop/src/sass/pattern-lab.scss
+++ b/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';
diff --git a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js
deleted file mode 100644
index f785df5b1..000000000
--- a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import TooltipTrigger from 'react-popper-tooltip';
-import { h } from 'preact';
-import 'react-popper-tooltip/dist/styles.css';
-
-export const Tooltip = function({ tooltip, children, hideArrow, ...props }) {
- return (
- (
-
- {!hideArrow && (
-
- )}
- {tooltip}
-
- )}
- >
- {children}
-
- );
-};
diff --git a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss b/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss
deleted file mode 100644
index b1ec2906b..000000000
--- a/packages/uikit-workshop/src/scripts/components/pl-tooltip/pl-tooltip.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../sass/scss/core.scss';
-
-.tooltip-container {
- color: $pl-color-gray-87;
-}
\ No newline at end of file
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.js b/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.js
new file mode 100644
index 000000000..3c5bde8e9
--- /dev/null
+++ b/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`
+
+ ${this.slotify('default') ? this.slotify('default') : ''}
+ ${this.message}
+
+ `;
+ }
+
+ hideTooltip() {
+ this.opened = false;
+ }
+
+ showTooltip() {
+ this.opened = true;
+ }
+
+ toggleTooltip() {
+ this.opened = !this.opened;
+ }
+}
+
+customElements.define('pl-tooltip', Tooltip);
+
+export { Tooltip };
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-tooltip/pl-tooltip.scss
new file mode 100644
index 000000000..12088739a
--- /dev/null
+++ b/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;
+ }
+}
+
+
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
index 0658b19bb..aefbd8624 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
@@ -4,7 +4,6 @@ import { define, props } from 'skatejs';
import { BaseComponent } from '../../components/base-component.js';
import { store } from '../../store.js'; // connect to redux
-import { Tooltip } from '../../components/pl-tooltip/pl-tooltip';
import VisuallyHidden from '@reach/visually-hidden';
import {
@@ -35,12 +34,19 @@ class ViewportSizes extends BaseComponent {
doscoId = null;
hayMode = false;
hayId = null;
+ layoutMode = null;
+ tooltipPos = null;
controlIsPressed = false;
altIsPressed = false;
_stateChanged(state) {
this.triggerUpdate();
+
+ if (this.layoutMode !== state.app.layoutMode) {
+ this.layoutMode = state.app.layoutMode || 'vertical';
+ this.tooltipPos = this.layoutMode === 'horizontal' ? 'bottom' : 'top';
+ }
}
constructor() {
@@ -302,191 +308,121 @@ class ViewportSizes extends BaseComponent {
{!this.ishControlsHide?.s && (
-
-
- {({ getTriggerProps, triggerRef }) => (
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.m && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.MEDIUM)}
- dangerouslySetInnerHTML={{
- __html: `
+
+ this.resizeViewport(this.sizes.MEDIUM)}
+ dangerouslySetInnerHTML={{
+ __html: `
Resize viewport to medium
`,
- }}
- />
- )}
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.l && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.LARGE)}
- dangerouslySetInnerHTML={{
- __html: `
+
+ this.resizeViewport(this.sizes.LARGE)}
+ dangerouslySetInnerHTML={{
+ __html: `
Resize viewport to large
`,
- }}
- />
- )}
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.full && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.FULL)}
- dangerouslySetInnerHTML={{
- __html: `
+
+ this.resizeViewport(this.sizes.FULL)}
+ dangerouslySetInnerHTML={{
+ __html: `
Resize viewport to full
`,
- }}
- />
- )}
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.random && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.RANDOM)}
- dangerouslySetInnerHTML={{
- __html: `
+
+ this.resizeViewport(this.sizes.RANDOM)}
+ dangerouslySetInnerHTML={{
+ __html: `
Resize viewport to random
`,
- }}
- />
- )}
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.disco && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.DISCO)}
- dangerouslySetInnerHTML={{
- __html: `
+
+ this.resizeViewport(this.sizes.DISCO)}
+ dangerouslySetInnerHTML={{
+ __html: `
Resize viewport using disco mode!
`,
- }}
- />
- )}
-
+ }}
+ />
+
)}
{!this.ishControlsHide?.hay && (
-
-
- {({ getTriggerProps, triggerRef }) => (
- this.resizeViewport(this.sizes.HAY)}
- dangerouslySetInnerHTML={{
- __html: `
- Resize viewport using hay mode!
-
- `,
- }}
- />
- )}
-
+
+ this.resizeViewport(this.sizes.HAY)}
+ dangerouslySetInnerHTML={{
+ __html: `
+ Resize viewport using hay mode!
+
+ `,
+ }}
+ />
+
)}
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
index e4366fe08..7e52a17da 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
@@ -16,7 +16,6 @@ pl-viewport-sizes {
list-style: none;
margin: 0;
padding: 0;
- overflow-x: auto;
padding: 0 0.25rem;
@media all and (min-width: $pl-bp-med) {
diff --git a/packages/uikit-workshop/src/scripts/patternlab-components.js b/packages/uikit-workshop/src/scripts/patternlab-components.js
index 2697c4c96..682181e72 100644
--- a/packages/uikit-workshop/src/scripts/patternlab-components.js
+++ b/packages/uikit-workshop/src/scripts/patternlab-components.js
@@ -2,6 +2,7 @@ import './components/pl-nav/pl-nav';
import './components/pl-search/pl-search';
import './lit-components/pl-icon/pl-icon';
import './lit-components/pl-button/pl-button';
+import './lit-components/pl-tooltip/pl-tooltip';
import './lit-components/pl-toggle-info/pl-toggle-info';
import './lit-components/pl-toggle-layout/pl-toggle-layout';
import './lit-components/pl-toggle-theme/pl-toggle-theme';