diff --git a/package-lock.json b/package-lock.json index a65d29f95..b3ba4149e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,12 +17,13 @@ "@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", "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3", "@types/lodash.debounce": "^4.0.6", "@types/lodash.sortby": "^4.7.6", "@types/lunr": "^2.3.4", @@ -3276,9 +3277,9 @@ } }, "node_modules/@microbit/ui": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.1.1.tgz", - "integrity": "sha512-m/idP+sg58HLZOk6LiJknaQxVYNShXOxh9RLVnXVE+G1TYrRAwuLg17131YARve3DJV9mga3U9n/Mcr+nK6SNQ==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.2.0.tgz", + "integrity": "sha512-LOSUj/466E9grrMyEE+IgLx0aDWsL40gJ9TYoltRvBZtos7nc1PTteAFhAcV2yBwVOtoeIpFz821wDoFtrIuiw==", "license": "MIT", "peerDependencies": { "@pandacss/dev": "^1.11.4", @@ -3290,15 +3291,15 @@ } }, "node_modules/@microbit/ui-patterns": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.1.1.tgz", - "integrity": "sha512-xxi8fxvzE5Jx1v+dvPZEID3EDfM7oOeG09fxPb+AqxQto6dJiDyr+DLeJrUQPxm3D/sDhmEqk2aOCsBjF68AKQ==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.2.0.tgz", + "integrity": "sha512-7xjvW/daJtr+23XvuScLXLP6+1DPROaRppie3rNZ96MOQciCxlfL0Ld6ZXpolH1WLYIPXHMLTL78nDYpgW1QtA==", "license": "MIT", "dependencies": { "@formatjs/intl-localematcher": "^0.8.0" }, "peerDependencies": { - "@microbit/ui": "^0.1.0", + "@microbit/ui": "^0.2.0", "@pandacss/dev": "^1.11.4", "react": "^18.3.1", "react-icons": "^4.12.0 || ^5.0.0", diff --git a/package.json b/package.json index d1ab9ab5d..e1d133340 100644 --- a/package.json +++ b/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", diff --git a/src/common/use-action-feedback.tsx b/src/common/use-action-feedback.tsx index 2b04a004f..32722f5c9 100644 --- a/src/common/use-action-feedback.tsx +++ b/src/common/use-action-feedback.tsx @@ -97,7 +97,6 @@ export class ActionFeedback { href={deployment.supportLink} target="_blank" rel="noopener" - textDecoration="underline" > {chunks} diff --git a/src/documentation/common/DocString.test.tsx b/src/documentation/common/DocString.test.tsx index 63b7c3d86..0e34e27f7 100644 --- a/src/documentation/common/DocString.test.tsx +++ b/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(); expect(view.baseElement.innerHTML).toMatchInlineSnapshot(` - "
testLib.Validator.read_write_prop (property)
+      "
testLib.Validator.read_write_prop (property)
       

The read-write property.

diff --git a/src/documentation/common/DocString.tsx b/src/documentation/common/DocString.tsx index 09b856f5f..f94108543 100644 --- a/src/documentation/common/DocString.tsx +++ b/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 ( diff --git a/src/documentation/common/DocumentationContent.test.tsx b/src/documentation/common/DocumentationContent.test.tsx index 83fa5dbe6..906054d77 100644 --- a/src/documentation/common/DocumentationContent.test.tsx +++ b/src/documentation/common/DocumentationContent.test.tsx @@ -41,7 +41,7 @@ describe("DocumentationContent", () => { ]; const view = render(); expect(view.container.innerHTML).toMatchInlineSnapshot( - `""` + `""` ); }); diff --git a/src/documentation/ideas/IdeasDocumentation.tsx b/src/documentation/ideas/IdeasDocumentation.tsx index 44a3045e0..6502f6fca 100644 --- a/src/documentation/ideas/IdeasDocumentation.tsx +++ b/src/documentation/ideas/IdeasDocumentation.tsx @@ -176,6 +176,7 @@ const ActiveLevel = ({ values={{ link: (chunks: ReactNode) => ( { link: (chunks: ReactNode) => (