simplify header + improve styling

mucsi96 · May 2, 2024 · ddff9f2 · ddff9f2
1 parent fc01c79
commit ddff9f2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/src/Docs.mdx b/src/Docs.mdx
@@ -29,6 +29,7 @@ body {
   background-color: var(--bt-background-color);
   color: var(--bt-text-color);
   font-family: var(--bt-font-family);
+  margin: 0;
 }
 ```
 

diff --git a/src/Header/Header.stories.ts b/src/Header/Header.stories.ts
@@ -5,8 +5,11 @@ import { BTHeaderProps } from './Header';
 const meta: Meta<BTHeaderProps> = {
   title: 'BTHeader',
   render: () =>
-    html`<header is="bt-header" title="Header title">
-        <h6 is="bt-heading">child text</h6>
+    html`<header is="bt-header">
+        <nav>
+          <a href="/"><h1 is="bt-heading">App</h1></a>
+          <button is="bt-button">Sign in</button>
+        </nav>
       </header>
       <main is="bt-main">
         <h1 is="bt-heading">main text</h1>

diff --git a/src/Header/Header.ts b/src/Header/Header.ts
@@ -1,5 +1,5 @@
-import { css, html } from 'lit';
-import { customElement, htmlToString } from '../utils';
+import { css } from 'lit';
+import { customElement } from '../utils';
 
 export type BTHeaderProps = {
   title?: string;
@@ -29,17 +29,4 @@ export type BTHeaderProps = {
     }
   `,
 })
-export class BTHeader extends HTMLElement {
-  template = document.createElement('template');
-
-  constructor() {
-    super();
-    this.template.innerHTML = htmlToString(html`
-      <h1 is="bt-heading">${this.title}</h1>
-    `);
-  }
-
-  connectedCallback() {
-    this.firstElementChild?.prepend(this.template.content.cloneNode(true));
-  }
-}
+export class BTHeader extends HTMLElement {}
diff --git a/src/Heading/Heading.ts b/src/Heading/Heading.ts
@@ -7,10 +7,20 @@ export type BTHeadingProps = {};
   name: 'bt-heading',
   extends: 'h1',
   styles: css`
-    [is="bt-heading"] {
+    [is='bt-heading'] {
       display: block;
-      color: var(--bt-strong-text-color);
+      color: var(--heading-color, var(--bt-strong-text-color));
+      transition: color 0.3s;
       margin: unset;
+
+      a:has(&) {
+        color: var(--bt-strong-text-color);
+        text-decoration: none;
+      }
+
+      a:has(&):hover {
+        --heading-color: var(--bt-text-color);
+      }
     }
   `,
 })