chore(showcase): add dedicated header to showcases

Introduces distinct headers for standalone showcases. This commit refactors the existing header,
creating two variants – one without navigation and another with navigation links.

The styling of the standalone showcases has been adjusted to integrate with the new header element.

src/index.js

@@ -10,7 +10,7 @@ import './layout/content/lists/lists-page';
 import './layout/content/search/search-page';
 import './layout/content/settings/settings-page';
 import './layout/content/showcase/showcase-page';
-import './layout/header/header-component';
+import './layout/header/demo-header-component.js';
 import './router/route-outlet-component';
 import router from './router/router';
 import PreferencesProvider from './layout/content/settings/preferences-provider';

src/layout/header/core-demo-header-component.js

@@ -0,0 +1,44 @@
+import githubLogoSvg from '../../../img/github-logo.svg?raw';
+import srgssrLogo from '../../../img/srgssr-logo.png';
+import { html, LitElement, unsafeCSS } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import '../../router/route-link-component';
+import { theme } from '../../theme/theme';
+import coreHeaderCss from './core-demo-header-component.scss?inline';
+
+/**
+ * A web component that represents the header element of the demo page. This element
+ * contains only the branding and a link to the GitHub page, it can be extended
+ * with a custom action.
+ *
+ * @element core-demo-header
+ *
+ * @slot actions - Allows for the insertion of custom content at the end of the header.
+ *
+ * @example
+ * <core-demo-header>
+ *   <button slot="actions">Custom Action</button>
+ * </core-demo-header>
+ */
+export class CoreDemoHeaderComponent extends LitElement {
+  static styles = [theme, unsafeCSS(coreHeaderCss)];
+
+  render() {
+    return html`
+      <header>
+        <h1>
+          <img class="pbw-logo" src="${srgssrLogo}"/>
+          <span>Pillarbox</span>
+        </h1>
+        <div class="header-end">
+          <a href="https://github.com/srgssr/pillarbox-web" class="github-link"
+             title="Source on Github">
+            ${unsafeSVG(githubLogoSvg)}
+          </a>
+          <slot name="actions"></slot>
+        </div>
+      </header>`;
+  }
+}
+
+customElements.define('core-demo-header', CoreDemoHeaderComponent);

src/layout/header/core-demo-header-component.scss

@@ -0,0 +1,36 @@
+header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  margin: var(--size-4) 0;
+}
+
+h1 {
+  display: flex;
+  gap: .15em;
+  align-items: center;
+  margin: 0;
+}
+
+.pbw-logo {
+  height: var(--size-7);
+}
+
+.github-link {
+  display: flex;
+  align-items: center;
+}
+
+.github-icon {
+  fill: var(--color-5);
+
+  &:hover {
+    fill: var(--color-2);
+  }
+}
+
+.header-end {
+  display: flex;
+  align-items: center;
+}

src/layout/header/header-component.js → src/layout/header/demo-header-component.js

@@ -1,16 +1,21 @@
-import githubLogoSvg from '../../../img/github-logo.svg?raw';
-import srgssrLogo from '../../../img/srgssr-logo.png';
 import { html, LitElement, unsafeCSS } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import '../../router/route-link-component';
 import { theme } from '../../theme/theme';
-import headerCSS from './header-component.scss?inline';
+import headerCSS from './demo-header-component.scss?inline';
 import router from '../../router/router';
