@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.152 → 2.0.0-next.153

package/src/alert-severity.spec.ts

@@ -1,6 +1,17 @@
 import {describe, expect, it} from 'vitest';
-import {AlertFlashPhase, resolveFlashingSpeed} from './alert-severity.js';
-import {AlertType, FlashingSpeed} from './types.js';
+import {
+  AlertFlashPhase,
+  alertCountsLabel,
+  alertTypeLabel,
+  rankAlertCounts,
+  resolveFlashingSpeed,
+} from './alert-severity.js';
+import {
+  ALERT_SEVERITY_PRIORITY,
+  AlertType,
+  FlashingSpeed,
+  type AlertCounts,
+} from './types.js';
 
 describe('resolveFlashingSpeed', () => {
   it.each([
@@ -54,3 +65,71 @@ describe('resolveFlashingSpeed', () => {
     );
   });
 });
+
+describe('rankAlertCounts', () => {
+  it('keeps positive counts, most severe first', () => {
+    expect(
+      rankAlertCounts({
+        countCaution: 6,
+        countLevelDiagnostic: 1,
+        countAlarm: 2,
+        countWarning: 0,
+        countLevelCritical: 1,
+        countLevelLow: -3,
+      })
+    ).toEqual([
+      {type: AlertType.LevelCritical, count: 1},
+      {type: AlertType.Alarm, count: 2},
+      {type: AlertType.Caution, count: 6},
+      {type: AlertType.LevelDiagnostic, count: 1},
+    ]);
+  });
+
+  it('orders every severity by ALERT_SEVERITY_PRIORITY', () => {
+    const one: AlertCounts = {
+      countLevelDiagnostic: 1,
+      countLevelLow: 1,
+      countCaution: 1,
+      countLevelMedium: 1,
+      countWarning: 1,
+      countLevelHigh: 1,
+      countAlarm: 1,
+      countLevelCritical: 1,
+    };
+    expect(rankAlertCounts(one).map((entry) => entry.type)).toEqual(
+      ALERT_SEVERITY_PRIORITY
+    );
+  });
+
+  it('combines into the total typed as the most severe present', () => {
+    expect(
+      rankAlertCounts({countWarning: 4, countCaution: 6, countAlarm: 2}, true)
+    ).toEqual([{type: AlertType.Alarm, count: 12}]);
+  });
+
+  it('returns nothing when nothing is counted', () => {
+    expect(rankAlertCounts({})).toEqual([]);
+    expect(rankAlertCounts({countAlarm: 0}, true)).toEqual([]);
+  });
+});
+
+describe('alertTypeLabel', () => {
+  it('names every severity', () => {
+    for (const type of Object.values(AlertType)) {
+      expect(alertTypeLabel(type)).not.toBe('');
+    }
+    expect(alertTypeLabel(AlertType.LevelHigh)).toBe('High');
+  });
+});
+
+describe('alertCountsLabel', () => {
+  it('lists the ranked counts, then the shelved count', () => {
+    expect(
+      alertCountsLabel({countCaution: 6, countAlarm: 2, countWarning: 4}, 9)
+    ).toBe('2 Alarm, 4 Warning, 6 Caution, 9 Shelved');
+  });
+
+  it('is empty when nothing is counted', () => {
+    expect(alertCountsLabel({})).toBe('');
+  });
+});

package/src/alert-severity.ts

@@ -25,6 +25,8 @@
  *   alarm-style no-ack icon.
  * - Priority: re-exports `ALERT_SEVERITY_PRIORITY`, the ordered severity list
  *   (most → least severe) used to sort alerts.
+ * - Counts: `rankAlertCounts` orders per-severity counts and can combine
+ *   them; `alertTypeLabel` and `alertCountsLabel` build accessible names.
  *
  * Usage:
  * ```ts
@@ -44,10 +46,12 @@
  * );
  * ```
  */
+import {msg} from '@lit/localize';
 import {
   AlertType,
   ALERT_SEVERITY_PRIORITY,
   FlashingSpeed,
+  type AlertCounts,
   type ResolvedFlashingSpeed,
 } from './types.js';
 
@@ -234,3 +238,73 @@ export function usesAlarmNoAckIcon(type: AlertType): boolean {
     AlertType.LevelHigh,
   ].includes(type);
 }
