feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { customElement, DeesElement, html, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { fonts, colors, spacing } from '../../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../../styles/shared.styles.js';
|
||||
|
||||
@customElement('uplinternal-miniheading')
|
||||
export class UplinternalMiniheading extends DeesElement {
|
||||
@@ -9,18 +9,18 @@ export class UplinternalMiniheading extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
h5 {
|
||||
display: block;
|
||||
max-width: 1200px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 0px ${unsafeCSS(spacing.md)} 0px;
|
||||
color: ${colors.text.secondary};
|
||||
font-size: 14px;
|
||||
padding: 0px 0px ${unsafeCSS(sharedStyles.spacing.sm)} 0px;
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
`
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import type { IServiceStatus } from '../interfaces/index.js';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-assetsselector.demo.js';
|
||||
@@ -26,22 +26,22 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Array })
|
||||
public services: IServiceStatus[] = [];
|
||||
accessor services: IServiceStatus[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
public filterText: string = '';
|
||||
accessor filterText: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public filterCategory: string = 'all';
|
||||
accessor filterCategory: string = 'all';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showOnlySelected: boolean = false;
|
||||
accessor showOnlySelected: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public expanded: boolean = false;
|
||||
accessor expanded: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -49,25 +49,25 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -75,13 +75,13 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
font-size: 13px;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
height: 32px;
|
||||
}
|
||||
@@ -99,15 +99,15 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
height: 32px;
|
||||
}
|
||||
@@ -126,83 +126,83 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.selected-services {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.service-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.service-pill:hover {
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
|
||||
.service-pill .status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.manage-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
|
||||
.manage-button:hover {
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
|
||||
.expandable-section {
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.expandable-content {
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
}
|
||||
|
||||
|
||||
.assets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.sm)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.asset-card:hover {
|
||||
@@ -218,7 +218,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: ${colors.text.primary};
|
||||
accent-color: ${sharedStyles.colors.text.primary};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -230,7 +230,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.asset-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: ${unsafeCSS(spacing.xs)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -238,7 +238,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
|
||||
.asset-description {
|
||||
font-size: 13px;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -247,14 +247,14 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.asset-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
}
|
||||
|
||||
.status-indicator.operational, .status-dot.operational { background: #22c55e; }
|
||||
@@ -266,14 +266,14 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
text-transform: capitalize;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
}
|
||||
|
||||
.loading-message,
|
||||
.no-results {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: ${unsafeCSS(spacing.xl)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xl)};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -281,12 +281,12 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.summary {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
}
|
||||
|
||||
|
||||
.no-services {
|
||||
padding: ${unsafeCSS(spacing.xl)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xl)};
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-size: 13px;
|
||||
@@ -294,7 +294,7 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -310,21 +310,21 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.service-pill {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.expandable-content {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.assets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
padding: ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
import { demoFunc } from './upl-statuspage-footer.demo.js';
|
||||
|
||||
declare global {
|
||||
@@ -16,76 +16,76 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: String })
|
||||
public companyName: string = '';
|
||||
accessor companyName: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public legalUrl: string = '';
|
||||
accessor legalUrl: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public supportEmail: string = '';
|
||||
accessor supportEmail: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public statusPageUrl: string = '';
|
||||
accessor statusPageUrl: string = '';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public whitelabel: boolean = false;
|
||||
accessor whitelabel: boolean = false;
|
||||
|
||||
@property({ type: Number })
|
||||
public lastUpdated: number | null = null;
|
||||
accessor lastUpdated: number | null = null;
|
||||
|
||||
@property({ type: Number })
|
||||
public currentYear: number = new Date().getFullYear();
|
||||
accessor currentYear: number = new Date().getFullYear();
|
||||
|
||||
@property({ type: Array })
|
||||
public socialLinks: Array<{ platform: string; url: string }> = [];
|
||||
accessor socialLinks: Array<{ platform: string; url: string }> = [];
|
||||
|
||||
@property({ type: Array })
|
||||
public additionalLinks: Array<{ label: string; url: string }> = [];
|
||||
accessor additionalLinks: Array<{ label: string; url: string }> = [];
|
||||
|
||||
@property({ type: String })
|
||||
public rssFeedUrl: string = '';
|
||||
accessor rssFeedUrl: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public apiStatusUrl: string = '';
|
||||
accessor apiStatusUrl: string = '';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: String })
|
||||
public errorMessage: string | null = null;
|
||||
accessor errorMessage: string | null = null;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public offline: boolean = false;
|
||||
accessor offline: boolean = false;
|
||||
|
||||
@property({ type: String })
|
||||
public latestStatusUpdate: string = '';
|
||||
accessor latestStatusUpdate: string = '';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public enableSubscribe: boolean = false;
|
||||
accessor enableSubscribe: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public enableReportIssue: boolean = false;
|
||||
accessor enableReportIssue: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public enableLanguageSelector: boolean = false;
|
||||
accessor enableLanguageSelector: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public enableThemeToggle: boolean = false;
|
||||
accessor enableThemeToggle: boolean = false;
|
||||
|
||||
@property({ type: Array })
|
||||
public languageOptions: Array<{ code: string; label: string }> = [];
|
||||
accessor languageOptions: Array<{ code: string; label: string }> = [];
|
||||
|
||||
@property({ type: String })
|
||||
public currentLanguage: string = 'en';
|
||||
accessor currentLanguage: string = 'en';
|
||||
|
||||
@property({ type: String })
|
||||
public currentTheme: string = 'light';
|
||||
accessor currentTheme: string = 'light';
|
||||
|
||||
@property({ type: Number })
|
||||
public subscriberCount: number = 0;
|
||||
accessor subscriberCount: number = 0;
|
||||
|
||||
@property({ type: Object })
|
||||
public customBranding: { primaryColor?: string; logoUrl?: string; footerText?: string } | null = null;
|
||||
accessor customBranding: { primaryColor?: string; logoUrl?: string; footerText?: string } | null = null;
|
||||
|
||||
|
||||
constructor() {
|
||||
@@ -94,53 +94,53 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: ${colors.background.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
background: ${sharedStyles.colors.background.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
font-size: 14px;
|
||||
border-top: 1px solid ${colors.border.default};
|
||||
border-top: 1px solid ${sharedStyles.colors.border.default};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: ${unsafeCSS(spacing['2xl'])} ${unsafeCSS(spacing.lg)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing['2xl'])} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.xl)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xl)};
|
||||
}
|
||||
|
||||
|
||||
.footer-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: ${unsafeCSS(spacing['2xl'])};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing['2xl'])};
|
||||
}
|
||||
|
||||
|
||||
.company-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
|
||||
.company-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
|
||||
.company-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
@@ -152,15 +152,15 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.action-button {
|
||||
padding: 8px 16px;
|
||||
height: 36px;
|
||||
@@ -173,8 +173,8 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -189,21 +189,21 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
padding-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
|
||||
.footer-meta {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -219,7 +219,7 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
||||
}
|
||||
|
||||
@@ -252,57 +252,57 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.powered-by a:hover {
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
|
||||
.status-update {
|
||||
padding: 12px 16px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
line-height: 1.5;
|
||||
color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
|
||||
}
|
||||
|
||||
|
||||
.language-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.language-selector select {
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
background: ${colors.background.primary};
|
||||
color: ${colors.text.primary};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
background: ${sharedStyles.colors.background.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
|
||||
.theme-toggle {
|
||||
cursor: pointer;
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
background: transparent;
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border-color: ${sharedStyles.colors.border.muted};
|
||||
}
|
||||
|
||||
|
||||
.subscribe-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
}
|
||||
|
||||
.subscriber-count {
|
||||
@@ -311,27 +311,27 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: ${cssManager.bdTheme('#fee9e9', '#7f1d1d')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
font-size: 14px;
|
||||
border: 1px solid ${cssManager.bdTheme('#fecaca', '#991b1b')};
|
||||
}
|
||||
|
||||
|
||||
.offline-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.status.degraded};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: ${sharedStyles.colors.status.degraded};
|
||||
color: white;
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.loading-skeleton {
|
||||
height: 200px;
|
||||
background: ${cssManager.bdTheme(
|
||||
@@ -340,7 +340,7 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
)};
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.md)};
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
@@ -351,48 +351,48 @@ export class UplStatuspageFooter extends DeesElement {
|
||||
.additional-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.additional-link {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.additional-link:hover {
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.footer-main {
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
||||
.footer-meta {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.company-links {
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
|
||||
.powered-by {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { fonts, shadows } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
import { demoFunc } from './upl-statuspage-header.demo.js';
|
||||
|
||||
declare global {
|
||||
@@ -16,19 +16,19 @@ export class UplStatuspageHeader extends DeesElement {
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: String })
|
||||
public pageTitle: string = "Statuspage Title";
|
||||
|
||||
accessor pageTitle: string = "Statuspage Title";
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showReportButton: boolean = true;
|
||||
|
||||
accessor showReportButton: boolean = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showSubscribeButton: boolean = true;
|
||||
|
||||
accessor showSubscribeButton: boolean = true;
|
||||
|
||||
@property({ type: String })
|
||||
public logoUrl: string = '';
|
||||
|
||||
accessor logoUrl: string = '';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
|
||||
constructor() {
|
||||
@@ -39,136 +39,193 @@ export class UplStatuspageHeader extends DeesElement {
|
||||
domtools.elementBasic.staticStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
display: block;
|
||||
background: ${sharedStyles.colors.background.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
border-bottom: 1px solid ${sharedStyles.colors.border.default};
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.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.lg)};
|
||||
}
|
||||
|
||||
.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.normal)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border-color: ${sharedStyles.colors.border.muted};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.xs)};
|
||||
}
|
||||
|
||||
.actionButton:active {
|
||||
transform: scale(0.98);
|
||||
transition-duration: ${unsafeCSS(sharedStyles.durations.fast)};
|
||||
}
|
||||
|
||||
.actionButton:focus-visible {
|
||||
outline: 2px solid ${sharedStyles.colors.accent.focus};
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
|
||||
transition: opacity ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.actionButton.primary:hover {
|
||||
background: ${sharedStyles.colors.accent.hover};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
|
||||
}
|
||||
|
||||
.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: loading 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(200%); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.actionButton:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 24px;
|
||||
width: auto;
|
||||
filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
|
||||
}
|
||||
|
||||
.page-info {
|
||||
padding: 48px 0 64px 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 20px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Primary button variant */
|
||||
.actionButton.primary {
|
||||
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.actionButton {
|
||||
font-size: 12px;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.actionButton.primary:hover {
|
||||
background: ${cssManager.bdTheme('#262626', '#e5e7eb')};
|
||||
border-color: ${cssManager.bdTheme('#262626', '#e5e7eb')};
|
||||
.page-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
height: 64px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.header-nav {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
unsafeCSS,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { IIncidentDetails } from '../interfaces/index.js';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-incidents.demo.js';
|
||||
|
||||
@@ -29,44 +29,44 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public currentIncidents: IIncidentDetails[] = [];
|
||||
accessor currentIncidents: IIncidentDetails[] = [];
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public pastIncidents: IIncidentDetails[] = [];
|
||||
accessor pastIncidents: IIncidentDetails[] = [];
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public whitelabel = false;
|
||||
accessor whitelabel = false;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
})
|
||||
public loading = false;
|
||||
accessor loading = false;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
})
|
||||
public daysToShow = 90;
|
||||
accessor daysToShow = 90;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public subscribedIncidentIds: string[] = [];
|
||||
accessor subscribedIncidentIds: string[] = [];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
state: true,
|
||||
})
|
||||
private expandedIncidents: Set<string> = new Set();
|
||||
private accessor expandedIncidents: Set<string> = new Set();
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
state: true,
|
||||
})
|
||||
private subscribedIncidents: Set<string> = new Set();
|
||||
private accessor subscribedIncidents: Set<string> = new Set();
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -89,75 +89,75 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
plugins.domtools.elementBasic.staticStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.noIncidentBox {
|
||||
background: ${colors.background.card};
|
||||
padding: ${unsafeCSS(spacing.xl)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
background: ${sharedStyles.colors.background.card};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xl)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.md)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
text-align: center;
|
||||
color: ${colors.text.secondary};
|
||||
box-shadow: ${unsafeCSS(shadows.sm)};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
|
||||
}
|
||||
|
||||
.incident-card {
|
||||
background: ${colors.background.card};
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
background: ${sharedStyles.colors.background.card};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.md)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
overflow: hidden;
|
||||
box-shadow: ${unsafeCSS(shadows.sm)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.incident-card.expanded {
|
||||
box-shadow: ${unsafeCSS(shadows.md)};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
|
||||
}
|
||||
|
||||
.incident-header {
|
||||
padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-left: 4px solid;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.incident-header:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
|
||||
}
|
||||
|
||||
.incident-header.critical {
|
||||
border-left-color: ${colors.status.major};
|
||||
border-left-color: ${sharedStyles.colors.status.major};
|
||||
}
|
||||
|
||||
.incident-header.major {
|
||||
border-left-color: ${colors.status.partial};
|
||||
border-left-color: ${sharedStyles.colors.status.partial};
|
||||
}
|
||||
|
||||
.incident-header.minor {
|
||||
border-left-color: ${colors.status.degraded};
|
||||
border-left-color: ${sharedStyles.colors.status.degraded};
|
||||
}
|
||||
|
||||
.incident-header.maintenance {
|
||||
border-left-color: ${colors.status.maintenance};
|
||||
border-left-color: ${sharedStyles.colors.status.maintenance};
|
||||
}
|
||||
|
||||
.incident-title {
|
||||
@@ -169,19 +169,19 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
|
||||
.incident-meta {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
font-size: 13px;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.incident-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@@ -215,49 +215,49 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
}
|
||||
|
||||
.incident-body {
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.incident-impact {
|
||||
margin: ${unsafeCSS(spacing.md)} 0;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.background.secondary};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
margin: ${unsafeCSS(sharedStyles.spacing.md)} 0;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.affected-services {
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.affected-services-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: ${unsafeCSS(spacing.sm)};
|
||||
color: ${colors.text.primary};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
display: inline-block;
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
margin: 2px;
|
||||
background: ${colors.background.muted};
|
||||
border-radius: ${unsafeCSS(borderRadius.sm)};
|
||||
background: ${sharedStyles.colors.background.muted};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.sm)};
|
||||
font-size: 12px;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
}
|
||||
|
||||
.incident-updates {
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
border-top: 1px solid ${colors.border.default};
|
||||
padding-top: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-top: 1px solid ${sharedStyles.colors.border.default};
|
||||
padding-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.update-item {
|
||||
position: relative;
|
||||
padding-left: ${unsafeCSS(spacing.lg)};
|
||||
margin-bottom: ${unsafeCSS(spacing.md)};
|
||||
padding-left: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.update-item::before {
|
||||
@@ -267,27 +267,27 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
top: 6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
background: ${colors.border.muted};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
background: ${sharedStyles.colors.border.muted};
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: ${colors.text.secondary};
|
||||
margin-bottom: ${unsafeCSS(spacing.xs)};
|
||||
font-family: ${unsafeCSS(fonts.mono)};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.mono)};
|
||||
}
|
||||
|
||||
.update-message {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: ${colors.text.primary};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.update-author {
|
||||
font-size: 12px;
|
||||
color: ${colors.text.secondary};
|
||||
margin-top: ${unsafeCSS(spacing.xs)};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -299,8 +299,8 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
)};
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.md)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
@@ -310,63 +310,63 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
|
||||
.show-more {
|
||||
text-align: center;
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.show-more-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.lg)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.sm)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
background: transparent;
|
||||
border: 1px solid ${colors.border.default};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
.show-more-button:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border-color: ${sharedStyles.colors.border.muted};
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.show-more-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.incident-actions {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
align-items: center;
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
padding-top: ${unsafeCSS(spacing.lg)};
|
||||
border-top: 1px solid ${colors.border.default};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
padding-top: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-top: 1px solid ${sharedStyles.colors.border.default};
|
||||
}
|
||||
|
||||
|
||||
.subscribe-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
background: transparent;
|
||||
border: 1px solid ${colors.border.default};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
|
||||
.subscribe-button:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
background: ${sharedStyles.colors.background.secondary};
|
||||
border-color: ${sharedStyles.colors.border.muted};
|
||||
}
|
||||
|
||||
.subscribe-button.subscribed {
|
||||
@@ -381,24 +381,24 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
|
||||
.collapsed-hint {
|
||||
font-size: 12px;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
text-align: center;
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.incident-header {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.incident-meta {
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
}
|
||||
}
|
||||
`,
|
||||
@@ -456,12 +456,12 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
</div>
|
||||
${!this.expandedIncidents.has(incident.id) ? html`
|
||||
<div style="
|
||||
margin-top: ${unsafeCSS(spacing.sm)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
font-size: 13px;
|
||||
color: ${colors.text.secondary};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
">
|
||||
${incident.impact ? html`
|
||||
<span style="
|
||||
@@ -480,7 +480,7 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: ${unsafeCSS(spacing.md)};">
|
||||
<div style="display: flex; align-items: center; gap: ${unsafeCSS(sharedStyles.spacing.md)};">
|
||||
<div class="incident-status ${latestUpdate.status}">
|
||||
${this.getStatusIcon(latestUpdate.status)}
|
||||
${latestUpdate.status.replace(/_/g, ' ')}
|
||||
@@ -590,10 +590,10 @@ export class UplStatuspageIncidents extends DeesElement {
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
background: ${status === 'resolved' ? colors.status.operational :
|
||||
status === 'monitoring' ? colors.status.maintenance :
|
||||
status === 'identified' ? colors.status.degraded :
|
||||
colors.status.partial};
|
||||
background: ${status === 'resolved' ? sharedStyles.colors.status.operational :
|
||||
status === 'monitoring' ? sharedStyles.colors.status.maintenance :
|
||||
status === 'identified' ? sharedStyles.colors.status.degraded :
|
||||
sharedStyles.colors.status.partial};
|
||||
"></span>`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { fonts } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
import { demoFunc } from './upl-statuspage-pagetitle.demo.js';
|
||||
|
||||
declare global {
|
||||
@@ -14,13 +14,13 @@ export class UplStatuspagePagetitle extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: String })
|
||||
public pageTitle: string = 'System Status';
|
||||
accessor pageTitle: string = 'System Status';
|
||||
|
||||
@property({ type: String })
|
||||
public pageSubtitle: string = '';
|
||||
@property({ type: String })
|
||||
accessor pageSubtitle: string = '';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public centered: boolean = false;
|
||||
accessor centered: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -31,13 +31,13 @@ export class UplStatuspagePagetitle extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
.title-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 24px 24px;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.title-container.centered {
|
||||
@@ -47,30 +47,30 @@ export class UplStatuspagePagetitle extends DeesElement {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.1;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
margin: 0 0 16px 0;
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
margin: 0 0 ${unsafeCSS(sharedStyles.spacing.md)} 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
font-size: 18px;
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.title-container {
|
||||
padding: 32px 16px 20px 16px;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
unsafeCSS,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-statsgrid.demo.js';
|
||||
@@ -25,28 +25,28 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Number })
|
||||
public uptime: number = 99.99;
|
||||
accessor uptime: number = 99.99;
|
||||
|
||||
@property({ type: Number })
|
||||
public avgResponseTime: number = 125;
|
||||
accessor avgResponseTime: number = 125;
|
||||
|
||||
@property({ type: Number })
|
||||
public totalIncidents: number = 0;
|
||||
accessor totalIncidents: number = 0;
|
||||
|
||||
@property({ type: Number })
|
||||
public affectedServices: number = 0;
|
||||
accessor affectedServices: number = 0;
|
||||
|
||||
@property({ type: Number })
|
||||
public totalServices: number = 0;
|
||||
accessor totalServices: number = 0;
|
||||
|
||||
@property({ type: String })
|
||||
public currentStatus: string = 'operational';
|
||||
accessor currentStatus: string = 'operational';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: String })
|
||||
public timePeriod: string = '90 days';
|
||||
accessor timePeriod: string = '90 days';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -54,32 +54,32 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -97,10 +97,10 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 500;
|
||||
margin-bottom: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@@ -120,7 +120,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
|
||||
.stat-change {
|
||||
font-size: 12px;
|
||||
margin-top: ${unsafeCSS(spacing.xs)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@@ -141,14 +141,14 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
.loading-skeleton {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
width: 80px;
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
||||
border-radius: 4px;
|
||||
margin-bottom: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@@ -183,37 +183,37 @@ export class UplStatuspageStatsgrid extends DeesElement {
|
||||
}
|
||||
|
||||
.status-indicator.operational {
|
||||
background: ${colors.status.operational};
|
||||
background: ${sharedStyles.colors.status.operational};
|
||||
}
|
||||
|
||||
.status-indicator.degraded {
|
||||
background: ${colors.status.degraded};
|
||||
background: ${sharedStyles.colors.status.degraded};
|
||||
}
|
||||
|
||||
.status-indicator.partial_outage {
|
||||
background: ${colors.status.partial};
|
||||
background: ${sharedStyles.colors.status.partial};
|
||||
}
|
||||
|
||||
.status-indicator.major_outage {
|
||||
background: ${colors.status.major};
|
||||
background: ${sharedStyles.colors.status.major};
|
||||
}
|
||||
|
||||
.status-indicator.maintenance {
|
||||
background: ${colors.status.maintenance};
|
||||
background: ${sharedStyles.colors.status.maintenance};
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css, unsafeCSS } from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import type { IOverallStatus } from '../interfaces/index.js';
|
||||
import { fonts, colors } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
import { demoFunc } from './upl-statuspage-statusbar.demo.js';
|
||||
|
||||
declare global {
|
||||
@@ -15,7 +15,7 @@ export class UplStatuspageStatusbar extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Object })
|
||||
public overallStatus: IOverallStatus = {
|
||||
accessor overallStatus: IOverallStatus = {
|
||||
status: 'operational',
|
||||
message: 'All Systems Operational',
|
||||
lastUpdated: Date.now(),
|
||||
@@ -24,10 +24,10 @@ export class UplStatuspageStatusbar extends DeesElement {
|
||||
};
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public expandable: boolean = true;
|
||||
accessor expandable: boolean = true;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -37,149 +37,236 @@ export class UplStatuspageStatusbar extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
}
|
||||
padding: 0;
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
}
|
||||
|
||||
.statusbar-container {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statusbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
|
||||
cursor: default;
|
||||
transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.01em;
|
||||
background: ${sharedStyles.colors.background.card};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
|
||||
}
|
||||
|
||||
.statusbar-inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
transition: background ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
}
|
||||
|
||||
.statusbar-inner.operational::before {
|
||||
background: ${sharedStyles.colors.status.operational};
|
||||
}
|
||||
|
||||
.statusbar-inner.degraded::before {
|
||||
background: ${sharedStyles.colors.status.degraded};
|
||||
}
|
||||
|
||||
.statusbar-inner.partial_outage::before {
|
||||
background: ${sharedStyles.colors.status.partial};
|
||||
}
|
||||
|
||||
.statusbar-inner.major_outage::before {
|
||||
background: ${sharedStyles.colors.status.major};
|
||||
}
|
||||
|
||||
.statusbar-inner.maintenance::before {
|
||||
background: ${sharedStyles.colors.status.maintenance};
|
||||
}
|
||||
|
||||
.statusbar-inner:hover {
|
||||
border-color: ${sharedStyles.colors.border.muted};
|
||||
box-shadow: ${unsafeCSS(sharedStyles.shadows.base)};
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-indicator::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.statusbar-inner.operational .status-indicator {
|
||||
background: ${sharedStyles.colors.status.operational};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(22, 163, 74, 0.15)', 'rgba(34, 197, 94, 0.2)')};
|
||||
}
|
||||
|
||||
.statusbar-inner.operational .status-indicator::after {
|
||||
background: ${sharedStyles.colors.status.operational};
|
||||
animation: pulse-ring 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.statusbar-inner.degraded .status-indicator {
|
||||
background: ${sharedStyles.colors.status.degraded};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(217, 119, 6, 0.15)', 'rgba(251, 191, 36, 0.2)')};
|
||||
}
|
||||
|
||||
.statusbar-inner.partial_outage .status-indicator {
|
||||
background: ${sharedStyles.colors.status.partial};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(220, 38, 38, 0.15)', 'rgba(248, 113, 113, 0.2)')};
|
||||
}
|
||||
|
||||
.statusbar-inner.major_outage .status-indicator {
|
||||
background: ${sharedStyles.colors.status.major};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(185, 28, 28, 0.15)', 'rgba(239, 68, 68, 0.2)')};
|
||||
animation: pulse-indicator 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.statusbar-inner.maintenance .status-indicator {
|
||||
background: ${sharedStyles.colors.status.maintenance};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(37, 99, 235, 0.15)', 'rgba(96, 165, 250, 0.2)')};
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(1); opacity: 0.2; }
|
||||
50% { transform: scale(1.5); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes pulse-indicator {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.status-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
flex: 1;
|
||||
padding-left: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.status-message {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-details {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
background: ${sharedStyles.colors.background.card};
|
||||
border: 1px solid ${sharedStyles.colors.border.default};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
|
||||
height: 64px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 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: loading 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(200%); }
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 12px;
|
||||
color: ${sharedStyles.colors.text.muted};
|
||||
white-space: nowrap;
|
||||
padding: 4px 10px;
|
||||
background: ${sharedStyles.colors.background.muted};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
|
||||
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
|
||||
}
|
||||
|
||||
.statusbar-inner:hover .last-updated {
|
||||
background: ${cssManager.bdTheme('#e4e4e7', '#3f3f46')};
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.statusbar-container {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
padding: 24px 24px;
|
||||
position: relative;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.statusbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 56px;
|
||||
padding: 16px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: ${cssManager.bdTheme('default', 'default')};
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
min-height: auto;
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
.statusbar-inner:hover {
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
|
||||
.status-main {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.statusbar-inner {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statusbar-inner.operational .status-indicator {
|
||||
background: ${colors.status.operational};
|
||||
}
|
||||
|
||||
.statusbar-inner.degraded .status-indicator {
|
||||
background: ${colors.status.degraded};
|
||||
}
|
||||
|
||||
.statusbar-inner.partial_outage .status-indicator {
|
||||
background: ${colors.status.partial};
|
||||
}
|
||||
|
||||
.statusbar-inner.major_outage .status-indicator {
|
||||
background: ${colors.status.major};
|
||||
}
|
||||
|
||||
.statusbar-inner.maintenance .status-indicator {
|
||||
background: ${colors.status.maintenance};
|
||||
}
|
||||
|
||||
.status-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.status-details {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: 6px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading-skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme(
|
||||
'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%)',
|
||||
'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)'
|
||||
)};
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.statusbar-container {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.statusbar-inner {
|
||||
font-size: 13px;
|
||||
padding: 12px 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 11px;
|
||||
}
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
]
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
unsafeCSS,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { IStatusHistoryPoint } from '../interfaces/index.js';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-statusdetails.demo.js';
|
||||
@@ -26,22 +26,22 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Array })
|
||||
public historyData: IStatusHistoryPoint[] = [];
|
||||
|
||||
accessor historyData: IStatusHistoryPoint[] = [];
|
||||
|
||||
@property({ type: Array })
|
||||
public dataPoints: IStatusHistoryPoint[] = [];
|
||||
accessor dataPoints: IStatusHistoryPoint[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
public serviceId: string = '';
|
||||
accessor serviceId: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public serviceName: string = 'Service';
|
||||
accessor serviceName: string = 'Service';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: Number })
|
||||
public hoursToShow: number = 48;
|
||||
accessor hoursToShow: number = 48;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -49,20 +49,20 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
plugins.domtools.elementBasic.staticStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.graph-wrapper {
|
||||
@@ -86,10 +86,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
}
|
||||
@@ -138,10 +138,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin-top: ${unsafeCSS(spacing.xs)};
|
||||
margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
font-size: 10px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -202,16 +202,16 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.graph-container {
|
||||
padding: ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
}
|
||||
|
||||
.mainbox .barContainer {
|
||||
height: 32px;
|
||||
padding: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.xs)};
|
||||
}
|
||||
|
||||
.time-labels {
|
||||
@@ -221,7 +221,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
.stats-row {
|
||||
font-size: 11px;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -235,7 +235,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
|
||||
<div class="mainbox">
|
||||
${this.loading ? html`
|
||||
<div class="graph-container">
|
||||
<div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${borderRadius.base}; padding: ${spacing.sm}; height: 40px;">
|
||||
<div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${sharedStyles.borderRadius.base}; padding: ${sharedStyles.spacing.sm}; height: 40px;">
|
||||
<div class="loading-skeleton">
|
||||
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import type { IMonthlyUptime } from '../interfaces/index.js';
|
||||
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
|
||||
import * as sharedStyles from '../styles/shared.styles.js';
|
||||
|
||||
import './internal/uplinternal-miniheading.js';
|
||||
import { demoFunc } from './upl-statuspage-statusmonth.demo.js';
|
||||
@@ -26,22 +26,22 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Array })
|
||||
public monthlyData: IMonthlyUptime[] = [];
|
||||
accessor monthlyData: IMonthlyUptime[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
public serviceId: string = '';
|
||||
accessor serviceId: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public serviceName: string = 'Service';
|
||||
accessor serviceName: string = 'Service';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
accessor loading: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showTooltip: boolean = true;
|
||||
accessor showTooltip: boolean = true;
|
||||
|
||||
@property({ type: Number })
|
||||
public monthsToShow: number = 5;
|
||||
accessor monthsToShow: number = 5;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -49,32 +49,32 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
commonStyles,
|
||||
sharedStyles.commonStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
background: transparent;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
color: ${colors.text.primary};
|
||||
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
|
||||
color: ${sharedStyles.colors.text.primary};
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.mainbox {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
.statusMonth {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
@@ -83,7 +83,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
min-height: 280px;
|
||||
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
|
||||
}
|
||||
|
||||
|
||||
.statusMonth:hover {
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
|
||||
@@ -92,7 +92,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
.month-header {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: ${unsafeCSS(spacing.md)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
@@ -102,9 +102,9 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
|
||||
}
|
||||
|
||||
|
||||
.days-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
@@ -119,7 +119,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
font-weight: 500;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -171,7 +171,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
.overall-uptime {
|
||||
font-size: 12px;
|
||||
margin-top: auto;
|
||||
padding-top: ${unsafeCSS(spacing.md)};
|
||||
padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -195,7 +195,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
.loading-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -264,28 +264,28 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
.no-data-message {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: ${unsafeCSS(spacing['2xl'])};
|
||||
color: ${colors.text.secondary};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
|
||||
color: ${sharedStyles.colors.text.secondary};
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
||||
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.mainbox {
|
||||
grid-template-columns: 1fr;
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
gap: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
|
||||
|
||||
.statusMonth {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
|
||||
.loading-skeleton {
|
||||
height: 180px;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
padding: ${unsafeCSS(sharedStyles.spacing.md)};
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
Reference in New Issue
Block a user