refactor: drop all polymer

.github/workflows/storybook.yml

@@ -1,25 +1,10 @@
 ---
-name: Github CI
+name: Storybook
 on:
   push:
     branches:
       - master
 jobs:
   storybook:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v1
-
-    - name: Use Node.js 12.x
-      uses: actions/setup-node@v1
-      with:
-        node-version: 12.x
-
-    - name: Install
-      run: npm ci
-
-    - name: Deploy storybook
-      run: npm run storybook:deploy -- --ci
-      env:
-         GH_TOKEN: Neovici:${{ secrets.GITHUB_TOKEN }}
+    uses: Neovici/cfg/.github/workflows/story.yml@master
+    secrets: inherit

cosmoz-image-viewer.js

@@ -1,17 +1,24 @@
 import '@neovici/cosmoz-slider';
-import '@polymer/iron-icons';
-import '@polymer/paper-icon-button';
 import './lib/haunted-pan-zoom';
 
 import { _ } from '@neovici/cosmoz-i18next';
 import { portal } from '@neovici/cosmoz-utils/directives/portal';
 import { component, html } from 'haunted';
+import { nothing } from 'lit-html';
 import { when } from 'lit-html/directives/when.js';
 import { style } from './cosmoz-image-viewer.style';
 import { useCosmozImageViewer } from './lib/hooks/use-cosmoz-image-viewer';
-import { nothing } from 'lit-html';
+import { leftArrow } from './lib/icons/left-arrow';
+import { rightArrow } from './lib/icons/right-arrow';
+import { launch } from './lib/icons/launch';
+import { fileDownload } from './lib/icons/file-download';
+import { printFile } from './lib/icons/print-file';
+import { magnifierPlus } from './lib/icons/magnifier-plus';
+import { magnifierMinus } from './lib/icons/magnifier-minus';
+import { fullscreen } from './lib/icons/fullscreen';
+import { close as closeIcon } from './lib/icons/close';
 
-const getZoomIcon = (zoomed) => (zoomed ? 'icons:zoom-out' : 'icons:zoom-in');
+const getZoomIcon = (zoomed) => (zoomed ? magnifierMinus : magnifierPlus);
 
 const shouldShow = (show, imagesLen, imgsMinLen = 1) => {
 	return show ? imagesLen >= imgsMinLen : false;
@@ -63,70 +70,64 @@ const renderCosmozImageViewer = ({
 					${when(
 						shouldShow(host.showNav, total, 2),
 						() => html`
-							<paper-icon-button
-								class="nav"
-								icon="icons:arrow-back"
-								@click=${previousImage}
-							></paper-icon-button>
-							<paper-icon-button
-								class="nav"
-								icon="icons:arrow-forward"
-								@click="${nextImage}"
-							></paper-icon-button>
+							<button class="nav" @click=${previousImage}>${leftArrow}</button>
+							<button class="nav" @click=${nextImage}>${rightArrow}</button>
 						`,
 					)}
 					<div class="flex"></div>
 					${when(
 						shouldShow(host.showZoom, total),
 						() =>
-							html`<paper-icon-button
+							html`<button
 								class="nav"
 								@click="${toggleZoom}"
-								icon="${getZoomIcon(isZoomed)}"
 								title="${_('Zoom image')}"
-							></paper-icon-button>`,
+							>
+								${getZoomIcon(isZoomed)}
+							</button>`,
 					)}
 					${when(
 						shouldShow(host.showDetach, total),
 						() =>
-							html` <paper-icon-button
+							html`<button
 								class="nav"
-								@click="${detach}"
-								icon="launch"
+								@click=${detach}
 								title="${_('Detach image to separate window')}"
-							></paper-icon-button>`,
+							>
+								${launch}
+							</button>`,
 					)}
-					<paper-icon-button
+					<button
 						class="nav"
-						@click="${onDownloadPdf}"
-						icon="icons:file-download"
+						@click=${onDownloadPdf}
 						title="${_('Download images')}"
-					></paper-icon-button>
-					<paper-icon-button
-						class="nav"
-						@click="${onPrintPdf}"
-						icon="icons:print"
-						title="${_('Print images')}"
-					></paper-icon-button>
+					>
+						${fileDownload}
+					</button>
+					<button class="nav" @click=${onPrintPdf} title="${_('Print images')}">
+						${printFile}
+					</button>
 					${when(
 						shouldShow(host.showFullscreen, total),
 						() =>
-							html` <paper-icon-button
+							html`<button
 								class="nav"
 								@click="${openFullscreen}"
-								icon="icons:fullscreen"
 								title="${_('Fullscreen image')}"
-							></paper-icon-button>`,
+							>
+								${fullscreen}
+							</button>`,
 					)}
 					${when(
 						shouldShow(host.showClose, total),
 						() =>
-							html` <paper-icon-button
+							html` <button
 								class="nav"
 								@click="${() => host.dispatchEvent(new CustomEvent('close'))}"
-								icon="icons:close"
 								title="${_('Close fullscreen')}"
-							></paper-icon-button>`,
+							>
+								${closeIcon}
+							</button>`,
 					)}
 				</div>
 

cosmoz-image-viewer.style.js

@@ -53,6 +53,18 @@ export const style = `:host {
     margin: 3px;
 }
 
+button.nav {
+    border: none;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition: background-color 100ms;
+}
+
+button.nav:active {
+    background-color: rgba(0, 0, 0, 0.60);
+}
+
 .nav:not(:hover) {
     visibility: hidden;
 }
@@ -66,7 +78,6 @@ export const style = `:host {
     pointer-events: none;
     /* Needed to override Chrome 73+ handling of iron-image overflow hidden */
     overflow: visible;
-    @apply --cosmoz-image-viewer-image;
 }
 
 .image-zoom {
@@ -75,7 +86,6 @@ export const style = `:host {
     justify-content: center;
     background-color: black;
     height: 100vh;
-    @apply --cosmoz-image-viewer-image-zoom;
 }
 
 .error {
@@ -86,7 +96,8 @@ export const style = `:host {
     color: white;
     z-index: +1;
     text-align: center;
-    @apply --cosmoz-image-viewer-error;
+    background: rgba(0,0,0,0.5);
+    padding: 20px;
 }
 
 .error .desc {

lib/icons/close.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const close = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/file-download.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const fileDownload = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+			fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/fullscreen.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const fullscreen = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+			fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/launch.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const launch = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			fill="currentColor"
+			d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+		></path>
+	</g>
+</svg>`;

lib/icons/left-arrow.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+
+export const leftArrow = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<path
+		d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+		fill="currentColor"
+	></path>
+</svg>`;

lib/icons/magnifier-minus.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const magnifierMinus = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"
+			fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/magnifier-plus.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const magnifierPlus = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm2.5-4h-2v2H9v-2H7V9h2V7h1v2h2v1z"
+			fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/print-file.js

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+
+export const printFile = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<g>
+		<path
+			d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
+			fill="currentColor"
+		></path>
+	</g>
+</svg>`;

lib/icons/right-arrow.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+
+export const rightArrow = html`<svg
+	viewBox="0 0 24 24"
+	preserveAspectRatio="xMidYMid meet"
+	focusable="false"
+	width="24"
+	height="24"
+>
+	<path
+		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+		fill="currentColor"
+	></path>
+</svg>`;