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

package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts

@@ -9,15 +9,20 @@ import {
   ReadoutListItemDataQuality,
   ReadoutListItemBorder,
   ReadoutListItemSetpointInteraction,
+  ReadoutAdviceCategory,
+  ReadoutSourceState,
   ObcTextboxFontWeight,
   type ReadoutListItemClickable,
   type ReadoutValueOptions,
   type ReadoutSetpointOptions,
   type ReadoutAdviceOptions,
+  type ReadoutLabelOptions,
   type ReadoutReserverOptions,
   type ReadoutSrcOptions,
   ReadoutValueType,
 } from './readout-list-item.js';
+import {ObcTextboxSize} from '../../components/textbox/textbox.js';
+import '../../icons/icon-input-right.js';
 import type {AlertFrameConfig} from '../../components/alert-frame/alert-frame.js';
 import {
   ObcAlertFrameMode,
@@ -61,6 +66,13 @@ type ReadoutListItemStoryArgs = {
   'options.value.hintedZeros': boolean;
   'options.setpoint.interaction': ReadoutListItemSetpointInteraction;
   'options.setpoint.touching': boolean;
+  'options.advice.category': ReadoutAdviceCategory;
+  'options.advice.active': boolean;
+  'options.label.size': ObcTextboxSize | typeof NONE;
+  'options.label.spaceReserver': string;
+  'options.src.state': ReadoutSourceState;
+  'options.src.deviation'?: number;
+  'options.src.spaceReserver': string;
   'options.unit.spaceReserver': string;
 };
 
@@ -83,6 +95,7 @@ type StoryOptions = {
   value?: ReadoutValueOptions;
   setpoint?: ReadoutSetpointOptions;
   advice?: ReadoutAdviceOptions;
+  label?: ReadoutLabelOptions;
   unit?: ReadoutReserverOptions;
   src?: ReadoutSrcOptions;
 };
@@ -182,6 +195,7 @@ function renderItem(config: ReadoutItemConfig) {
       .valueOptions=${o.value}
       .setpointOptions=${o.setpoint}
       .adviceOptions=${o.advice}
+      .labelOptions=${o.label}
       .unitOptions=${o.unit}
       .srcOptions=${o.src}
       .showDebugOverlay=${config.showDebugOverlay ?? false}
@@ -272,6 +286,12 @@ const defaultArgs: ReadoutListItemStoryArgs = {
   'options.setpoint.interaction':
     ReadoutListItemSetpointInteraction.alwaysVisible,
   'options.setpoint.touching': false,
+  'options.advice.category': ReadoutAdviceCategory.regular,
+  'options.advice.active': false,
+  'options.label.size': NONE,
+  'options.label.spaceReserver': '',
+  'options.src.state': ReadoutSourceState.regular,
+  'options.src.spaceReserver': '',
   'options.unit.spaceReserver': '',
 };
 
@@ -301,6 +321,22 @@ function argsToOptions(args: ReadoutListItemStoryArgs): StoryOptions {
       interaction: args['options.setpoint.interaction'],
       touching: args['options.setpoint.touching'],
     },
+    advice: {
+      category: args['options.advice.category'],
+      active: args['options.advice.active'],
+    },
+    label: {
+      size:
+        args['options.label.size'] === NONE
+          ? undefined
+          : args['options.label.size'],
+      spaceReserver: args['options.label.spaceReserver'] || undefined,
+    },
+    src: {
+      state: args['options.src.state'],
+      deviation: args['options.src.deviation'],
+      spaceReserver: args['options.src.spaceReserver'] || undefined,
+    },
     unit: {spaceReserver: args['options.unit.spaceReserver'] || undefined},
   };
 }
@@ -442,6 +478,47 @@ const meta = {
       if: {arg: 'hasSetpoint', truthy: true},
       table: {category: 'Setpoint'},
     },
