Backport new UI kit design system from garden

Co-authored-by: Julien Donck <donckjulien@gmail.com>

tests/e2e/clipboard.spec.ts

@@ -4,6 +4,7 @@ import {
   sourceBrowsingRid,
   test,
   cobUrl,
+  markdownUrl,
 } from "@tests/support/fixtures.js";
 
 // We explicitly run all clipboard tests withing the context of a single test
@@ -38,14 +39,22 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
   // `rad clone` URL.
   {
     await page.getByRole("button", { name: "Clone" }).first().click();
-    await page.getByText("rad clone").locator(".clipboard").first().click();
+    await page
+      .locator(".cmd:has-text('rad clone')")
+      .locator(".clipboard")
+      .first()
+      .click();
     await expectClipboard(`rad clone ${sourceBrowsingRid}`);
   }
 
   // `git clone` URL.
   {
     await page.getByRole("button", { name: "Git" }).click();
-    await page.getByText("git clone").locator(".clipboard").first().click();
+    await page
+      .locator(".cmd:has-text('git clone')")
+      .locator(".clipboard")
+      .first()
+      .click();
     await expectClipboard(
       `git clone http://localhost/${sourceBrowsingRid.replace(
         "rad:",
@@ -66,6 +75,19 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
     await expectClipboard("783d33c5b14e13234d4d7affa98bd0b52d1b1ea3");
   }
 
+  // Markdown code block copy.
+  {
+    await page.goto(`${markdownUrl}/tree/main/cheatsheet.md#code`);
+    const codeBlock = page
+      .locator("div.pre-wrapper")
+      .filter({ hasText: "Inline `code` has `back-ticks around` it." })
+      .first();
+    await codeBlock.hover();
+    await codeBlock.getByRole("button", { name: "Copy" }).click();
+    await page.pause();
+    await expectClipboard("Inline `code` has `back-ticks around` it.\n");
+  }
+
   // Clear the system clipboard contents so developers don't wonder why there's
   // random stuff in their clipboard after running tests.
   await page.evaluate<string>("navigator.clipboard.writeText('')");

tests/e2e/node.spec.ts

@@ -100,7 +100,7 @@ test("edit seed bookmarks", async ({ page }) => {
   await expect(page.locator(".dropdown > .dropdown-item")).toHaveCount(2);
 
   // Test that new seed is persisted and opened when we go to the landing page.
-  await page.getByRole("link", { name: "Radicle logo" }).click();
+  await page.getByRole("link", { name: "Home" }).click();
   await expect(page.getByText("seed.example.tld").first()).toBeVisible();
 
   // Test removing a bookmark.

tests/e2e/repo.spec.ts

@@ -183,22 +183,34 @@ test("files with special characters in the filename", async ({ page }) => {
   await sourceTree.getByText("special").click();
 
   await sourceTree.getByText("+plus+").click();
-  await expect(page.getByRole("banner")).toContainText("+plus");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("+plus");
 
   await sourceTree.getByText("-dash-").click();
-  await expect(page.getByRole("banner")).toContainText("-dash-");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("-dash-");
 
   await sourceTree.getByText(":colon:").click();
-  await expect(page.getByRole("banner")).toContainText(":colon:");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText(":colon:");
 
   await sourceTree.getByText(";semicolon;").click();
-  await expect(page.getByRole("banner")).toContainText(";semicolon;");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText(";semicolon;");
 
   await sourceTree.getByText("@at@").click();
-  await expect(page.getByRole("banner")).toContainText("@at@");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("@at@");
 
   await sourceTree.getByText("_underscore_").click();
-  await expect(page.getByRole("banner")).toContainText("_underscore_");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("_underscore_");
 
   // TODO: fix these errors in `radicle-httpd` for the following edge cases.
   //
@@ -210,13 +222,19 @@ test("files with special characters in the filename", async ({ page }) => {
   // );
 
   await sourceTree.getByText("spaces are okay").click();
-  await expect(page.getByRole("banner")).toContainText("spaces are okay");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("spaces are okay");
 
   await sourceTree.getByText("~tilde~").click();
-  await expect(page.getByRole("banner")).toContainText("~tilde~");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("~tilde~");
 
   await sourceTree.getByText("👹👹👹").click();
-  await expect(page.getByRole("banner")).toContainText("👹👹👹");
+  await expect(
+    page.getByRole("navigation", { name: "Breadcrumb" }),
+  ).toContainText("👹👹👹");
 });
 
 test("binary files", async ({ page }) => {

tests/e2e/repo/commits.spec.ts

@@ -198,10 +198,7 @@ test("pushing changes while viewing history", async ({ page, peerManager }) => {
   const branchSelectorCommitButton = page.getByTitle("Current HEAD").first();
   await expect(branchSelectorCommitButton).toHaveText("516fa74 first change");
 
-  await page
-    .getByRole("banner")
-    .getByRole("link", { name: "alice-project" })
-    .click();
+  await page.getByRole("link", { name: "alice-project" }).nth(1).click();
   await expect(page).toHaveURL(`${alice.uiUrl()}/${rid}`);
   await page.getByRole("link", { name: "Commits 2" }).click();
 

tests/e2e/router.spec.ts

@@ -35,7 +35,7 @@ test("navigation between node and repo pages", async ({ page }) => {
   await expectBackAndForwardNavigationWorks("/nodes/localhost", page);
   await expectUrlPersistsReload(page);
 
-  await page.getByRole("link", { name: "Radicle logo localhost" }).click();
+  await page.getByRole("link", { name: "Home" }).click();
   await expect(page).toHaveURL("/nodes/localhost");
 });
 

tests/e2e/theme.spec.ts

@@ -17,11 +17,13 @@ test("default theme", async ({ page }) => {
 test("theme persistence", async ({ page }) => {
   await page.goto(sourceBrowsingFixture);
   await expect(
-    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+    page
+      .getByRole("navigation", { name: "Breadcrumb" })
+      .getByRole("link", { name: "source-browsing" }),
   ).toBeVisible();
   await page.getByRole("button", { name: "Settings" }).click();
 
-  await page.getByText("System").click();
+  await page.getByRole("button", { name: "Code Font System" }).click();
   await page.getByRole("button", { name: "Light Mode" }).click();
 
   await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
@@ -36,7 +38,9 @@ test("theme persistence", async ({ page }) => {
 test("change theme", async ({ page }) => {
   await page.goto(sourceBrowsingFixture);
   await expect(
-    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+    page
+      .getByRole("navigation", { name: "Breadcrumb" })
+      .getByRole("link", { name: "source-browsing" }),
   ).toBeVisible();
   await page.getByRole("button", { name: "Settings" }).click();
 
@@ -44,35 +48,35 @@ test("change theme", async ({ page }) => {
   await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
   await expect(page.locator("body")).toHaveCSS(
     "background-color",
-    "rgb(245, 245, 255)",
+    "rgb(248, 249, 250)",
   );
   // Source highlighting reacts to theme change.
-  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(35, 37, 99)");
+  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(11, 13, 18)");
 
   await page.getByRole("button", { name: "Dark Mode" }).click();
   await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
   await expect(page.locator("body")).toHaveCSS(
     "background-color",
-    "rgb(10, 13, 16)",
+    "rgb(0, 6, 15)",
   );
   // Source highlighting reacts to theme change.
-  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(249, 249, 251)");
+  await expect(page.getByText("() {")).toHaveCSS("color", "rgb(255, 255, 255)");
 });
 
 test("change code font", async ({ page }) => {
   await page.goto(sourceBrowsingFixture);
   await expect(
-    page.getByRole("banner").getByRole("link", { name: "source-browsing" }),
+    page
+      .getByRole("navigation", { name: "Breadcrumb" })
+      .getByRole("link", { name: "source-browsing" }),
   ).toBeVisible();
 
   await page.getByRole("button", { name: "Settings" }).click();
 
-  await page.getByText("System").click();
-  await expect(page.getByText("System")).toHaveClass(/selected/);
+  await page.getByRole("button", { name: "Code Font System" }).click();
   await expect(page.locator("html")).toHaveAttribute("data-codefont", "system");
 
-  await page.getByText("JetBrains Mono").click();
-  await expect(page.getByText("JetBrains Mono")).toHaveClass(/selected/);
+  await page.getByRole("button", { name: "Code Font JetBrains Mono" }).click();
   await expect(page.locator("html")).toHaveAttribute(
     "data-codefont",
     "jetbrains",

tests/support/fixtures.ts

@@ -88,7 +88,7 @@ export const test = base.extend<{
         route => {
           return route.fulfill({
             status: 200,
-            path: "./public/radicle.svg",
+            path: "./public/favicon.png",
           });
         },
       );