CourseUpdates

learning · static (no JavaScript) · no children. All components: component playground.

Description for the model

Summary on the course page of what changed for a returning learner: lessons updated since they completed them, retired lessons, new lessons since they finished, and lessons whose update is under review. Each entry names its status in words. Filled by the app; authors do not place it.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "CourseUpdates",
  "props": {
    "updated": [
      {
        "title": "Brewing ratios",
        "href": "/learn/1/10",
        "date": "2026-10-09T10:00:00Z"
      }
    ],
    "retired": [
      {
        "title": "Old grinder guide"
      }
    ],
    "extended": [
      {
        "title": "Cold brew",
        "href": "/learn/1/12"
      }
    ],
    "pending": [
      {
        "title": "Water quality",
        "href": "/learn/1/11",
        "since": "2026-10-09T10:00:00Z"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
title	string		Heading. max length 120, default "What changed in this course"
updated	array of objects		Lessons updated since the learner completed them. max 60 items
updated[].title	string	yes	Lesson title. max length 200
updated[].href	string (href)	yes	Lesson link. max length 2048
updated[].date	string (date-time)		ISO 8601 date. max length 40
retired	array of objects		Lessons removed from the course that the learner had completed. max 60 items
retired[].title	string	yes	Lesson title. max length 200
retired[].date	string (date-time)		ISO 8601 date. max length 40
extended	array of objects		Lessons added after the learner finished the course. max 60 items
extended[].title	string	yes	Lesson title. max length 200
extended[].href	string (href)	yes	Lesson link. max length 2048
pending	array of objects		Lessons whose source changed and whose update is under review. max 60 items
pending[].title	string	yes	Lesson title. max length 200
pending[].href	string (href)	yes	Lesson link. max length 2048
pending[].since	string (date-time)		ISO 8601 date. max length 40
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Updated since you completed it, 9 October 2026: Brewing ratios
New since you finished: Cold brew
Retired lesson, no longer part of the course: Old grinder guide
Water quality: The source of this lesson changed on 9 October 2026; an update is under review.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "updated": "none"
}

Issues:

• /updated expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 20 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.