refactor(header): rewrite header component to work with slots

statistikZH · May 2, 2024 · 359bb7a · 359bb7a
1 parent a3a9926
commit 359bb7a
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 121 deletions.
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -1,12 +1,12 @@
-import { html, LitElement, nothing } from "lit"
-import { unsafeHTML } from "lit/directives/unsafe-html.js"
+import { html, LitElement } from "lit"
 import { styleMap } from "lit/directives/style-map.js"
 
+/** @ts-ignore */
 import headerStyles from "./header.css"
+/** @ts-ignore */
 import gridStyles from "../../styles/grid.css"
+/** @ts-ignore */
 import headingsStyles from "../../styles/headings.css"
-import "../chip/leu-chip-link.js"
-import "../breadcrumb/leu-breadcrumb.js"
 
 // links:
 // top topics chip: https://www.zh.ch/de/gesundheit.html
@@ -34,55 +34,22 @@ export class LeuHeader extends LitElement {
   static styles = [gridStyles, headingsStyles, headerStyles]
 
   static properties = {
-    pageTitle: { type: String },
-    subtitle: { type: String },
-    breadcrumb: { type: Array },
-    topTopics: { type: Array },
-    color: { type: String },
+    backgroundColor: { type: String },
   }
 
   constructor() {
     super()
-    /** @type {Array} */
-    this.breadcrumb = null
-    /** @type {string} */
-    this.subtitle = null
-    /** @type {Array} */
-    this.topTopics = null
-    /** @type {string} */
-    this.color = "white"
-  }
-
-  renderTopTopics() {
-    return html`
-      <div class="toptopics">
-        <h2>Top Themen</h2>
-        <ul>
-          ${this.topTopics.map(
-            (topic) =>
-              html`
-                <li>
-                  <leu-chip-link inverted href=${topic.href}>
-                    ${topic.label}
-                  </leu-chip-link>
-                </li>
-              `
-          )}
-        </ul>
-      </div>
-    `
-  }
-
-  renderLead() {
-    return html` <p class="lead">${this.subtitle}</p> `
+    /** @type {"blue" | "darkblue" | "turquoise" | "green" | "bordeaux" | "magenta" | "violet" | "gray" | "white"} */
+    this.backgroundColor = "white"
   }
 
   renderLogo() {
     return html`
       <a href="https://www.zh.ch/de.html">
         <img
           class="logo"
-          src="src/components/header/KTZH-Logo-Flagge-${this.color === "white"
+          src="src/components/header/KTZH-Logo-Flagge-${this.backgroundColor ===
+          "white"
             ? "Positiv"
             : "Negativ"}.svg"
           alt="Logo des Kantons Zürich"
@@ -94,15 +61,15 @@ export class LeuHeader extends LitElement {
   render() {
     const headerStyle = styleMap({
       background:
-        this.color === "white"
+        this.backgroundColor === "white"
           ? "#fff"
-          : `var(--leu-color-accent-${this.color})`,
-      color: this.color === "white" ? "#000" : "#fff",
+          : `var(--leu-color-accent-${this.backgroundColor})`,
+      color: this.backgroundColor === "white" ? "#000" : "#fff",
     })
 
     // load shared css with link element: https://lamplightdev.com/blog/2021/03/23/how-to-share-styles-in-the-shadow-dom/
     return html`
-      <header style="${headerStyle};">
+      <header class="header" style="${headerStyle};">
         <div class="lyt-wrapper">
           <!-- icon & title -->
           <div class="grid-x grid-margin-x">
@@ -114,14 +81,12 @@ export class LeuHeader extends LitElement {
             <div
               class="cell tiny-10 xsmall-10 small-10 medium-10 large-10 xlarge-10"
             >
-              <div class="breadcrumb">
-                <leu-breadcrumb
-                  .items=${this.breadcrumb}
-                  ?inverted=${this.color !== "white"}
-                >
-                </leu-breadcrumb>
+              <div class="breadcrumbs">
+                <slot name="breadcrumbs"></slot>
               </div>
-              <h1 class="atm-heading title">${unsafeHTML(this.pageTitle)}</h1>
+              <h1 class="title">
+                <slot name="title"></slot>
+              </h1>
             </div>
           </div>
 
@@ -130,8 +95,8 @@ export class LeuHeader extends LitElement {
             <div
               class="cell xsmall-offset-2 small-offset-2 medium-offset-2 large-offset-2 xlarge-offset-2 xsmall-auto small-auto medium-9 large-8 xlarge-8"
             >
-              ${this.topTopics ? this.renderTopTopics() : nothing}
-              ${this.subtitle ? this.renderLead() : nothing}
+              <slot class="chips" name="chips"></slot>
+              <slot name="lead" class="slot"> </slot>
             </div>
           </div>
         </div>

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -1,3 +1,5 @@
+@import url("../../styles/custom-media.css");
+
 :host,
 :host * {
   box-sizing: border-box;
@@ -10,117 +12,127 @@
   font-family: var(--header-font-black);
 }
 
-header {
+.header {
   padding-bottom: 1.5rem;
   padding-top: 1.5rem;
 }
 
-.breadcrumb {
+.breadcrumbs {
   font-size: 16px;
   margin-bottom: 0.75rem;
   min-height: 1.5em;
 }
 
-@media (width <= 340px) {
-  .breadcrumb {
-    margin-left: -24px;
+.title {
+  word-break: break-word;
+  font: var(--leu-t-curve-180-black-font);
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+@media (--viewport-large) {
+  .title {
+    margin-bottom: 2rem;
   }
 }
 
-.title {
-  word-break: break-word;
+@media (--viewport-xlarge) {
+  .title {
+    margin-bottom: 2.5rem;
+  }
 }
 
-/* top topics */
-.toptopics {
+/* Chips */
+.chips {
   max-width: 48rem;
 }
 
-.toptopics h2 {
+::slotted(h2[slot="chips"]) {
   font-size: 0.75rem;
   line-height: 1.5;
   margin-bottom: 0.5rem;
   padding-top: 0;
 }
 
-.toptopics ul {
-  font-size: 0;
-  list-style-type: none;
+::slotted(leu-chip-group) {
   margin-bottom: 0.75rem;
-  margin-left: -4px;
-  margin-right: -4px;
-  max-width: 100%;
-  padding: 0;
+}
+
+@media (--viewport-regular) {
+  ::slotted(leu-chip-group) {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=20em) and (width <=24.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(16.6667% + 0.125rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=25em) and (width <=37.49em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(16.6667% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=37.5em) and (width <=52.49em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(10% + 0.1rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=52.5em) and (width <=63.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(11.1111% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=64em) and (width <=79.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(12.5% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=80em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(12.5% + 0.25rem);
   }
 }
 
 @media (width >= 37.5em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
 @media (width >=20em) and (width <=52.49em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-bottom: 0;
   }
 }
 
 @media (width >=52.5em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-bottom: 0.25rem;
   }
 }
 
 @media (width >= 20em) and (width <= 24.99em) and (width >= 20em) and (width <= 24.99em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-left: calc(16.6667% + 0.125rem);
   }
 }
 
-.toptopics li {
+.chips li {
   display: inline-block;
   margin-right: 0.25rem;
   max-width: 100%;
 }
 
-.toptopics leu-chip-link {
+.chips leu-chip-link {
   font-size: 1.125rem;
   margin-bottom: 0;
   margin-top: 0.5rem;
@@ -302,7 +314,7 @@ header {
 }
 
 /* lead */
-.lead {
+::slotted([slot="lead"]) {
   font-size: 18px;
   hyphens: auto;
   line-height: 1.3;
@@ -312,79 +324,79 @@ header {
 }
 
 @media (width >=400px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: calc(1vw + 14px);
   }
 }
 
 @media (width >=600px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: 20px;
   }
 }
 
 @media (width >=1024px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: calc(1.5625vw + 4px);
   }
 }
 
 @media (width >=1280px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: 24px;
   }
 }
 
 @media (width >=52.5em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     margin-bottom: 1.25rem;
   }
 }
 
 @media (width >=80em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     margin-bottom: 1.5rem;
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=20em) and (width <=24.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(16.6667% + 0.125rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=25em) and (width <=37.49em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(16.6667% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=37.5em) and (width <=52.49em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(10% + 0.1rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=52.5em) and (width <=63.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(11.1111% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=64em) and (width <=79.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(12.5% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=80em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(12.5% + 0.25rem);
   }
 }
 
 @media (width >=25em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: 0;
   }
 }