@onereach/idw-ui-components 0.2.1 → 0.3.0-beta.36.0

package/README.md

@@ -52,7 +52,9 @@ const skill = {
 
 ## FeedItemBase
 
-Presentational shell for schema-driven feed items. It owns metadata, title, short description, feed-level controls, and expand/collapse. Body content is opaque via slots.
+Presentational feed envelope. It owns the type chip, status, author, title thumbnail, collapsed summary, engagement row, and expand/collapse. The card body stays in the `#body` slot.
+
+List and fullscreen views use the same light/dark token pairs as the Cockpit feed frame: `primary` / `on-primary` for the type chip, `outline` for meta text, `surface-1` for the summary panel, `surface-2` for the settled shell, and `primary-opacity-8` for the attention shell. Typography is `typography-caption-regular`, `typography-headline-3` (list title), `typography-headline-1` (fullscreen title), `typography-body-2-regular`, and `typography-body-2-bold` for Show more / summary choices.
 
 ```vue
 <script setup lang="ts">
@@ -62,22 +64,23 @@ import { FeedItemBase } from '@onereach/idw-ui-components';
 <template>
   <FeedItemBase
     id="feed-1"
+    type-label="Notification"
+    :status="{ label: 'Action Required', tone: 'primary' }"
     title="Important meeting needs review"
     short-content="Owner Strategy Review overlaps with your vacation."
     timestamp="1 min ago"
     timestamp-datetime="2026-08-07T12:00:00.000Z"
-    source="by Vacation Skill"
+    source="Vacation Skill"
+    media-src="/cover.jpg"
+    :summary="{ choices: ['Assign Alex'] }"
+    :engagement="{ reactionCount: 213, reactionEmojis: ['👍'], commentsCount: 8, commentsLabel: '8 comments' }"
   >
     <template #body>
-      <!-- Markdown, HTML, skill body, or embedded app -->
-    </template>
-
-    <template #actions>
-      <!-- Domain actions such as Approve or Reschedule -->
+      <!-- Markdown, HTML, skill body, or card -->
     </template>
 
     <template #footer>
-      <!-- Optional feedback, comments, or additional context (shown while body is open) -->
+      <!-- Optional host content shown only while the list body is open -->
     </template>
   </FeedItemBase>
 </template>
@@ -88,52 +91,51 @@ import { FeedItemBase } from '@onereach/idw-ui-components';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `id` | `string` | — | Stable feed item id (used for a11y ids) |
-| `title` | `string` | — | Shell title (always visible) |
-| `shortContent` | `string` | — | Shell short description |
+| `title` | `string` | — | Shell title |
+| `shortContent` | `string` | — | Subtitle under the list title |
+| `typeLabel` | `string` | — | Type chip (Task, Notification, News, …) |
+| `status` | `{ label, tone? }` | — | Status label plus indicator tone |
 | `timestamp` | `string` | — | Preformatted timestamp text |
 | `timestampDatetime` | `string` | — | Optional value for `<time datetime>` |
-| `source` | `string` | — | Source / author text |
-| `expandable` | `boolean` | `true` | Whether the expand control is shown |
-| `fullscreenControl` | `boolean` | `false` | Shows `open_in_full` inside default `#controls`; host owns overlay via `fullscreen` |
-| `mentionControl` | `boolean` | `true` | Shows `alternate_email` (mention) inside default `#controls` |
-| `isNew` | `boolean` | `false` | Attention shell (`primary-opacity-12`) vs settled shell (`surface-2`) |
-| `controlLabels` | `Partial<Record<FeedItemControl, string>> & { fullscreen?: string }` | Mention / Fullscreen | Optional localized tooltips |
-
-When `expandable` is `false`, the body is always shown and the expand button is hidden.
-
-Expand labels are fixed (`Show more` / `Show less`). The scrollable body uses `max-height: 37.875rem` by default.
-
-`FeedItemControl`: `'mention'`
+| `source` | `string` | — | Author name, rendered as `By {source}` |
+| `authorPrefix` | `string` | `By` | Prefix before `source` |
+| `mediaSrc` / `mediaAlt` | `string` | — | 64px list thumbnail. Hidden in fullscreen |
+| `summary` | `{ text?, choices? }` | — | Collapsed summary panel. Hidden once the body is open |
+| `summaryLabel` | `string` | `Summary:` | Summary panel heading |
+| `engagement` | `FeedItemEngagement` | — | Reactions, read time, and comments row |
+| `view` | `'list' \| 'fullscreen'` | `list` | Fullscreen uses the large title, drops the thumbnail and expand control, and keeps the body open |
+| `expandable` | `boolean` | `true` | Whether Show more / Show less is shown |
+| `fullscreenControl` | `boolean` | `false` | Shows `open_in_full` inside default `#controls` |
+| `mentionControl` | `boolean` | `true` | Shows `alternate_email` |
+| `shareControl` | `boolean` | `true` | Shows share. In fullscreen this is the labeled Share button under the title |
+| `moreControl` | `boolean` | `true` | Shows `more_vert` |
+| `isNew` / `highlighted` | `boolean` | `false` | Attention shell (`primary-opacity-8`) vs settled shell (`surface-2`) |
+| `controlLabels` | `FeedItemControlLabels` | Mention / Share / More / Fullscreen / Show more / Show less | Optional localized labels |
+
+`FeedStatusTone`: `'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'secondary'`.
+
+When `expandable` is `false`, the body is always shown and the expand button is hidden. The list body uses `max-height: 37.875rem`. Fullscreen body content is centered at `50rem`.
+
+`FeedItemControl`: `'mention' | 'share' | 'more'`
 
 ### Slots
 
-- `body` — rich / schema / app content (lazy-mounted on first expand, kept mounted while the item lives)
-- `actions` — domain action buttons (visible only while body is open; empty slot content is hidden)
-- `footer` — optional extra footer (visible only while body is open)
-- `controls` — override default controls entirely (including fullscreen when `fullscreenControl` is true)
-
-### Default controls
-
-The default `#controls` content includes mention (`alternate_email`) when `mentionControl` is true (default), and fullscreen when `fullscreenControl` is true. A custom `#controls` slot replaces both.
-
-```vue
-<!-- Localize built-in control tooltips -->
-<FeedItemBase
-  ...
-  :control-labels="{ mention: 'Згадати', fullscreen: 'На весь екран' }"
-/>
-```
+- `body` — card or rich content (lazy-mounted on first expand, kept mounted while the item lives)
+- `actions` — extra controls under the body, shown while the body is open. Card action buttons belong in the body itself
+- `media` — replaces the 64px thumbnail (skill tile, icon). Hidden in fullscreen
+- `footer` — optional extra footer, list view only, shown while the body is open
+- `controls` — replaces the default header icon buttons
 
 ### Events
 
 - `update:expanded` — expanded state changed
 - `expand` / `collapse` — convenience events
-- `control-click` — `'mention'` from the default mention control
-- `fullscreen` — fullscreen control clicked; host should open its overlay (modal / route)
+- `control-click` — `'mention'`, `'share'`, or `'more'`
+- `fullscreen` — fullscreen control clicked; host should open its overlay
 
 ### Body lifecycle
 
-The body slot mounts on the first expansion and stays mounted afterwards. Collapsing hides it with `v-show` so embedded apps / iframes are not destroyed automatically.
+The body slot mounts on the first expansion and stays mounted afterwards. Collapsing hides it with `v-show` so embedded apps / iframes are not destroyed automatically. A collapsed summary is visible only while the body is closed.
 
 ## Feed type content (body slot)
 
@@ -273,8 +275,8 @@ const items: FeedListItem[] = [
 - `skill` — requires `content: string`; optional `skill` (`SkillCardData`) for the built-in card
 - `file` — requires `fileUrl: string`
 - `card` — requires `source` (`{ card }` or `{ templateId, data }`). Do not add `approval` / `task` as extra `type`s.
-- Shell fields are picked from `FeedItemBaseProps` (`timestampDatetime`, `fullscreenControl`, `mentionControl`, `isNew`, …)
-- Optional `engagement` (`FeedItemEngagement`) drives the built-in meta footer (reactions / comments / reading time) at the end of an **expanded** item
+- Shell fields are picked from `FeedItemBaseProps` (`typeLabel`, `status`, `summary`, `mediaSrc`, `timestampDatetime`, `fullscreenControl`, `mentionControl`, `isNew`, …)
+- Optional `engagement` (`FeedItemEngagement`) renders the compact reactions / comments / reading-time row in the list expansion area, collapsed and expanded
 
 HTML/file rows get `fullscreenControl` by default and an unconstrained body max-height.
 `mentionControl` defaults to `true` when omitted.
@@ -282,7 +284,7 @@ HTML/file rows get `fullscreenControl` by default and an unconstrained body max-
 ### Slots
 
 - `header` — above the scroll region
-- `actions` / `controls` / `footer` — scoped `{ item }`, forwarded to `FeedItemBase` (`#footer` is shown only while the item body is open — use for reactions / comments)
+- `actions` / `controls` / `footer` — scoped `{ item }`, forwarded to `FeedItemBase` (`#footer` is shown only while the list body is open)
 - `empty` / `loading` / `loading-more` — replace defaults
 
 ### Events
@@ -339,19 +341,23 @@ function onAction(event: IdwCardActionEvent) {
 </template>
 ```
 
-### v1 elements
+### Elements
 
-Layout / content: `Text` (Markdown), `Image`, `ImageSet`, `FactSet`, `Container`, `ColumnSet` (2–3 columns), `Table`, `Media`, `Html`, `File`, `Skill`, `ActionSet`, `Badge`, `Icon`, `Progress`.
+Layout / content: `Text` (Markdown, including headings and lists), `Image` (`aspect`: `video` | `square`), `ImageSet`, `FactSet` (optional `progress`), `Note`, `Container`, `ColumnSet` (2–3 columns), `Table`, `Media` (feed video and audio players), `Html`, `File` (attachment row, optional `size`; menu opens or downloads `src`), `Skill` (tile; announcement text is a sibling `Text`), `ActionSet`, `Badge`, `Icon`, `Progress`.
 
-Inputs (inspired by Adaptive Cards `Input.*`, plus IDW widgets). Every input has `name` (collected on action), plus optional `label`, `hint`, `required`, `errorMessage`, `disabled`:
+Inputs bind library props. Every input has `name` (collected on action), plus optional `label`, `hint`, `required`, `error` (`errorMessage` still accepted), `disabled`:
 
 | Type | Renders as | Notes |
 |---|---|---|
-| `Input.Text` | `OrInputV3` / `OrTextareaV3` | `multiline`, `style`: text/email/url/tel/password |
+| `Input.Text` | `OrInputV3` | `style`: text/email/url/tel/password. `multiline` still renders `OrTextareaV3` |
+| `Input.Textarea` | `OrTextareaV3` | `rows`, `maxLength` |
 | `Input.Number` | `OrInputV3` | `min` / `max` / `step` |
 | `Input.Toggle` | `OrSwitchV3` | boolean |
 | `Input.Checkbox` | `OrCheckboxV3` | boolean |
-| `Input.ChoiceSet` | select / radio / checkbox group | `style`: compact / expanded / filtered; `multi` |
+| `Input.Select` | `OrSelectV3` | `options[]` (`label`, `value`, `disabled?`); `multiple`, `enableSearch`, `enableClear` |
+| `Input.RadioGroup` | `OrRadioGroupV3` | `options[]`; `direction`: `vertical` \| `horizontal`; `readonly` |
+| `Input.CheckboxGroup` | `OrCheckboxGroupV3` | `options[]`; `direction`: `vertical` \| `horizontal`; `readonly` |
+| `Input.ChoiceSet` | select, radios, or checkboxes | Deprecated. `style: "expanded"` is radios, or checkboxes when `multiple` is set |
 | `Input.Date` | `OrDatePickerV3` | ISO date string |
 | `Input.Time` | `OrTimePickerV3` | `HH:mm` |
 | `Input.DateTime` | `OrDateTimePickerV3` | ISO datetime |
@@ -360,9 +366,11 @@ Inputs (inspired by Adaptive Cards `Input.*`, plus IDW widgets). Every input has
 | `Input.Rating` | `OrRatingV3` | number |
 | `Input.Location` | address (+ optional lat/lng) | `{ address, lat?, lng? }` |
 
-Spacing: `none | xs | sm | md | lg | xl`. Omitted `spacing` defaults to `md` between siblings; the first item in a stack has no top gap. Text style: `caption | body | headline`. Tone: `default | emphasis | success | warning | attention`.
+Actions use `OrButtonV3` `variant` (`contained` | `outlined` | `text`), `color` (`primary` | `danger`), `disabled`, and optional `icon`. `style` `default` | `primary` | `destructive` still maps onto those props.
+
+Spacing: `none | xs | sm | md | lg | xl`. Omitted `spacing` defaults to `md` between siblings; the first item in a stack has no top gap. `horizontalAlignment` and `verticalAlignment`: `start` (default) | `center` | `end`. Horizontal alignment places the element in its row. Vertical alignment places it in the leftover height of a stretched column or container. Text style: `caption | body | headline`. Tone: `default | emphasis | success | warning | attention`. Progress `color`: `auto` | `primary` | `success` | `warning` | `error` (`tone` still accepted). `maxValue` is preferred over `max`.
 
-This is **not** Adaptive Cards JSON. We borrowed the input/container/action model (including ChoiceSet, Table, Media, ImageSet, ShowCard, ToggleVisibility) and mapped it onto or-components.
+This is **not** Adaptive Cards JSON. We borrowed the input/container/action model (including Table, Media, ImageSet, ShowCard, ToggleVisibility) and mapped it onto or-components. Choice fields are `Input.Select`, `Input.RadioGroup`, and `Input.CheckboxGroup`.
 
 Not in v1 (AC/Copilot extras we skipped on purpose): Refresh, Authentication, Carousel, Charts, `Data.Query` remote choices, `selectAction`, `RichTextBlock` runs, and `Action.Execute`. `Input.Location` has no or-component — it is address text plus optional lat/lng, not a map picker.