feat(svelte-ds-app-launchpad): Add Timeline

[steciuk]

Done

• Add a new Timeline component for rendering chronological activity entries.
• Add Timeline.Event with support for avatar/icon markers, marker sizing, title-row content, and optional event body content.
• Add Timeline.Event.TitleRow to format leading text, event summary text, and date metadata.
• Add Timeline.HiddenEvents and Timeline.HiddenEvents.Link to represent collapsed event groups with one or more reveal actions.

QA

• bun run check && bun run test
• verify Components/Timeline in Storybook
• verify Components/Timeline/Event in Storybook
• verify Components/Timeline/Event/TitleRow in Storybook
• verify Components/Timeline/HiddenEvents in Storybook
• verify Components/Timeline/HiddenEvents/Link in Storybook

PR readiness check

• PR should have one of the following labels:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• PR title follows the Conventional Commits format.
• The code follows the appropriate code standards
• All packages define the required scripts in package.json:
  • All packages: check, check:fix, and test.
  • Packages with build steps: build to build the package for development or distribution, build:all to build all artifacts. See CONTRIBUTING.md for details.
• If this PR introduces a new package: first-time publish has been done manually from inside the package directory using npm publish --access public (first-time publishing is not automated). Run bun run publish:status from the repo root to verify.

Screenshots

[Copilot]

Pull request overview

Adds a new Timeline component suite to @canonical/svelte-ds-app-launchpad for rendering chronological activity feeds, including events, a standardized title row, and a “hidden events” row with reveal links.

Changes:

• Introduces Timeline root plus Timeline.Event, Timeline.Event.TitleRow, Timeline.HiddenEvents, and Timeline.HiddenEvents.Link.
• Adds styling for timeline layout, event markers/lines, title-row formatting, and hidden-event rows.
• Adds Storybook stories and both browser + SSR Vitest coverage for the new components.

Reviewed changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/types.ts	Adds exported TimelineProps typing for the root component.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.svelte.test.ts	Browser rendering/attribute tests for Timeline.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.svelte	Implements the root <ol> timeline container and component docs.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.stories.svelte	Storybook examples for the full Timeline composition.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.ssr.test.ts	SSR smoke + attribute tests for Timeline.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/styles.css	Base grid layout + spacing tokens for the timeline container.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/index.ts	Exports Timeline compound component and re-exported types.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/index.ts	Barrel for Event and HiddenEvents.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/types.ts	HiddenEventsProps typing (incl. numHidden).
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/test.fixtures.svelte	Snippet fixtures for HiddenEvents link rendering tests.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/styles.css	Styling for the hidden-events row and its continuation line.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/index.ts	Exports HiddenEvents compound component with .Link.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/HiddenEvents.svelte.test.ts	Browser rendering/attribute/link tests for HiddenEvents.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/HiddenEvents.svelte	Implements the hidden-events list item and link slot.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/HiddenEvents.stories.svelte	Storybook coverage for HiddenEvents placements and link counts.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/HiddenEvents.ssr.test.ts	SSR tests for HiddenEvents and its link children.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/types.ts	Typing for the HiddenEvents Link wrapper props.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/styles.css	Styling for link + separator bullet.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/Link.svelte.test.ts	Browser tests for HiddenEvents.Link wrapper behavior.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/Link.svelte	Implements the Link wrapper with a decorative separator bullet.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/Link.stories.svelte	Storybook entry for HiddenEvents.Link.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/Link.ssr.test.ts	SSR tests for HiddenEvents.Link wrapper.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/Link/index.ts	Barrel export for HiddenEvents.Link.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/HiddenEvents/common/index.ts	Barrel for HiddenEvents common subcomponents.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/types.ts	EventProps typing for marker/titleRow/body snippets.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/styles.css	Grid + marker sizing + vertical line alignment styling for events.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/index.ts	Exports Event compound component with .TitleRow.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/Event.svelte.test.ts	Browser tests for Event marker/titleRow/children behavior.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/Event.svelte	Implements a timeline event list item with marker + content.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/Event.stories.svelte	Storybook scenarios for Event marker variants and content.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/Event.ssr.test.ts	SSR tests for Event rendering and marker classes.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/types.ts	Typing for TitleRow leading text, summary, and date snippets.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/TitleRow.svelte.test.ts	Browser tests for TitleRow rendering + attributes.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/TitleRow.svelte	Implements the standardized event title row layout.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/TitleRow.stories.svelte	Storybook entry for Event.TitleRow.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/TitleRow.ssr.test.ts	SSR tests for TitleRow rendering + attributes.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/styles.css	TitleRow layout styling + token placeholders.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/TitleRow/index.ts	Barrel export for TitleRow.
packages/svelte/ds-app-launchpad/src/lib/components/Timeline/common/Event/common/index.ts	Barrel for Event common subcomponents.
packages/svelte/ds-app-launchpad/src/lib/components/index.ts	Re-exports Timeline from the components entrypoint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jmuzina]

Approving with one question I'm curious about

[jmuzina]

I'm curious, why make date a snippet that can be fully replaced instead of accepting a Date or maybe also a string and then taking care of how to render that ourselves instead of expecting the user to? We could abstract the use of RelativeDateTime away... but maybe that would be too restrictive

[steciuk]

but maybe that would be too restrictive

That was our intuition. We didn't want to make assumptions about the date formatting and wanted to avoid forcing date-related configuration props onto the TitleRow component. Expecting the consumer to decide whether they want to go with the DateTime, RelativeDateTime or any other means of reflecting the time seemed like a safer move.