Status Widget Web Component

A lightweight and customizable status widget web component that displays system status information. This component can be easily integrated into any web application to show real-time status updates, health checks, or service availability indicators. Built with modern web standards, it provides a seamless way to keep users informed about system states and operational conditions.

Operational | Maintenance :-------------------------:|:-------------------------: |

Installation

npm i @incidite/status-widget

Usage

<script type="module">
  import '@incidite/status-widget/incidite-status.js';
</script>

<incidite-status statuspageSlug="abc123"></incidite-status>

Available Attributes

| Attribute | Default | Description | |-----------|---------|-------------| | statuspageSlug | "" | The unique identifier for your status page | | refreshInterval | 30_000 | Time in seconds between status updates | | api_endpoint | https://api.incidite.com/query | The base URL endpoint for the Incidite API service |

Changing Language

The status widget supports multiple languages through the @lit/localize package. You can change the language at runtime using the setLocale function:

import { setLocale } from '@incidite/status-widget';

// Change to German
setLocale('de');

// Change back to default language (English)
setLocale('en');

You can also check the current locale using the getLocale function:

import { getLocale } from '@incidite/status-widget';

const currentLocale = getLocale(); // Returns the current language code

Available Locales

The following locales are currently supported:

• English (en) - Default
• German (de)

Theming

The status widget component can be customized using CSS custom properties (variables). You can override these variables to match your application's design system.

| CSS Variable | Default Value | Description | |--------------|---------------|-------------| | --incidite-status-text-color | #2c3e50 | Color of the text in the status widget | | --incidite-status-popover-bg-color | #fff | Background color of the popover dialog | | --incidite-status-bg-color | #f5f5f5 | Background color of the status button |

Example Usage

/* Apply custom theme */
incidite-status {
  --incidite-status-text-color: #333333;
  --incidite-status-popover-bg-color: #ffffff;
  --incidite-status-bg-color: #f0f0f0;
}

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html