Add underlines to links in prose

package.json

@@ -21,8 +21,8 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "^0.1.1",
-    "@microbit/ui-patterns": "^0.1.1",
+    "@microbit/ui": "^0.2.0",
+    "@microbit/ui-patterns": "^0.2.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@testing-library/jest-dom": "^5.14.1",

src/common/use-action-feedback.tsx

@@ -97,7 +97,6 @@ export class ActionFeedback {
                   href={deployment.supportLink}
                   target="_blank"
                   rel="noopener"
-                  textDecoration="underline"
                 >
                   {chunks}
                 </MaybeLink>

src/documentation/common/DocString.test.tsx

@@ -12,7 +12,7 @@ describe("DocString", () => {
       "```python\ntestLib.Validator.read_write_prop (property)\n```\n---\nThe read-write property.";
     const view = render(<DocString value={markdown} />);
     expect(view.baseElement.innerHTML).toMatchInlineSnapshot(`
-      "<div><div class="docs-spacing docs-code"><pre><code class="language-python">testLib.Validator.read_write_prop (property)
+      "<div><div class="docs-spacing docs-code [&amp;_a]:td_underline"><pre><code class="language-python">testLib.Validator.read_write_prop (property)
       </code></pre>
       <hr>
       <p>The read-write property.</p>

src/documentation/common/DocString.tsx

@@ -3,11 +3,18 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { css, cx } from "@microbit/ui";
 import React from "react";
 import { styled } from "styled-system/jsx";
 import { SystemStyleObject } from "styled-system/types";
 import { renderMarkdown } from "../../editor/codemirror/language-server/documentation";
 
+// Docstring links (autolinked URLs in the type stubs) must be marked by more
+// than colour. Scoped here so the CodeMirror popups' anchors stay bare.
+const underlineLinksClass = css({
+  "& a": { textDecoration: "underline" },
+});
+
 export interface DocStringProps {
   value: string;
   /** Use span inside phrasing content (e.g. a heading subtitle). */
@@ -21,7 +28,7 @@ const DocString = React.memo(
     const Component = as === "span" ? styled.span : styled.div;
     return (
       <Component
-        className="docs-spacing docs-code"
+        className={cx("docs-spacing docs-code", underlineLinksClass)}
         dangerouslySetInnerHTML={html}
         css={cssProp}
       />

src/documentation/common/DocumentationContent.test.tsx

@@ -41,7 +41,7 @@ describe("DocumentationContent", () => {
     ];
     const view = render(<DocumentationContent blocks={content} />);
     expect(view.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="d_flex flex-d_column gap_3 mt_3"><p><a href="https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4" target="_blank" rel="nofollow noopener" class="cursor_pointer td_none ring_none trs-prop_background-color,_border-color,_color,_fill,_stroke,_opacity,_box-shadow,_transform trs-dur_normal hover:td_underline focusVisible:focus-ring_outline c_brand.600">Read more about ASCII<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w_1em h_1em d_inline-block lh_1em flex-sh_0 fill_currentColor va_middle mb_0.333em ml_1" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg></a>.</p></div>"`
+      `"<div class="d_flex flex-d_column gap_3 mt_3"><p><a href="https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4" target="_blank" rel="nofollow noopener" class="link c_brand.600">Read more about ASCII<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w_1em h_1em d_inline-block lh_1em flex-sh_0 fill_currentColor va_middle mb_0.333em ml_1" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg></a>.</p></div>"`
     );
   });
 

src/documentation/ideas/IdeasDocumentation.tsx

@@ -176,6 +176,7 @@ const ActiveLevel = ({
           values={{
             link: (chunks: ReactNode) => (
               <Link
+                variant="standalone"
                 color="brand.500"
                 href={microbitOrgMiciProjectsUrl(languageId)}
                 target="_blank"

src/documentation/search/SearchResultList.tsx

@@ -66,6 +66,7 @@ const SearchResultItem = ({
   return (
     <Stack pl="3px" pr="3px">
       <Link
+        variant="standalone"
         bgColor={viewedResults.includes(id) ? "#efedf5" : "unset"}
         borderRadius="md"
         href={url}

src/editor/ModuleOverlay.tsx

@@ -97,7 +97,8 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
               link: (chunks: ReactNode) => (
                 <Button
                   variant="link"
-                  css={{ color: "brand.500" }}
+                  // In prose, so marked by more than colour.
+                  css={{ color: "brand.500", textDecoration: "underline" }}
                   onPress={handleShowSettings}
                 >
                   {chunks}

src/serial/TracebackLink.tsx

@@ -33,7 +33,13 @@ const TracebackLink = ({ traceback, children }: TracebackLinkProps) => {
     [setSelection, traceback]
   );
   return (
-    <Link data-testid="traceback-link" onClick={handleClick}>
+    // Standalone: only the location span (see MaybeTracebackLink) is
+    // underlined, not the error text sharing the click target.
+    <Link
+      variant="standalone"
+      data-testid="traceback-link"
+      onClick={handleClick}
+    >
       {children}
     </Link>
   );