@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.137 → 2.0.0-next.138

package/src/components/alert-subsystem-counter/alert-subsystem-counter.stories.ts

@@ -0,0 +1,308 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html, nothing, type TemplateResult} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {
+  ObcAlertSubsystemCounter,
+  ObcAlertSubsystemCounterOrientation,
+} from './alert-subsystem-counter.js';
+import './alert-subsystem-counter.js';
+import '../badge/badge.js';
+import {BadgeType, BadgeVariant} from '../badge/badge.js';
+import '../../icons/icon-placeholder.js';
+
+const badges = html`
+  <obc-badge slot="badges" size="large" type="alarm" .number=${9}></obc-badge>
+  <obc-badge slot="badges" size="large" type="warning" .number=${4}></obc-badge>
+  <obc-badge slot="badges" size="large" type="caution" .number=${2}></obc-badge>
+`;
+
+const levelBadges = html`
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelCritical}
+    .number=${1}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelHigh}
+    .number=${9}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelMedium}
+    .number=${4}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelLow}
+    .number=${2}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type=${BadgeType.levelDiagnostic}
+    .number=${7}
+  ></obc-badge>
+`;
+
+const iconBadges = html`
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="alarm"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${9}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="warning"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${4}
+  ></obc-badge>
+  <obc-badge
+    slot="badges"
+    size="large"
+    type="caution"
+    variant=${BadgeVariant.flat}
+    showIcon
+    .number=${2}
+  ></obc-badge>
+`;
+
+type CounterArgs = Pick<
+  ObcAlertSubsystemCounter,
+  'label' | 'orientation' | 'hasAlert' | 'emptyText'
+>;
+
+// `emptyText` is gated on `hasAlert==false`, so Storybook drops it from the
+// args while `hasAlert` is on; attribute bindings with `ifDefined` leave the
+// element's own default in place instead of writing `undefined` into it.
+const renderCounter = (
+  args: CounterArgs,
+  options: {width?: string; withIcon?: boolean; badges?: TemplateResult} = {}
+) =>
+  html`<div style="width:${options.width ?? '191px'}">
+    <obc-alert-subsystem-counter
+      label=${ifDefined(args.label)}
+      .orientation=${args.orientation}
+      .hasAlert=${args.hasAlert}
+      emptytext=${ifDefined(args.emptyText)}
+    >
+      ${options.withIcon === false
+        ? nothing
+        : html`<obi-placeholder slot="icon"></obi-placeholder>`}
+      ${options.badges ?? badges}
+    </obc-alert-subsystem-counter>
+  </div>`;
+
+const meta: Meta<typeof ObcAlertSubsystemCounter> = {
+  title: 'Application Components/Alerts/Alert Subsystem Counter',
+  tags: ['6.0', 'beta'],
+  component: 'obc-alert-subsystem-counter',
+  args: {
+    label: 'Label',
+    orientation: ObcAlertSubsystemCounterOrientation.Horizontal,
+    hasAlert: true,
+    emptyText: 'No alerts',
+  },
+  argTypes: {
+    orientation: {
+      control: {type: 'inline-radio'},
+      options: Object.values(ObcAlertSubsystemCounterOrientation),
+    },
+    hasAlert: {control: {type: 'boolean'}},
+    label: {control: {type: 'text'}},
+    emptyText: {control: {type: 'text'}},
+  },
+  render: (args) => renderCounter(args),
+} satisfies Meta<ObcAlertSubsystemCounter>;
+
+export default meta;
+type Story = StoryObj<ObcAlertSubsystemCounter>;
+
+export const Default: Story = {};
+
+export const Abbreviation: Story = {
+  args: {label: 'ABC'},
+  render: (args) => renderCounter(args, {width: '172px'}),
+};
+
+export const NoAlerts: Story = {
+  args: {hasAlert: false},
+};
+
+export const Vertical: Story = {
+  args: {orientation: ObcAlertSubsystemCounterOrientation.Vertical},
+};
+
+export const VerticalNoAlerts: Story = {
+  args: {
+    orientation: ObcAlertSubsystemCounterOrientation.Vertical,
+    hasAlert: false,
+  },
+};
+
+export const AbbreviationVertical: Story = {
+  args: {
+    label: 'ABC',
+    orientation: ObcAlertSubsystemCounterOrientation.Vertical,
+  },
+  render: (args) => renderCounter(args, {width: 'fit-content'}),
+};
+
+export const WithoutIcon: Story = {
+  render: (args) => renderCounter(args, {withIcon: false}),
+};
+
+export const LongLabel: Story = {
+  args: {label: 'Auxiliary cooling water system'},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The label is the only element that gives way: it truncates with an ellipsis while the icon and badges keep their size.',
+      },
+    },
+  },
+};
+
+export const LevelSeverities: Story = {
+  render: (args) =>
+    renderCounter(args, {width: 'fit-content', badges: levelBadges}),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The badge `type` accepts the whole `AlertType` vocabulary, including the `level-*` family. Slot them highest severity first, in `ALERT_SEVERITY_PRIORITY` order.',
+      },
+    },
+  },
+};
+
+export const WithBadgeIcons: Story = {
+  render: (args) =>
+    renderCounter(args, {width: 'fit-content', badges: iconBadges}),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Any `obc-badge` configuration works in the `badges` slot — here the `flat` variant with `showIcon` so each count carries its severity symbol.',
+      },
+    },
+  },
+};
+
+type OverviewEntry = {
+  label: string;
+  hasAlert: boolean;
+  badges?: TemplateResult;
+  withIcon?: boolean;
+};
+
+const overview: OverviewEntry[] = [
+  {
+    label: 'Propulsion',
+    hasAlert: true,
+    badges: html`<obc-badge
+        slot="badges"
+        size="large"
+        type="alarm"
+        .number=${2}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type="warning"
+        .number=${1}
+      ></obc-badge>`,
+  },
+  {label: 'Navigation', hasAlert: false},
+  {
+    label: 'Power',
+    hasAlert: true,
+    badges: html`<obc-badge
+      slot="badges"
+      size="large"
+      type="caution"
+      .number=${3}
+    ></obc-badge>`,
+  },
+  {
+    label: 'HVAC',
+    hasAlert: true,
+    badges: html`<obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelHigh}
+        .number=${9}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelMedium}
+        .number=${4}
+      ></obc-badge>
+      <obc-badge
+        slot="badges"
+        size="large"
+        type=${BadgeType.levelLow}
+        .number=${2}
+      ></obc-badge>`,
+  },
+  {label: 'Cargo', hasAlert: false, withIcon: false},
+  {
+    label: 'Fire detection',
+    hasAlert: true,
+    withIcon: false,
+    badges: html`<obc-badge
+      slot="badges"
+      size="large"
+      type="alarm"
+      .number=${12}
+    ></obc-badge>`,
+  },
+];
+
+export const Overview: Story = {
+  render: (args) =>
+    html`<div
+      style="display:grid;grid-template-columns:repeat(2, 240px);gap:8px"
+    >
+      ${overview.map((entry) =>
+        renderCounter(
+          {...args, label: entry.label, hasAlert: entry.hasAlert},
+          {width: '240px', withIcon: entry.withIcon, badges: entry.badges}
+        )
+      )}
+    </div>`,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A status overview composes one counter per subsystem in a grid. Counters with and without alerts, with and without icons, and with different badge families share one row height.',
+      },
+    },
+  },
+};
+
+export const OverviewVertical: Story = {
+  args: {orientation: ObcAlertSubsystemCounterOrientation.Vertical},
+  render: (args) =>
+    html`<div
+      style="display:grid;grid-template-columns:repeat(3, 120px);gap:8px;align-items:stretch"
+    >
+      ${overview.map((entry) =>
+        renderCounter(
+          {...args, label: entry.label, hasAlert: entry.hasAlert},
+          {width: '120px', withIcon: entry.withIcon, badges: entry.badges}
+        )
+      )}
+    </div>`,
+};

