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

packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.ssr.test.ts

@@ -0,0 +1,54 @@
+/* @canonical/generator-ds 0.10.0-experimental.5 */
+
+import type { RenderResult } from "@canonical/svelte-ssr-test";
+import { render } from "@canonical/svelte-ssr-test";
+import type { ComponentProps } from "svelte";
+import { describe, expect, it } from "vitest";
+import Component from "./Timeline.svelte";
+
+describe("Timeline SSR", () => {
+  const baseProps = {} satisfies ComponentProps<typeof Component>;
+
+  it("doesn't throw", () => {
+    expect(() => {
+      render(Component, { props: { ...baseProps } });
+    }).not.toThrow();
+  });
+
+  it("renders", () => {
+    const page = render(Component, { props: { ...baseProps } });
+    expect(componentLocator(page)).toBeInstanceOf(page.window.HTMLOListElement);
+  });
+
+  describe("attributes", () => {
+    it.each([
+      ["id", "test-id"],
+      ["aria-label", "test-aria-label"],
+    ])("applies %s", (attribute, expected) => {
+      const page = render(Component, {
+        props: { ...baseProps, [attribute]: expected },
+      });
+      expect(componentLocator(page).getAttribute(attribute)).toBe(expected);
+    });
+
+    it("applies classes", () => {
+      const page = render(Component, {
+        props: { ...baseProps, class: "test-class" },
+      });
+      expect(componentLocator(page).classList).toContain("test-class");
+      expect(componentLocator(page).classList).toContain("ds");
+      expect(componentLocator(page).classList).toContain("timeline");
+    });
+
+    it("applies style", () => {
+      const page = render(Component, {
+        props: { ...baseProps, style: "color: orange;" },
+      });
+      expect(componentLocator(page).style.color).toBe("orange");
+    });
+  });
+});
+
+function componentLocator(page: RenderResult): HTMLElement {
+  return page.getByRole("list");
+}

packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.stories.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+  import { EditIcon, ForkIcon, SettingsIcon } from "@canonical/svelte-icons";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { DateTime } from "../DateTime/index.js";
+  import { Timeline } from "./index.js";
+
+  const { Story } = defineMeta({
+    title: "Components/Timeline",
+    tags: ["autodocs"],
+    component: Timeline,
+  });
+
+  const user = {
+    userName: "Alvarez Daniella",
+    userAvatarUrl: "https://assets.ubuntu.com/v1/fca94c45-snap+icon.png",
+  };
+</script>
+
+<Story name="Default" asChild>
+  <Timeline>
+    <Timeline.Event marker={user} markerSize="large">
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow leadingText={user.userName}>
+          added 1 commit and filed 2 issues
+          {#snippet date()}
+            <DateTime date="2023-03-15T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+      Implementation of a new feature for Launchpad bug templates
+    </Timeline.Event>
+    <Timeline.Event>
+      {#snippet marker()}
+        <EditIcon />
+      {/snippet}
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow leadingText={user.userName}>
+          did things that are really complex and will probably take a while to
+          explain
+          {#snippet date()}
+            <DateTime date="2023-03-12T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+      <div
+        class="placeholder-box"
+        style="height: 50px; display: grid; place-content: center;"
+      >
+        Here is some custom content
+      </div>
+    </Timeline.Event>
+    <Timeline.Event>
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow leadingText={user.userName}>
+          did some amazing things
+          {#snippet date()}
+            <DateTime date="2023-03-13T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+    </Timeline.Event>
+    <Timeline.Event>
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow leadingText={user.userName}>
+          did so many things that it could be a blog post, but let's keep it
+          short for now and just say that it was a lot
+          {#snippet date()}
+            <DateTime date="2023-03-14T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+    </Timeline.Event>
+    <Timeline.Event markerSize="small">
+      {#snippet marker()}
+        <ForkIcon />
+      {/snippet}
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow leadingText={user.userName}>
+          raised a flag
+          {#snippet date()}
+            <DateTime date="2023-03-15T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+      The flag was raised
+    </Timeline.Event>
+    <Timeline.HiddenEvents numHidden={3}>
+      <Timeline.HiddenEvents.Link href="?show-all"
+        >Show all</Timeline.HiddenEvents.Link
+      >
+    </Timeline.HiddenEvents>
+    <Timeline.Event markerSize="large">
+      {#snippet marker()}
+        <SettingsIcon />
+      {/snippet}
+      {#snippet titleRow()}
+        <Timeline.Event.TitleRow>
+          The MP was <span style="color: var(--lp-color-text-default)"
+            >Merged</span
+          >
+          {#snippet date()}
+            <DateTime date="2023-03-16T12:00:00Z" />
+          {/snippet}
+        </Timeline.Event.TitleRow>
+      {/snippet}
+    </Timeline.Event>
+    <Timeline.Event marker={{ userName: "John Doe" }} markerSize="large">
+      <div
+        class="placeholder-box"
+        style="height: 150px; display: grid; place-content: center;"
+      >
+        Content goes here
+      </div>
+    </Timeline.Event>
+    <Timeline.HiddenEvents numHidden={888}>
+      <Timeline.HiddenEvents.Link href="?show-more"
+        >Show more</Timeline.HiddenEvents.Link
+      >
+      <Timeline.HiddenEvents.Link href="?show-all"
+        >Show all</Timeline.HiddenEvents.Link
+      >
+    </Timeline.HiddenEvents>
+  </Timeline>
+</Story>

packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.svelte

@@ -0,0 +1,51 @@
+<!-- @canonical/generator-ds 0.10.0-experimental.2 -->
+
+<script lang="ts">
+  import type { TimelineProps } from "./types.js";
+  import "./styles.css";
+
+  const componentCssClassName = "ds timeline";
+
+  let { class: className, children, ...rest }: TimelineProps = $props();
+</script>
+
+<ol class={[componentCssClassName, className]} {...rest}>
+  {@render children?.()}
+</ol>
+
+<!-- @component
+`Timeline` component represents a vertical timeline that displays a series of events in chronological order.
+
+## Example Usage
+```svelte
+<Timeline>
+  <Timeline.Event marker={{userName: "Alvarez Daniella"}} markerSize="large">
+    {#snippet titleRow()}
+      <Timeline.Event.TitleRow leadingText="Alvarez Daniella">
+        did some cool stuff
+        {#snippet date()}
+          <DateTime date="2023-03-15" />
+        {/snippet}
+      </Timeline.Event.TitleRow>
+    {/snippet}
+    Description of the stuff that was done.
+  </Timeline.Event>
+  <Timeline.Event>
+    {#snippet marker()}
+      <StarredIcon />
+    {/snippet}
+    {#snippet titleRow()}
+      <Timeline.Event.TitleRow leadingText="Alvarez Daniella">
+        did other amazing things
+        {#snippet date()}
+          <DateTime date="2023-03-15" />
+        {/snippet}
+      </Timeline.Event.TitleRow>
+    {/snippet}
+  </Timeline.Event>
+  <Timeline.HiddenEvents numHidden={3}>
+    <Timeline.HiddenEvents.Link href="?show-all">Show all</Timeline.HiddenEvents.Link>
+  </Timeline.HiddenEvents>
+</Timeline>
+```
+-->

packages/svelte/ds-app-launchpad/src/lib/components/Timeline/Timeline.svelte.test.ts

@@ -0,0 +1,50 @@
+/* @canonical/generator-ds 0.10.0-experimental.5 */
+
+import type { ComponentProps } from "svelte";
+import { describe, expect, it } from "vitest";
+import type { Locator } from "vitest/browser";
+import type { RenderResult } from "vitest-browser-svelte";
+import { render } from "vitest-browser-svelte";
+import Component from "./Timeline.svelte";
+
+describe("Timeline component", () => {
+  const baseProps = {} satisfies ComponentProps<typeof Component>;
+
+  it("renders", async () => {
+    const page = render(Component, { ...baseProps });
+    await expect.element(componentLocator(page)).toBeInTheDocument();
+  });
+
+  describe("attributes", () => {
+    it.each([
+      ["id", "test-id"],
+      ["aria-label", "test-aria-label"],
+    ])("applies %s", async (attribute, expected) => {
+      const page = render(Component, { ...baseProps, [attribute]: expected });
+      await expect
+        .element(componentLocator(page))
+        .toHaveAttribute(attribute, expected);
+    });
+
+    it("applies classes", async () => {
+      const page = render(Component, { ...baseProps, class: "test-class" });
+      await expect.element(componentLocator(page)).toHaveClass("test-class");
+      await expect.element(componentLocator(page)).toHaveClass("ds");
+      await expect.element(componentLocator(page)).toHaveClass("timeline");
+    });
+
+    it("applies style", async () => {
+      const page = render(Component, {
+        ...baseProps,
+        style: "color: orange;",
+      });
+      await expect
+        .element(componentLocator(page))
+        .toHaveStyle({ color: "orange" });
+    });
+  });
+});
+
+function componentLocator(page: RenderResult<typeof Component>): Locator {
+  return page.getByRole("list");
+}