@operato/help 2.0.0-alpha.0 → 2.0.0-alpha.100

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/help",
   "description": "Webcomponent help following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.100",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -63,32 +63,32 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.0",
-    "@operato/layout": "^2.0.0-alpha.0",
-    "@operato/markdown": "^2.0.0-alpha.0",
-    "@operato/shell": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
-    "lit": "^2.5.0",
+    "@material/web": "^1.4.0",
+    "@operato/data-grist": "^2.0.0-alpha.100",
+    "@operato/layout": "^2.0.0-alpha.100",
+    "@operato/markdown": "^2.0.0-alpha.100",
+    "@operato/shell": "^2.0.0-alpha.100",
+    "@operato/styles": "^2.0.0-alpha.100",
+    "@operato/utils": "^2.0.0-alpha.68",
+    "lit": "^3.1.2",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -105,5 +105,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f995e977847947a1ac4043ff7c627a5cf2ada67b"
+  "gitHead": "efe5f575ce5241aeb84a0af45915dca63dcce68e"
 }

package/src/components/ox-help-icon.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -8,19 +8,20 @@ import { openHelp } from '../controller/help.js'
 @customElement('ox-help-icon')
 export class HelpIcon extends LitElement {
   static styles = css`
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 4px;
       cursor: help;
       opacity: var(--help-icon-opacity);
       color: var(--help-icon-color);
-      font-size: var(--help-icon-size);
       line-height: 0;
-    }
 
-    mwc-icon:hover {
-      opacity: var(--help-icon-hover-opacity);
-      color: var(--help-icon-hover-color);
+      --md-icon-size: var(--help-icon-size);
+
+      &:hover {
+        opacity: var(--help-icon-hover-opacity);
+        color: var(--help-icon-hover-color);
+      }
     }
   `
 
@@ -43,6 +44,6 @@ export class HelpIcon extends LitElement {
   render() {
     const topic = this.topic
 
-    return html`${topic ? html`<mwc-icon>help</mwc-icon>` : html``}`
+    return html`${topic ? html`<md-icon>help</md-icon>` : html``}`
   }
 }

package/src/components/ox-title-with-help.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -10,18 +10,20 @@ import { openHelp } from '../controller/help.js'
 @customElement('ox-title-with-help')
 export class TitleWithHelp extends localize(i18next)(LitElement) {
   static styles = css`
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 4px;
       cursor: help;
       opacity: var(--help-icon-opacity);
       color: var(--help-icon-color);
-      font-size: var(--help-icon-size);
       line-height: 0;
-    }
-    mwc-icon:hover {
-      opacity: var(--help-icon-hover-opacity);
-      color: var(--help-icon-hover-color);
+
+      --md-icon-size: var(--help-icon-size);
+
+      &:hover {
+        opacity: var(--help-icon-hover-opacity);
+        color: var(--help-icon-hover-color);
+      }
     }
   `
 
@@ -32,6 +34,6 @@ export class TitleWithHelp extends localize(i18next)(LitElement) {
     const title = i18next.t(this.msgid)
     const topic = this.topic
 
-    return html` ${title} ${topic ? html`<mwc-icon @click=${() => openHelp(topic)}>help</mwc-icon>` : html``} `
+    return html` ${title} ${topic ? html`<md-icon @click=${() => openHelp(topic)}>help</md-icon>` : html``} `
   }
 }

package/src/help-style.ts

@@ -22,7 +22,7 @@ export const HelpStyle = css`
     font-size: var(--help-panel-h3-title-font-size);
     color: var(--help-panel-h3-title-color);
   }
-  mwc-icon {
+  md-icon {
     vertical-align: middle;
   }
 
@@ -92,9 +92,10 @@ export const HelpStyle = css`
     font-size: var(--fontsize-default);
     text-decoration: underline;
   }
