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 { 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';