@uptime.link/statuspage 1.0.74 → 1.2.0

package/ts_web/elements/upl-statuspage-header.demo.ts

@@ -0,0 +1,241 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .demo-section {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    .demo-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #333;
+    }
+    .demo-controls {
+      display: flex;
+      gap: 10px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    .demo-button {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .demo-button:hover {
+      background: #f0f0f0;
+    }
+  </style>
+  
+  <div class="demo-container">
+    <!-- Basic Header -->
+    <div class="demo-section">
+      <div class="demo-title">Basic Header with Dynamic Title</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+          
+          // Demo different titles
+          const titles = [
+            'MyService Status Page',
+            'Production Environment Status',
+            'API Health Dashboard',
+            'Global Infrastructure Status',
+            '🚀 Rocket Systems Monitor',
+            'Multi-Region Service Status'
+          ];
+          
+          let titleIndex = 0;
+          header.pageTitle = titles[titleIndex];
+          
+          // Add event listeners
+          header.addEventListener('reportNewIncident', (event: CustomEvent) => {
+            console.log('Report incident clicked');
+            alert('Report Incident form would open here');
+          });
+          
+          header.addEventListener('statusSubscribe', (event: CustomEvent) => {
+            console.log('Subscribe clicked');
+            alert('Subscribe modal would open here');
+          });
+          
+          // Cycle through titles
+          setInterval(() => {
+            titleIndex = (titleIndex + 1) % titles.length;
+            header.pageTitle = titles[titleIndex];
+          }, 2000);
+        }}
+      >
+        <upl-statuspage-header></upl-statuspage-header>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Header with Hidden Buttons -->
+    <div class="demo-section">
+      <div class="demo-title">Header with Configurable Buttons</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+          header.pageTitle = 'Configurable Button States';
+          
+          // Add properties to control button visibility
+          header.showReportButton = true;
+          header.showSubscribeButton = true;
+          
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          controls.innerHTML = `
+            <button class="demo-button" id="toggleReport">Toggle Report Button</button>
+            <button class="demo-button" id="toggleSubscribe">Toggle Subscribe Button</button>
+            <button class="demo-button" id="toggleBoth">Hide Both</button>
+            <button class="demo-button" id="showBoth">Show Both</button>
+          `;
+          wrapperElement.appendChild(controls);
+          
+          controls.querySelector('#toggleReport')?.addEventListener('click', () => {
+            header.showReportButton = !header.showReportButton;
+          });
+          
+          controls.querySelector('#toggleSubscribe')?.addEventListener('click', () => {
+            header.showSubscribeButton = !header.showSubscribeButton;
+          });
+          
+          controls.querySelector('#toggleBoth')?.addEventListener('click', () => {
+            header.showReportButton = false;
+            header.showSubscribeButton = false;
+          });
+          
+          controls.querySelector('#showBoth')?.addEventListener('click', () => {
+            header.showReportButton = true;
+            header.showSubscribeButton = true;
+          });
+        }}
+      >
+        <upl-statuspage-header></upl-statuspage-header>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Header with Custom Styling -->
+    <div class="demo-section">
+      <div class="demo-title">Header with Custom Branding</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+          header.pageTitle = 'Enterprise Cloud Platform';
+          
+          // Custom branding properties
+          header.brandColor = '#1976D2';
+          header.logoUrl = 'https://via.placeholder.com/120x40/1976D2/ffffff?text=LOGO';
+          header.customStyles = true;
+          
+          // Simulate different brand states
+          const brands = [
+            { title: 'Enterprise Cloud Platform', color: '#1976D2', logo: 'ENTERPRISE' },
+            { title: 'StartUp SaaS Monitor', color: '#00BCD4', logo: 'STARTUP' },
+            { title: 'Government Services Status', color: '#4CAF50', logo: 'GOV' },
+            { title: 'Financial Systems Health', color: '#673AB7', logo: 'FINTECH' }
+          ];
+          
+          let brandIndex = 0;
+          setInterval(() => {
+            brandIndex = (brandIndex + 1) % brands.length;
+            const brand = brands[brandIndex];
+            header.pageTitle = brand.title;
+            header.brandColor = brand.color;
+            header.logoUrl = `https://via.placeholder.com/120x40/${brand.color.slice(1)}/ffffff?text=${brand.logo}`;
+          }, 3000);
+        }}
+      >
+        <upl-statuspage-header></upl-statuspage-header>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Header with Loading State -->
+    <div class="demo-section">
+      <div class="demo-title">Header with Loading States</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+          header.pageTitle = 'Loading State Demo';
+          header.loading = true;
+          
+          // Simulate loading completion
+          setTimeout(() => {
+            header.loading = false;
+            header.pageTitle = 'Status Page Loaded';
+          }, 2000);
+          
+          // Add loading toggle
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          controls.innerHTML = `
+            <button class="demo-button" id="toggleLoading">Toggle Loading State</button>
+          `;
+          wrapperElement.appendChild(controls);
+          
+          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
+            header.loading = !header.loading;
+            if (header.loading) {
+              header.pageTitle = 'Loading...';
+              setTimeout(() => {
+                header.loading = false;
+                header.pageTitle = 'Status Page Ready';
+              }, 2000);
+            }
+          });
+        }}
+      >
+        <upl-statuspage-header></upl-statuspage-header>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Header with Event Counter -->
+    <div class="demo-section">
+      <div class="demo-title">Header with Event Tracking</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+          header.pageTitle = 'Event Tracking Demo';
+          
+          let reportCount = 0;
+          let subscribeCount = 0;
+          
+          // Create counter display
+          const counterDisplay = document.createElement('div');
+          counterDisplay.style.marginTop = '16px';
+          counterDisplay.style.fontSize = '14px';
+          counterDisplay.innerHTML = `
+            <div>Report Clicks: <strong id="reportCount">0</strong></div>
+            <div>Subscribe Clicks: <strong id="subscribeCount">0</strong></div>
+          `;
+          wrapperElement.appendChild(counterDisplay);
+          
+          header.addEventListener('reportNewIncident', () => {
+            reportCount++;
+            counterDisplay.querySelector('#reportCount').textContent = reportCount.toString();
+            console.log(`Report incident clicked ${reportCount} times`);
+          });
+          
+          header.addEventListener('statusSubscribe', () => {
+            subscribeCount++;
+            counterDisplay.querySelector('#subscribeCount').textContent = subscribeCount.toString();
+            console.log(`Subscribe clicked ${subscribeCount} times`);
+          });
+        }}
+      >
+        <upl-statuspage-header></upl-statuspage-header>
+      </dees-demowrapper>
+    </div>
+  </div>
+`;

package/ts_web/elements/upl-statuspage-header.ts

@@ -1,5 +1,7 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import * as sharedStyles from '../styles/shared.styles.js';
+import { demoFunc } from './upl-statuspage-header.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,13 +12,23 @@ declare global {
 @customElement('upl-statuspage-header')
 export class UplStatuspageHeader extends DeesElement {
   // STATIC
-  public static demo = () => html`
-    <upl-statuspage-header></upl-statuspage-header>
-  `;
+  public static demo = demoFunc;
 
   // INSTANCE
-  @property()
-  public pageTitle: string = "Statuspage Title";
+  @property({ type: String })
+  accessor pageTitle: string = "Statuspage Title";
+
+  @property({ type: Boolean })
+  accessor showReportButton: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showSubscribeButton: boolean = true;
+
+  @property({ type: String })
+  accessor logoUrl: string = '';
+
+  @property({ type: Boolean })
+  accessor loading: boolean = false;
   
 
   constructor() {
@@ -27,72 +39,297 @@ export class UplStatuspageHeader extends DeesElement {
     domtools.elementBasic.staticStyles,
     css`
       :host {
-          display: block;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          font-family: Inter;
-          color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        display: block;
+        background: ${cssManager.bdTheme(
+          'rgba(255, 255, 255, 0.85)',
+          'rgba(9, 9, 11, 0.85)'
+        )};
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        color: ${sharedStyles.colors.text.primary};
+        border-bottom: 1px solid ${cssManager.bdTheme(
+          'rgba(0, 0, 0, 0.06)',
+          'rgba(255, 255, 255, 0.06)'
+        )};
+        position: sticky;
+        top: 0;
+        z-index: 40;
+        backdrop-filter: blur(16px) saturate(180%);
+        -webkit-backdrop-filter: blur(16px) saturate(180%);
+      }
+
+      .header-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .header-nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 64px;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.md)};
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+      }
+
+      .actionButton {
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        font-size: 13px;
+        font-weight: 500;
+        padding: 0 14px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        cursor: pointer;
+        user-select: none;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        height: 36px;
+        background: transparent;
+        border: 1px solid ${sharedStyles.colors.border.default};
+        color: ${sharedStyles.colors.text.primary};
+        letter-spacing: -0.01em;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .actionButton::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%)',
+          'linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%)'
+        )};
+        opacity: 0;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .actionButton:hover {
+        background: ${sharedStyles.colors.background.secondary};
+        border-color: ${sharedStyles.colors.border.muted};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+        transform: translateY(-1px);
+      }
+
+      .actionButton:hover::before {
+        opacity: 1;
+      }
+
+      .actionButton:active {
+        transform: translateY(0) scale(0.98);
+        transition-duration: ${unsafeCSS(sharedStyles.durations.fast)};
+        box-shadow: none;
+      }
+
+      .actionButton:focus-visible {
+        outline: 2px solid ${sharedStyles.colors.accent.focus};
+        outline-offset: 2px;
+      }
+
+      /* Button icon styles */
+      .actionButton svg {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .actionButton:hover svg {
+        transform: scale(1.1);
+      }
+
+      .site-title {
+        font-size: 17px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: ${sharedStyles.colors.text.primary};
+        transition: color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .site-title:hover {
+        color: ${sharedStyles.colors.text.secondary};
+      }
+
+      .logo {
+        height: 28px;
+        width: auto;
+        filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
+        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .logo:hover {
+        opacity: 0.8;
+        transform: scale(1.02);
+      }
+
+      .page-info {
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)} 0 ${unsafeCSS(sharedStyles.spacing.xl)} 0;
+      }
+
+      .page-title {
+        font-size: 48px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        line-height: 1.1;
+        color: ${sharedStyles.colors.text.primary};
+        margin: 0 0 16px 0;
+      }
+
+      .page-subtitle {
+        font-size: 18px;
+        color: ${sharedStyles.colors.text.secondary};
+        margin: 0;
+        line-height: 1.5;
+      }
+
+      /* Primary button variant */
+      .actionButton.primary {
+        background: ${sharedStyles.colors.accent.primary};
+        color: ${sharedStyles.colors.background.primary};
+        border-color: transparent;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .actionButton.primary::before {
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
+      }
+
+      .actionButton.primary:hover {
+        background: ${sharedStyles.colors.accent.hover};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
+      }
+
+      .loading-skeleton {
+        height: 64px;
+        background: ${sharedStyles.colors.background.secondary};
+        border-bottom: 1px solid ${sharedStyles.colors.border.default};
+        position: relative;
+        overflow: hidden;
+      }
+
+      .loading-skeleton::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%)',
+          'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%)'
+        )};
+        animation: shimmer 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
+      }
+
+      @keyframes shimmer {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(200%); }
+      }
+
+      @media (max-width: 768px) {
+        .header-container {
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
-        .mainbox {
-          margin: auto;
-          max-width: 900px;
+        .header-nav {
+          height: 56px;
         }
 
-        .mainbox .actions {
-          display: flex;
-          justify-content: flex-end;
-          padding: 20px 0px 40px 0px;
+        .header-left {
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
         }
 
-        .mainbox .actions .actionButton {
-          background: ${cssManager.bdTheme('#00000000', '#ffffff00')};
-          
+        .site-title {
+          font-size: 15px;
+        }
+
+        .logo {
+          height: 24px;
+        }
+      }
+
+      @media (max-width: 640px) {
+        .actionButton {
           font-size: 12px;
-          border: 1px solid ${cssManager.bdTheme('#333', '#CCC')};
-          padding: 6px 10px 7px 10px;
-          margin-left: 10px;
-          border-radius: 3px;
-          cursor: pointer;
-          user-select: none;
+          padding: 0 10px;
+          height: 32px;
+          gap: 4px;
         }
 
-        .mainbox .actions .actionButton:hover {
-          background: ${cssManager.bdTheme('#333333', '#efefef')};
-          border: 1px solid ${cssManager.bdTheme('#333333', '#efefef')};
-          color: ${cssManager.bdTheme('#fff', '#333333')};
+        .actionButton svg {
+          width: 12px;
+          height: 12px;
         }
 
-        h1 {
-          margin: 0px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 35px;
+        .actionButton .button-text {
+          display: none;
         }
 
-        h2 {
-          margin: 0px;
-          margin-top: 10px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 18px;
+        .page-title {
+          font-size: 32px;
         }
+
+        .page-subtitle {
+          font-size: 16px;
+        }
+
+        .header-actions {
+          gap: 6px;
+        }
+      }
     `
   ]
 
   public render(): TemplateResult {
+    if (this.loading) {
+      return html`
+        <div class="loading-skeleton"></div>
+      `;
+    }
+
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        
-      </style>
-      <div class="mainbox">
-        <div class="actions">
-          <div class="actionButton" @click=${this.dispatchReportNewIncident}>report new incident</div>
-          <div class="actionButton" @click=${this.dispatchStatusSubscribe}>subscribe</div>
+      <header>
+        <div class="header-container">
+          <nav class="header-nav">
+            <div class="header-left">
+              ${this.logoUrl ? html`
+                <img src="${this.logoUrl}" alt="${this.pageTitle}" class="logo">
+              ` : ''}
+              <h1 class="site-title">${this.pageTitle}</h1>
+            </div>
+            <div class="header-actions">
+              ${this.showReportButton ? html`
+                <button class="actionButton" @click=${this.dispatchReportNewIncident}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z"></path>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                  </svg>
+                  <span class="button-text">Report Issue</span>
+                </button>
+              ` : ''}
+              ${this.showSubscribeButton ? html`
+                <button class="actionButton primary" @click=${this.dispatchStatusSubscribe}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
+                    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
+                  </svg>
+                  <span class="button-text">Subscribe</span>
+                </button>
+              ` : ''}
+            </div>
+          </nav>
         </div>
-        <h1>${this.pageTitle}</h1>
-        <h2>STATUS BOARD</h2>
-      </div>
+      </header>
     `;
   }