+import './core-demo-header-component.js';
 
 /**
- * A web component that represents the header element of the demo page.
+ * A web component that represents the header of the demo page. This header contains
+ * the {@link CoreDemoHeaderComponent} as well as the navigation menu of the
+ * different demo app sections.
  *
- * @element pbw-header
+ * @element demo-header
+ *
+ * @prop {Boolean} debug - Indicates whether the debug mode is enabled.
+ *
+ * @example
+ * <demo-header></demo-header>
  */
 export class DemoHeaderElement extends LitElement {
   static properties = {
@@ -45,22 +50,13 @@ export class DemoHeaderElement extends LitElement {
 
   #renderHeaderElement() {
     return html`
-      <header>
-        <h1>
-          <img class="pbw-logo" src="${srgssrLogo}"/>
-          <span>Pillarbox</span>
-        </h1>
-        <div class="header-end">
-          <a href="https://github.com/srgssr/pillarbox-web" class="github-link"
-             title="Source on Github">
-            ${unsafeSVG(githubLogoSvg)}
-          </a>
-          <route-link href="settings${this.debug ? '?debug=true' : ''}"
-                      title="Settings">
-            <i class="material-icons-outlined">settings</i>
-          </route-link>
-        </div>
-      </header>`;
+      <core-demo-header>
+        <route-link href="settings${this.debug ? '?debug=true' : ''}"
+                    title="Settings" slot="actions">
+          <i class="material-icons-outlined">settings</i>
+        </route-link>
+      </core-demo-header>
+    `;
   }
 
   #renderNavElement() {

src/layout/header/header-component.scss → src/layout/header/demo-header-component.scss

@@ -8,45 +8,6 @@ li {
   display: inline-block;
 }
 
-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin: var(--size-4) 0;
-
-  h1 {
-    display: flex;
-    gap: .15em;
-    align-items: center;
-    margin: 0;
-  }
-}
-
-.pbw-logo {
-  height: var(--size-7);
-}
-
-.version-txt {
-  align-self: flex-end;
-  color: var(--color-6);
-  font-weight: var(--font-weight-4);
-  font-size: var(--size-3);
-  line-height: var(--size-5);
-}
-
-.github-link {
-  display: flex;
-  align-items: center;
-}
-
-.github-icon {
-  fill: var(--color-5);
-
-  &:hover {
-    fill: var(--color-2);
-  }
-}
-
 route-link::part(a) {
   padding: var(--size-1) var(--size-1);
   font-size: var(--size-4);
@@ -62,7 +23,7 @@ route-link::part(a active) {
   transition: background-color 0.8s, color 0.4s;
 }
 
-.header-end {
+core-demo-header {
   display: flex;
   align-items: center;
 

static/showcases/multi-player.html

@@ -10,6 +10,7 @@
 </head>
 
 <body>
+<core-demo-header></core-demo-header>
 <div class="showcase-content">
   <h2>Multiple players</h2>
 
@@ -48,6 +49,7 @@ <h2>Multiple players</h2>
 
 <script type="module">
   import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
 
   document.querySelector('#close-btn').addEventListener('click', () => {
     window.close();

static/showcases/start-time.html

@@ -10,6 +10,7 @@
 </head>
 
 <body>
+<core-demo-header></core-demo-header>
 <div class="showcase-content">
   <h2>Start the player at a given position</h2>
   <div class="video-container">
@@ -37,6 +38,7 @@ <h2>Start the player at a given position</h2>
 
 <script type="module">
   import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
 
   document.querySelector('#close-btn').addEventListener('click', () => {
     window.close();

static/showcases/static-showcase.scss

@@ -5,10 +5,7 @@ body {
 }
 
 .showcase-content {
-  margin-top: var(--size-8);
   padding: 0;
-  border: 1px solid var(--color-7);
-  border-radius: var(--radius-3);
 }
 
 .video-container {
@@ -25,6 +22,7 @@ h2 {
 
 .showcase-btn {
   width: 100%;
+  margin: var(--size-3) 0;
   padding: var(--size-4) var(--size-3);
   color: var(--color-0);
   font-weight: var(--font-weight-6);
@@ -33,6 +31,7 @@ h2 {
   text-decoration: none;
   background-color: var(--color-9);
   border: 0;
+  border-radius: var(--radius-2);
   cursor: pointer;
   transition: background-color 0.4s, border-color 0.4s;
 }
@@ -41,7 +40,3 @@ h2 {
   background-color: var(--color-8);
   border-color: var(--color-9);
 }
-
-.showcase-btn:last-child {
-  border-radius: 0 0 var(--radius-3) var(--radius-3);
-}