@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.128 → 2.0.0-next.130

package/src/building-blocks/readout-block/readout-block.stories.ts

@@ -5,8 +5,10 @@ import {
   ReadoutBlockVariant,
   ReadoutBlockSize,
   ReadoutBlockDataQuality,
+  ReadoutAdviceCategory,
   ObcTextboxFontWeight,
   ObcTextboxAlignment,
+  ObcTextboxSize,
   ReadoutValueType,
 } from './readout-block.js';
 import './readout-block.js';
@@ -25,6 +27,9 @@ type BlockArgs = {
   value: number | string | null;
   valueType: ReadoutValueType;
   size: ReadoutBlockSize;
+  valueSize: ObcTextboxSize;
+  category: ReadoutAdviceCategory;
+  active: boolean;
   enhanced: boolean;
   weight: ObcTextboxFontWeight;
   hasDegree: boolean;
@@ -56,6 +61,9 @@ function renderBlock(args: Partial<BlockArgs>) {
       .value=${args.value as number | string | null}
       .valueType=${args.valueType ?? ReadoutValueType.number}
       .size=${args.size ?? ReadoutBlockSize.small}
+      .valueSize=${args.valueSize}
+      .category=${args.category ?? ReadoutAdviceCategory.regular}
+      .active=${args.active ?? false}
       .enhanced=${args.enhanced ?? false}
       .weight=${args.weight ?? ObcTextboxFontWeight.regular}
       .hasDegree=${args.hasDegree ?? false}
@@ -716,3 +724,49 @@ export const Alert: Story = {
     </div>
   `,
 };
+
+/**
+ * Advice semantic categories (Figma 6.1 Readout-block-advice). Resting
+ * categories carry a neutral outline marker; `active` swaps in the filled /
+ * status icon: SemiBold + tinted diamond for regular / optimal / eco, the
+ * coloured IEC status icon + active text colour for the alert categories.
+ */
+export const AdviceCategories: Story = {
+  render: () =>
+    renderShowcase(
+      Object.values(ReadoutAdviceCategory).flatMap((category) =>
+        [false, true].map((active) => ({
+          title: `${category}${active ? ' / active' : ''}`,
+          args: {
+            variant: ReadoutBlockVariant.advice,
+            value: 118,
+            size: ReadoutBlockSize.medium,
+            category,
+            active,
+          },
+        }))
+      )
+    ),
+};
+
+/**
+ * The marker icon follows the block's rendered number size, not the readout
+ * tier (Figma 6.1): a large-tier readout whose setpoint is de-emphasised to
+ * `s` carries the 16px arrow, and the emphasised `l` setpoint the 24px one.
+ */
+export const MarkerIconSizes: Story = {
+  render: () =>
+    renderShowcase(
+      [ObcTextboxSize.s, ObcTextboxSize.m, ObcTextboxSize.l].map(
+        (valueSize) => ({
+          title: `large tier / valueSize ${valueSize}`,
+          args: {
+            variant: ReadoutBlockVariant.setpoint,
+            value: 120,
+            size: ReadoutBlockSize.large,
+            valueSize,
+          },
+        })
+      )
+    ),
+};

package/src/building-blocks/readout-block/readout-block.ts

@@ -11,6 +11,15 @@ import {
 } from '../../components/textbox/textbox.js';
 import '../../icons/icon-input-right.js';
 import '../../icons/icon-notification-advice.js';
+import '../../icons/icon-notification-advice-active.js';
+import '../../icons/icon-caution-google.js';
+import '../../icons/icon-caution-color-iec.js';
+import '../../icons/icon-warning-unacknowledged-outlined.js';
+import '../../icons/icon-warning-unacknowledged-iec.js';
+import '../../icons/icon-alarm.js';
+import '../../icons/icon-alarm-unacknowledged-iec.js';
+import '../../icons/icon-running.js';
+import '../../icons/icon-running-color-iec.js';
 import {
   formatNumericValue,
   readoutFormattedInteger,
@@ -72,6 +81,32 @@ export enum ReadoutBlockDataQuality {
   invalid = 'invalid',
 }
 
+/**
+ * Semantic category of an advice block (Figma 6.1 "Readout-block-advice"
+ * Value axis). Drives the default marker icon and — while {@link
+ * ObcReadoutBlock.active} — the triggered styling:
+ * - `regular` / `optimal` / `eco`: the advice diamond; triggered renders the
+ *   filled diamond (tinted enhanced-blue / mint for optimal / eco) and a
+ *   SemiBold number.
+ * - `caution` / `warning` / `alarm` / `running`: the matching neutral outline
+ *   icon; triggered swaps in the filled IEC status icon and the active text
+ *   colour.
+ *
+ * TODO(designer): the optimal / eco triggered tint covers the whole diamond
+ * glyph — the Figma icon tints only the inner plus, which needs a two-tone
+ * icon asset; and the advice "Enhanced" state (indent background chip) is not
+ * implemented yet. Both flagged as "may change" in the 6.1 review.
+ */
+export enum ReadoutAdviceCategory {
+  regular = 'regular',
+  optimal = 'optimal',
+  eco = 'eco',
+  caution = 'caution',
+  warning = 'warning',
+  alarm = 'alarm',
+  running = 'running',
+}
+
 /**
  * Pop-up fade phase for a setpoint block. Driven by the parent's setpoint
  * interaction state machine; only meaningful for `role="setpoint"`.
@@ -195,6 +230,23 @@ export class ObcReadoutBlock extends LitElement {
   @property({type: String}) alignment: ObcTextboxAlignment =
     ObcTextboxAlignment.Right;
 
+  /**
+   * Semantic category of an advice block — picks the default marker icon and
+   * the {@link active} styling. Only meaningful for `variant="advice"`.
+   * @availableWhen variant==advice
+   */
+  @property({type: String}) category: ReadoutAdviceCategory =
+    ReadoutAdviceCategory.regular;
+
+  /**
+   * The advice is triggered: the marker swaps to its filled/status icon and
+   * the number takes the category's triggered styling (SemiBold for
+   * regular/optimal/eco, active text colour for the alert categories). Only
+   * meaningful for `variant="advice"`.
+   * @availableWhen variant==advice
+   */
+  @property({type: Boolean}) active = false;
+
   /** Per-block measurement quality (outline chip). */
   @property({type: String}) dataQuality?: ReadoutBlockDataQuality;
 
@@ -326,7 +378,7 @@ export class ObcReadoutBlock extends LitElement {
     if (this.variant === ReadoutBlockVariant.setpoint) {
       fallback = html`<obi-input-right></obi-input-right>`;
     } else if (this.variant === ReadoutBlockVariant.advice) {
-      fallback = html`<obi-notification-advice></obi-notification-advice>`;
+      fallback = this.adviceFallbackIcon();
     }
     return html`<span class="block-icon" part="block-icon" aria-hidden="true">
       <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
@@ -334,6 +386,51 @@ export class ObcReadoutBlock extends LitElement {
     </span>`;
   }
 
+  /**
+   * The advice marker for the current category / triggered state. Resting
+   * categories carry a neutral outline glyph (tinted via `currentColor`);
+   * triggered alert categories swap to the filled IEC status icon rendered
+   * with `useCssColor`, which selects the icon's token-coloured variant
+   * (alert fill + on-alert glyph, e.g. `--alert-caution-color` +
+   * `--on-caution-active-color`) — without it the same icon is a
+   * single-colour `currentColor` silhouette. This mirrors `obc-alert-icon`.
+   * The resting icons and the advice diamond deliberately stay on
+   * `currentColor`: their css-colour variants hard-code
+   * `--element-active-color`, which would defeat the neutral tint and the
+   * optimal / eco triggered tint applied from CSS.
+   */
+  private adviceFallbackIcon(): TemplateResult {
+    const active = this.active;
+    switch (this.category) {
+      case ReadoutAdviceCategory.caution:
+        return active
+          ? html`<obi-caution-color-iec useCssColor></obi-caution-color-iec>`
+          : html`<obi-caution-google></obi-caution-google>`;
+      case ReadoutAdviceCategory.warning:
+        return active
+          ? html`<obi-warning-unacknowledged-iec
+              useCssColor
+            ></obi-warning-unacknowledged-iec>`
+          : html`<obi-warning-unacknowledged-outlined></obi-warning-unacknowledged-outlined>`;
+      case ReadoutAdviceCategory.alarm:
+        return active
+          ? html`<obi-alarm-unacknowledged-iec
+              useCssColor
+            ></obi-alarm-unacknowledged-iec>`
+          : html`<obi-alarm></obi-alarm>`;
+      case ReadoutAdviceCategory.running:
+        return active
+          ? html`<obi-running-color-iec useCssColor></obi-running-color-iec>`
+          : html`<obi-running></obi-running>`;
+      default:
+        // regular / optimal / eco share the advice diamond; the triggered tint
+        // is applied via CSS on `.block-icon` (see `advice-*` classes).
+        return active
+          ? html`<obi-notification-advice-active></obi-notification-advice-active>`
+          : html`<obi-notification-advice></obi-notification-advice>`;
+    }
+  }
+
   /**
    * A cap-height `°` column whose width scales with the number size. Inherits the
    * block's colour.
@@ -370,6 +467,16 @@ export class ObcReadoutBlock extends LitElement {
 
   override render() {
     const valueSize = this.resolvedValueSize;
+    const isAdvice = this.variant === ReadoutBlockVariant.advice;
+    // Triggered regular/optimal/eco advice renders SemiBold (Figma 6.1); the
+    // alert categories keep the caller's weight and change colour instead.
+    const adviceSemibold =
+      isAdvice &&
+      this.active &&
+      (this.category === ReadoutAdviceCategory.regular ||
+        this.category === ReadoutAdviceCategory.optimal ||
+        this.category === ReadoutAdviceCategory.eco);
+    const weight = adviceSemibold ? ObcTextboxFontWeight.semibold : this.weight;
     const formatOptions = this.numericFormatOptions;
     const isTextMode = this.valueType === ReadoutValueType.text;
     // A missing digit knob makes the reading untrustworthy, so it resolves to
@@ -417,6 +524,9 @@ export class ObcReadoutBlock extends LitElement {
           block: true,
           [`block-${this.variant}`]: true,
           [`size-${this.size}`]: true,
+          [`value-size-${valueSize}`]: true,
+          [`advice-${this.category}`]: isAdvice,
+          'advice-active': isAdvice && this.active,
           'tone-enhanced': this.enhanced,
           touching: this.touching,
           'is-hiding': this.hidePhase === ReadoutBlockHidePhase.hiding,
@@ -431,7 +541,7 @@ export class ObcReadoutBlock extends LitElement {
             class="block-text"
             part="block-text"
             .size=${valueSize}
-            .fontWeight=${this.weight}
+            .fontWeight=${weight}
             .alignment=${this.alignment}
             .tabularNums=${true}
           >