@blockquote-web-components/blockquote-base-embedded-webview 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-base-embedded-webview",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
   "keywords": [
     "lit",
@@ -169,11 +169,12 @@
   },
   "devDependencies": {
     "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.1",
+    "@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
     "@polymer/iron-test-helpers": "^3.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "5251771346031c1b7333ffa0b16a3086f39684c0"
+  "gitHead": "0c5ec040de2e96a0464da78debdc5329d99ba700"
 }

package/src/BlockquoteBaseEmbeddedWebview.js

@@ -1,14 +1,38 @@
-import { html, LitElement, svg } from 'lit';
+import { html, LitElement } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import '../define/blockquote-base-embedded-webview-size.js';
 import '../define/blockquote-base-embedded-webview-resize.js';
 import '../define/blockquote-base-embedded-webview-element.js';
 import { styles } from './styles/blockquote-base-embedded-webview-styles.css.js';
 
-const chevronDownIcon = svg`<svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-<polyline points="6 9 12 15 18 9" />
+const chevronDownIcon = html`<svg
+  aria-hidden="true"
+  viewBox="0 0 24 24"
+  stroke-width="2"
+  stroke="currentcolor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="6 9 12 15 18 9" />
 </svg>`;
 
+// https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/Images/src/open-externally.svg
+const openExternallyIcon = html`
+  <svg
+    viewBox="0 0 20 20"
+    fill-rule="evenodd"
+    fill="currentcolor"
+    preserveAspectRatio="xMidYMid meet"
+    focusable="false"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.5 17C4.08333 17 3.72933 16.854 3.438 16.562C3.146 16.2707 3 15.9167 3 15.5V4.5C3 4.08333 3.146 3.72933 3.438 3.438C3.72933 3.146 4.08333 3 4.5 3H10V4.5H4.5V15.5H15.5V10H17V15.5C17 15.9167 16.854 16.2707 16.562 16.562C16.2707 16.854 15.9167 17 15.5 17H4.5ZM8.062 13L7 11.938L14.438 4.5H12V3H17V8H15.5V5.562L8.062 13Z"
+    />
+  </svg>
+`;
+
 /**
 ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
 
@@ -200,7 +224,8 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     return html`
       <header>
         <div>
-          ${this._headingTpl} ${this._selectTpl} ${this._descriptionTpl} ${this._readDataPosTpl}
+          ${this._headingTpl} ${this._navigationDemosTpl} ${this._descriptionTpl}
+          ${this._readDataPosTpl}
         </div>
         ${this._screenSizeTpl}
       </header>
@@ -211,6 +236,10 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     return html`<div aria-level="${this._headingLevel}" role="heading">${this.heading}</div>`;
   }
 
+  get _navigationDemosTpl() {
+    return html` <div>${this._selectTpl}${this._externalLinkTpl}</div> `;
+  }
+
   get _selectTpl() {
     return html`
       ${this._sources.some(options => options.option)
@@ -232,6 +261,13 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
     `;
   }
 
+  get _externalLinkTpl() {
+    return html`<a href="${this._src}" target="_blank" class="open-externally">
+      <span class="sr-only">View demo in a new tab</span
+      ><span aria-hidden="true">${openExternallyIcon}</span></a
+    >`;
+  }
+
   get _descriptionTpl() {
     return html` <p class="description">${this._sources[this.selected].description}</p>`;
   }

package/src/styles/blockquote-base-embedded-webview-styles.css.js

@@ -20,6 +20,18 @@ export const styles = css`:host {
   display: none !important;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .main {
   contain: content;
   flex: 1;
@@ -36,11 +48,6 @@ export const styles = css`:host {
   box-sizing: inherit;
 }
 
-[role=heading] {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
-}
-
 header > div {
   position: relative;
   max-width: 80rem;
@@ -48,6 +55,26 @@ header > div {
   padding: 0.5rem 1.5rem;
 }
 
+[role=heading] {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+[role=heading] + div {
+  display: flex;
+  align-items: center;
+}
+
+.open-externally {
+  width: 1rem;
+  display: inline-block;
+  margin-left: 1rem;
+  color: inherit;
+}
+.open-externally svg {
+  vertical-align: bottom;
+}
+
 .select {
   display: inline-grid;
   grid-template-areas: select;