feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs
This commit is contained in:
@@ -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>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user