@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.58 → 2.0.0-next.60

package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts

@@ -4,9 +4,15 @@ import {useArgs} from 'storybook/preview-api';
 import {
   ReadoutListItemSize,
   ReadoutListItemStacking,
-  ReadoutListItemAlertState,
+  ReadoutListItemDataState,
   ReadoutListItemPriority,
 } from './readout-list-item.js';
+import type {AlertFrameConfig} from '../../components/alert-frame/alert-frame.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import './readout-list-item.js';
 import '../../icons/icon-placeholder.js';
 
@@ -14,7 +20,8 @@ type ReadoutListItemStoryArgs = {
   size: ReadoutListItemSize;
   stacking: ReadoutListItemStacking;
   priority: ReadoutListItemPriority;
-  alertState: ReadoutListItemAlertState;
+  dataState: ReadoutListItemDataState;
+  alert: AlertFrameConfig | false;
   hasSetpoint: boolean;
   setpointValue: number;
   hasLabel: boolean;
@@ -132,7 +139,8 @@ const defaultArgs: ReadoutListItemStoryArgs = {
   size: ReadoutListItemSize.base,
   stacking: ReadoutListItemStacking.trailingUnit,
   priority: ReadoutListItemPriority.regular,
-  alertState: ReadoutListItemAlertState.none,
+  dataState: ReadoutListItemDataState.none,
+  alert: false,
   hasSetpoint: false,
   setpointValue: 123,
   hasDegree: true,
@@ -149,6 +157,7 @@ const defaultArgs: ReadoutListItemStoryArgs = {
   value: 123,
   fractionDigits: 0,
   showZeroPadding: false,
+  labelOnly: false,
 };
 
 function renderReadoutListItem(args: Partial<ReadoutListItemStoryArgs>) {
@@ -158,7 +167,8 @@ function renderReadoutListItem(args: Partial<ReadoutListItemStoryArgs>) {
       .size=${resolved.size}
       .stacking=${resolved.stacking}
       .priority=${resolved.priority}
-      .alertState=${resolved.alertState}
+      .dataState=${resolved.dataState}
+      .alert=${resolved.alert}
       .hasSetpoint=${resolved.hasSetpoint}
       .setpointValue=${resolved.setpointValue}
       .hasLabel=${resolved.hasLabel}
@@ -260,10 +270,10 @@ const meta = {
       options: Object.values(ReadoutListItemPriority),
       table: {category: 'Readout'},
     },
-    alertState: {
-      name: 'Alert State',
+    dataState: {
+      name: 'Data State',
       control: {type: 'select'},
-      options: Object.values(ReadoutListItemAlertState),
+      options: Object.values(ReadoutListItemDataState),
       table: {category: 'Readout'},
     },
     hasSetpoint: {
@@ -386,7 +396,7 @@ function renderStackingMatrix({
             stacking,
             priority,
             hasSetpoint,
-            alertState: ReadoutListItemAlertState.none,
+            dataState: ReadoutListItemDataState.none,
             hasUnit,
             hasSource,
             value: 123,
@@ -429,20 +439,53 @@ export const LeadingSrc: Story = {
     }),
 };
 
-export const AlertStates: Story = {
+export const DataStates: Story = {
   render: () => {
-    const alerts = Object.values(ReadoutListItemAlertState);
-    const cases: ReadoutShowcaseCase[] = alerts.map((alertState) => ({
-      label: `${alertState}`,
+    const dataStates = Object.values(ReadoutListItemDataState);
+    const cases: ReadoutShowcaseCase[] = dataStates.map((dataState) => ({
+      label: `${dataState}`,
       args: {
         size: ReadoutListItemSize.base,
         stacking: ReadoutListItemStacking.trailingUnit,
         priority: ReadoutListItemPriority.regular,
-        alertState,
+        dataState,
         value: 123,
       },
     }));
 
-    return renderShowcaseSections([{title: 'Alert States', cases}]);
+    return renderShowcaseSections([{title: 'Data States', cases}]);
+  },
+};
+
+export const Alarm: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.Alarm,
+      mode: ObcAlertFrameMode.ackedActive,
+      type: ObcAlertFrameType.Regular,
+    },
+  },
+};
+
+export const IsaCritical: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.IsaCritical,
+      mode: ObcAlertFrameMode.unackedActive,
+      type: ObcAlertFrameType.Regular,
+    },
+  },
+};
+
+export const IsaLowUnackedRectified: Story = {
+  args: {
+    value: 123,
+    alert: {
+      status: AlertType.IsaLow,
+      mode: ObcAlertFrameMode.unackedRectified,
+      type: ObcAlertFrameType.Regular,
+    },
   },
 };

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -9,14 +9,15 @@ import {Priority} from '../types.js';
 import '../readout-setpoint/readout-setpoint.js';
 import '../../icons/icon-input-right.js';
 import {ReadoutSetpointMode} from '../readout-setpoint/readout-setpoint.js';
+import {
+  type AlertFrameConfig,
+  wrapWithAlertFrame,
+} from '../../components/alert-frame/alert-frame.js';
 
-export enum ReadoutListItemAlertState {
+export enum ReadoutListItemDataState {
   none = 'none',
   lowIntegrity = 'low-integrity',
   invalid = 'invalid',
-  caution = 'caution',
-  warning = 'warning',
-  alarm = 'alarm',
 }
 
 export enum ReadoutListItemSize {
@@ -47,7 +48,8 @@ export enum ReadoutListItemPriority {
  * - **Sizes:** `base`, `priority`, and `enhanced` typography/padding scales.
  * - **Stacking modes:** `trailing-unit`, `leading-unit`, and `leading-src` control where unit/source appear relative to the label/value.
  * - **Priority styling:** `priority` controls emphasis and setpoint presentation (`regular`, `enhanced`, `setpoint`, `setpoint-flip-flop`).
- * - **Alert states:** Supports `alertState` styling for integrity/invalid and attention states (`caution`, `warning`, `alarm`).
+ * - **Data states:** Supports `dataState` styling for `low-integrity` and `invalid` data quality.
+ * - **Alert frame:** Optional `alert` wrapper for caution, warning, alarm, and other alert-frame statuses.
  * - **Formatting:** Supports numeric formatting, fixed-length width templates, hinted zeros, and optional degree suffix (`°`).
  *
  * ### Usage Guidelines
@@ -71,7 +73,9 @@ export class ObcReadoutListItem extends LitElement {
   @property({type: String})
   priority: ReadoutListItemPriority = ReadoutListItemPriority.regular;
   @property({type: String})
-  alertState: ReadoutListItemAlertState = ReadoutListItemAlertState.none;
+  dataState: ReadoutListItemDataState = ReadoutListItemDataState.none;
+
+  @property({type: Object}) alert: AlertFrameConfig | boolean = false;
 
   @property({type: String}) label = '';
   @property({type: String}) unit = '';
@@ -369,46 +373,52 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   override render() {
-    return html`
-      <div
-        class=${classMap({
-          root: true,
-          [`size-${this.size}`]: true,
-          [`stacking-${this.stacking}`]: true,
-          'priority-enhanced':
-            this.priority === ReadoutListItemPriority.enhanced,
-          'priority-setpoint':
-            this.priority === ReadoutListItemPriority.setpoint,
-          'priority-setpoint-flip-flop':
-            this.priority === ReadoutListItemPriority.setpointFlipFlop,
-          [`alert-${this.alertState}`]: true,
-          'has-leading-icon': this.hasLeadingIcon,
-          'has-value-icon': this.hasValueIcon,
-        })}
-        part="root"
-      >
-        <div class="content" part="content">
-          <div class="label-container" part="label-container">
-            ${this.hasLeadingIcon
-              ? html`<span class="leading-icon" aria-hidden="true"
-                  ><slot name="leading-icon"></slot
-                ></span>`
-              : nothing}
-            ${this.renderLabelContainer()}
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+            root: true,
+            [`size-${this.size}`]: true,
+            [`stacking-${this.stacking}`]: true,
+            'priority-enhanced':
+              this.priority === ReadoutListItemPriority.enhanced,
+            'priority-setpoint':
+              this.priority === ReadoutListItemPriority.setpoint,
+            'priority-setpoint-flip-flop':
+              this.priority === ReadoutListItemPriority.setpointFlipFlop,
+            'data-none': this.dataState === ReadoutListItemDataState.none,
+            'data-low-integrity':
+              this.dataState === ReadoutListItemDataState.lowIntegrity,
+            'data-invalid': this.dataState === ReadoutListItemDataState.invalid,
+            'has-leading-icon': this.hasLeadingIcon,
+            'has-value-icon': this.hasValueIcon,
+          })}
+          part="root"
+        >
+          <div class="content" part="content">
+            <div class="label-container" part="label-container">
+              ${this.hasLeadingIcon
+                ? html`<span class="leading-icon" aria-hidden="true"
+                    ><slot name="leading-icon"></slot
+                  ></span>`
+                : nothing}
+              ${this.renderLabelContainer()}
+            </div>
+
+            ${this.labelOnly
+              ? nothing
+              : html`
+                  <div class="value-container" part="value-container">
+                    ${this.renderValue()} ${this.renderTrailingUnit()}
+                  </div>
+
+                  ${this.renderTrailingSource()}
+                `}
           </div>
-
-          ${this.labelOnly
-            ? nothing
-            : html`
-                <div class="value-container" part="value-container">
-                  ${this.renderValue()} ${this.renderTrailingUnit()}
-                </div>
-
-                ${this.renderTrailingSource()}
-              `}
         </div>
-      </div>
-    `;
+      `
+    );
   }
 
   static override styles = unsafeCSS(componentStyle);

package/src/palettes/critical.md

@@ -0,0 +1,95 @@
+# Color/Styles/Critical
+
+Kodebasestil som speiler `Color/Styles/Alarm` i Figma **Palette**, men peker på **Critical-alarm**-primitiver i stedet for Alarm.
+
+Denne stilen finnes **ikke** i Figma Palette — den er definert kun i kodebasen (`manual.css`).
+
+## Unike primitive-farger per tema
+
+| Tema        | Primitive-farger brukt                                                                 |
+| ----------- | -------------------------------------------------------------------------------------- |
+| Day         | `Primitives-day/Critical-alarm/400`, `450`, `500`                                      |
+| Dusk BETA   | `Primitives-dusk/Critical-alarm/300`, `350`, `400` + `Primitives-dusk/Blue/500`        |
+| Night BETA  | `Primitives-night/Critical/300`, `350`, `400`, `500` + `Primitives-night/Enhanced/400` |
+| Bright BETA | `Primitives-day/Critical-alarm/400`, `500`, `600` + `Primitives-day/Blue/300`          |
+
+Night bruker mappen `Critical` (ikke `Critical-alarm`) fordi `Primitives-night/Critical-alarm` ikke finnes i Figma.
+
+## Detaljert mapping per state
+
+| State / property    | Day                | Dusk BETA          | Night BETA   | Bright BETA        |
+| ------------------- | ------------------ | ------------------ | ------------ | ------------------ |
+| Enabled background  | Critical-alarm/400 | Critical-alarm/300 | Critical/400 | Critical-alarm/400 |
+| Enabled border      | Critical-alarm/500 | Critical-alarm/350 | Critical/400 | Critical-alarm/600 |
+| Hover background    | Critical-alarm/450 | Critical-alarm/350 | Critical/400 | Critical-alarm/500 |
+| Hover border        | Critical-alarm/500 | Critical-alarm/350 | Critical/500 | Critical-alarm/600 |
+| Pressed background  | Critical-alarm/500 | Critical-alarm/400 | Critical/350 | Critical-alarm/600 |
+| Pressed border      | Critical-alarm/500 | Critical-alarm/350 | Critical/500 | Critical-alarm/600 |
+| Focused background  | Critical-alarm/400 | Critical-alarm/300 | Critical/400 | Critical-alarm/500 |
+| Focused border      | Critical-alarm/500 | Blue/500           | Enhanced/400 | Blue/300           |
+| Disabled background | Critical-alarm/400 | Critical-alarm/300 | Critical/300 | Critical-alarm/400 |
+| Disabled border     | Critical-alarm/400 | Critical-alarm/300 | Critical/300 | Critical-alarm/400 |
+
+Primitive-prefikser er forkortet (f.eks. `Critical-alarm/400` = `Primitives-day/Critical-alarm/400` for Day og Bright BETA).
+
+## Oppsummering
+
+- **Day** og **Bright BETA** bruker `Primitives-day/Critical-alarm/*` (Bright med mørkere nyanser: 500/600).
+- **Dusk BETA** bruker `Primitives-dusk/Critical-alarm/*` (300–400).
+- **Night BETA** bruker `Primitives-night/Critical/*` med samme nyansenummer som Alarm bruker for `Primitives-night/Alarm/*`.
+- **Focused border** er unntaket — den bruker ikke critical-farger, men blå/enhanced (samme som Alarm):
+  - Dusk → `Primitives-dusk/Blue/500`
+  - Night → `Primitives-night/Enhanced/400`
+  - Bright → `Primitives-day/Blue/300`
+
+## Semantiske tokens (kodebasen)
+
+| Token                                  |
+| -------------------------------------- |
+| `--critical-enabled-background-color`  |
+| `--critical-enabled-border-color`      |
+| `--critical-hover-background-color`    |
+| `--critical-hover-border-color`        |
+| `--critical-pressed-background-color`  |
+| `--critical-pressed-border-color`      |
+| `--critical-focused-background-color`  |
+| `--critical-focused-border-color`      |
+| `--critical-disabled-background-color` |
+| `--critical-disabled-border-color`     |
+| `--on-critical-color`                  |
+| `--on-critical-active-color`           |
+| `--on-critical-neutral-color`          |
+| `--on-critical-disabled-color`         |
+
+## On-critical mapping per tema
+
+| Token                      | Day                   | Dusk BETA                | Night BETA                        | Bright BETA           |
+| -------------------------- | --------------------- | ------------------------ | --------------------------------- | --------------------- |
+| on-critical-color          | Neutral-inverted/1000 | Neutral/1000             | Neutral-inverted-transparent/1000 | Neutral-inverted/1000 |
+| on-critical-active-color   | Neutral-inverted/1000 | Neutral-transparent/1000 | OnCriticalAlarm/Active-color      | Neutral-inverted/1000 |
+| on-critical-neutral-color  | Critical-alarm/050    | Neutral-transparent/1000 | OnCriticalAlarm/Neutral-color     | Neutral/000           |
+| on-critical-disabled-color | Critical-alarm/200    | Neutral/030              | OnCriticalAlarm/Disabled-color    | Critical-alarm/200    |
+
+Night bruker `Night-config/Styles/OnCriticalAlarm/*` (samme mønster som On-alarm for Night).
+
+## Container-farger
+
+Speiler `Color/Alert/Alarm-container-*` og `Color/Alert/Caution-container-*`, men med Critical-alarm/Notification-primitiver.
+
+| Token                                   | Day                | Dusk BETA          | Night BETA   | Bright BETA        |
+| --------------------------------------- | ------------------ | ------------------ | ------------ | ------------------ |
+| alert-critical-container-background     | Critical-alarm/100 | Critical-alarm/050 | Critical/100 | Critical-alarm/150 |
+| alert-critical-container-border         | Critical-alarm/200 | Critical-alarm/100 | Critical/100 | Critical-alarm/150 |
+| alert-notification-container-background | Notification/050   | Notification/050   | Enhanced/100 | Notification/050   |
+| alert-notification-container-border     | Notification/100   | Notification/100   | Enhanced/100 | Notification/050   |
+
+Night har ingen `Primitives-night/Notification/*` — notification-container bruker `Primitives-night/Enhanced/100`.
+
+| Token                                             |
+| ------------------------------------------------- |
+| `--alert-critical-container-background-color`     |
+| `--alert-critical-container-border-color`         |
+| `--alert-notification-container-background-color` |
+| `--alert-notification-container-border-color`     |
+
+Bruk med `@mixin style style=critical` (PostCSS) eller `@mixin alert-critical` (alert-mixin).

package/src/palettes/manual.css

@@ -0,0 +1,165 @@
+:root[data-obc-theme="day"] {
+  --critical-enabled-background-color: rgb(196, 36, 183);
+  --critical-enabled-border-color: rgb(153, 0, 143);
+  --critical-hover-background-color: rgb(173, 5, 162);
+  --critical-hover-border-color: rgb(153, 0, 143);
+  --critical-pressed-background-color: rgb(153, 0, 143);
+  --critical-pressed-border-color: rgb(153, 0, 143);
+  --critical-focused-background-color: rgb(196, 36, 183);
+  --critical-focused-border-color: rgb(153, 0, 143);
+  --critical-disabled-background-color: rgb(196, 36, 183);
+  --critical-disabled-border-color: rgb(196, 36, 183);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(254, 232, 250);
+  --on-critical-disabled-color: rgb(248, 155, 235);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(254, 207, 246);
+  --alert-critical-container-border-color: rgb(248, 155, 235);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(226, 240, 255);
+  --alert-notification-container-border-color: rgb(195, 223, 255);
+}
+
+:root[data-obc-theme="dusk"] {
+  --critical-enabled-background-color: rgb(189, 40, 190);
+  --critical-enabled-border-color: rgb(206, 65, 207);
+  --critical-hover-background-color: rgb(206, 65, 207);
+  --critical-hover-border-color: rgb(206, 65, 207);
+  --critical-pressed-background-color: rgb(218, 85, 218);
+  --critical-pressed-border-color: rgb(206, 65, 207);
+  --critical-focused-background-color: rgb(189, 40, 190);
+  --critical-focused-border-color: rgb(132, 179, 239);
+  --critical-disabled-background-color: rgb(189, 40, 190);
+  --critical-disabled-border-color: rgb(189, 40, 190);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(255, 255, 255);
+  --on-critical-disabled-color: rgb(38, 38, 38);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(85, 0, 86);
+  --alert-critical-container-border-color: rgb(102, 0, 104);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(0, 35, 123);
+  --alert-notification-container-border-color: rgb(0, 44, 144);
+}
+
+:root[data-obc-theme="night"] {
+  --critical-enabled-background-color: rgb(195, 48, 196);
+  --critical-enabled-border-color: rgb(195, 48, 196);
+  --critical-hover-background-color: rgb(195, 48, 196);
+  --critical-hover-border-color: rgb(224, 100, 224);
+  --critical-pressed-background-color: rgb(181, 30, 182);
+  --critical-pressed-border-color: rgb(224, 100, 224);
+  --critical-focused-background-color: rgb(195, 48, 196);
+  --critical-focused-border-color: rgb(44, 131, 102);
+  --critical-disabled-background-color: rgb(161, 6, 163);
+  --critical-disabled-border-color: rgb(161, 6, 163);
+  --on-critical-color: rgb(0, 0, 0);
+  --on-critical-active-color: rgb(0, 0, 0);
+  --on-critical-neutral-color: rgb(0, 0, 0, 0.699999988079071);
+  --on-critical-disabled-color: rgb(0, 0, 0, 0.30000001192092896);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(59, 0, 60);
+  --alert-critical-container-border-color: rgb(59, 0, 60);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(16, 33, 26);
+  --alert-notification-container-border-color: rgb(16, 33, 26);
+}
+
+:root[data-obc-theme="bright"] {
+  --critical-enabled-background-color: rgb(196, 36, 183);
+  --critical-enabled-border-color: rgb(112, 0, 104);
+  --critical-hover-background-color: rgb(153, 0, 143);
+  --critical-hover-border-color: rgb(112, 0, 104);
+  --critical-pressed-background-color: rgb(112, 0, 104);
+  --critical-pressed-border-color: rgb(112, 0, 104);
+  --critical-focused-background-color: rgb(153, 0, 143);
+  --critical-focused-border-color: rgb(93, 143, 213);
+  --critical-disabled-background-color: rgb(196, 36, 183);
+  --critical-disabled-border-color: rgb(196, 36, 183);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(255, 255, 255);
+  --on-critical-disabled-color: rgb(248, 155, 235);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(252, 184, 242);
+  --alert-critical-container-border-color: rgb(252, 184, 242);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(226, 240, 255);
+  --alert-notification-container-border-color: rgb(226, 240, 255);
+}
+
+@property --critical-blink-on {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --critical-blink-off {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --low-blink-on {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --low-blink-off {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes critical-blink {
+  0% {
+    --critical-blink-on: 1;
+    --critical-blink-off: 0;
+  }
+
+  50% {
+    --critical-blink-on: 0;
+    --critical-blink-off: 1;
+  }
+
+  100% {
+    --critical-blink-on: 1;
+    --critical-blink-off: 0;
+  }
+}
+
+@keyframes low-blink {
+  0% {
+    --low-blink-on: 1;
+    --low-blink-off: 0;
+  }
+
+  50% {
+    --low-blink-on: 0;
+    --low-blink-off: 1;
+  }
+
+  100% {
+    --low-blink-on: 1;
+    --low-blink-off: 0;
+  }
+}
+
+:root {
+  animation:
+    warning-blink 4s infinite,
+    critical-blink 1s infinite,
+    low-blink 8s infinite;
+  animation-timing-function: steps(1);
+}

package/src/types.ts

@@ -9,8 +9,24 @@ export enum AlertType {
   Alarm = 'alarm',
   Warning = 'warning',
   Caution = 'caution',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
+export const ALERT_SEVERITY_PRIORITY = [
+  AlertType.IsaCritical,
+  AlertType.Alarm,
+  AlertType.IsaHigh,
+  AlertType.Warning,
+  AlertType.IsaMedium,
+  AlertType.Caution,
+  AlertType.IsaLow,
+  AlertType.IsaDiagnostic,
+];
+
 export enum AlertCategory {
   a = 'a',
   b = 'b',
@@ -71,11 +87,12 @@ export function isBlocked(alert: Alert) {
   return alert.blocked !== false && alert.blocked !== undefined;
 }
 
-const priorityOrder = [AlertType.Alarm, AlertType.Warning, AlertType.Caution];
-
 export function comparePriorityAlerts(a: Alert, b: Alert) {
   if (a.type !== b.type) {
-    return priorityOrder.indexOf(b.type) - priorityOrder.indexOf(a.type);
+    return (
+      ALERT_SEVERITY_PRIORITY.indexOf(b.type) -
+      ALERT_SEVERITY_PRIORITY.indexOf(a.type)
+    );
   }
 
   if (isActive(a) !== isActive(b)) {