-  a mwc-icon {
-    font-size: var(--help-panel-a-icon-size);
+  a md-icon {
     margin: 0;
+
+    --md-icon-size: var(--help-panel-a-icon-size);
   }
   a:hover {
     background-color: var(--opacity-light-dark-color);

package/src/pages/ox-help-home.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -20,6 +20,8 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
         flex-direction: column;
         overflow: hidden;
         position: relative;
+
+        --md-icon-size: 24px;
       }
 
       #navigation {
@@ -31,8 +33,8 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
         background-color: white;
       }
 
-      #navigation mwc-icon-button {
-        padding: var(--help-navigation-icon-padding);
+      #navigation md-icon {
+        padding: var(--help-navigation-icon-padding, var(--padding-default));
         border-right: var(--help-navigation-icon-border);
         cursor: pointer;
         color: var(--help-icon-color);
@@ -47,7 +49,7 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         bottom: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -81,19 +83,14 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
       <ox-markdown id="content" .src=${src} toc></ox-markdown>
 
       <div id="navigation">
-        <mwc-icon-button icon="home" @click=${() => navigate('help')} ?disabled=${
-      this.topic == 'index'
-    }></mwc-icon-button>
-        <mwc-icon-button icon="keyboard_arrow_left"  @click=${() => window.history.back()}></mwc-icon-button icon="">
-        <mwc-icon-button icon="keyboard_arrow_right"  @click=${() =>
-          window.history.forward()}></mwc-icon-button icon="">
-      </div>      
-
-      ${
-        this.showGotoTop
-          ? html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `
-          : html``
-      }
+        <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>
+        <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>
+        <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>
+      </div>
+
+      ${this.showGotoTop
+        ? html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `
+        : html``}
     `
   }
 

package/src/viewparts/ox-help-panel.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 import '@operato/markdown/ox-markdown.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -31,6 +31,9 @@ class HelpPanel extends connect(store)(LitElement) {
         margin: 4px;
 
         overflow: hidden;
+
+        --md-icon-size: 24px;
+        font-variation-settings: 'FILL' 1;
       }
 
       :host(:focus) {
@@ -45,7 +48,9 @@ class HelpPanel extends connect(store)(LitElement) {
         border-bottom: var(--help-navigation-bottom);
         background-color: white;
       }
-      #navigation mwc-icon-button {
+
+      #navigation md-icon {
+        padding: var(--help-navigation-icon-padding, var(--padding-default));
         border-right: var(--help-navigation-icon-border);
         cursor: pointer;
         color: var(--help-icon-color);
@@ -64,7 +69,7 @@ class HelpPanel extends connect(store)(LitElement) {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         bottom: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -99,28 +104,20 @@ class HelpPanel extends connect(store)(LitElement) {
 
     return html`
       <div id="navigation">
-        <mwc-icon-button
-          icon="home"
-          @click=${() => this.goHome()}
-          ?disabled=${this.history[0] === this.history[this.historyIndex]}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_left"
-          @click=${() => this.historyBack()}
-          ?disabled=${this.historyIndex < 1}
-        ></mwc-icon-button>
-        <mwc-icon-button
-          icon="keyboard_arrow_right"
-          @click=${() => this.historyForward()}
-          ?disabled=${this.historyIndex >= this.history.length - 1}
-        ></mwc-icon-button>
-        <mwc-icon-button icon="open_in_new" @click=${() => navigate(`help?topic=${this.topic}`)}></mwc-icon-button>
-        <mwc-icon-button icon="close" id="close" @click=${() => closeOverlay('help')}></mwc-icon-button>
+        <md-icon @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>
+          home
+        </md-icon>
+        <md-icon @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}> keyboard_arrow_left </md-icon>
+        <md-icon @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>
+          keyboard_arrow_right
+        </md-icon>
+        <md-icon @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>
+        <md-icon id="close" @click=${() => closeOverlay('help')}> close </md-icon>
       </div>
 
       ${!this.showGotoTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
       <ox-markdown id="content" .src=${src}></ox-markdown>
     `
   }