@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.87 → 2.0.0-next.89

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

@@ -0,0 +1,192 @@
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+/* ---------- Readout building block (advice / setpoint / value) ---------- */
+.block {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+/* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
+   `.block` gap only separates the icon from this group. */
+.block-content {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.block-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: inherit;
+  /* Centre the icon against the block's text rather than bottom-aligning it (the
+     block is flex-end). Matters for the value block, whose text is taller than
+     the icon, so the value icon lines up with the number like the smaller
+     setpoint/advice icons do. */
+  align-self: center;
+}
+
+.block-icon obi-input-right,
+.block-icon obi-notification-advice,
+.block-icon ::slotted(*) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.hinted-zero {
+  color: var(--obc-readout-block-hinted-color, var(--element-inactive-color));
+}
+
+/* ---------- Text colours (overridable via custom properties) ----------
+ * obc-textbox does not set its own colour, so it inherits these. */
+.block-value {
+  color: var(--obc-readout-block-value-color, var(--element-neutral-color));
+}
+.block-value.tone-enhanced {
+  color: var(
+    --obc-readout-block-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
+/* The setpoint shares the value's colour state: neutral by default, enhanced
+   (blue) only when the row is enhanced — never a blue setpoint next to a grey
+   value. `--instrument-enhanced-secondary-color` is the same #2d548b as the
+   value's `--element-neutral-enhanced-color`. */
+.block-setpoint {
+  color: var(--obc-readout-block-setpoint-color, var(--element-neutral-color));
+  /* Flip-flop emphasis + pop-up fade animate at 100ms. */
+  transition:
+    opacity 100ms ease,
+    color 100ms ease;
+}
+.block-setpoint.tone-enhanced {
+  color: var(
+    --obc-readout-block-setpoint-enhanced-color,
+    var(--instrument-enhanced-secondary-color)
+  );
+}
+/* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
+   the value stays column-aligned. */
+.block-setpoint.is-hiding {
+  opacity: 0;
+}
+.block-setpoint.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+/* Touching / focus state: the setpoint triangle takes the marker's focus look — a
+   pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
+   mirroring `svghelpers/setpoint.ts` focus (fill base-blue-100 + 2px stroke).
+   The glyph icon is `fill: currentColor` and can't take a CSS `stroke`, so the
+   edge is layered drop-shadows. The setpoint number keeps its normal, readable
+   colour. */
+.block-setpoint.touching {
+  --_touching-outline: var(
+    --obc-readout-block-setpoint-touching-outline-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
+.block-setpoint.touching .block-icon {
+  color: var(--obc-readout-block-setpoint-touching-color, var(--base-blue-100));
+  filter: drop-shadow(1px 0 0 var(--_touching-outline))
+    drop-shadow(-1px 0 0 var(--_touching-outline))
+    drop-shadow(0 1px 0 var(--_touching-outline))
+    drop-shadow(0 -1px 0 var(--_touching-outline));
+}
+.block-advice {
+  color: var(--obc-readout-block-advice-color, var(--element-neutral-color));
+}
+
+/* ---------- Per-block data quality ----------
+ * Uses `outline` (not `border`) so the chip never shifts the block's width — the
+ * value stays column-aligned across rows. */
+.block.data-low-integrity,
+.block.data-invalid {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
+}
+.block.data-low-integrity {
+  background: var(--alert-low-integrity-background-color);
+  outline-color: var(--alert-low-integrity-border-color);
+}
+.block.data-invalid {
+  background: var(--alert-invalid-background-color);
+  outline-color: var(--alert-invalid-border-color);
+}
+
+/* ---------- Degree column ----------
+ * A cap-height `°` column whose width scales with the number size; it inherits
+ * the block's colour. */
+.degree-column {
+  flex: none;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  inline-size: var(--_obc-readout-block-degree-width, 0);
+  overflow: clip;
+}
+.degree-column.degree-inherit {
+  color: inherit;
+}
+.degree-column.degree-xs {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-small-degree-unit-width
+  );
+}
+.degree-column.degree-s {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-regular-degree-unit-width
+  );
+}
+.degree-column.degree-m {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-medium-degree-unit-width
+  );
+}
+.degree-column.degree-l,
+.degree-column.degree-xl {
+  --_obc-readout-block-degree-width: var(
+    --global-typography-instrument-value-large-degree-unit-width
+  );
+}
+
+/* ---------- Size tiers ----------
+ * Public small/medium/large map to the design token regular/medium/large
+ * tiers. */
+.block.size-small {
+  gap: var(--instrument-components-readout-new-general-regular-icon-gap);
+}
+.size-small .block-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+  block-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+}
+
+.block.size-medium {
+  gap: var(--instrument-components-readout-new-general-medium-icon-gap);
+}
+.size-medium .block-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-medium-icon-size
+  );
+  block-size: var(--instrument-components-readout-new-general-medium-icon-size);
+}
+
+.block.size-large {
+  gap: var(--instrument-components-readout-new-general-large-icon-gap);
+}
+.size-large .block-icon {
+  inline-size: var(--instrument-components-readout-new-general-large-icon-size);
+  block-size: var(--instrument-components-readout-new-general-large-icon-size);
+}

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