+
+/** One severity and its alert count, as `rankAlertCounts` returns them. */
+export interface RankedAlertCount {
+  type: AlertType;
+  count: number;
+}
+
+const ALERT_COUNT_FIELD: Record<AlertType, keyof AlertCounts> = {
+  [AlertType.Alarm]: 'countAlarm',
+  [AlertType.Warning]: 'countWarning',
+  [AlertType.Caution]: 'countCaution',
+  [AlertType.LevelCritical]: 'countLevelCritical',
+  [AlertType.LevelHigh]: 'countLevelHigh',
+  [AlertType.LevelMedium]: 'countLevelMedium',
+  [AlertType.LevelLow]: 'countLevelLow',
+  [AlertType.LevelDiagnostic]: 'countLevelDiagnostic',
+};
+
+/**
+ * The positive counts, most severe first by `ALERT_SEVERITY_PRIORITY`.
+ * `combine` folds them into one entry: the total, typed as the most severe
+ * category present.
+ */
+export function rankAlertCounts(
+  counts: AlertCounts,
+  combine = false
+): RankedAlertCount[] {
+  const ranked = ALERT_SEVERITY_PRIORITY.map((type) => ({
+    type,
+    count: counts[ALERT_COUNT_FIELD[type]] ?? 0,
+  })).filter((entry) => entry.count > 0);
+  if (!combine || ranked.length === 0) {
+    return ranked;
+  }
+  const total = ranked.reduce((sum, entry) => sum + entry.count, 0);
+  return [{type: ranked[0].type, count: total}];
+}
+
+const ALERT_TYPE_LABEL: Record<AlertType, () => string> = {
+  [AlertType.Alarm]: () => msg('Alarm'),
+  [AlertType.Warning]: () => msg('Warning'),
+  [AlertType.Caution]: () => msg('Caution'),
+  [AlertType.LevelCritical]: () => msg('Critical'),
+  [AlertType.LevelHigh]: () => msg('High'),
+  [AlertType.LevelMedium]: () => msg('Medium'),
+  [AlertType.LevelLow]: () => msg('Low'),
+  [AlertType.LevelDiagnostic]: () => msg('Diagnostic'),
+};
+
+/** Localized severity name, read at render time so a locale switch applies. */
+export function alertTypeLabel(type: AlertType): string {
+  return ALERT_TYPE_LABEL[type]();
+}
+
+/**
+ * Accessible summary of the counts, e.g. "2 Alarm, 4 Warning, 9 Shelved";
+ * empty when nothing is counted.
+ */
+export function alertCountsLabel(
+  counts: AlertCounts,
+  shelvedCount = 0
+): string {
+  const parts = rankAlertCounts(counts).map(
+    ({type, count}) => `${count} ${alertTypeLabel(type)}`
+  );
+  if (shelvedCount > 0) {
+    parts.push(`${shelvedCount} ${msg('Shelved')}`);
+  }
+  return parts.join(', ');
+}

package/src/components/alert-button/alert-button.css

@@ -16,8 +16,7 @@
     padding-top: var(--app-components-alert-button-tall-padding-vertical);
     padding-bottom: var(--app-components-alert-button-tall-padding-vertical);
 
-    & .visible-wrapper,
-    & .blink {
+    & .silence-button .visible-wrapper {
       height: 100%;
     }
   }
@@ -27,6 +26,11 @@
   }
 }
 