+    'options.advice.category': {
+      name: 'Advice Category',
+      control: {type: 'select'},
+      options: Object.values(ReadoutAdviceCategory),
+      if: {arg: 'hasAdvice', truthy: true},
+      table: {category: 'Advice'},
+    },
+    'options.advice.active': {
+      name: 'Advice Active (triggered)',
+      if: {arg: 'hasAdvice', truthy: true},
+      table: {category: 'Advice'},
+    },
+    'options.label.size': {
+      name: 'Label Size',
+      description:
+        'Dense list rows default to xs; the design defines xs and s.',
+      control: {type: 'select'},
+      options: [NONE, ObcTextboxSize.xs, ObcTextboxSize.s],
+      table: {category: 'Label'},
+    },
+    'options.label.spaceReserver': {
+      name: 'Label Space Reserver',
+      control: {type: 'text'},
+      table: {category: 'Label'},
+    },
+    'options.src.state': {
+      name: 'Source State',
+      control: {type: 'select'},
+      options: Object.values(ReadoutSourceState),
+      table: {category: 'Source'},
+    },
+    'options.src.deviation': {
+      name: 'Source Deviation (Δ)',
+      control: {type: 'number'},
+      table: {category: 'Source'},
+    },
+    'options.src.spaceReserver': {
+      name: 'Source Space Reserver',
+      control: {type: 'text'},
+      table: {category: 'Source'},
+    },
     'options.unit.spaceReserver': {
       name: 'Unit Space Reserver',
       control: {type: 'text'},
@@ -949,6 +1026,30 @@ export const SetpointPopUpAnimated: Story = {
   tags: ['skip-test'],
 };
 
+export const SetpointAlwaysVisibleAnimated: Story = {
+  ...animatedInteractionStory({
+    name: 'Always-Visible (Animated)',
+    interaction: ReadoutListItemSetpointInteraction.alwaysVisible,
+    intro:
+      'Always-visible (the default, Figma "Primary secondary"): the setpoint stays at the secondary size in both states — nothing resizes or hides as the value reaches the setpoint (120); only the touch highlight shows during the sweep. Contrast with flip-flop / pop-up. Press Play, or use the buttons.',
+    awayLabel: 'Away (124)',
+    reachLabel: 'Reach setpoint (120)',
+  }),
+  tags: ['skip-test'],
+};
+
+export const SetpointEqualSizeAnimated: Story = {
+  ...animatedInteractionStory({
+    name: 'Equal-Size (Animated)',
+    interaction: ReadoutListItemSetpointInteraction.equalSize,
+    intro:
+      'Equal-size (Figma 6.1 "Equal size"): value and setpoint share the primary size in both states — like always-visible, nothing resizes or hides as the value reaches the setpoint (120); only the touch highlight shows during the sweep. Press Play, or use the buttons.',
+    awayLabel: 'Away (124)',
+    reachLabel: 'Reach setpoint (120)',
+  }),
+  tags: ['skip-test'],
+};
+
 // Demo durations (s) for the synced azimuth-thruster flow below — the vessel
 // response after "confirm": thrust catches up faster than the heavier angle.
 const SYNC_THRUST_DURATION = 2;
@@ -1973,3 +2074,243 @@ export const ColumnAlignment: StoryObj<
     </div>
   `,
 };
+
+/**
+ * Figma 6.1 "Equal size": value and setpoint always share the primary size —
+ * the fourth interaction beside primary-secondary (`always-visible`),
+ * flip-flop and pop-up. Static in both states; only flip-flop / pop-up
+ * resize or hide at runtime — see the `SetpointEqualSizeAnimated` story for
+ * the in-motion contrast. `touching` keeps the setpoint at the primary size
+ * (it only adds the SemiBold focus weight and marker highlight), and the
+ * marker arrow follows the block's rendered size, so an equal-size setpoint
+ * carries the full-size arrow. The sizing rule lives in
+ * `readoutSetpointSize()` (`readout-shared.ts`, unit-tested), shared with
+ * `obc-readout`.
+ */
+export const SetpointEqualSize: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Equal Size — Off/At Setpoint × Size',
+        columns: 2,
+        cases: [
+          ReadoutListItemSize.small,
+          ReadoutListItemSize.medium,
+          ReadoutListItemSize.large,
+        ].flatMap((size) =>
+          [123, 120].map((value) => ({
+            label: `${size} / ${value === 120 ? 'at' : 'off'} setpoint`,
+            config: {
+              value,
+              hasSetpoint: true,
+              setpoint: 120,
+              options: {
+                size,
+                priority: ReadoutListItemPriority.enhanced,
+                setpoint: {
+                  interaction: ReadoutListItemSetpointInteraction.equalSize,
+                },
+              },
+            },
+          }))
+        ),
+      },
+    ]),
+};
+
+/**
+ * Advice semantic categories in a row context (Figma 6.1). The full per-block
+ * matrix lives in the Readout Block `AdviceCategories` story.
+ */
+export const AdviceCategories: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Advice categories — resting vs active',
+        columns: 2,
+        cases: Object.values(ReadoutAdviceCategory).flatMap((category) =>
+          [false, true].map((active) => ({
+            label: `${category}${active ? ' / active' : ''}`,
+            config: {
+              hasAdvice: true,
+              options: {advice: {category, active}},
+            },
+          }))
+        ),
+      },
+    ]),
+};
+
+/**
+ * Source states + deviation (Figma 6.1 Readout-block-source): `enhanced`
+ * renders the amplified chip, `caution` / `warning` the alert chip;
+ * `deviation` adds the Δ line under the source name. Outline-based, so a live
+ * state change never shifts the row.
+ */
+export const SourceStates: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Trailing source — state × deviation',
+        columns: 2,
+        cases: Object.values(ReadoutSourceState).flatMap((state) =>
+          [undefined, 0.5].map((deviation) => ({
+            label: `${state}${deviation !== undefined ? ' / Δ' : ''}`,
+            config: {
+              src: 'GPS 1',
+              options: {src: {state, deviation}},
+            },
+          }))
+        ),
+      },
+      {
+        title: 'Leading source — state chip in the label stack',
+        columns: 1,
+        cases: [
+          {
+            label: 'leading-src / warning / Δ',
+            config: {
+              src: 'GPS 1',
+              options: {
+                stacking: ReadoutListItemStacking.leadingSrc,
+                src: {state: ReadoutSourceState.warning, deviation: 0.5},
+              },
+            },
+          },
+        ],
+      },
+    ]),
+};
+
+/**
+ * `labelOptions`: dense rows default the label to `xs`; `size: 's'` opts a
+ * row into the larger title (Figma 6.1 gives large stand-alone readouts `s`
+ * by default — rows stay dense). The label is SemiBold only on enhanced rows.
+ */
+export const LabelSize: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Label size — default (xs) vs s override × priority',
+        columns: 2,
+        cases: [undefined, ObcTextboxSize.s].flatMap((size) =>
+          [
+            ReadoutListItemPriority.regular,
+            ReadoutListItemPriority.enhanced,
+          ].map((priority) => ({
+            label: `${size ?? 'default xs'} / ${priority}`,
+            config: {
+              options: {
+                priority,
+                label: size ? {size} : undefined,
+              },
+            },
+          }))
+        ),
+      },
+    ]),
+};
+
+/**
+ * TODO(designer): open question from the 6.1 review — while a pop-up setpoint
+ * is hidden at-setpoint, should the reading keep a setpoint arrow so it still
+ * reads as "a value you are in control of"? The existing `value-icon` slot
+ * already expresses that today, demonstrated here; no new API until decided.
+ */
+export const SetpointPopUpWithValueArrow: Story = {
+  render: () => html`
+    <style>
+      ${showcaseStyle}
+    </style>
+    <div class="rli-sections">
+      <p
+        style="margin: 0; font: 12px/1.5 var(--global-typography-ui-label-font-family, inherit); color: var(--element-neutral-color, #777);"
+      >
+        Pop-up at setpoint, with an <code>obi-input-right</code> slotted into
+        <code>value-icon</code> so the collapsed reading keeps the in-control
+        marker.
+      </p>
+      <obc-readout-list-item
+        .label=${'HDG'}
+        .unit=${'/min'}
+        .src=${'Source'}
+        .value=${10}
+        .hasSetpoint=${true}
+        .setpoint=${10}
+        .priority=${ReadoutListItemPriority.enhanced}
+        .setpointOptions=${{
+          interaction: ReadoutListItemSetpointInteraction.popUp,
+        }}
+        .valueOptions=${{hasIcon: true}}
+      >
+        <obi-input-right slot="value-icon"></obi-input-right>
+      </obc-readout-list-item>
+    </div>
+  `,
+};
+
+/**
+ * Figma 6.1 bird's-eye matrix — a static expansion of the Readout-list-item
+ * sheet (node 46544-270931): Size (3) × Priority (2) × Reference priority /
+ * interaction (4, one section each) × State (4) = the sheet's 96 variants,
+ * reviewable at a glance without touching controls. Degree is on throughout,
+ * matching the sheet's instances. Note the list item keeps its own per-row
+ * degree convention (setpoint / advice carry the degree too) — the
+ * degree-on-the-actual-value-only rule from the 6.1 review applies to
+ * `obc-readout` only.
+ */
+export const FigmaMatrix: Story = {
+  render: () =>
+    renderShowcase(
+      Object.values(ReadoutListItemSetpointInteraction).map((interaction) => ({
+        title: `${interaction}`,
+        columns: 8,
+        cases: [
+          ReadoutListItemSize.small,
+          ReadoutListItemSize.medium,
+          ReadoutListItemSize.large,
+        ].flatMap((size) =>
+          [
+            ReadoutListItemPriority.regular,
+            ReadoutListItemPriority.enhanced,
+          ].flatMap((priority) =>
+            (
+              [
+                {key: 'off setpoint', value: 123},
+                {key: 'at setpoint', value: 120},
+                {
+                  key: 'low-integrity',
+                  value: 123,
+                  dataQuality: ReadoutListItemDataQuality.lowIntegrity,
+                },
+                {
+                  key: 'invalid',
+                  value: 123,
+                  dataQuality: ReadoutListItemDataQuality.invalid,
+                },
+              ] as {
+                key: string;
+                value: number;
+                dataQuality?: ReadoutListItemDataQuality;
+              }[]
+            ).map((state) => ({
+              label: `${size} / ${priority} / ${state.key}`,
+              config: {
+                value: state.value,
+                hasSetpoint: true,
+                setpoint: 120,
+                hasAdvice: true,
+                options: {
+                  size,
+                  priority,
+                  hasDegree: true,
+                  dataQuality: state.dataQuality,
+                  setpoint: {interaction},
+                },
+              },
+            }))
+          )
+        ),
+      }))
+    ),
+};