@@ -0,0 +1,346 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html, nothing} from 'lit';
+import {
+  ReadoutBlockVariant,
+  ReadoutBlockSize,
+  ReadoutBlockDataQuality,
+  ObcTextboxFontWeight,
+  ObcTextboxAlignment,
+} from './readout-block.js';
+import './readout-block.js';
+import '../../icons/icon-placeholder.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
+
+const NONE = 'none';
+
+type BlockArgs = {
+  variant: ReadoutBlockVariant;
+  value: number;
+  size: ReadoutBlockSize;
+  enhanced: boolean;
+  weight: ObcTextboxFontWeight;
+  hasDegree: boolean;
+  hasIcon: boolean;
+  fractionDigits: number;
+  maxDigits: number;
+  hintedZeros: boolean;
+  spaceReserver: string;
+  off: boolean;
+  offText: string;
+  alignment: ObcTextboxAlignment;
+  dataQuality: ReadoutBlockDataQuality | typeof NONE;
+};
+
+// A faithful single-block render. The block inherits its colour from the host
+// context (the list-item normally drives it), so standalone it shows the neutral
+// default tone; `enhanced` switches to the accent tone.
+function renderBlock(args: Partial<BlockArgs>) {
+  return html`
+    <obc-readout-block
+      .variant=${args.variant ?? ReadoutBlockVariant.value}
+      .value=${args.value ?? null}
+      .size=${args.size ?? ReadoutBlockSize.small}
+      .enhanced=${args.enhanced ?? false}
+      .weight=${args.weight ?? ObcTextboxFontWeight.regular}
+      .hasDegree=${args.hasDegree ?? false}
+      .hasIcon=${args.hasIcon ?? false}
+      .fractionDigits=${args.fractionDigits ?? 0}
+      .maxDigits=${args.maxDigits ?? 0}
+      .hintedZeros=${args.hintedZeros ?? false}
+      .spaceReserver=${args.spaceReserver || undefined}
+      .off=${args.off ?? false}
+      .offText=${args.offText ?? 'OFF'}
+      .alignment=${args.alignment ?? ObcTextboxAlignment.Right}
+      .dataQuality=${args.dataQuality === NONE ? undefined : args.dataQuality}
+    >
+      ${args.hasIcon
+        ? html`<obi-placeholder slot="icon"></obi-placeholder>`
+        : nothing}
+    </obc-readout-block>
+  `;
+}
+
+const themedDecorator = (story: () => unknown) => html`
+  <div
+    data-obc-theme="day"
+    style="background: var(--container-background-color); padding: 24px; display: inline-block;"
+  >
+    ${story()}
+  </div>
+`;
+
+const showcaseStyle = `
+  .rb-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
+  .rb-card {
+    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
+    padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.03);
+  }
+  .rb-card-title {
+    font: 10px/1.2 var(--global-typography-ui-label-font-family, sans-serif);
+    text-transform: uppercase; letter-spacing: 0.06em; color: var(--element-neutral-color, #777);
+  }
+  .rb-cell { outline: 1px dashed rgba(0, 0, 0, 0.12); }
+`;
+
+type ShowcaseCard = {title: string; args: Partial<BlockArgs>};
+
+function renderShowcase(cards: ShowcaseCard[]) {
+  return html`
+    <style>
+      ${showcaseStyle}
+    </style>
+    <div class="rb-grid">
+      ${cards.map(
+        (card) => html`
+          <div class="rb-card">
+            <div class="rb-card-title">${card.title}</div>
+            <div class="rb-cell">${renderBlock(card.args)}</div>
+          </div>
+        `
+      )}
+    </div>
+  `;
+}
+
+const meta = {
+  title: 'Building Blocks/Readout Block',
+  tags: ['autodocs', '6.0', 'wip'],
+  component: 'obc-readout-block',
+  decorators: [themedDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The most atomic readout primitive — a single cap-height, ' +
+          'width-reservable numeric segment (value / setpoint / advice). It is the ' +
+          'building block used inside `obc-readout-list-item` (and, in a future ' +
+          'refactor, inside `obc-readout`); it is not normally used on its own. ' +
+          'Colour is inherited from the host context, so standalone it shows the ' +
+          'neutral tone.',
+      },
+    },
+  },
+  render: (args) => renderBlock(args),
+  args: {
+    variant: ReadoutBlockVariant.value,
+    value: 123,
+    size: ReadoutBlockSize.small,
+    enhanced: false,
+    weight: ObcTextboxFontWeight.regular,
+    hasDegree: false,
+    hasIcon: false,
+    fractionDigits: 0,
+    maxDigits: 0,
+    hintedZeros: false,
+    spaceReserver: '',
+    off: false,
+    offText: 'OFF',
+    alignment: ObcTextboxAlignment.Right,
+    dataQuality: NONE,
+  },
+  argTypes: {
+    variant: {
+      control: {type: 'select'},
+      options: Object.values(ReadoutBlockVariant),
+    },
+    size: {
+      control: {type: 'select'},
+      options: Object.values(ReadoutBlockSize),
+    },
+    weight: {
+      control: {type: 'select'},
+      options: Object.values(ObcTextboxFontWeight),
+    },
+    alignment: {
+      control: {type: 'select'},
+      options: Object.values(ObcTextboxAlignment),
+    },
+    fractionDigits: {control: {type: 'number', min: 0, step: 1}},
+    maxDigits: {control: {type: 'number', min: 0, step: 1}},
+    spaceReserver: {control: {type: 'text'}},
+    offText: {control: {type: 'text'}},
+    dataQuality: {
+      control: {type: 'select'},
+      options: [NONE, ...Object.values(ReadoutBlockDataQuality)],
+    },
+  },
+} satisfies Meta<BlockArgs>;
+
+export default meta;
+type Story = StoryObj<BlockArgs>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'value', args: {variant: ReadoutBlockVariant.value, value: 123}},
+      {
+        title: 'setpoint',
+        args: {variant: ReadoutBlockVariant.setpoint, value: 120},
+      },
+      {
+        title: 'advice',
+        args: {variant: ReadoutBlockVariant.advice, value: 118},
+      },
+    ]),
+};
+
+export const Sizes: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ReadoutBlockSize.small,
+        ReadoutBlockSize.medium,
+        ReadoutBlockSize.large,
+      ].map((size) => ({
+        title: size,
+        args: {size, value: 123, hasDegree: true},
+      }))
+    ),
+};
+
+export const Tone: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'regular', args: {value: 123, enhanced: false}},
+      {title: 'enhanced', args: {value: 123, enhanced: true}},
+    ]),
+};
+
+export const Weight: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ObcTextboxFontWeight.regular,
+        ObcTextboxFontWeight.semibold,
+        ObcTextboxFontWeight.bold,
+      ].map((weight) => ({title: weight, args: {value: 123, weight}}))
+    ),
+};
+
+export const Degree: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'no degree', args: {value: 287}},
+      {title: 'degree', args: {value: 287, hasDegree: true}},
+    ]),
+};
+
+/**
+ * `off` renders `offText` (default `"OFF"`) in place of the value.
+ */
+export const OffText: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'OFF (default)', args: {off: true}},
+      {title: 'custom', args: {off: true, offText: 'unavailable'}},
+    ]),
+};
+
+/**
+ * Hinted zeros pad the integer part up to `maxDigits` as muted leading zeros.
+ * When enabled they take priority over `spaceReserver` (they already fill to
+ * `maxDigits`, so an explicit reserver is ignored).
+ */
+export const HintedZeros: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'value 8, maxDigits 4', args: {value: 8, maxDigits: 4}},
+      {
+        title: 'hinted zeros',
+        args: {value: 8, maxDigits: 4, hintedZeros: true},
+      },
+      {
+        title: 'hinted zeros + fraction',
+        args: {value: 8, maxDigits: 4, fractionDigits: 1, hintedZeros: true},
+      },
+      {
+        title: 'hinted wins over reserver',
+        args: {
+          value: 8,
+          maxDigits: 4,
+          hintedZeros: true,
+          spaceReserver: '00000000',
+        },
+      },
+    ]),
+};
+
+/**
+ * `maxDigits` reserves INTEGER digits only — independent of `fractionDigits`
+ * (the decimal point and fraction digits never count toward `maxDigits`).
+ */
+export const MaxDigitsAndFractionDigits: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'maxDigits 4', args: {value: 12, maxDigits: 4}},
+      {
+        title: 'maxDigits 4, frac 1',
+        args: {value: 12, maxDigits: 4, fractionDigits: 1},
+      },
+      {
+        title: 'maxDigits 4, frac 2',
+        args: {value: 12.5, maxDigits: 4, fractionDigits: 2},
+      },
+    ]),
+};
+
+export const Alignment: Story = {
+  render: () =>
+    renderShowcase(
+      [
+        ObcTextboxAlignment.Left,
+        ObcTextboxAlignment.Center,
+        ObcTextboxAlignment.Right,
+      ].map((alignment) => ({
+        title: alignment,
+        // A wide reserver makes the alignment within the reserved width visible.
+        args: {value: 12, alignment, spaceReserver: '00000'},
+      }))
+    ),
+};
+
+export const DataQuality: Story = {
+  render: () =>
+    renderShowcase([
+      {title: 'nominal', args: {value: 123}},
+      {
+        title: 'low-integrity',
+        args: {value: 123, dataQuality: ReadoutBlockDataQuality.lowIntegrity},
+      },
+      {
+        title: 'invalid',
+        args: {value: 123, dataQuality: ReadoutBlockDataQuality.invalid},
+      },
+      {title: 'null (dash)', args: {value: undefined}},
+    ]),
+};
+
+export const Alert: Story = {
+  render: () => html`
+    <style>
+      ${showcaseStyle}
+    </style>
+    <div class="rb-grid">
+      <div class="rb-card">
+        <div class="rb-card-title">value alert (warning)</div>
+        <div class="rb-cell">
+          <obc-readout-block
+            .variant=${ReadoutBlockVariant.value}
+            .value=${123}
+            .alert=${{
+              status: AlertType.Warning,
+              mode: ObcAlertFrameMode.unackedActive,
+              type: ObcAlertFrameType.Regular,
+            }}
+          ></obc-readout-block>
+        </div>
+      </div>
+    </div>
+  `,
+};