package/src/components/alert-subsystem-counter/alert-subsystem-counter.ts

@@ -0,0 +1,137 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './alert-subsystem-counter.css?inline';
+import {customElement} from '../../decorator.js';
+
+/**
+ * `ObcAlertSubsystemCounterOrientation` – Layout direction for the counter.
+ *
+ * - `horizontal`: Icon, label, and badges sit in a single row.
+ * - `vertical`: Badges (or empty text) sit on their own line below the label.
+ */
+export enum ObcAlertSubsystemCounterOrientation {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+}
+
+/**
+ * `<obc-alert-subsystem-counter>` – A framed summary of a subsystem's alert
+ * counts: a leading icon, a label, and a trailing set of slotted count badges.
+ *
+ * When there are no active alerts it shows a muted label and an empty-state
+ * message instead of the badges. The count badges themselves are supplied by
+ * the consumer as slotted `obc-badge` elements; this component provides only
+ * the frame, layout, label, and empty state.
+ *
+ * ---
+ *
+ * ### Features
+ * - **Orientation:** `horizontal` (single row) or `vertical` (badges on a line
+ *   below the label).
+ * - **Alert state:** `hasAlert` toggles between an active (bold label, badges)
+ *   and an inactive (muted label, empty text) presentation.
+ * - **Freeform label:** Pass a full title or an abbreviation — the label is
+ *   plain text decided by the caller and truncates with an ellipsis.
+ * - **Configurable empty text:** Customize the message shown when there are no
+ *   alerts via `emptyText`.
+ * - **Optional leading icon:** Provide an icon through the `icon` slot; omit it
+ *   and the leading box collapses with no empty gap.
+ *
+ * ---
+ *
+ * ### Usage Guidelines
+ * - Use this component to give an at-a-glance count of outstanding alerts for a
+ *   single subsystem, grouped by severity.
+ * - Provide one slotted badge per severity in the `badges` slot, typically
+ *   `<obc-badge size="large">` with a severity `type` and a `number`. The
+ *   badge `type` values are the same severity vocabulary as `AlertType`
+ *   (`alarm`, `warning`, `caution` and the `level-*` family); order them
+ *   highest severity first, as `ALERT_SEVERITY_PRIORITY` does.
+ * - Set `hasAlert` to `false` to present the resolved/clear state; the badges
+ *   are then not rendered and `emptyText` is shown. The component does not
+ *   derive the state from the slotted badges — the consumer owns it.
+ * - Choose `vertical` orientation in narrow containers where the badges do not
+ *   fit beside the label.
+ * - The counter is display-only: it renders no button and fires no events. For
+ *   a clickable subsystem entry with badges, see `obc-tree-navigation-item`
+ *   (`alertBadges`) or `obc-integration-fleet-button` (`alerts`).
+ *
+ * ---
+ *
+ * ### Slots
+ *
+ * | Slot Name | Renders When...        | Purpose                                            |
+ * |-----------|------------------------|----------------------------------------------------|
+ * | `icon`    | The slot has content   | Leading 24px icon (e.g. `<obi-placeholder>`).      |
+ * | `badges`  | `hasAlert` is true     | Count badges, one per severity (`<obc-badge>`).    |
+ *
+ * ---
+ *
+ * ### Example
+ *
+ * ```html
+ * <obc-alert-subsystem-counter label="Label" hasAlert>
+ *   <obi-placeholder slot="icon"></obi-placeholder>
+ *   <obc-badge slot="badges" size="large" type="alarm" .number=${9}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="warning" .number=${4}></obc-badge>
+ *   <obc-badge slot="badges" size="large" type="caution" .number=${2}></obc-badge>
+ * </obc-alert-subsystem-counter>
+ * ```
+ *
+ * @property label - The subsystem label. Pass a full title or an abbreviation as plain text.
+ * @property orientation - Layout direction: `horizontal` (default) keeps icon, label and badges in one row; `vertical` moves the badges (or empty text) to a line below the label.
+ * @property hasAlert - Whether the subsystem has active alerts. `true` shows the label bold and renders the `badges` slot; `false` mutes the label and shows `emptyText` instead of the badges.
+ * @property emptyText - Text shown in the trailing area when `hasAlert` is `false`.
+ * @availableWhen emptyText hasAlert==false
+ * @slot icon - Optional leading 24px icon.
+ * @slot badges - Count badges shown when `hasAlert` is true.
+ * @beta
+ */
+@customElement('obc-alert-subsystem-counter')
+export class ObcAlertSubsystemCounter extends LitElement {
+  @property({type: String}) label = '';
+  @property({type: String}) orientation: ObcAlertSubsystemCounterOrientation =
+    ObcAlertSubsystemCounterOrientation.Horizontal;
+  @property({type: Boolean}) hasAlert = false;
+  @property({type: String}) emptyText = 'No alerts';
+
+  @state() private hasIcon = false;
+
+  private handleIconSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasIcon = slot.assignedNodes({flatten: true}).length > 0;
+  }
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({
+          frame: true,
+          ['orientation-' + this.orientation]: true,
+          'has-alert': this.hasAlert,
+        })}
+      >
+        <div class="leading-container">
+          <div class=${classMap({icon: true, 'no-icon': !this.hasIcon})}>
+            <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+          </div>
+          <div class="label">${this.label}</div>
+        </div>
+        <div class="trailing-container">
+          ${this.hasAlert
+            ? html`<slot name="badges" class="badges"></slot>`
+            : html`<span class="empty">${this.emptyText}</span>`}
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-alert-subsystem-counter': ObcAlertSubsystemCounter;
+  }
+}