+obc-alert-button-item {
+  flex-grow: 1; /* the bell takes the width the silence button leaves */
+  flex-basis: var(--global-size-spacing-touch-target-min);
+}
+
 button {
   appearance: none;
   background: none;
@@ -46,199 +50,6 @@ button {
   height: var(--global-size-spacing-icon-icon-size-regular);
 }
 
-.alert-button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  .type-flat & {
-    @mixin style style=flat visibleWrapperClass=.visible-wrapper;
-    @mixin style style=flat visibleWrapperClass=.blink;
-  }
-
-  .type-normal & .visible-wrapper,
-  .type-enhanced & .visible-wrapper {
-    width: 100%;
-  }
-
-  .type-normal & {
-    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
-    @mixin style style=normal visibleWrapperClass=.blink;
-  }
-
-  .type-enhanced.alert-type-alarm & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-alarm-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-warning & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=warning visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-warning-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-caution & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=caution visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-caution-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-level-critical & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=critical visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-critical-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-level-high & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-alarm-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-level-medium & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=warning visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-warning-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-level-low & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=caution visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-caution-active-color);
-    }
-  }
-
-  .type-enhanced.alert-type-level-diagnostic & {
-    @mixin style style=normal visibleWrapperClass=.blink;
-    @mixin style style=notification visibleWrapperClass=.visible-wrapper;
-    & .visible-wrapper {
-      color: var(--on-notification-active-color);
-    }
-  }
-
-  & .visible-wrapper,
-  & .blink {
-    border-radius: var(--ui-components-button-border-radius-top-left)
-      var(--ui-components-button-border-radius-top-right)
-      var(--ui-components-button-border-radius-bottom-right)
-      var(--ui-components-button-border-radius-bottom-left);
-    height: var(--ui-components-icon-button-visual-target-size);
-    min-width: var(--ui-components-icon-button-visual-target-size);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--on-normal-neutral-color);
-    @mixin font-button;
-
-    .has-silence & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .type-flat & .visible-wrapper {
-    color: var(--on-flat-neutral-color);
-  }
-
-  & .blink {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-
-    .type-flat & {
-      width: min-content;
-    }
-  }
-}
-
-.flash-fast .alert-button {
-  .visible-wrapper {
-    opacity: var(--flash-fast-on);
-  }
-
-  .blink {
-    opacity: var(--flash-fast-off);
-  }
-}
-
-.flash-slow .alert-button {
-  .visible-wrapper {
-    opacity: var(--flash-slow-on);
-  }
-
-  .blink {
-    opacity: var(--flash-slow-off);
-  }
-}
-
-.flash-very-slow .alert-button {
-  .visible-wrapper {
-    opacity: var(--flash-very-slow-on);
-  }
-
-  .blink {
-    opacity: var(--flash-very-slow-off);
-  }
-}
-
-.counter .alert-button .visible-wrapper,
-.counter .alert-button .blink {
-  padding: 0px var(--ui-components-button-padding-horizontal);
-  gap: var(--app-components-alert-button-item-counter-spacing);
-}
-
-.alert-type-alarm {
-  --icon-fill: var(--alarm-enabled-background-color);
-  --icon-stroke: var(--alarm-pressed-border-color);
-}
-
-.alert-type-warning {
-  --icon-fill: var(--warning-enabled-background-color);
-  --icon-stroke: var(--warning-pressed-border-color);
-}
-
-.alert-type-caution,
-.alert-type-level-low {
-  --icon-fill: var(--caution-enabled-background-color);
-  --icon-stroke: var(--caution-pressed-border-color);
-}
-
-.alert-type-level-critical {
-  --icon-fill: var(--alert-critical-color);
-  --icon-stroke: var(--alert-critical-outline-color);
-}
-
-.alert-type-level-high {
-  --icon-fill: var(--alarm-enabled-background-color);
-  --icon-stroke: var(--alarm-pressed-border-color);
-}
-
-.alert-type-level-medium {
-  --icon-fill: var(--warning-enabled-background-color);
-  --icon-stroke: var(--warning-pressed-border-color);
-}
-
-.alert-type-level-diagnostic {
-  --icon-fill: var(--alert-diagnostic-color);
-  --icon-stroke: var(--alert-diagnostic-outline-color);
-}
-
 .silence-button {
   @mixin style style=normal visibleWrapperClass=.visible-wrapper;
   color: var(--on-normal-neutral-color);
@@ -248,7 +59,7 @@ button {
     height: var(--ui-components-icon-button-visual-target-size);
     border-radius: 0 var(--ui-components-button-border-radius-top-right)
       var(--ui-components-button-border-radius-bottom-right) 0;
-    border-left: 0;
+    border-left: 0; /* the item's right border is the divider */
     display: flex;
     justify-content: center;
     align-items: center;

package/src/components/alert-button/alert-button.spec.ts

@@ -1,99 +1,150 @@
 import {describe, expect, it} from 'vitest';
-import './alert-button.js';
-import {ObcAlertButton} from './alert-button.js';
 import {render} from 'vitest-browser-lit';
-import {html} from 'lit';
+import {html, type TemplateResult} from 'lit';
+import './alert-button.js';
+import {ObcAlertButton, ObcAlertButtonType} from './alert-button.js';
+import type {ObcAlertButtonItem} from '../alert-button-item/alert-button-item.js';
 import {AlertType, FlashingSpeed} from '../../types.js';
 
-function durations(el: HTMLElement): number[] {
-  return el
-    .getAnimations()
-    .map((a) => (a.effect as KeyframeEffect).getTiming().duration as number);
+async function setup(
+  template: TemplateResult = html`<obc-alert-button
+    .nAlerts=${3}
+    .alertType=${AlertType.Alarm}
+    counter
+    blinking
+  ></obc-alert-button>`
+) {
+  const screen = render(template);
+  const el = screen.container.querySelector(
+    'obc-alert-button'
+  ) as ObcAlertButton;
+  await el.updateComplete;
+  const item = el.shadowRoot!.querySelector(
+    'obc-alert-button-item'
+  ) as ObcAlertButtonItem;
+  await item.updateComplete;
+  return {el, item};
 }
 
-describe('obc-alert-button flashing lifecycle', () => {
-  async function setup(
-    props: Partial<
-      Pick<
-        ObcAlertButton,
-        'nAlerts' | 'alertType' | 'blinking' | 'flashingSpeed'
-      >
-    > = {}
-  ) {
-    const screen = render(
+describe('obc-alert-button', () => {
+  it('forwards the alert state to its item', async () => {
+    const {item} = await setup(
       html`<obc-alert-button
-        .nAlerts=${props.nAlerts ?? 1}
-        .alertType=${props.alertType ?? AlertType.Alarm}
-        .blinking=${props.blinking ?? true}
-        .flashingSpeed=${props.flashingSpeed ?? FlashingSpeed.Default}
+        .nAlerts=${3}
+        .alertType=${AlertType.Warning}
+        .type=${ObcAlertButtonType.Enhanced}
+        .flashingSpeed=${FlashingSpeed.Slow}
+        counter
+        blinking
+        large
       ></obc-alert-button>`
     );
-    const el = screen.container.querySelector(
-      'obc-alert-button'
-    ) as ObcAlertButton;
-    await el.updateComplete;
-    return el;
-  }
 
-  it('flashes fast for a blinking alarm button with alerts', async () => {
-    const el = await setup();
-
-    expect(durations(el)).toEqual([800]);
-    expect(el.shadowRoot!.querySelector('.wrapper.flash-fast')).not.toBeNull();
+    expect([
+      item.type,
+      item.alertType,
+      item.nAlerts,
+      item.counter,
+      item.blinking,
+      item.flashingSpeed,
+      item.fillHeight,
+    ]).toEqual([
+      ObcAlertButtonType.Enhanced,
+      AlertType.Warning,
+      3,
+      true,
+      true,
+      FlashingSpeed.Slow,
+      true,
+    ]);
   });
 
-  it('flashes slow for a warning and never for caution', async () => {
-    expect(durations(await setup({alertType: AlertType.Warning}))).toEqual([
-      1600,
+  it('forwards the global counter and drops it in flat mode', async () => {
+    const counts = {countAlarm: 1, countWarning: 10, countCaution: 15};
+    const {el, item} = await setup(
+      html`<obc-alert-button
+        globalCounter
+        .nAlerts=${26}
+        .counts=${counts}
+        .shelvedCount=${9}
+      ></obc-alert-button>`
+    );
+    expect([item.globalCounter, item.counts, item.shelvedCount]).toEqual([
+      true,
+      counts,
+      9,
     ]);
-    expect(durations(await setup({alertType: AlertType.Caution}))).toEqual([]);
-  });
 
-  it('keeps blinking as the gate', async () => {
-    expect(durations(await setup({blinking: false}))).toEqual([]);
-    expect(durations(await setup({nAlerts: 0}))).toEqual([]);
-  });
+    el.flatMaxBreakpointPx = window.innerWidth + 1;
+    await el.updateComplete;
+    await item.updateComplete;
 
-  it('honours an explicit flashingSpeed', async () => {
-    expect(
-      durations(await setup({flashingSpeed: FlashingSpeed.VerySlow}))
-    ).toEqual([3200]);
-    expect(
-      durations(await setup({flashingSpeed: FlashingSpeed.Fixed}))
-    ).toEqual([]);
+    expect([item.type, item.globalCounter]).toEqual([
+      ObcAlertButtonType.Flat,
+      false,
+    ]);
   });
 
-  it('cancels the animation on disconnect', async () => {
-    const el = await setup();
-
-    el.parentElement!.removeChild(el);
+  it('passes the flat breakpoint on as the item type', async () => {
+    const {item} = await setup(
+      html`<obc-alert-button
+        .nAlerts=${3}
+        .flatMaxBreakpointPx=${window.innerWidth + 1}
+      ></obc-alert-button>`
+    );
 
-    expect(el.getAnimations()).toHaveLength(0);
+    expect(item.type).toBe(ObcAlertButtonType.Flat);
   });
 
-  it('resumes flashing after disconnect and reconnect', async () => {
-    const el = await setup();
-    const parent = el.parentElement!;
-
-    parent.removeChild(el);
+  it('flashes through its item', async () => {
+    const {el, item} = await setup();
+    expect(item.getAnimations()).toHaveLength(1);
     expect(el.getAnimations()).toHaveLength(0);
 
-    // Reconnect without touching any property. firstUpdated() will not run
-    // again, so this only passes if the controller re-syncs on connect.
-    parent.appendChild(el);
+    el.blinking = false;
     await el.updateComplete;
+    await item.updateComplete;
 
-    expect(durations(el)).toEqual([800]);
+    expect(item.getAnimations()).toHaveLength(0);
   });
 
-  it('does not accumulate animations across repeated updates', async () => {
-    const el = await setup();
+  it('joins the item to the silence button', async () => {
+    const {el, item} = await setup(
+      html`<obc-alert-button
+        .nAlerts=${3}
+        showSilenceButton
+      ></obc-alert-button>`
+    );
+    expect(item.hasAttribute('data-group-item-not-last')).toBe(true);
 
-    el.large = true;
-    await el.updateComplete;
-    el.counter = true;
+    el.showSilenceButton = false;
     await el.updateComplete;
 
-    expect(el.getAnimations()).toHaveLength(1);
+    expect(item.hasAttribute('data-group-item-not-last')).toBe(false);
+  });
+
+  it('fires click-alert when the item is clicked', async () => {
+    const {el, item} = await setup();
+    let fired = 0;
+    el.addEventListener('click-alert', () => fired++);
+
+    item.shadowRoot!.querySelector('button')!.click();
+
+    expect(fired).toBe(1);
+  });
+
+  it('names the silence button', async () => {
+    const {el} = await setup(
+      html`<obc-alert-button
+        .nAlerts=${3}
+        showSilenceButton
+      ></obc-alert-button>`
+    );
+
+    expect(
+      el
+        .shadowRoot!.querySelector('.silence-button')!
+        .getAttribute('aria-label')
+    ).toBe('Silence');
   });
 });

package/src/components/alert-button/alert-button.stories.ts

@@ -31,6 +31,8 @@ const meta: Meta<typeof ObcAlertButton> = {
       options: Object.values(FlashingSpeed),
       control: {type: 'select'},
     },
+    counts: {control: {type: 'object'}},
+    shelvedCount: {control: {type: 'number', min: 0}},
     width: {control: {type: 'range', min: 64, max: 1028, step: 1}},
   },
   decorators: [widthDecorator],
@@ -254,3 +256,25 @@ export const NormalLevelDiagnostic: Story = {
     nAlerts: 1,
   },
 };
+
+const GLOBAL_COUNTS = {countAlarm: 1, countWarning: 10, countCaution: 15};
+
+export const GlobalCounter: Story = {
+  args: {
+    globalCounter: true,
+    nAlerts: 26,
+    counts: GLOBAL_COUNTS,
+    width: 168,
+  },
+};
+
+export const GlobalCounterShelvedSilence: Story = {
+  args: {
+    globalCounter: true,
+    nAlerts: 26,
+    counts: GLOBAL_COUNTS,
+    shelvedCount: 9,
+    showSilenceButton: true,
+    width: 244,
+  },
+};