@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.155 → 2.0.0-next.156

package/src/automation/transmitter-button/transmitter-button.css

@@ -11,7 +11,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: fit-content;
+  width: 100%; /* follows the host: hugs by default, fills a stretched grid cell */
   padding: 0;
   appearance: none;
   background: none;
@@ -21,52 +21,23 @@
   @mixin style style=normal visibleWrapperClass=.visible-wrapper;
 }
 
+/* Figma draws the 1 px stroke inside its 4 / 2 px padding, so the padding
+   gives the border back and the chip stays 24 px high. */
 .visible-wrapper {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 4px;
+  padding: 1px 3px;
   border: 1px solid var(--normal-enabled-border-color);
   border-radius: 4px;
 }
 
-.value-container {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 0 2px;
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.unit {
-  @mixin font-instrument-unit;
-  align-self: flex-end;
-  color: var(--element-neutral-color);
-}
-
-.size-regular .icon ::slotted(*) {
-  width: 16px;
-  height: 16px;
-}
-
-.size-medium .icon ::slotted(*) {
-  width: 20px;
-  height: 20px;
-}
-
-.size-large .icon ::slotted(*) {
-  width: 24px;
-  height: 24px;
+obc-readout-list-item {
+  width: auto; /* the list item fills a row by default; hugging lets a stretched chip centre the reading */
 }
 
 .size-medium .visible-wrapper:not(.tag),
 .size-large .visible-wrapper:not(.tag) {
-  padding: 4px 8px;
+  padding: 3px 7px;
   border-radius: 6px;
 }
 
@@ -81,3 +52,7 @@
   @mixin font-instrument-value-regular-neutral;
   color: var(--element-neutral-color);
 }
+
+.visually-hidden {
+  @mixin visually-hidden;
+}

package/src/automation/transmitter-button/transmitter-button.stories.ts

@@ -16,11 +16,12 @@ const meta: Meta<typeof ObcTransmitterButton> = {
     variant: TransmitterButtonVariant.value,
     size: TransmitterButtonSize.regular,
     value: 12.3,
-    unit: '°C',
+    unit: 'C',
     fractionDigits: 1,
     maxDigits: 0,
     hintedZeros: false,
     hasSignSpacer: false,
+    hasDegree: true,
     hasIcon: false,
     hasAdvice: false,
     adviceValue: 123,
@@ -81,6 +82,7 @@ function renderComponent(args: ObcTransmitterButton) {
       .maxDigits=${args.maxDigits}
       .hintedZeros=${args.hintedZeros}
       .hasSignSpacer=${args.hasSignSpacer}
+      .hasDegree=${args.hasDegree}
       .hasIcon=${args.hasIcon}
       .hasAdvice=${args.hasAdvice}
       .adviceValue=${args.adviceValue}

package/src/automation/transmitter-button/transmitter-button.ts

@@ -3,11 +3,8 @@ import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import componentStyle from './transmitter-button.css?inline';
 import {customElement} from '../../decorator.js';
-import '../../building-blocks/readout-block/readout-block.js';
-import {
-  ReadoutBlockSize,
-  ReadoutBlockVariant,
-} from '../../building-blocks/readout-block/readout-block.js';
+import '../../navigation-instruments/readout-list-item/readout-list-item.js';
+import {ReadoutListItemSize} from '../../navigation-instruments/readout-list-item/readout-list-item.js';
 
 export enum TransmitterButtonVariant {
   value = 'value',
@@ -20,31 +17,31 @@ export enum TransmitterButtonSize {
   large = 'large',
 }
 
-const readoutSizeBySize: Record<TransmitterButtonSize, ReadoutBlockSize> = {
-  [TransmitterButtonSize.regular]: ReadoutBlockSize.small,
-  [TransmitterButtonSize.medium]: ReadoutBlockSize.medium,
-  [TransmitterButtonSize.large]: ReadoutBlockSize.large,
+const readoutSizeBySize: Record<TransmitterButtonSize, ReadoutListItemSize> = {
+  [TransmitterButtonSize.regular]: ReadoutListItemSize.small,
+  [TransmitterButtonSize.medium]: ReadoutListItemSize.medium,
+  [TransmitterButtonSize.large]: ReadoutListItemSize.large,
 };
 
 /**
- * `<obc-transmitter-button>` – The pressable readout chip used as the core of a
- * transmitter on a process diagram.
+ * `<obc-transmitter-button>` – The pressable readout chip at the core of a
+ * transmitter: a bordered button around one reading.
  *
- * The value content (leading icon, optional advice and setpoint segments,
- * value, unit) is laid out inline. The value, advice and setpoint segments all
- * share one numeric format, so they support fixed-width values and muted
- * leading zeros identically. The leading icon is slotted so the consumer
- * provides the type-specific content.
+ * The reading is a label-less `<obc-readout-list-item>` (the Figma "automation
+ * value"): leading icon, optional advice and setpoint, value, optional degree
+ * and unit, all rendered by the readout family. The leading icon is slotted so
+ * the consumer provides the type-specific content.
  *
  * ### Features / Variants
- * - **`value`** – white, bordered box showing an icon, value and unit. Opt into a
- *   leading advice segment with `hasAdvice`/`adviceValue` and a setpoint segment
- *   with `hasSetPoint`/`setpointValue`.
+ * - **`value`** – bordered chip showing an icon, value and unit. Opt into a
+ *   leading advice segment with `hasAdvice`/`adviceValue`, a setpoint segment
+ *   with `hasSetPoint`/`setpointValue`, and a degree column before the unit
+ *   with `hasDegree`.
  * - **`tag`** – a static rounded pill showing a short identifier (e.g. `TT`)
  *   from the `label` property, with no live value.
- * - **`size`** – `regular`, `medium` or `large`, scaling the value text, the icon
- *   glyph and the advice/setpoint segments. The unit stays at a fixed size across
- *   all sizes.
+ * - **`size`** – `regular`, `medium` or `large`, the list item's `small`,
+ *   `medium` and `large` tiers: the value text, the icon and the advice/setpoint
+ *   segments scale, the unit stays extra small.
  * - **Formatting** – `fractionDigits` sets the decimal precision, `maxDigits`
  *   reserves a number of integer digits, and `hintedZeros` renders the reserved
  *   leading positions as muted zeros (e.g. `0012.3`). The sign never consumes
@@ -57,9 +54,15 @@ const readoutSizeBySize: Record<TransmitterButtonSize, ReadoutBlockSize> = {
  *   dashes fill the whole reserved width (e.g. `---.-`).
  *
  * ### Usage Guidelines
- * Use as a building block for `<obc-transmitter>`; it is the part that carries
- * the measured value or the tag identifier. Slot in the type-specific icon; the
- * advice and setpoint segments are value-driven and read-only.
+ * Use as a building block for `<obc-transmitter>` and `<obc-transmitter-stack>`;
+ * it is the part that carries the measured value or the tag identifier. Slot in
+ * the type-specific icon; the advice and setpoint segments are value-driven and
+ * read-only.
+ *
+ * **TODO(designer):** the hit area is the visible chip, 24 px high at `regular`:
+ * at the WCAG 2.5.8 floor of 24 px, below the 48 px touch-target token. A
+ * 48 px target would overlap the id tag, the leader line and neighbouring
+ * `<obc-transmitter-stack>` segments, so the size needs a design decision.
  *
  * ### Slots
  * | Slot Name | Conditions                    | Purpose                        |
@@ -69,9 +72,12 @@ const readoutSizeBySize: Record<TransmitterButtonSize, ReadoutBlockSize> = {
  * @property maxDigits - Integer digits to reserve / hint (independent of `fractionDigits`).
  * @property hasSignSpacer - Reserve a minus-sign column on every segment, filled by the real sign
  *   only while a value is negative, so the width does not change across zero.
+ * @property hasDegree - Show a degree column between the value and the unit (e.g. `12.3°` then `C`).
  * @property adviceValue - Advisory value shown in the leading advice segment when `hasAdvice`.
  * @property setpointValue - Target value shown in the setpoint segment when `hasSetPoint`.
  * @property label - Short tag identifier shown in the `tag` variant (e.g. `TT`).
+ * @property idTag - Identifier appended to the button's accessible name only (e.g. `#0001`); the
+ *   parent transmitter draws the visible tag outside the button, where it cannot join the name.
  * @slot icon - Leading icon beside the value.
  *
  * @experimental
@@ -90,6 +96,7 @@ export class ObcTransmitterButton extends LitElement {
 
   @property({type: Boolean}) hintedZeros = false;
   @property({type: Boolean}) hasSignSpacer = false;
+  @property({type: Boolean}) hasDegree = false;
   @property({type: Boolean}) hasIcon = false;
   @property({type: Boolean}) hasAdvice = false;
 
@@ -101,53 +108,37 @@ export class ObcTransmitterButton extends LitElement {
 
   @property({type: String}) label = '';
 
+  @property({type: String}) idTag = '';
+
   private get isTag() {
     return this.variant === TransmitterButtonVariant.tag;
   }
 
-  private renderBlock(
-    variant: ReadoutBlockVariant,
-    value: number | null | undefined
-  ) {
-    return html`<obc-readout-block
-      .variant=${variant}
-      .value=${value ?? null}
-      .size=${readoutSizeBySize[this.size]}
-      .fractionDigits=${this.fractionDigits}
-      .maxDigits=${this.maxDigits}
-      .hintedZeros=${this.hintedZeros}
-      .hasSignSpacer=${this.hasSignSpacer}
-    ></obc-readout-block>`;
-  }
-
-  private renderAdvice() {
-    if (!this.hasAdvice) {
-      return nothing;
-    }
-    return this.renderBlock(ReadoutBlockVariant.advice, this.adviceValue);
-  }
-
-  private renderSetpoint() {
-    if (!this.hasSetPoint) {
-      return nothing;
-    }
-    return this.renderBlock(ReadoutBlockVariant.setpoint, this.setpointValue);
-  }
-
-  private renderContent() {
-    if (this.isTag) {
-      return html`<span class="label">${this.label}</span>`;
-    }
-
+  private renderReading() {
+    const format = {
+      hintedZeros: this.hintedZeros,
+      hasSignSpacer: this.hasSignSpacer,
+    };
     return html`
-      ${this.renderAdvice()} ${this.renderSetpoint()}
-      <div class="value-container">
+      <obc-readout-list-item
+        .size=${readoutSizeBySize[this.size]}
+        .value=${this.value ?? null}
+        .unit=${this.unit}
+        .hasDegree=${this.hasDegree}
+        .fractionDigits=${this.fractionDigits}
+        .maxDigits=${this.maxDigits}
+        .valueOptions=${{...format, hasIcon: this.hasIcon}}
+        .hasSetpoint=${this.hasSetPoint}
+        .setpoint=${this.setpointValue ?? undefined}
+        .setpointOptions=${format}
+        .hasAdvice=${this.hasAdvice}
+        .advice=${this.adviceValue ?? undefined}
+        .adviceOptions=${format}
+      >
         ${this.hasIcon
-          ? html`<div class="icon"><slot name="icon"></slot></div>`
+          ? html`<slot name="icon" slot="value-icon"></slot>`
           : nothing}
-        ${this.renderBlock(ReadoutBlockVariant.value, this.value)}
-        ${this.unit ? html`<span class="unit">${this.unit}</span>` : nothing}
-      </div>
+      </obc-readout-list-item>
     `;
   }
 
@@ -161,8 +152,13 @@ export class ObcTransmitterButton extends LitElement {
             tag: this.isTag,
           })}
         >
-          ${this.renderContent()}
+          ${this.isTag
+            ? html`<span class="label">${this.label}</span>`
+            : this.renderReading()}
         </div>
+        ${this.idTag
+          ? html`<span class="visually-hidden">${this.idTag}</span>`
+          : nothing}
       </button>
     `;
   }

package/src/automation/transmitter-stack/transmitter-stack.css

@@ -0,0 +1,56 @@
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.transmitter {
+  @mixin transmitter-leader;
+}
+
+.values {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr; /* equal segments, sized by the widest reading (Figma 25656:45218) */
+}
+
+.cell {
+  position: relative; /* containing block for the left/right id tag (transmitter-leader) */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.orientation-top .cell {
+  flex-direction: column-reverse;
+}
+
+.segment {
+  width: 100%;
+}
+
+.segment::part(button) {
+  flex: 1;
+  justify-content: center;
+}
+
+/* Neighbours share one border line; only the chip's outer corners round. */
+.cell:not(:last-child) .segment::part(button) {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.cell:not(:first-child) .segment::part(button) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.id-tag {
+  @mixin transmitter-id-tag;
+  /* an empty tag keeps the chip row aligned */
+  min-height: var(--global-typography-instrument-label-line-height);
+}

package/src/automation/transmitter-stack/transmitter-stack.spec.ts

@@ -0,0 +1,210 @@
+import {describe, expect, it} from 'vitest';
+import {render} from 'vitest-browser-lit';
+import {page, userEvent} from '@vitest/browser/context';
+import {html} from 'lit';
+import '../../main.css';
+import './transmitter-stack.js';
+import type {
+  ObcTransmitterStack,
+  TransmitterStackValue,
+  TransmitterStackValueClickDetail,
+} from './transmitter-stack.js';
+import type {ObcTransmitterButton} from '../transmitter-button/transmitter-button.js';
+import type {ObcReadoutListItem} from '../../navigation-instruments/readout-list-item/readout-list-item.js';
+
+async function setup(values: TransmitterStackValue[]) {
+  const screen = render(
+    html`<obc-transmitter-stack .values=${values}>
+      <span slot="temperature" id="icon"></span>
+    </obc-transmitter-stack>`
+  );
+  const el = screen.container.querySelector(
+    'obc-transmitter-stack'
+  ) as ObcTransmitterStack;
+  await el.updateComplete;
+  return el;
+}
+
+function segments(el: ObcTransmitterStack): ObcTransmitterButton[] {
+  return Array.from(el.shadowRoot!.querySelectorAll('obc-transmitter-button'));
+}
+
+function idTags(el: ObcTransmitterStack): string[] {
+  return Array.from(el.shadowRoot!.querySelectorAll('.id-tag')).map(
+    (tag) => tag.textContent?.trim() ?? ''
+  );
+}
+
+describe('obc-transmitter-stack', () => {
+  it('renders one segment per value, in order', async () => {
+    const el = await setup([
+      {value: 12.3, unit: '°C'},
+      {value: 1.23, unit: 'm', fractionDigits: 2},
+    ]);
+
+    expect(
+      segments(el).map((s) => [s.value, s.unit, s.fractionDigits])
+    ).toEqual([
+      [12.3, '°C', 1],
+      [1.23, 'm', 2],
+    ]);
+  });
+
+  it('renders each reading through a label-less readout list item', async () => {
+    const el = await setup([
+      {value: 12.3, unit: 'C', hasDegree: true},
+      {value: 1, unit: 'm'},
+    ]);
+    const items = await Promise.all(
+      segments(el).map(async (segment) => {
+        await segment.updateComplete;
+        return segment.shadowRoot!.querySelector(
+          'obc-readout-list-item'
+        ) as ObcReadoutListItem;
+      })
+    );
+
+    expect(
+      items.map((item) => [item.value, item.unit, item.hasDegree, item.label])
+    ).toEqual([
+      [12.3, 'C', true, undefined],
+      [1, 'm', false, undefined],
+    ]);
+  });
+
+  it('defaults an omitted digit key but forwards one that never arrived', async () => {
+    const el = await setup([
+      {value: 1},
+      {value: 1, fractionDigits: undefined, maxDigits: NaN},
+    ]);
+    const [omitted, missing] = segments(el);
+
+    expect([omitted.fractionDigits, omitted.maxDigits]).toEqual([1, 0]);
+    expect(missing.fractionDigits).toBeNaN();
+    expect(missing.maxDigits).toBeNaN();
+  });
+
+  it('forwards the named icon slot into the segment', async () => {
+    const el = await setup([
+      {value: 1, iconSlotName: 'temperature'},
+      {value: 2},
+    ]);
+    const [withIcon, withoutIcon] = segments(el);
+    const forwarded = withIcon.querySelector('slot') as HTMLSlotElement;
+
+    expect(withIcon.hasIcon).toBe(true);
+    expect(withoutIcon.hasIcon).toBe(false);
+    expect(forwarded.name).toBe('temperature');
+    expect(forwarded.getAttribute('slot')).toBe('icon');
+    expect(forwarded.assignedElements()[0]?.id).toBe('icon');
+  });
+
+  it('fires value-click with the pressed segment', async () => {
+    const values = [{value: 1}, {value: 2}];
+    const el = await setup(values);
+    const details: TransmitterStackValueClickDetail[] = [];
+    el.addEventListener('value-click', (event) =>
+      details.push(
+        (event as CustomEvent<TransmitterStackValueClickDetail>).detail
+      )
+    );
+    const second = segments(el)[1];
+    await second.updateComplete;
+
+    second.shadowRoot!.querySelector('button')!.click();
+
+    expect(details).toEqual([{index: 1, value: values[1]}]);
+  });
+
+  it('reports the rendered value when values change before the next render', async () => {
+    const rendered = [{value: 1}, {value: 2}];
+    const el = await setup(rendered);
+    const details: TransmitterStackValueClickDetail[] = [];
+    el.addEventListener('value-click', (event) =>
+      details.push(
+        (event as CustomEvent<TransmitterStackValueClickDetail>).detail
+      )
+    );
+    const second = segments(el)[1];
+    await second.updateComplete;
+
+    el.values = [{value: 3}, {value: 4}];
+    second.shadowRoot!.querySelector('button')!.click();
+
+    expect(details).toEqual([{index: 1, value: rendered[1]}]);
+  });
+
+  it('reaches each segment with Tab and activates it with Enter and Space', async () => {
+    const el = await setup([{value: 1}, {value: 2}]);
+    const indexes: number[] = [];
+    el.addEventListener('value-click', (event) =>
+      indexes.push(
+        (event as CustomEvent<TransmitterStackValueClickDetail>).detail.index
+      )
+    );
+    await Promise.all(segments(el).map((segment) => segment.updateComplete));
+
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
+
+    expect(indexes).toEqual([0, 1]);
+  });
+
+  it('names each segment by its reading and id tag, and hides the visible tag', async () => {
+    const el = await setup([
+      {value: 1, unit: 'm', idTag: '#0001'},
+      {value: 1, unit: 'm', idTag: '#0002'},
+    ]);
+    await Promise.all(segments(el).map((segment) => segment.updateComplete));
+
+    await expect
+      .element(page.getByRole('button', {name: /#0002/}))
+      .toBeInTheDocument();
+    expect(
+      Array.from(el.shadowRoot!.querySelectorAll('.id-tag')).map((tag) =>
+        tag.getAttribute('aria-hidden')
+      )
+    ).toEqual(['true', 'true']);
+  });
+
+  it('renders nothing, leader line included, without values', async () => {
+    const el = await setup([]);
+
+    expect(el.shadowRoot!.querySelector('.transmitter')).toBeNull();
+  });
+
+  it('gives every segment the width of the widest reading', async () => {
+    const el = await setup([
+      {value: 1, unit: 'm'},
+      {value: 12345.6, unit: 'mVs', maxDigits: 5},
+    ]);
+    await Promise.all(segments(el).map((segment) => segment.updateComplete));
+    const [narrow, wide] = segments(el).map(
+      (segment) => segment.getBoundingClientRect().width
+    );
+
+    expect(narrow).toBeCloseTo(wide, 0);
+  });
+
+  it('keeps each segment at or above the 24 px pointer-target floor', async () => {
+    const el = await setup([{value: 1, unit: 'm'}]);
+    const [segment] = segments(el);
+    await segment.updateComplete;
+    const target = segment
+      .shadowRoot!.querySelector('button')!
+      .getBoundingClientRect();
+
+    expect(target.height).toBeGreaterThanOrEqual(24);
+    expect(target.width).toBeGreaterThanOrEqual(24);
+  });
+
+  it('renders an id-tag row in every cell once any value has one', async () => {
+    expect(idTags(await setup([{value: 1, idTag: '#1'}, {value: 2}]))).toEqual([
+      '#1',
+      '',
+    ]);
+    expect(idTags(await setup([{value: 1}, {value: 2}]))).toEqual([]);
+  });
+});