Merge pull request #23 from prismicio/xru/support-link-text

feat: support link text

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.0-alpha.0](https://github.com/prismicio/prismic-svelte/compare/v1.2.0...v1.3.0-alpha.0) (2024-09-10)
+
+
+### Features
+
+* support link text ([04d6a51](https://github.com/prismicio/prismic-svelte/commit/04d6a510f4629faed0cf9c8a1afa4e24b8819537))
+
 ## [1.2.0](https://github.com/prismicio/prismic-svelte/compare/v1.1.1...v1.2.0) (2024-05-28)
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "1.2.0",
+	"version": "1.3.0-alpha.0",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -65,8 +65,8 @@
 		"esm-env": "^1.0.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.4.0",
-		"@prismicio/mock": "^0.3.1",
+		"@prismicio/client": "^7.11.0",
+		"@prismicio/mock": "^0.4.0",
 		"@size-limit/preset-small-lib": "^11.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.2.3",

src/PrismicLink.svelte

@@ -49,9 +49,7 @@
 
   @example Rendering a Link field:
 	```svelte
-		<PrismicLink field={document.data.example_link}>
-			Example anchor text.
-		</PrismicLink>
+		<PrismicLink field={document.data.example_link} />
 	```
 -->
 
@@ -62,5 +60,5 @@
 	on:click
 	{...$$restProps}
 >
-	<slot />
+	<slot>{field?.text}</slot>
 </a>

test/PrismicLink.test.ts

@@ -0,0 +1,33 @@
+// @vitest-environment happy-dom
+import { expect, it } from "vitest";
+
+import { render } from "@testing-library/svelte";
+
+import PrismicLinkTestWrapper from "./PrismicLinkTestWrapper.svelte";
+
+it("renders the link's text if no children are provided", (ctx) => {
+	const model = ctx.mock.model.link({
+		allowText: true,
+		allowTargetBlank: false,
+	});
+	const field = ctx.mock.value.link({ type: "Web", model, withText: true });
+	const { container } = render(PrismicLinkTestWrapper, { field });
+
+	expect(container.innerHTML).toBe(
+		`<div><a href="${field.url}" rel="noreferrer">${field.text}</a></div>`,
+	);
+});
+
+it("renders the given children, overriding the link's text", (ctx) => {
+	const model = ctx.mock.model.link({
+		allowText: true,
+		allowTargetBlank: false,
+	});
+	const field = ctx.mock.value.link({ type: "Web", model, withText: true });
+	const children = ctx.mock.value.keyText();
+	const { container } = render(PrismicLinkTestWrapper, { field, children });
+
+	expect(container.innerHTML).toBe(
+		`<div><a href="${field.url}" rel="noreferrer">${children}</a></div>`,
+	);
+});

test/PrismicLinkTestWrapper.svelte

@@ -0,0 +1,18 @@
+<!--
+This file is a wrapper for the PrismicLink component to be used in tests as
+passing slot content to the PrismicLink component is not easy in tests.
+-->
+
+<script lang="ts">
+	import { FilledLinkToWebField } from "@prismicio/client";
+	import { PrismicLink } from "../src";
+
+	export let field: FilledLinkToWebField;
+	export let children: string | undefined = undefined;
+</script>
+
+{#if children}
+	<PrismicLink {field}>{children}</PrismicLink>
+{:else}
+	<PrismicLink {field} />
+{/if}